/* Cirugías MM — Dr. Marco Morales Guzmán
   Paleta derivada del logotipo: azul "MM" + verde-teal del isotipo */
:root{
  --azul:#0D4F86;
  --azul-profundo:#0A2D4D;
  --noche:#071E33;
  --teal:#13897C;
  --teal-oscuro:#0E6B61;
  --teal-claro:#DDEFEB;
  --marfil:#F6F7F4;
  --piedra:#ECEFEA;
  --blanco:#FFFFFF;
  --tinta:#13212E;
  --tinta-suave:#4E5D69;
  --linea:#D5DDD8;
  --sombra:0 28px 60px -34px rgba(7,30,51,.45);
  --radio:6px;
  --radio-l:14px;
  --menta:#8FD3C8;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ancho:1200px;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Manrope", -apple-system, "Segoe UI", sans-serif;
  --marca:"Oswald", "Arial Narrow", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfil);color:var(--tinta);font-family:var(--sans);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--teal)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;color:var(--tinta);text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Etiquetas ---------- */
.eyebrow{font-family:var(--marca);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:500}
.eyebrow.claro{color:#8FD3C8}
.lede{font-size:1.12rem;color:var(--tinta-suave);max-width:60ch}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, background .2s ease, color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primario{background:var(--teal);color:var(--blanco)}
.btn-primario:hover{background:var(--teal-oscuro);color:var(--blanco)}
.btn-azul{background:var(--azul);color:var(--blanco)}
.btn-azul:hover{background:var(--azul-profundo);color:var(--blanco)}
.btn-linea{border-color:var(--linea);color:var(--tinta);background:transparent}
.btn-linea:hover{border-color:var(--azul);color:var(--azul)}
.btn-linea.claro{border-color:rgba(255,255,255,.35);color:var(--blanco)}
.btn-linea.claro:hover{border-color:var(--blanco);color:var(--blanco)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Encabezado ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(246,247,244,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.marca{display:flex;align-items:center;gap:12px;color:var(--azul)}
.marca img{height:46px;width:auto}
.marca .txt{display:flex;flex-direction:column;line-height:1}
.marca .txt b{font-family:var(--marca);font-size:1.35rem;font-weight:700;font-style:italic;letter-spacing:.01em;color:var(--azul)}
.marca .txt small{font-family:var(--marca);font-size:.68rem;letter-spacing:.08em;color:var(--teal);margin-top:4px}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-size:.9rem;font-weight:600;color:var(--tinta-suave);position:relative}
.menu a:hover,.menu a[aria-current="page"]{color:var(--azul)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--teal)}
.nav .btn{padding:11px 20px;font-size:.85rem}
.toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--azul)}
.toggle svg{width:26px;height:26px}

/* ---------- Miga de pan + encabezado de página ---------- */
.page-head{padding:56px 0 64px;border-bottom:1px solid var(--linea);background:linear-gradient(180deg,var(--blanco),var(--marfil))}
.miga{display:flex;gap:10px;font-size:.82rem;color:var(--tinta-suave);margin:0 0 28px;padding:0;list-style:none}
.miga li+li::before{content:"/";margin-right:10px;color:var(--linea)}
.miga a{color:var(--tinta-suave)}
.page-head h1{font-size:clamp(2.5rem,5vw,4rem);margin-top:14px}
.page-head .sub{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--azul);margin-top:18px;max-width:30ch;font-style:italic;font-weight:400}
.page-head .lede{margin-top:20px}
/* Encabezado con foto de fondo (Contacto): el doctor a la izquierda, texto en la sombra del techo
   (arriba a la derecha) y el volante con el logo de Audi despejado abajo a la derecha */
.page-head.con-foto{position:relative;overflow:hidden;background:var(--noche);border-bottom:0;padding:36px 0 0;min-height:clamp(500px,40.6vw,720px)}
.con-foto .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.con-foto::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(78% 92% at 100% 0%,rgba(7,30,51,.9) 0%,rgba(7,30,51,.8) 42%,rgba(7,30,51,.3) 72%,rgba(7,30,51,0) 100%),linear-gradient(180deg,rgba(7,30,51,.5) 0,rgba(7,30,51,0) 16%)}
.con-foto .wrap{position:relative;z-index:2}
.con-foto .texto-foto{margin-left:auto;max-width:500px;padding-top:8px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.con-foto h1{font-size:clamp(2.3rem,4vw,3.2rem)}
.con-foto .sub{font-size:clamp(1.1rem,1.8vw,1.35rem);margin-top:12px}
.con-foto .miga,.con-foto .miga a{color:rgba(255,255,255,.75)}
.con-foto .miga li+li::before{color:rgba(255,255,255,.4)}
.con-foto h1{color:var(--blanco)}
.con-foto .lede{color:#D5E0E8;font-size:1rem;margin-top:16px}
/* Resultados: quirófano con el doctor al centro-izquierda; texto a la derecha y acercamiento lento */
.foto-quirofano .fondo{object-position:center 28%;transform-origin:42% 35%;animation:acercar 22s ease-out both}
.foto-quirofano::before{background:linear-gradient(90deg,rgba(7,30,51,.25) 0%,rgba(7,30,51,.05) 30%,rgba(7,30,51,.15) 50%,rgba(7,30,51,.82) 66%,rgba(7,30,51,.92) 100%),linear-gradient(180deg,rgba(7,30,51,.45) 0,rgba(7,30,51,0) 18%)}
.foto-quirofano .texto-foto{padding-top:40px}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.foto-quirofano .fondo,.foto-ciudad .fondo{animation:none}}
.con-foto .sub{color:#8FD3C8}
.page-head-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end}

/* ---------- Secciones ---------- */
section{padding:clamp(72px,9vw,124px) 0}
.sec-borde{border-bottom:1px solid var(--linea)}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:12px}
.sec-head p{margin-top:16px;color:var(--tinta-suave)}
.sec-piedra{background:var(--piedra)}
.sec-blanca{background:var(--blanco)}

/* ---------- Foto con marco ---------- */
.foto{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);background:var(--piedra)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.r45{aspect-ratio:4/5}
.foto.r11{aspect-ratio:1/1}
.foto.r54{aspect-ratio:5/4}
.foto .pie{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;background:linear-gradient(0deg,rgba(7,30,51,.85),transparent);color:var(--blanco);font-size:.85rem}
.foto-acento{position:relative}
.foto-acento::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--teal);border-radius:var(--radio);z-index:-1}

/* ---------- Hero (inicio) ---------- */
.hero{padding:0;position:relative;overflow:hidden;color:var(--blanco);background:radial-gradient(900px 520px at 85% 0%,rgba(19,137,124,.35),transparent 60%),linear-gradient(160deg,var(--azul-profundo) 0%,var(--noche) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;padding-top:88px;padding-bottom:88px}
.hero h1{color:var(--blanco);font-size:clamp(2.4rem,4.6vw,3.9rem);margin-top:18px}
.hero h1 em{font-style:italic;color:#8FD3C8}
.hero .lede{color:#C9D6E0;margin-top:22px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero .foto{aspect-ratio:4/5;border:1px solid rgba(255,255,255,.12)}
.hero .foto img{object-position:center 30%}
.hero-sub{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.35;color:#E7EEF3;margin-top:16px;max-width:32ch}
.hero-sub em{color:#8FD3C8}
.hero-visual{position:relative}
.hero-foto img{animation:acercar 20s ease-out both;transform-origin:50% 30%}
/* Sellos de credenciales sobre la foto */
.sello{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);color:var(--tinta);border-radius:12px;padding:12px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);font-size:.8rem;line-height:1.3;animation:flotar 6s ease-in-out infinite}
.sello b{display:block;font-size:.88rem;color:var(--azul)}
.sello svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sello-a{left:-34px;bottom:56px}
.sello-b{right:-26px;top:44px;animation-delay:-3s}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Entrada escalonada del primer impacto */
.entra{animation:entrar .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes entrar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Encabezado al desplazarse */
.header{transition:box-shadow .3s ease, background .3s ease}
.header.desplazado{box-shadow:0 10px 30px -20px rgba(7,30,51,.45);background:rgba(246,247,244,.97)}
/* Fotos con leve acercamiento al pasar el cursor */
.foto img,.prensa img{transition:transform .6s ease}
.split .foto:hover img,.galeria .foto:hover img,.sec-piedra .foto:hover img{transform:scale(1.04)}
.hero-iso{position:absolute;right:-60px;bottom:-40px;width:340px;opacity:.06;filter:brightness(0) invert(1);pointer-events:none}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14)}
.cifras > div{padding:26px 24px 30px 0}
.cifras > div+div{padding-left:24px;border-left:1px solid rgba(255,255,255,.14)}
.cifras .v{font-family:var(--serif);font-size:1.7rem;color:var(--blanco)}
.cifras .mas{color:#8FD3C8;margin-right:2px}
.cifras .k{font-family:var(--marca);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8FD3C8;margin-top:4px}

/* ---------- Franja de confianza ---------- */
.franja{background:var(--blanco);border-bottom:1px solid var(--linea)}
.franja .wrap{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:14px 28px;padding-top:22px;padding-bottom:22px;font-size:.86rem;line-height:1.4;color:var(--tinta-suave)}
.franja strong{color:var(--azul)}
.franja span{display:block;position:relative;padding-left:17px}
.franja span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ---------- Dos columnas ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split.izq{grid-template-columns:.9fr 1.1fr}
.texto p+p{margin-top:16px}
.texto p{color:var(--tinta-suave)}
.texto h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:12px 0 22px}

/* ---------- Línea de tiempo (estructura "Sobre") ---------- */
.bloque{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;padding:64px 0;border-top:1px solid var(--linea)}
.bloque:first-child{border-top:0;padding-top:0}
.bloque .cab h2{font-size:clamp(1.6rem,2.4vw,2rem);margin-top:10px}
.bloque .cab p{color:var(--tinta-suave);margin-top:12px;font-size:.95rem}
.hitos{list-style:none;margin:0;padding:0}
.hito{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--linea)}
.hito:first-child{border-top:0;padding-top:4px}
.hito .cuando{font-family:var(--marca);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);padding-top:4px}
.hito h3{font-size:1.2rem}
.hito p{color:var(--tinta-suave);font-size:.94rem;margin-top:6px}
.hito .registro{display:inline-block;margin-top:10px;font-size:.76rem;letter-spacing:.04em;color:var(--teal-oscuro);background:var(--teal-claro);border-radius:999px;padding:4px 12px}
.prensa{margin:22px 0 0}
.prensa a{display:block;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra);background:#f3f1ec}
.prensa img{width:100%;height:auto;transition:transform .4s ease}
.prensa a:hover img{transform:scale(1.02)}
.prensa figcaption{margin-top:12px;font-size:.84rem;color:var(--tinta-suave);border-left:3px solid var(--teal);padding-left:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--linea);background:var(--blanco);border-radius:999px;padding:9px 16px;font-size:.85rem;color:var(--tinta)}
.chip b{color:var(--azul)}

/* ---------- Sedes ---------- */
.sedes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.sede{background:var(--blanco);padding:28px 24px}
.sede .n{font-family:var(--marca);font-size:.72rem;letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
.sede h3{font-size:1.25rem;margin-top:10px}
.sede p{font-size:.88rem;color:var(--tinta-suave);margin-top:6px}

/* ---------- Cita / filosofía ---------- */
.cita{background:var(--azul-profundo);color:var(--blanco);position:relative;overflow:hidden}
.cita blockquote{margin:0 auto;max-width:900px;text-align:center;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35;font-weight:400;font-style:italic}
.cita blockquote::before{content:"“";display:block;font-size:4.5rem;line-height:.6;color:#8FD3C8;margin-bottom:18px;font-style:normal}
.cita figcaption{text-align:center;margin-top:28px;font-family:var(--marca);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#8FD3C8}
.cita .iso{position:absolute;left:-40px;top:-30px;width:240px;opacity:.07;filter:brightness(0) invert(1)}

/* ---------- Procedimientos ---------- */
.procs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proc{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:30px 26px;display:flex;flex-direction:column;transition:border-color .2s, transform .2s, box-shadow .2s}
.proc:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--sombra)}
.proc .n{font-family:var(--marca);font-size:.78rem;letter-spacing:.14em;color:var(--teal)}
.proc h3{font-size:1.3rem;margin-top:14px}
.proc .zona{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:700;margin-top:6px}
.proc p{font-size:.92rem;color:var(--tinta-suave);margin-top:12px;flex:1}
.proc a{margin-top:18px;font-weight:700;font-size:.86rem}
.proc.destacado{background:var(--azul);border-color:var(--azul)}
.proc.destacado h3,.proc.destacado p{color:var(--blanco)}
.proc.destacado .n,.proc.destacado .zona{color:#8FD3C8}
.proc.destacado a{color:var(--blanco)}

.incluye{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px}
.incluye div{border-top:2px solid var(--teal);padding-top:18px}
.incluye h3{font-size:1.1rem}
.incluye p{font-size:.9rem;color:var(--tinta-suave);margin-top:6px}

/* ---------- Paciente internacional ---------- */
.cifras-banda{padding:0;background:linear-gradient(160deg,var(--azul-profundo) 0%,var(--noche) 100%);color:var(--blanco)}
.cifras-banda .cifras{border-top:0}
.cifras-banda .cifras .v{color:var(--blanco)}
.procs.procs-3{grid-template-columns:repeat(3,1fr)}
.procs-3 .proc{overflow:hidden;padding-top:0}
.proc-img{display:block;width:calc(100% + 52px);max-width:none;margin:0 -26px 22px;aspect-ratio:3/2;object-fit:cover;transition:transform .6s ease}
.proc:hover .proc-img{transform:scale(1.05)}
.proc.destacado .proc-img{filter:saturate(.9)}
/* Paciente internacional: panorámica de Guayaquil con el texto a la izquierda */
.foto-ciudad .fondo{object-position:center 40%;animation:acercar 24s ease-out both;transform-origin:65% 30%}
.foto-ciudad::before{background:linear-gradient(90deg,rgba(7,30,51,.92) 0%,rgba(7,30,51,.78) 38%,rgba(7,30,51,.25) 62%,rgba(7,30,51,0) 80%),linear-gradient(180deg,rgba(7,30,51,.45) 0,rgba(7,30,51,0) 18%)}
.foto-ciudad .texto-foto{margin-left:0;max-width:560px;padding-top:40px}
.foto-aeropuerto .fondo{object-position:center 55%;transform-origin:55% 60%}
.credito-foto{position:absolute;right:14px;bottom:10px;z-index:2;font-size:.68rem;color:rgba(255,255,255,.75);background:rgba(7,30,51,.45);padding:3px 8px;border-radius:4px}
.credito-foto:hover{color:var(--blanco)}
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px}
.razones div{border-top:2px solid var(--teal);padding-top:18px}
.razones h3{font-size:1.15rem}
.razones p{font-size:.92rem;color:var(--tinta-suave);margin-top:8px}
.video-espacio{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;background:var(--noche);box-shadow:var(--sombra)}
.video-espacio img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:grayscale(.3)}
.video-aviso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--blanco);font-family:var(--marca);letter-spacing:.18em;text-transform:uppercase;font-size:.85rem}
.video-aviso .play{width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.8);position:relative}
.video-aviso .play::after{content:"";position:absolute;left:30px;top:22px;border-left:22px solid rgba(255,255,255,.9);border-top:16px solid transparent;border-bottom:16px solid transparent}

/* ---------- Beneficios: cinta de logos y tarjetas de aliados ---------- */
.cinta{padding:30px 0 34px;background:var(--blanco);border-bottom:1px solid var(--linea);overflow:hidden}
.cinta-titulo{text-align:center;font-family:var(--marca);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:18px}
.cinta-marco{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cinta-pista{display:flex;width:max-content;animation:cinta 28s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-grupo{display:flex;align-items:center;gap:88px;padding-right:88px}
.cinta-grupo a{display:flex;align-items:center;height:64px}
.cinta-grupo img{max-height:56px;max-width:210px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
.cinta-grupo a:hover img{filter:none;opacity:1}
/* Los logos compactos (casi cuadrados) necesitan más alto para pesar igual que los alargados */
.cinta-grupo img[src*="cedros"],.cinta-grupo img[src*="arriaga"]{max-height:68px}
.cinta-grupo a{height:72px}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta-pista{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.cinta-grupo[aria-hidden]{display:none}}
.socios{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.socio{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.socio:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--teal)}
.socio-foto{aspect-ratio:3/2;overflow:hidden}
.socio-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.socio:hover .socio-foto img{transform:scale(1.05)}
.socio-cuerpo{position:relative;padding:58px 28px 28px;flex:1;display:flex;flex-direction:column}
.socio-logo{position:absolute;top:-42px;left:28px;height:76px;width:auto;max-width:210px;object-fit:contain;background:var(--blanco);border-radius:10px;padding:10px 16px;box-shadow:0 12px 30px -16px rgba(7,30,51,.45)}
.socio .etapa{font-family:var(--marca);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.socio h3{font-size:1.4rem;margin-top:8px}
.socio p{color:var(--tinta-suave);font-size:.94rem;margin-top:10px;flex:1}
.socio a{margin-top:18px;font-weight:700;font-size:.88rem}

/* ---------- Formas de pago ---------- */
.medios{margin-bottom:44px}
.medios-titulo{font-family:var(--marca);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:14px}
.medios ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.medios li{height:76px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:14px 18px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.medios li:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--teal)}
.medios li img{max-height:26px;max-width:100%;width:auto}
.medios li img.alto{max-height:40px}
.medios li svg{width:42px;height:28px;flex:none}
.medios li span{font-weight:700;font-size:.86rem;color:var(--azul)}
.incluye.con-icono .icono{width:44px;height:44px;margin-bottom:14px;fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.incluye.con-icono .icono .relleno{fill:var(--teal);stroke:none}

/* ---------- Pasos ---------- */
.pasos{list-style:none;margin:0;padding:0;counter-reset:p}
.pasos li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--linea);counter-increment:p}
.pasos li:first-child{border-top:0;padding-top:0}
.pasos li::before{content:"0" counter(p);font-family:var(--serif);font-size:1.7rem;color:var(--teal);line-height:1}
.pasos h3{font-size:1.12rem}
.pasos p{color:var(--tinta-suave);font-size:.93rem;margin-top:6px}

/* ---------- Antes / después ---------- */
.casos{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.caso{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.comparador{position:relative;aspect-ratio:3/4;overflow:hidden;user-select:none;background:var(--noche);--pos:50%}
.comparador.r45{aspect-ratio:4/5}
.comparador img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparador .antes{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comparador input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.comparador .barra{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--blanco);transform:translateX(-1px);z-index:2;pointer-events:none}
.comparador .barra::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--blanco);color:var(--azul);display:grid;place-items:center;font-size:1.1rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.comparador .et{position:absolute;top:16px;z-index:2;font-family:var(--marca);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(7,30,51,.72);color:var(--blanco);padding:6px 12px;border-radius:999px;pointer-events:none}
.comparador .et.a{left:16px}
.comparador .et.d{right:16px;background:rgba(19,137,124,.88)}
.caso .info{padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid var(--linea)}
.caso .info h3{font-size:1.2rem}
.caso .info span{font-size:.82rem;color:var(--tinta-suave)}
.aviso{margin-top:28px;font-size:.84rem;color:var(--tinta-suave);border-left:3px solid var(--teal);padding:4px 0 4px 16px;max-width:820px}

/* ---------- Galería simétrica ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.galeria .foto{aspect-ratio:4/5}

/* ---------- Preguntas frecuentes ---------- */
.faq details{border-top:1px solid var(--linea);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--serif);font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:var(--teal);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--tinta-suave);font-size:.95rem;max-width:70ch}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.datos{list-style:none;margin:0;padding:0}
.datos li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--linea);font-size:.95rem}
.datos li:first-child{border-top:0}
.datos .k{font-family:var(--marca);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);padding-top:3px}
.mapa{border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);min-height:380px;box-shadow:var(--sombra)}
.mapa iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

/* ---------- Siguiente paso ---------- */
.siguiente{background:linear-gradient(140deg,var(--azul) 0%,var(--azul-profundo) 100%);color:var(--blanco);position:relative;overflow:hidden}
.siguiente .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.siguiente h2{color:var(--blanco);font-size:clamp(2rem,3.6vw,3rem);margin-top:12px}
.siguiente p{color:#C9D6E0;margin-top:16px;max-width:52ch}
.siguiente .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.wa-directo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:20px;font-size:.92rem;color:#C9D6E0}
.wa-directo a{color:var(--blanco);font-weight:700;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.35)}
.wa-directo a:hover{color:#8FD3C8;border-color:#8FD3C8}
.copiar{font:inherit;font-size:.78rem;color:#8FD3C8;background:transparent;border:1px solid rgba(143,211,200,.45);border-radius:999px;padding:4px 12px;cursor:pointer}
.copiar:hover{background:rgba(143,211,200,.12)}
.siguiente .foto{aspect-ratio:1/1;border:1px solid rgba(255,255,255,.15)}

/* ---------- Pie ---------- */
.pie-sitio{background:var(--noche);color:#A9B8C5;font-size:.9rem;padding:72px 0 0}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.pie-sitio h4{font-family:var(--marca);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#8FD3C8;margin:0 0 16px}
.pie-sitio ul{list-style:none;margin:0;padding:0}
.pie-sitio li+li{margin-top:9px}
.pie-sitio a{color:#DCE4EA}
.pie-sitio a:hover{color:#8FD3C8}
.pie-marca{display:flex;align-items:center;gap:14px}
.pie-marca img{height:56px;filter:brightness(0) invert(1);opacity:.9}
.pie-marca b{font-family:var(--marca);font-style:italic;font-size:1.5rem;color:var(--blanco)}
.pie-sitio .desc{margin-top:18px;max-width:36ch;line-height:1.7}
.pie-base{margin-top:56px;border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:transform .2s}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

/* ---------- Aparición suave ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.rv.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.entra,.sello,.hero-foto img{animation:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .procs{grid-template-columns:repeat(2,1fr)}
  .razones,.procs.procs-3{grid-template-columns:repeat(2,1fr)}
  .medios ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sedes{grid-template-columns:repeat(2,1fr)}
  .incluye{grid-template-columns:repeat(2,1fr)}
  .pie-grid{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
}
/* Barra superior: todas las secciones visibles; se compacta en pantallas medianas */
.btn .corto{display:none}
@media (max-width:1280px){
  .menu{gap:20px}
  .menu a{font-size:.84rem}
  .nav .btn{padding:10px 18px}
}
@media (max-width:1120px){
  .nav{gap:14px}
  .menu{gap:14px}
  .menu a{font-size:.8rem}
  .marca .txt small{display:none}
  .marca img{height:38px}
  .nav .btn .largo{display:none}
  .nav .btn .corto{display:inline}
  .nav .btn{padding:9px 16px;font-size:.8rem}
}
/* Menú lateral (☰) solo en celulares y tablets pequeñas */
@media (max-width:960px){
  .toggle{display:block}
  .menu{position:fixed;top:78px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--marfil);border-bottom:1px solid var(--linea);padding:8px 32px 20px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility .25s;z-index:40;box-shadow:0 20px 40px -30px rgba(7,30,51,.5)}
  .menu.abierto{transform:none;opacity:1;visibility:visible}
  .menu a{padding:14px 0;width:100%;border-bottom:1px solid var(--linea);font-size:1rem}
  .menu a[aria-current="page"]::after{display:none}
}
.menu a{white-space:nowrap}
.menu{gap:22px}
.menu a{font-size:.86rem}
.marca .txt b,.marca .txt small,.nav .btn{white-space:nowrap}
@media (max-width:900px){
  .wrap{padding:0 20px}
  section{padding:72px 0}
  .toggle{display:block}
  .menu{position:fixed;top:78px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--marfil);border-bottom:1px solid var(--linea);padding:8px 20px 20px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility .25s;z-index:40}
  .menu.abierto{transform:none;opacity:1;visibility:visible}
  .menu a{padding:14px 0;width:100%;border-bottom:1px solid var(--linea);font-size:1rem}
  .menu a[aria-current="page"]::after{display:none}
  .nav > .btn{display:none}
  .hero .wrap,.split,.split.izq,.page-head-grid,.siguiente .wrap,.contacto-grid,.bloque{grid-template-columns:1fr;gap:40px}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifras > div:nth-child(3){padding-left:0;border-left:0}
  .cifras > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .casos{grid-template-columns:1fr}
  .franja .wrap{grid-template-columns:1fr 1fr;justify-content:stretch}
  .hero-visual{max-width:460px;margin:0 auto;width:100%;order:-1}
  .hero .hero-foto{aspect-ratio:1/1}
  .hero .hero-foto img{object-position:center 25%}
  .hero .wrap{padding-top:28px;gap:28px}
  .sello-a{left:12px;bottom:18px}
  .sello-b{right:12px;top:18px}
  .foto-acento::before{display:none}
  .page-head.con-foto{min-height:0;padding:0 0 56px}
  .con-foto .fondo{position:relative;height:auto;aspect-ratio:2048/832;object-position:center}
  .con-foto::before{display:none}
  .con-foto .miga{margin-top:20px}
  .con-foto .texto-foto{margin-left:0;max-width:none;padding-top:4px}
  .foto-ciudad .fondo{aspect-ratio:4/3;object-position:62% 40%}
}
@media (max-width:560px){
  .procs,.procs.procs-3,.sedes,.incluye,.pie-grid,.razones,.socios{grid-template-columns:1fr}
  .cinta-grupo{gap:52px;padding-right:52px}
  .cinta-grupo img{max-height:44px;max-width:150px}
  .video-espacio{aspect-ratio:4/3}
  .medios ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .medios li{height:64px;padding:10px 10px;gap:7px}
  .medios li span{font-size:.78rem}
  .medios li svg{width:34px;height:24px}
  .medios li img{max-height:22px}
  .medios li img.alto{max-height:34px}
  .hito{grid-template-columns:1fr;gap:6px}
  .franja .wrap{gap:14px 18px;padding-top:20px;padding-bottom:20px;font-size:.82rem}
  .cifras .v{font-size:1.5rem}
  .sello{padding:9px 12px;font-size:.72rem;gap:9px}
  .sello b{font-size:.78rem}
  .sello svg{width:24px;height:24px}
  .datos li{grid-template-columns:1fr;gap:4px}
  .marca .txt small{display:none}
  .marca img{height:38px}
  .galeria{gap:10px}
}

/* =====================================================================
   v14 — Refinamiento de interfaz, entrevista, caso de éxito y modal de video
   ===================================================================== */

/* ---------- Base: selección, foco, titulares ---------- */
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.entrevista :focus-visible,.siguiente :focus-visible,.pie-sitio :focus-visible,.vmodal :focus-visible{outline-color:var(--menta)}
h1,h2{letter-spacing:-.015em}
html.sin-scroll{overflow:hidden}
.salto{position:absolute;left:16px;top:-64px;z-index:100;background:var(--azul);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.85rem;transition:top .2s ease}
.salto:focus{top:12px;color:#fff}
.progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--teal),var(--menta))}

/* ---------- Botones y enlaces: microinteracciones ---------- */
.btn{transition:transform .28s var(--ease),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .28s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primario{box-shadow:0 12px 26px -16px rgba(19,137,124,.95)}
.btn-primario:hover{box-shadow:0 18px 32px -16px rgba(19,137,124,1)}
.btn-azul:hover{box-shadow:0 18px 32px -18px rgba(13,79,134,.9)}
.btn-linea:hover{background:rgba(13,79,134,.04)}
.btn-linea.claro:hover{background:rgba(255,255,255,.08)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.toggle{border-radius:50%;transition:background .2s ease}
.toggle:hover{background:rgba(13,79,134,.07)}
.wa-flotante{transition:transform .28s var(--ease),box-shadow .28s ease}
.wa-flotante::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:onda 2.8s ease-out infinite;pointer-events:none}
.wa-flotante:hover{box-shadow:0 18px 36px -10px rgba(37,211,102,.6)}
@keyframes onda{from{transform:scale(1);opacity:.75}to{transform:scale(1.7);opacity:0}}

/* ---------- Tarjetas de procedimiento con icono ---------- */
.proc{transition:border-color .3s ease,transform .35s var(--ease),box-shadow .35s ease}
.proc:hover{transform:translateY(-5px)}
.proc-cab{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.proc .ico{width:40px;height:40px;fill:none;stroke:var(--teal);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.proc:hover .ico{transform:translateY(-3px) scale(1.06)}
.proc.destacado .ico{stroke:var(--menta)}
.proc .ir{margin-top:20px;font-size:.82rem;font-weight:700;color:var(--azul);display:inline-flex;gap:7px;align-items:center}
.proc .ir::after{content:"→";transition:transform .28s var(--ease)}
.proc:hover .ir::after{transform:translateX(5px)}
.proc.destacado .ir{color:#fff}
.sede{transition:background .3s ease}
.sede:hover{background:#FAFCFB}
.sede h3{transition:color .3s ease}
.sede:hover h3{color:var(--azul)}

/* ---------- Logos institucionales en la trayectoria ---------- */
.hito.con-logo{grid-template-columns:150px 1fr auto;align-items:center}
.hito.con-logo .cuando{align-self:start}
.hito-logo{flex:none;width:96px;height:96px;display:grid;place-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-l);padding:12px;transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease}
.hito-logo.ancho{width:190px;height:76px;padding:14px 18px}
.hito-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hito.con-logo:hover .hito-logo{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--teal)}
@media (max-width:560px){
  .hito.con-logo{grid-template-columns:1fr auto;gap:6px 16px}
  .hito.con-logo .cuando{grid-column:1 / -1}
  .hito-logo{width:72px;height:72px;padding:9px}
  .hito-logo.ancho{width:120px;height:56px;padding:9px 12px}
}

/* ---------- Enlace "ver entrevista" del hero ---------- */
.ver-video{display:inline-flex;align-items:center;gap:13px;margin-top:28px;background:none;border:0;padding:0;color:#E7EEF3;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left}
.ver-video i{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background .3s ease,border-color .3s ease,transform .3s var(--ease)}
.ver-video i::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ver-video:hover i{background:var(--teal);border-color:var(--teal);transform:scale(1.08)}
.ver-video span{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .3s ease}
.ver-video:hover span{border-color:var(--menta)}

/* ---------- Póster de video (entrevista y testimonio) ---------- */
.video-poster{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;border-radius:var(--radio-l);overflow:hidden;background:var(--noche);aspect-ratio:16/9;color:#fff;font:inherit;text-align:left;isolation:isolate;box-shadow:0 44px 80px -44px rgba(0,0,0,.75);transition:transform .5s var(--ease),box-shadow .5s ease}
.video-poster.vertical{aspect-ratio:9/16}
.video-poster:hover{transform:translateY(-4px)}
.video-poster > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.video-poster:hover > img{transform:scale(1.05)}
.video-poster::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,30,51,0) 48%,rgba(7,30,51,.88) 100%)}
/* En la portada horizontal el botón va a un lado para no tapar el rostro */
.video-poster:not(.vertical) .vp-play{left:22%}
.vp-play{position:absolute;left:50%;top:50%;z-index:2;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:transform .4s var(--ease),background .35s ease,border-color .35s ease}
.vp-play::before{content:"";border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.vp-play::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.65);animation:onda 2.6s ease-out infinite}
.video-poster:hover .vp-play{transform:scale(1.1);background:var(--teal);border-color:var(--teal)}
.vp-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.vp-pie b{display:block;font-family:var(--marca);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--menta);margin-bottom:4px}
.vp-pie span{font-family:var(--serif);font-size:1.12rem;line-height:1.25}
.vp-chip{flex:none;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;white-space:nowrap}
.vp-chip:empty{display:none}
/* Póster sin fotografía: fondo de marca, sin imagen de paciente */
.vp-vacio{position:absolute;inset:0;background:radial-gradient(120% 70% at 80% 0%,rgba(19,137,124,.5),transparent 60%),linear-gradient(165deg,var(--azul) 0%,var(--noche) 100%)}
.vp-vacio img{position:absolute;right:-18%;top:6%;width:90%;opacity:.08;filter:brightness(0) invert(1)}
.vp-vacio::after{content:"“";position:absolute;left:24px;top:8px;font-family:var(--serif);font-size:7rem;line-height:1;color:var(--menta);opacity:.55}

/* ---------- Sección entrevista ---------- */
.entrevista{background:radial-gradient(720px 440px at 10% 0%,rgba(19,137,124,.3),transparent 65%),linear-gradient(170deg,var(--azul-profundo),var(--noche));color:#fff;position:relative;overflow:hidden}
.entrevista-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:center}
.entrevista h2{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);margin:12px 0 20px}
.entrevista h2 em{color:var(--menta)}
.entrevista p{color:#C9D6E0}
.temas{list-style:none;margin:30px 0 34px;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.temas li{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#E7EEF3;font-size:.95rem;transition:padding-left .35s var(--ease)}
.temas li:hover{padding-left:8px}
.temas li span{font-family:var(--marca);font-size:.74rem;letter-spacing:.14em;color:var(--menta)}
.entrevista.clara{background:var(--marfil);color:var(--tinta);border-bottom:1px solid var(--linea)}
.entrevista.clara h2{color:var(--tinta)}
.entrevista.clara h2 em{color:var(--teal)}
.entrevista.clara p{color:var(--tinta-suave)}
.entrevista.clara .temas,.entrevista.clara .temas li{border-color:var(--linea)}
.entrevista.clara .temas li{color:var(--tinta)}
.entrevista.clara .temas li span{color:var(--teal)}
.entrevista.clara .video-poster{box-shadow:var(--sombra)}

/* ---------- Caso de éxito (testimonio) ---------- */
.testimonio{background:linear-gradient(180deg,var(--blanco),var(--marfil));border-bottom:1px solid var(--linea)}
.testimonio-tarjeta{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:80px;align-items:center}
.testimonio-marco{position:relative}
.testimonio-marco::before{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid var(--teal);border-radius:var(--radio-l)}
.testimonio .video-poster{box-shadow:var(--sombra)}
.testimonio h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:12px 0 18px}
.testimonio .lede{font-size:1.05rem}
.momentos{list-style:none;margin:32px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.momentos li{border-top:2px solid var(--teal);padding-top:14px}
.momentos b{display:block;font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--tinta)}
.momentos span{display:block;margin-top:4px;font-size:.86rem;color:var(--tinta-suave);line-height:1.5}
.garantias{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.garantias li{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--teal-oscuro);background:var(--teal-claro);border-radius:999px;padding:6px 14px}
.garantias svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.testimonio .ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn .tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.testimonio .aviso{margin-top:30px}

/* ---------- Modal de video ---------- */
.vmodal{border:0;padding:20px;margin:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;place-items:center;overflow:hidden}
.vmodal[open]{display:grid}
.vmodal::backdrop{background:rgba(4,16,28,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:vm-fondo .35s ease both}
.vmodal-caja{width:min(1040px,100%,calc((100dvh - 130px) * 16 / 9));animation:vm-entra .5s var(--ease) both}
.vmodal.vertical .vmodal-caja{width:min(420px,100%,calc((100dvh - 130px) * 9 / 16))}
.vmodal-cab{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;margin-bottom:14px}
.vmodal-cab p{font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.vmodal-cerrar{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s ease,color .25s ease,transform .35s var(--ease)}
.vmodal-cerrar:hover{background:#fff;color:var(--noche);transform:rotate(90deg)}
.vmodal-cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vmodal-marco{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radio-l);overflow:hidden;box-shadow:0 50px 100px -30px #000}
.vmodal.vertical .vmodal-marco{aspect-ratio:9/16}
.vmodal-marco iframe,.vmodal-marco video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vmodal-pronto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;color:#fff;background:radial-gradient(90% 70% at 50% 0%,rgba(19,137,124,.4),transparent 65%),linear-gradient(170deg,var(--azul-profundo),var(--noche))}
.vmodal-pronto img{width:64px;filter:brightness(0) invert(1);opacity:.85}
.vmodal-pronto h3{color:#fff;font-size:1.5rem}
.vmodal-pronto p{color:#C9D6E0;font-size:.95rem;max-width:36ch}
@keyframes vm-entra{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vm-fondo{from{opacity:0}to{opacity:1}}

/* ---------- Responsive de lo nuevo ---------- */
@media (max-width:960px){
  .menu a::after{display:none}
}
@media (max-width:900px){
  .entrevista-grid,.testimonio-tarjeta{grid-template-columns:1fr;gap:44px}
  .entrevista-grid .video-poster{order:-1}
  .testimonio-marco{max-width:300px;margin:0 auto;width:100%}
  .testimonio-marco::before{inset:14px -14px -14px 14px}
  .vp-play{width:70px;height:70px;margin:-35px 0 0 -35px}
  .vp-play::before{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}
  .wa-flotante{right:16px;bottom:16px}
}
@media (max-width:560px){
  .momentos{grid-template-columns:1fr;gap:16px}
  .video-poster:not(.vertical) .vp-play{top:38%;left:20%}
  .vp-pie{padding:16px 16px}
  .vp-pie span{font-size:1rem}
  .hero .ctas .btn,.siguiente .ctas .btn,.testimonio .ctas .btn{width:100%;justify-content:center}
  .vmodal{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .vp-play::after,.wa-flotante::before,.vmodal-caja,.vmodal::backdrop{animation:none}
  .video-poster,.video-poster > img,.btn,.proc{transition:none}
}