/* OneDistrict Core — bloque Recorrido (hero final aprobado 2026-10-25).
   Una sola escena fija. 0–.72 del scroll = recorrido en cuadros (ciudad → calle → giro → negocio → patio → celular);
   .72–.80 = la pantalla del celular crece hasta llenar todo; .80–1 = la historia sigue dentro del celular. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../../assets/fonts/jetbrains-mono-latin.woff2") format("woff2")}

/* Kadence da color y márgenes propios a títulos y párrafos: dentro del bloque se heredan y se anulan */
.od-recorrido.od-recorrido :is(h1,h2,h3,p){color:inherit;margin:0}
.od-recorrido.od-recorrido img{transition:none!important;max-width:none}
.od-recorrido.od-recorrido a{text-decoration:none}

/* La página que lleva este bloque usa la pantalla completa: se ocultan encabezado, título y pie del tema */
body:has(.od-recorrido) #masthead,body:has(.od-recorrido) .site-header,body:has(.od-recorrido) #colophon,body:has(.od-recorrido) .site-footer,
body:has(.od-recorrido) .entry-hero,body:has(.od-recorrido) .entry-header{display:none!important}
body:has(.od-recorrido) .content-container,body:has(.od-recorrido) .site-container{max-width:none!important;padding:0!important}
body:has(.od-recorrido) #primary,body:has(.od-recorrido) .content-area,body:has(.od-recorrido) .content-wrap,body:has(.od-recorrido) .entry-content-wrap,
body:has(.od-recorrido) .single-content,body:has(.od-recorrido) .entry-content{margin:0!important;padding:0!important}
body:has(.od-recorrido) .entry.single-entry{box-shadow:none!important;border:0!important;background:transparent!important}
/* "sticky" deja de funcionar si un contenedor del tema recorta el desbordamiento */
body:has(.od-recorrido) #wrapper,body:has(.od-recorrido) .site,body:has(.od-recorrido) #inner-wrap,body:has(.od-recorrido) .site-main{overflow:visible!important}
body:has(.od-recorrido){background:#000!important}
html:has(.od-recorrido){scroll-behavior:auto!important;scroll-padding-top:84px}

.od-recorrido{
  --negro:#000; --blanco:#fff; --marino:#0B2A6F; --marino-l:#8FA8EC; --papel:#f6f3ee; --tinta:#14110d; --gris:#6b665e;
  --wa:#0b141a; --wa-in:#202c33; --wa-out:#005c4b;
  --display:"Archivo",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --curva:cubic-bezier(.23,1,.32,1);
  display:block;margin:0!important;max-width:none!important;width:100%;
  background:var(--negro);color:var(--blanco);font-family:var(--display);-webkit-font-smoothing:antialiased;color-scheme:dark
}
.od-recorrido *{box-sizing:border-box}

.od-recorrido .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) 18px;color:var(--blanco);transition:color .4s var(--curva)}
body.admin-bar .od-recorrido .nav{top:var(--wp-admin--admin-bar--height,32px)}
.od-recorrido .nav .logo{display:block;line-height:0}
.od-recorrido .nav img{height:26px;width:auto;display:block;transition:filter .4s var(--curva)}
.od-recorrido .nav .links{display:flex;gap:28px;font-size:14px;font-weight:500}
.od-recorrido .nav .links a{color:inherit}
.od-recorrido .nav .cta{font-size:14px;font-weight:700;padding:10px 16px;background:var(--blanco);color:var(--negro);transition:background .3s,color .3s}
.od-recorrido .nav.claro{color:var(--tinta)} .od-recorrido .nav.claro img{filter:invert(1)} .od-recorrido .nav.claro .cta{background:var(--marino);color:var(--blanco)}
.od-recorrido .nav.solido{background:var(--blanco);color:var(--tinta);box-shadow:0 1px 0 #e3e4e8}
.od-recorrido .nav.solido img{filter:invert(1)} .od-recorrido .nav.solido .cta{background:var(--marino);color:var(--blanco)}
@media (max-width:860px){.od-recorrido .nav .links{display:none}}

.od-recorrido .hero{position:relative;height:1000vh}
.od-recorrido .escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0f1a}
.od-recorrido canvas.recorrido{position:absolute;inset:0;width:100%;height:100%;display:block}
.od-recorrido .velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.45) 34%,rgba(0,0,0,.05) 62%,rgba(0,0,0,.5) 100%)}
.od-recorrido .cargando{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* Textos sobre el recorrido */
.od-recorrido .uno{position:absolute;left:0;right:0;top:clamp(96px,14vh,140px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-inline:16px;will-change:transform,opacity}
.od-recorrido .ceja{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--marino-l)}
.od-recorrido h1{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(38px,5.4vw,82px);line-height:.98;letter-spacing:-.01em;text-wrap:balance;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.od-recorrido .uno p{font-size:clamp(16px,1.3vw,19px);line-height:1.5;max-width:52ch;color:#f1efe9;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.od-recorrido .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.od-recorrido .btn{font-weight:700;font-size:15px;padding:15px 22px;border:1.5px solid currentColor;color:var(--blanco);text-decoration:none;transition:transform .16s var(--curva),background .2s}
.od-recorrido .btn.p{background:var(--marino);border-color:var(--marino)}
.od-recorrido .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.od-recorrido .btn:hover{background:rgba(255,255,255,.12)}.od-recorrido .btn.p:hover{background:#163a8f}}
.od-recorrido .linea{position:absolute;left:clamp(16px,6vw,96px);bottom:clamp(90px,14vh,150px);max-width:min(620px,calc(100vw - 32px));font-weight:800;font-stretch:110%;font-size:clamp(28px,3.4vw,52px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45);opacity:0;will-change:opacity}
.od-recorrido .linea span{display:block;overflow:hidden}
.od-recorrido .linea i{display:block;font-style:normal;will-change:transform}

/* Pantalla del celular que crece hasta llenar la escena */
.od-recorrido .pantalla{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--papel);color:var(--tinta);overflow:hidden;opacity:0;will-change:transform}
.od-recorrido .etapa{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:96px clamp(24px,6vw,96px) 48px;gap:40px}
.od-recorrido .lado{display:flex;flex-direction:column;gap:18px;max-width:520px}
.od-recorrido .paso-n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--marino)}
.od-recorrido .lado h2{font-family:var(--display);font-weight:800;font-stretch:110%;font-size:clamp(30px,3.4vw,54px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.od-recorrido .lado p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--gris);max-width:44ch}
.od-recorrido .titulos{position:relative;height:clamp(250px,30vh,300px)}
.od-recorrido .titulo{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px}
.od-recorrido .titulo > *{will-change:transform,opacity}
.od-recorrido .pasos{display:flex;gap:8px}
.od-recorrido .pasos b{height:4px;flex:1;background:#ddd6cb;position:relative;overflow:hidden}
.od-recorrido .pasos b i{position:absolute;inset:0;background:var(--marino);transform:scaleX(0);transform-origin:left}

.od-recorrido .tel{pointer-events:none;justify-self:center;width:min(340px,30vw);aspect-ratio:9/19;border-radius:46px;background:#0c0c0e;padding:11px;box-shadow:0 40px 90px rgba(40,30,15,.28),0 0 0 1px #2c2c30 inset;will-change:transform}
.od-recorrido .tel .vidrio{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.od-recorrido .pista{position:absolute;inset:0;display:flex;width:300%;will-change:transform}
.od-recorrido .app{width:33.3334%;height:100%;display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.35;color:#111}
/* Anuncio */
.od-recorrido .ig-top{display:flex;align-items:center;gap:10px;padding:46px 14px 10px}
.od-recorrido .av{width:32px;height:32px;border-radius:50%;background:#1f5a44 var(--od-tienda) center/cover;flex:none}
.od-recorrido .ig-top b{font-size:13px}.od-recorrido .ig-top small{display:block;color:#777;font-size:11px}
.od-recorrido .ig-img{flex:1;background:var(--od-tienda) center/cover}
.od-recorrido .ig-cta{display:flex;justify-content:space-between;align-items:center;background:#efefef;padding:12px 14px;font-weight:700;transition:background .2s}
.od-recorrido .ig-cta span{color:#0b5cd5}
.od-recorrido .ig-cta.toque{background:#d8d8d8}
.od-recorrido .ig-txt{padding:10px 14px 18px;color:#222}
/* WhatsApp */
.od-recorrido .app.wa{background:var(--wa);color:#e9edef}
.od-recorrido .wa-top{background:#202c33;padding:44px 12px 10px;display:flex;gap:10px;align-items:center}
.od-recorrido .wa-top small{display:block;color:#8696a0;font-size:11px}
.od-recorrido .wa-cuerpo{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:8px}
.od-recorrido .b{max-width:84%;padding:8px 10px;border-radius:9px;opacity:0;transform:translateY(10px)}
.od-recorrido .b i{display:block;text-align:right;font-style:normal;color:#8696a0;font-size:10px;margin-top:2px}
.od-recorrido .b.in{background:var(--wa-in);align-self:flex-start}
.od-recorrido .b.out{background:var(--wa-out);align-self:flex-end}
.od-recorrido .b .ia{display:block;font-size:10px;color:#9fe1cb;margin-bottom:2px}
.od-recorrido .b u{color:#53bdeb;text-decoration:none}
.od-recorrido .esc{align-self:flex-end;background:var(--wa-out);padding:10px 14px;border-radius:9px;display:flex;gap:4px;opacity:0}
.od-recorrido .esc span{width:6px;height:6px;border-radius:50%;background:#cfe9e1;animation:od-rec-pt 1s infinite}
.od-recorrido .esc span:nth-child(2){animation-delay:.15s}.od-recorrido .esc span:nth-child(3){animation-delay:.3s}
@keyframes od-rec-pt{0%,60%,100%{opacity:.3}30%{opacity:1}}
/* Tienda */
.od-recorrido .st-top{padding:46px 16px 12px;font-weight:800;letter-spacing:.08em;font-size:15px;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
.od-recorrido .st-top small{font-weight:500;letter-spacing:0;color:#777}
.od-recorrido .st-img{height:42%;background:var(--od-producto) center/cover}
.od-recorrido .st-info{padding:12px 16px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid #eee}
.od-recorrido .st-info small{color:#777}
.od-recorrido .st-tot{padding:12px 16px;display:flex;justify-content:space-between;font-weight:700}
.od-recorrido .st-btn{margin:4px 16px;background:#111;color:#fff;text-align:center;padding:14px;font-weight:700;transition:transform .16s var(--curva),background .2s}
.od-recorrido .st-btn.toque{transform:scale(.97)}
.od-recorrido .st-btn.listo{background:#17643a}
.od-recorrido .st-ok{margin:10px 16px;background:#e7f6ec;color:#17643a;padding:12px;text-align:center;font-weight:700;opacity:0;transform:translateY(8px)}

.od-recorrido .aviso{position:absolute;right:clamp(16px,3vw,40px);top:88px;width:min(330px,calc(100vw - 32px));background:#fff;color:#111;border-radius:16px;padding:12px 14px;display:flex;gap:12px;align-items:center;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;box-shadow:0 18px 50px rgba(40,30,15,.18);opacity:0;transform:translateY(-14px)}
.od-recorrido .aviso .ic{width:36px;height:36px;border-radius:9px;background:#1f5a44;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.od-recorrido .aviso small{display:block;color:#666;font-size:12px}

.od-recorrido .final{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:96px clamp(24px,6vw,96px) 48px;pointer-events:none}
.od-recorrido .final .grande{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(52px,8vw,128px);line-height:.9;letter-spacing:-.01em;color:var(--tinta)}
.od-recorrido .final p{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--gris);max-width:40ch}
/* Las capas de la pantalla (celular y escena final) no deben tapar los botones del inicio; la escena final se activa en view.js */
.od-recorrido .pantalla,.od-recorrido .etapa{pointer-events:none}
.od-recorrido .final .btns{justify-content:flex-start;pointer-events:inherit} /* solo se tocan cuando la escena final se ve (view.js) */
.od-recorrido .final .btn{color:var(--tinta)} .od-recorrido .final .btn.p{color:#fff}
.od-recorrido .final > *{opacity:0;transform:translateY(24px)}

@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .od-recorrido .hero{height:1150vh}
  .od-recorrido .linea{bottom:auto;top:calc(90px + env(safe-area-inset-top,0px));left:16px;right:16px}
  /* teléfono: sombras más cortas (una sombra muy difuminada que se mueve es lo más caro de dibujar) */
  .od-recorrido h1,.od-recorrido .linea{text-shadow:0 2px 10px rgba(0,0,0,.5)}
  .od-recorrido .uno p{text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .od-recorrido .etapa{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:84px 16px 20px;gap:14px;align-items:start}
  .od-recorrido .titulos{height:178px}
  .od-recorrido .lado h2{font-size:28px} .od-recorrido .lado p{font-size:15px}
  .od-recorrido .tel{width:auto;height:min(58vh,520px);justify-self:center}
  .od-recorrido .aviso{top:auto;bottom:16px;left:16px;right:16px;width:auto}
}
@media (prefers-reduced-motion:reduce){.od-recorrido .esc span{animation:none}}

/* =====================================================================================
   Versión nueva (2026-11-11, pedido de Sergio): sin etiquetas monoespaciadas, capa de entrada,
   propuestas de letra (data-tipo a|b|c) y de botón (data-boton 1|2|3) para elegir.
   ===================================================================================== */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url("../../assets/fonts/unbounded-variable-latin.woff2") format("woff2")}
@font-face{font-family:"Anybody";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url("../../assets/fonts/anybody-variable-latin.woff2") format("woff2")}

/* Letra de los títulos (ronda 2: letras anchas, en minúsculas). La comparten el hero y el bloque Inicio.
   A Unbounded · B Anybody expandida · C Archivo expandida (la letra de la marca).
   --od-titulo-escala achica un poco los tamaños: una letra ancha ocupa más espacio por palabra. */
html:has(.od-recorrido--nueva[data-tipo="a"]){--od-titulo:"Unbounded","Archivo",system-ui,sans-serif;--od-titulo-peso:600;--od-titulo-ancho:100%;--od-titulo-esp:-.035em;--od-titulo-escala:.8}
html:has(.od-recorrido--nueva[data-tipo="b"]){--od-titulo:"Anybody","Archivo",system-ui,sans-serif;--od-titulo-peso:800;--od-titulo-ancho:130%;--od-titulo-esp:-.02em;--od-titulo-escala:.84}
html:has(.od-recorrido--nueva[data-tipo="c"]){--od-titulo:"Archivo",system-ui,sans-serif;--od-titulo-peso:700;--od-titulo-ancho:125%;--od-titulo-esp:-.03em;--od-titulo-escala:.86}
/* Forma de los botones y las cajas: también la comparte el bloque Inicio */
html:has(.od-recorrido--nueva[data-boton="1"]){--od-radio-btn:6px;--od-radio-caja:10px}
html:has(.od-recorrido--nueva[data-boton="2"]){--od-radio-btn:999px;--od-radio-caja:22px}
html:has(.od-recorrido--nueva[data-boton="3"]){--od-radio-btn:0px;--od-radio-caja:0px}

.od-recorrido--nueva :is(h1,.linea,.lado h2,.final .grande,.intro-frase){font-family:var(--od-titulo);font-weight:var(--od-titulo-peso);font-stretch:var(--od-titulo-ancho);letter-spacing:var(--od-titulo-esp)}
.od-recorrido--nueva h1{font-size:calc(clamp(40px,5.6vw,84px) * var(--od-titulo-escala,1));line-height:1.06;max-width:15ch}
.od-recorrido--nueva .linea{font-size:calc(clamp(28px,3.4vw,52px) * var(--od-titulo-escala,1));line-height:1.08}
.od-recorrido--nueva .lado h2{font-size:calc(clamp(30px,3.4vw,54px) * var(--od-titulo-escala,1));line-height:1.06}
@media (max-width:760px){.od-recorrido--nueva .lado h2{font-size:calc(28px * var(--od-titulo-escala,1))}}
/* Más sombra detrás del texto del inicio: el párrafo cae sobre la parte clara de la ciudad */
.od-recorrido--nueva .velo{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.2) 66%,rgba(0,0,0,.5) 100%)}
.od-recorrido--nueva .uno p{max-width:46ch;text-wrap:pretty;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.55)}
.od-recorrido--nueva .final .grande{text-transform:none;font-size:calc(clamp(56px,8.4vw,136px) * var(--od-titulo-escala,1));line-height:1}
.od-recorrido--nueva .cargando{font-family:var(--display);letter-spacing:0;text-transform:none;font-size:14px}
.od-recorrido--nueva .paso-n{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none}
.od-recorrido--nueva .nota-final{font-size:clamp(15px,1.2vw,18px);font-weight:600;color:var(--marino)}

/* Botones de la versión nueva */
.od-recorrido--nueva .btn,.od-recorrido--nueva .nav .cta{display:inline-flex;align-items:center;gap:10px;border-radius:var(--od-radio-btn,999px);white-space:nowrap;transition:transform .16s var(--curva),background-color .2s,color .2s,border-color .2s}
.od-recorrido--nueva .btn{padding:15px 24px;font-size:16px;font-weight:600;border:1px solid rgba(255,255,255,.45);background:rgba(7,11,22,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.od-recorrido--nueva .btn.p{background:var(--marino);border-color:var(--marino);color:#fff}
.od-recorrido--nueva .nav .cta{padding:10px 18px;font-weight:600}
.od-recorrido--nueva .final .btn{color:var(--tinta);border-color:rgba(20,17,13,.22);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.od-recorrido--nueva .final .btn.p{color:#fff;border-color:var(--marino);background:var(--marino)}
/* Ronda 2 de botones (Sergio: "no tan genéricos"). Solo blanco, negro y marino: nada de azul claro.
   1 Bloque: esquinas casi rectas y la flecha en su propia casilla.
   2 Con precio: el botón principal lleva "desde Q299" en una etiqueta blanca (data-desde).
   3 Sello: rectángulo con sombra sólida desplazada; al tocarlo se hunde. */
.od-recorrido--nueva[data-boton="1"] .btn.p{padding:0 0 0 24px;min-height:54px;gap:0}
.od-recorrido--nueva[data-boton="1"] .btn.p::after{content:"→";align-self:stretch;display:grid;place-items:center;width:54px;margin-left:22px;border-left:1px solid rgba(255,255,255,.3);font-weight:500;transition:background-color .2s}
.od-recorrido--nueva[data-boton="2"] .btn.p{padding:7px 7px 7px 24px;gap:14px}
.od-recorrido--nueva[data-boton="2"] .btn.p::after{content:"→";display:grid;place-items:center;min-width:40px;height:40px;padding:0 14px;border-radius:999px;background:#fff;color:var(--marino);font-size:14px;font-weight:700}
.od-recorrido--nueva[data-boton="2"] .btn.p[data-desde]::after{content:attr(data-desde)}
.od-recorrido--nueva[data-boton="2"] .btn:not(.p){border-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding-inline:8px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.od-recorrido--nueva[data-boton="3"] .btn{border-width:2px;border-color:#fff}
.od-recorrido--nueva[data-boton="3"] .btn.p{border-color:#fff;box-shadow:5px 5px 0 #fff;transition:transform .12s var(--curva),box-shadow .12s var(--curva),background-color .2s}
.od-recorrido--nueva[data-boton="3"] .final .btn{border-color:var(--tinta)}
.od-recorrido--nueva[data-boton="3"] .final .btn.p{border-color:var(--tinta);box-shadow:5px 5px 0 var(--tinta)}
.od-recorrido--nueva .btn:active,.od-recorrido--nueva .nav .cta:active{transform:scale(.97)}
.od-recorrido--nueva[data-boton="3"] .btn.p:active{transform:translate(5px,5px);box-shadow:0 0 0 transparent}
@media (hover:hover) and (pointer:fine){
  .od-recorrido--nueva .btn:hover{background:rgba(255,255,255,.18)}
  .od-recorrido--nueva .btn.p:hover{background:#071d4f;border-color:#071d4f}
  .od-recorrido--nueva[data-boton="1"] .btn.p:hover::after{background:rgba(255,255,255,.12)}
  .od-recorrido--nueva[data-boton="3"] .btn.p:hover{border-color:#fff;transform:translate(-2px,-2px);box-shadow:7px 7px 0 #fff}
  .od-recorrido--nueva[data-boton="3"] .final .btn.p:hover{border-color:var(--tinta);box-shadow:7px 7px 0 var(--tinta)}
  .od-recorrido--nueva .final .btn:not(.p):hover{background:rgba(20,17,13,.06)}
}
.od-recorrido--nueva .btn:focus-visible,.od-recorrido--nueva .nav .cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.od-recorrido--nueva .final .btn:focus-visible{outline-color:var(--marino)}
@media (max-width:480px){.od-recorrido--nueva .uno .btns{flex-direction:column;align-items:stretch;width:min(320px,100%)}.od-recorrido--nueva .uno .btn{justify-content:center}}

/* Capa de entrada: "Vende mientras duermes" mientras cargan los cuadros */
html.od-intro-activa{overflow:hidden}
.od-recorrido .intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#070b16;color:#fff;clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.od-recorrido .intro-frase{margin:0;text-align:center;font-size:calc(clamp(46px,9vw,148px) * var(--od-titulo-escala,1));line-height:1.04;text-wrap:balance}
.od-recorrido .intro-frase span{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:bottom}
.od-recorrido .intro-frase i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .9s cubic-bezier(.23,1,.32,1)}
.od-recorrido .intro-frase span:nth-child(2) i{transition-delay:.12s}
.od-recorrido .intro-frase span:nth-child(3) i{transition-delay:.24s}
.od-recorrido .intro.entra .intro-frase i{transform:none}
.od-recorrido .intro.sale{clip-path:inset(0 0 100% 0)}
.od-recorrido .intro.sale .intro-frase{transform:translateY(-6vh);transition:transform .9s cubic-bezier(.76,0,.24,1)}
@media (prefers-reduced-motion:reduce){
  .od-recorrido .intro{transition:opacity .4s}
  .od-recorrido .intro-frase i{transform:none;transition:none}
  .od-recorrido .intro.sale{clip-path:none;opacity:0}
}

/* Selector de propuestas (solo en la página de prueba) */
.od-propuestas{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;gap:6px;align-items:center;padding:6px;background:rgba(7,11,22,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:999px;font:600 13px/1 "Archivo",system-ui,sans-serif;color:#fff}
.od-propuestas span{padding:0 6px 0 10px;color:rgba(255,255,255,.7);white-space:nowrap}
@media (max-width:520px){.od-propuestas{gap:2px;font-size:12px}.od-propuestas span{padding:0 4px 0 8px}.od-propuestas a{min-width:30px;height:30px;padding:0 4px}}
.od-propuestas a{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;color:#fff;text-decoration:none}
.od-propuestas a[aria-current]{background:#fff;color:#070b16}