/* Palio App · estilo «Nocturno» de la web, a juego con la app.
   Se carga después de estilos.css: cambia la paleta (granate casi negro, oro y cera), las letras (cartel + Figtree)
   y corrige los pocos colores fijos de estilos.css que eran para fondo claro. */
:root {
  --papel: #10070B; --papel-2: #1C0B12; --blanco: #1A0A10;
  --tinta: #F6EEE3; --tinta-2: #C9B6B1; --tinta-3: #8E7A78; --linea: rgba(242, 199, 107, .18);
  --granate: #F2C76B; --terciopelo: #240C15; --terciopelo-2: #33121F;
  --oro: #F2C76B; --oro-claro: #F8DA97; --cirio: #E8793A; --sobre-osc: #F6EEE3; --sobre-osc-2: #C9B6B1;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --cursiva: "Fraunces", Georgia, serif;
  --texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
body { background: var(--papel); color: var(--tinta); }

/* Titulares tipo cartel; la parte en cursiva, en oro */
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
h1 em, h2 em, h3 em, .osc h1 em, .osc h2 em { font-family: var(--cursiva); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; color: var(--oro); }
h4 { font-family: var(--texto); }
.etq, .osc .etq { color: var(--oro); }

/* Botones */
.btn-tinta { background: var(--oro); color: #10070B; }
.btn-oro { color: #10070B; }
@media (hover: hover) and (pointer: fine) { .btn-tinta:hover { background: var(--oro-claro); } .btn-linea:hover { box-shadow: inset 0 0 0 1.5px var(--oro); } }
.menu .btn { color: #10070B; }

/* Cabecera y menú del móvil */
.cab { background: rgba(16, 7, 11, .86); }
.logo { font: 900 25px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.logo span { color: var(--oro); font-weight: 900; }
.menu a[aria-current="page"] { background: var(--papel-2); color: var(--tinta); }
.abrir { background: var(--papel-2); }
.hoja nav a { font-family: var(--display); font-weight: 800; text-transform: uppercase; }

/* Bandas oscuras: un punto más de vino para que se distingan del fondo */
.osc { background: var(--terciopelo); }

/* Móvil de muestra */
.telefono { box-shadow: 0 50px 100px -20px rgba(0, 0, 0, .7), 0 0 0 1.5px rgba(242, 199, 107, .45); }

/* Plano del localizador de demostración, de noche */
.plano { background: #1A0B11; }
.plano .calles { stroke: #3A2A2C; }
.plano .r-fondo { stroke: #2A1418; }
.plano .r-pend { stroke: #F2C76B; }
.plano .r-hecho { stroke: #F2C76B; }
.plano .parada { fill: #10070B; stroke: #F2C76B; }
.plano .rot { fill: #C9B6B1; stroke: #1A0B11; }
.sello { background: rgba(16, 7, 11, .9); color: var(--tinta-2); }
.panel .quien img { background: #F6EEE3; }

/* Formularios */
input, select, textarea { background: var(--papel-2); color: var(--tinta); }
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
.msg.ok { background: #1F3328; color: #8FD0A8; } .msg.mal { background: #3A1A16; color: #F0A592; }

/* Textos legales y bloques largos */
.sec a { color: var(--oro); }
.sec .btn, .sec .btn-linea { color: var(--tinta); }
.sec .btn-oro, .sec .btn-tinta { color: #10070B; }
.pie .lema, .lema { font-family: var(--cursiva); font-style: italic; text-transform: none; }
.hora, .panel .quien b { font-weight: 800; }