/* ==========================================================================
   BencinasChile · Tótem «Letrero» (elegido por Pablo el 30-10-2026 entre A y B del laboratorio, con el logo 1).
   Cabeza clara con la «estación», banda amarilla del jueves, placas de color y LED blanco de 7 segmentos.
   Letra de letrero vial: Barlow Semi Condensed Bold (OFL, assets/fonts).
   ========================================================================== */
@font-face {
  font-family: 'Barlow Letrero'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/barlow-sc700.woff2') format('woff2');
}

/* ---------- Cabecera como franja del techo de la estación ---------- */
[data-totem] .site-header { box-shadow: 0 2px 0 #ffb31a, 0 6px 18px rgba(255, 179, 26, 0.18); }
[data-totem] .site-logo img { height: 40px; width: auto; display: block; }
@media (max-width: 480px) { [data-totem] .site-logo img { height: 32px; } }

/* ---------- Letra de letrero en títulos ---------- */
[data-totem] .totem-titulo, [data-totem] .donde-titulo, [data-totem] .editorial-title, [data-totem] .hero-title,
[data-totem] .totem-banda strong, [data-totem] .placa, [data-totem] .totem-nombre {
  font-family: 'Barlow Letrero', 'Arial Narrow', system-ui, sans-serif; letter-spacing: 0.01em;
}

/* ---------- Tótem ---------- */
.totem { padding: 18px 0 22px; }
.totem-pilar {
  max-width: 560px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: #0b0b0d; border: 6px solid #1c1c20; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.totem-cabeza { padding: 14px 18px 12px; }
.totem-estacion { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.totem-titulo { margin: 2px 0 0; font-size: 26px; line-height: 1.1; font-weight: 700; }
.totem-fuente { margin: 4px 0 0; font-size: 13px; font-weight: 700; opacity: 0.8; }
.totem-banda { display: block; padding: 10px 18px; text-decoration: none; }
.totem-banda strong { display: block; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.totem-banda span { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.totem-banda:hover strong, .totem-banda:focus-visible strong { text-decoration: underline; }
.totem-filas { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; }
.totem-fila { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; background: #050506; border: 1px solid #222226; }
.placa { display: grid; place-items: center; height: 44px; border-radius: 6px; font-size: 24px; font-weight: 700; line-height: 1; }
.totem-nombre { color: #f5f5f4; font-size: 18px; }
.totem-precio { display: flex; align-items: flex-end; gap: 4px; color: #f5f5f4; }
.totem-signo { font-family: 'Barlow Letrero', system-ui, sans-serif; font-size: 22px; line-height: 1; margin-bottom: 4px; }
.totem-unidad { font-size: 12.5px; font-weight: 700; opacity: 0.75; margin-bottom: 2px; }
.led { height: 40px; width: auto; display: block; }
.led .on { fill: var(--led); }
.led .off { fill: var(--led-apagado); }
.totem .led { filter: drop-shadow(0 0 4px var(--led-brillo)); }
.totem-pie { margin: 0; padding: 4px 18px 6px; font-size: 14px; color: #a8a29e; }
.totem-pie a { color: inherit; text-decoration: underline; }
.totem .tablero-tendencia { padding: 0 18px 14px; margin: 0; }

/* A · Letrero: cabeza clara, banda amarilla, placas de color (convención de los surtidores; el rojo del 97 es solo un código) */
[data-totem="a"] .totem-pilar { --led: #f8f8f4; --led-apagado: rgba(255, 255, 255, 0.07); --led-brillo: rgba(255, 255, 255, 0.45); }
[data-totem="a"] .totem-cabeza { background: linear-gradient(180deg, #ffffff, #e9e9ea); color: #111113; text-align: center; }
[data-totem="a"] .totem-estacion { color: #2b2b30; }
[data-totem="a"] .totem-banda { background: #ffcc00; color: #111113; text-align: center; }
[data-totem="a"] .totem-banda.banda-baja { background: #ffcc00; }
[data-totem="a"] .placa-93 { background: #15803d; color: #fff; }
[data-totem="a"] .placa-95 { background: #1d4ed8; color: #fff; }
[data-totem="a"] .placa-97 { background: #b91c1c; color: #fff; }
[data-totem="a"] .placa-diesel { background: #facc15; color: #111113; }
[data-totem="a"] .placa-kerosene { background: #d6d3d1; color: #111113; }

@media (max-width: 480px) {
  .totem-titulo { font-size: 23px; }
  .totem-fila { grid-template-columns: 42px 1fr auto; gap: 8px; padding: 7px 8px; }
  .placa { height: 38px; font-size: 20px; }
  .totem-nombre { font-size: 16px; }
  .led { height: 32px; }
  .totem-signo { font-size: 18px; }
  .totem-unidad { display: none; }
}
@media (min-width: 900px) {
  .portada-arriba > .totem { grid-area: tablero; padding: 0; }
  .portada-arriba .totem .container { padding: 0; }
  .portada-arriba .totem-pilar { max-width: none; }
}

/* ---------- Lista de estaciones como islas de surtidores ---------- */
[data-totem] .estacion-cerca { border-left: 4px solid #ffb31a; }
[data-totem] .estacion-cerca .puesto { font-family: 'Barlow Letrero', system-ui, sans-serif; border-radius: 6px; background: #111113; color: #ffb31a; border: 1px solid #3a3a40; }
[data-totem] .estacion-cerca .valor b { display: inline-block; padding: 4px 6px; border-radius: 6px; background: #050506; --led: #f8f8f4; --led-apagado: rgba(255, 255, 255, 0.08); --led-brillo: rgba(255, 255, 255, 0.4); }
.led-chico { height: 22px; }

/* ---------- Marca de la estación: logo pequeño (o ícono neutro) junto al nombre ---------- */
.marca { display: inline-flex; align-items: center; gap: 8px; }
.marca-logo { height: 20px; width: 64px; object-fit: contain; flex: none; background: #ffffff; padding: 2px 4px; border-radius: 4px; box-sizing: content-box; }
.marca-neutra { width: 20px; height: 20px; border-radius: 4px; background: #3a3a40; position: relative; flex: none; }
.marca-neutra::after { content: ''; position: absolute; left: 6px; top: 4px; width: 8px; height: 10px; border-radius: 1px; background: #a8a29e; box-shadow: 0 12px 0 -2px #a8a29e; }
.marca-logo + strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-totem] .estacion-cerca .valor b { display: block; width: fit-content; margin-left: auto; }