/* =========================================================================
   Plena — Landing informativa
   CSS plano, sin build. Editar directamente, guardar y recargar el navegador.
   Los colores/tipografía/espaciados están como variables al principio del
   archivo (design tokens) — cambia ahí para tocar toda la landing a la vez.
   ========================================================================= */

/* ---- Tipografía: Plus Jakarta Sans (self-hosted) ---- */
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-ExtraLight.ttf") format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; src:url("/fonts/plus-jakarta-sans/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype"); font-weight:800; font-style:italic; font-display:swap; }

/* ---- Design tokens (de agent/system_design/tokens) ---- */
:root {
  /* Colores de marca */
  --color-green-900: rgb(11,65,65);
  --color-teal-800: rgb(34,88,102);
  --color-teal-600: rgb(76,133,141);
  --color-forest-700: rgb(47,59,55);
  --color-sage-500: rgb(139,152,129);
  --color-sage-muted: rgb(84,108,101);
  --color-peach-200: rgb(255,204,188);
  --color-peach-shadow: rgba(255,202,189,0.24);
  --color-beige-300: rgb(217,195,167);
  --color-beige-100: rgb(235,231,226);
  --color-white: #fff;
  --color-black: #000;

  /* Colores de los "pills" de las 8 dimensiones (sección app). No estaban
     en agent/system_design/tokens/colors.css — estimados a ojo desde la
     captura del Figma que pasó el usuario. Ajustar si se consigue el hex
     exacto del archivo de diseño. */
  --color-sand: rgb(222,159,88);      /* ya existía como referencia en el design system */
  --color-coral: rgb(224,148,132);
  --color-olive: rgb(163,171,124);

  /* Tipografía */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala tipográfica unificada. Todo título/subtítulo/kicker de la landing
     debe usar una de estas parejas tamaño/interlineado, nunca un px suelto,
     para que no se desincronicen entre secciones.

     OJO — patrón deliberado del diseño: en cada sección con "kicker + h2"
     (productos, app, expertos, cómo trabajamos, formulario), la PRIMERA
     línea (el kicker/badge) va en un tamaño MAYOR que la segunda (el h2).
     Es intencional, no un error — respetar ese orden al tocar cualquiera
     de las dos. Por eso el kicker de cada sección usa el tier de arriba
     del que usa su propio h2 (ver asignación en cada regla más abajo). */
  --text-hero: 80px;    --text-hero-lh: 96px;   /* hero-h1, naciste-h, footer-tagline */
  --text-display: 68px; --text-display-lh: 80px; /* kicker de expertos (el más grande de todos) */
  --text-h1: 48px;      --text-h1-lh: 65px;      /* h2 de expertos + kickers de productos/app/cómo/form */
  --text-h3: 36px;      --text-h3-lh: 41px;      /* h2 de productos/app/cómo/form + dimensions-h */
  --text-xl: 24px;      --text-xl-lh: 32px;      /* párrafo grande: *-desc de las secciones */
  --text-lg: 16px;      --text-lg-lh: 25px;      /* párrafo de apoyo más pequeño: app/form-desc, pillar-desc */
  --text-sm: 12px;      --text-sm-lh: 18px;      /* sin uso activo ahora mismo — para un kicker realmente pequeño si hiciera falta en el futuro */
  --text-card-title: 20px; --text-card-title-lh: 28px; /* título dentro de una card pequeña: pillar-title, expert-name */

  /* Espaciado / layout */
  --layout-side-padding: 160px;
  --layout-side-padding-sm: 86px;
  --radius-pill: 124px;
  --radius-pill-lg: 300px;
  --shadow-peach: 0px 24px 48px 0px rgba(255,202,189,0.24);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--font-display); background:#fff; color:var(--color-forest-700); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
[x-cloak] { display:none !important; }
img { max-width:100%; }

/* ---- Header ---- */
.header { position:sticky; top:0; z-index:100; width:100%; height:108px; background:rgba(255,255,255,0.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:flex; flex-direction:row; padding:20px var(--layout-side-padding-sm); justify-content:space-between; align-items:center; }
.header nav { display:flex; gap:48px; align-items:center; }
.header nav ul { display:flex; gap:24px; list-style:none; }
.header nav ul li a { font-size:16px; font-weight:400; color:var(--color-forest-700); transition:color .2s; }
.header nav ul li a:hover { color:var(--color-teal-800); }
.header-logo { width:99px; height:78px; object-fit:contain; }

/* Hamburguesa: oculta en desktop, se muestra en el breakpoint de tablet */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer; }
.nav-toggle span { display:block; height:2px; width:100%; background:var(--color-forest-700); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity:0; }
.nav-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---- Botones ---- */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:12px 18px; border-radius:var(--radius-pill); border:none; cursor:pointer; font-family:var(--font-ui); font-weight:500; font-size:16px; transition:opacity .2s, transform .15s; }
.btn-primary:hover { opacity:.85; transform:translateY(-1px); }
.btn-primary:active { transform:scale(.98); }
.btn-teal { background:var(--color-teal-800); color:#fff; }
.btn-dark { background:var(--color-green-900); color:var(--color-peach-200); font-family:var(--font-display); }
.btn-white { background:#fff; color:var(--color-teal-800); font-family:var(--font-ui); }
.btn-outline { height:74px; padding:21px 40px; border-radius:var(--radius-pill-lg); background:transparent; box-shadow:inset 0 0 0 2px var(--color-beige-300); color:var(--color-beige-300); display:inline-flex; gap:12px; align-items:center; font-family:var(--font-display); font-size:16px; border:none; cursor:pointer; transition:opacity .2s; }
.btn-outline:hover { opacity:.8; }
.btn-buy { width:273px; }

/* ---- Hero ---- */
.section-hero { position:relative; height:608px; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; }
.section-hero::after { content:''; position:absolute; inset:0; background:rgba(11,65,65,0.35); }
.hero-content { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; box-shadow:var(--shadow-peach); }
.hero-h1 { font-weight:800; font-size:var(--text-hero); line-height:var(--text-hero-lh); text-align:center; color:#fff; }
.hero-sub { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); text-align:center; color:#fff; max-width:747px; }
.hero-fine { font-weight:700; font-size:var(--text-lg); text-align:center; color:#fff; max-width:584px; }

/* ---- Productos ---- */
.section-products { display:flex; flex-direction:column; gap:48px; padding:64px 0; max-width:1800px; margin:0 auto; }
.products-heading { display:flex; flex-direction:column; gap:24px; align-items:center; padding:0 96px; }
.products-heading h2 { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); text-align:center; color:var(--color-forest-700); }
.products-heading p { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); text-align:center; color:var(--color-forest-700); max-width:747px; }
.amazon-store-link { color:var(--color-teal-800); font-family:var(--font-ui); font-size:16px; font-weight:500; text-decoration:underline; }
.product-row { display:flex; flex-direction:row; width:100%; min-height:640px; overflow:hidden; align-items:stretch; }
.product-text { flex:1; display:flex; flex-direction:column; gap:32px; justify-content:center; }
.product-text-l { padding:48px 96px 128px 160px; }
.product-text-r { padding:96px 160px 96px 96px; }
.product-badge { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-sage-muted); }
.product-title { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-sage-muted); }
.product-badge-2 { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-green-900); }
.product-title-2 { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-green-900); }
.product-badge-3 { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-coral); }
.product-title-3 { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-coral); }
.product-desc { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); color:var(--color-forest-700); }
.product-img { flex:1; display:flex; align-items:center; overflow:hidden; position:relative; }
.product-img-l { padding:0 96px 0 160px; justify-content:start; }
.product-img-r { padding:0 160px 0 96px; justify-content:end; }
.blob-wrap { position:relative; width:100%; max-width:480px; aspect-ratio:1/1; flex-shrink:1; }
.blob-svg { position:absolute; inset:0; width:100%; height:100%; }
.product-front-img-1 { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); height:100%; width:auto; object-fit:contain; }
.product-front-img-2 { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); height:85%; width:auto; object-fit:contain; }
.product-front-img-3 { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); height:85%; width:auto; object-fit:contain; }

/* ---- Naciste ---- */
.section-naciste { position:relative; height:578px; background:var(--color-peach-shadow); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.section-naciste .leaf-l {
    position: absolute;
    left: -7%;
    top: 81%;
    transform: translateY(-50%);
    height: 75vh;
    object-fit: contain;
    pointer-events: none;
}
.section-naciste .leaf-r {
    position: absolute;
    right: -13%;
    top: 29%;
    transform: translateY(-50%);
    height: 75vh;
    object-fit: contain;
    pointer-events: none;
}
.naciste-content { display:flex; flex-direction:column; gap:24px; align-items:center; max-width:900px; text-align:center; z-index:1; }
.naciste-h { font-weight:800; font-size:var(--text-hero); line-height:var(--text-hero-lh); color:var(--color-teal-600); }
.naciste-p { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); color:var(--color-green-900); }

/* ---- App / mapa de autodescubrimiento ---- */
.section-app { position:relative; min-height:1171px; background:var(--color-green-900); overflow:hidden; display:flex; flex-direction:column; }
.app-inner { display:flex; flex-direction:row; justify-content:space-around; align-items:center; padding:52px 0 ; gap:38px; width:100%; max-width:1800px; margin:0 auto; }
.app-text { display:flex; flex-direction:column; gap:24px; max-width:620px; }
.app-kicker { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-beige-300); }
.app-h2 { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-beige-300); }
.app-desc { font-weight:400; font-size:var(--text-lg); line-height:var(--text-lg-lh); color:#fff; }
.app-fine { font-weight:700; font-size:var(--text-lg); line-height:var(--text-lg-lh); color:#fff; max-width:374px; }
.app-mockup { height:700px; object-fit:cover; border-radius:50px 0 0 50px; flex-shrink:0; }
.dimensions-section { padding:64px 88px 80px; }
.dimensions-h { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-beige-300); text-align:center; margin-bottom:32px; }
/* Píldoras de color, no cards: cada dimensión es un botón redondeado (igual
   look que .btn-primary) con uno de 4 colores, en parejas de 2. */
.dimensions-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:1800px; margin:20px auto; }
.dimension-card { display:inline-flex; align-items:center; border-radius:var(--radius-pill); padding:16px 28px; }
.dimension-card span { font-weight:800; font-size:14px; color:#fff; text-transform:uppercase; letter-spacing:.06em; line-height:1.4; white-space:nowrap; }
.dimension-card--gold { background:var(--color-sand); }
.dimension-card--coral { background:var(--color-coral); }
.dimension-card--olive { background:var(--color-olive); }
.dimension-card--teal { background:var(--color-teal-600); }

/* ---- Expertos ---- */
.section-experts { position:relative; min-height:981px; background-size:cover; background-position:center; overflow:hidden; padding:64px 0; background: linear-gradient(180deg, var(--color-beige-300) 21%, #fff 101%);}
.experts-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:32px; align-items:center; max-width:1800px; margin:0 auto; }
/* fondo claro (gradiente beige→blanco) → texto oscuro, no blanco (si no, ilegible) */
.experts-kicker { font-weight:800; font-size:var(--text-display); line-height:var(--text-display-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-sage-500); }
.experts-h2 { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); color:var(--color-forest-700); text-align:center; }
.experts-desc { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); color:var(--color-forest-700); text-align:center; max-width:747px; }
.experts-row { display:flex; flex-direction:row; gap:48px; justify-content:center; flex-wrap:wrap; padding:0 96px; }
.expert-card { display:flex; flex-direction:column; align-items:center; gap:16px; width:280px; }

/* Foto superpuesta sobre una tarjeta de fondo desplazada (efecto "stack") */
.expert-visual { position:relative; width:256px; height:296px; margin:0 auto; }
.expert-backing { position:absolute; bottom:16px; right:16px; width:240px; height:280px; border-radius:24px; background:var(--color-beige-300); }
.expert-photo { position:absolute; bottom:0; right:0; width:240px; height:280px; border-radius:24px; overflow:hidden; background:var(--color-green-900); box-shadow:0 12px 24px rgba(11,65,65,0.18); }
.expert-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.expert-photo--placeholder { background:var(--color-green-900); }

.expert-name { font-weight:800; font-size:var(--text-card-title); line-height:var(--text-card-title-lh); color:var(--color-forest-700); text-align:center; }
.expert-role { font-weight:400; font-size:16px; line-height:20px; color:var(--color-sage-muted); text-align:center; }
.expert-link { font-family:var(--font-ui); font-size:16px; font-weight:500; color:var(--color-teal-600); }

/* ---- Cómo trabajamos ---- */
.section-como { position:relative; min-height:917px; background-size:cover; background-position:center; overflow:hidden; display:flex; align-items:center; }
/* Velo blanco (no oscuro) sobre la foto de fondo — deja el texto en tonos
   oscuros, no blancos, y las cards son básicas (sin glass/blur). */
.como-overlay { position:absolute; inset:0; background:rgba(255,255,255,0.85); }
.como-inner { position:relative; z-index:1; display:flex; flex-direction:row; align-items:flex-start; width:100%; padding:89px 100px 89px 70px; gap:100px; max-width:1800px; margin: 0 auto;}
.como-text { display:flex; flex-direction:column; gap:24px; max-width:660px; }
.como-kicker { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-forest-700); }
.como-h2 { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-forest-700); }
.como-desc { font-weight:400; font-size:var(--text-xl); line-height:var(--text-xl-lh); color:var(--color-forest-700); }
.pillar-cards { display:flex; flex-direction:column; gap:16px; flex:1; }
.pillar-card { background:#FFFFFF80; border:1.5px solid var(--color-sage-500); border-radius:16px; padding:28px 32px; display:flex; flex-direction:column; gap:8px; }
.pillar-title { font-weight:800; font-size:var(--text-card-title); line-height:var(--text-card-title-lh); color:var(--color-sage-500); }
.pillar-desc { font-weight:400; font-size:var(--text-lg); line-height:var(--text-lg-lh); color:var(--color-forest-700); }

/* ---- Formulario ----
   .section-form es solo fondo/espaciado a todo el ancho del viewport.
   .form-container es quien limita a 1800px y reparte 40% texto / 60%
   formulario — así el degradado sigue siendo full-bleed pero el contenido
   no se estira de más en pantallas muy anchas. */
.section-form { position:relative; background:linear-gradient(133deg,#fff 41%,var(--color-beige-300) 101%); overflow:hidden; padding:160px 88px; }
.form-container { display:flex; align-items:center; width:100%; max-width:1800px; margin:0 auto; gap:80px; }
.form-text { display:flex; flex-direction:column; gap:32px; flex:0 0 40%; max-width:40%; }
.form-kicker { font-weight:800; font-size:var(--text-h1); line-height:var(--text-h1-lh); letter-spacing:.12em; text-transform:uppercase; color:var(--color-sage-500); }
.form-h2 { font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); color:var(--color-forest-700); }
.form-desc { font-weight:400; font-size:var(--text-lg); line-height:var(--text-lg-lh); color:var(--color-forest-700); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; flex:0 0 60%; max-width:60%; }
.field { display:flex; flex-direction:column; gap:10px; }
.field label { font-size:13px; font-weight:600; color:var(--color-sage-muted); }
.field input { height:56px; border:1px solid var(--color-beige-300); border-radius:28px; padding:14px 24px; font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--color-forest-700); background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
.field input::placeholder { color:var(--color-sage-500); }
.field input:focus { border-color:var(--color-teal-800); box-shadow:0 0 0 3px rgba(34,88,102,0.12); }
.field input:invalid:not(:placeholder-shown) { border-color:#c0392b; }
.checkbox-row { display:flex; gap:12px; align-items:center; }
.checkbox-box { width:24px; height:24px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--color-sage-500); flex-shrink:0; cursor:pointer; transition:background .15s; }
.checkbox-label { font-size:12px; font-weight:300; color:#000; line-height:1.5; }
.form-success { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--color-teal-800); }
.form-error { font-family:var(--font-display); font-size:13px; font-weight:500; color:#c0392b; }

/* ---- Footer ---- */
.footer { position:relative; height:492px; background:var(--color-forest-700); overflow:hidden; display:flex; flex-direction:column; align-items:center; }
.footer-tagline { font-weight:800; font-size:var(--text-hero); line-height:var(--text-hero-lh); text-align:center; color:var(--color-beige-300); padding:55px 86px 0; width:100%; }
.footer-divider { position:absolute; left:74px; right:74px; top:280px; height:1px; background:rgba(255,255,255,0.3); }
.footer-bottom { position:absolute; bottom:0; left:0; right:0; height:212px; max-width:1800px; margin:0 auto; display:flex; flex-direction:row; align-items:flex-end; justify-content:space-between; padding:0 76px 40px; }
.footer-legal { display:flex; flex-direction:column; gap:8px; }
.footer-legal a { font-size:14px; font-weight:400; color:var(--color-beige-300); opacity:.8; }
.footer-legal a:hover { opacity:1; }
.footer-social { display:flex; flex-direction:row; gap:24px; position:absolute; left:50%; transform:translateX(-50%); bottom:40px; }
.footer-contact { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.footer-contact span { font-size:12px; font-weight:400; color:var(--color-beige-300); text-align:right; opacity:.8; }
.social-btn { display:flex; align-items:center; gap:12px; height:74px; padding:21px 40px; border-radius:var(--radius-pill-lg); box-shadow:inset 0 0 0 2px var(--color-beige-300); color:var(--color-beige-300); font-size:16px; cursor:pointer; transition:opacity .2s; background:transparent; border:none; }
.social-btn:hover { opacity:.8; }
.social-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* =========================================================================
   RESPONSIVE
   El Figma fuente solo traía el layout de escritorio (1440px) — no existía
   una versión mobile aprobada por diseño (ver agent/system_design/readme.md,
   "What's NOT in the source"). Los dos breakpoints de abajo (1024px y
   640px) son una propuesta razonable de ingeniería a partir del diseño
   desktop, no un mockup validado. Si diseño entrega Figma mobile más
   adelante, ajustar los valores concretos aquí sin tocar la estructura.

   Convención: cada bloque de abajo agrupa TODOS los overrides de una
   sección para ese breakpoint (fácil de encontrar/editar por sección).
   ========================================================================= */

@media (max-width: 1024px) {
  /* Header / nav móvil */
  .header { padding:16px 32px; }
  .nav-toggle { display:flex; }
  .header nav {
    position:fixed; top:108px; left:0; right:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:16px 24px 24px;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    max-height:calc(100vh - 108px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .header nav.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .header nav ul { flex-direction:column; gap:0; margin-bottom:16px; }
  .header nav ul li a { display:block; padding:12px 0; font-size:18px; border-bottom:1px solid var(--color-beige-100); }
  .header nav .btn-primary { width:100%; }

  /* Hero */
  .section-hero { height:auto; min-height:480px; padding:48px 24px; }
  .hero-h1 { font-size:52px; line-height:60px; }
  .hero-sub { font-size:18px; line-height:26px; max-width:520px; }
  .hero-fine { font-size:14px; max-width:460px; }

  /* Productos */
  .products-heading { padding:0 32px; }
  .products-heading h2 { font-size:32px; line-height:40px; }
  .products-heading p { font-size:18px; line-height:26px; }
  .product-badge { font-size:32px; line-height:40px; }
  .product-row { flex-direction:column; min-height:0; }
  .product-img { order:-1; }
  .product-text-l, .product-text-r { padding:32px; }
  .product-text-inner { align-items:center; }
  .product-badge, .product-badge-2, .product-badge-3,
  .product-title, .product-title-2, .product-title-3,
  .product-desc { text-align:center; }
  .product-img-l, .product-img-r { padding:0 32px 32px; justify-content:center; }
  .blob-wrap { width:320px; height:320px; max-width:100%; margin:0 auto; }

  /* Naciste */
  .section-naciste { height:auto; min-height:360px; padding:48px 24px; }
  .section-naciste .leaf-l, .section-naciste .leaf-r { height:220px; opacity:.6; }
  .naciste-h { font-size:44px; line-height:52px; }
  .naciste-p { font-size:18px; line-height:26px; }

  /* App / mapa de autodescubrimiento */
  .section-app { min-height:0; }
  .app-inner { flex-direction:column; align-items:flex-start; padding:40px 32px 0; gap:24px; }
  .app-kicker { font-size:32px; line-height:40px; }
  .app-h2 { font-size:24px; line-height:30px; }
  .app-mockup { width:100%; max-width:420px; height:auto; border-radius:24px; align-self:center; }
  .dimensions-section { padding:40px 24px 48px; }
  .dimensions-h { font-size:24px; line-height:30px; }
  .dimensions-grid { gap:12px; }
  .dimension-card { padding:14px 22px; }

  /* Expertos */
  .section-experts { min-height:0; padding:48px 0; }
  .experts-kicker { font-size:40px; line-height:48px; }
  .experts-h2 { font-size:32px; line-height:40px; }
  .experts-desc { font-size:18px; line-height:26px; padding:0 24px; }
  .experts-row { padding:0 32px; gap:32px; }

  /* Cómo trabajamos */
  .section-como { min-height:0; }
  .como-inner { flex-direction:column; padding:48px 32px; gap:32px; }
  .como-kicker { font-size:32px; line-height:40px; }
  .como-h2 { font-size:24px; line-height:30px; }
  .como-desc { font-size:18px; line-height:26px; }

  /* Formulario — en tablet se mantiene el reparto 40/60 (solo se apila en
     el breakpoint de móvil, más abajo), únicamente se ajustan espaciados */
  .section-form { min-height:0; padding:48px 32px; }
  .form-container { gap:40px; }
  .form-kicker { font-size:32px; line-height:40px; }
  .form-h2 { font-size:24px; line-height:30px; }
  .form-grid { gap:16px 20px; }
  .btn-buy { width:100%; }

  /* Footer */
  .footer { height:auto; padding:48px 32px 32px; gap:32px; }
  .footer-tagline { font-size:40px; line-height:48px; padding:0; }
  .footer-divider { position:static; width:100%; }
  .footer-bottom {
    position:static; height:auto;
    flex-direction:column; align-items:center; gap:24px; padding:0;
  }
  .footer-legal { align-items:center; text-align:center; }
  .footer-social { position:static; transform:none; }
  .footer-contact { align-items:center; }
  .footer-contact span { text-align:center; }
}

@media (max-width: 640px) {
  .header { padding:12px 20px; }
  .header-logo { width:72px; height:57px; }

  .hero-h1 { font-size:36px; line-height:44px; }
  .hero-sub { font-size:16px; line-height:24px; }
  .hero-fine { font-size:13px; }
  .section-hero { padding:40px 20px; min-height:420px; }

  .products-heading { padding:0 20px; }
  .products-heading h2 { font-size:26px; line-height:34px; }
  .products-heading p { font-size:16px; line-height:24px; }
  .product-badge, .product-badge-2, .product-badge-3 { font-size:26px; line-height:34px; }
  .product-text-l, .product-text-r { padding:24px 20px; }
  .product-img-l, .product-img-r { padding:0 20px 24px; justify-content:center; }
  .product-title, .product-title-2, .product-title-3 { font-size:26px; line-height:32px; }
  .product-desc { font-size:16px; line-height:24px; }
  .blob-wrap { width:220px; height:220px; max-width:100%; }

  .section-naciste { padding:32px 20px; min-height:0; }
  .section-naciste .leaf-l, .section-naciste .leaf-r { display:none; }
  .naciste-h { font-size:28px; line-height:36px; }
  .naciste-p { font-size:16px; line-height:24px; }

  .app-inner { padding:32px 20px 0; }
  .app-kicker { font-size:26px; line-height:34px; }
  .app-h2 { font-size:20px; line-height:26px; }
  .app-desc, .app-fine { font-size:14px; line-height:22px; }
  .dimensions-section { padding:32px 20px 40px; }
  .dimensions-grid { gap:10px; }
  .dimension-card { padding:12px 18px; }
  .dimension-card span { white-space:normal; font-size:12px; text-align:center; }

  .experts-kicker { font-size:28px; line-height:36px; }
  .experts-h2 { font-size:26px; line-height:34px; }
  .experts-desc { font-size:16px; line-height:24px; padding:0 20px; }
  .experts-row { padding:0 20px; gap:24px; }
  .expert-card { width:100%; max-width:280px; }

  .como-inner { padding:32px 20px; gap:24px; }
  .como-kicker { font-size:26px; line-height:34px; }
  .como-h2 { font-size:20px; line-height:26px; }
  .como-desc { font-size:16px; line-height:24px; }
  .pillar-card { padding:20px; }

  .section-form { padding:32px 20px; }
  .form-container { flex-direction:column; align-items:stretch; gap:32px; }
  .form-text { flex:none; max-width:100%; }
  .form-kicker { font-size:26px; line-height:34px; }
  .form-h2 { font-size:20px; line-height:26px; }
  .form-desc { font-size:14px; line-height:22px; }
  .form-grid { flex:none; max-width:100%; grid-template-columns:1fr; gap:16px; }
  .field input { height:52px; font-size:16px; }

  .footer { padding:40px 20px 24px; }
  .footer-tagline { font-size:28px; line-height:36px; }
  .footer-social { flex-direction:column; gap:12px; width:100%; }
  .social-btn { width:100%; justify-content:center; }
  .footer-contact span { font-size:12px; }
}