/* asturGuÍA (guía de audio por geoposición) · prototipo.
Referencias de diseño: Kultiveret (Awwwards SOTD 27/04/2025; CSSDA WOTD 19/07/2025) y, en la segunda pasada,
Niarra Travel (Awwwards SOTD 22/06/2021; CSS Winner SOTD 27/06/2021). Ver DISENO.md. */
/* Tipografías propias (sin llamadas a servidores externos) */
@font-face { font-family: 'Epilogue'; font-weight: 100 900; font-style: normal; font-display: swap;
src: url('../fuentes/epilogue-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Epilogue'; font-weight: 100 900; font-style: normal; font-display: swap;
src: url('../fuentes/epilogue-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Epilogue'; font-weight: 100 900; font-style: italic; font-display: swap;
src: url('../fuentes/epilogue-latin-wght-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-weight: 100 900; font-style: italic; font-display: swap;
src: url('../fuentes/fraunces-latin-wght-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-weight: 100 900; font-style: italic; font-display: swap;
src: url('../fuentes/fraunces-latin-ext-wght-italic.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap;
src: url('../fuentes/inter-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap;
src: url('../fuentes/inter-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap;
src: url('../fuentes/inter-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 400; font-display: swap; src: url('../fuentes/noto-sans-arabic-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 600; font-display: swap; src: url('../fuentes/noto-sans-arabic-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Nastaliq Urdu'; font-weight: 400; font-display: swap; src: url('../fuentes/noto-nastaliq-urdu-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Nastaliq Urdu'; font-weight: 600; font-display: swap; src: url('../fuentes/noto-nastaliq-urdu-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans Devanagari'; font-weight: 400; font-display: swap; src: url('../fuentes/noto-sans-devanagari-devanagari-400-normal.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Sans Devanagari'; font-weight: 600; font-display: swap; src: url('../fuentes/noto-sans-devanagari-devanagari-600-normal.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Sans Bengali'; font-weight: 400; font-display: swap; src: url('../fuentes/noto-sans-bengali-bengali-400-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CF7, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: 'Noto Sans Bengali'; font-weight: 600; font-display: swap; src: url('../fuentes/noto-sans-bengali-bengali-600-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CF7, U+200C-200D, U+20B9, U+25CC; }
:root {
--papel: #EDECE2; /* fondo cálido (de la referencia) */
--papel-2: #E6E3D9;
--tinta: #1D1917; /* texto y botones (de la referencia) */
--azul: #5A8DB0; /* acento: palabras en cursiva y estados (de la referencia) */
--azul-suave: #BFCCD2;
--ocre: #906036;
--barra: 34px; /* alto de la franja «En construcción» */
--titulos: 'Epilogue', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
--cuerpo: 'Inter', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
--radio-boton: 2px;
--ease: cubic-bezier(.22,.8,.2,1);
/* Segunda pasada (Niarra Travel): color a pantalla completa, naranja de acción, serif cursiva */
--bosque: #283A2C; /* verde bosque (Niarra #283A2C): pantallas y bloques a color completo */
--crema: #F1EFEC; /* (Niarra #F1EFEC) texto sobre bosque */
--naranja: #FC6220; /* (Niarra #FC6220) acción y estado «sonando»; texto oscuro encima */
--naranja-claro: #FF7A3D;/* naranja para texto grande sobre bosque (contraste 4,7:1) */
--salvia: #B1B886; /* (Niarra #B1B886) etiquetas sobre bosque (contraste 5,8:1) */
--acento-texto: #AC3400; /* (Niarra #AC3400) naranja oscuro para texto sobre crema (contraste > 5:1) */
--azul-texto: #2F5F82; /* azul de Kultiveret oscurecido para texto (5,7:1 sobre crema) */
--cursiva: 'Fraunces', var(--titulos);
--ease-viaje: cubic-bezier(.5, 0, .1, 1); /* curva de Niarra, usada en cortinas y reproductor */
}
html[lang="ur"] { --titulos: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; --cuerpo: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; }
html[lang="ar"] { --titulos: 'Noto Sans Arabic', system-ui, sans-serif; --cuerpo: 'Noto Sans Arabic', system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 64px); }
body { margin: 0; background: var(--papel); color: var(--tinta); transition: background-color .6s var(--ease-viaje), color .6s var(--ease-viaje); font-family: var(--cuerpo); font-size: 16px; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 3px; }
body.portada :focus-visible, .simulacion :focus-visible, .reproductor.sonando :focus-visible, .llegada :focus-visible { outline-color: var(--naranja-claro); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup { font-size: .62em; vertical-align: super; line-height: 0; font-weight: 500; letter-spacing: .02em; opacity: .75; }
/* Los textos largos de árabe, urdu e hindi necesitan más interlínea */
html[lang="ar"] body, html[lang="ur"] body { line-height: 1.8; }
html[lang="ur"] body { line-height: 2.2; }
html[lang="ur"] .lema { line-height: 1.9; font-size: clamp(2.6rem, 13vw, 5.4rem); }
html[lang="ur"] .lema-linea { padding-block: .1em .25em; }
html[lang="ur"] .parada-nombre, html[lang="ur"] .repro-titulo strong { line-height: 2; }
html[lang="hi"] body, html[lang="bn"] body { line-height: 1.7; }
html[lang="zh"] body { line-height: 1.7; }
/* ---------- Franja «En construcción» (obligatoria) ---------- */
.construccion { position: sticky; top: 0; z-index: 2000; height: var(--barra); display: flex; align-items: center; justify-content: center; padding: 0 12px;
background: repeating-linear-gradient(-45deg, #1D1917 0 14px, #2c2623 14px 28px); color: #EDECE2; text-align: center;
font: 600 .72rem/1.1 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(241,239,236,.28); }
html[lang="ar"] .construccion, html[lang="ur"] .construccion, html[lang="hi"] .construccion, html[lang="bn"] .construccion, html[lang="zh"] .construccion { letter-spacing: 0; text-transform: none; font-size: .8rem; }
/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: var(--barra); z-index: 1500; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(var(--papel) 70%, rgba(237,236,226,0)); }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 1.35rem/1 'Epilogue', sans-serif; letter-spacing: -.06em; }
.onda { width: 40px; height: 12px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.onda.grande { width: 84px; height: 24px; flex: none; }
.menu-boton { width: 44px; height: 44px; border: 0; background: var(--tinta); display: inline-grid; place-content: center; gap: 7px; border-radius: 0; }
.menu-boton i { display: block; width: 22px; height: 2px; background: var(--papel); transition: transform .35s var(--ease); }
.menu-boton:hover i:first-child, .menu-boton:focus-visible i:first-child { transform: translateX(3px); }
.menu-boton:hover i:last-child, .menu-boton:focus-visible i:last-child { transform: translateX(-3px); }
.menu-boton.cerrar i:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-boton.cerrar i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
/* ---------- Portada: pantalla completa en verde bosque (idea de Niarra: color a pantalla completa) ---------- */
body.portada { background: var(--bosque); color: var(--crema); }
body.portada .cabecera { background: linear-gradient(var(--bosque) 70%, rgba(40,58,44,0)); }
body.portada .marca { color: var(--crema); }
body.portada .onda { stroke: var(--naranja-claro); }
body.portada .menu-boton { background: var(--crema); }
body.portada .menu-boton i { background: var(--bosque); }
.fondo-portada { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-viaje); }
body.portada .fondo-portada { opacity: 1; }
.fondo-portada svg { position: absolute; inset-inline-end: -38vw; bottom: -6vh; width: 150vw; max-width: 1500px; height: auto; fill: none; stroke: var(--salvia); stroke-width: 1.4; opacity: .38; }
.fondo-portada svg path:nth-child(3n) { stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 2.2; }
[dir="rtl"] .fondo-portada svg { transform: scaleX(-1); }
.pantalla-portada { position: relative; z-index: 1; }
.pantalla-portada { padding: 8px 20px 48px; max-width: 760px; margin: 0 auto; }
.lema { margin: 4vh 0 0; font: 600 clamp(3.4rem, 17vw, 7.5rem)/.92 var(--titulos); letter-spacing: -.07em; }
html[lang="ar"] .lema, html[lang="ur"] .lema, html[lang="hi"] .lema, html[lang="bn"] .lema, html[lang="zh"] .lema { letter-spacing: 0; line-height: 1.15; font-size: clamp(3rem, 15vw, 6.4rem); }
.lema-linea { display: block; overflow: hidden; padding-bottom: .06em; }
.lema-linea.desplazada { padding-inline-start: 18vw; }
.palabra { display: inline-block; transform: translateY(105%); animation: sube 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
.palabra.acento { color: var(--naranja-claro); font-family: var(--cursiva); font-style: italic; font-weight: 300; }
html[lang="ar"] .palabra.acento, html[lang="ur"] .palabra.acento { font-family: var(--titulos); }
html[lang="ar"] .palabra.acento, html[lang="ur"] .palabra.acento, html[lang="zh"] .palabra.acento, html[lang="hi"] .palabra.acento, html[lang="bn"] .palabra.acento { font-style: normal; font-weight: 400; }
@keyframes sube { to { transform: translateY(0); } }
.intro, .selector, .avisos { opacity: 0; transform: translateY(14px); animation: aparece .9s var(--ease) forwards; animation-delay: calc(var(--i, 2) * 160ms + 300ms); }
@keyframes aparece { to { opacity: 1; transform: none; } }
.intro { max-width: 34ch; margin: 28px 0 32px; font-size: 1.05rem; color: var(--crema); }
.selector { display: grid; gap: 26px; }
.campo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.campo-etiqueta { color: var(--salvia); font: 500 .78rem/1 var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; padding: 0; }
html[lang="ar"] .campo-etiqueta, html[lang="ur"] .campo-etiqueta, html[lang="hi"] .campo-etiqueta, html[lang="bn"] .campo-etiqueta, html[lang="zh"] .campo-etiqueta { letter-spacing: 0; text-transform: none; font-size: .95rem; }
select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px; padding: 14px 44px 14px 16px; border: 1px solid var(--tinta); background: transparent url("data:image/svg+xml;utf8,") no-repeat right 16px center; border-radius: var(--radio-boton); font-size: 1.05rem; }
select option { color: #1D1917; background: #F1EFEC; }
body.portada select { border-color: var(--crema); color: var(--crema); background-image: url("data:image/svg+xml;utf8,"); }
[dir="rtl"] select { padding: 14px 16px 14px 44px; background-position: left 16px center; }
.idiomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.idiomas button { padding: 12px 10px; border: 1px solid var(--tinta); background: transparent; border-radius: var(--radio-boton); font-size: 1rem; transition: background .25s, color .25s, transform .25s var(--ease); min-height: 48px; }
.idiomas button:hover { transform: translateY(-2px); }
body.portada .idiomas button { border-color: rgba(241,239,236,.7); color: var(--crema); }
.idiomas button[aria-checked="true"], body.portada .idiomas button[aria-checked="true"] { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); font-weight: 600; }
.empezar { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; border: 0; min-height: 60px; background: var(--naranja); color: var(--tinta); border-radius: var(--radio-boton); font: 600 1.25rem/1 var(--titulos); letter-spacing: -.02em; transition: transform .3s var(--ease), background .3s; }
.empezar:hover { background: var(--naranja-claro); }
html[lang="ar"] .empezar, html[lang="ur"] .empezar { letter-spacing: 0; }
.empezar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .35s var(--ease); }
[dir="rtl"] .empezar svg { transform: scaleX(-1); }
.empezar:hover svg { transform: translateX(6px); }
[dir="rtl"] .empezar:hover svg { transform: scaleX(-1) translateX(6px); }
.empezar:active { transform: scale(.985); }
.empezar:disabled { opacity: .6; }
.avisos { margin-top: 30px; display: grid; gap: 10px; }
.aviso { margin: 0; font-size: .86rem; line-height: 1.5; max-width: 52ch; padding-inline-start: 12px; border-inline-start: 2px solid var(--azul-suave); }
.aviso.privacidad { border-inline-start-color: var(--naranja); font-weight: 500; }
body.portada .aviso { color: var(--crema); border-inline-start-color: var(--salvia); }
body.portada .aviso.privacidad { border-inline-start-color: var(--naranja-claro); }
/* ---------- Guía ---------- */
body.en-guia { overflow: hidden; height: 100dvh; }
.pantalla-guia { position: fixed; inset: calc(var(--barra) + 72px) 0 0 0; display: flex; flex-direction: column; background: var(--papel); overflow-y: auto; overscroll-behavior: contain; }
.subcabecera { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 16px 8px; }
.volver { border: 0; background: none; padding: 8px 0; min-height: 44px; font-weight: 500; font-size: .9rem; }
[dir="rtl"] .volver span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
.titulo-ciudad { margin: 0; font: 600 1.7rem/1 var(--titulos); letter-spacing: -.06em; text-align: center; }
html[lang="ar"] .titulo-ciudad, html[lang="ur"] .titulo-ciudad { letter-spacing: 0; }
.pestanas { display: inline-flex; border: 1px solid var(--tinta); border-radius: var(--radio-boton); overflow: hidden; }
.pestanas button { border: 0; background: transparent; padding: 8px 14px; min-height: 44px; font-size: .85rem; font-weight: 500; }
.pestanas button[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.estado-gps { margin: 0 16px 8px; padding: 8px 12px; font-size: .84rem; background: var(--papel-2); border-inline-start: 3px solid var(--naranja); min-height: 38px; display: flex; align-items: center; }
.estado-gps[data-tipo="error"] { border-inline-start-color: var(--ocre); }
.estado-gps[data-tipo="fin"] { border-inline-start-color: var(--tinta); font-weight: 600; }
.cuerpo { flex: 1 0 auto; min-height: 40dvh; position: relative; }
.panel { position: absolute; inset: 0; }
.panel-mapa { padding: 0 16px; }
/* Marco con forma de arco, como los «ojos de cerradura» de la referencia */
.mapa-arco { height: 100%; border-radius: 999px 999px 4px 4px; overflow: hidden; border: 1px solid var(--tinta); background: var(--azul-suave); }
@media (min-width: 900px) { .mapa-arco { border-radius: 24px; } }
#mapa { width: 100%; height: 100%; background: var(--azul-suave); }
.panel-lista { overflow: auto; padding: 0 16px 12px; -webkit-overflow-scrolling: touch; }
.paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.parada { opacity: 0; transform: translateY(16px); animation: aparece .7s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms); }
.parada.desplazada { padding-inline-start: 7vw; }
.parada-boton { width: 100%; display: grid; grid-template-columns: 2.2em 1fr; gap: 2px 8px; text-align: start; border: 0; border-top: 2px dotted rgba(29,25,23,.4); background: none; padding: 14px 0; min-height: 56px; }
.parada .num { grid-row: 1 / span 2; font: 300 1.7rem/1 var(--cursiva); font-style: italic; align-self: start; padding-top: .1em; vertical-align: baseline; opacity: 1; color: var(--acento-texto); letter-spacing: 0; }
.parada-nombre { font: 600 1.35rem/1.12 var(--titulos); letter-spacing: -.045em; }
html[lang="ar"] .parada-nombre, html[lang="ur"] .parada-nombre, html[lang="hi"] .parada-nombre, html[lang="bn"] .parada-nombre, html[lang="zh"] .parada-nombre { letter-spacing: 0; line-height: 1.4; }
.parada-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8rem; }
.chip { padding: 2px 8px; border: 1px solid var(--tinta); border-radius: 99px; font-size: .74rem; }
.chip.sonando { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); font-weight: 600; }
.chip.cola { background: var(--azul-suave); border-color: var(--azul-suave); }
.chip.escuchado { background: var(--tinta); color: var(--papel); }
.chip.omitido { border-style: dashed; opacity: .75; }
.chip.aviso-chip { border-color: var(--acento-texto); color: var(--acento-texto); }
.parada.proxima .parada-nombre { color: var(--acento-texto); font-family: var(--cursiva); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
html[lang="ar"] .parada.proxima .parada-nombre, html[lang="ur"] .parada.proxima .parada-nombre, html[lang="zh"] .parada.proxima .parada-nombre, html[lang="hi"] .parada.proxima .parada-nombre, html[lang="bn"] .parada.proxima .parada-nombre { font-style: normal; font-weight: 600; }
.dist { opacity: .7; }
/* marcadores del mapa */
.pin { background: none; border: 0; }
.pin span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--tinta); color: var(--papel); font: 600 .85rem/1 'Epilogue', sans-serif; border: 2px solid var(--papel); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.leaflet-container { font-family: var(--cuerpo); }
/* Pines del mapa por estado: pendiente (hueco), escuchado (bosque), sonando (naranja con anillo) */
.pin span { position: relative; }
.pin.pendiente span { background: var(--crema); color: var(--tinta); border: 2px solid var(--tinta); }
.pin.escuchado span, .pin.omitido span { background: var(--bosque); color: var(--crema); border-color: var(--crema); }
.pin.circular span { overflow: visible; }
.pin-llegada { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--naranja); color: var(--tinta); border: 1.5px solid var(--tinta); font: 700 .7rem/1 sans-serif; font-style: normal; }
.pin.sonando span { background: var(--naranja); color: var(--tinta); border-color: var(--tinta); transform: scale(1.18); transition: transform .5s var(--ease-viaje); }
.pin.sonando span::after { content: ''; position: absolute; inset: -9px; border: 2px solid var(--naranja); border-radius: 50%; animation: late 1.8s var(--ease-viaje) infinite; }
/* Estado de llegada a una parada (idea de Niarra: pantalla a color con el número grande en cursiva) */
.llegada { position: absolute; inset-inline: 28px; bottom: 14px; z-index: 900; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 16px; background: var(--naranja); color: var(--tinta); border-radius: 14px; box-shadow: 0 6px 20px rgba(29,25,23,.28); opacity: 0; transform: translateY(24px); visibility: hidden; transition: opacity .5s var(--ease-viaje), transform .6s var(--ease-viaje), visibility 0s .6s; pointer-events: none; }
.llegada.visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.llegada-num { font: italic 300 3.1rem/.9 var(--cursiva); letter-spacing: -.03em; }
.llegada-texto { display: grid; gap: 2px; min-width: 0; }
.llegada-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.llegada-nombre { font: 600 1.1rem/1.2 var(--titulos); letter-spacing: -.03em; }
html[lang="ar"] .llegada-num, html[lang="ur"] .llegada-num, html[lang="zh"] .llegada-num, html[lang="hi"] .llegada-num, html[lang="bn"] .llegada-num { font-family: var(--titulos); font-style: normal; }
html[lang="ar"] .llegada-etiqueta, html[lang="ur"] .llegada-etiqueta, html[lang="zh"] .llegada-etiqueta, html[lang="hi"] .llegada-etiqueta, html[lang="bn"] .llegada-etiqueta, html[lang="ar"] .llegada-nombre, html[lang="ur"] .llegada-nombre { letter-spacing: 0; text-transform: none; }
html[lang="ur"] .llegada-nombre { line-height: 1.9; }
@media (min-width: 900px) { .llegada { inset-inline: 16px; bottom: 16px; } }
/* ---------- Simulación ---------- */
.simulacion { margin: 6px 16px 0; padding: 10px 12px; background: var(--tinta); color: var(--papel); display: grid; gap: 8px; }
.sim-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .82rem; }
.sim-botones { justify-content: flex-start; }
.simulacion button, .simulacion select { background: transparent; color: var(--papel); border: 1px solid rgba(237,236,226,.6); border-radius: var(--radio-boton); padding: 6px 10px; font-size: .82rem; min-height: 44px; }
.simulacion select { background-image: none; padding-inline-end: 10px; width: auto; }
.simulacion button.activo { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.sim-vel { display: inline-flex; gap: 6px; align-items: center; }
.simulacion input[type=range] { width: 100%; accent-color: var(--naranja); height: 28px; }
body.simulando .construccion::after { content: ' · SIM'; }
/* ---------- Reproductor ---------- */
/* Bloque a color completo (verde bosque), con el naranja reservado a la acción y al estado «sonando» */
.reproductor { margin: 8px 0 0; background: var(--bosque); color: var(--crema); border-radius: 22px 22px 0 0; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); transition: background-color .6s var(--ease-viaje); }
.repro-cabecera { display: flex; align-items: center; gap: 12px; }
.repro-titulo { display: grid; gap: 2px; min-width: 0; flex: 1; }
.repro-estado { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--salvia); font-weight: 600; min-height: 1em; }
.reproductor.sonando .repro-estado { color: var(--naranja-claro); }
html[lang="ar"] .repro-estado, html[lang="ur"] .repro-estado, html[lang="hi"] .repro-estado, html[lang="bn"] .repro-estado, html[lang="zh"] .repro-estado { letter-spacing: 0; text-transform: none; font-size: .8rem; }
.repro-titulo strong { font: 600 1.05rem/1.2 var(--titulos); letter-spacing: -.03em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.repro-titulo strong.cambia { animation: cambia .7s var(--ease-viaje); }
@keyframes cambia { from { opacity: 0; transform: translateY(10px); } }
html[lang="ar"] .repro-titulo strong, html[lang="ur"] .repro-titulo strong { letter-spacing: 0; }
.repro-botones { display: flex; gap: 10px; }
.redondo { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--naranja); color: var(--tinta); display: grid; place-items: center; transition: transform .25s var(--ease-viaje), background-color .25s; }
.redondo:active:not(:disabled) { transform: scale(.92); }
.redondo.secundario { background: transparent; color: var(--crema); border: 1px solid rgba(241,239,236,.7); }
.redondo:disabled { opacity: .4; cursor: default; }
/* anillo que late alrededor del botón mientras suena (se detiene en pausa) */
.reproductor.sonando #botonPausa::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--naranja); animation: late 1.8s var(--ease-viaje) infinite; pointer-events: none; }
@keyframes late { from { transform: scale(1); opacity: .9; } to { transform: scale(1.38); opacity: 0; } }
.icono-pausa { width: 14px; height: 16px; border-inline: 4px solid currentColor; }
.en-pausa .icono-pausa { width: 0; height: 0; border: 0; border-block: 9px solid transparent; border-inline-start: 14px solid currentColor; margin-inline-start: 3px; }
[dir="rtl"] .en-pausa .icono-pausa { transform: scaleX(-1); }
.icono-saltar { width: 0; height: 0; border-block: 8px solid transparent; border-inline-start: 12px solid currentColor; position: relative; margin-inline-end: 4px; }
.icono-saltar::after { content: ''; position: absolute; inset-inline-start: 12px; top: -8px; width: 2px; height: 16px; background: currentColor; }
[dir="rtl"] .icono-saltar { transform: scaleX(-1); }
.progreso { height: 4px; background: rgba(241,239,236,.25); margin-top: 12px; border-radius: 2px; overflow: hidden; }
#progresoBarra { height: 100%; width: 0; background: var(--naranja); transition: width .3s linear; }
.reproductor .onda { stroke: var(--salvia); }
/* la onda fluye mientras suena */
.reproductor.sonando .onda.grande path { stroke-dasharray: 6 5; animation: fluye 1.2s linear infinite; stroke: var(--naranja-claro); }
@keyframes fluye { to { stroke-dashoffset: -22; } }
.repro-texto { margin-top: 4px; }
.repro-texto summary { cursor: pointer; font-size: .85rem; font-weight: 500; padding: 6px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.repro-cuerpo { max-height: 20dvh; overflow: auto; padding: 4px 2px 6px; font-size: .95rem; -webkit-overflow-scrolling: touch; }
.repro-cuerpo p { margin: 0 0 .8em; }
.repro-cuerpo .nota { font-size: .82rem; padding: 6px 10px; background: rgba(241,239,236,.1); border-inline-start: 3px solid var(--naranja); }
.repro-cuerpo .nota.pendiente { border-inline-start-color: var(--salvia); }
/* ---------- Ajustes ---------- */
.ajustes { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; }
.ajustes-fondo { position: absolute; inset: 0; background: rgba(29,25,23,.55); }
.ajustes-hoja { position: relative; width: min(560px, 100%); max-height: 88dvh; overflow: auto; background: var(--papel); padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 16px; animation: entra .45s var(--ease); }
@keyframes entra { from { transform: translateY(40px); opacity: 0; } }
.ajustes-cabecera { display: flex; align-items: center; justify-content: space-between; }
.ajustes-cabecera h2 { margin: 0; font: 600 1.8rem/1 var(--titulos); letter-spacing: -.06em; }
.ajuste-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(29,25,23,.25); }
.ajuste-rango { display: grid; }
.ajuste-rango input { width: 100%; accent-color: var(--tinta); height: 32px; }
input[type=checkbox][role=switch] { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; background: transparent; border: 1px solid var(--tinta); border-radius: 99px; position: relative; flex: none; transition: background .25s; }
input[type=checkbox][role=switch]::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; background: var(--tinta); border-radius: 50%; transition: transform .3s var(--ease), background .25s; }
input[type=checkbox][role=switch]:checked { background: var(--tinta); }
input[type=checkbox][role=switch]:checked::after { background: var(--papel); transform: translateX(22px); }
[dir="rtl"] input[type=checkbox][role=switch]:checked::after { transform: translateX(-22px); }
.ajuste-boton { border: 1px solid var(--tinta); background: transparent; padding: 12px; min-height: 48px; border-radius: var(--radio-boton); font-weight: 500; }
.atribucion-mapa { margin: 0; font-size: .8rem; opacity: .75; }
/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
.pantalla-portada { max-width: 1040px; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 64px; align-items: start; padding-top: 40px; }
.lema { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; font-size: clamp(5rem, 9vw, 8.6rem); }
.intro { grid-column: 2; margin-top: 8px; }
.selector { grid-column: 2; }
.avisos { grid-column: 1 / -1; margin-top: 56px; grid-template-columns: 1fr 1fr; }
.pantalla-guia { padding: 0 24px; }
.subcabecera { padding: 0 0 8px; }
.estado-gps { margin: 0 0 8px; }
.pantalla-guia { overflow: hidden; }
.cuerpo { display: grid; grid-template-columns: 1fr 420px; gap: 24px; flex: 1 1 0; min-height: 0; }
.pestanas { display: none; }
.panel { position: static; display: block !important; min-height: 0; }
.panel-mapa { padding: 0; position: relative; }
.panel-lista { display: block !important; overflow: auto; padding: 0; }
.simulacion { margin: 8px 0 0; }
.reproductor { margin: 8px 0 14px; border-radius: 22px; }
.repro-cuerpo { max-height: 18dvh; }
}
/* Cortina entre pantallas (portada → guía): la guía entra desde abajo, ritmo lento y frenado al final */
::view-transition-old(root) { animation: .7s var(--ease-viaje) both sale; }
::view-transition-new(root) { animation: .8s var(--ease-viaje) both entra-cortina; }
@keyframes entra-cortina { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes sale { to { opacity: .5; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* Curvas de nivel de la portada: giran muy despacio con el desplazamiento (solo donde el navegador lo admite) */
@supports (animation-timeline: scroll()) {
.fondo-portada svg { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 100vh; transform-origin: 70% 55%; }
@keyframes deriva { to { transform: rotate(7deg) scale(1.08); } }
[dir="rtl"] .fondo-portada svg { animation-name: derivaRtl; }
@keyframes derivaRtl { from { transform: scaleX(-1); } to { transform: scaleX(-1) rotate(7deg) scale(1.08); } }
}
@media (prefers-reduced-motion: reduce) {
.fondo-portada svg, .reproductor.sonando #botonPausa::after, .pin.sonando span::after { animation: none !important; }
.llegada { transform: none; }
*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.palabra, .intro, .selector, .avisos, .parada { opacity: 1; transform: none; }
}
/* Tamaños táctiles mínimos de 44 px (ajuste de la segunda pasada) */
.marca { min-height: 44px; }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.simulacion input[type=range] { height: 44px; }