/* ══════════════════════════════════════════════════════════════════
   KETER CLINIC · Landing v2 — estilos
   Movil primero. Los @media suben desde 390px, nunca al reves.
   Los colores salen todos de las variables de abajo: para cambiar la
   paleta se tocan estas diez lineas y nada mas. Ver PALETA.md.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --azul:#1668B8;
  --azul-claro:#3D93DC;
  --azul-hondo:#0E2233;
  --azul-noche:#071A2B;
  --cta:#DB392D;                 /* 3% mas oscuro que el original: con texto blanco
                                    a 12-14px, #E23B2E se quedaba en 4.29 y el minimo
                                    es 4.5. A ojo son el mismo rojo. */
  --gris-fondo:#F1F4F7;
  --linea:#DCE4EB;
  --texto:#10202E;
  --texto-suave:#5A6B78;
  --blanco:#FFFFFF;

  --oro:#B8912F;                 /* solo para la franja de promo en dorado */
  /* Dos roles: Archivo pesa y manda en titulares (es la grotesca de sus
     creatividades); Hanken Grotesk lee comodo en texto e interfaz. */
  /* --kc-display y no --display: Elementor define --display:flex en sus
     contenedores y, dentro de WordPress, los titulares heredaban "flex"
     como fuente y salian en serif (Times). Detectado el 16/9/2026. */
  --kc-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ancho:1140px;
  --radio:12px;
  --sombra:0 14px 38px rgba(14,34,51,.16);
}

/* ── Base ──────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--texto);background:var(--blanco);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;                       /* red de seguridad, no excusa */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px}

.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 16px}
.ico{width:24px;height:24px;color:currentColor;flex:none}

/* Titulares de seccion */
.cab{text-align:center;margin-bottom:26px}
.cab .sup{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul)}
.cab h2{font-family:var(--kc-display);font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-top:7px;color:var(--azul-hondo)}
.cab h2 span{color:var(--azul)}
.cab p{color:var(--texto-suave);font-size:15px;margin-top:9px}

section{padding:44px 0}
.gris{background:var(--gris-fondo)}

/* ── Franja de promocion ───────────────────────────────────────── */
.promo{display:none;background:var(--cta);color:#fff;text-align:center;padding:9px 16px;font-size:13.5px}
.promo.rojo{background:var(--cta)}
.promo.azul{background:var(--azul-hondo)}
.promo.oro {background:var(--oro)}
.promo.visible{display:block}
.promo b{font-weight:800}
.promo a{text-decoration:underline;text-underline-offset:3px;font-weight:700;white-space:nowrap}

/* ── Cabecera ──────────────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
          backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--linea)}
.cabecera .env{display:flex;align-items:center;justify-content:space-between;height:66px}
/* Logo real de la clinica. El PNG venia con fondo blanco solido: se le
   calculo el alfa y se recorto al contenido (ver scratchpad/logo.mjs). */
.marca{display:flex;align-items:center}
/* 52px y no menos: en el logotipo la figura ocupa todo el alto y el
   texto solo un tercio, asi que por debajo de esto "KETER CLINIC" no
   se lee. */
.marca img{height:52px;width:auto}
.acciones{display:flex;align-items:center;gap:8px}
.menu-btn{width:38px;height:38px;border:0;border-radius:8px;background:var(--azul);color:#fff;
          display:flex;align-items:center;justify-content:center;cursor:pointer}
/* Telefono: en movil solo el icono (el numero no cabe), en escritorio con numero */
.tel-btn{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border-radius:8px;
         border:1.5px solid var(--linea);color:var(--azul);font-weight:700;font-size:14px}
.tel-btn .ico{width:18px;height:18px}
.tel-btn span{display:none}
.tel-btn:hover{border-color:var(--azul);background:rgba(22,104,184,.06)}
.o-llama{text-align:center;font-size:12px;color:var(--texto-suave);margin-top:8px;
         padding-top:8px;border-top:1px solid var(--linea)}
.o-llama a{color:var(--azul);font-weight:700;white-space:nowrap}
.nav{display:none}
.nav a{display:block;padding:13px 0;border-bottom:1px solid var(--linea);font-weight:600}
.nav.abierto{display:block;position:absolute;top:66px;left:0;right:0;background:#fff;
             padding:6px 16px 16px;box-shadow:var(--sombra)}
.nav .nav-cta{color:var(--azul);border-bottom:0}

/* ── Portada ───────────────────────────────────────────────────── */
/* EN MOVIL la foto NO va de fondo: es una banda de proporcion fija
   arriba, con el texto y el formulario debajo sobre blanco.
   Por que: de fondo, "cover" recorta segun el alto del telefono, y en
   pantallas altas acercaba tanto la camara que solo se veia su cara.
   Con proporcion fija el Dr. se ve igual en cualquier movil.
   En escritorio (mas abajo) si vuelve a ser fondo: alli sobra ancho. */
/* padding:0 porque .hero es un <section> y heredaba los 44px de arriba,
   que dejaban una banda blanca entre la cabecera y la foto. */
.hero{position:relative;background:var(--blanco);padding:0}
.hero-foto{position:relative;display:block;width:100%;height:auto;
           aspect-ratio:4/3;object-fit:cover;object-position:center}
/* Velo para que el titular se lea sobre la foto. RADIAL desde la esquina
   superior izquierda, no una banda horizontal: asi cubre justo donde va
   el texto y se apaga antes de llegar al Dr., que queda limpio y sin ese
   lavado blanco sobre la cabeza. */
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:56vw;
  z-index:2;pointer-events:none;
  background:radial-gradient(88% 70% at 0% 0%,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.90) 34%,
    rgba(255,255,255,.55) 56%,
    rgba(255,255,255,.15) 74%,
    rgba(255,255,255,0)   88%)}
/* SIN position en movil: si .env estuviera posicionado, el titular
   absoluto se anclaria a el (que empieza debajo de la foto) en vez de
   a .hero, y caeria encima de CONSULTA GRATIS. En escritorio se le
   devuelve el position:relative, que alli si hace falta. */
.hero .env{padding-top:22px;padding-bottom:24px}
/* Franja del lema. Bloque de color solido arriba del todo: es lo que
   hace que la pagina no arranque en blanco y se reconozca la marca. */
.lema{background:var(--azul);color:#fff;text-align:center;padding:10px 16px;
      font-size:14px;line-height:1.3;letter-spacing:.01em}
.lema b{font-weight:800}
.lema:has(#lema:empty){display:none}

/* EN MOVIL el titular va SOBRE la foto, en el aire de arriba (techo y
   pared, que son blancos): asi el hueco no se desaprovecha y debajo de
   la foto queda solo CONSULTA GRATIS. Absoluto para no ocupar sitio en
   el flujo; en escritorio vuelve a su columna (position:static). */
/* Sin max-width en movil: acotado a 16ch caia en 3 lineas y la ultima
   se salia del velo, donde el azul perdia contraste (fallaba el 34%).
   A ancho completo entra en 2 y se queda en la zona limpia. */
.titular{position:absolute;top:16px;left:16px;right:16px;z-index:4;
         font-family:var(--kc-display);font-size:26px;font-weight:800;line-height:1.15;
         letter-spacing:-.02em;color:var(--azul-hondo);text-wrap:balance}
/* Azul mas oscuro SOLO aqui: el azul de marca es un tono medio y sobre
   una foto no llega a 4.5 de contraste sin un velo brutal. Este si.
   En escritorio, donde el titular va sobre blanco, vuelve al de marca. */
.titular b{color:#0C4A80;font-weight:800}
.titular:has(#titular:empty){display:none}

/* Fuera de la foto ya no hay problema de contraste: el titular puede
   ir en una sola linea y a mas cuerpo. */
.hero h1{font-family:var(--kc-display);font-weight:800;letter-spacing:-.03em;line-height:.94}
.hero h1 .l1{display:inline;font-size:30px;letter-spacing:-.02em;color:var(--azul-hondo)}
.hero h1 .l2{display:inline;font-size:30px;color:var(--azul);margin-left:.22em}
.hero .entrada{margin-top:8px;font-size:14.5px;color:#33454f;max-width:34ch}
.hero .entrada b{color:var(--azul);font-weight:700}

/* Tarjeta del formulario */
/* Sin filete de acento arriba: es un tic de plantilla. El peso se lo da
   la sombra y una esquina superior izquierda recta, que ancla la tarjeta
   al borde del texto en vez de flotar redondeada por los cuatro lados. */
.tarjeta{background:#fff;padding:14px 13px;margin-top:0;
         border-radius:0 var(--radio) var(--radio) var(--radio);
         box-shadow:0 24px 52px rgba(14,34,51,.26), 0 2px 8px rgba(14,34,51,.10)}
.campo{position:relative;margin-bottom:6px}
.campo .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
            width:18px;height:18px;color:var(--azul);pointer-events:none}
.campo input,.campo select{
  width:100%;padding:10px 12px 10px 38px;border:1.5px solid var(--linea);border-radius:8px;
  background:#fff;font-size:16px;      /* 16px o iOS hace zoom al enfocar */
  appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.campo select{color:var(--texto)}
.campo select:invalid{color:#93a3af}
.campo input::placeholder{color:#93a3af}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(22,104,184,.16)}
.campo.mal input,.campo.mal select{border-color:var(--cta)}
.campo .err{display:none;color:var(--cta);font-size:12px;margin-top:4px;padding-left:2px}
.campo.mal .err{display:block}
.campo .flecha{position:absolute;right:14px;top:50%;transform:translateY(-50%);
               pointer-events:none;color:var(--texto-suave);font-size:11px}

/* Presencial / videollamada */
.modo{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.modo label{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px solid var(--linea);border-radius:8px;padding:9px 6px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--texto-suave);transition:.15s;text-align:center}
.modo input{position:absolute;opacity:0;width:0;height:0}
.modo label:has(input:checked){border-color:var(--azul);background:rgba(22,104,184,.07);color:var(--azul)}
.modo label:has(input:focus-visible){outline:3px solid var(--azul-claro);outline-offset:2px}

.boton{display:block;width:100%;border:0;border-radius:8px;background:var(--azul);color:#fff;
       font-family:var(--kc-display);font-weight:800;font-size:13.5px;letter-spacing:.03em;padding:13px;cursor:pointer;
       transition:background .15s}
.boton:hover{background:#12589c}
.boton.rojo{background:var(--cta)}
.boton.rojo:hover{background:#C02D22}
.boton[disabled]{opacity:.6;cursor:progress}
.seguro{display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:11px;color:var(--texto-suave);margin-top:8px}
.seguro .ico{width:13px;height:13px}

/* Estado de gracias */
.gracias{display:none;text-align:center;padding:20px 6px}
.gracias.visible{display:block}
.gracias .marca-ok{width:52px;height:52px;border-radius:50%;background:var(--gris-fondo);
                   display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--azul)}
.gracias h3{font-size:19px;font-weight:800;color:var(--azul-hondo)}
.gracias p{color:var(--texto-suave);font-size:14.5px;margin-top:6px}

/* ── Barra de confianza ──────────────────────────────────────────
   Montada como la de Gregory: icono a la IZQUIERDA y texto a la derecha,
   con una linea vertical entre elementos. Antes iba el icono arriba y el
   texto centrado debajo, que es lo que no cuadraba con su diseno.
   En movil van de dos en dos: a 390px cinco en fila dejaban la letra en
   7px, y con el icono al lado hace falta el doble de ancho por elemento. */
.confianza{background:var(--azul);color:#fff}
.confianza .env{display:flex;flex-wrap:wrap;justify-content:center;
                gap:16px 0;padding:20px 8px}
.confianza .it{flex:0 0 50%;display:flex;align-items:center;gap:9px;
               padding:0 10px;text-align:left}
/* La linea separadora, como la suya. En la primera de cada fila no va:
   quedaria un palo suelto pegado al borde. */
.confianza .it{border-left:1px solid rgba(255,255,255,.28)}
.confianza .it:nth-child(odd){border-left:0}
.confianza .ico{width:34px;height:34px;flex:none}
.confianza .txt{min-width:0}
.confianza .f{font-family:var(--kc-display);font-size:13px;font-weight:800;line-height:1.15;
              text-transform:uppercase;letter-spacing:.01em}
/* #daeaf7 y no #c5ddf2: el anterior se quedaba en 4.05 de contraste sobre
   el azul de marca, por debajo del minimo de 4.5, en el 100% del texto.
   Este es el mismo tono aclarado un 37%, el minimo para llegar a 4.61. */
.confianza .n{font-size:9.5px;color:#daeaf7;line-height:1.25;text-transform:uppercase;
              letter-spacing:.04em;margin-top:2px}

/* ── Antes y despues ─────────────────────────────────────────────
   Diseno reconstruido en CSS, no una imagen: el texto no se pixela,
   se adapta al movil y cambiar una foto es editar contenido.js.
   Las fotos salen partidas de las piezas reales de la clinica. */
/* ── Carrusel ──────────────────────────────────────────────────
   Carril con anclaje. En movil el gesto de deslizar sale gratis y SIN
   JavaScript sigue siendo un scroll horizontal usable, que es la misma
   regla del resto del proyecto. */
.carrusel{position:relative}
.casos{display:flex;align-items:flex-start;gap:14px;
       overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
       scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
       transition:height .28s ease;
       scrollbar-width:none}          /* la barra sobra: ya estan puntos y flechas */
.casos::-webkit-scrollbar{display:none}
/* Se asoma un dedo de la siguiente tarjeta. Es la señal mas fuerte de que
   aquello se mueve, mas que cualquier texto. */
.caso{margin:0;flex:0 0 calc(100% - 34px);scroll-snap-align:center;
      border-radius:var(--radio);overflow:hidden;background:#fff;
      box-shadow:0 16px 40px rgba(14,34,51,.18)}
.carrusel.solo-una .caso{flex-basis:100%}
.carrusel.solo-una .mover,
.carrusel.solo-una .marcador,
.carrusel.solo-una .pista{display:none}
@media (prefers-reduced-motion:reduce){ .casos{scroll-behavior:auto;transition:none} }

/* Flechas. Van por encima del borde de la tarjeta, no dentro de la foto,
   para no tapar el resultado. */
.mover{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:3;
       width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
       background:var(--azul);color:#fff;box-shadow:0 4px 16px rgba(14,34,51,.34);
       display:flex;align-items:center;justify-content:center}
.mover svg{width:22px;height:22px}
.mover.ant{left:-6px}
.mover.sig{right:-6px}
.mover:disabled{opacity:.3;cursor:default}
.mover:hover:not(:disabled){background:var(--azul-hondo)}

/* Puntos y contador: el aviso de "hay mas". Los que son video llevan un
   triangulo dentro, asi "hay mas fotos Y VIDEOS" se ve, no se lee. */
.marcador{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.puntos{display:flex;gap:7px}
.puntos button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
               background:var(--linea);transition:background .2s,width .2s}
.puntos button.activo{background:var(--azul);width:22px;border-radius:5px}
.puntos button.es-video{position:relative;background:#B9C9D6}
.puntos button.es-video::after{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:4px solid #fff;border-top:3px solid transparent;
  border-bottom:3px solid transparent}
.puntos button.es-video.activo{background:var(--azul)}
.cuenta{font-family:var(--kc-display);font-weight:800;font-size:12px;color:var(--texto-suave);
        letter-spacing:.04em;min-width:32px}
.pista{text-align:center;font-size:12.5px;color:var(--texto-suave);margin-top:6px}

/* Tarjeta de video dentro del carrusel.
   Los reels son verticales 9:16 y el par de fotos es apaisado, asi que las
   dos tarjetas NUNCA van a medir lo mismo. Se asume: cada tarjeta con su
   alto (align-items abajo) en vez de estirarlas, que dejaba 164 px de hueco
   blanco debajo de las de fotos.
   A 3/4 se ve casi todo el encuadre del reel; a 1/1 se comia el rotulo con
   el nombre de la operacion, que es justo lo que hay que leer. */
.par.video{display:flex;justify-content:center;background:var(--azul-noche)}
.par.video video{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;background:#000}
/* El boton de play NO se ve: los videos arrancan solos al llegar a su
   tarjeta. Solo aparece si el navegador se niega (iOS con ahorro de
   bateria) o si el movil pide ahorro de datos. */
.par.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border:0;border-radius:50%;cursor:pointer;display:none;
  background:rgba(255,255,255,.94);color:var(--azul);
  box-shadow:0 6px 22px rgba(14,34,51,.4);
  align-items:center;justify-content:center}
.par.video .play svg{width:28px;height:28px;margin-left:3px}
.par.video.bloqueado .play{display:flex}
.et.video{position:absolute;top:10px;left:10px;font-family:var(--kc-display);font-size:11px;
  font-weight:800;letter-spacing:.08em;color:#fff;background:var(--azul);
  padding:5px 11px;border-radius:5px;box-shadow:0 2px 8px rgba(14,34,51,.28)}
.par{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea)}
/* SIN RECORTAR, ni aqui ni en escritorio. Las fotos se exportan con la franja
   entera y se muestran a su proporcion real, asi que se ven completas.
   Antes iban en caja cuadrada y ademas el CSS las recortaba a 3:2 en
   escritorio: entre las dos cosas se perdia hasta el 58% del alto. */
.par img{width:100%;height:auto;display:block}
/* Pastillas ANTES / DESPUES */
.par .et{position:absolute;top:10px;font-family:var(--kc-display);font-size:11px;font-weight:800;
         letter-spacing:.08em;color:#fff;background:var(--azul);padding:5px 11px;border-radius:5px;
         box-shadow:0 2px 8px rgba(14,34,51,.28)}
/* Las dos pastillas del MISMO azul: en la maqueta de Gregory lo son.
   La de DESPUES estaba en azul-hondo y cantaba al comparar. */
.par .et.antes{left:10px}
.par .et.despues{right:10px}
/* Disco con la doble flecha, justo en la costura de las dos fotos */
.par .flecha{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
             width:42px;height:42px;border-radius:50%;background:#fff;color:var(--azul);
             display:flex;align-items:center;justify-content:center;
             box-shadow:0 4px 14px rgba(14,34,51,.30)}
.par .flecha svg{width:19px;height:19px}
/* Barra azul del pie */
.pie-caso{background:var(--azul);color:#fff;padding:13px 14px;display:grid;gap:11px;font-size:13px}
.pie-caso .izq{line-height:1.35}
.pie-caso .izq b{display:block;font-family:var(--kc-display);font-weight:800;font-size:15px}
.pie-caso .der{display:flex;align-items:center;gap:12px;justify-content:space-between;
               border-top:1px solid rgba(255,255,255,.22);padding-top:11px}
.pie-caso .cta-txt{font-size:12px;line-height:1.3;color:#DCEDFB}
.pie-caso .cta-txt b{color:#fff;font-family:var(--kc-display);font-weight:800;font-size:13.5px}
.mini-cta{background:var(--cta);color:#fff;font-family:var(--kc-display);font-weight:800;
          font-size:12px;letter-spacing:.03em;padding:10px 16px;border-radius:7px;
          white-space:nowrap;flex:none}
.mini-cta:hover{background:#C02D22}
.aviso-resultados{font-size:12px;color:var(--texto-suave);text-align:center;margin-top:16px;
                  font-style:italic;max-width:44ch;margin-inline:auto;line-height:1.5}
.cierre-ad{text-align:center;margin-top:20px}
.cierre-ad .boton{max-width:320px;margin:0 auto}

/* ── Procedimientos ────────────────────────────────────────────── */
.procs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);
       border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.proc{background:#fff;padding:20px 12px;text-align:center}
.proc .ico{width:50px;height:50px;margin:0 auto 10px;color:var(--azul)}
.proc h3{font-family:var(--kc-display);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
         color:var(--azul-hondo);line-height:1.25}
.proc p{font-size:12.5px;color:var(--texto-suave);margin-top:6px;line-height:1.45}
.proc:last-child:nth-child(odd){grid-column:1/-1}

/* ── Video de cierre (justo antes del quirofano) ────────────────
   Es vertical 9:16, asi que lleva tope de alto: sin el, en escritorio
   se comeria la pantalla entera. */
.video-cierre{background:var(--gris-fondo);text-align:center}
.video-cierre h2{font-family:var(--kc-display);font-size:22px;font-weight:800;
                 color:var(--azul-hondo);line-height:1.15;text-wrap:balance}
.video-cierre .marco{position:relative;margin:18px auto 0;width:100%;max-width:300px;
  border-radius:var(--radio);overflow:hidden;background:#000;
  box-shadow:0 18px 44px rgba(14,34,51,.24)}
.video-cierre video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;
                    max-height:66vh}
.video-cierre .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border:0;border-radius:50%;cursor:pointer;display:none;
  background:rgba(255,255,255,.94);color:var(--azul);
  box-shadow:0 6px 22px rgba(14,34,51,.4);
  align-items:center;justify-content:center}
.video-cierre .play svg{width:28px;height:28px;margin-left:3px}
/* Solo aparece cuando NO ha podido arrancar solo (ahorro de datos, o el
   sistema pidiendo menos animacion). */
.video-cierre.manual .play{display:flex}
.video-cierre p{font-size:13px;color:var(--texto-suave);margin-top:12px}

/* ── Tu seguridad (bloque oscuro) ──────────────────────────────── */
.seguridad{position:relative;overflow:hidden;background:var(--azul-noche);padding:0}
/* EN MOVIL la foto NO va de fondo, igual que en la portada: banda 16/9 propia
   arriba y el texto debajo. De fondo pasaban dos cosas, las dos malas:
   el alto del movil la recortaba por donde queria, y el velo (que estaba al
   86-94%) la dejaba practicamente negra. Gregory la quiere viendose. */
.seguridad .foto{position:relative}
/* La imagen es 16/9 y la banda tambien, asi que no recorta nada: se ve
   entera, lamparas y mesa incluidas. */
.seguridad .foto img{position:relative;display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;object-position:center}
/* El velo ya no es una cortina plana: funde solo el ultimo tramo hacia el
   azul noche para que no quede un corte en seco con el panel de texto.
   Empieza tarde a proposito: la mesa de operaciones esta en la mitad
   inferior y es lo que Gregory quiere que se vea. */
.seguridad .velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,26,43,0) 64%,rgba(7,26,43,.35) 86%,var(--azul-noche) 100%)}
.seguridad .env{position:relative;z-index:2;padding-top:28px;padding-bottom:44px}
.seguridad h2{font-family:var(--kc-display);font-size:24px;font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.01em}
.seguridad h2 span{display:block;color:var(--azul-claro)}
.seguridad p{color:#b9cbd9;font-size:14.5px;margin-top:12px;max-width:46ch}
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:26px}
.pilar{display:flex;gap:10px;align-items:flex-start}
.pilar .ico{width:22px;height:22px;color:var(--azul-claro);margin-top:1px}
.pilar span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
            color:#dbe8f2;line-height:1.3}

/* ── Cierre ────────────────────────────────────────────────────── */
.cierre{text-align:center}
.cierre h2{font-family:var(--kc-display);font-size:25px;font-weight:800;color:var(--azul-hondo);letter-spacing:-.02em;line-height:1.15}
.cierre h2 span{color:var(--azul)}
.cierre p{color:var(--texto-suave);font-size:15px;margin:10px auto 20px;max-width:40ch}
.cierre .boton{max-width:340px;margin:0 auto}

/* ── Pie ───────────────────────────────────────────────────────── */
.pie{background:var(--azul-hondo);color:#b9cbd9;font-size:14px;padding:34px 0 24px}
.marca-pie{height:64px;width:auto;opacity:.95}
/* Nombre y cargo en el pie. Hernan Perez es COORDINADOR MEDICO, no el
   cirujano: aqui ponia "dirigida por el Dr." y era falso. */
.pie .cargo{margin-top:14px;color:#fff;font-family:var(--kc-display);font-weight:800;
            font-size:14px;line-height:1.35}
.pie .cargo span{display:block;font-family:var(--sans);font-weight:600;font-size:12.5px;
                 color:#b9cbd9;letter-spacing:.02em}
.pie h4{color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
        font-weight:700;margin-bottom:9px}
.pie .cols{display:grid;gap:24px}
.pie a:hover{color:#fff}
.pie .redes{display:flex;gap:14px;margin-top:4px}
.pie .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;
            font-size:11.5px;color:#8ba6bd;display:grid;gap:8px}
.pie .descargo{font-size:11px;line-height:1.5;color:#7e99b0}

/* ── Escritorio ────────────────────────────────────────────────── */
@media (min-width:860px){
  .hero::before{background:linear-gradient(95deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.88) 26%,
    rgba(255,255,255,.45) 40%,
    rgba(255,255,255,0)   56%)}
  .hero-foto{object-position:center center}
  body{font-size:17px}
  section{padding:76px 0}
  .env{padding:0 24px}
  .cabecera .env{height:78px}
  .marca img{height:58px}
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:26px}
  .nav a{padding:0;border:0;font-size:15px}
  .nav .nav-cta{background:var(--azul);color:#fff;padding:11px 20px;border-radius:8px}
  .nav .nav-cta:hover{background:#12589c}

  /* El Dr. queda en el centro de la foto 16:9, asi que el texto se
     va a la izquierda y la tarjeta al extremo derecho: ninguno de los
     dos le tapa la cara. El hero se limita en alto para que la foto
     no se estire y le agrande la cabeza. */
  /* Alto que crece con el ancho (38vw), con suelo de 600px y techo de 78vh.
     Con 600px fijos, en pantallas de 2000-2500px la foto se ampliaba tanto
     que del Dr. solo quedaba cabeza y pecho (lo vio Rodolfo el 16/9/2026).
     Hasta 1580px de ancho sigue siendo 600px, como antes. */
  .hero{min-height:max(600px, min(38vw, 78vh));max-height:78vh;overflow:hidden;background:var(--gris-fondo)}
  /* Anclada al 15% y no al centro: en pantallas anchas la portada mide
     600px y la foto se recorta mucho en alto; centrada, a 1920px el
     recorte se comia la coronilla del Dr. Asi recorta mas por abajo.
     15% va con la foto de la recepcion de 2026 (coronilla al 14% de la
     imagen): deja la cabeza a unos 80px del borde de 1024 a 1920. */
  .hero-foto{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
             object-position:center 15%;z-index:0}
  /* height:auto porque en movil el velo lleva height:56vw, y con inset:0
     solo no se anula: a 1024px medía 573px en una portada de 600 y
     dejaba una franja sin velo abajo del todo. */
  .hero::before{content:"";position:absolute;inset:0;height:auto;z-index:1;pointer-events:none;
    background:linear-gradient(95deg,
      rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 26%,
      rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 56%)}
  .hero h1 .l1,.hero h1 .l2{display:block;margin-left:0}
  .hero h1 .l1{font-size:52px}
  .hero h1 .l2{font-size:82px}
  .hero .env{position:relative;z-index:3;
             display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:center;
             padding-top:56px;padding-bottom:56px}
  .lema{font-size:16px;padding:12px 24px}
  .titular{position:static;font-size:29px;max-width:14ch;margin-bottom:18px}
  .titular b{color:var(--azul)}
  .titular b{display:inline}
  .hero h1{max-width:11ch}
  .hero h1 .l1{font-size:52px}
  .hero h1 .l2{font-size:82px}
  .hero .entrada{font-size:18px;max-width:34ch;margin-top:16px}
  .tarjeta{margin-top:0;padding:24px;justify-self:end;width:100%}

  .tel-btn span{display:inline}
  .casos{gap:24px}
  .caso{flex-basis:calc(100% - 56px)}    /* asoma mas, que aqui hay sitio */
  .mover.ant{left:10px}
  .mover.sig{right:10px}
  .mover{width:50px;height:50px}
  /* La tarjeta se limita en ancho: las fotos van completas y son verticales,
     asi que a ancho de contenido (1036px) el par pasaria de 900px de alto.
     A 520 el par mide unos 450, que es lo que cabe de un vistazo. */
  .caso{flex-basis:min(520px, calc(100% - 56px))}
  /* Con la tarjeta mas estrecha que el carril caben dos a la vez, y entonces
     la PRIMERA y la ULTIMA no pueden llegar al centro: el contador decia 1/5
     con la 2 en medio, y a la 5 no se llegaba nunca. Este relleno lateral les
     da sitio para centrarse. */
  .casos{padding-inline:max(0px, calc(50% - 260px))}
  .par.video video{width:auto;height:430px;aspect-ratio:9/16;object-fit:contain}
  /* La barra azul en UNA fila: texto | texto + boton. Ahora que el caso va a
     ancho completo, el texto puede crecer; con media anchura no cabia. */
  .pie-caso{grid-template-columns:1fr auto;align-items:center;padding:18px 22px;gap:24px;font-size:15px}
  .pie-caso .izq b{font-size:19px}
  .pie-caso .cta-txt{font-size:14px}
  .pie-caso .cta-txt b{font-size:16px}
  .mini-cta{font-size:14px;padding:13px 22px}
  .pie-caso .der{border-top:0;padding-top:0}
  .par .et{font-size:12px;padding:6px 13px}
  .par .flecha{width:52px;height:52px}
  .par .flecha svg{width:23px;height:23px}
  .cab h2{font-size:38px}
  .cab p{font-size:17px}
  .confianza .env{padding:24px 24px}
  /* En escritorio los cinco en fila, con separador entre todos menos el
     primero: es exactamente su barra. */
  .confianza .it{flex:0 0 20%;gap:12px;padding:2px 14px;border-left:1px solid rgba(255,255,255,.28)}
  .confianza .it:first-child{border-left:0}
  .confianza .it:nth-child(odd){border-left:1px solid rgba(255,255,255,.28)}
  .confianza .it:first-child{border-left:0}
  .confianza .ico{width:42px;height:42px}
  .confianza .f{font-size:16px}
  .confianza .n{font-size:11px}

  .procs{grid-template-columns:repeat(5,1fr)}
  .proc{padding:26px 14px}
  .proc:last-child:nth-child(odd){grid-column:auto}

  /* En escritorio SI se monta la composicion de la maqueta de Gregory:
     foto a la izquierda, texto a la derecha. Medido sobre su maqueta:
     la foto llega al 45% y funde a azul noche entre el 38% y el 48%. */
  .seguridad .foto{position:absolute;top:0;bottom:0;left:0;width:52%}
  .seguridad .foto img{position:absolute;inset:0;width:100%;height:100%;
                       aspect-ratio:auto;object-position:center}
  .seguridad .velo{background:linear-gradient(90deg,
    rgba(7,26,43,.30) 0%,rgba(7,26,43,.22) 55%,rgba(7,26,43,.85) 86%,var(--azul-noche) 100%)}
  .video-cierre h2{font-size:32px}
  .video-cierre .marco{max-width:360px}
  .seguridad .env{padding-top:82px;padding-bottom:82px;
                  display:grid;grid-template-columns:46% 1fr}
  .seguridad .env > div{grid-column:2}
  .seguridad h2{font-size:36px}
  .pilares{grid-template-columns:repeat(4,1fr);margin-top:34px}
  .cierre h2{font-size:38px}
  .pie .cols{grid-template-columns:1.6fr 1fr 1fr}
  .pie .legal{grid-template-columns:1fr auto;align-items:center}
}

/* ── Aparicion suave ─────────────────────────────────────────────
   OJO: se oculta SOLO si el JS esta vivo (la clase .js la pone
   main.js nada mas arrancar). Si el JS falla o tarda, el contenido
   se ve igual — nunca una seccion en blanco. */
html.js [data-revela]{opacity:0;transform:translateY(16px);
                      transition:opacity .6s ease,transform .6s ease}
html.js [data-revela].dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-revela]{opacity:1;transform:none;transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA DE GRACIAS (gracias.html) · 16/9/2026
   Tarjeta blanca sobre un fondo azul de marca (del azul al azul noche,
   con un brillo arriba a la izquierda), sello de "recibido" que se dibuja
   al entrar, barra de confianza y resultados reales. Mismas piezas que la
   portada: Archivo 800, esquina superior izquierda recta, pastillas azules.
   Movil primero; escritorio mas abajo.
   ══════════════════════════════════════════════════════════════════ */
.g-hero{position:relative;overflow:hidden;padding:26px 0 30px;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(61,147,220,.55) 0%, rgba(61,147,220,0) 60%),
    radial-gradient(70% 55% at 100% 100%, rgba(22,104,184,.45) 0%, rgba(22,104,184,0) 65%),
    linear-gradient(165deg, var(--azul) 0%, var(--azul-hondo) 62%, var(--azul-noche) 100%)}
/* Aro decorativo muy tenue detras de la tarjeta: da profundidad al azul */
.g-hero::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-200px;
  border-radius:50%;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 70px rgba(255,255,255,.03);
  pointer-events:none}

/* El recuadro */
.g-tarjeta{position:relative;background:#fff;overflow:hidden;
  border-radius:0 18px 18px 18px;
  box-shadow:0 34px 80px rgba(3,14,25,.50), 0 3px 10px rgba(3,14,25,.18)}
.g-cuerpo{padding:28px 20px 26px;text-align:center}

/* Sello: circulo que aparece + trazo del check + onda que se expande */
.g-sello{position:relative;width:74px;height:74px;margin:0 auto 14px}
.g-sello svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible}
.g-sello .c{fill:var(--azul);transform-box:fill-box;transform-origin:center;
  animation:g-pop .55s cubic-bezier(.2,1.5,.45,1) both}
.g-sello .v{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:g-trazo .45s ease-out .38s forwards}
.g-sello::before,.g-sello::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(22,104,184,.18);animation:g-onda 2.6s ease-out 1s infinite}
.g-sello::after{animation-delay:1.9s}
@keyframes g-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes g-trazo{to{stroke-dashoffset:0}}
@keyframes g-onda{0%{transform:scale(1);opacity:1}100%{transform:scale(1.9);opacity:0}}

.g-etiqueta{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul)}
.g-hero h1{font-family:var(--kc-display);font-weight:800;font-size:38px;line-height:1.02;
  letter-spacing:-.03em;color:var(--azul-hondo);margin-top:10px;text-wrap:balance}
.g-hero h1 b{display:block;font-size:23px;line-height:1.15;letter-spacing:-.02em;
  color:var(--azul);font-weight:800;margin-top:8px}
.g-mensaje{margin:14px auto 0;font-size:16px;color:#33454f;max-width:36ch}
.g-mensaje b{color:var(--azul);font-weight:700}

/* En movil la foto va DENTRO del recuadro, abajo, en una franja baja */
.g-foto{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:14px;
  background:var(--gris-fondo);border-top:1px solid var(--linea);text-align:left}
.g-foto img{width:92px;height:115px;object-fit:cover;object-position:center top}
.g-foto figcaption b{display:block;font-family:var(--kc-display);font-weight:800;font-size:16px;
  color:var(--azul-hondo);line-height:1.2}
.g-foto figcaption span{display:block;font-size:13px;color:var(--texto-suave);margin-top:3px}

/* Qué pasa ahora (fondo blanco: las tarjetas van en gris) */
.g-pasos{list-style:none;display:grid;gap:12px;max-width:980px;margin:0 auto}
.g-paso{display:flex;gap:14px;align-items:flex-start;background:var(--gris-fondo);
  border-radius:0 var(--radio) var(--radio) var(--radio);padding:16px}
.g-num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;
  font-family:var(--kc-display);font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(22,104,184,.35)}
.g-paso h3{font-family:var(--kc-display);font-weight:800;font-size:17px;line-height:1.2;color:var(--azul-hondo)}
.g-paso p{font-size:14.5px;color:var(--texto-suave);margin-top:4px}
.g-paso p b{color:var(--azul-hondo);white-space:nowrap}
/* En .cab h2 todo <span> va en azul; la primera parte del titular no */
.cab h2 span.n{color:var(--azul-hondo)}

/* Resultados reales: los pares de la portada en rejilla, sin carrusel */
.g-casos{display:grid;gap:18px;max-width:1100px;margin:0 auto}
.g-caso{margin:0;background:#fff;overflow:hidden;
  border-radius:0 var(--radio) var(--radio) var(--radio);box-shadow:var(--sombra)}
/* Mismo alto en los tres: el caso 03 es 760x1050 y los otros 760x1110,
   y en fila las barras azules quedaban escalonadas. Recorta ~3% de lado. */
.g-caso .par img{aspect-ratio:76/111;object-fit:cover}
.g-caso figcaption{background:var(--azul);color:#fff;font-family:var(--kc-display);font-weight:800;
  font-size:15px;padding:12px 16px}
.g-volver{max-width:340px;margin:26px auto 0;text-align:center}

@media (prefers-reduced-motion:reduce){
  .g-sello .c,.g-sello .v{animation:none;stroke-dashoffset:0}
  .g-sello::before,.g-sello::after{animation:none;display:none}
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES (privacidad, cookies, aviso legal) · 16/9/2026
   Antes usaban clases de la v1 (legal-wrap, Fraunces) que en esta hoja
   no existen: salian sin estilo. Ahora llevan cabecera y pie de la v2.
   ══════════════════════════════════════════════════════════════════ */
.doc{padding:34px 0 52px}
.doc .env{max-width:780px}
.doc .volver{display:inline-block;font-size:14px;font-weight:600;color:var(--azul)}
.doc h1{font-family:var(--kc-display);font-weight:800;font-size:32px;line-height:1.1;
  letter-spacing:-.02em;color:var(--azul-hondo);margin-top:14px}
.doc .fecha{font-size:13px;color:var(--texto-suave);margin-top:6px}
.doc h2{font-family:var(--kc-display);font-weight:800;font-size:18px;line-height:1.25;
  color:var(--azul-hondo);margin-top:30px}
.doc p{font-size:15.5px;color:#33454f;margin-top:10px}
.doc ul{padding-left:20px;margin-top:8px}
.doc li{font-size:15.5px;color:#33454f;margin-top:6px}
.doc a:not(.volver){color:var(--azul);text-decoration:underline;text-underline-offset:3px}

@media (min-width:860px){
  .g-hero{padding:72px 0 84px}
  .g-tarjeta{display:grid;grid-template-columns:1fr 380px;max-width:1020px;margin:0 auto}
  .g-cuerpo{padding:56px 56px;text-align:left;display:flex;flex-direction:column;justify-content:center}
  .g-sello{width:84px;height:84px;margin:0 0 20px}
  .g-etiqueta{font-size:12px}
  .g-hero h1{font-size:62px;margin-top:12px}
  .g-hero h1 b{font-size:32px;margin-top:12px}
  .g-mensaje{font-size:19px;margin:20px 0 0}

  /* La foto ocupa todo el alto del lado derecho del recuadro, con el
     nombre sobre un degradado abajo */
  .g-foto{position:relative;display:block;min-height:480px;background:var(--azul-hondo);border-top:0}
  .g-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .g-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;
    background:linear-gradient(0deg, rgba(7,26,43,.92) 0%, rgba(7,26,43,.55) 55%, rgba(7,26,43,0) 100%)}
  .g-foto figcaption b{color:#fff;font-size:18px}
  .g-foto figcaption span{color:#dbe8f2}

  .g-pasos{grid-template-columns:repeat(3,1fr);gap:20px}
  .g-paso{flex-direction:column;gap:14px;padding:26px 24px}
  .g-num{width:44px;height:44px;font-size:20px}
  .g-paso h3{font-size:19px}
  .g-paso p{font-size:15px}

  .g-casos{grid-template-columns:repeat(3,1fr);gap:22px}
  .g-volver{margin-top:36px}

  .doc{padding:56px 0 84px}
  .doc h1{font-size:44px}
  .doc h2{font-size:21px;margin-top:38px}
  .doc p,.doc li{font-size:16.5px}
}

/* ══════════════════════════════════════════════════════════════════
   COMPATIBILIDAD CON ELEMENTOR (WordPress) · 16/9/2026
   frontend.min.css de Elementor trae `.elementor img{height:auto}`, con
   especificidad 0,1,1: pisaba los altos de las imagenes de la landing.
   Resultado en produccion: el logo del pie salia a 452px (hueco enorme
   en el pie de TODAS las paginas) y la foto de portada no rellenaba su
   caja en escritorio. Con el prefijo .elementor (0,2,x) ganan las
   nuestras. Fuera de WordPress no existe .elementor y esto no hace nada.
   ══════════════════════════════════════════════════════════════════ */
.elementor .marca-pie{height:64px;width:auto}
.elementor .cabecera .marca img{height:52px;width:auto}
.elementor .g-foto img{width:92px;height:115px}
@media (min-width:860px){
  .elementor .cabecera .marca img{height:58px}
  .elementor .hero .hero-foto{height:100%}
  .elementor .g-foto img{width:100%;height:100%}
}