/* ==========================================================================
   Vértice Commerce 2 — core/patterns.css (v2.1)
   ESTRUCTURA de los 7 patterns de contenido nuevos (patterns/*.php):
   media-texto · timeline · valores · banda-cta · local · prensa ·
   faq-categorias. SOLO mecánica: grillas, bandas, riel de timeline,
   alternancia, responsive. CERO estética: colores, fondos, radios, sombras
   y tipografías los pone la piel (design/pages.css) sobre estos ganchos.

   Compat v2.0 (spec §2.7): esta hoja SOLO alcanza clases nuevas de v2.1
   (vc-pattern-media-text, vc-pattern-timeline, vc-pattern-valores,
   vc-pattern-banda-cta, vc-pattern-local, vc-pattern-prensa,
   vc-pattern-faq-cats) o clases compartidas ESCOPADAS bajo esos roots.
   Los patterns v2.0 (vc-pattern-hero / vc-pattern-about / vc-pattern-faq)
   no se tocan: ningún selector de acá matchea contenido existente.

   Ganchos que expone para la piel (qué vestir por proyecto):
   - .vc-pattern-media-text__row / __media / __body
   - .vc-pattern-timeline__list / __item / __year / __title
   - .vc-pattern-valores__grid / __item / __ico / __title
   - .vc-pattern-banda-cta / __inner / __body / __action
   - .vc-pattern-local__grid / __datos / __list / __item / __ico / __horarios
   - .vc-pattern-prensa__title / __grid / __logo
   - .vc-pattern-faq-cats__groups / __group / __cat (+ .vc-pattern-faq__item,
     clase compartida con el pattern FAQ v2.0 para heredar su vestido)

   Tokens nuevos opcionales que consume: NINGUNO. Solo tokens v2.0 del
   contrato (design/tokens.css): --sp-*, --line, --border-w, --radius-pill,
   --fs-sm, --ink-2, --surface.

   Breakpoints del contrato: 640px / 880px / 1100px, mobile-first.
   Motion: esta hoja no introduce transiciones ni animaciones (nada que
   apagar bajo prefers-reduced-motion; el toggle de <details> es nativo e
   instantáneo). Foco: no pisa outline/anillo global de core/reset.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Compartido (escopado a los patterns nuevos): respiración de sección y
   cabecera. Margen y medida son mecánica; el estilo del kicker es piel.
   -------------------------------------------------------------------------- */
.vc-pattern-media-text,
.vc-pattern-timeline,
.vc-pattern-valores,
.vc-pattern-banda-cta,
.vc-pattern-local,
.vc-pattern-prensa,
.vc-pattern-faq-cats {
	padding-block: clamp(var(--sp-7), 7vw, var(--sp-9));
}

.vc-pattern-timeline .vc-pattern-section-head,
.vc-pattern-valores .vc-pattern-section-head,
.vc-pattern-local .vc-pattern-section-head,
.vc-pattern-faq-cats .vc-pattern-section-head {
	max-width: 60ch;
	margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-7));
}

/* Neutralización del block-gap de WordPress sobre los hijos de estos grids.
   WP inyecta `:where(.is-layout-flow) > * + * { margin-block-start: 24px }` a
   los grupos en flujo. Estos contenedores son grupos flow que acá volvemos
   display:grid, así que ese margen NO separa filas: empuja cada item hacia
   abajo dentro de su celda y desalinea la 1.ª columna respecto del resto (el
   1.er hijo queda en 0, los demás con 24px). El `gap` del grid ya resuelve el
   espaciado, así que anulamos los márgenes de bloque de los hijos directos.
   Es mecánica pura (no estética): sin esto, cualquier piel hereda el desnivel.
   La piel puede re-fijar márgenes por ítem (misma specificity, va después). */
.vc-pattern-media-text__row > *,
.vc-pattern-timeline__list > *,
.vc-pattern-valores__grid > *,
.vc-pattern-banda-cta__inner > *,
.vc-pattern-local__grid > *,
.vc-pattern-prensa__grid > *,
.vc-pattern-faq-cats__groups > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   1) media-texto — bandas imagen + texto alternadas.
   Mobile: imagen arriba, texto abajo. Desde 880px: dos columnas; las bandas
   PARES invierten la imagen a la derecha (alternancia automática al duplicar
   filas). --invertida fuerza la inversión de una fila suelta.
   -------------------------------------------------------------------------- */
.vc-pattern-media-text__row {
	display: grid;
	gap: clamp(var(--sp-4), 3vw, var(--sp-6));
	align-items: center;
}

.vc-pattern-media-text__row + .vc-pattern-media-text__row {
	margin-block-start: clamp(var(--sp-7), 6vw, var(--sp-9));
}

.vc-pattern-media-text__media {
	margin: 0;
}

.vc-pattern-media-text__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 880px) {
	.vc-pattern-media-text__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(var(--sp-6), 4vw, var(--sp-8));
	}

	/* Alternancia: la imagen de las filas pares pasa a la 2ª columna. */
	.vc-pattern-media-text__row:nth-child(even) .vc-pattern-media-text__media,
	.vc-pattern-media-text__row--invertida .vc-pattern-media-text__media {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   2) timeline — riel vertical con marcador por hito.
   El riel usa --line/--border-w y el marcador --radius-pill: en direcciones
   flat queda hairline puro; el grosor/color final lo decide la piel vía
   tokens. Una sola columna en todos los anchos (columna de lectura).
   -------------------------------------------------------------------------- */
.vc-pattern-timeline__list {
	display: grid;
	gap: clamp(var(--sp-5), 4vw, var(--sp-7));
	padding-inline-start: var(--sp-5);
	border-inline-start: var(--border-w) solid var(--line);
}

.vc-pattern-timeline__item {
	position: relative;
}

/* Marcador: círculo de 11px centrado sobre el riel (mitad del punto +
   mitad del borde del riel), alineado con la primera línea del año. */
.vc-pattern-timeline__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * (var(--sp-5) + (var(--border-w) / 2) + 5.5px));
	top: 0.4em;
	width: 11px;
	height: 11px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: var(--border-w) solid var(--ink-2);
}

.vc-pattern-timeline__year {
	font-size: var(--fs-sm);
	color: var(--ink-2);
}

.vc-pattern-timeline__title {
	margin-block-start: var(--sp-1);
}

/* --------------------------------------------------------------------------
   3) valores — grilla de 3-4 valores con ícono.
   1 columna → 2 desde 640px → 4 desde 1100px. Con 3 valores, la piel puede
   fijar 3 columnas en el breakpoint alto (.vc-pattern-valores__grid).
   -------------------------------------------------------------------------- */
.vc-pattern-valores__grid {
	display: grid;
	gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
}

@media (min-width: 640px) {
	.vc-pattern-valores__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.vc-pattern-valores__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vc-pattern-valores__ico {
	display: inline-flex;
}

.vc-pattern-valores__ico svg {
	width: 26px;
	height: 26px;
}

.vc-pattern-valores__title {
	margin-block-start: var(--sp-3);
	margin-block-end: var(--sp-2);
}

/* --------------------------------------------------------------------------
   4) banda-cta — franja de conversión con UN botón.
   Mobile: apilada. Desde 880px: texto a la izquierda, botón a la derecha,
   centrados verticalmente. El fondo contrastado de la franja es piel.
   -------------------------------------------------------------------------- */
.vc-pattern-banda-cta__inner {
	display: grid;
	gap: clamp(var(--sp-4), 3vw, var(--sp-6));
	align-items: center;
}

.vc-pattern-banda-cta__body {
	max-width: 60ch;
}

@media (min-width: 880px) {
	.vc-pattern-banda-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* --------------------------------------------------------------------------
   5) local — datos del panel + horarios, sin mapa.
   Mobile: una columna (datos, después horarios). Desde 880px: dos columnas.
   Si no hay ningún dato cargado, la columna de datos no existe en el DOM
   (regla de oro); como la grilla es de 2 columnas fijas desde 880px, la
   regla :only-child de abajo hace que el hijo único (horarios) absorba el
   ancho completo — sin ella quedaría ocupando solo la columna izquierda.
   -------------------------------------------------------------------------- */
.vc-pattern-local__grid {
	display: grid;
	gap: clamp(var(--sp-5), 4vw, var(--sp-7));
	align-items: start;
}

@media (min-width: 880px) {
	.vc-pattern-local__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Absorción: si la columna de datos se omitió (regla de oro), el hijo único
   ocupa toda la banda en vez de dejar la mitad derecha vacía. */
.vc-pattern-local__grid > :only-child {
	grid-column: 1 / -1;
}

.vc-pattern-local__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.vc-pattern-local__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.vc-pattern-local__ico {
	display: inline-flex;
	flex: none;
	margin-block-start: 0.15em; /* alinea el ícono con la primera línea */
}

.vc-pattern-local__ico svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   6) prensa — grilla de logos.
   2 columnas → 3 desde 640px → 6 desde 1100px, celdas centradas y logos de
   altura contenida (los anchos dispares de los logos no rompen el ritmo).
   Tratamiento gris/mono o color: piel.
   -------------------------------------------------------------------------- */
.vc-pattern-prensa__title {
	margin-block-end: clamp(var(--sp-5), 4vw, var(--sp-6));
}

.vc-pattern-prensa__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
	align-items: center;
}

@media (min-width: 640px) {
	.vc-pattern-prensa__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.vc-pattern-prensa__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.vc-pattern-prensa__logo {
	margin: 0;
	display: flex;
	justify-content: center;
}

.vc-pattern-prensa__logo img {
	display: block;
	max-block-size: var(--sp-8);
	inline-size: auto;
	max-inline-size: 100%;
}

/* --------------------------------------------------------------------------
   7) faq-categorias — grupos de acordeones por tema.
   1 columna → 2 desde 880px. Los <details> reutilizan .vc-pattern-faq__item
   (vestido compartido con el pattern FAQ v2.0); acá SOLO se estructura
   dentro de .vc-pattern-faq-cats para no alterar el pattern viejo.
   -------------------------------------------------------------------------- */
.vc-pattern-faq-cats__groups {
	display: grid;
	gap: clamp(var(--sp-5), 4vw, var(--sp-7));
	align-items: start;
}

@media (min-width: 880px) {
	.vc-pattern-faq-cats__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vc-pattern-faq-cats__cat {
	margin-block-end: var(--sp-3);
}

.vc-pattern-faq-cats .vc-pattern-faq__item + .vc-pattern-faq__item {
	margin-block-start: var(--sp-2);
}

.vc-pattern-faq-cats .vc-pattern-faq__item > summary {
	cursor: pointer; /* affordance; el anillo de foco global queda intacto */
}