/* Escena de los nichos: foto a pantalla completa, QR impreso en su soporte y un móvil. Sin JS, se lee en orden. */
.hz{position:relative;background:#0b0d0e;color:#fff;--tinta-2:#e9e7e0;--pizarra-h:#fff}
.hz-pin{position:relative;overflow:clip}
.hz-cam{position:relative;width:100%}
.hz-cam img{display:block;width:100%;height:auto}
.hz-f2,.hz-air,.hz-rail,.r-salta,.hz-velo,.hz-tel,.hz-cont{display:none}
.hz-esc{position:relative;overflow:hidden}
.hz-textos{padding:32px var(--gut) 40px;display:grid;gap:36px}
.hz .r-paso p{color:#e9e7e0}
.hz h1,.hz h2{color:#fff!important}
.hz h1{font-size:clamp(38px,6vw,84px)}
.hz h2{font-size:clamp(30px,4.6vw,64px)}
.hz .r-nota{font-size:15px;opacity:.86}
.hz .lnk{color:#fff}
.hz :focus-visible{outline-color:var(--tiza)}

/* Con JS: la cámara, el QR y el móvil */
.js .hz-air,.js .hz-velo{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.js .hz-velo{z-index:2}
.js .hz-air{z-index:3}
.js .hz-tel{display:block}

.animado .hz{height:340svh}
.animado .hz-pin{position:sticky;top:0;height:100svh}
.animado .hz-esc{position:absolute;inset:0}
.animado .hz-cam{position:absolute;left:0;top:0;width:max(100vw,177.78svh);aspect-ratio:16/9;transform-origin:0 0;will-change:transform;overflow:hidden}
.animado .hz-cam img{position:absolute;inset:0;height:100%;object-fit:cover}
.animado .hz-f2{display:block;opacity:0}
.hz-izq .hz-velo{background:linear-gradient(90deg,rgb(8 10 11 / .95),rgb(8 10 11 / .9) 44%,rgb(8 10 11 / 0) 60%),linear-gradient(0deg,rgb(8 10 11 / .35),transparent 22%)}
.hz-der .hz-velo{background:linear-gradient(270deg,rgb(8 10 11 / .95),rgb(8 10 11 / .9) 40%,rgb(8 10 11 / 0) 54%),linear-gradient(0deg,rgb(8 10 11 / .35),transparent 22%)}

.animado .hz-textos{position:absolute;z-index:5;top:0;bottom:0;width:min(44vw,680px);padding:0;display:block;pointer-events:none}
.animado .hz-izq .hz-textos{left:var(--gut)}
.animado .hz-der .hz-textos{right:var(--gut)}
.animado .r-paso{position:absolute;left:0;right:0;top:calc(50% + 12px);translate:0 -50%;visibility:hidden;transition:visibility 0s linear .22s}
.animado .r-paso.on{visibility:visible;pointer-events:auto;transition-delay:0s}
.r-paso .w{display:inline-block;overflow:clip;overflow-clip-margin:.12em;vertical-align:top;padding-block:.06em;margin-block:-.06em}
.w-i{display:inline-block}
.animado .r-paso .w-i{transform:translateY(112%);transition:transform .2s ease-in}
.animado .r-paso.on .w-i{transform:none;transition:transform .62s cubic-bezier(.2,.9,.2,1)}
.animado .r-paso>:not(h1,h2){opacity:0;translate:0 14px;transition:opacity .16s ease,translate .16s ease}
.animado .r-paso.on>:not(h1,h2){opacity:1;translate:0 0;transition:opacity .42s ease .24s,translate .5s var(--fuera) .24s}

/* Móvil de cliente */
.js .hz-tel{position:absolute;z-index:4;width:clamp(232px,20vw,300px);aspect-ratio:9/18.6;top:50%;margin-top:calc(clamp(232px,20vw,300px) * -1.03);transform-origin:50% 60%;visibility:hidden;will-change:transform}
.hz-izq .hz-tel{right:clamp(24px,5vw,90px)}
.hz-der .hz-tel{left:clamp(24px,5vw,90px)}
.tel-marco{position:relative;height:100%;padding:9px;border-radius:40px;background:linear-gradient(135deg,#3a3d40,#0d0e0f 40%,#26282a);box-shadow:0 40px 70px -18px rgb(0 0 0 / .7),0 0 0 1px rgb(255 255 255 / .1) inset}
.tel-isla{position:absolute;left:50%;top:17px;width:30%;height:17px;margin-left:-15%;border-radius:10px;background:#000;z-index:2}
.es-in,.sim-p{height:100%;overflow:hidden;border-radius:32px;background:#fff;color:#14181a}
.tel-u{padding:40px 12px 8px;background:#eef1ef;color:#3a4542;font-size:11.5px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-d{padding:14px 15px}
.tel-t{display:block;font:800 21px/1.08 var(--tit);font-style:normal;letter-spacing:-.02em;margin-bottom:10px;color:#101416;overflow-wrap:anywhere}
.f-c{padding:10px 0;font-size:13.5px;line-height:1.2;box-shadow:0 1px #e3e7e4}
.f-c>span{display:flex;justify-content:space-between;gap:10px;font-weight:500}
.f-c b{font-weight:700;white-space:nowrap;text-align:right}
.f-c small{display:none;margin-top:3px;color:#b3261e;font-size:12px;font-weight:700}
.es-in .f-c{opacity:0;translate:0 10px;transition:opacity .25s ease,translate .4s var(--fuera)}
.es-in .f-c.on{opacity:1;translate:0 0}
.es-in.agotado .f-ent small{display:block}
.es-in.agotado .f-ent>span>span{text-decoration:line-through;color:#6b7572}
.es-in.agotado .f-ent b{color:#b3261e}

/* Raíl: qué está pasando, con nombre */
.animado .hz-rail{display:flex;position:absolute;z-index:6;left:50%;bottom:18px;translate:-50% 0;gap:2px;padding:4px;border-radius:999px;background:rgb(10 12 13 / .78)}
.hz-rail button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:none;color:#fff;font:600 13.5px var(--txt);cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.hz-rail button[aria-current]{background:var(--tiza);color:#111}
@media (hover:hover) and (pointer:fine){.hz-rail button:not([aria-current]):hover{background:rgb(255 255 255 / .16)}}
.animado .r-salta{display:inline-block;position:absolute;z-index:6;right:var(--gut);top:calc(64px + 16px);padding:8px 12px;border-radius:8px;background:rgb(10 12 13 / .6);color:#fff;font-size:14px;font-weight:600}
.franja-prueba~main .r-salta{top:calc(94px + 16px)!important}
.hz .ilus{position:absolute;z-index:6;left:var(--gut);bottom:26px;padding:2px 7px;border-radius:4px;background:rgb(0 0 0 / .62);color:#fff;font-size:11px}

@media (max-width:899px){
  .animado .hz{height:320svh}
  .hz-izq .hz-velo,.hz-der .hz-velo{background:linear-gradient(0deg,rgb(8 10 11 / .94) 30%,rgb(8 10 11 / .64) 50%,rgb(8 10 11 / 0) 68%)}
  .animado .hz-textos,.animado .hz-izq .hz-textos,.animado .hz-der .hz-textos{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:64px;height:52svh}
  .animado .r-paso{top:auto;bottom:0;translate:0 0}
  .hz h1{font-size:clamp(31px,8.8vw,52px)!important}
  .hz h2{font-size:clamp(27px,7.6vw,46px)!important}
  .hz .r-paso p{font-size:16px;margin-top:10px}
  .hz .r-acc{margin-top:14px}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{left:auto;right:12px;width:min(40vw,190px);top:calc(64px + 42px);margin-top:0}
  .tel-marco{padding:6px;border-radius:26px}
  .es-in,.sim-p{border-radius:21px}
  .hz-tel .tel-isla{height:11px;top:11px}
  .hz-tel .tel-u{padding:24px 6px 5px;font-size:8.5px}
  .hz-tel .tel-d{padding:8px}
  .hz-tel .tel-t{font-size:14px;margin-bottom:5px}
  .hz-tel .f-c{padding:6px 0;font-size:9.5px}
  .hz-tel .f-c small{font-size:9px}
  .animado .hz-rail{left:12px;right:12px;bottom:10px;translate:0 0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .hz-rail button{min-height:36px;padding:0 9px;font-size:11.5px}
  .hz-rail button:not([aria-current]) span{display:inline-block;max-width:0;overflow:hidden}
  .hz-rail button:not([aria-current]){width:26px;padding:0;position:relative}
  .hz-rail button:not([aria-current])::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:rgb(255 255 255 / .6)}
  .animado .r-salta{top:calc(64px + 8px);right:auto;left:12px;font-size:12px;padding:5px 9px}
  .franja-prueba~main .r-salta{top:calc(94px + 8px)!important}
  .hz .ilus{left:12px;bottom:auto;top:calc(64px + 42px);font-size:10px}
  .franja-prueba~main .hz .ilus{top:calc(94px + 42px)}
}
@media (max-width:899px) and (max-height:640px){
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{width:min(30vw,130px)}
  .hz .r-paso p{font-size:15px}
  .hz h1{font-size:clamp(26px,7.6vw,40px)!important}
  .hz h2{font-size:clamp(24px,7vw,38px)!important}
  .hz .r-paso .r-nota{display:none}
}

/* Movimiento reducido: un encuadre fijo con todo a la vista */
.hz-quieto .hz-esc{height:62svh;min-height:340px}
.hz-quieto .hz-cam{position:absolute;left:0;top:0;transform-origin:0 0}
.hz-quieto .hz-cam img{height:100%;object-fit:cover}
.js .hz-quieto .hz-tel,.hz-quieto .hz-tel{visibility:visible;position:relative;left:auto;right:auto;top:auto;margin:24px auto;width:240px}
.hz-quieto .es-in .f-c{opacity:1;translate:0 0}
.hz-quieto .hz-velo{display:none}

/* Simulador */
.sim{padding:clamp(72px,9vw,128px) var(--gut);background:var(--pizarra);color:#fff;--tinta-2:#d9e2dd;overflow:clip}
.sim .b-tit,.sim h2{color:#fff}
.sim .b-lead{color:#d9e2dd}
.sim :focus-visible{outline-color:var(--tiza)}
.sim-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(32px,6vw,96px);align-items:start}
.sim-mandos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(24px,3vw,36px)}
.campo-s label,.et-s{display:block;margin-bottom:7px;font-size:15px;font-weight:600}
.campo-s input{width:100%;min-height:52px;padding:0 14px;border:2px solid rgb(255 255 255 / .34);border-radius:10px;background:rgb(255 255 255 / .08);color:#fff;font:600 17px var(--txt);transition:border-color .15s ease,background-color .15s ease}
.campo-s input::placeholder{color:rgb(255 255 255 / .74)}
.campo-s input:focus{border-color:var(--tiza);background:rgb(255 255 255 / .14)}
.campo-s input:focus-visible{outline:3px solid var(--tiza);outline-offset:2px}
.seg-s{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgb(255 255 255 / .12)}
.seg-s button,.giro-s{flex:1;min-height:44px;padding:0 12px;border:0;border-radius:9px;background:none;color:#fff;font:700 15.5px var(--txt);cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .12s ease}
.seg-s button:active,.giro-s:active{transform:scale(.97)}
.seg-s button[aria-pressed=true]{background:var(--tiza);color:#111}
.giro-s{width:100%;min-height:52px;border:2px solid rgb(255 255 255 / .34)}
.giro-s[aria-pressed=true]{background:var(--tiza);border-color:var(--tiza);color:#111}
.sim-cuenta{margin:26px 0 0;font:700 clamp(22px,2.4vw,32px)/1.15 var(--tit);letter-spacing:-.02em}
.sim-cuenta b{color:var(--tiza);font-variant-numeric:tabular-nums}
.sim-nota{margin:8px 0 0;font-size:15px;color:#d9e2dd}
.sim-disp{position:relative;display:grid;place-items:center}
.sim-tel{position:relative;z-index:1;width:min(290px,76vw);aspect-ratio:9/18.2;rotate:2deg}
.sim-tel.sim-lat{animation:sim-lat .36s var(--fuera)}
@keyframes sim-lat{30%{scale:1.025}}
.sim-tel.cambiado .f-ent b{color:#b3261e}
.sim-p .f-c .sim-est{display:block;margin-top:3px;font-size:12px;font-weight:700;color:#3a4542}
.sim-tel.giro .tel-f2{opacity:1}
.sim-tel.cambiado .f-c .sim-est{color:#b3261e}
.sim-pulso{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px;border:2px solid var(--tiza);border-radius:50%;opacity:0}
.sim-pulso.va{animation:pulso .7s var(--fuera)}
@keyframes pulso{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}
@media (max-width:899px){
  .sim-g{grid-template-columns:1fr;gap:20px}.sim-mandos{grid-template-columns:1fr}
  .sim-disp{order:-1}
  .sim-tel{width:min(42vw,170px);rotate:0deg}
  .sim-tel .tel-marco{padding:5px;border-radius:22px}
  .sim-p{border-radius:18px}
  .sim-tel .tel-isla{height:9px;top:9px}
  .sim-tel .tel-u{padding:20px 5px 4px;font-size:8px}
  .sim-tel .tel-d{padding:7px}
  .sim-tel .tel-t{font-size:13px;margin-bottom:4px}
  .sim-tel .f-c{padding:4px 0;font-size:8.5px}
  .sim-tel .f-c .sim-est{font-size:8px;margin-top:1px}
  .sim-tel .tel-b{margin-top:5px;gap:3px;font-size:8px}
  .sim-tel .tel-b span{padding:4px 1px;border-radius:5px}
  .sim-tel .tel-fw{aspect-ratio:16/7}
  .sim-txt{order:0}
}
@media (prefers-reduced-motion:reduce){.sim-tel.sim-lat,.sim-pulso.va{animation:none}}

/* QR artístico */
.b-qa{background:var(--papel)}
.qa-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.qa-pr{margin:18px 0 22px;font-size:clamp(18px,1.5vw,21px)}
.qa-n{margin:14px 0 0;font-size:15px;color:var(--tinta-2);max-width:34em}
.qa-m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);align-items:center}
.arte-m{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgb(0 0 0 / .18)}
.arte-m:nth-child(2){margin-top:14%;rotate:2deg}
.arte-m:nth-child(1){rotate:-1.5deg}
.arte-m img{display:block;width:100%;height:auto}
@media (max-width:899px){.qa-g{grid-template-columns:1fr}}

/* Cómo se empieza */
.b-emp{background:var(--niebla)}
.emp-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,52px)!important;counter-reset:n}
.emp-l li>b{display:block;font:800 clamp(52px,6vw,88px)/.9 var(--tit);color:var(--pizarra);letter-spacing:-.04em}
.emp-l h3{margin-top:10px;font-size:clamp(21px,1.9vw,26px);font-weight:800;color:var(--pizarra)}
.emp-l p{margin:8px 0 0;color:var(--tinta-2)}
.emp-i{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:clamp(28px,4vw,44px) 0 0;padding:0;font-size:16px;font-weight:600}
.emp-i li{padding:7px 12px;border:1px solid var(--pizarra);border-radius:999px;color:var(--pizarra)}
@media (max-width:899px){.emp-l{grid-template-columns:1fr}}

/* Botón fijo */
.pega{position:fixed;z-index:15;right:16px;bottom:16px;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 20px;border-radius:14px;background:#101416;color:#fff;font-size:15px;font-weight:600;box-shadow:0 14px 40px rgb(0 0 0 / .32);transform:translateY(160%);visibility:hidden;transition:transform .36s var(--fuera),visibility 0s linear .36s}
.pega.on,.pega:focus-within{transform:none;visibility:visible;transition-delay:0s}
.pega .bt{min-height:46px;font-size:16px;white-space:nowrap;background:var(--tiza);color:#111}
.pega :focus-visible{outline-color:var(--tiza)}
@media (max-width:640px){.pega{left:10px;right:10px;width:auto;transform:translateY(140%);padding:8px;gap:10px}.pega.on,.pega:focus-within{transform:none}.pega>span{display:none}.pega .bt{flex:1;min-width:0;padding:0 14px;gap:8px;font-size:15px}}

/* Botones: el relleno entra y la flecha sale y vuelve */
.bt{position:relative;overflow:hidden;isolation:isolate;transition:transform .14s ease,background-color .2s ease,color .2s ease}
.bt::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(255 255 255 / .2);transform:translateX(-101%);transition:transform .36s var(--fuera)}
@media (hover:hover) and (pointer:fine){
  .bt:hover::before{transform:none}
  .bt:hover svg{animation:flecha .42s var(--fuera);transform:none}
}
@keyframes flecha{45%{transform:translateX(120%);opacity:0}46%{transform:translateX(-120%);opacity:0}100%{transform:none;opacity:1}}
.bt:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.bt,.bt::before{transition:none}.bt svg{animation:none!important}}

/* Entradas al bajar */
.rv{opacity:0;translate:0 26px;transition:opacity .6s ease,translate .8s var(--fuera)}
.rv.vis{opacity:1;translate:0 0}
img.rv,.c-marco.rv,.arte-m.rv{clip-path:inset(12% 0 12% 0);translate:0 18px;transition:opacity .4s ease,translate .9s var(--fuera),clip-path .9s var(--fuera)}
img.rv.vis,.c-marco.rv.vis,.arte-m.rv.vis{clip-path:inset(0)}

/* Portada: el QR como ventana */
.qm-c{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:18px;color:var(--pizarra);box-shadow:0 30px 70px -22px rgb(16 32 27 / .45)}
.qm-w{position:relative;justify-self:end;width:min(100%,460px)}
.qm-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.qm-p{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:8px;background:var(--niebla);color:var(--pizarra);font:600 14px var(--txt);cursor:pointer}
.qm-l{margin:0;font-size:15px;color:var(--tinta-2)}
@media (max-width:899px){.qm-w{justify-self:stretch;width:100%;max-width:420px;margin-inline:auto}}

/* Ficha dentro del móvil */
.tel-fw{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe5e1}
.tel-fw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tel-f2{opacity:0;transition:opacity .3s ease}
.tel-b{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;font-size:13px;font-weight:700;text-align:center}
.tel-b span{padding:10px 4px;border-radius:9px;background:#101416;color:#fff}
.tel-b span+span{background:#e5f4e6;color:#10391c}
.hz .r-paso p{font-size:clamp(18px,1.4vw,22px);line-height:1.36}
@media (max-width:899px){.hz-tel .tel-fw{aspect-ratio:16/8}.hz-tel .tel-b{margin-top:6px;gap:4px;font-size:8.5px}.hz-tel .tel-b span{padding:5px 2px;border-radius:6px}}
.r-paso p{margin:18px 0 0;max-width:32em}
.r-paso .r-nota{margin-top:12px}
.r-paso .r-acc{margin-top:26px}
@media (max-width:899px){.r-paso p{margin-top:10px}.r-paso .r-acc{margin-top:14px}.r-paso .r-nota{margin-top:8px}}

/* Contador en la escena */
.hz-cont{display:none}
.animado .hz-cont{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px;position:absolute;z-index:5;padding:10px 14px;border-radius:14px;background:#fff;color:#101416;box-shadow:0 18px 40px rgb(0 0 0 / .4);opacity:0;scale:.92;transition:opacity .25s ease,scale .4s var(--fuera);top:calc(50% + clamp(232px,20vw,300px) * .62)}
.animado .hz-izq .hz-cont{right:clamp(150px,calc(5vw + 19vw),390px)}
.animado .hz-der .hz-cont{left:clamp(150px,calc(5vw + 19vw),390px)}
.hz-cont b{font:800 clamp(30px,2.8vw,42px)/1 var(--tit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hz-cont span{font-size:14px;font-weight:600}
.hz-cont small{grid-column:1/3;font-size:11px;color:#55605c}
.hz-cont.on{opacity:1;scale:1}
.hz-cont.suma b{animation:suma .5s var(--fuera)}
@keyframes suma{30%{color:#0d7a3b;transform:translateY(-3px)}}
@media (max-width:899px){
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{left:12px;right:auto;top:calc(64px + 30px + 30svh);padding:6px 10px;border-radius:10px}
  .hz-cont b{font-size:24px}.hz-cont span{font-size:12px}.hz-cont small{font-size:10px}
}
/* Panel de aperturas */
.medir{padding:clamp(72px,9vw,128px) var(--gut);background:var(--niebla)}
.medir-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:center}
.medir-n{margin:18px 0 0;max-width:34em;font-size:15.5px;color:var(--tinta-2)}
.medir-p{margin:0;padding:clamp(20px,2.6vw,36px);border-radius:20px;background:#fff;color:#101416;box-shadow:0 30px 70px -28px rgb(16 32 27 / .4)}
.medir-p figcaption{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600}
.medir-p figcaption small{font-size:13px;font-weight:600;color:#55605c}
.medir-num{margin:10px 0 0;font-size:18px;font-weight:600}
.medir-num b{font:800 clamp(60px,7vw,104px)/.95 var(--tit);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--pizarra)}
.medir-b{display:flex;align-items:flex-end;gap:clamp(3px,.5vw,7px);height:clamp(110px,13vw,170px);margin-top:18px}
.medir-b i{flex:1;height:100%;border-radius:4px 4px 0 0;background:var(--pizarra);transform:scaleY(.02);transform-origin:50% 100%;transition:transform .8s var(--fuera)}
.medir-b i:nth-child(13){background:var(--tiza);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12)}
.medir-r{margin-top:22px!important;display:grid;gap:12px}
.medir-r li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15.5px;font-weight:600}
.medir-r i{grid-column:1/3;height:7px;border-radius:4px;background:var(--pizarra);transform:scaleX(.02);transform-origin:0 50%;transition:transform .9s var(--fuera)}
@media (max-width:899px){.medir-g{grid-template-columns:1fr}}
@media (min-width:900px){.animado .hz-der .hz-textos{width:min(39vw,620px)}}
html:not(.js) .sim-mandos,html:not(.js) .sim-cuenta,html:not(.js) .qm-c,html:not(.js) .qm-p,html:not(.js) .medir-b,html:not(.js) .medir-r i{display:none}
.qm-nq{display:block;width:100%;height:auto}
.qm-pie{flex-wrap:wrap}.qm-l{min-width:0;flex:1 1 170px}
@media (max-width:360px){.r-cab{gap:8px}.r-cab-acc{gap:10px}.bt-peq{padding:0 10px;font-size:14px;gap:8px}.publico .marca{font-size:19px}}
.nicho-concesionario .pl-d :focus-visible{outline-color:#111}
@media (max-width:899px){.elige{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.elige{grid-template-columns:1fr!important}}

.sim-g[hidden]{display:none}
.sim>.b-in:first-child{margin-bottom:clamp(20px,3vw,36px)}
.sim-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(20px,3vw,32px)}
.sim-tabs button{min-height:44px;padding:0 16px;border:2px solid rgb(255 255 255 / .34);border-radius:999px;background:none;color:#fff;font:700 15px var(--txt);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.sim-tabs button[aria-pressed=true]{background:var(--tiza);border-color:var(--tiza);color:#111}

/* Negocios: lista grande y una vista que sigue a la fila */
.neg{padding:clamp(72px,9vw,128px) var(--gut);background:var(--niebla)}
.neg-in{max-width:1680px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,88px);align-items:start}
.neg-g{list-style:none;margin:clamp(20px,3vw,36px) 0 0;padding:0;box-shadow:0 -1px #d9dfda}
.t-neg{box-shadow:0 1px #d9dfda}
.t-neg a{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 4px;color:var(--pizarra);text-decoration:none;transition:translate .25s var(--fuera)}
.t-neg img{flex:none;width:76px;height:54px;border-radius:8px;object-fit:cover}
.t-tx{flex:1;display:grid;gap:2px;min-width:0}
.t-tx b{font:800 clamp(21px,2.3vw,34px)/1.05 var(--tit);letter-spacing:-.025em}
.t-tx span{font-size:15px;line-height:1.3;color:var(--tinta-2)}
.t-neg svg{flex:none;width:22px;height:22px;transition:translate .25s var(--fuera)}
.t-neg a:focus-visible{outline:3px solid var(--pizarra);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.t-neg a:hover{translate:6px 0}.t-neg a:hover svg{translate:6px 0}}
.neg-n{margin:16px 0 0;font-size:15px;color:var(--tinta-2)}
.neg-v{display:none}
@media (min-width:900px){
  .t-neg img{display:none}
  .neg-v{display:block;position:sticky;top:96px;aspect-ratio:4/5;max-height:calc(100svh - 128px);width:100%;overflow:hidden;border-radius:16px;background:#10231c}
  .neg-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
  .neg-v img.on{opacity:1}
}
@media (max-width:899px){.neg-in{grid-template-columns:minmax(0,1fr)}}

/* Pared de QR artísticos en la portada */
.qa-pared{padding:clamp(72px,9vw,128px) var(--gut);background:#10231c;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(32px,5vw,80px);align-items:start}
.qa-pared .qa-t{position:sticky;top:96px}
.qa-pared .b-tit{color:#fff}
.qa-pared .b-lead{color:#d5e2da}
.qa-pared .qa-pr{color:#fff}
.qa-pared .qa-n{color:#c9d6ce}
.qa-pared :focus-visible{outline-color:var(--tiza)}
.qa-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.qa-gal li.arte-m{position:relative;margin:0;rotate:0deg;border-radius:10px;box-shadow:none;background:#0b1712}
.qa-gal li:nth-child(3n+2){top:clamp(16px,3vw,44px)}
.qa-gal img{display:block;width:100%;height:auto}
.qa-gal li.arte-m{overflow:visible;background:none}
.qa-gal img{border-radius:10px}
.qa-gal span{display:block;padding:8px 2px 0;color:#d5e2da;font-size:14px;font-weight:600}
@media (max-width:899px){
  .qa-pared{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .qa-pared .qa-t{position:static;padding-inline:var(--gut)}
  .qa-gal{display:flex;gap:10px;padding:0 var(--gut) 8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .qa-gal::-webkit-scrollbar{display:none}
  .qa-gal li.arte-m{flex:0 0 72vw;scroll-snap-align:start}
  .qa-gal li:nth-child(3n+2){top:0}
}

/* Carta con fotos */
.b-fc{background:var(--papel)}
.fc-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.fc-n{margin:14px 0 0;font-size:16px;color:var(--tinta-2)}
.fc-p{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:16px}
.fc-p b{font-weight:800;color:var(--pizarra);margin-right:6px}
.fc-m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fc-f{margin:0;border-radius:12px;overflow:hidden;background:var(--niebla)}
.fc-f:nth-child(even){translate:0 22px}
.fc-f img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fc-f figcaption{padding:6px 10px;font-size:12px;color:var(--tinta-2)}
@media (max-width:899px){.fc-g{grid-template-columns:1fr}.fc-f:nth-child(even){translate:0 0}}

.b-gratis{background:var(--niebla);padding-block:clamp(48px,6vw,80px)}

/* En móvil la foto va arriba y el texto debajo, sobre fondo oscuro: el texto nunca tapa el QR. */
@media (max-width:899px){
  .animado .hz-esc{bottom:auto;height:54svh}
  .hz-izq .hz-velo,.hz-der .hz-velo{background:linear-gradient(0deg,#0b0d0e,rgb(11 13 14 / 0) 24%)}
  .animado .hz-textos,.animado .hz-izq .hz-textos,.animado .hz-der .hz-textos{height:auto;bottom:58px;top:auto}
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{top:calc(54svh - 66px)}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{top:calc(64px + 34px);width:min(36vw,150px)}
}
@media (max-width:899px) and (max-height:700px){
  .animado .hz-esc{height:50svh}
  .hz .r-paso p{display:none}
  .hz .r-paso .r-nota{display:none}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{width:min(26vw,104px)}
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{top:calc(50svh - 56px)}
}
/* El contador va bajo el móvil: encima del QR impediría leerlo. */
@media (min-width:900px){
  .animado .hz-cont{top:calc(50% + clamp(232px,20vw,300px) * 1.05)}
  .animado .hz-izq .hz-cont{right:clamp(24px,5vw,90px);left:auto}
  .animado .hz-der .hz-cont{left:clamp(24px,5vw,90px);right:auto}
}
@media (min-width:900px){
  .animado .hz-izq .hz-textos{width:min(40vw,640px)}
  .hz-izq .hz-velo{background:linear-gradient(90deg,rgb(8 10 11 / .95),rgb(8 10 11 / .9) 42%,rgb(8 10 11 / 0) 50%),linear-gradient(0deg,rgb(8 10 11 / .35),transparent 22%)}
  .hz-der .hz-velo{background:linear-gradient(270deg,rgb(8 10 11 / .95),rgb(8 10 11 / .9) 40%,rgb(8 10 11 / 0) 48%),linear-gradient(0deg,rgb(8 10 11 / .35),transparent 22%)}
}
/* En móvil y tableta el texto arranca pegado a la foto: sin hueco negro encima. Un paso largo crece hacia arriba y nunca llega a los puntos de abajo. */
@media (max-width:899px){
  .animado .hz-textos,.animado .hz-izq .hz-textos,.animado .hz-der .hz-textos{top:calc(54svh - 28px);bottom:60px;height:auto}
  .animado .r-paso{top:auto;bottom:0;min-height:100%}
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{top:calc(54svh - 100px)}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{width:min(36vw,150px,calc((54svh - 148px) / 2.07))}
}
@media (max-width:899px) and (max-height:700px){
  .animado .hz-textos,.animado .hz-izq .hz-textos,.animado .hz-der .hz-textos{top:calc(50svh - 28px)}
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{top:calc(50svh - 88px)}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{width:min(26vw,calc((50svh - 148px) / 2.07))}
}
@media (min-width:600px) and (max-width:899px) and (min-height:800px){
  .animado .hz-esc{height:66svh}
  .animado .hz-textos,.animado .hz-izq .hz-textos,.animado .hz-der .hz-textos{top:calc(66svh - 28px)}
  .animado .hz-cont,.animado .hz-izq .hz-cont,.animado .hz-der .hz-cont{top:calc(66svh - 100px)}
  .hz-tel,.hz-izq .hz-tel,.hz-der .hz-tel{width:min(32vw,250px)}
}
@media (max-width:899px) and (max-height:799px){
  .hz .r-paso h1,.hz .r-paso h2{font-size:clamp(23px,6.8vw,29px)}
  .hz .r-paso p{font-size:14.5px;margin-top:6px}
  .hz .r-paso .r-nota{font-size:13px;margin-top:6px}
  .hz .r-paso .r-acc{margin-top:8px}
}
/* Lo que entra animado nunca queda invisible con el foco dentro. */
.rv:focus-within{opacity:1;translate:0 0;clip-path:none;transition:none}
/* Sin JavaScript no quedan controles que no hacen nada. */
html:not(.js) .sim,html:not(.js) .ciclo-r{display:none}
/* Portátiles al 100 %: la ventana es baja. El móvil y el texto se miden también por la altura, y nada se sale. */
@media (min-width:900px){
  .hz{--telw:min(clamp(232px,20vw,300px),calc((100svh - 190px) / 2.067));--teltop:max(76px,calc(50% - var(--telw) * 1.03))}
  .js .hz-tel{width:var(--telw);top:var(--teltop);margin-top:0}
  .animado .hz-cont{top:calc(var(--teltop) + var(--telw) * 2.067 + 8px)}
}
@media (min-width:900px) and (max-height:820px){
  .hz h1{font-size:clamp(30px,min(4.2vw,8svh),60px)}
  .hz h2{font-size:clamp(26px,min(3.6vw,7svh),50px)}
  .hz .r-paso p{font-size:16px;line-height:1.3}
  .r-paso p{margin-top:10px}
  .r-paso .r-acc{margin-top:12px}
  .r-paso .r-nota{margin-top:8px;font-size:14px}
  .animado .r-paso{top:calc(50% + 4px)}
  .hz-tel .tel-marco{padding:7px;border-radius:30px}
  .hz-tel .es-in{border-radius:24px}
  .hz-tel .tel-isla{height:13px;top:13px}
  .hz-tel .tel-u{padding:30px 8px 6px;font-size:10px}
  .hz-tel .tel-d{padding:10px 11px}
  .hz-tel .tel-t{font-size:17px;margin-bottom:6px}
  .hz-tel .f-c{padding:6px 0;font-size:12px}
  .hz-tel .f-c small{font-size:11px}
  .animado .hz-cont{padding:6px 12px}
  .hz-cont b{font-size:26px}
}
.seg-idiomas{flex-wrap:wrap}
.seg-idiomas button{flex:1 1 calc(50% - 4px);padding:0 8px;font-size:14.5px}
/* En un portátil, el móvil del simulador cabe entero y acompaña a los mandos: se ve el cambio mientras se toca. */
@media (min-width:900px) and (max-height:820px){
  .sim{padding-block:clamp(40px,7svh,64px)}
  .sim .b-tit{font-size:clamp(32px,min(4vw,8svh),56px)}
  .sim-tel{width:min(290px,calc((100svh - 110px) / 2.02))}
  .sim-g{align-items:start}
  .sim-disp{position:sticky;top:84px}
}