/* ============================================================
   plantilla-portada.css · VisionLovers · SOLO carga en la portada (is_front_page()).
   Cero !important. Cero estilos en línea. Todo sale de --vl-* (tokens.css).
   Se encola el último (inc/plantilla-portada.php, prioridad 10015): gana por orden.
   ============================================================ */

/* ---------- 1 · Bandas de color a todo el ancho ----------
   base.css ya rompe el ancho del contenedor de Woodmart para .vl-hero / .vl-franja / .vl-pie
   (comentario en base.css: «truco de Sergio, se conserva»). Ese truco funcionaba en el resto
   de páginas porque WPBakery mete cada fila dentro de un `vc_row-fluid` «a todo el ancho»
   que ya escapa del `.container` de Woodmart por su cuenta (JS de WPBakery). La portada
   nueva NO usa WPBakery, así que las bandas de color que aquí sí llevan `.vl-section--soft`
   / `.vl-section--gray` / `.vl-section--light` (y no están en la lista de base.css) se
   quedaban encajadas dentro de los ~1180 px del `.container` de Woodmart, con un margen
   en blanco a los lados que el dibujo no lleva (comprobado: las capturas del dibujo muestran
   esas bandas a todo el ancho de la pantalla). Mismo truco, mismas condiciones (body ya
   lleva `overflow-x:hidden` en base.css, así que no aparece una barra de scroll horizontal). */
.vl-plantilla-portada .vl-section--soft,
.vl-plantilla-portada .vl-section--gray,
.vl-plantilla-portada .vl-section--light {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ---------- 2 · La rejilla de «Ópticas Lovers» con centros reales ----------
   Hallazgo al montar (25-26/09/2026): `vl_remate_portada_real()` (inc/remate.php) ya pintaba
   esta rejilla con las clases `.vl-panel__grid` / `.vl-panel__card` / `.vl-panel__pie`, pero
   esas clases las viste `assets/css/paneles.css`, y ese fichero SOLO se encola con sesión
   iniciada en /mi-cuenta/ (ver functions.php). En la portada (sin sesión, para todo el
   mundo) esas clases no tenían NINGUNA regla propia en ningún fichero: las tarjetas salían
   apiladas una debajo de otra, sin rejilla. No se toca paneles.css (no es de esta plantilla,
   y cambiarlo afectaría a Mi cuenta): la rejilla se resuelve aquí, solo para la portada. */
.vl-portada-centros {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vl-space-lg);
	margin-top: var(--vl-space-lg);
}
@media (min-width: 640px) {
	.vl-portada-centros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.vl-portada-centros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vl-portada-centro { display: flex; flex-direction: column; }
.vl-portada-centro .vl-panel__pie { margin-top: auto; }
.vl-portada-centro .vl-panel__pie .vl-btn { width: 100%; }
@media (min-width: 480px) {
	.vl-portada-centro .vl-panel__pie .vl-btn { width: auto; }
}

/* La foto de la tarjeta: mismo tamaño que ya usaba vl_remate_portada_real() (180 px, recorte
   «cover»), pero como clase en vez de `style=""` en el HTML (aquí no se admiten estilos en
   línea). El marcador de posición «sin foto todavía» comparte la misma clase de tamaño para
   que la tarjeta no salte cuando falta la foto. */
.vl-portada-centro__foto,
.vl-portada-centro__foto-vacia {
	display: block;
	width: 100%;
	height: 180px;
	border-radius: var(--vl-radius-md);
	margin-bottom: var(--vl-space-sm);
}
.vl-portada-centro__foto { object-fit: cover; }
.vl-portada-centro__foto-vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vl-space-xs);
	background: var(--vl-bg-soft);
	color: var(--vl-text-muted);
}

/* ---------- 3 · «Nuestra historia»: hueco honesto cuando no hay foto real ----------
   Mismas medidas que la figura del dibujo (`.vl-hero__figure`), para que la sección no
   cambie de alto según haya o no haya foto ese día. */
.vl-hero__figure--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	background: var(--vl-bg-soft);
	color: var(--vl-text-muted);
	text-align: center;
	padding: var(--vl-space-lg);
	box-sizing: border-box;
}

/* ---------- Cifras de verdad (F3 · 26/09/2026): 3 números grandes en rosa legible (#a91b6f, 6,8:1) sobre el fondo suave ---------- */
.vl-cifras { display: grid; grid-template-columns: 1fr; gap: var(--vl-space-md, 16px); margin: 0 0 var(--vl-space-xl, 32px); padding: 0; }
.vl-cifras__item { margin: 0; }
.vl-cifras dt { font-family: inherit; font-size: 36px; line-height: 1.1; font-weight: 800; color: var(--vl-primary-dark, #a91b6f); }
.vl-cifras dd { margin: 2px 0 0; color: var(--vl-text-muted, #475569); font-size: var(--vl-font-small, 15px); }
@media (min-width: 640px) { .vl-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Provincias con contador (C4 #17 · 27/09/2026): chips de 44 px con el número en rosa legible. */
.vl-provincias { margin: 0 0 var(--vl-space-xl); }
.vl-provincias__titulo { display: block; font-family: var(--font-titulos); font-weight: 700; margin-bottom: var(--vl-space-sm); }
.vl-provincias__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); }
.vl-provincias__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--vl-radius-pill); background: var(--vl-bg-card); color: var(--vl-secondary-dark); font-weight: 600; text-decoration: none; box-shadow: var(--vl-aro); transition: box-shadow var(--vl-transition-neon); }
.vl-provincias__item:hover, .vl-provincias__item:focus-visible { box-shadow: var(--vl-aro-fuerte); }
.vl-provincias__n { color: var(--vl-primary-dark); font-weight: 700; }