/* ═══════════════════════════════════════════════════════════════════
   Isabel Castellanos · Psicóloga
   Sistema de diseño. Sigue el manual de marca:
   cuatro colores · el coral SOLO dentro del símbolo · mobile-first.
   Tipografía: Fraunces (titulares) + Figtree (texto e interfaz).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ── */
  --azul-profundo: #16324F;
  --azul: #2C6FAF;
  --azul-claro: #5B96CC;
  --celeste: #DCEBF7;
  --celeste-suave: #F1F7FC;
  --coral: #E8664A;         /* acento: solo énfasis. Nunca en botones ni enlaces */
  --coral-texto: #C24E2D;   /* la misma familia, oscurecida para cumplir contraste en texto chico */

  /* ── Neutros ── */
  --tinta: #12283F;
  --texto: #3D5164;
  --gris: #74889B;
  --linea: #E3EAF1;
  --linea-suave: #EFF4F8;
  --blanco: #FFFFFF;
  --papel: #FBFCFD;

  /* ── Tipografía ── */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto-f: 'Figtree', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.6rem, 1.35rem + 3.9vw, 5.1rem);
  --t-h2:   clamp(1.95rem, 1.25rem + 2.1vw, 3.15rem);
  /* Escala ampliada 30 jul: legibilidad en móvil para pacientes mayores */
  --t-h3:   clamp(1.2rem, 1.05rem + .45vw, 1.45rem);
  --t-lead: clamp(1.125rem, 1.05rem + .4vw, 1.35rem);
  --t-base: 1.125rem;   /* 18px */
  --t-sm:   1rem;       /* 16px */
  --t-xs:   .9rem;      /* 14.4px — nada baja de aquí */

  /* ── Ritmo ── */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2.25rem;
  --s5: 3.5rem; --s6: 5rem;   --s7: 7.5rem;  --s8: 10rem;
  --ancho: 1180px;
  --ancho-texto: 660px;
  --borde: 18px;
  --borde-sm: 12px;

  /* ── Profundidad ── */
  --sombra-s: 0 1px 2px rgba(18, 40, 63, .04), 0 4px 12px rgba(18, 40, 63, .05);
  --sombra-m: 0 2px 6px rgba(18, 40, 63, .05), 0 14px 34px rgba(18, 40, 63, .08);
  --sombra-l: 0 4px 12px rgba(18, 40, 63, .06), 0 30px 70px rgba(18, 40, 63, .14);

  /* ── Movimiento ── */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--texto-f);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; /* clip: sin paneo lateral en iOS */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--tinta);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 var(--s2);
  font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 40;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--texto-f); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
p  { margin: 0 0 var(--s2); }
em { font-style: italic; color: var(--coral-texto); font-variation-settings: 'SOFT' 40, 'WONK' 1; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.estrecho { max-width: var(--ancho-texto); margin-inline: auto; }
.seccion { padding: 4rem 0; } /* ~64px móvil */
.seccion--celeste { background: var(--celeste-suave); }
.seccion--papel { background: var(--blanco); }

/* ═══ Sistema de fondos alternados (30 jul) ═══
   El cambio de color ES el separador: corte limpio, sin ondas.
   Asignación del home: hero=gradient · motivos=celeste · cómo-trabajo=white ·
   tres-pasos=celeste · precios=white · testimonios=celeste · faq=white ·
   cierre/footer=navy */
.section--white { background: var(--blanco); }
.section--celeste { background: var(--celeste); }
/* Invertido 30 jul (Edgar): termina en blanco para que el corte con el
   celeste de la sección siguiente se lea como frontera entre secciones */
.section--gradient { background: linear-gradient(180deg, var(--celeste) 0%, var(--blanco) 100%); }
.section--navy { background: var(--azul-profundo); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: var(--celeste); }
.centrado { text-align: center; }
.lead { font-size: var(--t-lead); color: var(--texto); line-height: 1.55; }

/* ── Antetítulo ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--azul); margin-bottom: var(--s2);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--coral); }
.centrado .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--coral); }

/* ═══ Botones ═══ */
.btn {
  --bg: linear-gradient(180deg, #3B7FC2 0%, var(--azul) 52%, #275F99 100%);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.85rem; border-radius: 100px;
  font-family: var(--texto-f); font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 2px rgba(18,40,63,.12), 0 8px 22px rgba(44,111,175,.30);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), background .25s var(--curva-suave);
  position: relative; overflow: hidden;
}
/* brillo que barre el botón al pasar el mouse */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.32) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .7s var(--curva);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18,40,63,.12), 0 14px 32px rgba(44,111,175,.42); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(18,40,63,.14), 0 4px 12px rgba(44,111,175,.28); }
.btn:focus-visible { outline: 3px solid rgba(44,111,175,.45); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; flex: none; position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }
.btn--fantasma { --bg: transparent; --fg: var(--azul); border-color: var(--azul); box-shadow: none; }
.btn--fantasma::after { display: none; }
.btn--fantasma:hover { background: var(--blanco); border-color: var(--azul);
  box-shadow: 0 8px 22px rgba(44,111,175,.16); }
.btn--claro { --bg: #fff; --fg: var(--azul-profundo); }

/* ── Enlace con flecha ── */
.enlace {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 600;
  font-size: var(--t-sm); text-decoration: none; color: var(--azul);
}
.enlace svg { width: 15px; height: 15px; transition: transform .3s var(--curva); }
.enlace:hover svg { transform: translateX(4px); }

/* ═══ Encabezado ═══ */
.top {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: var(--blanco);            /* mockup 30 jul: barra blanca sólida */
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--curva-suave), box-shadow .4s var(--curva-suave);
}
.top.scrolled { border-bottom-color: var(--linea); box-shadow: 0 1px 12px rgba(18,40,63,.05); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: var(--s2);
             transition: height .4s var(--curva); }
.top.scrolled .wrap { height: 72px; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca img { width: 74px; transition: width .4s var(--curva); }
.top.scrolled .marca img { width: 58px; }
.marca__n { display: block; font-family: var(--display); font-size: 1.06rem; color: var(--tinta); line-height: 1.1;
            letter-spacing: -.015em; font-variation-settings: 'SOFT' 22; }
.marca__r { display: block; font-size: .75rem; color: var(--gris); letter-spacing: .11em; text-transform: uppercase; margin-top: 2px; }
.nav { display: none; gap: var(--s4); }
.nav a { position: relative; color: var(--texto); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1.5px;
  background: var(--azul); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--curva);
}
.nav a:hover { color: var(--tinta); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.top .btn { padding: .7rem 1.25rem; font-size: .9375rem; }

/* ═══ Hero ═══ */
/* Mockup 30 jul: sección sobre fondo celeste suave, blob celeste tras la foto */
.hero { position: relative; padding: calc(88px + var(--s6)) 0 var(--s4); overflow: hidden; }
.linea-coral { display: block; width: 44px; height: 4px; border-radius: 2px;
               background: var(--coral); margin-bottom: var(--s3); }
.hero h1 em { color: var(--coral); white-space: nowrap; }
.hero__grid { display: grid; gap: var(--s5); align-items: center; }
.hero h1 { margin-bottom: var(--s3); }
.hero__sub { font-size: var(--t-lead); color: var(--texto); margin-bottom: var(--s4); max-width: 30ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--s4); }
/* Checks del hero como chips (30 jul): cada uno es una unidad que no se parte */
.hero__pie { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .9375rem; font-weight: 600;
             color: var(--azul-profundo); padding-top: var(--s3);
             position: relative; z-index: 1; /* por encima del blob de la foto en móvil */ }
.hero__pie > span { display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 100px;
  padding: .55rem 1.05rem .55rem .85rem; box-shadow: 0 1px 2px rgba(18,40,63,.05);
  white-space: nowrap; }
.hero__pie svg { width: 15px; height: 15px; stroke: var(--azul); stroke-width: 2.4; flex: none; }
@media (max-width: 390px) {
  .hero__pie > span { white-space: normal; border-radius: 18px; }
}
@media (max-width: 560px) {
  .pasos3__cta .btn { width: 100%; }
}

.retrato { position: relative; }
.retrato picture, .retrato img { position: relative; z-index: 1; }
.retrato img { border-radius: 34px; box-shadow: var(--sombra-l); }
.retrato::after {
  content: ""; position: absolute; inset: 0; border-radius: 34px; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
/* Blob orgánico celeste detrás de la foto (mockup 30 jul):
   más grande que la foto, asimétrico, desplazado arriba-derecha */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -16% -18% -5% -8%;
  background: #CFE3F4; /* un paso más profundo que --celeste: visible sobre el degradado */
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
.credencial {
  position: absolute; z-index: 3; left: -14px; bottom: 26px;
  background: var(--blanco); border-radius: 18px; padding: 1rem 1.3rem;
  box-shadow: var(--sombra-m); display: flex; align-items: center; gap: .95rem;
}
.credencial b { font-family: var(--display); font-size: 2.5rem; color: var(--coral); line-height: 1;
                font-variation-settings: 'SOFT' 22; letter-spacing: -.02em;
                padding-right: .95rem; border-right: 1px solid var(--linea); }
.credencial span { font-size: .9rem; font-weight: 500; color: var(--azul-profundo);
                   line-height: 1.35; display: block; max-width: 8ch; }

/* ═══ Motivos (lista editorial) ═══ */
.motivos { border-top: 1px solid var(--linea); }
.motivo {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid var(--linea);
  transition: background .4s var(--curva-suave);
}
.motivo__n { font-family: var(--display); font-size: 1.05rem; color: var(--coral-texto); line-height: 1.55;
             font-variation-settings: 'SOFT' 22; }
.motivo h3 { margin-bottom: .3rem; }
.motivo p { margin: 0; color: var(--gris); font-size: var(--t-sm); max-width: 62ch; }

/* ═══ Motivos — tarjetas (mockup 30 jul) ═══ */
.seccion--motivos { position: relative; overflow: hidden; padding-top: var(--s4); }
.seccion--motivos .wrap { position: relative; z-index: 1; }
.blob-suave {
  position: absolute; right: -14%; top: 6%; width: 58%; max-width: 760px; aspect-ratio: 1.05;
  background: rgba(255,255,255,.5); pointer-events: none; z-index: 0; /* más claro que el fondo celeste */
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
}
.cab-motivos { max-width: 860px; margin-inline: auto; }
.cab-motivos h2 em { color: var(--coral); }

/* Ficha de credenciales (30 jul): autoridad escaneable en "Cómo trabajo" */
.ficha { display: grid; gap: .85rem 1.6rem; margin: var(--s3) 0;
  background: var(--celeste-suave); border: 1px solid var(--linea); border-radius: 16px;
  padding: var(--s3); }
.ficha__item { display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--t-sm); color: var(--texto); line-height: 1.45; }
.ficha__item svg { width: 17px; height: 17px; stroke: var(--azul); stroke-width: 2.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: .18rem; }
.ficha__item strong { color: var(--azul-profundo); }
@media (min-width: 760px) { .ficha { grid-template-columns: 1fr 1fr; } }
.hero__pie strong { font-weight: 700; }
.motivos-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s3); margin-top: var(--s5); }
.tarjeta-motivo {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px;
  padding: var(--s4) var(--s3); text-align: center;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.tarjeta-motivo:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); }
.tarjeta-motivo img { height: 96px; width: auto; display: block; margin: 0 auto var(--s3); }
.tarjeta-motivo h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem;
  color: var(--azul-profundo); letter-spacing: -.015em; margin-bottom: .45rem;
  font-variation-settings: 'SOFT' 22; }
.tarjeta-motivo p { margin: 0; color: var(--gris); font-size: var(--t-sm); }
.motivos-cierre { text-align: center; margin: var(--s5) 0 0; color: var(--texto); }
/* CTA de la sección motivos (board 30 jul: panel con jerarquía propia) */
.cta-motivos {
  margin: var(--s5) auto 0; max-width: 620px; text-align: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px;
  padding: var(--s4) var(--s3); box-shadow: var(--sombra-s);
}
.cta-motivos__q {
  font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem);
  color: var(--tinta); line-height: 1.3; letter-spacing: -.015em;
  font-variation-settings: 'SOFT' 22; margin: 0 0 var(--s3);
}
.cta-motivos__q em { color: var(--coral); }
.cta-motivos__nota { margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--gris); }

/* ═══ Cómo trabajo — mockup 30 jul ═══ */
.dos-col--enfoque > .rev { position: relative; z-index: 1; } /* texto por encima del blob de la foto en móvil */
#enfoque { overflow: hidden; } /* el blob de la foto no debe empujar el ancho de la página */
.cita-enfoque { position: relative; z-index: 0; /* contexto propio: las comillas quedan tras el texto, no tras la sección */
                color: var(--azul-profundo); margin-bottom: var(--s3); }
.cita-enfoque::before {
  content: "\201C"; position: absolute; z-index: -1; top: -.2em; left: -.3em;
  font-family: var(--display); font-size: 3em; line-height: 1;
  color: var(--coral); opacity: .18; font-variation-settings: 'SOFT' 40;
}
.cita-enfoque em { color: var(--coral); }
.anios {
  display: flex; align-items: center; gap: 1.3rem;
  background: var(--celeste); border-radius: 16px; padding: 1.4rem 1.7rem;
  margin: var(--s3) 0 var(--s2);
}
.anios b {
  font-family: var(--display); font-weight: 400; white-space: nowrap;
  font-size: clamp(2.3rem, 1.9rem + 1.4vw, 3.3rem); color: var(--azul-profundo);
  line-height: 1; letter-spacing: -.02em; font-variation-settings: 'SOFT' 22;
  padding-right: 1.3rem; border-right: 1px solid #AFC8DE;
}
.anios span { color: var(--azul-profundo); line-height: 1.45; max-width: 24ch; }
.creds { font-size: var(--t-xs); font-weight: 500; color: var(--gris); margin: 0 0 var(--s3); }
@media (max-width: 560px) {
  .cita-enfoque::before { font-size: 2.3em; left: -.06em; top: -.32em; }
  .anios { gap: 1rem; padding: 1.1rem 1.2rem; }
}

/* ═══ Cita grande ═══ */
.cita-grande {
  font-family: var(--display); font-size: clamp(1.45rem, 1rem + 1.7vw, 2.25rem);
  line-height: 1.3; letter-spacing: -.02em; color: var(--tinta);
  font-variation-settings: 'SOFT' 30, 'WONK' 1; margin-bottom: var(--s3);
}
.cita-grande::before { content: "\201C"; color: var(--coral); }
.cita-grande::after  { content: "\201D"; color: var(--coral); }

/* ═══ Proceso ═══ */
.pasos { display: grid; gap: var(--s2); counter-reset: p; margin-top: var(--s4); }
.paso {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  padding: var(--s3); border-radius: var(--borde-sm); background: var(--blanco);
  border: 1px solid var(--linea); transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.paso:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); }
.paso__n {
  counter-increment: p; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--celeste); color: var(--azul-profundo);
  font-family: var(--display); font-size: 1rem; font-variation-settings: 'SOFT' 22;
  display: grid; place-items: center;
}
.paso__n::before { content: counter(p); }
.paso h3 { margin-bottom: .2rem; }
.paso p { margin: 0; font-size: var(--t-sm); color: var(--gris); }

/* ═══ Cómo empieza — tarjetas con línea de secuencia (mockup 30 jul) ═══ */
.pasos3 { position: relative; display: grid; grid-template-columns: minmax(0,1fr);
          gap: var(--s2); margin-top: var(--s4); }
.pasos3__linea { display: none; }
.paso3 { position: relative; z-index: 1; background: var(--blanco); border-radius: 16px;
         padding: var(--s4) var(--s3); box-shadow: var(--sombra-s); }
.paso3 > img { height: 60px; width: auto; margin-bottom: var(--s2); }
.paso3__cab { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.paso3__cab h3 { margin: 0; }
.paso3__n { flex: none; width: 44px; height: 44px; border-radius: 50%;
            background: rgba(232,102,74,.15); color: var(--coral);
            font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; }
.paso3 p { margin: 0; color: var(--gris); font-size: var(--t-sm); }
/* móvil: conector punteado vertical entre tarjetas, lado izquierdo */
.paso3 + .paso3::before { content: ""; position: absolute; left: 45px;
  top: calc(-1 * var(--s2) - 2px); height: calc(var(--s2) + 2px);
  border-left: 2px dotted var(--azul-claro); }
@media (min-width: 1000px) {
  .pasos3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
  .paso3 + .paso3::before { display: none; }
  /* la línea nace en el círculo 1 y muere en el círculo 3 — nunca toca los bordes */
  .pasos3__linea { display: block; position: absolute; z-index: 0;
    left: 46px; right: 46px; top: 134px;
    border-top: 2px dotted var(--azul-claro); }
}

/* ═══ Precios ═══ */
.precios { display: grid; gap: var(--s2); margin-top: var(--s5); }
.precio {
  position: relative; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--borde); padding: var(--s4) var(--s3);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s var(--curva);
}
.precio:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); border-color: var(--celeste); }
.precio--destacado { border-color: var(--azul-claro); box-shadow: var(--sombra-s); }
.precio__etq {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 100px;
  white-space: nowrap;
}
.precio__n { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.precio__q { font-family: var(--display); font-size: 2.9rem; color: var(--azul-profundo);
             line-height: 1; margin: .5rem 0 .35rem; letter-spacing: -.03em;
             font-variation-settings: 'SOFT' 22; }
.precio__d { font-size: var(--t-xs); color: var(--gris); }
.nota { font-size: var(--t-sm); color: var(--gris); margin-top: var(--s3); }

/* ═══ Inversión — mockup 30 jul ═══ */
.precios2 { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s2); margin-top: var(--s5); }
.precio2 { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--borde);
           padding: var(--s4) var(--s3); text-align: center; }
.precio2__n { font-weight: 700; color: var(--tinta); }
.precio2__q { font-family: var(--display); font-size: clamp(3rem, 2.4rem + 2vw, 4.3rem);
              color: var(--azul-profundo); line-height: 1; margin: .55rem 0 .5rem;
              letter-spacing: -.03em; font-variation-settings: 'SOFT' 22; }
.precio2__q i { font-style: normal; font-size: .72em; }
.precio2__d { font-size: var(--t-sm); color: var(--gris); margin-bottom: .8rem; }
.precio2 p { margin: 0; color: var(--gris); font-size: var(--t-sm); }

.primera { position: relative; margin-top: var(--s4);
  background: var(--celeste-suave); border: 1.5px solid var(--coral); border-radius: var(--borde);
  padding: var(--s4) var(--s3) var(--s3); display: grid; gap: var(--s3);
  justify-items: center; text-align: center; }
.primera__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
  background: var(--coral); color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: .45rem 1.3rem;
  border-radius: 100px; white-space: nowrap; }
.primera > img { height: 92px; width: auto; }
.primera__txt h3 { font-family: var(--display); font-weight: 400; color: var(--azul-profundo);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); letter-spacing: -.015em;
  margin: 0 0 .45rem; font-variation-settings: 'SOFT' 22; }
.primera__txt p { margin: 0; color: var(--texto); }
.primera .btn { width: 100%; }
@media (min-width: 760px) {
  .precios2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
  .primera { grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
             text-align: left; justify-items: start; gap: var(--s4); padding: var(--s4); }
  .primera .btn { width: auto; }
}

/* ═══ Testimonios ═══ */
.testis { display: grid; gap: var(--s2); margin-top: var(--s5); }
.testi {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--borde);
  padding: var(--s4) var(--s3); display: flex; flex-direction: column;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.testi:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); }
.testi p {
  font-family: var(--display); font-size: 1.18rem; line-height: 1.45; color: var(--tinta);
  letter-spacing: -.012em; font-variation-settings: 'SOFT' 30; flex: 1;
}
.testi cite { font-style: normal; font-weight: 600; color: var(--gris); font-size: var(--t-xs);
              letter-spacing: .08em; text-transform: uppercase; }
.estrellas { color: var(--coral); letter-spacing: .18em; font-size: .82rem; margin-bottom: var(--s2); }

/* ═══ Testimonios — carrusel (mockup 31 jul) ═══ */
#testimonios h2 em { color: var(--coral); }
.resumen-testi { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--blanco); border-radius: 16px; padding: 1rem 1.8rem;
  box-shadow: var(--sombra-s); margin-top: var(--s2); }
.resumen-testi > span:last-child { color: var(--azul-profundo); font-weight: 600; font-size: var(--t-sm); }
.resumen-testi .estrellas { margin: 0; font-size: 1.05rem; letter-spacing: .18em; }
.tcar { position: relative; margin-top: var(--s4); }
.tcar__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s2);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px; }
.tcar__track::-webkit-scrollbar { display: none; }
.tcar__card { scroll-snap-align: start; background: var(--blanco); border-radius: var(--borde);
  box-shadow: var(--sombra-s); padding: var(--s3); display: flex; flex-direction: column; }
.tcar__cab { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--s2); }
.tcar__ini { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--celeste);
  color: var(--azul-profundo); font-family: var(--display); font-size: 1.25rem;
  display: grid; place-items: center; font-variation-settings: 'SOFT' 22; }
.tcar__card .estrellas { margin: 0; }
.tcar__frase { position: relative; z-index: 0; font-family: var(--display); color: var(--tinta);
  font-size: 1.3rem; line-height: 1.35; letter-spacing: -.015em; font-variation-settings: 'SOFT' 30;
  margin: 0 0 .6rem; padding-top: 1.6rem; }
.tcar__frase::before { content: "\201C"; position: absolute; z-index: -1; top: 0; left: -.02em;
  font-size: 2.7em; color: var(--coral); opacity: .32; line-height: .8; }
.tcar__det { color: var(--gris); font-size: var(--t-sm); margin: 0 0 var(--s2); flex: 1; }
.tcar__nom { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); margin-top: auto; }
.tcar__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: var(--blanco);
  box-shadow: var(--sombra-s); display: grid; place-items: center; cursor: pointer; }
.tcar__btn svg { width: 18px; height: 18px; stroke: var(--azul); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.tcar__btn--prev { left: -8px; } .tcar__btn--next { right: -8px; }
/* móvil: se navega deslizando — las flechas taparían el texto */
@media (max-width: 759px) { .tcar__btn { display: none; } }
.tcar__dots { display: flex; justify-content: center; gap: .5rem; margin-top: var(--s3); }
.tcar__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #B9CFE3;
  cursor: pointer; padding: 0; }
.tcar__dots button.act { background: var(--coral); }
@media (min-width: 760px) { .tcar__track { grid-auto-columns: calc((100% - var(--s2)) / 2); } }
@media (min-width: 1000px) {
  .tcar__track { grid-auto-columns: calc((100% - 2 * var(--s3)) / 3); gap: var(--s3); }
  .tcar__btn--prev { left: -23px; } .tcar__btn--next { right: -23px; }
}

/* ═══ Preguntas ═══ */
.faq { margin-top: var(--s4); border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s3) 2.5rem var(--s3) 0; position: relative;
  font-weight: 600; color: var(--tinta); font-size: 1.1rem; transition: color .3s var(--curva-suave);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.8px solid var(--azul-claro); border-bottom: 1.8px solid var(--azul-claro);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--curva);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .resp { padding: 0 2.5rem var(--s3) 0; color: var(--gris); font-size: var(--t-sm); margin: 0;
             animation: abrir .45s var(--curva); }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ═══ FAQ — acordeón (mockup 31 jul) ═══ */
#faq h2 em { color: var(--coral); }
.faq2 { display: grid; gap: var(--s2); margin-top: var(--s4); }
.faq2__item { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px;
  overflow: hidden; transition: background .35s var(--curva-suave); }
.faq2__item.abierta { background: var(--celeste-suave); }
.faq2__item > button { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.15rem 1.3rem; font-family: var(--display); font-weight: 400;
  font-size: 1.22rem; color: var(--azul-profundo); letter-spacing: -.01em;
  font-variation-settings: 'SOFT' 22; line-height: 1.3; }
.faq2__item i { flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--azul); position: relative;
  transition: transform .35s var(--curva); }
.faq2__item i::before, .faq2__item i::after { content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--azul); transform: translate(-50%, -50%); border-radius: 1px; }
.faq2__item i::before { width: 14px; height: 2px; }
.faq2__item i::after { width: 2px; height: 14px; }
.faq2__item.abierta i { transform: rotate(45deg); } /* el + gira a × */
.faq2__resp { max-height: 0; overflow: hidden; transition: max-height .4s var(--curva); }
.faq2__resp p { margin: 0; padding: 0 1.3rem 1.25rem; color: var(--texto); font-size: var(--t-sm); }

/* ═══ Cierre ═══ */
.cierre { background: var(--azul-profundo); color: var(--celeste); position: relative; overflow: hidden; }
.cierre::before {
  content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 120vw; height: 120vw; max-width: 1100px; max-height: 1100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,111,175,.35) 0%, rgba(44,111,175,0) 62%);
}
.cierre .wrap { position: relative; }
.cierre h2 { color: #fff; }
.cierre p { color: var(--celeste); }
.cierre img { width: 96px; margin: 0 auto var(--s3); }

/* ═══ Cierre final — mockup 31 jul ═══ */
.cierre2 { position: relative; overflow: hidden; }
.cierre2 .wrap { position: relative; z-index: 1; }
.cierre2__faceta { position: absolute; z-index: 0; background: #fff; opacity: .05; pointer-events: none; }
.cierre2__faceta--a { top: -40px; left: -60px; width: 340px; height: 300px;
  clip-path: polygon(0 0, 100% 18%, 55% 55%, 20% 100%, 0 62%); }
.cierre2__faceta--b { bottom: -50px; right: -70px; width: 380px; height: 320px;
  clip-path: polygon(100% 100%, 0 82%, 45% 45%, 80% 0, 100% 38%); }
.cierre2__marca { position: relative; display: inline-block; padding: 3.4rem 4.8rem; margin-bottom: var(--s3); }
.cierre2__blob { position: absolute; inset: 0; background: var(--celeste);
  border-radius: 55% 45% 60% 40% / 50% 58% 42% 50%; }
.cierre2__marca img { position: relative; z-index: 1; width: 240px; height: auto; }
.cierre2__t { color: #fff; }
.cierre2__t em { color: var(--coral); }
.cierre2__sub { max-width: 46ch; margin-inline: auto; margin-bottom: var(--s4); }
/* animación de entrada: .prep define el estado inicial (solo con JS y sin reduced-motion),
   .go dispara la llegada */
.cierre2.prep .cierre2__blob { transform: scale(.85); opacity: 0;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .8s var(--curva-suave); }
.cierre2.prep .cierre2__marca img { transform: scale(.92); opacity: 0;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .9s var(--curva-suave); }
.cierre2.prep .cierre2__t   { opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: .45s; }
.cierre2.prep .cierre2__sub { opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: .6s; }
.cierre2.prep .cierre2__btn { opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: .75s; }
.cierre2.prep.go .cierre2__blob, .cierre2.prep.go .cierre2__marca img { transform: scale(1); opacity: 1; }
.cierre2.prep.go .cierre2__t, .cierre2.prep.go .cierre2__sub, .cierre2.prep.go .cierre2__btn {
  opacity: 1; transform: none; }
@media (max-width: 560px) {
  .cierre2__marca { padding: 2.4rem 3rem; }
  .cierre2__marca img { width: 150px; }
  .cierre2__btn { width: 100%; }
}

/* ═══ Pie ═══ */
/* Pie más profundo que el cierre navy: el corte de color es el separador */
.pie { background: #0E2337; color: rgba(220,235,247,.75); padding: 5rem 0 var(--s4); font-size: var(--t-sm); }
.pie a { color: rgba(220,235,247,.75); text-decoration: none; transition: color .25s var(--curva-suave); }
.pie a:hover { color: #DCEBF7; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pie__grid { display: grid; gap: var(--s4); }
.pie h4 { color: #F8FAFC; font-family: var(--texto-f); font-size: var(--t-sm); font-weight: 600; margin: 0 0 var(--s2); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .5rem; }
.pie img { width: 108px; margin-bottom: var(--s2); }
.pie__legal {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--s5); padding-top: var(--s3);
  font-size: .8rem; color: rgba(220,235,247,.5); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
}
.pie__legal a { color: rgba(220,235,247,.5); }

/* ═══ WhatsApp flotante ═══ */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px;
  border-radius: 50%; background: var(--azul); display: grid; place-items: center;
  box-shadow: var(--sombra-l); transition: transform .4s var(--curva);
  opacity: 0; transform: scale(.5); pointer-events: none;
}
.wa.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* ═══════════ Animación de entrada ═══════════ */
.rev { opacity: 0; transform: translateY(26px); }
.rev.dentro { opacity: 1; transform: none;
  transition: opacity .85s var(--curva), transform .85s var(--curva); }
.rev.d1.dentro { transition-delay: .08s } .rev.d2.dentro { transition-delay: .16s }
.rev.d3.dentro { transition-delay: .24s } .rev.d4.dentro { transition-delay: .32s }
.rev.d5.dentro { transition-delay: .40s } .rev.d6.dentro { transition-delay: .48s }
.rev--img { opacity: 0; transform: scale(1.04); }
.rev--img.dentro { opacity: 1; transform: none; transition: opacity 1.1s var(--curva), transform 1.4s var(--curva); }

/* ═══════════ Escritorio ═══════════ */
@media (min-width: 760px) {
  .seccion { padding: 6rem 0; } /* ~96px desktop */
  .seccion--motivos { padding-top: var(--s5); }
  .motivos { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  .motivo { padding: var(--s3) 0; }
  .precios { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .testis  { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .pasos   { gap: var(--s3); }
  .pie__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s5); }
}
@media (min-width: 1000px) {
  .nav { display: flex; }
  .hero { padding: calc(88px + var(--s7)) 0 var(--s5); }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s6); }
  .credencial { left: -64px; bottom: 40px; }
  .hero__pie { gap: .65rem; }
  .dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev, .rev--img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .paso:hover, .precio:hover, .testi:hover, .wa:hover { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══════════ Ajustes de móvil ═══════════ */
@media (max-width: 560px) {
  .top .wrap { height: 72px; padding: 0 18px; }
  .marca img { width: 56px; }
  .marca__n { font-size: .94rem; }
  .marca__r { font-size: .66rem; }
  .top .btn { padding: .6rem 1rem; font-size: .875rem; }
  .wrap { padding: 0 18px; }
  .hero { padding: calc(72px + var(--s5)) 0 var(--s5); }
  .hero__sub { max-width: none; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .credencial { left: 12px; bottom: 12px; padding: .7rem 1rem; gap: .7rem; }
  .credencial b { font-size: 1.8rem; padding-right: .7rem; }
  .tarjeta-motivo img { height: 78px; }
  .precio__q { font-size: 2.5rem; }
}

/* Las columnas de rejilla no deben crecer más que su contenedor
   (por defecto una pista "auto" no baja de min-content y desborda) */
.hero__grid, .dos-col, .motivos, .pasos, .precios, .testis, .pie__grid { grid-template-columns: minmax(0, 1fr); }
.hero__grid > *, .dos-col > *, .motivos > *, .pasos > *, .precios > *, .testis > *, .pie__grid > * { min-width: 0; }
@media (min-width: 760px) {
  .motivos { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .motivos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .precios, .testis { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pie__grid { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); }
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
  .dos-col    { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .pasos      { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .motivos-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dos-col--enfoque { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
}


/* ═══════════ El coral como acento ═══════════
   Regla: el coral marca, nunca acciona.
   SÍ  → palabra enfatizada del titular · numeración · comillas ·
         estrellas · las rayas del antetítulo · el sello de precio destacado
   NO  → botones, enlaces, fondos de sección, textos largos
   El azul se queda con todo lo que se puede tocar. */
.precio--destacado { border-color: var(--coral); }
.precio--destacado .precio__etq { background: var(--coral-texto); }
.paso__n { background: #FBE7E0; color: var(--coral-texto); }

/* ═══ Pulido premium (31 jul): micro-animaciones y estados vivos ═══ */
/* los ganchos del menú no quedan tapados por la barra fija */
[id] { scroll-margin-top: 96px; }

/* blobs que respiran — morfología lenta, sin transform (no choca con las entradas) */
@keyframes derivar {
  0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33%      { border-radius: 48% 52% 44% 56% / 56% 46% 58% 42%; }
  66%      { border-radius: 55% 45% 60% 40% / 45% 58% 42% 55%; }
}
.blob, .blob-suave, .cierre2__blob { animation: derivar 18s ease-in-out infinite; }
/* en móvil el morph repinta áreas grandes y quita fluidez al scroll: quieto */
@media (max-width: 760px) { .blob, .blob-suave, .cierre2__blob { animation: none; } }

/* el badge "14" flota suave sobre la foto */
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.credencial { animation: flotar 6s ease-in-out 2s infinite; }

/* botón flotante de WhatsApp: pulso de atención */
@keyframes pulsoWA {
  0%   { box-shadow: 0 4px 12px rgba(18,40,63,.2), 0 0 0 0 rgba(44,111,175,.45); }
  70%  { box-shadow: 0 4px 12px rgba(18,40,63,.2), 0 0 0 16px rgba(44,111,175,0); }
  100% { box-shadow: 0 4px 12px rgba(18,40,63,.2), 0 0 0 0 rgba(44,111,175,0); }
}
.wa.visible { animation: pulsoWA 3s ease-out 1s infinite; }

/* tarjetas de motivos: la ilustración responde al hover */
.tarjeta-motivo img { transition: transform .5s var(--curva); }
.tarjeta-motivo:hover img { transform: scale(1.07); }

/* tarjetas de pasos y precios: elevación al hover */
.paso3, .precio2 { transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s var(--curva); }
.paso3:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.precio2:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); border-color: var(--celeste); }

/* carrusel: tarjetas y flechas vivas */
.tcar__card { transition: transform .4s var(--curva), box-shadow .4s var(--curva); }
.tcar__card:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.tcar__btn { transition: background .3s var(--curva-suave), transform .3s var(--curva), box-shadow .3s var(--curva); }
.tcar__btn:hover { background: var(--azul); transform: translateY(-50%) scale(1.06); }
.tcar__btn:hover svg { stroke: #fff; }
.tcar__btn:focus-visible, .faq2__item > button:focus-visible, .tcar__dots button:focus-visible {
  outline: 3px solid rgba(44,111,175,.45); outline-offset: 2px; }

/* FAQ: el círculo del + reacciona */
.faq2__item > button:hover i { background: rgba(44,111,175,.08); }
.faq2__item i { transition: transform .35s var(--curva), background .3s var(--curva-suave); }

/* Botón del encabezado: en pantallas muy chicas queda solo el ícono */
@media (max-width: 430px) {
  .top .btn span { display: none; }
  .top .btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
  .top .btn svg { width: 19px; height: 19px; }
}