/* v13 · explora — capa de la ronda v13 (29 oct 2026). Va al final de la cascada: aquí manda lo nuevo de esta área. «Explora tu próxima feria» (#explora, sustituye a «Míralo en tu terreno»). js/explora.js arma la feria en el lienzo #gl (fijo, z 5) dentro del rectángulo de #stage-explora; todo lo que va SOBRE el 3D (controles, tarjeta, filete, velo) lleva z 6-9 y la sección no crea contexto de apilamiento (sin transform, opacity ni filter propios), igual que el armador. Estados (clases en la sección): --construyendo (foto real + «Montando la feria»), --cambio (velo oscuro sube), --listo (3D y controles), --sin3d (respaldo: la foto, una línea y los accesos). Sin html.con3d siempre se ve el respaldo. Cápsulas, módulos, eyebrow y botones son los del sistema compartido (css/v13-marca.css); aquí solo van respaldos con :where() (especificidad 0: si marca los define, ganan los suyos). */ /* ---------- sección ---------- */ .explora{--ex-vidrio:rgba(12,8,30,.66);--ex-filete:rgba(243,238,227,.14);--ex-acento:var(--coral,#FF6F5E);--ex-acento-2:var(--naranja,#FF8A3D)} .explora-ancla{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;pointer-events:none} .explora-cab{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px 48px;margin-bottom:clamp(24px,2.8vw,40px)} .explora-cab-t{min-width:0;max-width:760px} .explora-cab h2{margin-top:16px} .explora-cab .capsulas{margin:0 0 6px} /* ---------- visor: el rectángulo donde el motor dibuja la feria ---------- */ .explora-visor{position:relative;height:clamp(520px,74vh,780px);background:var(--s-0,#0C0820);isolation:auto} /* filete fino y velo de lectura arriba y abajo: encima del 3D (z 6-7), sin bloquear el puntero */ .explora-visor::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border:1px solid rgba(201,162,78,.32);border-radius:var(--r-marco,3px);transition:border-color .4s,box-shadow .4s} .explora-visor::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .9s var(--curva-entrada,cubic-bezier(.16,1,.3,1)); background:linear-gradient(180deg,rgba(8,5,22,.42),rgba(8,5,22,0) 120px),linear-gradient(0deg,rgba(8,5,22,.5),rgba(8,5,22,0) 150px)} .explora--listo .explora-visor::before{opacity:1} .explora-visor:has(#stage-explora:focus-visible)::after{border-color:var(--cian,#46D6F0);box-shadow:inset 0 0 0 1px var(--cian,#46D6F0)} /* foto real (póster mientras se arma y respaldo sin 3D) */ .explora-foto{position:absolute;inset:0;display:block;overflow:hidden} .explora-foto img{width:100%;height:100%;object-fit:cover;object-position:40% 55%} .explora-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,32,.15),rgba(12,8,32,.2) 45%,rgba(12,8,32,.82));pointer-events:none} html.con3d .explora--listo .explora-foto{visibility:hidden} /* el lienzo: arrastre horizontal para girar; el vertical sigue bajando la página en el celular */ #stage-explora{inset:0;outline:none} #stage-explora.live{touch-action:pan-y;cursor:grab} #stage-explora.live:active{cursor:grabbing} #stage-explora.live.sobre-juego{cursor:pointer} html:not(.con3d) #stage-explora,.explora--sin3d #stage-explora{display:none} /* velo del cambio foto → 3D (sube 0.48 s, se va 0.9 s) */ .explora-velo{position:absolute;inset:0;z-index:7;pointer-events:none;background:var(--s-0,#0C0820);opacity:0;transition:opacity .48s ease} .explora--cambio .explora-velo{opacity:1} .explora--listo .explora-velo{opacity:0;transition:opacity .9s var(--curva-entrada,cubic-bezier(.16,1,.3,1))} /* «Montando la feria en 3D · 4/11» */ .explora-carga{position:absolute;z-index:8;left:50%;bottom:28px;display:flex;align-items:center;gap:12px;margin:0;padding:12px 18px;border-radius:999px; transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .6s ease,transform .7s var(--curva-entrada,cubic-bezier(.16,1,.3,1)),visibility 0s .7s; background:var(--ex-vidrio);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--ex-filete); font:500 13px/1.2 var(--f-texto);color:var(--marfil,#F3EEE3);white-space:nowrap} .explora-carga b{font:500 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--tinta-3,#9790AE)} .explora-carga-barra{position:relative;display:block;width:64px;height:2px;border-radius:2px;background:rgba(243,238,227,.14);overflow:hidden} .explora-carga-barra i{position:absolute;inset:0;background:var(--oro-logo,#C9A24E);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease} html.con3d .explora--construyendo .explora-carga,html.con3d .explora--cambio .explora-carga{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s} /* ---------- respaldo sin 3D: la foto, una línea y los accesos ---------- */ .explora-respaldo{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;padding:clamp(20px,3vw,40px)} .explora-respaldo-t{margin:0;max-width:34ch;font-family:var(--f-display);font-size:clamp(20px,1.8vw,28px);line-height:1.2;color:var(--marfil,#F3EEE3);text-wrap:balance} .explora-respaldo-acciones{display:flex;flex-wrap:wrap;gap:10px} html.con3d .explora:not(.explora--sin3d) .explora-respaldo{display:none} /* ---------- controles sobre el 3D ---------- */ .explora-hud{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .8s var(--curva-entrada,cubic-bezier(.16,1,.3,1)),visibility 0s .8s} .explora--listo .explora-hud{opacity:1;visibility:visible;transition-delay:.2s,0s} html:not(.con3d) .explora-hud,.explora--sin3d .explora-hud{display:none} .explora-hud>*{pointer-events:auto} .explora-hud>p{pointer-events:none} /* interruptores (Vista y Hora): píldora de vidrio oscuro con filete fino; el elegido en marfil */ .explora-seg{position:absolute;top:16px;left:16px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ex-vidrio);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--ex-filete)} .explora-seg--hora{left:auto;right:16px} .explora-seg button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;cursor:pointer; font:500 13px/1 var(--f-texto);letter-spacing:.01em;color:var(--tinta-2,#CFC9DF);transition:background-color .45s var(--curva,ease),color .45s var(--curva,ease);-webkit-tap-highlight-color:transparent} .explora-seg button svg{width:18px;height:18px;flex:none} @media(hover:hover){.explora-seg button:not(.on):hover{color:var(--marfil,#F3EEE3);background:rgba(243,238,227,.06)}} .explora-seg button.on{background:var(--marfil,#F3EEE3);color:#16102F} .explora-seg button:focus-visible{outline:2px solid var(--cian,#46D6F0);outline-offset:2px} /* pista breve (mono) bajo el interruptor de vista */ .explora-pista{position:absolute;top:74px;left:20px;max-width:min(620px,calc(100% - 440px));margin:0;font:400 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,227,.78);text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .8s ease} .explora--usada .explora-pista{opacity:.62} /* botones redondos: acercar / alejar (aérea), avanzar / retroceder (visitante) y volver al inicio */ .explora-lado{position:absolute;right:16px;bottom:76px;display:flex;gap:8px} .explora-ico{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--marfil,#F3EEE3); background:var(--ex-vidrio);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--ex-filete);transition:border-color .4s,background-color .4s,transform .25s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none} .explora-ico svg{width:20px;height:20px} @media(hover:hover){.explora-ico:hover{border-color:rgba(243,238,227,.4);background:rgba(28,20,58,.78)}} .explora-ico:active{transform:scale(.94)} .explora-ico:focus-visible{outline:2px solid var(--cian,#46D6F0);outline-offset:2px} .explora:not([data-explora-modo="visitante"]) .solo-pie,.explora[data-explora-modo="visitante"] .solo-aerea{display:none} /* lugares de la feria: fila que se desliza (sin desbordar la página) */ .explora-lugares{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px;scroll-padding-inline:12px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} .explora-lugares::-webkit-scrollbar{display:none} .explora-lugar{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;white-space:nowrap; font:500 13px/1 var(--f-texto);color:var(--marfil,#F3EEE3);background:var(--ex-vidrio);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--ex-filete); transition:border-color .45s var(--curva,ease),background-color .45s var(--curva,ease),color .45s;-webkit-tap-highlight-color:transparent} .explora-lugar::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(243,238,227,.35);transition:background-color .45s,box-shadow .45s} .explora-lugar--inicio::before{border-radius:1px;transform:rotate(45deg);background:var(--oro-logo,#C9A24E)} @media(hover:hover){.explora-lugar:hover{border-color:rgba(243,238,227,.38)}} .explora-lugar.on{border-color:var(--ex-acento);background:rgba(36,16,40,.82)} .explora-lugar.on::before{background:var(--ex-acento)} .explora-lugar:focus-visible{outline:2px solid var(--cian,#46D6F0);outline-offset:1px} .explora:not([data-explora-modo="visitante"]) .explora-lugar .t-pie,.explora[data-explora-modo="visitante"] .explora-lugar .t-aerea{display:none} /* nombre junto al puntero (computadora) */ .explora-etiqueta{position:absolute;top:0;left:0;z-index:9;pointer-events:none;padding:7px 11px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s ease; font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--marfil,#F3EEE3);background:rgba(12,8,30,.84);border:1px solid rgba(255,138,61,.42)} .explora-etiqueta.on{opacity:1} /* ---------- tarjeta del juego elegido ---------- */ .explora-tarjeta{position:absolute;z-index:9;top:74px;right:16px;width:min(360px,calc(100% - 32px));max-height:calc(100% - 74px - 132px);overflow:auto;overscroll-behavior:contain; padding:22px 22px 20px;border-radius:var(--r-tarjeta,16px);background:rgba(14,9,34,.88);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15); border:1px solid rgba(243,238,227,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); opacity:0;transform:translateY(12px);transition:opacity .6s var(--curva-entrada,cubic-bezier(.16,1,.3,1)),transform .8s var(--curva-entrada,cubic-bezier(.16,1,.3,1))} .explora-tarjeta.abierta{opacity:1;transform:none} .explora-tarjeta .capsulas{display:flex;flex-wrap:wrap;gap:8px;padding-right:44px} .explora-tarjeta-t{margin:14px 0 16px;font-family:var(--f-display);font-weight:var(--w-display,700);font-size:clamp(26px,2.1vw,34px);line-height:1.04;letter-spacing:var(--tr-display,.01em);color:var(--marfil,#F3EEE3);outline:none;text-wrap:balance} .explora-tarjeta-x{all:unset;box-sizing:border-box;position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--tinta-2,#CFC9DF);transition:background-color .3s,color .3s} .explora-tarjeta-x svg{width:18px;height:18px} @media(hover:hover){.explora-tarjeta-x:hover{background:rgba(243,238,227,.08);color:var(--marfil,#F3EEE3)}} .explora-tarjeta-x:focus-visible{outline:2px solid var(--cian,#46D6F0);outline-offset:-2px} .explora-tarjeta-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .explora-tarjeta-acciones .btn{flex:1 1 140px;min-width:0} .explora-tarjeta-acciones .btn svg{width:18px;height:18px;flex:none} /* respaldos del sistema compartido (marca los define en css/v13-marca.css y ganan: especificidad 0) */ :where(.explora) :where(.capsulas){display:flex;flex-wrap:wrap;gap:8px} :where(.explora) :where(.capsula){display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(243,238,227,.16);background:rgba(18,12,43,.55); font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--marfil,#F3EEE3)} :where(.explora) :where(.capsula b){font-weight:500;color:var(--naranja,#FF8A3D)} :where(.explora) :where(.capsula-punto){width:6px;height:6px;border-radius:50%;background:var(--naranja,#FF8A3D);flex:none} :where(.explora) :where(.capsula-sep){width:1px;height:14px;background:rgba(243,238,227,.22)} :where(.explora) :where(.capsula--sutil){color:var(--tinta-2,#CFC9DF);background:transparent} :where(.explora) :where(.modulos){display:flex;flex-wrap:wrap;gap:8px} :where(.explora) :where(.modulo){display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;flex:1 1 130px;padding:11px 14px;border-radius:12px;border:1px solid rgba(243,238,227,.1);background:rgba(243,238,227,.035)} :where(.explora) :where(.modulo-ico){grid-row:1/3;display:grid;place-items:center;color:var(--naranja,#FF8A3D)} :where(.explora) :where(.modulo small){font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3,#9790AE)} :where(.explora) :where(.modulo b){font:600 16px/1.2 var(--f-texto);color:var(--marfil,#F3EEE3)} /* ---------- tableta y celular ---------- */ @media(max-width:900px){ .explora-cab{align-items:flex-start;flex-direction:column;gap:14px} .explora-visor{height:min(74svh,620px);min-height:460px} .explora-seg{top:12px;left:12px} .explora-seg--hora{right:12px;left:auto} .explora-seg button{padding:0 13px} .explora-pista{top:68px;left:14px;max-width:calc(100% - 28px)} .explora-lado{right:12px;bottom:68px} .explora-lugares{left:8px;right:8px;bottom:10px} /* la tarjeta sube desde abajo (sobre la fila de lugares) y deja el juego arriba */ .explora-tarjeta{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:min(62%,420px);padding:18px 16px 16px;transform:translateY(24px)} .explora-tarjeta-t{font-size:clamp(24px,7vw,30px);margin:10px 0 12px} /* con la ficha abierta (hoja de abajo) lo que queda debajo se esconde: ni se encima ni recibe el foco */ .explora-lugares,.explora-lado{transition:opacity .45s ease,visibility 0s 0s} .explora--ficha .explora-lugares,.explora--ficha .explora-lado{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s} .explora-respaldo{padding:20px 16px} } @media(max-width:600px){ /* Día y Noche solo con ícono (el nombre queda para el lector de pantalla) para que quepan los dos interruptores */ .explora-seg--hora button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .explora-seg--hora button{padding:0 12px} .explora-seg button{gap:6px} .explora-carga{bottom:20px;font-size:12px} .explora-respaldo-acciones{width:100%} .explora-respaldo-acciones .btn{flex:1 1 auto} } /* ---------- movimiento reducido: todo aparece sin desplazarse ---------- */ @media(prefers-reduced-motion:reduce){ .explora-velo,.explora-hud,.explora-carga,.explora-tarjeta,.explora-visor::before,.explora-pista{transition:none!important} .explora-tarjeta,.explora-carga{transform:none} } /* el título recibe el foco al abrir la ficha con el teclado (para leerla y seguir con Tab a sus botones): sin anillo */ /* (el anillo global de :focus-visible lleva !important en sistema.css y en el