/* ============================================================
   ANA CHAMORRO PORTFOLIO — RESPONSIVE OVERRIDES
   Aplica a TODAS las páginas. Cargar DESPUÉS del CSS inline.
   ============================================================ */

/* ─── TABLET / MOBILE BASE (≤ 1100px) ───────────────────── */
@media (max-width: 1100px) {

  /* ── INDEX.HTML ─────────────────────────────────────── */
  /* Hero 1 col centrado */
  .hero {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 48px !important;
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
  .hero-left { align-items: center; }
  .hero-name-block { text-align: center; }
  .hero-right { order: -1; }
  .hero-ctas { justify-content: center; flex-wrap: wrap; }

  /* Presentación: imagen no full-bleed */
  #presentacion { padding: 60px 0 !important; }
  .presentacion-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    min-height: auto !important;
    padding: 0 24px !important;
  }
  .presentacion-inner > div:first-child { padding: 20px 0 !important; text-align: center; }
  .presentacion-inner .btn { margin: 0 auto !important; }
  .presentacion-body { text-align: justify !important; text-align-last: center !important; hyphens: auto; }
  .presentacion-img {
    max-height: 480px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Proyectos destacados — carrusel se ve igual */
  .proyectos-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* IA Section — fondo completamente blanco, sin franjas */
  #asistente-ia { background: var(--color-white) !important; }
  #asistente-ia .section-inner { background: transparent !important; padding: 60px 24px !important; }
  .ia-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    background: transparent !important;
  }
  .ia-left { align-items: center !important; text-align: center; background: transparent !important; }
  .ia-img { width: 180px !important; }
  .ia-right { width: 100% !important; background: transparent !important; }
  .chat-window { max-width: 100%; width: 100%; }

  /* Instagram */
  .ig-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }
  .ig-handle-badge { margin: 0 auto 28px; }
  .ig-mockup-wrap { display: flex; justify-content: center; }
  .ig-mockup {
    width: clamp(220px, 60vw, 320px) !important;
    max-width: 100% !important;
  }

  /* Testimonios */
  .testimonios-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Herramientas */
  .tools-cats { flex-wrap: wrap; gap: 8px; }
  #tools-display { padding: 0 !important; }

  /* Formación */
  .formacion-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* ── PROYECTOS.HTML ─────────────────────────────────── */
  /* PROYECTOS — Hero móvil: texto centrado vertical, imagen pegada al suelo y grande */
  .hero-proyectos { min-height: 100vh !important; height: 100vh; }
  .hero-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    gap: 12px !important;
    padding: 80px 24px 0 !important;
    align-items: stretch !important;
    min-height: 100vh !important;
    text-align: center;
  }
  .hero-text-block {
    order: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 0 !important;
    padding-top: 4vh;
    display: flex !important;
    gap: 16px !important;
  }
  .hero-text-title { text-align: center; }
  .hero-text-subtitle { text-align: center; margin: 0 auto; }
  .hero-avatar-wrap {
    order: 2;
    align-items: flex-end !important;
    justify-content: center;
    align-self: end !important;
  }
  .hero-avatar {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 55vh !important;
    object-position: bottom !important;
  }
  .hero-cta-btn { align-self: center !important; order: 3; }
  .hero-overlay {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%) !important;
  }

  /* Project sections — 1 col */
  .proyecto-2col,
  .goyaba-2col,
  .optima-2-grid,
  .parche-mockups,
  .cuidame-cards { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Optima cruz */
  .optima-cruz { aspect-ratio: auto; }
  .optima-cruz-img { max-width: 100%; }

  /* PARCHE isotipo + funnel se centran */
  .parche-right-stack { align-items: center; }
  .parche-isotipo { width: clamp(180px, 45vw, 260px) !important; }
  .parche-funnel { width: 100%; max-width: 360px; }
  .funnel-step:nth-child(1),
  .funnel-step:nth-child(2),
  .funnel-step:nth-child(3) { width: 100% !important; }

  /* PARCHE part 2 */
  .parche-mockups .proyecto-img { max-width: 340px; }

  /* Goyaba */
  .goyaba-product-img { max-width: 280px; margin: 0 auto !important; }
  .goyaba-logo-img { margin: 0 auto; }

  /* Vinted */
  .vinted-puesto { position: relative !important; right: auto !important; top: auto !important; font-size: 56px !important; margin-bottom: 8px; }
  .vinted-glass-card { padding: 22px !important; }

  /* Case grid 1 col */
  .case-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* ── SOBRE-MI.HTML ─────────────────────────────────── */
  /* Portadilla */
  .portadilla-title { font-size: clamp(48px, 14vw, 90px) !important; }

  /* Bio */
  .bio-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 60px 24px !important;
  }
  .bio-portrait-wrap { order: -1; }
  .bio-portrait-circle {
    width: clamp(180px, 50vw, 260px) !important;
    height: clamp(180px, 50vw, 260px) !important;
  }
  .bio-p { font-size: 16px !important; }

  /* Pasiones — flatten DOM con display:contents para ordenar libre */
  .pasiones-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 50px 20px !important;
    align-items: center !important;
  }
  .pasiones-left,
  .pasiones-right {
    display: contents !important;
  }
  .pasiones-title-block {
    text-align: center;
    align-items: center;
    order: 1;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
  }
  .pasiones-title { font-size: clamp(42px, 11vw, 64px) !important; }
  .pasiones-subtitle { font-size: clamp(18px, 4vw, 22px) !important; }
  .pasiones-camara {
    order: 2;
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .polaroid-frame {
    order: 3 !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 14px 14px 60px 14px !important;
  }
  .polaroid-caption {
    order: 4 !important;
    text-align: center;
    width: 100%;
    font-size: 15px !important;
    margin: 0 auto !important;
  }

  /* Transición */
  .transicion-title { font-size: clamp(28px, 8vw, 48px) !important; }

  /* Timeline ya tiene mobile vertical */

  /* Intereses */
  .intereses-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .interes-card--cita { grid-column: 1 / -1 !important; }
  .interes-card { padding: 28px 24px !important; }

  /* Marca personal */
  .marca-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }
  .marca-inner .btn { margin: 0 auto; }
  .marca-mockup { max-width: 320px !important; margin: 0 auto; }

  /* ── BLOG.HTML ─────────────────────────────────────── */
  .blog-hero-title { font-size: clamp(40px, 11vw, 76px) !important; }
  .ig-embeds-grid { grid-template-columns: 1fr 1fr !important; }
  .ig-embeds-grid > :nth-child(3) {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
  }
  .li-cards-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Cierre */
  .cierre { padding: 80px 24px !important; }
  .cierre-title { font-size: clamp(56px, 16vw, 96px) !important; }
}


/* ─── PHONE (≤ 640px) ───────────────────────────────────── */
@media (max-width: 640px) {

  /* Nav compact */
  .nav { padding: 14px 20px !important; }
  .nav__logo { font-size: 14px !important; }

  /* Hero index */
  .hero {
    padding: 90px 20px 40px !important;
    gap: 36px !important;
  }
  .hero-portrait-wrap {
    width: clamp(200px, 65vw, 280px) !important;
    height: clamp(200px, 65vw, 280px) !important;
  }
  .hero-phrase { font-size: 18px !important; max-width: 280px !important; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; margin: 32px auto 0; gap: 12px; }
  .hero-ctas .btn { justify-content: center; width: 100%; }

  /* Section padding */
  .section-inner { padding: 60px 20px !important; }
  .proyecto-section { padding: 60px 20px !important; }
  .blog-hero { padding: 100px 20px 60px !important; }

  /* Index sec 2 */
  #presentacion .presentacion-title,
  #presentacion h2 { font-size: clamp(40px, 13vw, 64px) !important; }
  .presentacion-img { max-height: 360px !important; }

  /* Projects carousel */
  .filter-btn { padding: 8px 14px !important; font-size: 10px !important; }
  .project-card { flex: 0 0 240px !important; padding: 20px !important; }

  /* IA Section */
  .ia-img { width: 140px !important; }
  .chat-window { border-radius: 16px !important; }
  .chat-topbar { padding: 12px 16px !important; }
  .chat-chips { flex-wrap: wrap; gap: 6px !important; padding: 0 12px !important; }
  .chat-chip { font-size: 10px !important; padding: 6px 12px !important; }
  .chat-inputrow { padding: 12px !important; }
  .chat-inputrow input { font-size: 14px !important; }

  /* Instagram */
  .ig-mockup { width: clamp(200px, 70vw, 280px) !important; }

  /* Testimonios stack */
  .testimonios-grid { grid-template-columns: 1fr !important; }
  .testimonio-card { padding: 24px !important; }

  /* Tools */
  .tools-cat-btn { font-size: 10px !important; padding: 8px 14px !important; }
  .tools-bar-row { grid-template-columns: 90px 1fr 36px !important; gap: 10px !important; }
  .tools-bar-label { font-size: 11px !important; }

  /* Formación */
  .formacion-grid { grid-template-columns: 1fr !important; }
  .formacion-card { padding: 22px !important; }

  /* PROYECTOS — Hero phone */
  .hero-content { padding: 90px 20px 50px !important; gap: 20px !important; }
  .hero-text-title { font-size: clamp(36px, 10vw, 56px) !important; }
  .hero-text-subtitle { font-size: 14px !important; }
  .hero-avatar { max-width: 240px !important; }

  /* Project titles */
  .optima-title, .parche-title, .goyaba-title, .tintech-title, .vinted-title, .cuidame-name {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  /* Vinted card padding */
  .vinted-glass-card { padding: 18px !important; }
  .vinted-puesto { font-size: 42px !important; }

  /* Case cards */
  .case-card { padding: 22px !important; }
  .case-card-body { font-size: 13px !important; }

  /* Sobre mi */
  .portadilla { min-height: 60vh !important; }
  .portadilla-title { font-size: clamp(48px, 16vw, 72px) !important; }
  .bio-inner { padding: 50px 20px !important; }
  .pasiones-inner { padding: 30px 20px !important; }
  .pasiones-camara { max-width: 320px !important; }
  .polaroid-frame { max-width: 100% !important; padding: 10px 10px 50px !important; }
  .polaroid-btn { width: 30px !important; height: 30px !important; }

  /* Intereses */
  .intereses-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .interes-card { padding: 24px 20px !important; }

  /* Marca personal mockup */
  .marca-mockup { max-width: 260px !important; }

  /* BLOG */
  .blog-hero-title { font-size: clamp(36px, 13vw, 64px) !important; }
  .ig-embeds-grid { grid-template-columns: 1fr !important; }
  .ig-embeds-grid > :nth-child(n) { max-width: 100% !important; grid-column: auto !important; }
  .ig-embed-wrap { min-height: 500px !important; }
  .li-card-hero-image { height: 220px !important; }

  /* Footer */
  .cierre { padding: 60px 20px !important; }
  .cierre-text { font-size: 15px !important; }
  .footer-line { font-size: 11px !important; }
}


/* ─── SMALL PHONE (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
  .hero-name { font-size: 48px !important; }
  .portadilla-title { font-size: 48px !important; }
  .blog-hero-title { font-size: 36px !important; }
  .cierre-title { font-size: 56px !important; }
  .hero-ctas .btn { font-size: 11px !important; padding: 12px 20px !important; }
}


/* ─── LANDSCAPE PHONE ──────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 80px 24px !important;
  }
  .hero-text-block { order: 0; align-items: flex-start; text-align: left; }
  .hero-text-title { text-align: left; }
  .hero-text-subtitle { text-align: left; margin: 0; }
  .hero-avatar-wrap { order: 0; }
  .hero-avatar { max-width: 240px !important; }
  .hero-cta-btn { align-self: flex-start !important; }
}