/* Portada (/) — resumen del Observatorio (templates/page_home/_observatorio.html). Rediseño del 30-10-2026 con el
   molde de tarjeta de /marcas y /vehiculos (static/marcas-indice.css, `.mi-bc`): imagen 16:9 arriba, título, tres
   cifras entre filetes y botón con borde de tinta; tarjetas sin borde ni sombra. La imagen es de datos, sobre el gris
   verdoso --rail. Colores, solo tokens de Pizarra (:root de style.css).
   Cortes: ≥1024 tres columnas; por debajo, una fila que se desliza (tarjetas de 340 px como máximo), así el bloque no
   se apila en tres pantallas de móvil. */

.pobs {
    --pobs-soft: rgb(var(--gris-500));
    --pobs-faint: rgb(var(--gris-400));
    color: var(--ink);
}
.pobs a { color: inherit; text-decoration: none; }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────── */
.pobs-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bev); }
.pobs-hd h2 { margin: 6px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.pobs-lead { max-width: 720px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ── Tarjetas ─────────────────────────────────────────────────────────────────────────────── */
.pobs-cards { display: flex; gap: 16px; margin: 24px -16px 0 0; padding: 0 16px 4px 0; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; list-style: none; }
.pobs-cards::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .pobs-cards { margin-right: -24px; padding-right: 24px; } }
@media (min-width: 1024px) {
    .pobs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-right: 0; padding: 0; overflow: visible; }
}
.pobs-c { position: relative; display: flex; flex-direction: column; flex: 0 0 min(82%, 340px); min-width: 0; scroll-snap-align: start;
    background: var(--surface); }

/* La imagen: 16:9 como las fotos de /marcas, con la cinta de tinta arriba a la izquierda (la de «N.º 1 en ventas»). */
.pobs-v { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rail); }
.pobs-rk { position: absolute; left: 0; top: 0; z-index: 1; padding: 6px 10px; border-bottom-right-radius: 6px; background: var(--ink); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.pobs-v-nd { position: absolute; inset: 40px 16px 16px; display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 13px; color: var(--ink-2); }

/* Ventas frente a parque: dos áreas a sangre. Lo verde que queda por encima de la tinta es la brecha. */
.pobs-graf { position: absolute; left: 0; right: 0; top: 22%; width: 100%; height: 64%; }
.pobs-graf-ventas { fill: var(--bev); }
.pobs-graf-parque { fill: var(--ink); }
.pobs-x { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px; font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Coste: tres barras de la misma escala, en el orden y con el color de las cifras de abajo. */
.pobs-barras { position: absolute; inset: 40px 18px 14px; display: flex; flex-direction: column; justify-content: center; gap: 9px; list-style: none; }
.pobs-barras span { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.pobs-barras i { display: block; height: 14px; margin-top: 4px; border-radius: 0 3px 3px 0; }
.pobs-bar-casa i, .pobs-m-casa, .pobs-m-ventas { background: var(--bev); }
.pobs-bar-rapida i, .pobs-m-rapida { background: var(--t4); }
.pobs-bar-gasolina i, .pobs-m-gasolina, .pobs-m-parque { background: var(--ink); }

/* Recarga: las cinco provincias con más puntos por 1.000 habitantes. */
.pobs-prov { position: absolute; inset: 38px 16px 10px; display: grid; grid-auto-rows: 1fr; list-style: none; }
.pobs-prov li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 12.5px; }
.pobs-prov-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink-2); }
.pobs-prov-t i { display: block; height: 10px; border-radius: 0 3px 3px 0; background: var(--bev); }
.pobs-prov b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Cuerpo: título, fechas, tres cifras y el botón ───────────────────────────────────────── */
.pobs-b { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.pobs-b h3 { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
/* Dos líneas reservadas: las cifras de las tres tarjetas quedan a la misma altura. */
.pobs-meta { min-height: 2.9em; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--pobs-soft); }

/* Las cifras de /marcas (.mi-g3): tres columnas iguales entre filetes, el rótulo arriba y la cifra abajo. Tantas columnas
   como cifras: en el coste, una fila sin dato no está y las otras dos ocupan el ancho. */
.pobs-g3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.pobs-g3 > div { display: flex; flex-direction: column; justify-content: space-between; padding: 9px 6px; text-align: center; }
.pobs-g3 > div + div { border-left: 1px solid var(--hair); }
.pobs-g3 dt { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; color: var(--pobs-soft); }
.pobs-g3 dd { margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pobs-g3 dd small { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--pobs-soft); }
.pobs-g3 dd.pobs-na { font-size: 13px; font-weight: 600; color: var(--pobs-faint); }
/* La muestra de color: la cifra es la leyenda de la imagen. */
.pobs-m { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }

.pobs-nd { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pobs-nd a { position: relative; z-index: 1; text-decoration: underline; text-underline-offset: 3px; }

/* El botón de /marcas («Ver BYD»); su enlace se estira sobre toda la tarjeta. */
.pobs-a { margin-top: auto; padding-top: 14px; }
.pobs-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid var(--ink); border-radius: 6px;
    background: var(--surface); font-size: 14px; font-weight: 600; }
.pobs-go::after { content: ''; position: absolute; inset: 0; }
.pobs-c:hover .pobs-go { background: var(--ink); color: #fff; }
.pobs-go:focus-visible { outline: none; }
.pobs-go:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Salida al Observatorio ───────────────────────────────────────────────────────────────── */
.pobs-more { margin-top: 28px; text-align: center; }
.pobs-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: 6px; background: var(--ink); color: #fff;
    font-size: 14px; font-weight: 600; }
.pobs .pobs-cta { color: #fff; }
.pobs-cta:hover { background: rgb(var(--gris-700)); }
.pobs-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }