:root{
  /* Radios y anchos compartidos. Los COLORES ya no viven aquí: toda la web bebe de los tokens
     --rt-* de la landing (más abajo), única fuente de verdad de la marca desde la unificación. */
  --r:16px; --r-lg:24px; --pill:999px;
  --ancho:1080px;
  /* ── TOKENS DE MOVIMIENTO (28-jul, «monitorea lo brusco de los cambios»): TODA transición y
     animación de la web bebe de estos tres — antes había .15/.16/.18/.2/.3/.34/.38/.42/.5s
     regados por el fichero y cada pieza se movía a su aire. Corta = hover y micro-feedback;
     media = entradas/salidas de bloques (reveal, panel, aviso, view transitions); entrada = el
     fade-up del <main> en cada carga. La ÚNICA excepción es el teléfono de la home: sus tiempos
     son el guion del vídeo aprobado tras 7 iteraciones y no se tocan. */
  --dur-corta:.22s;
  --dur-media:.36s;
  --dur-entrada:.26s;
  --ease-salida:cubic-bezier(.22,.75,.3,1);
  /* Sombra DURA de sticker: desplazada y sin difuminar, hermana del contorno grueso de los taxis
     garabateados. En hover la tarjeta no crece: se LEVANTA y la sombra se aleja. */
  --sombra-dura:5px 6px 0 rgba(22,22,22,.92);
  --sombra-dura-alta:8px 10px 0 rgba(22,22,22,.85);
  /* Sombra de AVISO de los paneles con scroll interno (patrón .scroll-sombra del panel admin
     girado a vertical): teñida de oliva como las demás sombras sobre amarillo. */
  --sombra-aviso:rgba(60,60,0,.30);
  /* Error de formulario (modal de sugerencias). SEMÁNTICO y aparte del rojo de la bandera: la
     estrella (--rt-estrella-roja) es un primitivo intocable y ese rojo pleno sobre la tarjeta
     oscura no llega al contraste mínimo — este sí cambia con el tema. */
  --error:#C41E2A;
}
@media (prefers-color-scheme: dark){
  /* Sobre fondo casi negro una sombra de tinta no existe: se baja a un negro pleno translúcido
     (el borde, que en oscuro pasa a amarillo vía --rt-contraste, es quien dibuja el sticker). */
  :root{--sombra-dura:5px 6px 0 rgba(0,0,0,.55);--sombra-dura-alta:8px 10px 0 rgba(0,0,0,.5);
    --sombra-aviso:rgba(0,0,0,.6);--error:#FF9B9B}
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
/* ── CONTRATO NO-SCROLL DEL CUERPO (28-jul, la regla de la casa que ya cumplían la home y el
   panel admin): html y body miden EXACTO el viewport y no scrollean jamás. Cada página interior
   es una columna cabecera → contenido → pie y lo único que scrollea es UN panel interno
   (.panel-lista en /destinos y los vacíos; la carta del carrusel en /noticias). Antes /destinos
   scrolleaba 5.851 px de body —medido en el Chrome del dueño— y el header desaparecía al bajar:
   se perdía la navegación y la sensación de estar en la misma web. */
html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
body{
  height:100%;
  overflow:hidden;
  background:var(--rt-fondo-plano);
  color:var(--rt-texto);
  font-family:var(--rt-fuente);
  line-height:1.55;
  display:flex;flex-direction:column;
}
/* La fila del contenido es exactamente lo que sobra entre cabecera y pie; min-height:0 en cada
   eslabón o el contenido infla la fila (la lección del lienzo de la home). Solo alcanza a las
   interiores: el main de la home vive DENTRO de .rt-lienzo con su propia rejilla. */
body>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ── SINERGIA ENTRE PÁGINAS — View Transitions cross-document (mejora progresiva pura, cero JS).
   Chrome/Edge/Android modernos funden la navegación Inicio↔Destinos↔Noticias; el resto ignora
   este bloque y le queda la entrada suave del <main> (pagina-entra), así el corte nunca es seco
   en ningún navegador. El MARCO lleva nombre propio (cenefa, marca, pastillas, cenefa del pie):
   son piezas casi idénticas en todas las páginas, así que quedan CLAVADAS y solo cruza el
   contenido — nada de slides de pantalla completa. */
@view-transition{navigation:auto}
.rt-marca{view-transition-name:marca}
.cab-links,.rt-nav-links{view-transition-name:navegacion}
/* La deriva vertical (14 px) la pone la entrada PROPIA del main, que corre igual con y sin view
   transition (el snapshot ::view-transition-new enseña el contenido vivo): un solo movimiento,
   idéntico en todos los navegadores, sin sumarse dos veces. El snapshot solo funde opacidad. */
main{view-transition-name:main;animation:pagina-entra var(--dur-entrada) var(--ease-salida) both}
@keyframes pagina-entra{from{opacity:0;transform:translateY(14px)}}
::view-transition-old(main){animation:vt-main-sale var(--dur-media) var(--ease-salida) both}
::view-transition-new(main){animation:vt-main-entra var(--dur-media) var(--ease-salida) both}
@keyframes vt-main-sale{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-main-entra{from{opacity:0}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
::selection{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
/* El foco va en el color de CONTRASTE: un aro amarillo sobre la página amarilla no lo ve nadie. */
:focus-visible{outline:3px solid var(--rt-contraste);outline-offset:3px;border-radius:8px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:99;background:var(--rt-contraste);color:var(--rt-sobre-contraste);padding:10px 16px;border-radius:var(--pill);font-weight:800}

h1,h2,h3{font-weight:900;font-style:italic;letter-spacing:-1.2px;line-height:1.12}
h1{font-size:clamp(31px,7.4vw,54px)}
h2{font-size:clamp(23px,4.8vw,34px)}
h3{font-size:clamp(17px,3.2vw,21px);letter-spacing:-.4px}
/* La palabra clave del titular sobre pastilla BLANCA: el mismo recurso que .rt-resalte de la
   home (viene del flyer impreso). El "amarillo como texto" murió con el tema oscuro. */
.resalte{display:inline-block;background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  border-radius:14px;padding:1px 14px 7px;line-height:1;box-shadow:var(--rt-sombra-md)}
.plomo{color:var(--rt-texto-suave)}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 18px}
/* Las .seccion de padding gordo murieron con el contrato no-scroll: cada bloque interior es una
   fila de la columna (franja, buscador, panel) y el aire lo pone cada uno, contado en vh. */
.seccion-cab{max-width:680px}
.seccion-cab p{color:var(--rt-texto-suave);margin-top:8px;font-size:clamp(14px,2.4vw,16px)}
.etiqueta{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--rt-texto-tenue);margin-bottom:10px}
.margen-arriba{margin-top:18px}

/* SIN DAMERO (7-ago-2026). La cenefa de cuadros remataba cabecera, pie, tarjetas y avisos, y era
   el dispositivo de marca de la web. El dueño la retiró de TODA la identidad —web, flyers, logo—
   por antiestética. Con la tinta ya en morado, la trama repetía el color de la tinta sin decir
   nada: era el único elemento de la página que no cargaba significado. Lo que sostiene la marca
   ahora es el logotipo, el amarillo y las estrellas de Chone. No reintroducirla. */

/* ── CABECERA: el MISMO lenguaje que la home — logotipo apilado y las estrellas de
   Chone (marcaHtml), pastillas de borde macizo y el botón verde de WhatsApp. Con el contrato
   no-scroll ya no hace falta sticky en nada: la cabecera está SIEMPRE en pantalla por maqueta
   (era la queja del dueño: al scrollear /destinos el menú desaparecía). flex:none: en la columna
   del body nada aprieta a la cabecera aunque el contenido empuje. */
.cab{background:var(--rt-fondo-plano);flex:none}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:14px 18px 12px;display:flex;align-items:center;
  justify-content:space-between;gap:12px 14px;flex-wrap:wrap}
.cab-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* La pastilla de la sección ACTIVA queda "pulsada": tinta con letras amarillas, como su hover. */
.rt-pastilla[aria-current="page"]{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
@media(max-width:600px){.cab-in{justify-content:center}.cab-links{justify-content:center}}

/* ── BOTONES: hover unificado en toda la web (se levantan 2 px y la sombra respira) ──────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--pill);
  padding:13px 24px;font-weight:800;font-size:15.5px;text-align:center;
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida),
    border-color var(--dur-corta) var(--ease-salida)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;flex:none}
/* El botón sólido es la pareja contraste/sobre-contraste (tinta con letras amarillas en claro):
   mismo criterio que el aviso de la home. El degradado #FFC400 murió con el tema oscuro. */
.btn-amarillo{background:var(--rt-contraste);color:var(--rt-sobre-contraste);box-shadow:var(--rt-sombra-sm)}
.btn-amarillo:hover{box-shadow:var(--rt-sombra-md)}
/* El verde y el blanco del rt-btn-wa de la home, para que el botón de pedir taxi sea EL MISMO
   botón en las tres páginas (antes aquí era el verde #25D366 con tinta encima: divergía). */
.btn-wa{background:var(--rt-wa);color:#fff;box-shadow:var(--rt-sombra-md)}
.btn-wa:hover{box-shadow:var(--rt-sombra-lg)}
.btn-wa svg{fill:currentColor}
.btn-fantasma{background:transparent;border:1px solid var(--rt-borde);color:var(--rt-texto-tarjeta)}
.btn-fantasma:hover{border-color:var(--rt-contraste)}

/* ── PIE: con el contrato no-scroll el pie está SIEMPRE en pantalla, así que adopta la barra
   única de la home. El pie largo (marca + párrafo + columna de enlaces) duplicaba la cabecera
   —que ahora nunca se va— y se comía un cuarto del alto en un móvil de 667 px. */
.pie{flex:none;margin-top:auto}
.pie-legal{text-align:center;padding:10px 18px 12px;font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--rt-texto-tenue)}
.pie-legal b{color:var(--rt-texto)}

/* ── FRANJA DE TÍTULO con taxis garabateados: la firma de la casa también en las interiores ────
   El taxi cohete CRUZA la franja de vez en cuando (~1/3 del ciclo volando, el resto aparcado
   fuera de cuadro) y un taxi chico flota fijo con el rt-flota de la home. Decoración de verdad:
   viven DETRÁS del texto, jamás se comen un clic y en móvil solo queda el chico.
   COMPACTA desde el contrato no-scroll: el título es una fila fija de la columna y cada vh que
   pide se lo roba a la lista; en pantallas bajitas la intro y la etiqueta se retiran por orden
   de importancia, como hace la home con su kicker y su bajada. */
.franja{position:relative;overflow:hidden;flex:none;padding:clamp(10px,2.4vh,26px) 0 12px}
.franja .contenedor{position:relative;z-index:1}
.franja .seccion-cab{margin-bottom:0}
/* En móvil el marco es caro y cada píxel fijo se lo roba a la lista: se aprieta sin perder
   piezas. Medido a 390×667: sin esto el panel de destinos quedaba en 160 px de alto. */
@media (max-width:600px){
  .cab-in{padding:8px 14px 8px;gap:8px 10px}
  .franja{padding:clamp(8px,1.8vh,20px) 0 10px}
  .buscador{padding:8px 0 10px}
  .buscador-caja input{padding:11px 0}
}
/* Pantallas BAJITAS (667 de un móvil viejo, o el portátil del dueño a 576): cae lo accesorio por
   orden de importancia —intro, etiqueta, estrellas del logo— igual que la home retira su kicker
   y su bajada. El título encoge un punto; la lista es la protagonista. */
@media (max-height:700px){
  .franja .seccion-cab p{display:none}
  .etiqueta{display:none}
  .franja h1{font-size:clamp(24px,5.2vw,38px)}
  .cab .rt-estrellas-chone{display:none}
  .cab-in{padding:8px 16px 6px}
  .pie-legal{padding:6px 14px 8px}
}
.franja-adornos{position:absolute;inset:0;pointer-events:none;z-index:0}
.franja-adorno{position:absolute;display:block;will-change:transform}
.franja-adorno svg{display:block;width:100%;height:100%}
.taxi-cruza{top:10px;left:-180px;width:168px;height:63px;opacity:.9;animation:cruza 17s ease-in-out 1.4s infinite}
@keyframes cruza{0%{transform:translateX(0)}38%,100%{transform:translateX(calc(100vw + 400px))}}
.taxi-flota-franja{right:4%;bottom:16%;width:72px;height:35px;opacity:.5;--giro:9deg;--dur:10s}
@media(max-width:720px){
  .taxi-cruza{display:none}
  .taxi-flota-franja{right:6%;top:0;bottom:auto;width:56px;height:27px;opacity:.45}
}

/* ── REJILLA DE TARJETAS: blancas, borde de tinta gordo y sombra dura, como el teléfono ──────── */
.rejilla{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.rejilla.tres{grid-template-columns:repeat(3,1fr)}}
.rejilla--despues{margin-top:26px}
.tarjeta{background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r);padding:20px;box-shadow:var(--sombra-dura);
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
/* Hover con efecto STICKER: la tarjeta se despega y la sombra dura se queda atrás. */
.tarjeta:hover{transform:translate(-2px,-3px);box-shadow:var(--sombra-dura-alta)}
.tarjeta h3{margin-bottom:7px}
.tarjeta p{color:var(--rt-texto-tarjeta-suave);font-size:15px}
.tarjeta .icono{font-size:26px;line-height:1;margin-bottom:12px}

/* ── DESTINOS ────────────────────────────────────────────────────────────── */
/* El buscador ya NO es pegajoso: con el contrato no-scroll todo el bloque de mando (cabecera,
   título, caja, conteo e índice A-Z) queda fijo por maqueta y lo único que se mueve es la lista.
   El borde de tinta de abajo es la costura entre lo fijo y el panel que scrollea. */
.buscador{flex:none;background:var(--rt-fondo-plano);
  padding:10px 0 12px;border-bottom:2.5px solid var(--rt-contraste)}
.buscador-caja{display:flex;align-items:center;gap:11px;background:var(--rt-tarjeta);
  border:2.5px solid var(--rt-contraste);border-radius:var(--pill);padding:0 16px;
  box-shadow:var(--sombra-dura);
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
.buscador-caja:focus-within{transform:translate(-1px,-2px);box-shadow:var(--sombra-dura-alta)}
.buscador-caja svg{width:19px;height:19px;flex:none;fill:var(--rt-texto-tarjeta-suave)}
.buscador-caja input{flex:1;background:none;border:none;outline:none;color:var(--rt-texto-tarjeta);
  padding:13px 0;font-size:16px}
.buscador-caja input::placeholder{color:var(--rt-texto-tarjeta-suave);opacity:.75}
.buscador-caja .limpiar{color:var(--rt-texto-tarjeta-suave);font-size:19px;line-height:1;padding:4px}
.buscador-caja .limpiar:hover{color:var(--rt-texto-tarjeta)}
.conteo{margin-top:8px;font-size:13.5px;color:var(--rt-texto-suave)}
/* Índice A-Z como FICHAS DE DAMERO: casillas alternas tinta/blanco, la cenefa hecha botones.
   Vive DENTRO del bloque fijo del buscador (contrato no-scroll): salta al grupo scrolleando el
   panel interno, y durante la búsqueda las letras sin resultados se apagan y las que sí tienen
   dan un saltito la primera vez (ver js.ts). En móvil las casillas encogen: 26 letras a 32 px
   son tres filas que se comen la lista. */
.indice{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.indice a{width:32px;height:32px;border-radius:8px;border:2px solid var(--rt-contraste);
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:900;font-style:italic;
  transition:transform var(--dur-corta) var(--ease-salida),opacity var(--dur-corta) ease}
@media (max-width:600px){.indice{gap:5px}.indice a{width:27px;height:27px;font-size:12px}}
.indice a:nth-child(odd){background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta)}
.indice a:nth-child(even){background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
.indice a:hover{transform:translateY(-3px)}
.indice a.apagada{opacity:.22;pointer-events:none}
@keyframes salta{0%{transform:none}45%{transform:translateY(-7px) rotate(-4deg)}100%{transform:none}}
.indice a.salta{animation:salta var(--dur-media) var(--ease-salida)}
/* scroll-margin chico: el ancla scrollea el PANEL interno y ya no hay buscador sticky encima. */
.grupo{margin-top:24px;scroll-margin-top:10px}
.grupo:first-child{margin-top:4px}
.grupo-letra{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.grupo-letra span{width:38px;height:38px;border-radius:10px;background:var(--rt-contraste);
  color:var(--rt-sobre-contraste);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-style:italic;font-size:19px;flex:none}
/* La raya del grupo es la CARRETERA discontinua del garabato, no un hr tímido. */
.grupo-letra hr{flex:1;border:none;border-top:3px dashed var(--rt-contraste);opacity:.3}
.destinos{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.destinos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.destinos{grid-template-columns:repeat(3,1fr)}}
.destino{background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra-dura);
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
.destino:hover{transform:translate(-2px,-3px);box-shadow:var(--sombra-dura-alta)}
.destino .n{font-weight:800;font-size:15.5px;line-height:1.25}
.destino .d{color:var(--rt-texto-tarjeta-suave);font-size:13.5px;margin-top:4px}
/* La categoría como PLACA de taxi: amarilla, borde de tinta, 900 itálica. Colores primitivos a
   propósito (mismo trato que .rt-placa): una placa es amarilla en los dos temas. */
.destino .cat{display:inline-block;margin-top:9px;font-size:11px;font-weight:900;font-style:italic;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--rt-tinta);background:var(--rt-amarillo);
  border:2px solid var(--rt-tinta);border-radius:6px;padding:2px 9px}
.alias{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.alias b{font-size:11.5px;font-weight:700;color:var(--rt-texto-tarjeta-suave);background:var(--rt-sutil);
  border-radius:var(--pill);padding:3px 9px}

/* ── EL PANEL DE LA LISTA: el ÚNICO scroll de /destinos (y de los estados vacíos y el 404).
   La señal de "hay más" es el patrón .scroll-sombra del panel admin girado a vertical, sin JS:
   las dos capas del color del fondo van con attachment LOCAL (viajan con el contenido y TAPAN la
   sombra al tocar ese borde) y las dos radiales van SCROLL (fijas al marco del panel). Si no
   queda nada por abajo, no se ve nada. overscroll-behavior: llegar al tope no rebota la página. */
.panel-lista{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 0 30px;
  background-image:
    linear-gradient(to bottom,var(--rt-fondo-plano) 30%,transparent),
    linear-gradient(to top,var(--rt-fondo-plano) 30%,transparent),
    radial-gradient(farthest-side at 50% 0,var(--sombra-aviso),transparent),
    radial-gradient(farthest-side at 50% 100%,var(--sombra-aviso),transparent);
  background-position:0 0,0 100%,0 0,0 100%;
  background-repeat:no-repeat;
  background-size:100% 34px,100% 34px,100% 16px,100% 16px;
  background-attachment:local,local,scroll,scroll}

/* Estado VACÍO — el catálogo arranca a cero y esta página no puede parecer rota. */
.vacio{background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-dura);max-width:640px;margin:26px auto}
.vacio-cuerpo{padding:clamp(26px,5vw,40px);text-align:center}
.vacio-icono{font-size:42px;line-height:1;margin-bottom:14px}
/* En noticias el megáfono murió con el tema oscuro: ahora flota el taxi garabateado de la casa. */
.vacio-icono--taxi{font-size:0;width:184px;height:69px;margin:0 auto 16px;animation:rt-flota 9s ease-in-out infinite}
.vacio-icono--taxi svg{display:block;width:100%;height:100%}
.vacio-cuerpo p{color:var(--rt-texto-tarjeta-suave);margin-top:12px;font-size:15.5px}
.vacio-cuerpo p b{color:var(--rt-texto-tarjeta)}
.vacio-cuerpo .btn{margin-top:22px}
/* En pantallas bajitas el vacío se aprieta (y pierde la línea de refuerzo .plomo, que es
   redundante con el párrafo principal): si aun así no cabe, scrollea el panel-lista que lo
   envuelve — nunca el cuerpo. Medido a 390×667: sin esto el botón de WhatsApp nacía cortado. */
@media (max-height:700px){
  .vacio{margin:10px auto}
  .vacio-cuerpo{padding:18px 16px}
  .vacio-cuerpo h2{font-size:21px}
  .vacio-icono--taxi{width:132px;height:50px;margin-bottom:8px}
  .vacio-cuerpo p{margin-top:8px;font-size:14.5px}
  .vacio-cuerpo .plomo{display:none}
  .vacio-cuerpo .btn{margin-top:14px}
  .panel-lista{padding:10px 0 22px}
}
.sin-resultados{text-align:center;padding:44px 18px;color:var(--rt-texto-suave)}
.sin-resultados strong{display:block;font-size:18px;color:var(--rt-texto);margin-bottom:8px}

/* ── NOTICIAS: carrusel 3D — misma mecánica, piel de tarjeta blanca con borde de tinta. La
   sombra aquí es la BLANDA de la marca (--rt-sombra-lg): una sombra dura desplazada se rompe en
   cuanto la carta rota en perspectiva.
   CONTRATO NO-SCROLL: el carrusel ES la navegación de la página. El lienzo toma el alto que
   sobra entre franja y pie, el carrusel pide su alto ideal (flex-basis 438px) y se ENCOGE si no
   cabe; si aun así el texto de una carta no entra, scrollea la CARTA por dentro (.res), el
   cuerpo jamás. Las alturas fijas (330/370px) murieron con el contrato. */
.lienzo-noticias{flex:1 1 auto;min-height:0;display:flex;padding:4px 0 12px}
.lienzo-noticias>.contenedor{flex:1;display:flex;flex-direction:column;min-height:0}
.carrusel-marco{overflow:hidden;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:center}
.carrusel{position:relative;perspective:1400px;padding:6px 0 4px;touch-action:pan-y;
  flex:0 1 352px;min-height:0;display:flex;flex-direction:column}
/* En móvil la carta es angosta y el texto pide más alto: misma pareja 330/370 de siempre,
   ahora como BASE flexible que se encoge si el viewport no da. */
@media(max-width:640px){.carrusel{flex-basis:392px}}
.pista{position:relative;flex:1;min-height:0;transform-style:preserve-3d}
.carta{position:absolute;top:0;left:50%;width:min(430px,84vw);height:100%;
  background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;
  transform-origin:50% 50%;
  transition:transform var(--dur-media) var(--ease-salida),opacity var(--dur-media) ease;
  will-change:transform;box-shadow:var(--rt-sombra-lg);overflow:hidden}
.carta::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-conic-gradient(var(--rt-contraste) 0% 25%, transparent 0% 50%);background-size:10px 10px}
.carta.activa{cursor:default;z-index:5}
.carta:not(.activa){cursor:pointer}
.carta .fecha{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--rt-texto-tenue);margin-top:6px}
.carta h3{margin:9px 0 8px}
/* El texto scrollea POR DENTRO de la carta si no cabe (contrato no-scroll): es el único scroll
   de /noticias con carrusel y solo existe cuando el resumen de verdad no entra. */
.carta .res{color:var(--rt-texto-tarjeta-suave);font-size:15px;flex:1;min-height:0;overflow-y:auto;
  overscroll-behavior:contain}
.carta .foto{width:100%;height:112px;object-fit:cover;border-radius:12px;margin-bottom:12px;border:1px solid var(--rt-borde)}
/* "Más información" como placa: amarillo con tinta, el único acento de color de la carta. */
.carta .mas{margin-top:14px;align-self:flex-start;background:var(--rt-amarillo);color:var(--rt-tinta);
  border:2px solid var(--rt-tinta);border-radius:var(--pill);padding:8px 18px;font-weight:800;font-size:14.5px;
  display:inline-flex;align-items:center;gap:8px;transition:gap var(--dur-corta) var(--ease-salida)}
.carta .mas:hover{gap:13px}
/* En una carta de atrás, el botón no debe poder pulsarse: el toque tiene que traerla al frente
   (si no, en el móvil se abre el detalle de una noticia que ni se estaba viendo). */
.carta:not(.activa) .mas{pointer-events:none}
.flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:44px;height:44px;
  border-radius:50%;background:var(--rt-tarjeta);border:2px solid var(--rt-contraste);display:flex;align-items:center;
  justify-content:center;font-size:22px;line-height:1;color:var(--rt-texto-tarjeta);
  transition:background var(--dur-corta) ease,color var(--dur-corta) ease}
.flecha:hover{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
.flecha[disabled]{opacity:.28;cursor:default}
.flecha.izq{left:2px}
.flecha.der{right:2px}
@media(max-width:640px){.flecha{width:38px;height:38px;font-size:19px}.flecha.izq{left:-2px}.flecha.der{right:-2px}}
.puntos{flex:none;display:flex;justify-content:center;gap:7px;margin-top:12px}
.puntos button{width:8px;height:8px;border-radius:50%;background:var(--rt-contraste);opacity:.25;
  transition:opacity var(--dur-corta) ease,width var(--dur-corta) var(--ease-salida)}
.puntos button.on{opacity:1;width:22px;border-radius:var(--pill)}

/* ── PANEL DE DETALLE (entra desde la derecha) ────────────────────────────
   Los colores de superficie son EXACTAMENTE los que el bloque .rt-html ya imponía en la home
   (aquellas reglas quedan ahora redundantes pero inofensivas): el panel es EL MISMO panel en
   las tres páginas. */
.panel-fondo{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-media) ease,visibility 0s linear var(--dur-media)}
.panel-fondo.abierto{opacity:1;visibility:visible;transition:opacity var(--dur-media) ease,visibility 0s}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(560px,100%);background:var(--rt-tarjeta);
  color:var(--rt-texto-tarjeta);border-left:1px solid var(--rt-borde);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur-media) var(--ease-salida),visibility 0s linear var(--dur-media);
  box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.panel.abierto{transform:translateX(0);visibility:visible;
  transition:transform var(--dur-media) var(--ease-salida),visibility 0s}
.panel-cab{position:sticky;top:0;background:var(--rt-tarjeta);border-bottom:1px solid var(--rt-borde);
  padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:2}
.panel-cab .t{font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--rt-texto-tenue)}
.panel-cab .x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--rt-borde);
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--rt-texto-tarjeta)}
.panel-cab .x:hover{background:var(--rt-contraste);border-color:var(--rt-contraste);color:var(--rt-sobre-contraste)}
.panel-cuerpo{padding:22px 18px 46px}
.detalle .fecha{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--rt-texto-tenue)}
.detalle h2{margin:10px 0 12px}
.detalle .foto{width:100%;border-radius:var(--r);border:1px solid var(--rt-borde);margin-bottom:16px}
.detalle .res{color:var(--rt-texto-tarjeta);font-size:16.5px;font-weight:600;line-height:1.5}
.detalle .cuerpo{color:var(--rt-texto-tarjeta-suave);font-size:15.5px;margin-top:16px;white-space:pre-line}
.detalle .cierre{margin-top:26px;padding-top:20px;border-top:1px solid var(--rt-borde)}

/* ── AVISO automático (última noticia) — misma nota que el panel: piel de la home ─────────── */
.aviso-fondo{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-media) ease,visibility 0s linear var(--dur-media)}
.aviso-fondo.abierto{opacity:1;visibility:visible;transition:opacity var(--dur-media) ease,visibility 0s}
.aviso{width:min(460px,100%);max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:var(--rt-tarjeta);
  color:var(--rt-texto-tarjeta);border:1px solid var(--rt-borde);border-radius:var(--r-lg);overflow-x:hidden;
  transform:translateY(18px) scale(.97);transition:transform var(--dur-media) var(--ease-salida)}
.aviso-fondo.abierto .aviso{transform:none}
.aviso-cuerpo{padding:22px}
.aviso .kicker{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--rt-texto-tenue)}
.aviso h2{font-size:clamp(21px,4.6vw,27px);margin:11px 0 9px}
.aviso p{color:var(--rt-texto-tarjeta-suave);font-size:15.5px}
.aviso .foto{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:14px;border:1px solid var(--rt-borde)}
.aviso-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.aviso-botones .btn{padding:11px 20px;font-size:14.5px}

/* ── MODAL «AÑADIR MI LUGAR» (sugerencias de lugares, 28-jul) ─────────────────────────────────
   El dueño pidió un botón para que el cliente proponga el sitio que no salió en /destinos. Aquí
   SOLO se piden nombre, referencia y tipo — el PUNTO del mapa lo pone el staff al aprobar
   (LugarMapPicker del panel): pedirle un pin a un desconocido desde el celular produce
   coordenadas basura. Piel del aviso (tarjeta blanca, borde de tinta) y los MISMOS
   tokens de movimiento. z-index 80 > 70 (aviso): si coinciden, manda lo que el visitante abrió. */
.sug-fondo{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-media) ease,visibility 0s linear var(--dur-media)}
.sug-fondo.abierto{opacity:1;visibility:visible;transition:opacity var(--dur-media) ease,visibility 0s}
/* position:fixed: el modal NO aporta scroll al documento (contrato no-scroll intacto abierto o
   cerrado); si el formulario no cabe en un móvil bajito, scrollea la TARJETA por dentro. */
.sug{width:min(480px,100%);max-height:88vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r-lg);box-shadow:var(--sombra-dura-alta);
  transform:translateY(18px) scale(.97);transition:transform var(--dur-media) var(--ease-salida)}
.sug-fondo.abierto .sug{transform:none}
.sug-cuerpo{padding:20px 22px 24px}
.sug h2{font-size:clamp(21px,4.6vw,26px);margin:4px 0 6px}
.sug-intro{color:var(--rt-texto-tarjeta-suave);font-size:14.5px}
.sug-campo{display:block;margin-top:15px;margin-bottom:6px;font-weight:800;font-size:13.5px}
/* 16px de fuente A PROPÓSITO: por debajo, iOS hace zoom al enfocar un input y descoloca el modal. */
.sug-input{display:block;width:100%;background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  border:2px solid var(--rt-contraste);border-radius:12px;padding:10px 13px;font-size:16px;
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
.sug-input:focus{outline:none;transform:translate(-1px,-2px);box-shadow:var(--sombra-dura)}
.sug-input::placeholder{color:var(--rt-texto-tarjeta-suave);opacity:.7}
.sug-input[aria-invalid="true"]{border-color:var(--error)}
textarea.sug-input{resize:vertical;min-height:58px;font-family:inherit;line-height:1.4}
.sug-error{margin-top:7px;font-size:13px;font-weight:700;color:var(--error)}
/* El tipo como CHIPS marcables, no un <select>: la rueda del sistema rompería la piel de la casa
   y son 7 opciones que caben a la vista. El radio real queda invisible pero operable (flechas
   del teclado y lector de pantalla); el foco y el "marcado" se pintan en la píldora. */
.sug-tipos-caja{border:none;padding:0;margin:0}
.sug-tipos-caja legend{padding:0}
.sug-tipos{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;border:2px solid var(--rt-contraste);
  border-radius:var(--pill);padding:7px 14px;font-weight:800;font-size:13.5px;cursor:pointer;
  background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  transition:background var(--dur-corta) ease,color var(--dur-corta) ease,transform var(--dur-corta) var(--ease-salida)}
.chip:hover span{transform:translateY(-2px)}
.chip input:checked+span{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
.chip input:focus-visible+span{outline:3px solid var(--rt-contraste);outline-offset:2px}
/* Honeypot FUERA de pantalla — no display:none (los bots un poco listos lo saltan) y JAMÁS
   estilo inline (CSP). Una persona ni lo ve ni tabula hasta él (tabindex -1 en el marcado). */
.sug-miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sug-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sug-botones .btn{padding:11px 20px;font-size:14.5px}
/* Estado GRACIAS: sustituye al formulario dentro de la MISMA tarjeta, con el taxi de la casa
   flotando (reusa .vacio-icono--taxi). */
.sug-gracias{padding:26px 22px 30px;text-align:center}
.sug-gracias p{color:var(--rt-texto-tarjeta-suave);font-size:15px;margin-top:8px}
.sug-gracias .btn{margin-top:18px}
/* En el "sin resultados", el botón de sugerir comparte fila con el de WhatsApp. */
.sin-resultados .margen-arriba{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* ── REVEAL AL HACER SCROLL (mejora progresiva: sin JS no existe) ─────────────────────────────
   El servidor marca las piezas con [data-revela] pero NO las esconde: es el JS quien, solo si
   corre y el visitante no pidió menos movimiento, añade .revela-a/.revela-b (caída con
   micro-giro alterno, como tarjetas soltadas sobre la mesa) y .revela-va al asomar en pantalla.
   Al terminar retira las tres clases y la pieza vuelve a regirse por sus reglas base (si no,
   esta transition le pisaría la del hover para siempre). Va DESPUÉS de .destino/.tarjeta a
   propósito: a igual especificidad gana quien declara último. */
.revela-a,.revela-b{opacity:0;transform:translateY(16px) rotate(-.8deg)}
/* ±0.8deg: el ±1.2 de la primera versión se sentía golpe cuando caían muchas tarjetas a la vez. */
.revela-b{transform:translateY(16px) rotate(.8deg)}
.revela-va{opacity:1;transform:none;
  transition:opacity var(--dur-media) ease-out,transform var(--dur-media) var(--ease-salida)}

/* ── Accesibilidad: si el visitante pidió menos movimiento, se lo damos ────
   El comodín cubre TODO, también lo nuevo (cruza, salta, revela, rt-flota en las interiores):
   cualquier animación de este fichero nace ya apagada aquí. El JS además ni arma el reveal ni
   hace saltar letras cuando detecta la preferencia. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .carta{transition:none}
  .panel,.panel-fondo,.aviso-fondo,.aviso,.sug-fondo,.sug{transition:none}
  /* Sin animación el taxi cohete quedaría congelado a medio cruce, tapando el titular. */
  .taxi-cruza{display:none}
  /* View transitions apagadas del todo: el comodín * no alcanza a los pseudo-elementos
     ::view-transition-* (viven colgados del html, no son ::before/::after de nadie), así que se
     apagan explícitos Y se pide navigation:none por si el navegador respeta el anidado. */
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-image-pair(*),
  ::view-transition-old(*),::view-transition-new(*){animation:none !important}
  main{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LANDING (prefijo rt-) — el bloque nació para la home y hoy es además el DICCIONARIO de la web:
   sus tokens --rt-* alimentan también la piel clara de /destinos y /noticias (bloque de arriba),
   y algunas de sus clases (rt-pastilla, rt-btn-wa, rt-marca, rt-adorno--flota) se reusan tal
   cual en las interiores desde la unificación del 2026-07-28. Lo que sigue siendo SOLO de la
   home es la maqueta de pantalla única (rt-lienzo, rt-hero, el teléfono) y lo colgado de
   .rt-html. El diseño es el de presentacion/web/landing.html, aprobado por el dueño tras 7
   iteraciones: NO se rediseña.

   ── ARQUITECTURA DE TOKENS (esto se rompió una vez, no se vuelve a romper) ─────────────────────
   Hay DOS capas y confundirlas fue el bug del modo oscuro:
     1. PRIMITIVOS DE MARCA — son la marca y valen igual en claro y en oscuro (--rt-amarillo,
        --rt-tinta, las estrellas de Chone). El negro del logotipo es negro siempre.
     2. SEMÁNTICOS — describen un PAPEL, no un color, y SÍ cambian con el tema (--rt-texto,
        --rt-fondo, --rt-contraste/--rt-sobre-contraste, que se INVIERTEN).
   El fallo original: pintar texto con --rt-tinta (primitivo). En oscuro el fondo pasaba a #161616
   y el texto seguía siendo #161616 → página entera en negro sobre negro.
   REGLA: nada pinta texto con un primitivo.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* 1 · PRIMITIVOS (inmutables) */
  --rt-amarillo:#E5E500;        /* el del LOGO, no el #FFC400 del panel: aquí manda el impreso */
  --rt-amarillo-alto:#EFEF2A;
  --rt-tinta:#161616;
  /* MORADO DE MARCA (#5B21B6): desde la identidad verdadera es la TINTA sobre el papel amarillo.
     Se guarda como primitivo junto al amarillo porque los dos definen la marca; la tinta negra
     se queda para lo menudo (pies, notas), donde el morado a tamaño pequeño pierde legibilidad. */
  --rt-morado:#5B21B6;
  --rt-morado-hondo:#3D1480;
  --rt-estrella-roja:#D81E2C;   /* rojo PLENO de bandera: el coral #E8474F se apagaba sobre el amarillo */
  --rt-estrella-azul:#0A33D6;   /* azul PLENO: #4D82F0 sonaba a enlace web, no a bandera */
  --rt-wa:#1DA851;

  /* 2 · SEMÁNTICOS · TEMA CLARO */
  --rt-fondo:var(--rt-amarillo);
  --rt-fondo-plano:var(--rt-amarillo);
  --rt-texto:var(--rt-morado);
  --rt-texto-suave:#161616;     /* neutro ELEGIDO: sesgado al oliva para emparentar con el amarillo */
  --rt-texto-tenue:#3A3A12;
  --rt-tarjeta:#FFFFFF;
  --rt-texto-tarjeta:var(--rt-morado);
  --rt-texto-tarjeta-suave:#161616;
  --rt-borde:rgba(91,33,182,.18);
  /* "contraste" = lo opuesto al fondo. En claro es la tinta; en oscuro pasa a ser el amarillo.
     Esta pareja es la que impide que un botón negro caiga sobre un fondo negro. */
  --rt-contraste:var(--rt-morado);
  --rt-sobre-contraste:#E5E500;
  --rt-sutil:rgba(91,33,182,.10);
  /* Sombras teñidas de oliva: una sombra gris neutro sobre amarillo se ve gris, no sombra. */
  --rt-sombra-sm:2px 2px 0 var(--rt-morado-hondo);
  --rt-sombra-md:3px 3px 0 var(--rt-morado-hondo);
  --rt-sombra-lg:5px 5px 0 var(--rt-morado-hondo);
  /* El filo de las estrellas de Chone SÍ es semántico aunque su color no lo sea. Los dos colores de
     la bandera son primitivos intocables (es el escudo del cantón, no relleno gráfico), así que lo
     único que puede adaptarse al tema es el contorno. Sobre el amarillo el filo va OSCURO, que es
     el recurso del logotipo impreso. */
  --rt-filo-estrella:drop-shadow(0 1px 0 rgba(91,33,182,.6)) drop-shadow(0 0 1px rgba(91,33,182,.95));

  /* Sin webfonts: la CSP bloquea CDNs y una fuente que falla en silencio es peor que no tenerla.
     La personalidad la dan el PESO 900 y la ITÁLICA, que es lo que hace el logotipo. */
  --rt-fuente:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rt-tracking-display:-1.5px;
  --rt-radio-pill:999px;
}

/* TEMA OSCURO — no es una inversión automática: sobre tinta el amarillo eléctrico sube de
   protagonismo, así que el texto va a hueso cálido (#F5F1E6) y no a blanco puro, que vibra. */
@media (prefers-color-scheme: dark){
  :root{
    --rt-fondo:linear-gradient(180deg,#1F1F1B 0%,#141410 45%);
    --rt-fondo-plano:#141410;
    --rt-texto:#F5F1E6;
    --rt-texto-suave:#C9C9A8;
    --rt-texto-tenue:#A8A88C;
    --rt-tarjeta:#242420;
    --rt-texto-tarjeta:#F5F1E6;
    --rt-texto-tarjeta-suave:#C9C9A8;
    --rt-borde:rgba(229,229,0,.18);
    --rt-contraste:#E5E500;
    --rt-sobre-contraste:#161616;
    --rt-sutil:rgba(245,241,230,.10);
    --rt-sombra-sm:0 4px 14px rgba(0,0,0,.5);
    --rt-sombra-md:0 5px 16px rgba(0,0,0,.55);
    --rt-sombra-lg:0 10px 30px rgba(0,0,0,.65);
    /* MEDIDO, no estético: el azul de bandera #0A33D6 sobre el fondo oscuro #141410 da 2,16:1 —
       por debajo del 3:1 mínimo para un gráfico con significado. El filo oscuro heredado del
       amarillo no solo no ayudaba: sumaba un borde negro sobre negro. Se invierte a un contorno
       claro, que es lo que despega las estrellas del fondo sin tocar los colores de la bandera. */
    --rt-filo-estrella:drop-shadow(0 0 1px rgba(245,241,230,.9)) drop-shadow(0 0 3px rgba(245,241,230,.45));
  }
}

/* ── Lienzo: rejilla de filas EXPLÍCITA sobre 100dvh ──────────────────────────────────────────
   auto · 1fr · auto = cabecera, hero y pie. La fila del medio es exactamente lo que sobra, y todo
   lo de dentro hereda una altura YA conocida. Cero porcentajes circulares: el intento anterior
   daba al teléfono height:min(100%,580px) dentro de una fila dimensionada por contenido, y el
   teléfono crecía con cada mensaje hasta empujar el pie fuera de la pantalla. No era scroll: era
   desbordamiento clipado, que es peor porque no se ve venir. */
.rt-html{height:100%;overflow:hidden;overscroll-behavior:none}
.rt-html body{min-height:0;height:100%;overflow:hidden;display:block;
  background:var(--rt-fondo-plano);color:var(--rt-texto);font-family:var(--rt-fuente);line-height:1.55}
.rt-html ::selection{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}
/* El foco amarillo #FFC400 de la web oscura es invisible sobre el amarillo de la landing. */
.rt-html :focus-visible{outline:3px solid var(--rt-contraste);outline-offset:3px;border-radius:6px}

.rt-lienzo{position:relative;overflow:hidden;background:var(--rt-fondo);height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto}
.rt-contenedor{width:min(1180px,100% - clamp(20px,5vw,40px));margin-inline:auto}
.rt-contenedor--flex{display:flex;min-height:0}

/* ── Adornos: taxis regados. Un adorno que molesta deja de ser adorno ────────────────────────
   pointer-events:none (jamás se comen un clic), z-index 0 (viven DETRÁS del texto) y en móvil se
   retiran los grandes: en 360 px un cohete de 130 px estorba. */
.rt-adornos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rt-lienzo > *:not(.rt-adornos){position:relative;z-index:1}
.rt-adorno{position:absolute;display:block;will-change:transform}
.rt-adorno svg{display:block;width:100%;height:100%}
/* Periodos distintos (8/9/11/13 s) para que no laten todas a la vez como un semáforo. */
@keyframes rt-flota{
  0%,100%{transform:translateY(0) rotate(var(--giro,0deg))}
  50%{transform:translateY(-9px) rotate(calc(var(--giro,0deg) + 3deg))}
}
.rt-adorno--flota{animation:rt-flota var(--dur,9s) ease-in-out infinite}
@keyframes rt-vuela{
  0%,100%{transform:translate(0,0) rotate(var(--giro,-12deg))}
  50%{transform:translate(20px,-15px) rotate(calc(var(--giro,-12deg) + 3deg))}
}
.rt-adorno--vuela{animation:rt-vuela 14s ease-in-out infinite}
.rt-cuadro{background:var(--rt-contraste);border-radius:3px;opacity:.07}
@media (max-width:720px){
  .rt-adorno--grande{display:none}
  /* Fuera los taxis flotantes en móvil: cruzaban el párrafo del hero y, sin fondo bajo el texto,
     se leían entre las letras (reporte del dueño, 7-ago). Los cuadros menudos se quedan. */
  .rt-adorno--flota{display:none}
  .rt-adorno--vuela{display:none}
  .rt-adorno{opacity:.5}
}

/* ── Cabecera ────────────────────────────────────────────────────────────────────────────── */
.rt-cab{min-height:0}
.rt-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(8px,1.6vh,14px) 0 clamp(4px,1vh,8px)}
.rt-marca{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none}
.rt-nav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* POR QUÉ EL LOGOTIPO VA EN MARCADO Y NO ES EL PNG: el logo de imprenta lleva contorno blanco de
   sticker, y sobre el fondo amarillo de la web eso daba un pegote blanco alrededor de las letras.
   En marcado se controla el color, se adapta al tema, pesa cero y queda nítido en cualquier
   pantalla. Desde el 7-ago es SOLO el texto «Rapi/Taxi»: la tira de cuadros se fue con el resto
   del damero. */
.rt-logotipo{display:flex;align-items:center;gap:11px}
.rt-logo-txt{font:900 italic clamp(1.15rem,2.6vw,1.45rem)/.92 var(--rt-fuente);letter-spacing:-1.2px;
  color:var(--rt-texto);white-space:nowrap}

/* LAS 7 ESTRELLAS DE LA BANDERA DE CHONE: 2 rojas + 5 azules, en ese orden. La proporción NO se
   toca, es el escudo del cantón y no relleno gráfico. El filo oscuro es el mismo recurso que usa
   el logotipo impreso para que despeguen del amarillo. */
.rt-estrellas-chone{display:flex;align-items:center;gap:5px;line-height:1;font-size:1.05rem;
  letter-spacing:2.5px;filter:var(--rt-filo-estrella)}
.rt-estrellas-chone .rt-roja{color:var(--rt-estrella-roja)}
.rt-estrellas-chone .rt-azul{color:var(--rt-estrella-azul)}

/* Pastillas de sección: borde macizo, no enlaces tímidos. Son las dos únicas puertas al resto de
   la web desde una pantalla que ya no tiene scroll. */
.rt-pastilla{display:inline-flex;align-items:center;color:var(--rt-texto);text-decoration:none;
  font-weight:800;font-size:clamp(.8125rem,1.6vw,.9rem);padding:8px 15px;
  border:2px solid var(--rt-contraste);border-radius:var(--rt-radio-pill);white-space:nowrap;
  transition:background var(--dur-corta) ease,color var(--dur-corta) ease}
.rt-pastilla:hover{background:var(--rt-contraste);color:var(--rt-sobre-contraste)}

/* ── Hero: la fila 1fr. min-height:0 en TODOS los eslabones o el contenido infla la fila ───── */
.rt-hero-fila{min-height:0;display:flex}
.rt-hero{flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,clamp(260px,30vw,330px));
  justify-content:center;                 /* junta las dos columnas en el centro del lienzo */
  gap:clamp(20px,4vw,56px);
  align-items:stretch;                    /* stretch, NO center: la columna define el alto */
  padding-bottom:clamp(6px,1.4vh,12px)}
.rt-hero-txt{min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rt-kicker{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:3px;
  text-transform:uppercase;color:var(--rt-texto-tenue);margin-bottom:10px}
.rt-hero h1{font:900 italic clamp(1.5rem,4.4vw + .3rem,3rem)/1.06 var(--rt-fuente);
  letter-spacing:var(--rt-tracking-display);text-wrap:balance;color:var(--rt-texto)}
/* Pastilla blanca detrás de una palabra del titular; viene del flyer impreso. En oscuro es la
   tarjeta y no blanco puro, o deslumbra. */
.rt-resalte{display:inline-block;background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  border-radius:14px;padding:1px 14px 7px;line-height:1;box-shadow:var(--rt-sombra-md)}
.rt-sub{margin-top:clamp(8px,1.6vh,14px);max-width:44ch;font-size:clamp(.9rem,1.5vw,1.0625rem);
  line-height:1.45;color:var(--rt-texto-suave)}
.rt-sub b{color:var(--rt-texto);font-weight:800}
.rt-acciones{margin-top:clamp(12px,2.2vh,20px);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.rt-btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--rt-wa);color:#fff;
  text-decoration:none;font-weight:800;font-size:clamp(.875rem,1.5vw,1rem);
  padding:clamp(10px,1.6vh,14px) clamp(16px,2.4vw,24px);border-radius:var(--rt-radio-pill);
  white-space:nowrap;box-shadow:var(--rt-sombra-md);
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
.rt-btn-wa:hover{transform:translateY(-2px);box-shadow:var(--rt-sombra-lg)}
.rt-btn-wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.rt-btn-wa--mini{padding:8px 15px;font-size:clamp(.8125rem,1.6vw,.9rem);box-shadow:var(--rt-sombra-sm)}
/* El número, en 900 itálica y grande, tal cual el bloque de contacto del flyer impreso. No es un
   enlace: no atendemos llamadas, se pide por WhatsApp. Está para que se memorice y se guarde. */
.rt-tel{font:900 italic clamp(1.35rem,3.6vw,2.25rem)/1 var(--rt-fuente);letter-spacing:-1.2px;
  color:var(--rt-texto);white-space:nowrap}

/* ── Columna del teléfono ─────────────────────────────────────────────────────────────────── */
.rt-fono-col{min-height:0;display:flex;align-items:center;justify-content:center}
.rt-fono{background:#161616;                 /* chasis: negro en los dos temas, es un teléfono */
  border-radius:clamp(20px,3vw,30px);padding:8px;box-shadow:var(--rt-sombra-lg);
  width:100%;max-width:320px;
  height:100%;max-height:580px;              /* 100% de una fila YA conocida: determinista */
  min-height:0;display:flex}
.rt-fono-pantalla{flex:1;min-height:0;border-radius:clamp(14px,2.2vw,22px);overflow:hidden;
  display:flex;flex-direction:column;
  /* Beige de WhatsApp con una trama de PUNTOS muy tenue. El damero que había antes competía con
     el contenido: una cuadrícula marcada detrás de burbujas rectangulares es ruido visual. */
  background:radial-gradient(rgba(22,22,22,.055) 1.4px,transparent 1.6px) 0 0/22px 22px,#ECE5DD}
.rt-fono-cabecera{background:#075E54;color:#fff;flex:none;padding:9px 11px;display:flex;
  align-items:center;gap:9px}
.rt-fono-avatar{width:38px;height:38px;border-radius:50%;flex:none;background:var(--rt-amarillo);
  display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(22,22,22,.9)}
.rt-fono-avatar svg{width:27px;height:auto;display:block}
.rt-fono-nombre{font-weight:700;font-size:.875rem;line-height:1.2}
.rt-fono-estado{font-size:.7rem;opacity:.82}

/* 'clip' y NO 'hidden': con 'hidden' el contenedor sigue siendo desplazable por programa y el
   navegador puede moverlo solo al insertar contenido fuera de vista. Con 'clip' no es un
   contenedor de scroll y no hay nada que mover. 'overflow-anchor:none' por lo mismo. */
.rt-chat{flex:1;min-height:0;overflow:clip;overflow-anchor:none;padding:11px 9px;
  display:flex;flex-direction:column;justify-content:flex-start}
/* El HILO es lo que se mueve: la conversación se queda entera y lo que se desliza es la pantalla,
   como en un móvil de verdad. Ver 'deslizar()' en js.ts. */
.rt-hilo{display:flex;flex-direction:column;gap:6px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}

.rt-burbuja{max-width:85%;padding:7px 10px;border-radius:9px;
  font-size:clamp(.75rem,1.1vw,.8125rem);line-height:1.38;color:#111;
  box-shadow:0 1px 1px rgba(0,0,0,.13);animation:rt-entra .28s ease-out both;
  word-wrap:break-word;flex:none}
@keyframes rt-entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
/* Filo amarillo: distingue a Rapi de cualquier otro contacto sin romper la gramática de WhatsApp. */
.rt-burbuja--rapi{background:#fff;align-self:flex-start;border-top-left-radius:2px;
  border-left:3px solid var(--rt-amarillo)}
.rt-burbuja--cli{background:#DCF8C6;align-self:flex-end;border-top-right-radius:2px}
.rt-burbuja b{font-weight:700}
.rt-hora{display:block;margin-top:2px;font-size:.6rem;color:#667;text-align:right}

.rt-escribiendo{display:flex;gap:4px;padding:10px 12px}
.rt-escribiendo i{width:6px;height:6px;border-radius:50%;background:#98a;display:block;
  animation:rt-puntos 1.3s ease-in-out infinite}
.rt-escribiendo i:nth-child(2){animation-delay:.18s}
.rt-escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes rt-puntos{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.rt-wa-botones{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.rt-wa-botones span{background:#fff;color:#1a7ac4;text-align:center;padding:6px;font-size:.7rem;
  font-weight:600;border-top:1px solid #e4e4e4;transition:color .3s ease,background .3s ease}
/* Estado PULSADO: el texto se apaga a gris, como en WhatsApp al tocar un botón. Sin ese medio
   segundo de apagado no se entiende QUÉ tocó el cliente. */
.rt-wa-botones span.pulsado{color:#9AA5AD;background:#F1F1F1}

.rt-ubic{border-radius:10px;overflow:hidden;width:190px;max-width:100%}
.rt-ubic .rt-mapa{height:104px;position:relative;
  background:linear-gradient(90deg,transparent 44%,#E6E0D2 44% 52%,transparent 52%),
    linear-gradient(0deg,transparent 58%,#E6E0D2 58% 65%,transparent 65%),
    linear-gradient(115deg,transparent 20%,#EDE8DC 20% 24%,transparent 24%),#D9E4CF}
.rt-ubic .rt-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:26px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.rt-ubic-pie{background:#fff;padding:7px 9px;font-size:.75rem;font-weight:600;color:#111}
.rt-ubic-pie small{display:block;font-weight:400;font-size:.68rem;color:#667;margin-top:2px}

.rt-taxi-card{background:#fff;border-radius:10px;padding:9px;border-left:4px solid var(--rt-amarillo)}
.rt-taxi-card .rt-linea{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rt-taxi-card .rt-placa{background:var(--rt-amarillo);color:var(--rt-tinta);font-weight:900;
  font-style:italic;font-size:.7rem;padding:2px 7px;border-radius:4px}
.rt-taxi-card .rt-nom{font-weight:800;font-size:.78rem}
.rt-taxi-card .rt-eta{margin-top:5px;font-size:.72rem;color:#445}
.rt-taxi-card .rt-eta b{color:#15803D}
.rt-taxi-card .rt-link{margin-top:6px;font-size:.72rem;color:#1a7ac4;font-weight:600}

.rt-camino{background:#fff;border-radius:10px;padding:9px 10px 7px;border-left:3px solid var(--rt-amarillo)}
.rt-camino .rt-via{position:relative;height:22px;margin:3px 0 4px;border-bottom:2px dashed #C9CFD6}
.rt-camino .rt-coche{position:absolute;bottom:1px;left:0;font-size:16px;line-height:1;
  animation:rt-avanza 5.2s cubic-bezier(.35,0,.25,1) forwards}
.rt-camino .rt-meta{position:absolute;right:0;bottom:1px;font-size:14px;line-height:1}
@keyframes rt-avanza{from{left:0}to{left:calc(100% - 22px)}}
.rt-camino .rt-txt{font-size:.72rem;color:#445}
.rt-camino .rt-txt b{color:#15803D}

.rt-estrellas-cal{font-size:.95rem;letter-spacing:3px;color:#F5A623}
.rt-estrellas-cal i{font-style:normal;opacity:0;animation:rt-pop .3s ease-out forwards}
.rt-estrellas-cal i:nth-child(1){animation-delay:.05s}
.rt-estrellas-cal i:nth-child(2){animation-delay:.18s}
.rt-estrellas-cal i:nth-child(3){animation-delay:.31s}
.rt-estrellas-cal i:nth-child(4){animation-delay:.44s}
.rt-estrellas-cal i:nth-child(5){animation-delay:.57s}
@keyframes rt-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ── Pie: una barra y nada más ────────────────────────────────────────────────────────────── */
.rt-pie{min-height:0}
.rt-pie-barra{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:clamp(4px,1vh,10px) 0 clamp(6px,1.2vh,12px)}
.rt-lugar{font-size:clamp(.6875rem,1.2vw,.75rem);letter-spacing:3px;text-transform:uppercase;
  color:var(--rt-texto-tenue)}
.rt-lugar b{color:var(--rt-texto)}

/* ── Adaptación: lo que sobra se retira POR ORDEN DE IMPORTANCIA ─────────────────────────────
   Las pastillas Destinos/Noticias NUNCA se ocultan (a diferencia de la maqueta, donde eran
   enlaces de adorno): aquí son las dos únicas salidas de la home y el dueño las pidió visibles.
   Lo que cae, en orden: el kicker, la bajada, las estrellas y el pie. */
@media (max-width:880px){
  .rt-hero{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);   /* texto lo que pida · teléfono el resto */
    gap:clamp(10px,2vh,18px)}
  .rt-hero-txt{text-align:center;align-items:center;justify-content:flex-start}
  .rt-acciones{justify-content:center}
  .rt-sub{max-width:36ch}
  .rt-fono{max-width:260px}
}
@media (max-width:520px){
  .rt-nav{flex-wrap:wrap;justify-content:center}
  .rt-marca{align-items:center}
  .rt-nav-links{justify-content:center;width:100%}
}
@media (max-height:760px){.rt-kicker{display:none}}
@media (max-height:660px){.rt-sub{display:none}}
@media (max-height:560px){.rt-estrellas-chone,.rt-pie-barra{display:none}}
/* Móvil apaisado: el teléfono no cabe de pie; se va y manda el mensaje. Al irse hay que devolver
   su fila al texto y centrarlo: si no, el hueco de la fila 1fr se queda vacío y la pantalla parece
   media página en blanco (visto en la preview a 740×400). */
@media (max-height:460px) and (orientation:landscape){
  .rt-fono-col{display:none}
  .rt-hero{grid-template-rows:minmax(0,1fr)}
  .rt-hero-txt{justify-content:center}
}

/* ── El aviso de noticia y el panel lateral, repintados SOLO en la landing ───────────────────
   Se conservan tal cual (mismo marcado en marca.ts, mismo JS, mismo sessionStorage): es
   funcionalidad que pidió el dueño. Lo único que cambia es la piel, y solo bajo .rt-html: un
   modal en tinta con acentos #FFC400 encima de una página #E5E500 se lee como si fuera otro
   sitio. /destinos y /noticias no ven ni una de estas reglas. */
.rt-html .aviso,.rt-html .panel{background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  border-color:var(--rt-borde)}
.rt-html .aviso .kicker,.rt-html .panel-cab .t,.rt-html .detalle .fecha{color:var(--rt-texto-tenue)}
.rt-html .aviso p,.rt-html .detalle .cuerpo{color:var(--rt-texto-tarjeta-suave)}
.rt-html .detalle .res{color:var(--rt-texto-tarjeta)}
.rt-html .aviso .foto,.rt-html .detalle .foto,.rt-html .detalle .cierre{border-color:var(--rt-borde)}
.rt-html .panel-cab{background:var(--rt-tarjeta);border-bottom-color:var(--rt-borde)}
.rt-html .panel-cab .x{border-color:var(--rt-borde);color:var(--rt-texto-tarjeta)}
.rt-html .panel-cab .x:hover{background:var(--rt-contraste);border-color:var(--rt-contraste);
  color:var(--rt-sobre-contraste)}
/* El botón sólido pasa a la pareja contraste/sobre-contraste: el amarillo del logo NUNCA como
   texto sobre claro (sobre blanco da ~1.1:1), solo como contenedor con tinta encima. */
.rt-html .aviso .btn-amarillo{background:var(--rt-contraste);color:var(--rt-sobre-contraste);
  box-shadow:var(--rt-sombra-sm)}
.rt-html .aviso .btn-fantasma{background:transparent;border-color:var(--rt-borde);
  color:var(--rt-texto-tarjeta)}
.rt-html .aviso .btn-fantasma:hover{border-color:var(--rt-contraste)}