/* =========================================================================
   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; }

/* ---- Tipografía: Inter (self-hosted, sustituye a Google Fonts CDN) ----
   Antes se cargaba vía <link> a fonts.googleapis.com, lo que compartía la
   IP del visitante con Google en cada carga de página (ver política de
   cookies). Solo se usan los pesos 400/500, que son los únicos que pide
   --font-ui en esta hoja (nav, botones, enlaces). */
@font-face { font-family:"Inter"; src:url("/fonts/inter/Inter-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/fonts/inter/Inter-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; 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:100%; max-width:273px; }

/* ---- Banner de consentimiento de cookies (public/js/consent.js) ----
   z-index por encima del header (100) para que quede siempre visible. */
.cookie-banner {
  position:fixed; left:24px; right:24px; bottom:24px; z-index:200;
  max-width:960px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
  padding:24px 28px; border-radius:24px;
  background:var(--color-green-900); color:var(--color-beige-100);
  box-shadow:0 24px 48px 0 rgba(0,0,0,0.24);
}
.cookie-banner-text { flex:1 1 420px; font-family:var(--font-ui); font-size:var(--text-sm); line-height:var(--text-sm-lh); margin:0; }
.cookie-banner-text a { color:var(--color-beige-300); text-decoration:underline; }
.cookie-banner-actions { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }

@media (max-width: 640px) {
  .cookie-banner { left:12px; right:12px; bottom:12px; padding:20px; }
}

/* ---- 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); }
/* El 40/60 con .form-text se mantiene fijo mientras cabe (breakpoint de
   abajo lo apila). Dentro del 60%: cada columna exige al menos el 50% del
   ancho disponible (con piso de 200px), así que auto-fit nunca mete más de
   2 columnas (nombre/apellidos, email/botón, como en el diseño) y solo
   colapsa a 1 cuando de verdad no caben 2 — sin breakpoint propio. */
.form-grid { --form-grid-gap:32px; display:grid; grid-template-columns:repeat(auto-fit, minmax(max(200px, calc(50% - var(--form-grid-gap) / 2)), 1fr)); gap:24px var(--form-grid-gap); max-width:60%; min-width:0; }
.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 fijo (las columnas
     del grid ya colapsan solas vía auto-fit si no caben); aquí solo se
     ajustan espaciados y tipografía para la escala de este breakpoint */
  .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 { --form-grid-gap:20px; gap:16px var(--form-grid-gap); }

  /* 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; }
  /* Aquí es donde el formulario entero baja debajo del texto: a partir de
     este ancho, el 40/60 ya no tiene sitio digno (aunque los campos ya
     hubieran colapsado a 1 columna por su cuenta, ver auto-fit arriba). */
  .form-container { flex-direction:column; align-items:stretch; gap:32px; }
  .form-text { flex:none; max-width:100%; }
  .form-grid { flex:none; max-width:100%; --form-grid-gap:16px; gap:16px var(--form-grid-gap); }
  .form-kicker { font-size:26px; line-height:34px; }
  .form-h2 { font-size:20px; line-height:26px; }
  .form-desc { font-size:14px; line-height:22px; }
  .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; }
}