: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
     no llega al contraste mínimo. */
  --error:#C41E2A;
  /* ── LA WEB ES AMARILLA SIEMPRE (26-ago-2026, orden del dueño: «vamos a mejorar landing page
     para que en celular salga amarillo, no entiendo por qué sale negro»). Esta declaración no es
     decorativa, es la MITAD del arreglo: el Chrome de Android trae «Tema oscuro automático» y
     OSCURECE por su cuenta cualquier página que no declare esquema — el dueño veía negro en el
     móvil una landing que en el escritorio salía amarilla. La palabra clave "only" es el opt-out
     explícito (y de paso deja claros los controles de formulario y la barra de scroll del modal
     de sugerencias). La otra mitad era nuestro propio bloque de prefers-color-scheme: dark, que
     se retiró más abajo. Va acompañado del meta name="color-scheme" en las dos plantillas. */
  color-scheme:only light;
}
*{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:normal;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}
/* FUERA LA ✕ NATIVA de input[type=search] (26-ago). Chromium la pinta en cuanto hay texto y
   quedaban DOS aspas juntas: la suya y la nuestra (.limpiar), que además es la única que avisa al
   filtro. Se vio al estrenar el buscador de /fletes, pero el defecto es de las dos páginas —
   /destinos lo arrastraba desde julio y nadie lo había mirado con la caja llena. */
.buscador-caja input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.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:normal;
  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:normal;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:normal;
  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}

/* ── FLETES: la tabla de tarifas ──────────────────────────────────────────────────────────────
   NO es un <table> y conviene decir por qué: en 375 px una tabla de tres columnas con nombres de
   hasta catorce letras («Sitio Mosquito») y precios de seis («$199,50») obliga a elegir entre
   partir el nombre en dos líneas o encoger el número —y el número es el dato. Con FILAS-PASTILLA
   cada destino es una pieza de la casa (blanca, borde de tinta, sombra dura de sticker) y cada
   precio lleva SU etiqueta encima, así que la fila se explica sola y no depende de una cabecera
   de columnas que en un panel con scroll se pierde de vista al segundo destino.

   El AVISO va fijo entre la franja y el panel (mismo sitio que el buscador de /destinos, misma
   costura de tinta abajo): explica qué es un flete y a qué hora empieza la noche, y eso tiene que
   estar en pantalla siempre, no solo mientras no se haya bajado por la lista. */
.tarifas-aviso{flex:none;background:var(--rt-fondo-plano);padding:10px 0 12px;
  border-bottom:2.5px solid var(--rt-contraste)}
.tarifas-nota{background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);
  border:2.5px solid var(--rt-contraste);border-radius:var(--r);padding:11px 15px;
  box-shadow:var(--sombra-dura)}
.tarifas-nota p{font-size:14.5px;line-height:1.45;color:var(--rt-texto-tarjeta-suave)}
.tarifas-nota b{color:var(--rt-texto-tarjeta);font-weight:800}
@media (max-width:600px){.tarifas-aviso{padding:8px 0 10px}.tarifas-nota{padding:9px 12px}
  .tarifas-nota p{font-size:13.5px}}
/* La caja de búsqueda es la MISMA de /destinos (.buscador-caja, más arriba): aquí solo se le da
   su aire respecto de la nota. Ancho completo por herencia del bloque, así que en 375 no hay nada
   que ajustar. */
.tarifas-aviso .buscador-caja{margin-top:9px}
/* Pantalla bajita (el móvil del dueño, 667): la lista es la protagonista y hay que devolverle
   píxeles. La nota y la caja se aprietan, pero NINGUNA se va: sin la nota esto es una tabla de
   precios que no dice de qué son ni a qué hora cambian, y sin la caja vuelve el problema que
   arregla esta tanda. El CONTEO tampoco se esconde ya —antes sí—: en cuanto hay buscador deja de
   ser un adorno y pasa a ser la respuesta («3 coincidencias», «Sin coincidencias»). */
@media (max-height:700px){
  .tarifas-aviso{padding:6px 0 8px}
  .tarifas-nota{padding:7px 11px}
  .tarifas-nota p{font-size:12.5px;line-height:1.38}
  .tarifas-aviso .buscador-caja{margin-top:7px}
  .tarifas-aviso .buscador-caja input{padding:9px 0}
  /* El conteo del TOTAL se retira (la lista ya se cuenta sola), pero el del FILTRO se queda: en
     cuanto se teclea, ese renglón deja de ser adorno y pasa a ser la respuesta. La clase la pone
     el buscador de js.ts. */
  .tarifas-aviso .conteo{display:none}
  .tarifas-aviso .conteo.filtrando{display:block;margin-top:5px;font-size:12.5px}
  /* Y la fila se aprieta un punto: cuatro tarifas en pantalla en vez de tres es la diferencia
     entre entender la tabla de un vistazo y tener que arrastrar para saber cómo se lee. */
  .tar{padding:6px 10px}
  .tar-filas{gap:8px}
}
/* Sin resultados de FLETES: un RENGLÓN dentro de la lista, no la media página de /destinos (que
   es una sección propia con dos botones y su modal). La tabla de arriba ya desapareció entera, así
   que el aire sobra y lo que hace falta es que la respuesta se lea sin scrollear. Clase propia y
   no un «.panel-lista .sin-resultados»: ese selector habría reapretado también el de /destinos, que
   está igual de dentro del panel y no lo ha pedido nadie. */
.sin-resultados--fila{padding:26px 14px 18px}

.tar-grupo{margin-top:20px}
.tar-grupo:first-child{margin-top:2px}
/* El título del grupo es la placa morada + la CARRETERA discontinua del garabato, hermana de la
   letra de /destinos: la misma pieza, con palabra en vez de inicial. */
.tar-tit{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.tar-tit span{background:var(--rt-contraste);color:var(--rt-sobre-contraste);border-radius:10px;
  padding:5px 13px;font-weight:900;font-style:normal;font-size:14.5px;letter-spacing:-.3px;flex:none}
.tar-tit hr{flex:1;border:none;border-top:3px dashed var(--rt-contraste);opacity:.3}

.tar-filas{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:820px){.tar-filas{grid-template-columns:repeat(2,1fr)}}
.tar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--rt-tarjeta);color:var(--rt-texto-tarjeta);border:2.5px solid var(--rt-contraste);
  border-radius:var(--r);padding:9px 12px;box-shadow:var(--sombra-dura);
  transition:transform var(--dur-corta) var(--ease-salida),box-shadow var(--dur-corta) var(--ease-salida)}
.tar:hover{transform:translate(-2px,-3px);box-shadow:var(--sombra-dura-alta)}
.tar-n{font-weight:800;font-size:15.5px;line-height:1.2;min-width:0}
.tar-precios{display:flex;align-items:stretch;gap:7px;flex:none}
/* La pastilla del precio: etiqueta menuda arriba, número abajo. El tabular-nums alinea las cifras
   entre filas (un 1 mide lo mismo que un 9), que es lo que hace que 29 precios se puedan comparar
   de un vistazo en vez de leerse uno a uno. */
.tar-p{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:66px;padding:4px 9px 5px;border-radius:11px;border:2px solid var(--rt-contraste)}
.tar-p i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  line-height:1;opacity:.72}
.tar-p b{font-size:15px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
/* La NOCHE en macizo: es la tarifa que sorprende («¿y si salgo a las nueve?»), así que es la que
   tiene que saltar. Mismo par contraste/sobre-contraste de los botones sólidos. */
.tar-p--noche{background:var(--rt-contraste);color:var(--rt-sobre-contraste);border-color:var(--rt-contraste)}
.tar-p--noche i{opacity:.85}
/* Precio ÚNICO (el nocturno no está fijado y rige el de día, 0192): una sola pastilla ancha, no
   dos veces el mismo número — que se leería como un error de la tabla. */
.tar-p--unico{min-width:104px}
@media (max-width:420px){
  .tar{padding:8px 10px;gap:8px}
  .tar-n{font-size:14.5px}
  .tar-p{min-width:60px;padding:3px 7px 4px}
  .tar-p b{font-size:14px}
  .tar-p--unico{min-width:96px}
}

/* ── 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:#FFD200;        /* el del LOGO, no el #FFC400 del panel: aquí manda el impreso */
  --rt-amarillo-alto:#FFE45C;
  --rt-tinta:#161616;
  /* MORADO DE MARCA (#D7141A): 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-rojo:#D7141A;
  --rt-rojo-hondo:#8B0F14;
  /* ESTRELLAS DE CHONE — los dos colores salen del canon impreso, que es donde el dueño aprueba
     la identidad: presentacion/flyer-anuncio-v2.html (bloque .orbita) y branding/social. La web
     llevaba dos tonos propios (#D81E2C y #0A33D6) elegidos a ojo contra el amarillo; casi los
     mismos, pero «casi» es exactamente como una marca empieza a divergir entre el papel y la
     pantalla. Se alinean al flyer (26-ago). Son PRIMITIVOS intocables: es el escudo del cantón,
     no relleno gráfico. */
  --rt-estrella-roja:#C8202E;   /* las 2 parroquias URBANAS */
  --rt-estrella-azul:#1E3FAE;   /* las 8 parroquias RURALES */
  --rt-wa:#1DA851;

  /* 2 · SEMÁNTICOS · TEMA CLARO */
  --rt-fondo:var(--rt-amarillo);
  --rt-fondo-plano:var(--rt-amarillo);
  --rt-texto:var(--rt-rojo);
  --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-rojo);
  --rt-texto-tarjeta-suave:#161616;
  --rt-borde:rgba(215,20,26,.18);
  /* "contraste" = lo opuesto al fondo (aquí, la tinta morada sobre el papel amarillo). La pareja
     contraste/sobre-contraste se conserva aunque ya no haya segunda piel: es lo que impide que
     alguien pinte un botón con un color suelto y acabe con tinta sobre tinta. */
  --rt-contraste:var(--rt-rojo);
  --rt-sobre-contraste:#FFD200;
  --rt-sutil:rgba(215,20,26,.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-rojo-hondo);
  --rt-sombra-md:3px 3px 0 var(--rt-rojo-hondo);
  --rt-sombra-lg:5px 5px 0 var(--rt-rojo-hondo);
  /* El filo de las estrellas: contorno oscuro para despegarlas del amarillo, el mismo recurso que
     usa el logotipo impreso. Los colores de la bandera no se tocan; lo que despega es el filo. */
  --rt-filo-estrella:drop-shadow(0 1px 0 rgba(215,20,26,.6)) drop-shadow(0 0 1px rgba(215,20,26,.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;
  /* ── LA FAMILIA DE PÍLDORAS DE LA CABECERA (26-ago-2026) ──────────────────────────────────
     El dueño abrió la web en su teléfono y vio lo que había: «Destinos» y «Noticias» (borde
     morado, fondo transparente) y «WhatsApp» (verde) no eran la misma pieza — distinta altura,
     distinto peso, y el verde parecía de otra familia. Y NO era cosmética suelta: la pastilla
     llevaba borde de 2 px y el botón verde ninguno (4 px de diferencia), y el glifo de WhatsApp
     a 20 px estiraba su caja mientras la pastilla la medía el interlineado 1,55 del body. Dos
     alturas distintas por dos motivos distintos: imposible que casaran por casualidad.
     Con estas dos variables la altura y el cuerpo de letra son UN dato, no cuatro declaraciones
     regadas: quien toque una las mueve todas y no puede volver a descuadrarlas. */
  --rt-pastilla-alto:38px;
  --rt-pastilla-txt:clamp(.8125rem,1.6vw,.9rem);
}

/* ── AQUÍ VIVÍA EL TEMA OSCURO. MURIÓ EL 26-ago-2026 Y NO VUELVE ──────────────────────────────
   Un bloque de @media prefers-color-scheme: dark repintaba estos mismos semánticos en tinta
   (--rt-fondo #141410, tarjetas #242420, contraste amarillo). Estaba bien construido y en el
   escritorio del programador nunca se veía: el portátil va en claro. En Chone NO — el móvil de
   media ciudad lleva el modo oscuro puesto, así que la landing que el dueño reparte por WhatsApp
   le salía NEGRA a casi todo el mundo. Su reporte, literal: «no entiendo por qué sale negro».

   La marca de Yego Taxi es el papel amarillo #FFD200 con tinta morada: en oscuro no era «la misma
   marca de noche», era otra web. Un folleto impreso no se vuelve negro porque anochezca.

   El amarillo es AHORA la única piel, así que:
     · no hay que mantener dos juegos de contraste (era donde se colaban los bugs: el original de
       esta sección fue pintar texto con --rt-tinta, primitivo, y quedaba negro sobre negro),
     · --rt-filo-estrella vuelve a tener un solo valor (el filo oscuro del logotipo impreso), y
     · el color-scheme: only light de arriba impide que el navegador oscurezca por su cuenta.
   La ARQUITECTURA de tokens del comentario anterior SIGUE VIGENTE (semánticos vs primitivos): es
   lo que permite que /destinos y /noticias no puedan divergir de la home. Lo que se retira es la
   segunda piel, no la disciplina.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── 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}
/* 5-sep · la pastilla TAXI del logotipo Yego: negra con letra amarilla y tracking ancho. */
.rt-logo-pastilla{display:inline-block;background:var(--rt-tinta);color:var(--rt-amarillo);font-weight:900;
  text-transform:uppercase;letter-spacing:.3em;padding:.08em .28em .08em .5em;border-radius:.28em;
  font-size:.42em;line-height:1.2;margin-top:.12em;box-shadow:var(--rt-sombra-sm)}
.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 10 ESTRELLAS DE CHONE: 2 rojas (parroquias URBANAS) + 8 azules (RURALES), en ese orden.
   ERAN 7 (2+5) y estaban mal: el canon impreso —presentacion/flyer-anuncio-v2.html, bloque
   .orbita, que es lo que el dueño aprueba y reparte— lleva diez. Orden literal del 26-ago:
   «añadir las estrellas a chone hasta 8 azules». Las dos rojas van JUNTAS y primero, no repartidas:
   en la órbita del flyer flanquean el eje de arriba (18° y 342°) para que se lean como PAREJA y no
   como dos azules destenidas, y en una tira lineal como esta lo que conserva esa lectura es
   mantenerlas contiguas al principio. La proporción no se toca: es el escudo del cantón.
   Con diez glifos la tira crece ~40%, así que baja un punto el tamaño y el espaciado: en la
   cabecera convive con el logotipo y a 1,05rem/2,5px se comía el ancho del móvil. */
.rt-estrellas-chone{display:none;  /* 5-sep: sin estrellas de Chone, la marca es global */align-items:center;gap:4px;line-height:1;font-size:.95rem;
  letter-spacing:1.6px;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)}

/* ── LA FILA DE PÍLDORAS: UNA SOLA FAMILIA ────────────────────────────────────────────────────
   Secciones (borde macizo, no enlaces tímidos: son las puertas al resto de la web desde una
   pantalla sin scroll) y WhatsApp (el principal) comparten AQUÍ todo lo que hace que se lean como
   hermanas: alto, radio, cuerpo, peso y línea base. Lo que las distingue es lo único que debe
   distinguirlas — el RELLENO: verde macizo el principal, transparente los secundarios.

   Tres detalles que parecen manía y son justo lo que estaba descuadrado:
     · height fijo + line-height:1 — la altura la manda la píldora, no el interlineado 1,55 que
       hereda del body ni el glifo de WhatsApp. Antes cada una la calculaba a su manera.
     · borde de 2 px en TODAS (transparente en el verde, que lo pinta de su color): un borde que
       existe en una y no en la otra son 4 px de diferencia de alto imposibles de ver a ojo.
     · box-sizing:border-box ya es global, así que el alto es el mismo con borde y sin él.

   Y la doble clase .rt-btn-wa.rt-btn-wa--mini no es adorno: .rt-btn-wa (el botón grande del
   hero) se declara MÁS ABAJO en este mismo fichero con su propio padding y su propio cuerpo de
   letra, y con una sola clase ganaría por orden y volvería a descuadrar la fila. La especificidad
   extra ata el acuerdo aquí, donde se explica, en vez de depender de quién esté escrito después. */
.rt-pastilla,.rt-btn-wa.rt-btn-wa--mini{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--rt-pastilla-alto);padding:0 15px;border:2px solid transparent;
  border-radius:var(--rt-radio-pill);font-size:var(--rt-pastilla-txt);font-weight:800;
  line-height:1;white-space:nowrap;text-decoration:none}
.rt-pastilla{color:var(--rt-texto);border-color:var(--rt-contraste);
  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}
/* El WhatsApp de la cabecera: MISMA píldora que las de sección (el alto, el radio, el cuerpo y el
   peso los pone la familia de arriba) y solo cambia lo que marca la jerarquía — verde macizo y su
   sombra corta. El glifo baja de 20 a 17 px: a 20 pesaba más que las letras que lo acompañan y era
   media razón de que el botón se leyera «de otra familia». El borde va del color del propio verde,
   no transparente: así el trazo del contorno mide igual en las cuatro píldoras y ninguna se hunde
   un par de píxeles respecto a sus vecinas. */
.rt-btn-wa.rt-btn-wa--mini{gap:7px;border-color:var(--rt-wa);box-shadow:var(--rt-sombra-sm)}
.rt-btn-wa--mini svg{width:17px;height:17px}

/* MÓVIL ESTRECHO (375 px es el teléfono desde el que el dueño mira la web): con «Fletes» son
   cuatro píldoras en la home y cinco en las interiores, y a tamaño de escritorio no caben en una
   línea. La fila ENVUELVE —nunca desborda: el ancestro no scrollea en horizontal— y para que
   envuelva en DOS filas limpias en vez de tres, aquí se aprieta el aire, no el texto: píldora un
   punto más baja, relleno más corto y menos hueco entre ellas. Se toca la variable y no el height
   para que el alto siga siendo un solo dato. */
@media (max-width:420px){
  .rt-pastilla,.rt-btn-wa.rt-btn-wa--mini{--rt-pastilla-alto:34px;padding:0 12px}
  .rt-nav-links,.cab-links{gap:6px}
}
/* 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:normal;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}

/* LA CALIFICACIÓN DEL CLIENTE — «Excelente ⭐», no cinco estrellas (26-ago-2026).
   Aquí había una tira de 5 ★ que salían haciendo pop una a una. Era bonita y era MENTIRA: desde
   la 0118 (29-jul) el bot no pregunta con estrellas, pregunta con tres botones —Excelente / Bueno
   / Malo— y el cliente JAMÁS ve un número (internamente valen 10/8/5, pero eso es cosa nuestra).
   Esta pantalla vende «así es hablar con Rapi», así que enseñar un flujo que ya no existe le
   promete al vecino algo que no se va a encontrar. Orden del dueño: «en calificación poner
   excelente con estrella bueno y malo».
   La estrella se queda —es el premio visual del momento— pero acompaña a la PALABRA. Un solo pop
   en vez de cinco encadenados: el guion del teléfono ya es largo y la burbuja siguiente entra a
   los 780 ms. */
.rt-cal{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem}
.rt-cal i{font-style:normal;font-size:1rem;line-height:1;color:#F5A623;
  opacity:0;animation:rt-pop .3s ease-out .1s forwards}
@keyframes rt-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ── Pie: una barra y nada más ──────────────────────────────────────────────────────────────
   CENTRADO (26-ago-2026, reporte del dueño desde su teléfono: «YEGO TAXI · CHONE · MANABÍ» salía
   pegado a la izquierda). El justify-content:space-between era herencia de cuando la barra tenía
   DOS hijos —marca a un lado, enlaces al otro—; al quedarse con uno solo, «repartir el espacio
   sobrante entre los extremos» significa exactamente «pégalo a la izquierda». Con «center» el pie
   dice lo mismo que el de las interiores (.pie-legal, que ya iba centrado) y que el eje del
   logotipo en móvil, donde la cabecera también se centra. */
.rt-pie{min-height:0}
.rt-pie-barra{display:flex;align-items:center;justify-content:center;text-align:center;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 #FFD200 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)}