@charset "UTF-8";
/* =============================================================================
   Lucila Glom · Nutrición Integrativa
   Sistema de diseño — v1.0
   -----------------------------------------------------------------------------
   Estructura:
   01. Fuentes
   02. Tokens
   03. Reset
   04. Tipografía
   05. Layout
   06. Componentes: botones (liquid glass)
   07. Componentes: header
   08. Componentes: tarjetas, badges, listas, iconos
   09. Secciones
   10. Movimiento
   11. Responsive
   12. Accesibilidad y utilidades
   ========================================================================== */

/* 01. FUENTES ============================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/montserrat.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02. TOKENS =============================================================== */

:root {
  /* --- Color: marca ------------------------------------------------------
     Los cuatro colores de marca van marcados. El resto son tintes y sombras
     calculados a partir de ellos, no colores nuevos.                        */
  --brand-50:  #F4F9F6;
  --brand-100: #E9F2ED;
  --brand-200: #D6E7DD;
  --brand-300: #BEDACC;  /* ● MARCA — verde salvia */
  --brand-400: #A6C9B6;  /* ● MARCA — verde medio */
  --brand-500: #8AB0A2;
  --brand-600: #6C8E88;
  --brand-700: #57746F;
  --brand-800: #49625F;  /* ● MARCA — verde oscuro · CTA y acentos */
  --brand-900: #3B5150;  /* sombra del anterior, para estados hover */

  /* --- Color: tinta ------------------------------------------------------
     Sin negros. Todo parte del gris de marca #575757; los tonos siguientes
     son aclarados suyos que siguen cumpliendo AA sobre blanco, sobre el
     crema del banner y sobre el verde de las tarjetas.                      */
  --ink-900: #575757;   /* ● MARCA — titulares y texto destacado (7.2:1) */
  --ink-700: #5A5A5A;   /* citas */
  --ink-600: #5F5F5F;   /* cuerpo (6.4:1) */
  --ink-400: #5F5F5F;   /* secundario */
  --ink-300: #5F5F5F;   /* metadatos y legales */
  --ink-200: #C9C9C9;   /* separadores finos */

  /* --- Color: superficies ------------------------------------------------ */
  --surface-0: #FFFFFF;
  --surface-1: #FCFCFA;  /* crema casi blanco */
  --surface-2: #FAF9F6;  /* crema — fondo del banner, casa con la foto */
  --surface-3: #F1F1F3;  /* ● MARCA — separadores y áreas puntuales */

  /* --- Color: bordes ----------------------------------------------------- */
  --line-subtle: rgba(27, 31, 34, 0.07);
  --line:        rgba(27, 31, 34, 0.12);
  --line-strong: rgba(27, 31, 34, 0.18);

  /* --- Color: semántico -------------------------------------------------- */
  --star: #49625F;   /* ● MARCA — las estrellas también son de la paleta */

  /* --- Tipografía: familias ---------------------------------------------- */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', sans-serif;
  --font-display: var(--font-sans);

  /* --- Tipografía: escala (8 pasos, ratio ~1.22) ------------------------- */
  --fs-100: 0.8125rem;  /* 13 — metadatos y legales */
  --fs-200: 0.8125rem;  /* 13 — antetítulos y etiquetas */
  --fs-300: 0.9375rem;  /* 15 — cuerpo de tarjeta, nav, botón */
  --fs-400: 1.0625rem;  /* 17 — cuerpo de sección */
  --fs-500: 1.1875rem;  /* 19 — texto destacado */
  --fs-600: 1.375rem;   /* 22 — H4 */
  --fs-700: clamp(1.5rem, 1.25rem + 1.05vw, 1.875rem); /* 24 → 30 */      /* 24→30 — H3 */
  --fs-800: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);  /* 26 → 36 */     /* 30→44 — H2 */
  --fs-900: clamp(2rem, 1.4rem + 2.4vw, 3.125rem);     /* 32 → 50 */     /* 38→68 — display */

  /* --- Tipografía: interlineado ----------------------------------------- */
  --lh-display: 1.02;
  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.68;
  --lh-relaxed: 1.78;

  /* --- Tipografía: tracking --------------------------------------------- */
  --ls-display: -0.035em;
  --ls-tight: -0.022em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  /* --- Espaciado: base 4 -------------------------------------------------- */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --sp-10: 8rem;     /* 128 */

  /* --- Ritmo vertical de sección ---------------------------------------- */
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --section-y-tight: clamp(3.5rem, 2.5rem + 5vw, 6rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --header-h: 88px;

  /* --- Radios (3 valores, sin excepciones) ------------------------------- */
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-full: 999px;

  /* --- Elevación (matiz de marca, alfa bajo) ----------------------------- */
  --e1: 0 1px 2px rgba(27, 31, 34, 0.04), 0 2px 8px rgba(27, 31, 34, 0.035);
  --e2: 0 4px 12px rgba(27, 31, 34, 0.05), 0 14px 34px rgba(27, 31, 34, 0.05);
  --e3: 0 10px 24px rgba(27, 31, 34, 0.07), 0 32px 64px rgba(27, 31, 34, 0.07);
  --e-glass: 0 1px 1px rgba(255, 255, 255, 0.6) inset,
             0 -1px 1px rgba(27, 31, 34, 0.05) inset,
             0 2px 8px rgba(27, 31, 34, 0.08),
             0 12px 28px rgba(27, 31, 34, 0.07);

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 480ms;
}

/* 03. RESET ================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  background: var(--surface-0);
  color: var(--ink-600);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }

::selection {
  background: var(--brand-300);
  color: var(--brand-900);
}

/* 04. TIPOGRAFÍA =========================================================== */

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-900); line-height: var(--lh-display); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }

.display em,
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--brand-700);
  font-weight: 300;
}

/* Símbolo ™ correctamente compuesto: elevado, al 55 %, sin tracking */
.tm {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.72em;
  margin-inline-start: 0.06em;
}

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--fs-500);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  max-width: 34ch;
}

.prose p { max-width: 62ch; }
.prose p + p { margin-top: var(--sp-4); }
.prose strong { font-weight: 600; color: var(--ink-900); }

.text-muted { color: var(--ink-400); }
.text-fine {
  font-size: var(--fs-100);
  line-height: 1.6;
  color: var(--ink-300);
}
.text-fine a {
  color: var(--ink-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}
.text-fine a:hover { color: var(--brand-700); }

/* Enlace de texto con subrayado animado */
.link {
  color: var(--brand-700);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease);
  padding-bottom: 1px;
}
.link:hover { background-size: 100% 1px; }

/* 05. LAYOUT =============================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
/* Evita que se sumen dos ritmos verticales seguidos delante de un manifiesto */
.section:has(+ .section--tight) { padding-bottom: var(--sp-8); }
.section--tight { padding-block: var(--section-y-tight); }
.section--tint { background: var(--surface-2); }
.section--soft {
  background:
    radial-gradient(60% 55% at 88% 8%, rgba(190, 218, 204, 0.22) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--surface-0) 0%,
      var(--surface-2) 18%,
      var(--surface-2) 58%,
      var(--surface-0) 100%);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.section-head--center {
  align-items: center;
  text-align: center;
  max-width: 40ch;
  margin-inline: auto;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.stack-4 { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-5 { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: stretch;
}

/* Regla divisoria fina — sustituye a los divisores en onda */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line) 18%,
    var(--line) 82%,
    transparent
  );
}

/* 06. BOTONES ============================================================= */
/* Sin degradados internos ni brillos. Solo color, transparencia y un borde
   de 1 px. La profundidad viene de una única sombra suave.                */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(0) scale(0.985); }

/* Primario — verde claro de marca con texto oscuro (11.1:1) */
.btn--primary {
  color: var(--ink-900);
  background: rgba(190, 218, 204, 0.92);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.12),
              0 6px 18px -8px rgba(73, 98, 95, 0.35);
}
.btn--primary:hover {
  background: rgba(166, 201, 182, 0.96);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.18),
              0 12px 26px -10px rgba(73, 98, 95, 0.42);
}

/* Cristal — blanco translúcido, para fondos claros o de color */
.btn--glass {
  color: var(--brand-800);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7),
              0 4px 14px -6px rgba(27, 31, 34, 0.16);
}
.btn--glass:hover {
  background: rgba(255, 255, 255, 0.78);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9),
              0 10px 24px -8px rgba(27, 31, 34, 0.2);
}
.btn--on-tint.btn--glass { background: rgba(255, 255, 255, 0.62); }
.btn--on-tint.btn--glass:hover { background: rgba(255, 255, 255, 0.88); }

/* Contorno — el más ligero */
.btn--ghost {
  color: var(--brand-800);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.28);
}
.btn--ghost:hover {
  background: rgba(190, 218, 204, 0.35);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.45);
}

.btn--sm { min-height: 44px; padding: 0 var(--sp-5); }
.btn--block { width: 100%; }

.btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--t-base) var(--ease);
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* 07. HEADER =============================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    backdrop-filter var(--t-base) var(--ease);
}
.header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line-subtle);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
}
.header.is-stuck::after { opacity: 1; }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { justify-self: start; display: block; }
.brand img { width: 186px; height: auto; }

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  grid-column: 2;
}
.nav__link {
  position: relative;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: 0.005em;
  padding-block: var(--sp-2);
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--brand-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--ink-900); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--brand-800); font-weight: 600; }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header__cta { justify-self: end; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-900);
  transition: background-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

/* 08. COMPONENTES ========================================================== */

/* --- Tarjeta base -------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.card--tint {
  background: linear-gradient(170deg, var(--brand-100), var(--brand-200));
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.12), var(--e1);
}
.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--line), var(--e2);
}

/* --- Badge --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--brand-900);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset, var(--e1);
}
.badge--solid {
  color: #fff;
  background: var(--brand-800);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, var(--e1);
}

/* --- Lista de checks ----------------------------------------------------- */
.checklist { display: flex; flex-direction: column; gap: var(--sp-4); }
.checklist li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--ink-600);
}
.checklist svg {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  flex: none;
  color: var(--brand-800);
}
.checklist strong { font-weight: 600; color: var(--ink-900); }
.checklist--sm li { font-size: var(--fs-300); gap: var(--sp-3); }
.checklist--sm svg { width: 18px; height: 18px; margin-top: 3px; }

/* --- Pasos numerados ------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  counter-reset: step;
}
.step {
  counter-increment: step;
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--line), var(--e2);
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-800);
  background: var(--brand-100);
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.14) inset;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h4 { margin-bottom: var(--sp-3); }
.step p { font-size: var(--fs-300); line-height: var(--lh-relaxed); }

/* --- Tarjeta de precio ---------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--line), var(--e2);
}
.plan--featured {
  background:
    linear-gradient(175deg, var(--brand-100) 0%, var(--brand-200) 100%);
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.2), var(--e2);
}
.plan--featured:hover {
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.28), var(--e3);
}
.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 3;            /* por encima del filete de luz del canto superior */
  transform: translateX(-50%);
  white-space: nowrap;
}
/* El filete de luz no debe cruzar el distintivo */
.plan--featured::before { inset: 0 6% auto; z-index: 1; }
.plan__head { padding-bottom: 0; }
.plan__kicker {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: var(--sp-2);
}
.plan__title {
  font-family: var(--font-display);
  overflow-wrap: break-word;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.024em;
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
}

.plan__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-300);
  line-height: 1.7;
  color: var(--ink-400);
}
.plan__divider {
  height: 1px;
  margin-block: var(--sp-4);
  background: var(--line);
}
.plan--featured .plan__divider { background: rgba(73, 98, 95, 0.14); }
.plan__label {
  margin-top: 0;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--sp-4);
}
.plan__body { flex: 1; }
.plan__foot { margin-top: var(--sp-6); text-align: center; }
.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.plan__price-currency {
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: var(--ls-wide);
}
.plan__price-amount {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.plan__note { margin-top: var(--sp-4); }

/* --- Testimonio ----------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.quote:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--line), var(--e2);
}
.quote__stars { display: flex; gap: 3px; color: var(--star); }
.quote__stars svg { width: 15px; height: 15px; }
.quote__text {
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
}
.quote__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-subtle);
}
.quote__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-800);
  background: var(--brand-100);
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.14) inset;
}
.quote__name {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
}
.quote__meta {
  font-size: var(--fs-100);
  color: var(--ink-300);
  line-height: 1.45;
}
.quote__verified { color: var(--brand-700); font-weight: 600; }
.quote__meta span + span::before {
  content: '·';
  margin-inline: 0.4em;
  color: var(--ink-200);
}

/* --- Media (figuras) ------------------------------------------------------ */
.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--framed {
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e2);
}

/* Halo suave detrás de una imagen */
.media-halo { position: relative; }
.media-halo::before {
  content: '';
  position: absolute;
  inset: -12% -8% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--brand-200) 0%,
    rgba(214, 231, 221, 0.35) 55%,
    transparent 100%
  );
  filter: blur(6px);
}

/* 09. SECCIONES ============================================================ */

/* --- Hero — banner a sangre con la foto integrada en el fondo -----------
   La foto se hizo sobre lienzo #F1F1F3, el mismo color de fondo de la marca,
   así que la imagen y el banner son literalmente el mismo color: no hay
   costura visible por mucho que cambie el recorte.                        */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 86vh, 880px);
  padding-top: calc(var(--header-h) + clamp(4.5rem, 2.5rem + 5.5vw, 9rem));
  padding-bottom: var(--sp-8);
  overflow: hidden;
  background:
    /* apenas un aliento verde en la esquina inferior izquierda */
    radial-gradient(
      38% 44% at -4% 92%,
      rgba(190, 218, 204, 0.22) 0%,
      transparent 70%
    ),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 66%, var(--surface-0) 100%);
}

.hero__photo {
  position: absolute;
  inset: calc(var(--header-h) - 8px) 0 0 auto;
  width: min(40%, 540px);
  z-index: 0;
  pointer-events: none;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;   /* apoyada en la base del banner */
  transform-origin: bottom center;
  /* Se desvanece por la izquierda y por abajo: así el banner se aclara
     de forma uniforme en todo su ancho, sin costura entre foto y fondo. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Textura de grano muy sutil */
.hero::after,
.section--grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

.hero .container { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 37rem; }
.hero__title { max-width: 18ch; }
.hero__rule {
  width: 56px;
  height: 3px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-800), var(--brand-400) 60%, var(--brand-300));
}

/* Pantallas anchas: la foto no debe estirarse más de la cuenta */
@media (min-width: 1600px) {
  .hero__photo { width: min(34%, 600px); }
}
/* Franja intermedia: menos texto por línea, foto algo más estrecha */
@media (max-width: 1180px) and (min-width: 901px) {
  .hero__photo { width: 42%; }
  .hero__content { max-width: 28rem; }
  .hero__photo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }
}

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-2);
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--ink-400);
}
.trust__item svg { width: 15px; height: 15px; color: var(--brand-600); }

/* --- Manifiesto (frase grande) -------------------------------------------- */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 0.95rem + 1.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  text-align: center;
  text-wrap: balance;
  max-width: 34ch;
  margin-inline: auto;
}
.statement strong { font-weight: 500; color: var(--ink-900); }
.statement em { font-style: normal; color: var(--brand-700); font-weight: 400; }
/* Los dos manifiestos comparten tamaño, medida y color: misma jerarquía. */

/* --- Guía ------------------------------------------------------------------ */
.guide__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  background: none;
  box-shadow: none;
  overflow: visible;
}
/* Halo verde difuso que integra la imagen con el fondo */
.guide__media::before {
  content: '';
  position: absolute;
  inset: 6% -4% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(190, 218, 204, 0.55) 0%,
    rgba(190, 218, 204, 0.22) 52%,
    transparent 100%
  );
  filter: blur(26px);
}
.guide__media::after { content: none; }
.guide__media img {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 22px 40px rgba(27, 31, 34, 0.14));
}

/* --- Sobre mí -------------------------------------------------------------- */
.about__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 49 / 44;
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e2);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Cierre ---------------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--gutter);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, var(--brand-200) 0%, var(--brand-100) 60%, var(--surface-2) 100%);
  box-shadow: 0 0 0 1px rgba(73, 98, 95, 0.14), var(--e1);
}
.closing__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  max-width: 46ch;
  margin-inline: auto;
}

/* --- Footer ---------------------------------------------------------------- */
.footer {
  padding-block: var(--sp-9) var(--sp-6);
  /* Verde salvia de marca. Sobre este fondo el texto sube de tono para
     mantener el contraste AA (#3B5150 sobre #BEDACC = 5,7:1). */
  background: linear-gradient(180deg, var(--brand-200) 0%, var(--brand-300) 100%);
  border-top: 1px solid rgba(73, 98, 95, 0.16);
  color: var(--brand-900);
}
.footer .footer__tagline,
.footer .footer__list a,
.footer .footer__copy,
.footer .social a { color: var(--brand-900); }
.footer .footer__title { color: var(--brand-900); }
.footer .footer__list a:hover,
.footer .social a:hover { color: var(--ink-900); }
.footer .social a:hover { background: rgba(255, 255, 255, 0.55); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(2, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding-bottom: var(--sp-8);
}
/* La marca se centra en vertical dentro de su columna: así el logotipo no
   queda pegado al filete superior, sino a la altura de los enlaces. */
.footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer__brand img { width: 176px; margin-bottom: var(--sp-4); }
@media (max-width: 900px) {
  .footer__brand { justify-content: flex-start; }
}
.footer__tagline {
  font-size: var(--fs-300);
  line-height: var(--lh-relaxed);
  color: var(--ink-400);
  max-width: 32ch;
}
.footer__title {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: var(--sp-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__list a {
  display: inline-block;
  padding-block: 3px;
  font-size: var(--fs-300);
  color: var(--ink-400);
  transition: color var(--t-fast) var(--ease);
}
.footer__list a:hover { color: var(--brand-800); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(73, 98, 95, 0.18);
}
.footer__copy { font-size: var(--fs-100); color: var(--ink-300); }
.social { display: flex; gap: var(--sp-2); }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  color: var(--ink-400);
  background: transparent;
  transition:
    color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    transform var(--t-base) var(--ease);
}
.social a:hover {
  color: var(--brand-800);
  background: var(--brand-100);
  transform: translateY(-2px);
}
.social svg { width: 17px; height: 17px; }

/* --- WhatsApp flotante ------------------------------------------------------ */
.wa {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 54px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-full);
  color: var(--ink-900);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 2px 6px rgba(27, 31, 34, 0.08),
    0 14px 34px rgba(27, 31, 34, 0.12);
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--t-slow) var(--ease),
    opacity var(--t-slow) var(--ease),
    visibility var(--t-slow) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.wa.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
/* En la página de enlaces no hay scroll que lo dispare: entra siempre. */
body.bio .wa { transform: translateY(0); opacity: 1; visibility: visible; }
.wa:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 2px 6px rgba(27, 31, 34, 0.08),
    0 18px 40px rgba(27, 31, 34, 0.16);
}
.wa__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-full);
  color: #fff;
  background: linear-gradient(160deg, #34C55E, #1FA855);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.wa__icon svg { width: 20px; height: 20px; }
.wa__label {
  font-size: var(--fs-300);
  font-weight: 600;
  padding-inline-end: var(--sp-2);
  white-space: nowrap;
}

/* 10. MOVIMIENTO =========================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* 11. RESPONSIVE =========================================================== */

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .nav { display: none; }
  .nav-toggle { display: flex; }

  /* logotipo · botón de reserva · menú */
  .header__inner {
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-3);
  }
  .header__cta {
    grid-column: 2;
    justify-self: end;
    min-height: 40px;
    padding-inline: var(--sp-4);
    font-size: var(--fs-100);
  }
  .brand img { width: 148px; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero .container { order: 1; }
  .hero__photo { order: 2; }
  .hero__content { max-width: none; }
  .hero__photo {
    position: relative;
    inset: auto;
    width: calc(100% + var(--gutter) * 2);
    margin: var(--sp-7) calc(var(--gutter) * -1) 0;
    aspect-ratio: 37 / 30;
  }
  .hero__photo img {
    object-position: 58% 6%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  }
  .hero__photo::after {
    background: linear-gradient(180deg, rgba(244,248,245,.5) 0%, rgba(244,248,245,0) 30%);
  }
  .grid-2 { grid-template-columns: 1fr; gap: var(--sp-7); }
  .grid-2--reverse > :first-child { order: 2; }
  .about__media, .guide__media { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .hero__title { max-width: 14ch; }
  .lead { max-width: none; }
  .wa__label { display: none; }
  .wa { padding-inline: var(--sp-2); height: 56px; }
  .wa__icon { width: 40px; height: 40px; }
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
  background: rgba(252, 252, 250, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility var(--t-base) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-7);
}
.mobile-menu__list a {
  display: block;
  padding-block: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  border-bottom: 1px solid var(--line-subtle);
  transition: color var(--t-fast) var(--ease);
}
.mobile-menu__list a:hover { color: var(--brand-700); }
body.is-locked { overflow: hidden; }

/* 12. ACCESIBILIDAD Y UTILIDADES =========================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--brand-800);
  color: #fff;
  font-size: var(--fs-300);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .wa, .mobile-menu, .skip-link { display: none !important; }
}

/* Textura de grano (SVG en línea, ~0.6 KB, sin petición extra) */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Evita que el ™ caiga solo al final de línea */
.nowrap { white-space: nowrap; }

/* =============================================================================
   13. PROFUNDIDAD Y TEXTURA DE TARJETAS
   Tres capas por tarjeta: grano, luz especular superior y borde interior.
   ========================================================================== */

.card, .step, .plan, .quote {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background-image: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0) 42%
  );
}

/* Grano: rompe la planitud del color sin ensuciar */
.card::after, .step::after, .plan::after,
.quote::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

/* Filo de luz en el borde superior: da grosor al canto */
.card::before, .step::before, .plan::before,
.quote::before {
  content: '';
  position: absolute;
  inset: 0 6% auto;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 22%,
    rgba(255, 255, 255, 0.85) 78%,
    transparent
  );
}

/* Elevación en dos planos: contacto cercano + sombra ambiental amplia */
.card, .step, .plan, .quote {
  box-shadow:
    0 0 0 1px rgba(27, 31, 34, 0.05),
    0 2px 4px rgba(27, 31, 34, 0.05),
    0 12px 24px -6px rgba(27, 31, 34, 0.09),
    0 32px 64px -16px rgba(27, 31, 34, 0.12);
}
.card--lift:hover, .step:hover, .quote:hover, .plan:hover {
  box-shadow:
    0 0 0 1px rgba(27, 31, 34, 0.07),
    0 3px 6px rgba(27, 31, 34, 0.06),
    0 20px 36px -8px rgba(27, 31, 34, 0.12),
    0 52px 90px -20px rgba(27, 31, 34, 0.16);
}

/* El halo de la guía sí debe desbordar */


/* =============================================================================
   14. JERARQUÍA DE LA TARJETA DESTACADA
   ========================================================================== */

.plans { align-items: stretch; }

/* Dos filas: el bloque superior estira, el pie queda alineado en las cuatro */
/* Solo cuando las cuatro van en una fila tiene sentido alinear los pies */
@media (min-width: 1081px) {
  @supports (grid-template-rows: subgrid) {
    .plans { grid-template-rows: 1fr auto; }
    .plans > .plan {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      /* Sin esto, la columna implícita se dimensiona por el contenido mínimo
         y puede desbordar el relleno de la tarjeta. */
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
/* Apiladas o en dos columnas, cada tarjeta se ajusta a su contenido */
@media (max-width: 1080px) {
  .plans > .plan { display: flex; flex-direction: column; }
}
/* Una tarjeta suelta (fuera de la parrilla) se ajusta a su contenido */
.plan__top { flex: 1; }
.plan__top { display: block; min-width: 0; }

/* Las tres tarjetas secundarias retroceden */
.plan:not(.plan--featured) .plan__price-amount { color: var(--ink-700); }
.plan:not(.plan--featured) { background-color: var(--surface-0); }

/* La destacada avanza: escala, elevación, color y peso tipográfico */
.plan--featured {
  z-index: 2;
  background-image:
    linear-gradient(168deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(175deg, var(--brand-200) 0%, #C9DFD3 100%);
  box-shadow:
    0 0 0 1.5px rgba(73, 98, 95, 0.24),
    0 3px 6px rgba(27, 31, 34, 0.06),
    0 24px 44px -10px rgba(73, 98, 95, 0.2),
    0 60px 110px -24px rgba(73, 98, 95, 0.26);
}
.plan--featured:hover {
  box-shadow:
    0 0 0 1.5px rgba(73, 98, 95, 0.38),
    0 3px 6px rgba(27, 31, 34, 0.06),
    0 26px 50px -12px rgba(73, 98, 95, 0.2),
    0 64px 110px -24px rgba(73, 98, 95, 0.22);
}
.plan--featured .plan__title { font-size: 1.375rem; }
.plan--featured .plan__price-amount {
  font-size: 2.75rem;
  color: var(--brand-900);
}
.plan--featured .plan__price-currency { color: var(--brand-700); font-weight: 600; }
.plan--featured .plan__label { color: var(--brand-700); }
.plan--featured .checklist svg { color: var(--brand-800); }

@media (min-width: 1081px) {
  .plan--featured {
    transform: scale(1.045);
    transition:
      transform var(--t-base) var(--ease),
      box-shadow var(--t-base) var(--ease);
  }
  .plan--featured:hover { transform: scale(1.045) translateY(-4px); }
  /* Compensa el crecimiento para que no invada a la vecina */
  .plans { column-gap: calc(var(--sp-5) + 12px); }
}

/* =============================================================================
   15. MOVIMIENTO
   ========================================================================== */

/* Entrada: opacidad + desplazamiento + escala mínima. Nada llamativo. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.992);
  transition:
    opacity 620ms var(--ease),
    transform 720ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Parálaje del banner: la foto se mueve algo más despacio que el texto */
.hero__photo {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  will-change: transform;
}
.hero__content {
  transform: translate3d(0, var(--hero-text-shift, 0px), 0);
  opacity: var(--hero-fade, 1);
}

/* Imágenes: acercamiento muy leve al pasar el cursor */
.about__media img,
.guide__media img {
  transition: transform 900ms var(--ease);
}
.about__media:hover img { transform: scale(1.025); }
.guide__media:hover img { transform: scale(1.03) translateY(-4px); }

/* Pasos: el número reacciona con la tarjeta */
.step__num { transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.step:hover .step__num { transform: scale(1.06); background: var(--brand-200); }

/* Estrellas de los testimonios: aparecen escalonadas */
.quote.is-in .quote__stars svg { animation: star-in 420ms var(--ease) backwards; }
.quote.is-in .quote__stars svg:nth-child(1) { animation-delay: 60ms; }
.quote.is-in .quote__stars svg:nth-child(2) { animation-delay: 110ms; }
.quote.is-in .quote__stars svg:nth-child(3) { animation-delay: 160ms; }
.quote.is-in .quote__stars svg:nth-child(4) { animation-delay: 210ms; }
.quote.is-in .quote__stars svg:nth-child(5) { animation-delay: 260ms; }
@keyframes star-in {
  from { opacity: 0; transform: scale(0.6) translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo, .hero__content { transform: none !important; opacity: 1 !important; }
  .quote.is-in .quote__stars svg { animation: none; }
}

/* La tarjeta verde recupera su fondo (el bloque de textura lo pisaba) */
.card--tint {
  background-color: var(--brand-100);
  background-image:
    linear-gradient(168deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, var(--brand-100) 0%, var(--brand-200) 100%);
  box-shadow:
    0 0 0 1px rgba(73, 98, 95, 0.16),
    0 1px 2px rgba(27, 31, 34, 0.04),
    0 10px 24px -8px rgba(73, 98, 95, 0.1),
    0 32px 60px -16px rgba(73, 98, 95, 0.12);
}

/* =============================================================================
   16. JERARQUÍA TIPOGRÁFICA — un tamaño por rol, sin excepciones
   -----------------------------------------------------------------------------
   Titular de portada .......... --fs-900   38 → 60 px   600
   Título de sección (h2) ...... --fs-800   28 → 40 px   600
   Título de bloque (h3) ....... --fs-700   24 → 30 px   600
   Título de tarjeta (h4) ...... --fs-600      22 px     600
   Texto destacado / lead ...... --fs-500      18 px     400
   Cuerpo de sección ........... --fs-400      16 px     400
   Cuerpo de tarjeta, nav, botón --fs-300      14 px     400/600
   Antetítulos y etiquetas ..... --fs-200      13 px     600  0.14em MAYÚS
   Metadatos y legales ......... --fs-100      12 px     400
   ========================================================================== */

h1, .display        { font-size: var(--fs-900); line-height: var(--lh-display); }
h2                  { font-size: var(--fs-800); }
h3                  { font-size: var(--fs-700); }
h4, .plan__title    { font-size: var(--fs-600); line-height: var(--lh-snug); }
.plan__title        { font-weight: 700; }
.lead               { font-size: var(--fs-500); }
.prose p            { font-size: var(--fs-400); }

/* Todo el texto de tarjeta comparte tamaño */
.plan__desc,
.step p,
.quote__text,
.checklist li,
.checklist--sm li,
.footer__list a,
.nav__link,
.btn                { font-size: var(--fs-300); }

/* Todas las etiquetas comparten tamaño, peso y tracking */
.eyebrow,
.plan__kicker,
.plan__label,
.badge,
.footer__title      {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1.4;
}

.quote__name        { font-size: var(--fs-300); font-weight: 600; }
.quote__meta,
.text-fine,
.footer__copy,
.plan__price-currency { font-size: var(--fs-100); }

/* El precio es el único número grande; idéntico en las cuatro tarjetas */
.plan__price-amount { font-size: 2.25rem; }
.plan--featured .plan__price-amount { font-size: 2.25rem; }
.plan--featured .plan__title { font-size: var(--fs-600); }
.step__num          { font-size: var(--fs-200); }
.quote__avatar      { font-size: var(--fs-300); }
.mobile-menu__list a { font-size: var(--fs-700); }

/* =============================================================================
   17. ENTRADA DEL TITULAR EN DOS TIEMPOS
   Primero la frase completa; después, «bien» con su propio acento.
   Solo opacidad, transform y filter: no provoca reflujo ni salto de maqueta.
   ========================================================================== */

/* Cada línea del titular entra por separado */
.hero__title .ln {
  animation: frase-in 860ms var(--ease) backwards;
}
.hero__title .ln:nth-child(1) { animation-delay: 120ms; }
.hero__title .ln:nth-child(2) { animation-delay: 220ms; }
.hero__title .ln:nth-child(3) { animation-delay: 320ms; }

/* El corte de línea es intencional a partir de tablet;
   por debajo se deja fluir para que no se desborde. */
@media (min-width: 641px) {
  .hero__title { max-width: none; text-wrap: nowrap; }
  .hero__title .ln { display: block; }
}

@keyframes frase-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* «bien»: entra sola, un segundo después */
.hero__accent {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: inherit;
  color: var(--brand-800);
}
.hero__accent {
  animation: acento-in 820ms var(--ease) 1420ms backwards;
}
/* El signo de cierre llega 0,2 s detrás */
.hero__q {
  display: inline-block;
  animation: acento-in 820ms var(--ease) 1620ms backwards;
}
@keyframes acento-in {
  0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.94); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .hero__title .ln,
  .hero__accent,
  .hero__q { animation: none; }
}

/* =============================================================================
   18. BANNER MÓVIL — sin foto
   En móvil el retrato quedaba flotando bajo el texto sin sostener nada.
   Se sustituye por una composición tipográfica con más aire. La foto sigue
   estando en la sección «Lic. Lucila Glom».
   ========================================================================== */

@media (max-width: 900px) {
  .hero__photo { display: none; }

  .hero {
    display: flex;
    align-items: center;
    min-height: 78svh;
    padding-top: calc(var(--header-h) + clamp(4.5rem, 2.5rem + 5.5vw, 9rem));
    padding-bottom: var(--sp-9);
    background:
      radial-gradient(
        70% 42% at 100% 6%,
        rgba(190, 218, 204, 0.34) 0%,
        transparent 68%
      ),
      radial-gradient(
        56% 34% at -10% 96%,
        rgba(166, 201, 182, 0.24) 0%,
        transparent 70%
      ),
      linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 70%, var(--surface-0) 100%);
  }
  .hero .container { order: 0; }
  .hero__content { max-width: none; }
  .hero__title { max-width: 15ch; }
  .lead { font-size: var(--fs-500); }
}

/* =============================================================================
   19. MÁS MOVIMIENTO
   ========================================================================== */

/* El manifiesto entra palabra a palabra */
.statement .w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(5px);
  transition:
    opacity 620ms var(--ease),
    transform 720ms var(--ease),
    filter 620ms var(--ease);
  transition-delay: calc(var(--i) * 38ms);
}
.statement.is-in .w { opacity: 1; transform: none; filter: none; }

/* Parálaje suave de las imágenes de sección */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* El filete de los antetítulos se dibuja */
.eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 640ms var(--ease) 120ms;
}
[data-reveal].is-in .eyebrow::before,
.eyebrow.is-in::before { transform: scaleX(1); }

/* Los puntos de las listas entran escalonados */
.checklist li {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 520ms var(--ease),
    transform 560ms var(--ease);
}
[data-reveal].is-in .checklist li { opacity: 1; transform: none; }
[data-reveal].is-in .checklist li:nth-child(1) { transition-delay: 120ms; }
[data-reveal].is-in .checklist li:nth-child(2) { transition-delay: 180ms; }
[data-reveal].is-in .checklist li:nth-child(3) { transition-delay: 240ms; }
[data-reveal].is-in .checklist li:nth-child(4) { transition-delay: 300ms; }
[data-reveal].is-in .checklist li:nth-child(5) { transition-delay: 360ms; }
[data-reveal].is-in .checklist li:nth-child(6) { transition-delay: 420ms; }

/* El precio sube al entrar la tarjeta */
.plan__price, .plan__foot .btn {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 560ms var(--ease) 380ms,
    transform 620ms var(--ease) 380ms;
}
[data-reveal].is-in .plan__price,
[data-reveal].is-in .plan__foot .btn { opacity: 1; transform: none; }
[data-reveal].is-in .plan__foot .btn { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .statement .w,
  .checklist li,
  .plan__price,
  .plan__foot .btn { opacity: 1 !important; transform: none !important; filter: none !important; }
  .eyebrow::before { transform: scaleX(1) !important; }
  [data-parallax] { transform: none !important; }
}

/* =============================================================================
   20. SELLO DE DOCTORALIA (pie)
   Versión estática del certificado: mismos datos, cero peticiones a terceros.
   ========================================================================== */

.seal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow:
    0 0 0 1px rgba(27, 31, 34, 0.06),
    0 2px 4px rgba(27, 31, 34, 0.04),
    0 10px 22px -8px rgba(27, 31, 34, 0.09);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.seal:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(73, 98, 95, 0.16),
    0 3px 6px rgba(27, 31, 34, 0.05),
    0 16px 32px -10px rgba(27, 31, 34, 0.14);
}

.seal__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--brand-800);
  background: var(--brand-100);
}
.seal__icon svg { width: 22px; height: 22px; }

.seal__body { display: flex; flex-direction: column; gap: 2px; }

.seal__top { display: flex; align-items: center; gap: var(--sp-2); }
.seal__stars { display: flex; gap: 2px; color: var(--star); }
.seal__stars svg { width: 11px; height: 11px; }
.seal__count {
  font-size: var(--fs-100);
  color: var(--ink-400);
  line-height: 1.3;
}

.seal__title {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}

.seal__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-100);
  color: var(--brand-800);
  line-height: 1.35;
}
.seal__arrow {
  width: 12px;
  height: 12px;
  transition: transform var(--t-base) var(--ease);
}
.seal:hover .seal__arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .seal { width: 100%; }
}

/* =============================================================================
   21. CARRUSEL DE TESTIMONIOS
   Cinta continua en CSS puro: dos grupos idénticos que se desplazan la mitad
   exacta de su ancho, así el salto es invisible. Se detiene al pasar el cursor
   y al enfocar con el teclado.
   ========================================================================== */

.marquee {
  --marquee-gap: var(--sp-5);
  --marquee-speed: 90s;
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__inner {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  padding-block: var(--sp-2) var(--sp-6);
  animation: cinta var(--marquee-speed) linear infinite;
}

.marquee__group {
  display: flex;
  gap: var(--marquee-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

@keyframes cinta {
  to { transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0); }
}

.marquee .quote {
  flex: 0 0 clamp(290px, 26vw, 380px);
  height: auto;
  padding: var(--sp-5);
  gap: var(--sp-3);
}
/* Se acotan a nueve líneas para que ninguna tarjeta dispare la altura de todas */
.marquee .quote__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  line-height: 1.72;
}

/* Los testimonios ya no dependen de [data-reveal]: son visibles desde el inicio */
.marquee .quote .quote__stars svg { animation: none; opacity: 1; }

/* Sin animación: se convierte en un carrusel deslizable a mano */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--gutter);
  }
  .marquee__inner { animation: none; }
  .marquee__group:last-child { display: none; }
  .marquee .quote { scroll-snap-align: center; }
}

/* Sello bajo el titular de la sección: presenta la fuente de los testimonios
   antes de leerlos, en lugar de quedar suelto al final con medio banner de aire. */
.seal--head {
  display: inline-flex;
  margin: calc(var(--sp-5) * -1) auto var(--sp-7);
}
.seal--center {
  display: inline-flex;
  margin: var(--sp-5) auto 0;
}
.seal--center + * { clear: both; }
#experiencias .container { display: flex; flex-direction: column; align-items: center; }
#experiencias .section-head { width: 100%; }

/* =============================================================================
   22. RECOMENDADOR DE PROGRAMA
   Tres preguntas, una recomendación. Sin dependencias ni terceros.
   ========================================================================== */

.finder {
  max-width: 680px;
  margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0;
}

.finder__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  text-align: center;
}
.finder__title {
  font-size: var(--fs-700);
  font-weight: 600;
  max-width: 22ch;
}

.finder__card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow:
    0 0 0 1px rgba(27, 31, 34, 0.05),
    0 2px 4px rgba(27, 31, 34, 0.05),
    0 12px 24px -6px rgba(27, 31, 34, 0.09),
    0 32px 64px -16px rgba(27, 31, 34, 0.12);
}

/* --- Progreso ------------------------------------------------------------- */
.finder__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.finder__bar {
  flex: 1;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.finder__bar i {
  display: block;
  height: 100%;
  width: 33.33%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-800));
  transition: width 420ms var(--ease);
}
.finder__step {
  flex: none;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --- Pregunta ------------------------------------------------------------- */
.finder__q {
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}

.finder__options { display: flex; flex-direction: column; gap: var(--sp-3); }

.finder__option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--ink-600);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px rgba(27, 31, 34, 0.08);
  transition:
    background-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-base) var(--ease),
    color var(--t-fast) var(--ease);
}
.finder__option:hover {
  color: var(--ink-900);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-400);
  transform: translateY(-1px);
}
.finder__option::after {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  margin-inline-start: auto;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1.5px rgba(27, 31, 34, 0.18);
  transition: box-shadow var(--t-fast) var(--ease);
}
.finder__option:hover::after {
  box-shadow: inset 0 0 0 6px var(--brand-800);
}

/* --- Resultado ------------------------------------------------------------ */
.finder__result { display: flex; flex-direction: column; gap: var(--sp-5); }

.finder__verdict {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-800);
}

.finder__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.finder__pick-name {
  font-size: var(--fs-700);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
}
.finder__pick-price {
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}
.finder__pick-price small {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--ink-400);
  margin-inline-end: 4px;
}

.finder__why {
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
}
.finder__note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--ink-600);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.12);
}
.finder__note svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--brand-800);
}

.finder__reset {
  display: block;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-400);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.finder__reset:hover { color: var(--brand-800); background: var(--brand-50); }

/* Entrada de cada paso */
.finder__stage > * { animation: paso-in 420ms var(--ease) backwards; }
@keyframes paso-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .finder__stage > * { animation: none; }
}

@media (max-width: 600px) {
  .finder__pick { flex-direction: column; align-items: flex-start; }
  .finder__option { padding: var(--sp-4); }
}

/* =============================================================================
   23. PÁGINAS INTERIORES
   ========================================================================== */

/* --- Cabecera de página ---------------------------------------------------- */
.pagehero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 4.5vw, 7rem));
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background:
    radial-gradient(42% 48% at 4% 92%, rgba(190, 218, 204, 0.26) 0%, transparent 70%),
    radial-gradient(40% 40% at 96% 6%, rgba(166, 201, 182, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 66%, var(--surface-0) 100%);
}
.pagehero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
.pagehero .container { position: relative; z-index: 1; }
.pagehero__inner { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 46rem; }
.pagehero__inner--center { align-items: center; text-align: center; margin-inline: auto; }
.pagehero__inner--center .lead { max-width: 44ch; }
.pagehero h1 { max-width: 24ch; }
.pagehero .lead { max-width: 52ch; }

/* --- Cabecera con la foto fundida en todo el banner ------------------------
   Mismo criterio que el hero de portada: la foto está tomada sobre lienzo
   claro (#F1F1F3), el mismo color de fondo de la marca, así que se integra
   en el banner con una máscara y no queda ninguna costura visible.        */
.pagehero--photo {
  display: flex;
  align-items: center;
  min-height: clamp(480px, 68vh, 720px);
  padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}
.pagehero--photo .container { width: 100%; }
.pagehero--photo .pagehero__inner { max-width: 37rem; }

.pagehero__photo {
  position: absolute;
  inset: calc(var(--header-h) - 8px) 0 0 auto;
  width: min(41%, 560px);
  z-index: 0;
  pointer-events: none;
}
.pagehero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  transform-origin: bottom center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, #000 58%, transparent 96%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, #000 58%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (min-width: 1600px) {
  .pagehero__photo { width: min(32%, 560px); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .pagehero__photo { width: 42%; }
  .pagehero--photo .pagehero__inner { max-width: 28rem; }
  .pagehero__photo img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 42%),
      linear-gradient(180deg, #000 58%, transparent 96%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 42%),
      linear-gradient(180deg, #000 58%, transparent 96%);
  }
}
/* Móvil: la foto pasa a sangre bajo el texto, fundida por arriba y por abajo */
@media (max-width: 900px) {
  .pagehero--photo {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }
  .pagehero--photo .pagehero__inner { max-width: none; }
  .pagehero__photo {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: var(--sp-7);
    aspect-ratio: 37 / 30;
  }
  .pagehero__photo img {
    object-position: 50% 4%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 58%, transparent 94%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 58%, transparent 94%);
  }
}


/* --- Texto largo ----------------------------------------------------------- */
.longform { max-width: 62ch; }
.longform p { font-size: var(--fs-400); line-height: var(--lh-relaxed); }
.longform p + p { margin-top: var(--sp-5); }
.longform h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-5); }
.longform h3 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); font-size: var(--fs-600); }
.longform strong { font-weight: 600; color: var(--ink-900); }
.longform em { font-style: italic; }
.longform > *:first-child { margin-top: 0; }

/* --- Aviso / nota ---------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-300);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.14);
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--brand-800); }
.notice strong { color: var(--ink-900); font-weight: 600; }

/* --- Credencial (matrícula) ------------------------------------------------ */
.credential {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--fs-300);
  color: var(--ink-600);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
}
.credential b { color: var(--ink-900); font-weight: 600; letter-spacing: 0.02em; }
.credential svg { width: 18px; height: 18px; color: var(--brand-800); }

/* --- Formación (lista de estudios) ----------------------------------------- */
.studies { display: grid; gap: var(--sp-4); }
.study {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-subtle);
}
.study:last-child { border-bottom: 0; padding-bottom: 0; }
.study::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: var(--r-full);
  background: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(190, 218, 204, 0.35);
}
.study__name { font-size: var(--fs-400); font-weight: 600; color: var(--ink-900); line-height: 1.45; }
.study__where { font-size: var(--fs-300); color: var(--ink-400); margin-top: 2px; }

/* --- Preguntas frecuentes -------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); max-width: 46rem; margin-inline: auto; }
.faq__item {
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow:
    0 0 0 1px rgba(27, 31, 34, 0.05),
    0 2px 4px rgba(27, 31, 34, 0.04),
    0 12px 24px -10px rgba(27, 31, 34, 0.07);
  transition: box-shadow var(--t-base) var(--ease);
}
.faq__item[open] {
  box-shadow:
    0 0 0 1px rgba(73, 98, 95, 0.18),
    0 3px 6px rgba(27, 31, 34, 0.05),
    0 20px 36px -12px rgba(27, 31, 34, 0.11);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  transition: color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand-800); }
.faq__q::after {
  content: '';
  width: 13px;
  height: 13px;
  flex: none;
  margin-inline-start: auto;
  margin-top: 6px;
  border-right: 2px solid var(--brand-800);
  border-bottom: 2px solid var(--brand-800);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-300);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  max-width: 62ch;
}
.faq__a p + p { margin-top: var(--sp-4); }

/* --- Formulario ------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-400);
}
.field__control {
  width: 100%;
  padding: var(--sp-4);
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px rgba(27, 31, 34, 0.12);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field__control::placeholder { color: var(--ink-200); }
.field__control:hover { box-shadow: inset 0 0 0 1px rgba(27, 31, 34, 0.2); }
.field__control:focus {
  outline: 0;
  background: var(--surface-0);
  box-shadow: inset 0 0 0 2px var(--brand-800);
}
textarea.field__control { min-height: 150px; resize: vertical; }
.field__error {
  font-size: var(--fs-100);
  color: #A4443C;
  min-height: 1em;
}
.field--invalid .field__control { box-shadow: inset 0 0 0 2px #A4443C; }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-300); line-height: 1.6; color: var(--ink-600); cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--brand-800); }
.check a { color: var(--brand-800); text-decoration: underline; text-underline-offset: 2px; }

.form__status {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  line-height: 1.55;
}
.form__status.is-ok { display: flex; color: var(--brand-900); background: var(--brand-100); box-shadow: inset 0 0 0 1px rgba(73,98,95,.2); }
.form__status.is-error { display: flex; color: #8A3A33; background: #FBF0EF; box-shadow: inset 0 0 0 1px rgba(164,68,60,.24); }
.form__status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* Trampa para robots: invisible para personas */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --- Vías de contacto ------------------------------------------------------ */
.ways { display: grid; gap: var(--sp-4); }
.way {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.way:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--e2); }
.way__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  color: var(--brand-800);
  background: var(--brand-100);
}
.way__icon svg { width: 21px; height: 21px; }
.way__name { font-size: var(--fs-300); font-weight: 600; color: var(--ink-900); }
.way__meta { font-size: var(--fs-100); color: var(--ink-400); }

@media (max-width: 720px) {
  .form__row { grid-template-columns: 1fr; }
}

/* Lista de exclusiones: mismo componente, otro icono y otro tono */
.checklist--cross svg { color: var(--ink-300); }

/* --- Bloque de precio (páginas de producto) -------------------------------- */
.pricebox { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.pricebox__amount {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pricebox__cur { font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--ls-wide); color: var(--ink-400); }
.pricebox__old {
  display: inline-flex; align-items: baseline; gap: .28em;
  font-size: var(--fs-400); font-weight: 500; color: var(--ink-300);
}
/* La tachadura cae solo sobre la cifra, no sobre «USD» */
.pricebox__old-cur { font-size: var(--fs-100); letter-spacing: var(--ls-wide); }
.pricebox__old-num {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}
.closing .pricebox__amount { justify-content: center; }

/* Tres pasos en lugar de cuatro */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps--3 { grid-template-columns: 1fr; } }

/* El nombre y el detalle de cada vía van apilados */
.way > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* =============================================================================
   24. PÁGINAS LEGALES
   Tipografía de documento: cómoda de leer, jerarquía clara, sin adornos.
   ========================================================================== */

.legal { max-width: 66ch; }
.legal p { font-size: var(--fs-300); line-height: 1.75; }
.legal p + p { margin-top: var(--sp-4); }
.legal h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-600);
  font-weight: 700;
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}
.legal h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-500);
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: var(--ls-tight);
}
.legal > *:first-child { margin-top: 0; }
.legal ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.legal ul li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-300);
  line-height: 1.7;
}
.legal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--brand-400);
}
.legal strong { font-weight: 600; color: var(--ink-900); }
.legal a { color: var(--brand-800); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-900); }
.legal hr {
  height: 1px;
  border: 0;
  margin-block: var(--sp-7);
  background: var(--line);
}

/* Índice lateral */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--line-subtle);
}
.toc__title {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--sp-4);
}
.toc ol { display: grid; gap: var(--sp-2); counter-reset: toc; }
.toc a {
  display: block;
  font-size: var(--fs-100);
  line-height: 1.5;
  color: var(--ink-600);
  transition: color var(--t-fast) var(--ease);
}
.toc a:hover { color: var(--brand-800); }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  font-size: var(--fs-100);
  color: var(--ink-300);
}

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; order: -1; }
}

/* =============================================================================
   25. ENTRADA DE LA ENTRADILLA Y LOS BOTONES DEL BANNER
   El titular ocupa los primeros 2,4 s. La entradilla arranca justo después,
   palabra a palabra y con muy poco retardo entre una y otra: se lee como una
   ola, no como una lista.
   ========================================================================== */

.lead--anim .w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 520ms var(--ease),
    transform 620ms var(--ease);
  transition-delay: calc(1850ms + var(--i) * 22ms);
}
.lead--anim.is-in .w { opacity: 1; transform: none; }

.actions--anim > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: botones-in 640ms var(--ease) forwards;
}
.actions--anim > *:nth-child(1) { animation-delay: 2750ms; }
.actions--anim > *:nth-child(2) { animation-delay: 2860ms; }

@keyframes botones-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lead--anim .w { opacity: 1; transform: none; transition: none; }
  .actions--anim > * { opacity: 1; transform: none; animation: none; }
}

/* =============================================================================
   26. TITULAR EN DOS TIEMPOS (afirmación / giro)
   Las dos primeras líneas plantean lo que dice el análisis; las dos últimas,
   lo que siente ella. El giro entra más tarde para que se lea como una pausa.
   ========================================================================== */

/* Un punto por debajo del display: el titular son 4 líneas y pesa mucho */
.hero__title--dos { font-size: clamp(1.95rem, 1.35rem + 2.3vw, 3.05rem); }

/* Pausa visual entre la afirmación y el giro, después de los puntos suspensivos */
/* La segunda oración siempre arranca en su propia línea y con aire por encima:
   es la pausa que separa la afirmación del giro. */
.hero__title--dos .ln--giro { display: block; }
.hero__title--dos .ln:not(.ln--giro) + .ln--giro { margin-top: 0.5em; }

/* Primero la afirmación; el giro entra después, como una pausa. */
/* Doble clase para ganar a las reglas por posición del bloque anterior */
.hero__title--dos .ln.ln { animation-delay: 120ms; }
.hero__title--dos .ln.ln--giro { animation-delay: 1180ms; }
.hero__title--dos .ln.ln--giro + .ln.ln--giro { animation-delay: 1320ms; }

/* «todo bien» entra con las dos primeras líneas, no aparte */
.hero__title--dos .hero__accent { animation: none; }

/* El giro pesa más: mismo tamaño, color pleno */
.hero__title--dos .ln--giro { color: var(--ink-900); }

/* La entradilla y los botones esperan al giro */
.hero__title--dos ~ * .lead--anim .w,
.hero .lead--anim .w { transition-delay: calc(2200ms + var(--i) * 26ms); }
.actions--anim > *:nth-child(1) { animation-delay: 2900ms; }
.actions--anim > *:nth-child(2) { animation-delay: 3010ms; }

/* --- Logotipo de colaboración ---------------------------------------------- */
.partner {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 0 0 1px var(--line-subtle), var(--e1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.partner:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--e2); }
.partner img { width: 164px; height: auto; }

/* =============================================================================
   27. PÁGINA DE ENLACES (el enlace de Instagram)
   Pantalla completa, sin cabecera ni pie: entra y elige. Los botones aparecen
   uno a uno y llevan la textura de la marca — grano, luz especular y cristal.
   ========================================================================== */

body.bio {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(52% 40% at 88% 4%, rgba(190, 218, 204, 0.42) 0%, transparent 66%),
    radial-gradient(56% 42% at -6% 96%, rgba(166, 201, 182, 0.34) 0%, transparent 68%),
    linear-gradient(178deg, var(--surface-2) 0%, var(--surface-1) 58%, var(--surface-0) 100%);
}
body.bio::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

.bio__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 4vw, 4.5rem) var(--gutter);
  text-align: center;
}

/* --- Encabezado ------------------------------------------------------------ */
.bio__foto {
  width: 116px;
  height: 116px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-full);
  overflow: hidden;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 0 0 6px rgba(73, 98, 95, 0.14),
    0 12px 30px -10px rgba(27, 31, 34, 0.22);
}
.bio__foto img { width: 100%; height: 100%; object-fit: cover; }

.bio__logo { width: 216px; margin: 0 auto var(--sp-5); }
.bio__nombre {
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  line-height: 1.25;
}
.bio__rol {
  margin-top: var(--sp-2);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--ink-400);
  max-width: 30ch;
  margin-inline: auto;
}
.bio__matricula {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: 5px var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-100);
  color: var(--ink-400);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), var(--e1);
}
.bio__matricula svg { width: 14px; height: 14px; color: var(--brand-800); }
.bio__matricula b { color: var(--ink-900); font-weight: 600; }

/* --- Botones --------------------------------------------------------------- */
.bio__lista {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  text-align: left;
}

.bio__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(166deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.34) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(27, 31, 34, 0.04),
    0 10px 22px -8px rgba(27, 31, 34, 0.12),
    0 28px 52px -20px rgba(27, 31, 34, 0.14);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease);
}
/* Grano: la misma textura que el resto de la web */
.bio__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
.bio__btn:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 6px rgba(27, 31, 34, 0.05),
    0 16px 30px -10px rgba(27, 31, 34, 0.16),
    0 40px 70px -24px rgba(27, 31, 34, 0.2);
}
.bio__btn:active { transform: translateY(-1px) scale(0.995); }

/* Destacado: verde de marca */
.bio__btn--destacado {
  background:
    linear-gradient(166deg, rgba(255, 255, 255, 0.62) 0%, rgba(190, 218, 204, 0.72) 44%, rgba(166, 201, 182, 0.78) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 6px rgba(73, 98, 95, 0.1),
    0 14px 28px -10px rgba(73, 98, 95, 0.24),
    0 36px 64px -24px rgba(73, 98, 95, 0.28);
}
.bio__btn--destacado:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 8px rgba(73, 98, 95, 0.12),
    0 20px 36px -12px rgba(73, 98, 95, 0.3),
    0 48px 84px -28px rgba(73, 98, 95, 0.32);
}

.bio__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--brand-800);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.bio__icono svg { width: 20px; height: 20px; }

/* --- Botones con la foto en un costado --------------------------------------
   La imagen se ancla a la derecha y se funde hacia la izquierda: la cara queda
   siempre despejada y el texto nunca se le monta encima.                    */
.bio__wrap { max-width: 560px; }
.bio__lista { gap: var(--sp-4); text-align: left; }

.bio__btn {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(112px, 28vw, 136px);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-0);
  box-shadow:
    0 3px 6px rgba(27, 31, 34, 0.05),
    0 16px 32px -14px rgba(27, 31, 34, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bio__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-subtle);
}

.bio__fondo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.bio__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
}
/* La foto va recortada (sin lienzo): se apoya en el blanco del botón sin
   máscara lateral, así no se ve ningún rectángulo beige. */
.bio__fondo--lucila { width: 42%; }
.bio__fondo--lucila { width: 46%; }
.bio__fondo--lucila img {
  object-fit: contain;
  object-position: 50% 100%;
  /* El encuadre corta a la altura del pecho: se difumina el borde inferior
     para que la silueta se apoye en el botón en vez de acabar en seco. */
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 66%, transparent 99%);
}
.bio__btn:hover .bio__fondo img { transform: scale(1.05); }

/* Encuadre: la cara, centrada en su mitad */

/* La guía: se entra al bloque de tablets, no se corta ninguno por la mitad,
   y el desvanecido lateral es más largo para que no haya canto duro. */
.bio__fondo--guia { width: 52%; }
.bio__fondo--guia img {
  object-fit: cover;
  object-position: 62% 50%;
  transform: scale(0.98);
  transform-origin: 60% 50%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 72%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 72%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.bio__btn:hover .bio__fondo--guia img { transform: scale(1.02); }

/* NutricionGPS: logotipo, no foto */
.bio__fondo--gps { width: 38%; display: grid; place-items: center; padding-right: var(--sp-4); }
.bio__btn--gps .bio__texto { max-width: 62%; }
.bio__fondo--gps img {
  height: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

/* Sin foto: tarjeta verde de marca */
.bio__btn--liso {
  background: linear-gradient(120deg, var(--brand-100) 0%, var(--brand-200) 62%, var(--brand-300) 100%);
  box-shadow:
    0 3px 6px rgba(73, 98, 95, 0.08),
    0 16px 32px -14px rgba(73, 98, 95, 0.26);
}
.bio__btn--liso::before { box-shadow: inset 0 0 0 1px rgba(73, 98, 95, 0.14); }

.bio__texto { position: relative; z-index: 1; max-width: 56%; }
.bio__btn--liso .bio__texto { max-width: 80%; }
.bio__titulo {
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 0.74rem + 0.4vw, 1rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-900);
}

.bio__btn .bio__flecha { display: none; }

/* El destacado, con filete verde */
.bio__btn--destacado {
  background: linear-gradient(120deg, var(--brand-100) 0%, var(--brand-200) 62%, var(--brand-300) 100%);
  box-shadow:
    0 3px 6px rgba(73, 98, 95, 0.1),
    0 18px 34px -12px rgba(73, 98, 95, 0.3);
}
.bio__btn--destacado::before { box-shadow: inset 0 0 0 2px var(--brand-400); }
.bio__btn--destacado:hover::before { box-shadow: inset 0 0 0 2px var(--brand-300); }

@media (max-width: 420px) {
  .bio__btn { min-height: 104px; padding-inline: var(--sp-5); }
  .bio__fondo { width: 44%; }
  .bio__texto { max-width: 58%; }
}

/* --- Redes y pie ----------------------------------------------------------- */
.bio__redes {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.bio__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  color: var(--ink-400);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), var(--e1);
  transition: color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.bio__redes a:hover { color: var(--brand-800); background: rgba(255, 255, 255, 0.95); transform: translateY(-3px); }
.bio__redes svg { width: 18px; height: 18px; }

.bio__pie {
  margin-top: var(--sp-6);
  font-size: var(--fs-100);
  color: var(--ink-300);
}
.bio__pie a { color: var(--ink-400); text-decoration: underline; text-underline-offset: 2px; }
.bio__pie a:hover { color: var(--brand-800); }

/* --- Entrada escalonada ---------------------------------------------------- */
.bio [data-bio] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: bio-in 620ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 160ms);
}
@keyframes bio-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bio [data-bio] { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 420px) {
  .bio__btn { padding: var(--sp-4); gap: var(--sp-3); }
  .bio__foto { width: 100px; height: 100px; }
}

/* La entradilla del banner va en 2 líneas y el único corte permitido es el de
   antes de la «y». Se fuerza a partir de 1200px, que es donde hay ancho para
   que la primera línea entre entera; por debajo se deja fluir. */
.hero .lead .brk { display: none; }
@media (min-width: 901px) {
  .hero__content { max-width: 46rem; }
  .hero .lead { max-width: none; white-space: nowrap; }
  .hero .lead .brk { display: inline; }
}
/* Franja intermedia: el ancho útil es menor, así que la entradilla baja
   un punto de cuerpo para que la primera línea entre entera. */
@media (max-width: 1199px) and (min-width: 901px) {
  .hero__content { max-width: none; }
  .hero .lead { font-size: 1.02rem; }
}