:root{--accent:#E60000}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#0B0A0A}
a{color:#FF6B76}a:hover{color:#FFFFFF}
.bg-hero{background-color:#0B0A0A;isolation:isolate;overflow:hidden}
/* La foto va en una capa propia que se mueve con transform (sin repintar en cada cuadro); mismo encuadre que antes:
   120% del ancho, anclada al 40% vertical, deriva lenta de 40 s */
.bg-hero::before{content:"";position:absolute;inset:0 -10%;z-index:-2;background-image:url(img/hero.jpg);background-image:image-set(url(img/hero.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"));background-size:100% auto;background-repeat:no-repeat;background-position:50% 40%;animation:drift 40s ease-in-out infinite alternate;will-change:transform}
.bg-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,10,10,.82) 0%,rgba(11,10,10,.25) 26%,rgba(11,10,10,.35) 55%,rgba(11,10,10,.96) 92%)}
.bg-band{background-color:#0B0A0A;background-image:url(img/banda.jpg);background-image:image-set(url(img/banda.webp) type("image/webp"),url(img/banda.jpg) type("image/jpeg"));background-size:cover;background-position:left center}
.bg-diag{background-color:#0B0A0A;background-image:linear-gradient(180deg,rgba(11,10,10,.25) 0%,rgba(11,10,10,.8) 38%,#0B0A0A 70%),url(img/diagonal.jpg);background-image:linear-gradient(180deg,rgba(11,10,10,.25) 0%,rgba(11,10,10,.8) 38%,#0B0A0A 70%),image-set(url(img/diagonal.webp) type("image/webp"),url(img/diagonal.jpg) type("image/jpeg"));background-size:100% auto;background-repeat:no-repeat;background-position:top center}
/* Celular: el hero es más alto que ancho y la foto al 120% del ancho quedaba como una franja cortada; aquí cubre todo el hero como en escritorio */
@media (max-width:760px){.bg-hero::before{background-size:cover;background-position:50% 50%}}
@media (max-width:1200px){
  .bg-hero::before{background-image:image-set(url(img/hero-1600.webp) type("image/webp"),url(img/hero.jpg) type("image/jpeg"))}
  .bg-band{background-image:image-set(url(img/banda-1600.webp) type("image/webp"),url(img/banda.jpg) type("image/jpeg"))}
  .bg-diag{background-image:linear-gradient(180deg,rgba(11,10,10,.25) 0%,rgba(11,10,10,.8) 38%,#0B0A0A 70%),image-set(url(img/diagonal-1600.webp) type("image/webp"),url(img/diagonal.jpg) type("image/jpeg"))}
}
@keyframes drift{from{transform:translate3d(.67%,0,0)}to{transform:translate3d(-1.33%,-1%,0)}}
@keyframes rise{from{transform:translateY(104%)}to{transform:none}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rise{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.7,.1,1) both}
.rise.d2{animation-delay:.12s}
.mask{display:block;overflow:hidden}
.marquee{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq-wrap:hover .marquee{animation-play-state:paused}
.live-dot{animation:pulse 1.8s ease-in-out infinite}
.lnk-nav{color:#FFFFFF;text-decoration:none;position:relative}
.lnk-nav:hover{color:#FF8A93}
.btn{transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-red:hover{background:#B30000 !important}
.btn-line:hover{background:#FFFFFF !important;color:#0B0A0A !important}
.btn-ink:hover{background:#2A2424 !important}
.card{transition:background-color .3s ease}
.card:hover{background:#181313 !important}
.card .go{transition:transform .3s ease}
.card:hover .go{transform:translateX(6px)}
.card-cta{color:#FFFFFF;text-decoration:none}
.card-cta:hover{color:#FF8A93}
.q-cell{transition:background-color .3s ease}
.q-cell:hover{background:#FFFFFF !important}
.pill{color:#FFFFFF;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.pill:hover{background:rgba(230,0,0,.22) !important;border-color:#E60000 !important;color:#FFFFFF}
.btn:focus-visible,.lnk-nav:focus-visible,.card-cta:focus-visible,.pill:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #19C3E6;outline-offset:3px}
input,select,button{font:inherit}
h1,h2,h3,blockquote{text-wrap:balance}
p,li{text-wrap:pretty}
@media (max-width:760px){.nav-links{display:none !important}.hm-logo{width:146px !important;height:18px !important}}
@media (prefers-reduced-motion: reduce){.bg-hero,.bg-hero::before,.rise,.marquee,.live-dot{animation:none !important}.btn,.card,.card .go{transition:none !important}.btn:hover{transform:none}}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo{min-height:52px;padding:12px 14px;border:1.5px solid #8C8684;background:#FFFFFF;font-size:16px;color:#0B0A0A;border-radius:0;width:100%}
.campo[aria-invalid="true"]{border-color:#B30000}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Animaciones al hacer scroll (se activan solo si el script marca la raíz con data-anim-on) */
[data-anim="contar"]{font-variant-numeric:tabular-nums}
[data-anim-on] [data-anim="aparecer"],[data-anim-on] [data-anim="grupo"]>*{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1),background-color .3s ease}
[data-anim-on] [data-anim="aparecer"][data-vista],[data-anim-on] [data-anim="grupo"][data-vista]>*{opacity:1;transform:none}
[data-anim-on] [data-anim="grupo"]>*:nth-child(2){transition-delay:.09s,.09s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(3){transition-delay:.18s,.18s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(4){transition-delay:.27s,.27s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(5){transition-delay:.36s,.36s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(6){transition-delay:.45s,.45s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(7){transition-delay:.54s,.54s,0s}
[data-anim-on] [data-anim="grupo"]>*:nth-child(n+8){transition-delay:.63s,.63s,0s}
[data-anim-on] [data-anim="barra"]>div{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.2,.7,.1,1) .25s}
[data-anim-on] [data-anim="barra"][data-vista]>div{transform:none}
@media (prefers-reduced-motion: reduce){[data-anim-on] [data-anim]>*,[data-anim-on] [data-anim]{opacity:1 !important;transform:none !important;transition:none !important}}
/* Hero: escala con la altura disponible para que la acción principal se vea sin hacer scroll en laptops */
.hero-in{padding:clamp(32px,8vh,120px) clamp(20px,5vw,72px) clamp(32px,5vh,56px);gap:clamp(14px,2.6vh,30px)}
.hero-h1{font-size:clamp(92px,min(16vw,19vh),248px)}
.hero-sub{font-size:clamp(26px,2.8vw,40px)}
@media (min-width:761px) and (max-height:780px){.hero-in{padding-top:4vh}.hero-h1{font-size:clamp(92px,min(16vw,16vh),248px)}.hero-sub{font-size:clamp(24px,2.8vw,30px)}}
/* «¿Qué encontramos?» es la palabra más larga de la página: a 64 px no cabe en un celular de 390 px */
@media (max-width: 480px){#h-tres{font-size:15vw !important}}

/* Rejilla de estudios: las líneas las dibuja cada tarjeta, así una celda vacía al final no se ve gris */
#lista-estudios>.card{box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* Pill del hero: los estudios van pasando uno por uno (28-oct-2026) */
.pill-rot{display:inline-grid;min-width:0;overflow:hidden}
.pill-item{grid-area:1/1;opacity:0;transform:translateY(100%);transition:opacity .35s ease,transform .35s ease;white-space:nowrap}
.pill-item.is-on{opacity:1;transform:none}
.pill-item.sale{opacity:0;transform:translateY(-100%)}
.pill-estado{font-weight:650;color:#FF8A93}
.pill-estado.es-pronto{color:#C9C2BF}
.live-dot.es-pronto{background:transparent !important;box-shadow:inset 0 0 0 1.5px #C9C2BF;animation:none}
@media (max-width:480px){.pill{font-size:13px !important;padding:9px 14px !important;gap:10px !important}.pill-item{white-space:normal}}
@media (prefers-reduced-motion: reduce){.pill-item{transition:none}}
/* Rejilla sin huecos (app.js, rellenarRejilla): la tarjeta que ocupa 2 o 3 columnas mantiene un ancho de lectura,
   y si ocupa toda la fila toma solo el alto de su contenido */
#lista-estudios>.card-ancha h3,#lista-estudios>.card-ancha p{max-width:46ch}
#lista-estudios>.card-fila{min-height:0 !important}
/* Banner de cookies (assets/medicion.js) */
.ck{position:fixed;z-index:60;left:16px;right:16px;bottom:16px;max-width:460px;padding:22px 22px 20px;background:#0B0A0A;color:#FFFFFF;border:1px solid rgba(255,255,255,.22);border-top:3px solid #E60000;box-shadow:0 18px 48px rgba(0,0,0,.35);font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-stretch:100%;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.ck.ck-visible{opacity:1;transform:none}
.ck-titulo{margin:0 0 8px;font-weight:700;font-size:17px;line-height:1.3}
.ck-texto{margin:0 0 18px;font-size:14px;line-height:1.55;color:#CFC9C6}
.ck-texto a{color:#FF8A93}
.ck-texto a:hover{color:#FFFFFF}
.ck-botones{display:flex;gap:10px}
.ck-btn{flex:1 1 0;min-height:46px;padding:10px 16px;border-radius:0;font-weight:650;font-size:15px;cursor:pointer;border:1.5px solid #FFFFFF}
.ck-aceptar{background:#E60000;border-color:#E60000;color:#FFFFFF}
.ck-aceptar:hover{background:#B30000;border-color:#B30000}
.ck-rechazar{background:transparent;color:#FFFFFF}
.ck-rechazar:hover{background:#FFFFFF;color:#0B0A0A}
.lnk-cookies{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:#ABA4A1;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lnk-cookies:hover{color:#FFFFFF}
@media (min-width:761px){.ck{right:auto;left:24px;bottom:24px}}
@media (prefers-reduced-motion: reduce){.ck{transition:none;transform:none}}