:root{
  /* ── Paleta ──────────────────────────────────────────────────
     Navy + blush + coral. El navy sustituye al vino como superficie
     oscura: pesa menos en pantalla y no arrastra la lectura hacia
     lo romántico. El coral es el único color saturado y entra sólo
     como acento, nunca como fondo.                                */

  /* Superficies oscuras */
  --noche-900:#16203A;   /* footer, la más profunda */
  --noche:#22304E;       /* fondo de las secciones oscuras */
  --noche-600:#33456B;   /* bordes y foco sobre claro */

  /* Acento coral, en dos intensidades:
     --coral      texto pequeño sobre claro  → 5.51 blush-claro / 4.81 blush (AA)
     --coral-vivo títulos y piezas grandes   → 3.53 (AA texto grande)
     Un solo coral no cubre ambos: el vivo no llega a 4.5 en cuerpo pequeño. */
  --coral:#A83D1F;
  --coral-vivo:#D2593A;
  --coral-300:#F4A88F;   /* acentos sobre navy → 6.77 */
  --coral-200:#FBCBBB;   /* acentos suaves sobre navy → 8.97 */
  --coral-100:#FBE3DC;   /* superficies muy suaves */
  --salmon:#F2A28E;      /* comillas y estrellas sobre la foto de testimonios */
  --rosa-texto:#C23D6C;  /* rosa con contraste AA: 4.8 como texto sobre hueso,
                            5.03 bajo texto blanco en el botón del hero */

  /* Azul de énfasis, heredado del sitio original (#6d9cdc).
     Se conserva para el énfasis alternado dentro del texto corrido. */
  --azul:#2D5E96;
  --azul-claro:#6D9CDC;

  /* Fondos claros */
  --blush:#F9DBD6;
  --blush-claro:#FDEDE9;
  --blanco:#FFFFFF;

  /* Texto */
  --tinta:#1E2A45;
  --tinta-70:#1E2A45B3;
  --tinta-85:#1E2A45D9;   /* cuerpo de lectura larga: 8.86 sobre blanco */
  --tinta-50:#1E2A4580;
  --gris-linea:#EFD6CF;

  /* Tipografía */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Ritmo */
  --borde-r:16px;
  --borde-r-lg:26px;
  --seccion-y:clamp(52px,5.6vw,84px);
  --gutter:clamp(20px,5vw,64px);
  --max-w:1240px;

  /* Movimiento */
  --ease:cubic-bezier(.25,.6,.3,1);
  --lift:.15s;
}


/* ── Reset ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blush-claro);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
iframe{border:0;display:block}
:focus-visible{outline:2.5px solid var(--noche-600);outline-offset:3px;border-radius:4px}
/* Sobre fondo oscuro el vino-600 cae a 1.25-2.39 : el minimo de WCAG 2.4.11 es 3.
   El azul claro rinde 4.6+ sobre todos los fondos vino del sitio. */
.hero :focus-visible,
.menu-movil :focus-visible,
.site-header:not(.compacto) :focus-visible,
.site-header.sobre-menu :focus-visible,
.pareja :focus-visible,
.tarjeta-cita :focus-visible,
.libro :focus-visible,
.agenda :focus-visible,
.site-footer :focus-visible,
.skip-link:focus-visible{outline-color:var(--azul-claro)}
.wa-flotante:focus-visible{outline-color:var(--noche-900);outline-offset:-5px}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--noche);color:var(--blush);padding:14px 22px;border-radius:0 0 10px 0;font-weight:500;
}
.skip-link:focus{left:0}

/* ── Reveal on scroll ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}

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

/* ═══════════════════════════════════════════════════════
   MOVIMIENTO
   Cuatro recursos, todos sobre transform y opacity para que
   el compositor los resuelva sin repintar:
     · revelado tipográfico por líneas tras una máscara
     · entrada de imágenes con barrido de clip-path
     · parallax de las fotografías de fondo
     · escalonado de las rejillas
   Todo se apaga bajo prefers-reduced-motion.
   ═══════════════════════════════════════════════════════ */

/* ── Titulares: cada línea sube desde detrás de su propia máscara ── */
.ln{
  display:block;overflow:hidden;
  /* Aire para los descendentes (g, j, p) sin que la máscara los recorte
     ni aumente el interlineado real. */
  padding-bottom:.12em;margin-bottom:-.12em;
}
.ln-i{
  display:block;
  transform:translateY(105%) rotate(2.2deg);
  opacity:0;
  transform-origin:left bottom;
  transition:transform 1.05s cubic-bezier(.19,1,.22,1),opacity .8s ease-out;
  transition-delay:calc(var(--ln) * 90ms);
  will-change:transform;
}
.revelado .ln-i{transform:none;opacity:1}

/* ── Imágenes: barrido que descubre la foto mientras se acerca ── */
.velar{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.12);
  transition:clip-path 1.25s cubic-bezier(.19,1,.22,1),transform 1.6s cubic-bezier(.19,1,.22,1);
  will-change:clip-path,transform;
}
.velar.descubierta{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ── Parallax: la foto se desplaza más lento que la página ── */
.parallax{will-change:transform}

/* ── Escalonado de rejillas ── */
.escalonar > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms);
}
.escalonar.visible > *{opacity:1;transform:none}

/* ── Progreso de lectura ── */
.progreso{
  position:fixed;top:0;left:0;height:2px;z-index:101;
  width:100%;transform:scaleX(var(--avance,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--coral-vivo),var(--coral-300));
  opacity:0;transition:opacity .4s var(--ease);
  pointer-events:none;
}
.progreso.activa{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ln-i{transform:none;opacity:1;transition:none}
  .velar{clip-path:none;transform:none;transition:none}
  .escalonar > *{opacity:1;transform:none;transition:none}
  .progreso{display:none}
}

/* ═══════════ MARCA / LOGO ═══════════ */
.marca{display:flex;align-items:center;gap:13px;flex-shrink:0}
/* Logotipo real: circular, con su nombre y «Psicoterapeuta» rotulados dentro.
   A tamaño de cabecera ese rotulo no se lee, por eso se conserva el nombre
   en texto al lado: el logo identifica, el texto informa. */
.marca-glifo{width:52px;height:52px;flex-shrink:0;object-fit:contain;transition:transform .4s var(--ease)}
.marca:hover .marca-glifo{transform:rotate(-6deg) scale(1.05)}
.marca-glifo.grande{width:76px;height:76px}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-texto strong{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:.005em}
.marca-texto em{
  font-style:normal;font-size:9.5px;font-weight:400;letter-spacing:.19em;
  text-transform:uppercase;opacity:.72;margin-top:4px;
}

/* ═══════════ HEADER ═══════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:var(--tinta);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease),backdrop-filter .45s var(--ease);
}
.header-inner{
  max-width:var(--max-w);margin-inline:auto;
  padding:20px var(--gutter);
  display:flex;align-items:center;gap:28px;
  transition:padding .45s var(--ease);
}
.site-header.compacto{
  background:rgba(253,237,233,.9);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  color:var(--tinta);
  box-shadow:0 1px 0 rgba(34,48,78,.10),0 10px 34px -18px rgba(22,32,58,.34);
}
.site-header.compacto .header-inner{padding-block:12px}

.nav-principal{margin-left:auto}
.nav-principal ul{display:flex;gap:30px}
.nav-principal a{
  position:relative;font-size:14.5px;font-weight:400;letter-spacing:.015em;
  padding-block:6px;opacity:.9;transition:opacity .25s var(--ease);
}
.nav-principal a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-principal a:hover{opacity:1}
.nav-principal a:hover::after{transform:scaleX(1);transform-origin:left}

.btn-header{
  flex-shrink:0;font-size:13.5px;font-weight:500;letter-spacing:.03em;
  padding:11px 22px;border-radius:100px;
  border:1px solid currentColor;
  transition:background var(--lift) var(--ease),color var(--lift) var(--ease),transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease);
}
.btn-header{color:var(--rosa-texto);border-color:rgba(194,61,108,.45)}
.btn-header:hover{
  background:var(--rosa-texto);color:#FFFFFF;border-color:var(--rosa-texto);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(194,61,108,.35);
}

/* Con el menú abierto, el header se funde con él */
.site-header.sobre-menu{
  background:transparent;box-shadow:none;color:var(--blush-claro);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* Hamburguesa */
.menu-toggle{display:none;width:42px;height:42px;position:relative;margin-left:auto;flex-shrink:0}
.menu-toggle span{
  position:absolute;left:9px;width:24px;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease),top .35s var(--ease);
}
.menu-toggle span:nth-child(1){top:14px}
.menu-toggle span:nth-child(2){top:20px}
.menu-toggle span:nth-child(3){top:26px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

.menu-movil{
  position:fixed;inset:0;z-index:99;
  background:linear-gradient(160deg,var(--noche) 0%,var(--noche-900) 100%);
  color:var(--blush);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:34px;padding:100px var(--gutter) 60px;
  animation:menuEntra .4s var(--ease) both;
}
.menu-movil[hidden]{display:none}
@keyframes menuEntra{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.menu-movil ul{display:flex;flex-direction:column;gap:6px}
.menu-movil a{font-family:var(--display);font-size:clamp(28px,7.5vw,38px);line-height:1.35;opacity:.92}
.menu-movil a:hover{opacity:1}
.menu-movil-cta{margin-top:8px}

/* ═══════════════════════════════════════════════════════
   HERO — claro, según boceto: fondo hueso con panel rosa
   redondeado tras el retrato (colores muestreados del fondo
   entregado: #FDF9F5 base, panel #FDEBEA→#FCE5E5); texto navy
   con acentos rosa AA a la izquierda.
   ═══════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:#FDF9F5;
  padding:clamp(98px,10vw,132px) 0 clamp(64px,6.6vw,96px);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(34px,4.6vw,76px);align-items:center;
}

.hero-eyebrow{
  font-size:clamp(17px,1.5vw,21px);font-weight:400;line-height:1.5;
  color:var(--tinta);margin:0 0 clamp(18px,2vw,26px);
}
.hero-eyebrow strong{font-weight:700}
.hero-eyebrow em{font-style:normal;font-weight:700;color:var(--rosa-texto)}

.hero-titulo{
  font-size:clamp(47px,5.8vw,84px);font-weight:400;line-height:1.04;
  letter-spacing:-.02em;color:var(--tinta);margin:0 0 clamp(18px,2vw,26px);
}
.hero-titulo em{font-style:italic;color:var(--rosa-texto)}

.hero-bajada{
  font-size:clamp(17px,1.45vw,20px);font-weight:400;line-height:1.65;
  color:var(--tinta-70);max-width:46ch;margin:0 0 clamp(26px,3vw,36px);
}

.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(30px,3.4vw,44px)}
.btn-hero{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--rosa-texto);color:#FFFFFF;
  padding:16px 30px;border-radius:100px;
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 14px 28px -12px rgba(194,61,108,.55);
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease),background var(--lift) var(--ease);
}
.btn-hero svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-hero:hover{background:#B93765;transform:translateY(-3px);box-shadow:0 20px 38px -14px rgba(185,55,101,.6)}
.btn-hero:hover svg{transform:translateX(4px)}
.btn-hero:active{transform:translateY(-1px)}

.btn-hero-fantasma{
  display:inline-flex;align-items:center;
  padding:15px 27px;border-radius:100px;
  border:1.5px solid rgba(194,61,108,.4);
  color:var(--rosa-texto);
  font-size:16px;font-weight:600;letter-spacing:.02em;
  transition:background var(--lift) var(--ease),border-color var(--lift) var(--ease),transform var(--lift) var(--ease);
}
.btn-hero-fantasma:hover{background:rgba(194,61,108,.07);border-color:var(--rosa-texto);transform:translateY(-2px)}

.hero-modalidad{
  display:inline-block;
  font-size:clamp(20px,1.8vw,25px);font-weight:700;line-height:1.2;
  color:var(--tinta);margin:0;
}
.hero-modalidad::after{
  content:"";display:block;width:80px;height:4px;border-radius:3px;
  background:#EF83A5;margin-top:9px;
}
.hero-precio{
  font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:.01em;
  color:var(--rosa-texto);margin:12px 0 0;
}
.hero-lugar{font-size:16px;font-weight:400;color:var(--tinta-70);margin:6px 0 0}

/* Retrato sobre panel rosa desplazado: el panel asoma por la
   izquierda y por debajo, como en el boceto */
.hero-figura{position:relative;margin:0}
.hero-figura::before{
  content:"";position:absolute;z-index:0;
  inset:9% -5% -7% -9%;
  background:linear-gradient(180deg,#FDEBEA 0%,#FCE5E5 100%);
  border-radius:clamp(28px,3.2vw,46px);
}
.hero-retrato{
  position:relative;z-index:1;display:block;
  width:100%;height:auto;
  border-radius:clamp(20px,2.4vw,30px);
  box-shadow:0 30px 60px -28px rgba(30,42,69,.32);
}

@media (max-width:900px){
  .hero{padding-top:clamp(96px,22vw,124px)}
  .hero-grid{grid-template-columns:1fr;gap:clamp(30px,7vw,44px)}
  .hero-figura{max-width:520px}
  .hero-acciones .btn-hero,
  .hero-acciones .btn-hero-fantasma{flex:1 1 100%;justify-content:center}
}

/* ═══════════ TIPOGRAFÍA DE SECCIÓN ═══════════ */
/* Subtítulo de sección: mismo lenguaje que el kicker de «Sobre mí» —
   negrita en caja de oración con la barra rosa del logotipo debajo.
   La variante .clara ilumina el texto para los fondos oscuros. */
.seccion-etiqueta{
  display:inline-block;
  font-family:var(--sans);
  font-size:clamp(22px,2.1vw,30px);font-weight:600;line-height:1.15;
  letter-spacing:0;text-transform:none;
  color:var(--tinta);
  margin:0 0 clamp(18px,2vw,26px);
}
.seccion-etiqueta::after{
  content:"";display:block;height:5px;width:100%;
  margin-top:9px;border-radius:3px;
  background:#EF83A5;   /* rosa del logotipo */
}
.seccion-etiqueta.clara{color:var(--blush-claro)}

.seccion-titulo{
  font-size:clamp(32px,4.1vw,54px);
  font-weight:400;line-height:1.1;letter-spacing:-.018em;
  margin:0 0 20px;
}
.seccion-titulo em{font-style:italic;color:var(--coral-vivo)}
.seccion-bajada{font-size:clamp(16px,1.3vw,18.5px);font-weight:300;color:var(--tinta-70);max-width:52ch;line-height:1.68}
.seccion-cabecera{max-width:640px;margin-bottom:clamp(32px,3.6vw,48px)}

/* Enfasis alternado dentro del texto corrido: el mismo recurso que usaba
   la web original, donde una idea iba en rosa y la siguiente en azul. */
.e-vino,.e-azul{font-weight:500}
.e-vino{color:var(--coral)}
.e-azul{color:var(--azul)}
.pareja .e-vino{color:var(--coral-200)}
.pareja .e-azul{color:var(--azul-claro)}

/* ═══════════ BARRA DE CONFIANZA ═══════════ */
.confianza{
  background:var(--blush);
  border-bottom:1px solid var(--gris-linea);
  padding-block:clamp(38px,4.5vw,58px);
}
.confianza-lista{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,40px);
}
.confianza-lista li{
  display:flex;flex-direction:column;gap:8px;
  padding-left:clamp(14px,2vw,24px);
  border-left:1px solid var(--gris-linea);
}
.confianza-lista li:first-child{border-left:0;padding-left:0}
.cifra{
  font-family:var(--display);font-size:clamp(34px,4.2vw,54px);
  line-height:1;color:var(--coral-vivo);font-weight:400;letter-spacing:-.02em;
}
.cifra sup{font-size:.45em;vertical-align:super;margin-left:1px}
.cifra-chica{font-size:clamp(19px,2.1vw,26px);line-height:1.15}
.cifra-nota{font-size:13px;line-height:1.5;color:var(--tinta-70);font-weight:300;max-width:20ch}

@media (max-width:820px){
  .confianza-lista{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .confianza-lista li:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:420px){
  .confianza-lista{grid-template-columns:1fr 1fr}
}

/* ═══════════ PLANTEAMIENTO ═══════════ */
.planteamiento{padding-block:var(--seccion-y);background:var(--blush-claro)}
.planteamiento-grid{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:start;
}
.planteamiento-destacado{
  font-family:var(--display);
  font-size:clamp(22px,2.75vw,35px);
  line-height:1.35;font-weight:400;letter-spacing:-.012em;
  color:var(--tinta);margin-bottom:26px;
}
.planteamiento-destacado em{font-style:italic;color:var(--coral-vivo)}
.planteamiento-cuerpo{font-size:clamp(16px,1.25vw,17.5px);color:var(--tinta-70);font-weight:300;max-width:54ch;line-height:1.72;margin-bottom:28px}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;letter-spacing:.03em;color:var(--coral);
  padding-bottom:5px;border-bottom:1.5px solid rgba(168,61,31,.34);
  transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.enlace-flecha svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.enlace-flecha:hover{border-color:var(--coral)}
.enlace-flecha:hover svg{transform:translateX(5px)}

/* Tarjeta de precio */
.tarjeta-cita{
  background:linear-gradient(158deg,var(--noche) 0%,var(--noche-900) 100%);
  color:var(--blush-claro);
  border-radius:var(--borde-r-lg);
  padding:clamp(28px,3.2vw,40px);
  box-shadow:0 26px 60px -30px rgba(22,32,58,.72);
  position:relative;overflow:hidden;
}
.tarjeta-cita::before{
  content:"";position:absolute;top:-56%;right:-24%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(251,203,187,.24) 0%,rgba(251,203,187,0) 68%);
  pointer-events:none;
}
.tarjeta-cita-etiqueta{font-size:10.5px;letter-spacing:.23em;text-transform:uppercase;color:var(--coral-200);margin-bottom:12px}
.tarjeta-cita-precio{
  font-family:var(--display);font-size:clamp(44px,5vw,60px);line-height:1;
  font-weight:400;letter-spacing:-.03em;margin:0 0 10px;
}
.tarjeta-cita-precio .moneda{font-size:.5em;vertical-align:super;margin-right:2px;opacity:.75}
.tarjeta-cita-precio .centavos{font-size:.44em;vertical-align:super;opacity:.65}
.tarjeta-cita-nota{font-size:13.5px;font-weight:300;color:rgba(253,237,233,.76);margin-bottom:0}
.tarjeta-cita hr{border:0;border-top:1px solid rgba(253,237,233,.18);margin:24px 0}
.tarjeta-cita-asistente{font-size:14.5px;font-weight:300;color:rgba(253,237,233,.84);margin-bottom:22px}
.tarjeta-cita-asistente strong{font-weight:500;color:var(--blush-claro)}
.tarjeta-cita-acciones{display:flex;flex-direction:column;gap:10px}

.btn-solido{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blush-claro);color:var(--noche);
  padding:15px 24px;border-radius:100px;
  font-size:14px;font-weight:500;letter-spacing:.04em;
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease),background var(--lift) var(--ease);
}
.btn-solido svg{width:18px;height:18px}
.btn-solido:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,12,24,.34);background:var(--blanco)}

.btn-contorno{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;border-radius:100px;
  border:1px solid rgba(253,237,233,.4);color:var(--blush-claro);
  font-size:14.5px;font-weight:400;letter-spacing:.05em;
  transition:background var(--lift) var(--ease),border-color var(--lift) var(--ease),transform var(--lift) var(--ease);
}
.btn-contorno:hover{background:rgba(253,237,233,.13);border-color:rgba(253,237,233,.7);transform:translateY(-2px)}

@media (max-width:900px){
  .planteamiento-grid{grid-template-columns:1fr}
}

/* ═══════════ TERAPIA DE PAREJA ═══════════ */
.pareja{
  position:relative;
  padding-block:var(--seccion-y);
  background:var(--noche-900);
  color:var(--blush-claro);
  overflow:hidden;
}
.pareja-fondo{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(51,69,107,.62) 0%,rgba(51,69,107,0) 58%),
    radial-gradient(90% 80% at 92% 100%,rgba(232,121,92,.34) 0%,rgba(232,121,92,0) 62%);
  pointer-events:none;
}
.pareja .contenedor{position:relative;z-index:1}
.pareja-cabecera{margin-bottom:clamp(38px,4.6vw,58px);max-width:760px}
.pareja-titulo{
  font-size:clamp(34px,5.2vw,68px);font-weight:400;line-height:1.06;letter-spacing:-.022em;margin:0;
}
.pareja-titulo em{font-style:italic;color:var(--coral-300)}
.pareja-cuerpo{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
}
.pareja-columna p{
  font-size:clamp(15.5px,1.2vw,17px);font-weight:300;line-height:1.78;
  color:rgba(253,237,233,.8);margin-bottom:1.15em;
}
.pareja-cita{
  margin:26px 0 0;padding:26px 0 0;
  border-top:1px solid rgba(251,203,187,.28);
  font-family:var(--display);font-size:clamp(19px,2vw,25px);
  line-height:1.44;font-weight:400;color:var(--blush-claro);
}
.pareja-cita em{font-style:italic;color:var(--coral-200)}

.pareja-pie{
  margin-top:clamp(38px,4.6vw,58px);
  display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap;
}
.btn-claro{
  display:inline-flex;align-items:center;
  background:var(--blush-claro);color:var(--noche);
  padding:16px 32px;border-radius:100px;
  font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease),background var(--lift) var(--ease);
}
.btn-claro:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(0,0,0,.5);background:var(--blanco)}
.pareja-pie-nota{
  margin:0;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-300);
}

@media (max-width:820px){.pareja-cuerpo{grid-template-columns:1fr}}

/* ═══════════ SERVICIOS ═══════════ */
.servicios{padding-block:var(--seccion-y);background:var(--blush-claro)}
.rejilla-servicios{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.9vw,26px);
}

/* ── Tarjetas con profundidad 3D ──────────────────────
   La rejilla aporta la perspectiva compartida; cada tarjeta
   se inclina siguiendo el cursor y sus capas internas flotan
   a distintas alturas (translateZ). El brillo especular se
   desplaza con el puntero como si reflejara una luz real.   */
.rejilla-servicios{perspective:1500px;perspective-origin:50% 40%}

.tarjeta{
  --rx:0deg; --ry:0deg; --tz:0px;
  --mx:50%; --my:50%; --brillo:0;
  display:flex;flex-direction:column;
  position:relative;
  background:var(--blanco);
  border:1px solid var(--gris-linea);
  border-radius:var(--borde-r-lg);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s var(--ease);
  box-shadow:0 1px 2px rgba(22,32,58,.05);
}
/* Mientras el cursor está encima, la respuesta debe ser inmediata */
.tarjeta.siguiendo{
  transition:transform .1s linear,box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.tarjeta:hover{
  --tz:22px;
  border-color:rgba(232,121,92,.55);
  box-shadow:
    0 30px 56px -20px rgba(22,32,58,.34),
    0 10px 20px -10px rgba(22,32,58,.18),
    0 2px 4px rgba(22,32,58,.06);
}
.tarjeta:active{--tz:8px}

/* Brillo especular que sigue al cursor */
.tarjeta::after{
  content:"";position:absolute;inset:0;z-index:5;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(42% 60% at var(--mx) var(--my),
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.20) 34%,
    rgba(255,255,255,0) 70%);
  opacity:var(--brillo);
  transition:opacity .4s var(--ease);
}

/* Capas a distinta altura: el parallax nace de aquí */
.tarjeta-insignia{transform:translateZ(58px)}
.tarjeta-cuerpo{transform:translateZ(30px)}

.tarjeta-media{
  display:block;overflow:hidden;position:relative;
  background:var(--coral-100);aspect-ratio:16/10;
  border-radius:25px 25px 0 0;
  /* Sin translateZ: la capa de la foto queda plana. El relieve lo dan la
     insignia y el cuerpo; una capa 3D extra con clip-path dentro provocaba
     fallos de pintado en gráficas integradas antiguas. */
}
.tarjeta-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.04);
  transition:transform .7s var(--ease);
}
.tarjeta:hover .tarjeta-media img{transform:scale(1.11)}

.tarjeta-cuerpo{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.4vw,30px)}
.tarjeta-titulo{
  font-family:var(--display);font-size:clamp(20px,1.85vw,25px);
  font-weight:500;line-height:1.2;letter-spacing:-.012em;margin-bottom:11px;
}
.tarjeta-texto{font-size:14.5px;font-weight:300;line-height:1.65;color:var(--tinta-70);margin-bottom:20px}
.tarjeta-titulo:last-of-type{margin-bottom:22px}
.tarjeta-mas{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--coral);
}
.tarjeta-mas svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.tarjeta:hover .tarjeta-mas svg{transform:translateX(5px)}

/* Tarjeta destacada — el nicho */
.tarjeta-destacada{
  grid-column:span 3;
  flex-direction:row;
  background:linear-gradient(150deg,var(--blanco) 0%,var(--coral-100) 130%);
  border-color:rgba(232,121,92,.42);
}
.tarjeta-destacada .tarjeta-media{position:relative;aspect-ratio:auto;flex:0 0 44%;min-height:360px;align-self:stretch;border-radius:25px 0 0 25px}
.tarjeta-destacada .tarjeta-media img{position:absolute;inset:0;width:100%;height:100%}
.tarjeta-destacada .tarjeta-cuerpo{justify-content:center;padding:clamp(30px,3.6vw,54px)}
.tarjeta-destacada .tarjeta-titulo{font-size:clamp(28px,3.4vw,42px);font-weight:400;margin-bottom:15px}
.tarjeta-destacada .tarjeta-texto{font-size:clamp(15.5px,1.25vw,17.5px);max-width:44ch;margin-bottom:26px}
.tarjeta-insignia{
  position:absolute;top:20px;left:20px;z-index:2;
  background:var(--noche);color:var(--blush);
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  padding:7px 14px;border-radius:100px;
  box-shadow:0 6px 18px -6px rgba(22,32,58,.6);
}

@media (max-width:1000px){
  .rejilla-servicios{grid-template-columns:repeat(2,1fr)}
  .tarjeta-destacada{grid-column:span 2}
}
@media (max-width:760px){
  .rejilla-servicios{grid-template-columns:1fr}
  .tarjeta-destacada{grid-column:span 1;flex-direction:column}
  .tarjeta-destacada .tarjeta-media{position:relative;flex:none;min-height:0;aspect-ratio:16/10;border-radius:25px 25px 0 0}
  .tarjeta-destacada .tarjeta-media img{position:static}
}

/* ═══════════ SOBRE MÍ ═══════════
   Según boceto: fondo casi blanco con círculo blush arriba a la
   derecha (colores muestreados del fondo entregado: #FCFBF9 y
   #F8F0ED), retrato vertical enmarcado en blanco a la izquierda
   (~34% del ancho) y a la derecha nombre, lema y credenciales en
   dos columnas separadas por un filete.                          */
.sobre-mi{
  position:relative;
  padding-block:var(--seccion-y);
  background:#FCFBF9;
  overflow:hidden;
}
.sobre-mi::after{
  content:"";position:absolute;top:0;right:0;
  width:clamp(300px,32vw,540px);aspect-ratio:1;border-radius:50%;
  background:#F8F0ED;
  transform:translate(34%,-44%);
  pointer-events:none;
}
.sobre-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:clamp(40px,4.8vw,72px);align-items:start;
}

/* Retrato con paspartú blanco */
.sobre-foto{margin:0}
/* En escritorio la figura se estira a la altura exacta de la columna de
   texto: el retrato rellena el marco con object-fit y el borde inferior
   de la sección queda recto en cualquier ancho, como en el boceto. */
@media (min-width:901px){
  .sobre-grid{align-items:stretch}
  .sobre-foto{display:flex;flex-direction:column}
  .sobre-foto-marco{flex:1;min-height:0;display:flex}
  .sobre-foto-marco img{height:100%;object-fit:cover;object-position:50% 20%}
}
.sobre-foto-marco{
  background:var(--blanco);
  padding:clamp(8px,0.9vw,12px);border-radius:26px;
  box-shadow:0 30px 60px -30px rgba(30,42,69,.32),0 6px 18px -8px rgba(30,42,69,.12);
}
.sobre-foto-marco img{width:100%;height:auto;border-radius:17px;display:block}
.sobre-foto-pie{
  margin-top:16px;display:flex;flex-direction:column;gap:8px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
}
.sobre-foto-nombre{color:var(--tinta-50);font-weight:400}
.sobre-foto-rol{color:var(--coral);font-weight:600}

/* Cabecera del texto */
.sobre-kicker{
  display:inline-block;
  font-size:clamp(24px,2.3vw,33px);font-weight:600;line-height:1.15;color:var(--tinta);
  margin:0 0 clamp(16px,1.8vw,22px);
}
.sobre-kicker::after{
  content:"";display:block;height:5px;width:100%;margin-top:10px;
  border-radius:3px;background:#EF83A5;   /* rosa del logotipo */
}
.sobre-nombre{
  font-size:clamp(38px,4.2vw,60px);font-weight:700;
  line-height:1.05;letter-spacing:-.015em;margin:0 0 14px;
}
.sobre-lead{
  font-size:clamp(14.5px,1.15vw,16.5px);font-weight:600;line-height:1.5;
  color:var(--coral);max-width:48ch;
  margin:0 0 clamp(14px,1.6vw,18px);
}
.sobre-claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(22px,2.1vw,28px);line-height:1.24;letter-spacing:-.01em;
  color:var(--tinta);
  margin:0 0 clamp(14px,1.6vw,18px);
  padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--gris-linea);
}
.sobre-claim em{display:block;font-style:italic;font-weight:500;color:var(--coral-vivo)}

/* Credenciales en dos columnas con filete central */
.sobre-cols{
  display:grid;grid-template-columns:1.05fr 1.09fr;
  gap:clamp(18px,1.9vw,26px);
  border-top:1px solid var(--gris-linea);
  padding-top:clamp(14px,1.6vw,18px);
}
.sobre-col-b{
  border-left:1px solid var(--gris-linea);
  padding-left:clamp(18px,1.9vw,26px);
}
.sobre-col-titulo{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--coral);margin:0 0 9px;
}
.sobre-col-titulo.con-margen{
  margin-top:clamp(10px,1.2vw,14px);padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid var(--gris-linea);
}

.grado{padding-block:7px}
.grado + .grado{border-top:1px solid var(--gris-linea)}
.grado:first-of-type{padding-top:0}
.grado-nivel{
  display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--coral);margin-bottom:3px;
}
.grado-titulo{
  font-size:clamp(14.5px,1.1vw,16px);font-weight:600;line-height:1.3;
  color:var(--tinta);margin:0 0 2px;
}
.grado-inst{font-size:13px;font-weight:500;color:var(--tinta-70);line-height:1.4;margin:0}

.lista-num{display:flex;flex-direction:column}
.lista-num li{display:flex;gap:12px;padding-block:5px}
.lista-num .num{
  flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--coral);padding-top:4px;
}
.lista-num .grado-titulo{font-size:clamp(14px,1.05vw,15.5px);margin-bottom:2px}

/* ── Instituciones: rejilla fija, logos a color ─────────
   Fichas uniformes y grandes (4+3 en escritorio, 2 por fila en
   móvil). Entrada premium: cada ficha se levanta en perspectiva,
   pasa de desenfocada a nítida y, al aterrizar, un destello la
   recorre. El fill backwards deja el estado final en manos de los
   estilos normales, así el hover responde sin pelear con la
   animación. Logos a color pleno: sin filtros.                   */
.instituciones{
  margin-top:clamp(38px,4.4vw,60px);
  padding-top:clamp(30px,3.6vw,44px);
  border-top:1px solid var(--gris-linea);
}
.instituciones-titulo{
  text-align:center;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinta-50);margin-bottom:clamp(24px,2.8vw,34px);
}
.instituciones-rejilla{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.6vw,20px);
  perspective:900px;
  /* cintura: fuerza 4+3 en escritorio en vez de 5+2 */
  max-width:1150px;margin-inline:auto;padding-inline:20px;
}
.instituciones-rejilla li{
  width:clamp(160px,21vw,255px);
  min-height:clamp(88px,9.6vw,132px);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:var(--blanco);
  border:1px solid var(--gris-linea);
  border-radius:20px;
  padding:clamp(16px,2vw,26px);
  box-shadow:0 1px 2px rgba(30,42,69,.05);
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease),border-color var(--lift) var(--ease);
}
.instituciones-rejilla img{
  height:clamp(44px,4.8vw,64px);width:auto;
  max-width:clamp(140px,17vw,212px);object-fit:contain;
  transition:transform .35s var(--ease);
}

/* Entrada: perspectiva + enfoque progresivo, en cascada */
.instituciones.visible .instituciones-rejilla li{
  animation:logoEntra .95s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 110ms);
}
@keyframes logoEntra{
  0%{opacity:0;transform:translateY(36px) rotateX(-26deg) scale(.9);filter:blur(9px)}
  55%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}

/* Destello que recorre la ficha justo después de aterrizar */
.instituciones-rejilla li::after{
  content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;
  transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
}
.instituciones.visible .instituciones-rejilla li::after{
  animation:logoBrillo 1s ease-out backwards;
  animation-delay:calc(var(--i,0) * 110ms + 600ms);
}
@keyframes logoBrillo{from{left:-160%}to{left:170%}}

.instituciones-rejilla li:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:rgba(30,42,69,.18);
  box-shadow:0 18px 34px -16px rgba(30,42,69,.26);
}
.instituciones-rejilla li:hover img{transform:scale(1.07)}

/* Los logotipos cuadrados (IHPG, Tanatología, BUAP, Anáhuac) necesitan más
   altura para pesar lo mismo que los rectangulares; la ficha no cambia:
   se compensa reduciendo su padding. */
.instituciones-rejilla li.cuadrado{padding:clamp(10px,1.2vw,18px)}
.instituciones-rejilla li.cuadrado img{height:clamp(60px,6.8vw,94px);max-width:none}

@media (max-width:600px){
  .instituciones-rejilla{gap:10px}
  .instituciones-rejilla li{width:calc(50% - 5px);min-height:78px;border-radius:15px}
  .instituciones-rejilla img{height:38px;max-width:132px}
  .instituciones-rejilla li.cuadrado img{height:56px}
}

@media (max-width:1080px){
  .sobre-cols{grid-template-columns:1fr}
  .sobre-col-b{
    border-left:0;padding-left:0;
    border-top:1px solid var(--gris-linea);
    padding-top:clamp(22px,3vw,30px);margin-top:6px;
  }
}
@media (max-width:900px){
  .sobre-grid{grid-template-columns:1fr}
  .sobre-foto{max-width:430px}
  .sobre-mi::after{width:min(60vw,340px);transform:translate(38%,-48%)}
}

/* ═══════════ LIBRO ═══════════
   Escenografía del boceto: panorámica rosa con mesita y planta a la
   izquierda (fondo entregado), libro 3D transparente de pie sobre la
   mesa y sello Best Seller; texto a la derecha. En escritorio la
   sección adopta la proporción exacta del fondo (3344/1882): así el
   libro, anclado en porcentajes, queda SIEMPRE sobre la mesa en
   cualquier ancho. En móvil la escena pasa a banner y el texto baja. */
.libro{
  position:relative;overflow:hidden;
  background:#F7DDCF;      /* muestreado del propio fondo */
  color:var(--tinta);
}
.l-stage{position:relative}
.l-fondo{display:block;width:100%;height:100%;object-fit:cover}
.l-libro{
  position:absolute;left:13.5%;bottom:20.5%;width:26%;height:auto;
  filter:drop-shadow(0 26px 30px rgba(70,25,25,.34));
}
.l-sello{
  position:absolute;left:33.5%;top:6%;width:11.5%;height:auto;
  transform:rotate(8deg);
  filter:drop-shadow(0 10px 16px rgba(70,25,25,.26));
}
.l-grid{display:flex;justify-content:flex-end;align-items:center}
.l-texto{width:min(600px,47%)}

@media (min-width:901px){
  .libro{aspect-ratio:3344/1882}
  .l-stage{position:absolute;inset:0}
  .l-grid{position:relative;z-index:2;height:100%}
}

.libro-titulo{
  font-size:clamp(40px,4.6vw,64px);font-weight:400;line-height:1;letter-spacing:-.028em;margin:0 0 10px;
}
.libro-titulo em{font-style:italic;color:var(--coral-vivo)}
.libro-subtitulo{
  font-size:clamp(17.5px,1.5vw,21px);font-weight:500;
  color:var(--tinta);max-width:42ch;margin:0 0 16px;
}

.libro-valoracion{display:flex;align-items:center;gap:12px;margin-bottom:clamp(16px,1.8vw,22px);flex-wrap:wrap}
.estrellas{position:relative;display:inline-block;font-size:20px;letter-spacing:3px;line-height:1}
.estrellas-base{color:rgba(30,42,69,.22)}
.estrellas-lleno{
  position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  width:var(--puntuacion);color:#B0730A;
}
.libro-valoracion-texto{font-size:16px;font-weight:600;color:var(--tinta)}
.libro-valoracion-texto strong{font-weight:500;color:var(--tinta)}

.l-filete{display:block;width:44px;height:3px;border-radius:2px;background:#B0730A;margin:0 0 clamp(14px,1.6vw,18px)}
.l-descripcion{
  font-size:clamp(17px,1.45vw,19.5px);font-weight:500;line-height:1.68;
  color:var(--tinta);max-width:54ch;margin:0 0 clamp(20px,2.2vw,28px);
}
.l-descripcion em{font-style:italic;font-weight:600;color:var(--coral)}

/* Botón Amazon reconstruido en HTML sobre el diseño de la pieza
   gráfica entregada: mismo ámbar, misma cápsula, mismo esquema de
   icono-textos-flecha — pero con TEXTO REAL (nítido y escalable) y
   la flecha sonrisa de Amazon dibujada en negro. */
.l-cta{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);flex-wrap:wrap}
.btn-amz{
  display:inline-flex;align-items:center;gap:16px;
  padding:16px 30px 16px 16px;border-radius:100px;
  background:linear-gradient(180deg,#FFD46A 0%,#FBB033 56%,#EF9A1C 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -3px 8px rgba(150,80,0,.28) inset,
    0 14px 30px -12px rgba(176,115,10,.6),
    0 3px 8px -3px rgba(0,0,0,.3);
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease);
}
.btn-amz:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 -3px 8px rgba(150,80,0,.24) inset,
    0 22px 42px -14px rgba(176,115,10,.72),
    0 5px 12px -4px rgba(0,0,0,.32);
}
.btn-amz:active{transform:translateY(-1px)}
.amz-circulo{
  display:grid;place-items:center;flex-shrink:0;
  width:54px;height:54px;border-radius:50%;
  color:#100B02;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 2px rgba(90,50,0,.30);
}
.amz-circulo svg{width:30px;height:auto}
.amz-textos{display:flex;flex-direction:column;gap:3px;text-align:left}
.amz-textos strong{
  font-size:clamp(19px,1.75vw,23px);font-weight:800;line-height:1.15;
  color:#0B0701;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.28);   /* bisel: asienta el trazo sobre el ámbar */
}
.amz-textos small{
  font-size:clamp(13.5px,1.15vw,15px);font-weight:600;line-height:1.25;
  color:#2E1D02;
}

.l-insignia{
  height:clamp(48px,4.6vw,60px);width:auto;
  border-radius:12px;
  box-shadow:0 10px 22px -10px rgba(20,12,4,.45);
}

.l-meta{
  display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);
  margin:clamp(18px,2vw,24px) 0 0;
  font-size:16px;font-weight:600;color:var(--tinta);
}
.l-meta li{display:flex;align-items:center;gap:8px}
.l-meta svg{width:19px;height:19px;color:#B0730A;flex-shrink:0}

@media (max-width:900px){
  .libro{padding-bottom:clamp(40px,9vw,64px)}
  .l-grid{justify-content:flex-start;margin-top:clamp(22px,4vw,34px)}
  .l-texto{width:100%}
  /* La composición móvil ya trae libro y sello integrados:
     las capas sueltas del montaje de escritorio se apagan. */
  .l-libro,.l-sello{display:none}
  /* La insignia es pieza de escritorio */
  .l-insignia{display:none}
}

/* ═══════════ TESTIMONIOS ═══════════
   Sección a sangre completa: fotografía de fondo, velo azul y el
   testimonio centrado encima. Las diapositivas se cruzan en fundido
   apiladas en la misma celda de grid, así la altura la fija el
   testimonio más largo y no hay saltos al cambiar.               */
.testimonios{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding-block:clamp(56px,6vw,92px);
  min-height:clamp(560px,58vw,720px);
  background:linear-gradient(120deg,#1B2E4F 0%,#2B4570 55%,#4A5A7E 100%);
  color:var(--blanco);
}
.t-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
.t-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,34,58,.62) 0%,rgba(20,34,58,.34) 34%,rgba(20,34,58,.70) 100%),
    linear-gradient(96deg,rgba(24,42,72,.74) 0%,rgba(30,52,88,.52) 46%,rgba(58,64,92,.42) 100%);
}

.t-contenido{
  position:relative;z-index:2;
  width:100%;max-width:760px;
  margin-inline:auto;
  padding-inline:clamp(56px,9vw,96px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.t-eyebrow{
  display:inline-block;
  font-size:clamp(22px,2.1vw,30px);font-weight:600;line-height:1.15;
  color:var(--blanco);margin:0 0 clamp(16px,1.8vw,22px);
  text-shadow:0 1px 16px rgba(12,22,40,.35);
}
.t-eyebrow::after{
  content:"";display:block;height:5px;width:100%;
  margin-top:9px;border-radius:3px;background:#EF83A5;
}

.t-titulo{
  font-size:clamp(30px,3.9vw,52px);
  font-weight:400;line-height:1.14;letter-spacing:-.015em;
  color:var(--blanco);margin:0;
  text-shadow:0 2px 30px rgba(12,22,40,.34);
}
.t-titulo em{font-style:italic;color:var(--blanco)}

.t-comillas{
  font-family:var(--display);font-size:clamp(52px,5.4vw,72px);
  line-height:.6;color:var(--salmon);
  margin:clamp(26px,3.2vw,38px) 0 clamp(16px,2vw,22px);
}
.t-estrellas{
  font-size:clamp(17px,1.6vw,21px);letter-spacing:7px;
  color:var(--salmon);margin-bottom:clamp(22px,2.6vw,30px);
  text-indent:7px;
}

/* Visor: todas las diapositivas en la misma celda */
.t-visor{display:grid;width:100%}
.t-slide{
  grid-area:1/1;margin:0;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;
  pointer-events:none;
}
.t-slide.activo{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.t-slide blockquote{
  margin:0;
  font-size:clamp(16px,1.45vw,20px);font-weight:300;line-height:1.72;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 18px rgba(12,22,40,.42);
  max-width:52ch;
}
.t-sep{display:block;width:150px;height:1px;background:rgba(255,255,255,.42);margin:clamp(24px,3vw,32px) 0}
.t-slide figcaption{
  font-size:clamp(15px,1.3vw,17.5px);font-weight:500;letter-spacing:.02em;
  color:var(--blanco);
}

/* Puntos */
.t-puntos{display:flex;gap:9px;margin-top:clamp(28px,3.4vw,40px)}
.t-punto{
  width:7px;height:7px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.38);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.t-punto:hover{background:rgba(255,255,255,.66)}
.t-punto.activo{background:var(--salmon);transform:scale(1.34)}

/* Flechas */
.t-nav{
  position:absolute;top:50%;z-index:3;
  transform:translateY(-50%);
  display:grid;place-items:center;
  width:clamp(42px,3.6vw,54px);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  color:var(--blanco);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.t-nav svg{width:44%;height:44%}
.t-nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.9);transform:translateY(-50%) scale(1.07)}
.t-nav.ant{left:clamp(12px,3.4vw,58px)}
.t-nav.sig{right:clamp(12px,3.4vw,58px)}

@media (max-width:760px){
  .testimonios{min-height:0;padding-block:clamp(64px,13vw,88px)}
  .t-foto{object-position:42% 40%}
  .t-velo{background:linear-gradient(180deg,rgba(18,32,56,.82) 0%,rgba(22,40,68,.72) 45%,rgba(18,32,56,.88) 100%)}
  .t-contenido{padding-inline:clamp(52px,14vw,64px)}
  .t-nav{width:38px;top:auto;bottom:clamp(18px,5vw,26px);transform:none}
  .t-nav:hover{transform:scale(1.07)}
  .t-nav.ant{left:calc(50% - 52px)}
  .t-nav.sig{right:calc(50% - 52px)}
  .t-puntos{margin-bottom:44px}
}

/* ═══════════ AGENDA ═══════════ */
.agenda{
  padding-block:var(--seccion-y);
  /* En claro: Testimonios (oscuro) → Agenda (claro) → pie (oscuro).
     Antes las tres iban oscuras y se leían como una sola mancha. */
  background:var(--blush);
  color:var(--tinta);
  position:relative;overflow:hidden;
}
.agenda::before{
  content:"";position:absolute;top:-30%;left:-10%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(253,237,233,.85) 0%,rgba(253,237,233,0) 66%);pointer-events:none;
}
.agenda-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(36px,5vw,72px);align-items:start;
}
.agenda-titulo{
  font-size:clamp(34px,4.6vw,60px);font-weight:400;line-height:1.06;letter-spacing:-.022em;margin:0 0 20px;
}
.agenda-titulo em{font-style:italic;color:var(--coral-vivo)}
.agenda-bajada{
  font-size:clamp(16px,1.3vw,18px);font-weight:300;line-height:1.7;
  color:var(--tinta-70);max-width:46ch;margin-bottom:clamp(26px,3vw,34px);
}
.agenda-bajada strong{font-weight:500;color:var(--tinta)}

.agenda-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(32px,4vw,44px)}
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:11px;
  background:#25D366;color:#04331A;
  padding:16px 28px;border-radius:100px;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 12px 30px -12px rgba(37,211,102,.7);
  transition:transform var(--lift) var(--ease),box-shadow var(--lift) var(--ease),background var(--lift) var(--ease);
}
.btn-whatsapp svg{width:21px;height:21px}
.btn-whatsapp:hover{transform:translateY(-3px);background:#2EE476;box-shadow:0 20px 40px -14px rgba(37,211,102,.85)}

.btn-claro-contorno{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:100px;
  border:1px solid rgba(30,42,69,.28);color:var(--tinta);
  font-size:15px;font-weight:400;letter-spacing:.03em;
  transition:background var(--lift) var(--ease),border-color var(--lift) var(--ease),transform var(--lift) var(--ease);
}
.btn-claro-contorno svg{width:19px;height:19px}
.btn-claro-contorno:hover{background:rgba(30,42,69,.06);border-color:var(--tinta);transform:translateY(-2px)}

.agenda-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 30px;margin:0}
.agenda-datos dt{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--coral);margin-bottom:8px;
}
.agenda-datos dd{
  margin:0;font-size:16.5px;font-weight:500;line-height:1.6;color:var(--tinta);
}

.agenda-mapa{
  border-radius:var(--borde-r-lg);overflow:hidden;
  border:1px solid var(--gris-linea);
  box-shadow:0 26px 56px -30px rgba(30,42,69,.42);
  background:var(--blush-claro);
}
.agenda-mapa iframe{width:100%;height:clamp(300px,42vw,430px);filter:grayscale(.34) contrast(1.04)}
.agenda-mapa-enlace{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 24px;background:var(--blush-claro);color:var(--tinta);
  font-size:13.5px;font-weight:500;letter-spacing:.04em;
  transition:background var(--lift) var(--ease);
}
.agenda-mapa-enlace svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.agenda-mapa-enlace:hover{background:var(--coral-100)}
.agenda-mapa-enlace:hover svg{transform:translateX(5px)}

@media (max-width:900px){.agenda-grid{grid-template-columns:1fr}}

/* ═══════════ FOOTER ═══════════ */
.site-footer{background:#16203A;color:rgba(253,237,233,.62);padding-block:clamp(52px,6vw,76px) 0;font-size:14.5px}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(38px,4.5vw,54px);
}
.footer-marca{color:var(--blush-claro)}
.footer-marca .marca-glifo{margin-bottom:18px}
.footer-nombre{font-family:var(--display);font-size:21px;font-weight:500;margin:0 0 6px;color:var(--blush-claro)}
.footer-rol{font-size:12.5px;font-weight:300;letter-spacing:.05em;color:rgba(253,237,233,.55);margin:0}
.site-footer h3{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--coral-300);margin-bottom:18px;
}
.footer-nav li{margin-bottom:11px}
.footer-nav a,.footer-contacto a{
  font-size:14.5px;font-weight:300;
  transition:color .25s var(--ease);
}
.footer-nav a:hover,.footer-contacto a:hover{color:var(--blush-claro)}
.footer-contacto p{margin-bottom:14px;font-weight:300;line-height:1.6}
.footer-contacto a{font-size:19px;font-family:var(--display);color:var(--blush-claro)}
.footer-horario{font-size:13.5px;color:rgba(253,237,233,.48)}

.footer-legal{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  padding-block:24px;border-top:1px solid rgba(253,237,233,.11);
  font-size:12.5px;font-weight:300;color:rgba(253,237,233,.45);
}
.footer-legal p{margin:0}

/* Redes: los logotipos originales, con su color de marca */
.footer-redes{display:flex;align-items:center;gap:10px}
.footer-redes a,.footer-redes .red-inactiva{
  display:grid;place-items:center;
  width:34px;height:34px;
  transition:transform .25s var(--ease),opacity .25s var(--ease),filter .25s var(--ease);
}
.footer-redes img{width:100%;height:100%;object-fit:contain}
/* Sobre el footer oscuro conviene bajarles un punto la intensidad;
   al pasar el cursor recuperan su color pleno y suben. */
.footer-redes a{opacity:.82}
.footer-redes a:hover{opacity:1;transform:translateY(-3px) scale(1.06)}
/* Instagram todavía sin cuenta enlazada: se ve, no se pulsa */
.footer-redes .red-inactiva{opacity:.42;cursor:default}

@media (max-width:560px){
  .footer-legal{justify-content:center;text-align:center}
  .footer-redes{order:-1;margin-bottom:6px}
}
.footer-aviso{font-style:italic}

@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px}}

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
/* Botón flotante de WhatsApp: glifo oficial en blanco sobre degradado
   de marca, halo que respira para llamar la atención sin gritar. */
.wa-flotante{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:grid;place-items:center;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(160deg,#2EE476 0%,#25D366 45%,#1CA84F 100%);
  color:#FFFFFF;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 2px 6px rgba(255,255,255,.35) inset,
    0 14px 32px -10px rgba(29,168,79,.65),
    0 4px 12px rgba(10,40,20,.28);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);
  transition:opacity .4s var(--ease),transform .35s var(--ease),visibility .4s,box-shadow var(--lift) var(--ease);
}
.wa-flotante::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:waHalo 3.2s ease-out infinite;
  pointer-events:none;
}
@keyframes waHalo{
  0%{transform:scale(.9);opacity:0}
  25%{opacity:.9}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
.wa-flotante.visible{opacity:1;visibility:visible;transform:none}
.wa-flotante:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 2px 6px rgba(255,255,255,.4) inset,
    0 20px 42px -12px rgba(29,168,79,.75),
    0 6px 14px rgba(10,40,20,.3);
}
.wa-flotante svg{width:32px;height:32px;filter:drop-shadow(0 1px 2px rgba(10,60,30,.35))}
@media (max-width:640px){.wa-flotante{right:16px;bottom:16px;width:57px;height:57px}}
@media (prefers-reduced-motion:reduce){.wa-flotante::before{animation:none;opacity:0}}

/* ═══════════ RESPONSIVE HEADER ═══════════ */
@media (max-width:1080px){
  .nav-principal ul{gap:22px}
  .nav-principal a{font-size:13.5px}
}
@media (max-width:980px){
  .nav-principal,.btn-header{display:none}
  .menu-toggle{display:block}
  .marca-texto em{display:none}
}

/* ═══════════ SEO · CONTEXTO DEL H1 ═══════════
   Aporta la palabra clave dentro del H1 sin romper el titular
   editorial. Se lee como un antetítulo, no como un segundo titular. */
.hero-titulo .h1-contexto{
  display:block;
  font-family:var(--sans);
  font-size:.205em;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--coral);
  margin-bottom:.85em;
  line-height:1.3;
}

/* ═══════════ ENTRADILLA DEL PLANTEAMIENTO ═══════════
   Párrafo denso en datos: es el fragmento que los motores
   generativos extraen para responder «quién es y qué ofrece». */
.planteamiento-titulo{
  font-family:var(--display);
  font-size:clamp(26px,3.2vw,38px);
  font-weight:400;line-height:1.15;letter-spacing:-.015em;
  color:var(--tinta);margin:0 0 20px;
}
.planteamiento-entradilla{
  font-size:clamp(16px,1.25vw,17.5px);
  line-height:1.7;color:var(--tinta-85);font-weight:400;
  max-width:58ch;margin:0 0 30px;
  padding-bottom:26px;border-bottom:1px solid var(--gris-linea);
}
.planteamiento-entradilla strong{font-weight:600;color:var(--tinta)}
.planteamiento-entradilla em{font-style:italic;color:var(--coral)}

/* ═══════════ PREGUNTAS FRECUENTES ═══════════ */
.preguntas{padding-block:var(--seccion-y);background:var(--blanco)}
.faq-lista{max-width:900px}
.faq-item{border-bottom:1px solid var(--gris-linea)}
.faq-item > summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 48px 22px 0;
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary > h3{
  display:inline;font-family:var(--sans);
  font-size:clamp(16.5px,1.55vw,19px);font-weight:600;
  line-height:1.45;color:var(--tinta);
}
.faq-item > summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:10px;height:10px;
  border-right:2.2px solid var(--coral);border-bottom:2.2px solid var(--coral);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-item[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item > summary:hover > h3{color:var(--coral)}
.faq-item > summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
.faq-item > p{
  margin:0 0 26px;padding-right:48px;max-width:74ch;
  font-size:clamp(15.5px,1.2vw,17px);font-weight:400;
  line-height:1.72;color:var(--tinta-85);
}
.faq-item > p strong{font-weight:600;color:var(--tinta)}
@media (max-width:600px){
  .credencial{grid-template-columns:1fr;gap:3px}
  .faq-item > summary{padding-right:38px}
  .faq-item > p{padding-right:0}
}

/* ═══════════ PÁGINAS INTERIORES ═══════════ */
.pagina{padding:clamp(120px,11vw,164px) 0 clamp(56px,6vw,88px);background:#FDF9F5}
.pagina-cabecera{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px)}
.pagina h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,50px);line-height:1.12;letter-spacing:-.018em;
  color:var(--tinta);margin:0 0 16px;
}
.pagina h1 em{font-style:italic;color:var(--coral-vivo)}
.pagina-entradilla{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--tinta-85);font-weight:400;max-width:62ch;margin:0}
.pagina-cuerpo{max-width:74ch}
.pagina-cuerpo h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.6vw,31px);line-height:1.2;letter-spacing:-.012em;
  color:var(--tinta);margin:clamp(38px,4vw,54px) 0 14px;
}
.pagina-cuerpo h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(16.5px,1.6vw,19px);line-height:1.35;
  color:var(--tinta);margin:30px 0 10px;
}
.pagina-cuerpo p,.pagina-cuerpo li{
  font-size:clamp(15.5px,1.2vw,17px);font-weight:400;
  line-height:1.72;color:var(--tinta-85);
}
.pagina-cuerpo p{margin:0 0 16px}
.pagina-cuerpo ul,.pagina-cuerpo ol{margin:0 0 18px;padding-left:22px}
.pagina-cuerpo li{margin-bottom:9px}
.pagina-cuerpo strong{font-weight:600;color:var(--tinta)}
.pagina-cuerpo a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.pagina-cuerpo a:hover{color:var(--coral-vivo)}
.pagina-nota{
  background:var(--blush-claro);border-left:4px solid var(--coral-300);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0;
}
.pagina-nota p:last-child{margin-bottom:0}
.pagina-fecha{font-size:14px;color:var(--tinta-70);margin-top:34px;padding-top:20px;border-top:1px solid var(--gris-linea)}
.migas{font-size:13.5px;color:var(--tinta-70);margin:0 0 18px;font-weight:500}
.migas a{color:var(--coral);text-decoration:none}
.migas a:hover{text-decoration:underline}
.credencial{
  /* Ancho fijo en la columna de etiquetas: cada .credencial es una rejilla
     independiente, así que con "auto" cada fila alineaba en un punto distinto. */
  display:grid;grid-template-columns:112px 1fr;gap:6px 20px;
  padding:18px 0;border-bottom:1px solid var(--gris-linea);
}
.credencial:last-child{border-bottom:0}
.credencial dt{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--coral);padding-top:3px}
.credencial dd{margin:0;font-size:clamp(15.5px,1.2vw,17px);font-weight:500;color:var(--tinta);line-height:1.45}
.credencial dd span{display:block;font-weight:400;font-size:15px;color:var(--tinta-70);margin-top:3px}