/**
 * Agronorte — Posventa (sistema compartido)
 *
 * Sistema de diseño editorial compartido por las 5 páginas de posventa
 * (Repuestos, Servicio Técnico, Paquetes de Seguimiento,
 * Agricultura de Precisión, PUKs). Reusa el ADN editorial de Nosotros
 * (hero + section-header) y suma los componentes propios de posventa.
 *
 * Todas las clases van bajo `.ag-pv` y con prefijo `.ag-pv-`.
 * Se carga global (compatibilidad con Barba.js) como el resto del CSS del theme.
 *
 * @package Agronorte
 * @since 1.2.0
 */

/* ─── Tokens del scope ──────────────────────────────────── */

.ag-pv {
	--pv-inline: var(--agronorte-layout-inline);
	--pv-content: 1290px;
	--pv-section-py: clamp(64px, 8vw, 96px);
	--pv-display: clamp(2.5rem, 5.5vw, 5rem);   /* hero H1 ~80px */
	--pv-h2: clamp(2rem, 4.6vw, 4rem);          /* section H2 → 64px desktop (Figma) */
	--pv-radius: var(--wp--custom--border-radius--large, 16px);
	--pv-radius-sm: var(--wp--custom--border-radius--small, 12px);
	--pv-divisor: var(--wp--preset--color--neutral-300, #d4d4d4);
	background: var(--wp--preset--color--white, #fff);
}

/* Wrapper de contenido genérico (centrado, max-width) */
.ag-pv-wrap {
	max-width: var(--pv-content);
	margin: 0 auto;
}

/* Sección genérica (padding inline + ritmo vertical) */
.ag-pv-section {
	padding: var(--pv-section-py) var(--pv-inline);
}

/* NOTA: los neutralizadores de márgenes del block-layout de WordPress que
   mantienen estos componentes convertidos iguales a su markup PHP original
   viven en global.css (buscá "Neutraliza los márgenes de bloque inyectados"),
   scopeados a todos los componentes del theme (clases BEM agronorte-/ag-pv) en todo el sitio. */

/* ─── Botones — reusa el sistema .agronorte-home-btn (home.css):
       base + --dark / --outline / --outline-dark / __arrow / __wa.
       Posventa sólo suma las dos variantes que pide el diseño y que todavía
       no existían: un primary verde sólido y un outline claro para superficies
       oscuras. El hover sigue la convención de home-btn (el fill se oscurece). ── */

.agronorte-home-btn--green {
	background: var(--wp--preset--color--primary, #367c2b);
	color: var(--wp--preset--color--white, #fff);
	height: 56px;
	padding: 18px 28px;
}
.agronorte-home-btn--green:hover {
	background: var(--wp--preset--color--primary-dark, #2d6830);
}

/* Botones de WhatsApp de las páginas internas de posventa → NEGRO.
   Solo cambia el fondo (el texto y el ícono WA siguen blancos). El mismo botón
   dentro del bloque CSC (.ag-pv-csc) conserva el verde (override debajo); la
   card flotante usa .ag-csc-btn--green y tampoco se toca. */
.ag-pv .agronorte-home-btn--green,
.ag-pv .agronorte-home-btn-block-green-wa .wp-block-button__link {
	background: var(--wp--preset--color--neutral-900, #171717);
}
.ag-pv .agronorte-home-btn--green:hover,
.ag-pv .agronorte-home-btn-block-green-wa .wp-block-button__link:hover {
	background: var(--wp--preset--color--neutral-800, #262626);
}
/* Excepción: el botón del bloque CSC pre-footer queda verde. */
.ag-pv-csc .agronorte-home-btn--green {
	background: var(--wp--preset--color--primary, #367c2b);
}
.ag-pv-csc .agronorte-home-btn--green:hover {
	background: var(--wp--preset--color--primary-dark, #2d6830);
}

.agronorte-home-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--white, #fff);
	height: 56px;
	padding: 18px 28px;
}

/* Primary blanco sólido — se usa en el Banner Big (Figma). */
.agronorte-home-btn--white {
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--neutral-900, #171717);
	height: 56px;
	padding: 18px 28px;
	transition: background-color var(--wp--custom--transition--normal, 0.25s ease),
		transform var(--wp--custom--transition--normal, 0.25s ease),
		box-shadow var(--wp--custom--transition--normal, 0.25s ease);
}
.agronorte-home-btn--white:hover {
	background: var(--wp--preset--color--neutral-100, #f5f5f5);
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--medium, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.agronorte-home-btn--outline-light:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.06);
}

/* Los CTAs de posventa llevan un ícono __wa, no un label "→" al final, así que:
   1) cancelá el empujoncito del label de home-btn (corre el texto +4px en hover);
   2) renderizá el ícono como block para que quede centrado (un SVG inline se apoya
      en la baseline del texto, dejando un gap abajo → se ve descentrado). */
.ag-pv .agronorte-home-btn:hover > span:not(.agronorte-home-btn__wa) {
	transform: none;
}
.ag-pv .agronorte-home-btn__wa svg {
	display: block;
}

/* Link de texto inline con flecha (CTA de icard) */
.ag-pv-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #367c2b);
	text-decoration: none;
	transition: gap var(--wp--custom--transition--fast, 0.15s ease),
		color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-link svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
.ag-pv-link:hover { gap: 10px; color: var(--wp--preset--color--primary-dark, #2d6830); }
.ag-pv-link:hover svg { transform: translateX(2px); }

/* ─── Hero (editorial) ──────────────────────────────────── */

.ag-pv-hero {
	background: var(--wp--preset--color--white, #fff);
	padding: 48px var(--pv-inline) 44px;
}
.ag-pv-hero__inner {
	max-width: var(--pv-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* La imagen/video expandible (about-media) alinea su FRAME con el container de
   contenido (--pv-content): el inner lleva 2·pv-inline extra para compensar su
   propio padding interno (el que la animación de expand lleva a 0). Scopeado a
   .ag-pv (posventa) para no tocar Nosotros. Así hero, secciones e imagen coinciden. */
.ag-pv .agronorte-about-media__inner {
	max-width: calc(var(--pv-content) + 2 * var(--pv-inline));
}
.ag-pv-hero__head { display: flex; flex-direction: column; gap: 24px; }
.ag-pv-hero__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: var(--pv-display);
	font-weight: 600;
	line-height: 1.15; /* igual que el hero de Nosotros + Figma */
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
	text-wrap: wrap;
}
.ag-pv-hero__subtitle {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 20px;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral-500, #737373);
	margin: 0;
	max-width: 820px;
}
.ag-pv-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ─── Section header (kicker lateral + H2 grande + bajada) ────── */

.ag-pv-sh {
	display: grid;
	grid-template-columns: 320px 80px 1fr;
	gap: 24px;
	align-items: start;
}
.ag-pv-sh__label { display: flex; align-items: center; gap: 16px; }
.ag-pv-sh__divisor {
	width: 2px;
	height: 30px;
	background: var(--pv-divisor);
	flex-shrink: 0;
}
.ag-pv-sh__tag {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-400, #a3a3a3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.ag-pv-sh__content {
	grid-column: 3;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 842px;
}
.ag-pv-sh__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: var(--pv-h2);
	font-weight: 600;
	line-height: 1.02;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
}
.ag-pv-sh__desc {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--neutral-500, #737373);
	margin: 0;
}
.ag-pv-sh__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* Salto de línea forzado SOLO en desktop (mismo patrón que __br-desktop de Home
   y Nosotros): oculto por defecto para que en mobile el texto fluya natural, y se
   muestra a partir de 1024px donde el corte balancea las dos líneas del diseño. */
.ag-pv-br-desktop { display: none; }
@media (min-width: 1024px) {
	.ag-pv-br-desktop { display: inline; }
}

/* Variante clara (sobre secciones oscuras) */
.ag-pv-sh--light .ag-pv-sh__tag { color: rgba(255, 255, 255, 0.55); }
.ag-pv-sh--light .ag-pv-sh__divisor { background: rgba(255, 255, 255, 0.25); }
.ag-pv-sh--light .ag-pv-sh__title { color: var(--wp--preset--color--white, #fff); }
.ag-pv-sh--light .ag-pv-sh__desc { color: rgba(255, 255, 255, 0.7); }

/* ─── Bloque de media — el video del hero reusa el markup
       `.agronorte-about-media` de Nosotros para que crezca a full-bleed con
       el scroll (ver about-media.js initScrollExpand). Sólo el botón de play
       es propio de posventa. ───────────────────────────────────────────── */

.ag-pv-media__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--neutral-900, #171717);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}
.ag-pv-media__play:hover { transform: scale(1.06); background: var(--wp--preset--color--white); }

/* ─── Tratamiento de placeholder (reemplazar por media real) ──────── */

.ag-pv-ph {
	position: relative;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, var(--wp--preset--color--neutral-200, #e5e5e5), var(--wp--preset--color--neutral-300, #d4d4d4));
	display: flex;
	align-items: center;
	justify-content: center;
}
.ag-pv-ph--dark {
	background: linear-gradient(135deg, var(--wp--preset--color--neutral-700, #404040), var(--wp--preset--color--neutral-900, #171717));
}
.ag-pv-ph__label {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.35);
	padding: 6px 12px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 8px;
}
.ag-pv-ph--dark .ag-pv-ph__label {
	color: rgba(255, 255, 255, 0.6);
	border-color: rgba(255, 255, 255, 0.35);
}
/* Imagen real que rellena el contenedor (reemplaza a .ag-pv-ph en banda,
   statement, prodcard y media frames). */
.ag-pv-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Cards con ícono (3 en fila) ───────────────────────── */

.ag-pv-icards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ag-pv-icard {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px 28px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5);
	border-radius: var(--pv-radius);
	transition: border-color var(--wp--custom--transition--fast, 0.15s ease);
}
/* Misma convención de hover que .agronorte-noticia-card: borde un poco más
   visible, sin sombra, sin lift. */
.ag-pv-icard:hover {
	border-color: var(--wp--preset--color--neutral-300, #d4d4d4);
}
.ag-pv-icard__head { display: flex; flex-direction: column; gap: 14px; }
.ag-pv-icard__icon {
	height: 60px;
	color: var(--wp--preset--color--primary, #367c2b);
	display: flex;
	align-items: center;
	margin: 0;
}
.ag-pv-icard__icon svg { height: 60px; width: auto; display: block; }
/* Los SVG de ícono a todo color embebidos como <img> (wp:image) mantienen sus
   propios fills verde/blanco — dimensionados a la caja de ícono de 60px en su aspect ratio nativo. */
.ag-pv-icard__icon img { display: block; width: auto; height: auto; max-height: 60px; }
.ag-pv-icard__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
}
.ag-pv-icard__body {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700, #404040);
	margin: 0;
}
.ag-pv-icard .ag-pv-link { margin-top: auto; }

/* ─── Catálogos — reusa las cards de categoría de home (.agronorte-home-cat).
       El hover revela el footer, acá reusado como "Descargar catálogo
       PDF" + flecha. El placeholder llena el bg de la card hasta que entre la
       foto real (reemplazá el .ag-pv-ph por un <img class="…__img">). ── */

.ag-pv .agronorte-home-cat > .ag-pv-ph {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* ─── Banner slim — reusa .agronorte-noticias-banner (blog/catálogo)
       con un modifier `--photo` para que la imagen sea un bleed visible a la
       derecha en vez del logo fantasma con screen-blend. ──────────────── */

.ag-pv .agronorte-noticias-banner { margin: 0; }

/* El alto del CTA iguala exacto al botón del catalog-banner de Equipos (56px):
   el banner del blog usa 18px de padding vertical (→68px); alinealo a 12px. */
.ag-pv .agronorte-noticias-banner__btn { padding: 12px 24px 12px 28px; }

/* Variante con foto visible: va en el centro-derecha del panel (despejada del
   CTA en el extremo derecho, según Figma), enmascarada hacia la izquierda en el panel oscuro. */
.agronorte-noticias-banner--photo .agronorte-noticias-banner__photo {
	position: absolute;
	top: 0;
	right: 320px;
	bottom: 0;
	width: 400px;
	z-index: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 45%, #000 88%, transparent);
}
.agronorte-noticias-banner--photo .agronorte-noticias-banner__photo img,
.agronorte-noticias-banner--photo .agronorte-noticias-banner__photo .ag-pv-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* El título queda en una sola línea (no le limites el ancho). */
.agronorte-noticias-banner--photo .agronorte-noticias-banner__text h3 { white-space: nowrap; }

@media (max-width: 1100px) {
	.agronorte-noticias-banner--photo .agronorte-noticias-banner__photo { display: none; }
	.agronorte-noticias-banner--photo .agronorte-noticias-banner__text h3 { white-space: normal; }
}

/* ─── Alt-media integrado (video + panel de garantía, una card) ──── */

.ag-pv-altmedia {
	border-radius: var(--pv-radius);
	overflow: hidden;
}
.ag-pv-altmedia__video {
	position: relative;
	aspect-ratio: 842 / 480;
	overflow: hidden;
}
.ag-pv-altmedia__garantia {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 28px 32px;
	background: var(--wp--preset--color--primary-light, #e8f5e3);
}
.ag-pv-altmedia__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #367c2b);
	color: var(--wp--preset--color--white, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ag-pv-altmedia__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2d6830);
	margin: 0 0 6px;
}
.ag-pv-altmedia__text {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--primary, #367c2b);
	margin: 0;
}

/* ─── Lista de bullets (3 columnas) ─────────────────────── */

.ag-pv-bullets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 200px));
	gap: 16px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ag-pv-bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 16px;
	color: var(--wp--preset--color--neutral-800, #262626);
}
.ag-pv-bullets li::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #367c2b);
	flex-shrink: 0;
}

/* ─── Tira de logos (chips) ─────────────────────────────── */

.ag-pv-logos { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
/* Logos como imágenes sueltas (80px de alto, sin caja ni borde — Figma). */
.ag-pv-logos__chip { display: inline-flex; align-items: center; }
.ag-pv-logos__chip img { height: 80px; width: auto; object-fit: contain; display: block; }
.ag-pv-logos--center { justify-content: center; }

/* Recuadro con texto Brayco + logos al PIE de la imagen expandible del hero.
   position:absolute con tamaño FIJO: como el frame se expande por width (no scale,
   ver about-media.js), el recuadro no se redimensiona — sólo se re-ancla al nuevo
   pie del frame. Semi-transparente con blur (glass) y bordes redondeados. */
/* El recuadro se posiciona contra el MARGEN DEL CONTAINER (no contra el frame que
   se expande): un outer full-width anclado al pie de la sección + un inner con la
   misma estructura que las secciones (max-width --pv-content centrado + padding
   --pv-inline). Así queda fijo al margen de contenido aunque la imagen crezca. */
.ag-pv--alquiler .agronorte-about-media { position: relative; }
.ag-pv-media-caption-outer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 120px;
	z-index: 2;
	padding-inline: var(--pv-inline);
	pointer-events: none;
}
.ag-pv-media-caption-inner {
	max-width: var(--pv-content);
	margin: 0 auto;
}
.ag-pv-media-caption {
	max-width: 580px;
	display: flex;
	flex-direction: column;
	padding: 40px 28px;
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: var(--wp--custom--border-radius--large, 16px);
	color: var(--wp--preset--color--white, #fff);
	pointer-events: auto;
}
/* Contenedor del contenido (texto + logos). El gap vive acá, no en la caja, para
   que en mobile el fondo de la caja pueda ensancharse sin tocar este contenedor. */
.ag-pv-media-caption__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.ag-pv-media-caption__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}
.ag-pv-media-caption__logos {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.ag-pv-media-caption__logos img {
	height: 26px;
	width: auto;
	object-fit: contain;
	display: block;
}
.ag-pv-media-caption__plus {
	color: var(--wp--preset--color--neutral-400, #a3a3a3);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}
@media (max-width: 768px) {
	/* En mobile el recuadro Brayco deja de estar superpuesto y se encastra DEBAJO
	   de la imagen (mismo recurso que el bloque de garantía de Repuestos): la imagen
	   lleva las esquinas inferiores rectas y el recuadro las superiores rectas, así
	   quedan conectados como una sola pieza. El outer pasa a flujo normal y su
	   padding-inline (= --pv-inline) lo alinea al mismo margen que la imagen. */
	.ag-pv-media-caption-outer {
		position: static;
		bottom: auto;
		pointer-events: auto;
	}
	.ag-pv--alquiler .agronorte-about-media__frame {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.ag-pv-media-caption {
		max-width: none;
		padding: 18px 20px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	/* El contenido queda con ANCHO FIJO (= ancho en reposo: viewport menos los
	   márgenes del container y el padding de la caja) y centrado. Cuando el fondo
	   de la caja se ensancha con el scroll (sync con la imagen, ver about-media.js),
	   este contenedor no cambia de tamaño ni se desplaza → el texto no se mueve. */
	.ag-pv-media-caption__content {
		gap: 14px;
		width: calc(100vw - 2 * var(--pv-inline) - 40px);
		margin-inline: auto;
	}
	.ag-pv-media-caption__text { font-size: 14px; }
	.ag-pv-media-caption__logos img { height: 22px; }
}

/* pv-alquiler-equipos — la fila de equipos bleed hasta los bordes del viewport:
   a la derecha por defecto, y a la izquierda al scrollear. La 1ª card conserva su
   offset inicial (alineada con el header) vía padding-left, así el load no cambia.
   La sección clipea overflow-x para que el bleed nunca genere scroll horizontal. */
/* Bleed de la fila de equipos hasta los bordes del viewport — MISMO mecanismo
   probado de .ag-pv-catrow (no usa 50vw ni overflow:clip, que rompían el scroll):
   margin-inline negativo = -pv-inline saca la fila hasta el borde (a anchos donde
   el wrap llena el content box, que es el caso en notebook/desktop normal). */
/* Galería/marquesina (auto-scroll por JS, ver drag-scroll.js) — COMPONENTE PROPIO,
   independiente del slider oscuro .agronorte-product-why aunque ambos compartan el
   ADN de .ag-pv-prodcard. Todo cuelga de .ag-pv-prodrow--marquee (NO de la página),
   así nunca toca al slider de fondo oscuro que vive en las mismas páginas.
   - Bleed hasta el borde del container: su padre .ag-pv-wrap no tiene padding
     propio, así que margin -pv-inline lo lleva al borde del content box.
   - Sin snap (pelearía con el auto-scroll continuo) y 1ª card sin offset (loop
     parejo, las cards arrancan en el borde y fluyen). El drag sigue funcionando.
   Doble clase (.ag-pv-prodrow.ag-pv-prodrow--marquee = 0,2,0) para ganarle a la
   base .ag-pv-prodrow sin importar el orden, sin pisar el slider oscuro. */
.ag-pv-prodrow.ag-pv-prodrow--marquee {
	margin-inline: calc(-1 * var(--pv-inline));
	padding-inline: 0;
	scroll-padding-left: 0;
	scroll-snap-type: none;
}
.ag-pv-prodrow.ag-pv-prodrow--marquee > .ag-pv-prodcard:first-child {
	margin-left: 0;
	scroll-snap-align: none;
}

/* ─── Estilo de card "ancho" compartido — mismo ancho de tarjeta y tipografía
       (título + descripción) que los icards de "Sin sorpresas": ancho ≈
       (--pv-content - 3·gap)/4 = (1290-72)/4 ≈ 304px; h3 20px, p 15px/1.55.
       Lo usan la marquesina (equipos en Alquiler, Tecnología John Deere en AP)
       y la grilla fija .ag-pv-prodgrid (Cómo trabajamos en Servicio Técnico). */
.ag-pv-prodrow--marquee .ag-pv-prodcard,
.ag-pv-prodgrid .ag-pv-prodcard { flex-basis: 304px; }
.ag-pv-prodrow--marquee .ag-pv-prodcard__text h3,
.ag-pv-prodgrid .ag-pv-prodcard__text h3 { font-size: 20px; }
.ag-pv-prodrow--marquee .ag-pv-prodcard__text p,
.ag-pv-prodgrid .ag-pv-prodcard__text p { font-size: 15px; line-height: 1.55; }

/* Variante FIJA (sin marquesina): grilla de cards dentro del container de
   contenido. Misma card que la marquesina pero sin scroll ni auto-desplazamiento.
   Cantidad de columnas según el número de cards de cada bloque. */
.ag-pv-prodgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.ag-pv-prodgrid .ag-pv-prodcard {
	border: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5);
	transition: border-color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-prodgrid .ag-pv-prodcard:hover {
	border-color: var(--wp--preset--color--neutral-300, #d4d4d4);
}
@media (max-width: 1024px) {
	.ag-pv-prodgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.ag-pv-prodgrid { grid-template-columns: 1fr; }
}

/* Pill "Recomendado" flotante sobre la imagen de una prodcard (esquina superior
   derecha): verde claro (primary-light) + sombra para que se lea sobre la foto.
   Necesita el media como contexto de posicionamiento. */
.ag-pv-prodcard__media { position: relative; }
.ag-pv-prodcard__pill {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary, #367c2b);
	background: var(--wp--preset--color--primary-light, #e8f5e3);
	padding: 4px 10px;
	border-radius: 999px; /* pill — no hay token para full-round en theme.json */
	box-shadow: var(--wp--preset--shadow--small);
}

/* Banner final de alquiler (--ink, foto clara): CTA primario en NEGRO (texto e
   ícono WA en blanco) y CTA secundario con BORDE NEGRO, para contrastar sobre la
   foto. Scopeado a .ag-pv--alquiler para no afectar el banner de Servicio Técnico. */
.ag-pv--alquiler .ag-pv-st-btn-white-wa .wp-block-button__link {
	background: var(--wp--preset--color--neutral-900, #171717);
	color: var(--wp--preset--color--white, #fff);
}
.ag-pv--alquiler .ag-pv-st-btn-white-wa .wp-block-button__link:hover {
	background: var(--wp--preset--color--neutral-700, #404040);
}
.ag-pv--alquiler .ag-pv-st-btn-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--neutral-900, #171717);
	opacity: 1;
}
.ag-pv--alquiler .ag-pv-st-btn-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--neutral-50, #fafafa);
}
/* Border en las cards de la galería/marquesina (equipos en Alquiler, Tecnología
   John Deere en AP) — cuelga de .ag-pv-prodrow--marquee, NO de la página, para no
   tocar las cards del slider oscuro .agronorte-product-why (que van sin border).
   Mismo patrón que los icards: neutral-200 → neutral-300 en hover. */
.ag-pv-prodrow--marquee .ag-pv-prodcard {
	border: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5);
	transition: border-color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-prodrow--marquee .ag-pv-prodcard:hover {
	border-color: var(--wp--preset--color--neutral-300, #d4d4d4);
}
/* Separación de la sección "¿Qué incluye?" respecto del Banner Big inferior:
   gap de sección estándar del theme (= el mismo padding vertical de sección). */
.ag-pv-section--mb { margin-bottom: var(--pv-section-py); }

/* pv-alquiler-incluye — grilla de "¿Qué incluye?" a 4 columnas (son 4 cards).
   Acotado a la página para no tocar los icards de Repuestos/Esencial (3 cols). */
.ag-pv--alquiler .ag-pv-icards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
	.ag-pv--alquiler .ag-pv-icards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.ag-pv--alquiler .ag-pv-icards { grid-template-columns: 1fr; }
}

/* ─── "Más productos" — reusa el contenedor oscuro + header + footer de
       .agronorte-product-why (producto único), pero las cards siguen el formato
       de Figma (blancas, imagen arriba + texto abajo). La fila de scroll hace
       bleed hasta los bordes del contenedor para que las cards las recorte el
       borde redondeado del panel oscuro externo, no una caja interna. ──────── */

.ag-pv .agronorte-product-why {
	margin-top: 0;
	overflow: hidden; /* recorta las cards scrolleadas en el borde redondeado del panel */
}

.ag-pv-prodrow {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* full-bleed: cancelá el padding de 40px del contenedor y restauralo como
	   scroll padding para que la primera card quede alineada con el header. */
	margin-inline: -40px;
	padding-inline: 40px;
	scroll-padding-inline: 40px;
	/* Scrollbar oculta (el scroll igual funciona por drag/wheel/touch). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ag-pv-prodrow::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Drag-to-scroll con mouse (drag-scroll.js): cursor + sin selección mientras
   se arrastra; desactivar el snap durante el drag para que no “tironee”. */
.ag-pv-prodrow { cursor: grab; }
.ag-pv-prodrow.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ag-pv-prodrow.is-dragging img { pointer-events: none; }

.ag-pv-prodcard {
	flex: 0 0 288px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--pv-radius-sm);
	overflow: hidden;
}
.ag-pv-prodcard__media { aspect-ratio: 288 / 210; }
.ag-pv-prodcard__text {
	display: flex;
	flex-direction: column;
	/* Mismo gap título→texto que los icards de "Sin sorpresas" (.ag-pv-icard__head):
	   separa un poco más el título del párrafo en todas las prodcards (marquesina de
	   Alquiler/AP, grilla de Cómo trabajamos y slider de fondo oscuro de Repuestos/AP). */
	gap: 14px;
	padding: 16px 20px 20px;
}
.ag-pv-prodcard__text h3 {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
}
.ag-pv-prodcard__text p {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-500, #737373);
	margin: 0;
}

/* ─── "Por qué Agronorte" — reusa el grid de .agronorte-about-valores
       (Nosotros); acá va dentro de la columna de contenido offset. ────────── */

.ag-pv .agronorte-about-valores { margin-top: 0; }
/* Sólo levantá el tope de ancho del 80% (los ítems viven en una columna offset
   más angosta); MANTENÉ el padding original 32px 32px 32px 0 — ese 32px vertical
   es el que da los 64px de aire entre las dos filas (según Figma). */
.ag-pv-sh__content > .agronorte-about-valores .agronorte-about-valores__item {
	max-width: none;
}
/* Variante de una columna ("Para quién es el Paquete Esencial"): los ítems se
   apilan en vertical en la columna offset en vez del grid 2-up por default. */
.ag-pv .agronorte-about-valores--stack { grid-template-columns: 1fr; }

/* "Para quién es" con foto de fondo + recuadro negro al pie (mismo recurso
   que la sección Valores de Nosotros). Reusa .agronorte-about-valores__bg y
   .agronorte-about-careers-cta de nosotros.css; acá sólo aportamos el marco
   (relative/overflow + padding para que asome la foto) y los knobs de la foto. */
.ag-pv-section--quien {
	position: relative;
	overflow: hidden;
	padding-bottom: 280px;
	--valores-bg-width: 130vw;
	--valores-bg-offset: -120px;
	--valores-bg-height: 70%;
}
.ag-pv-section--quien > .ag-pv-wrap { position: relative; z-index: 1; }
/* El recuadro negro vive dentro de la columna de contenido (alineado con la
   lista), separado de los ítems. */
.ag-pv-section--quien .agronorte-about-careers-cta { margin-top: 24px; }

@media (max-width: 768px) {
	.ag-pv-section--quien { padding-bottom: 200px; }
}

/* ─── Caja de casilleros (verde claro + mapa) ───────────── */

/* En Repuestos el casilleros vive en la columna derecha del diferencial, justo
   debajo del bloque de valores. Está hecho como su propia <section> (los valores
   de arriba son un block part), así que cancelá el padding-bottom de la part
   anterior (--pv-section-py) y dejá los 32px que tenía el layout original de
   una sola sección (24px de flex gap + 8px). */
.ag-pv-section--casilleros {
	padding-top: 0;
	margin-top: calc(32px - var(--pv-section-py));
}

.ag-pv-casilleros {
	position: relative;
	overflow: hidden;
	padding: 56px;
	background: var(--wp--preset--color--primary-light, #e8f5e3);
	border-radius: var(--pv-radius);
}
.ag-pv-casilleros__content { position: relative; z-index: 1; max-width: 760px; }
.ag-pv-casilleros__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0 0 16px;
}
.ag-pv-casilleros__text {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700, #404040);
	margin: 0 0 28px;
	max-width: 620px;
}
.ag-pv-casilleros__map {
	position: absolute;
	top: 35%;
	right: 20px;
	transform: translateY(-50%);
	width: 150px;
	color: var(--wp--preset--color--primary, #367c2b);
	z-index: 0;
}
/* Provincia blanca al 50% (Figma): fill #fff + stroke verde, toda la forma 0.5.
   El pin es un elemento aparte para que quede 100% opaco. */
.ag-pv-casilleros__province { width: 100%; height: auto; display: block; opacity: 0.5; }
/* Pin de ubicación en San Justo — pulsa como los markers de cobertura de Nosotros
   (reusa el @keyframes global agronorte-marker-pulse). El pin queda a
   ~51.2%/41.9% del viewBox de la provincia (nodo 77.02,117.62 / 150.35×280.8). */
.ag-pv-casilleros__pin {
	position: absolute;
	left: 51.2%;
	top: 41.9%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
}
.ag-pv-casilleros__pin::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(54, 124, 43, 0.25);
	animation: agronorte-marker-pulse 2.5s ease-out infinite;
}
.ag-pv-casilleros__pin::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #367c2b);
}

/* ─── CSC fijo (bloque de connected solutions pre-footer) ──── */

.ag-pv-csc {
	background: var(--wp--preset--color--neutral-900, #171717);
	/* Gutter horizontal igual al resto de secciones (y al footer/logo): en mobile
	   el card queda alineado con el logo en vez de pegarse a los bordes. */
	padding: 120px var(--pv-inline) 0;
}
.ag-pv-csc__card {
	max-width: var(--pv-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 32px;
	padding: 40px 48px;
	background: var(--wp--preset--color--neutral-800, #262626);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--pv-radius);
}
.ag-pv-csc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success, #16a34a);
	margin-bottom: 14px;
}
/* El dot "disponible ahora" reusa el pulse de Contacto
   (.agronorte-contact-cta-box__pulse + @keyframes agronorte-cta-pulse). */
.ag-pv-csc__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: clamp(1.5rem, 2.2vw, 1.75rem); /* 28px desktop (Figma) */
	font-weight: 600;
	color: var(--wp--preset--color--white, #fff);
	margin: 0 0 10px;
}
.ag-pv-csc__text {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-400, #a3a3a3); /* inverse-muted (Figma) */
	margin: 0;
	max-width: 560px;
}
.ag-pv-csc__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Banda statement — "beat" amarillo full-bleed (Concepto Híbrido)
       Ocupa todo el ancho del viewport (sin el padding wrap de .ag-pv-section);
       la foto opcional va detrás de un lavado amarillo para que siempre se lea
       como el beat de marca. Texto oscuro sobre amarillo → sin overlay de contraste. ── */

/* ─── Marquesina (ticker full-bleed) ───────────────────── */
/* Cinta de mensajes de confianza que se desplaza horizontalmente. El track
   repite el grupo 6 veces y se anima a translateX(-50%): la primera mitad es
   idéntica a la segunda → loop sin costuras. Cada span lleva margin-right
   propio (no flex gap) para que el período sea exacto. */
.ag-pv-marquee {
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f1f2f1);
	padding: 18px 0;
}
.ag-pv-marquee__track {
	display: flex;
	width: max-content;
	animation: ag-pv-marquee-scroll 40s linear infinite;
	will-change: transform;
}
/* El slow-down en hover lo maneja assets/js/marquee.js vía playbackRate
   (cambiar animation-duration acá genera un salto al remapear la posición). */
.ag-pv-marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.ag-pv-marquee__group > span {
	margin-right: 10px;
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--neutral-900, #171717);
}
@keyframes ag-pv-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ag-pv-marquee__track { animation: none; }
}

.ag-pv-band {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--secondary, #ffde00);
	padding: clamp(64px, 9vw, 112px) var(--pv-inline);
}
.ag-pv-band__media { position: absolute; inset: 0; z-index: 0; opacity: 0.28; mix-blend-mode: multiply; }
.ag-pv-band__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}
.ag-pv-band__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
}
.ag-pv-band__desc {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--neutral-800, #262626);
	margin: 0;
	max-width: 640px;
}
.ag-pv-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}

/* ─── FAQ accordion (native <details>, no JS) ──────────────── */

.ag-pv-faq {
	margin-top: 48px;
}
.ag-pv-faq__item { border-bottom: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5); }
/* Sin línea arriba de la 1ª ni debajo de la última: solo separadores entre items. */
.ag-pv-faq .ag-pv-faq__item:last-child { border-bottom: none; }
.ag-pv-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 0;
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-900, #171717);
	transition: color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-faq__q::-webkit-details-marker { display: none; }
.ag-pv-faq__q:hover,
.ag-pv-faq__item[open] .ag-pv-faq__q { color: var(--wp--preset--color--primary, #367c2b); }
.ag-pv-faq__icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.ag-pv-faq__icon::before,
.ag-pv-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--wp--custom--transition--fast, 0.15s ease),
		opacity var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ag-pv-faq__item[open] .ag-pv-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
/* Reveal animado: el JS anima un height en px explícito (0 ↔ scrollHeight) y lo
   limpia a auto cuando está abierto; durante un colapso mantiene el item [open]
   para que la transición se pueda reproducir, y después lo cierra (el <details>
   nativo oculta el panel al cerrar). Ver posventa-faq.js. El panel recorta su
   propio overflow para colapsar a 0 real — el viejo grid-template-rows:0fr dejaba
   un piso de ~28px de padding. */
.ag-pv-faq__a {
	overflow: hidden;
	transition: height var(--wp--custom--transition--normal, 0.25s ease);
}
/* El panel (wp:details block) hereda el block-gap de WP core
   (:root :where(.is-layout-flow) > *, 24px) entre el <summary> y la respuesta,
   que el theme strippea en sus componentes. Se neutraliza con la MISMA
   propiedad lógica (margin-block-start) para ganarle al override de WP; así el
   gap pregunta→respuesta lo da SÓLO el padding-bottom del summary (constante,
   no togglea con [open]) → al abrir/cerrar nada cambia de layout salvo la
   altura del panel, sin saltos ni rebotes. FAQ + paquetes, desktop y mobile. */
.ag-pv-faq__item > .ag-pv-faq__a { margin-block-start: 0; }
/* Los paneles cerrados siguen renderizados (el markup de bloques pisa el ocultado
   de contenido nativo del <details>), así que colapsalos explícito a 0. El JS anima
   un height inline en px entre este valor y el auto height abierto. */
.ag-pv-faq__item:not([open]) > .ag-pv-faq__a { height: 0; }
.ag-pv-faq__a-inner { padding-bottom: 28px; max-width: 880px; }
.ag-pv-faq__a-inner p {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral-600, #525252);
	margin: 0 0 14px;
}
.ag-pv-faq__a-inner p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
	.ag-pv-faq__a { transition: none; }
}

/* ─── Paquetes de seguimiento — cards de paquete ──────────────
       Dos secciones de segmento (Agricultura / Construcción), cada una un grid
       2-up de cards de paquete. Card = panel blanco con una caja de segmento,
       lista de beneficios, un accordion de features (reusa .ag-pv-faq__item para
       que posventa-faq.js lo anime) y un CTA full-width. El acento
       (segmento + CTA) se tematiza por segmento: verde (--agro, default)
       / naranja construcción (--construccion). ───────────────────────── */

.ag-pv-pkgs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 48px;
	align-items: stretch;
}
.ag-pv-pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--neutral-100, #f5f5f5);
	border-radius: 18px;
	overflow: hidden;
}
.ag-pv-pkg__img {
	position: absolute;
	top: 18px;
	right: -20px;
	width: 240px;
	height: 174px;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: var(--pv-radius-sm, 12px);
}
.ag-pv-pkg__main, .ag-pv-pkg__cta { position: relative; z-index: 1; }
.ag-pv-pkg__main { display: flex; flex-direction: column; gap: 24px; }
.ag-pv-pkg__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--neutral-900, #171717);
	margin: 0;
}
.ag-pv-pkg__intro { display: flex; flex-direction: column; gap: 18px; }
.ag-pv-pkg__seg {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 400px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--wp--preset--color--primary-light, #e8f5e3);
}
.ag-pv-pkg__seg-label {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark, #2d6830);
	margin: 0;
}
.ag-pv-pkg__seg-list {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 12px;
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #404040);
	margin: 0;
}
.ag-pv-pkg__desc {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700, #404040);
	margin: 0;
}
.ag-pv-pkg__benefits { display: flex; flex-direction: column; gap: 8px; }
.ag-pv-pkg__benefits-label {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500, #737373);
	margin: 0;
}
.ag-pv-pkg__benefits ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ag-pv-pkg__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700, #404040);
}
.ag-pv-pkg__benefits li::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #367c2b);
}

/* Accordion de features dentro de la card (reusa el markup de .ag-pv-faq__item
   para que aplique la animación JS; restyleado: sin bordes de fila, + verde). */
.ag-pv-pkg__feats { display: flex; flex-direction: column; }
.ag-pv-pkg__feats .ag-pv-faq__item { border-bottom: none; }
.ag-pv-pkg__feats .ag-pv-faq__q {
	padding: 6px 0;
	font-size: 18px;
	color: var(--wp--preset--color--neutral-900, #171717);
}
.ag-pv-pkg__feats .ag-pv-faq__q:hover,
.ag-pv-pkg__feats .ag-pv-faq__item[open] .ag-pv-faq__q { color: var(--wp--preset--color--neutral-900, #171717); }
/* El glifo +/- queda verde aunque el texto de la pregunta sea negro. */
.ag-pv-pkg__feats .ag-pv-faq__icon { color: var(--wp--preset--color--primary, #367c2b); width: 18px; height: 18px; }
.ag-pv-pkg__feats .ag-pv-faq__icon::before,
.ag-pv-pkg__feats .ag-pv-faq__icon::after { width: 14px; }
.ag-pv-pkg__feats .ag-pv-faq__a-inner { padding-bottom: 14px; max-width: none; }
.ag-pv-pkg__feats .ag-pv-faq__a-inner p { font-size: 14px; line-height: 1.6; }
.ag-pv-pkg__featlist {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ag-pv-pkg__featlist li {
	display: flex;
	gap: 10px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-600, #525252);
}
.ag-pv-pkg__featlist li::before {
	content: '';
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--neutral-400, #a3a3a3);
}

.ag-pv-pkg__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: 12px;
	background: var(--wp--preset--color--primary, #367c2b);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-pkg__cta:hover { background: var(--wp--preset--color--primary-dark, #2d6830); }

/* Tema Construcción: segmento naranja + CTA naranja (beneficios/+ siguen verdes). */
.ag-pv-pkg--construccion .ag-pv-pkg__seg { background: rgba(242, 169, 0, 0.2); }
.ag-pv-pkg--construccion .ag-pv-pkg__seg-label { color: var(--wp--preset--color--accent-orange, #f2a900); }
.ag-pv-pkg--construccion .ag-pv-pkg__cta { background: var(--wp--preset--color--accent-orange, #f2a900); }
.ag-pv-pkg--construccion .ag-pv-pkg__cta:hover { background: #d99700; }
/* Construcción: bullets de beneficios y el +/− de las features en naranja. */
.ag-pv-pkg--construccion .ag-pv-pkg__benefits li::before { background: var(--wp--preset--color--accent-orange, #f2a900); }
.ag-pv-pkg--construccion .ag-pv-pkg__feats .ag-pv-faq__icon { color: var(--wp--preset--color--accent-orange, #f2a900); }

/* ─── Statement — banda oscura full-bleed (¿Para qué contratar…?) ── */

.ag-pv-statement {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-900, #171717);
	padding: clamp(64px, 8vw, 120px) var(--pv-inline);
	min-height: 900px; /* alto del Banner Big según Figma */
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* contenido arriba (como Figma), no centrado vertical */
	align-items: center;
}
.ag-pv-statement__media { position: absolute; inset: 0; z-index: 0; }
@media (max-width: 768px) { .ag-pv-statement { min-height: 560px; } }
/* Sin overlay por defecto: la foto se muestra limpia (Figma). La variante
   --light reusa este ::after para su lavado blanco. */
.ag-pv-statement::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ag-pv-statement__inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 28px;
}
.ag-pv-statement__title {
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: clamp(2.25rem, 4.5vw, 3.375rem); /* 54px desktop (Figma) */
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--white, #fff);
	margin: 0;
}
.ag-pv-statement__text {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	/* width:100% para que la caja use el max-width y NO se encoja al ancho exacto
	   del texto: si abraza el segmento al pixel, WebKit (Safari) wrapea el <br>
	   forzado (Chrome no). Con aire, el corte de desktop queda en 2 líneas en
	   ambos motores. El texto sigue centrado por el text-align del __inner. */
	width: 100%;
	max-width: 720px;
}
/* El <br> de la bajada es solo para fasear el salto en desktop; en mobile el
   ancho cambia y el corte forzado queda feo, así que lo anulamos. */
@media (max-width: 768px) {
	.ag-pv-statement__text br { display: none; }
	/* Banners con dos CTAs (Servicio Técnico "El mejor mantenimiento" y final de
	   Alquiler): en mobile los apilamos centrados, con el MISMO ancho los dos y
	   menos gap entre ellos. */
	.ag-pv-statement .wp-block-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* El contenedor se ajusta al botón MÁS ANCHO (max-content) y el más corto lo
		   iguala (align-items:stretch + width:100% en los botones). Centrado, sin
		   estirarse a todo el ancho del canvas. max-width:100% lo acota en pantallas
		   muy chicas. */
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
		gap: 10px;
	}
	.ag-pv-statement .wp-block-buttons .wp-block-button { width: 100%; margin: 0; }
	.ag-pv-statement .wp-block-buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* Variante clara (Agricultura de Precisión "Banner Big": foto lavada en blanco
   arriba para que el texto oscuro se lea, foto visible hacia el pie). */
.ag-pv-statement--light { background: var(--wp--preset--color--surface, #f1f2f1); }
.ag-pv-statement--light::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 78%);
}
.ag-pv-statement--light .ag-pv-statement__title { color: var(--wp--preset--color--neutral-900, #171717); }
.ag-pv-statement--light .ag-pv-statement__text { color: var(--wp--preset--color--neutral-700, #404040); }

/* Ink variant (Servicio Técnico Banner Big): foto clara → texto en
   text/primary (#171717). El botón conserva su estilo (no se toca). */
.ag-pv-statement--ink .ag-pv-statement__title,
.ag-pv-statement--ink .ag-pv-statement__text { color: var(--wp--preset--color--neutral-900, #171717); }

/* ─── Cards de solución (Agricultura de Precisión "Nuestras soluciones")
       Reusan la card de catálogo de home (.agronorte-home-cat): imagen + overlay,
       título/desc siempre visibles, footer del CTA revelado en hover. Mismo
       comportamiento que los catálogos de Repuestos, sólo que en grid 2-up. ────────── */

.ag-pv-solcards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 48px;
}

/* El neutralizador global de márgenes de bloque (global.css "Neutraliza los
   márgenes de bloque inyectados") pone en cero el margin-top de cualquier
   .wp-block-group que siga a un group hermano. Dentro de .ag-pv-wrap eso mata el
   gap de 48px buscado entre el section header (.ag-pv-sh) y el grid de cards
   (.ag-pv-solcards / .ag-pv-pkgs). El selector del neutralizador
   `.wp-block-group[class*="ag-pv"] + .wp-block-group[class*="ag-pv"]` es (0,4,0),
   así que re-afirmalo con !important (el neutralizador no usa !important) — mismo
   patrón que la utilidad .ag-pv-mt-48. */
.ag-pv-wrap > .ag-pv-sh + .ag-pv-solcards,
.ag-pv-wrap > .ag-pv-sh + .ag-pv-pkgs {
	margin-top: 48px !important;
}

/* Repuestos catálogos: 4 tarjetas en una sola fila.
   - Breakpoint más ancho: grid 4-up dentro del .ag-pv-wrap (alineadas y sin
     scroll; el 1fr ajusta el ancho de las cards para que entren las 4).
   - Resoluciones menores (≤1199px): fila con scroll horizontal + drag (igual
     que .ag-pv-prodrow; drag-scroll.js bindea .ag-pv-catrow). Bleed a ambos lados
     (margin-inline: -pv-inline) → se extiende hasta los bordes del viewport. La
     1ª card mantiene el offset inicial (margin-left: pv-inline) para arrancar
     alineada al header; ese margen se scrollea al swipear, así las cards llegan
     al borde izquierdo sin gutter. Se evita padding-inline-start (bug de Chromium
     con flex + scroll-container, que dejaba la 1ª card pegada al borde). */
.ag-pv-catrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.ag-pv-catrow > .agronorte-home-cat { height: 480px; }

/* Variante "tecnologías" (Paquete Esencial): el nombre baja un toque y va en una
   sola línea para que entren los títulos largos (p.ej. "AutoTrac Universal"). */
.ag-pv-catrow--tec .agronorte-home-cat__name {
	font-size: 26px;
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.ag-pv-catrow {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		cursor: grab;
		/* Bleed a la derecha exactamente hasta el borde del viewport. A ≤1199px
		   el wrap llena el ancho de sección (= viewport − 2·pv-inline), así que
		   wrap-right está a pv-inline del viewport: con margin-right de -pv-inline
		   alcanza el borde sin depender de 50vw (evita el overflow por scrollbar). */
		margin-right: calc(-1 * var(--pv-inline));
		/* Bleed también a la izquierda hasta el borde del viewport: al swipear, las
		   cards llegan al borde sin el gutter. La 1ª card conserva el offset inicial
		   vía margin-left (abajo), así en el load sigue alineada con el header. */
		margin-left: calc(-1 * var(--pv-inline));
		scroll-padding-left: 0;
	}
	.ag-pv-catrow::-webkit-scrollbar { width: 0; height: 0; display: none; }
	.ag-pv-catrow.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
	.ag-pv-catrow.is-dragging img { pointer-events: none; }
	.ag-pv-catrow > .agronorte-home-cat {
		flex: 0 0 300px;
		scroll-snap-align: start;
	}
	/* 1ª card: offset = pv-inline en el load (alineada al header) que se scrollea
	   al swipear. snap-align:none evita que el snap la tironee al borde en reposo. */
	.ag-pv-catrow > .agronorte-home-cat:first-child {
		margin-left: var(--pv-inline);
		scroll-snap-align: none;
	}
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ag-pv-sh {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ag-pv-sh__content { grid-column: 1; max-width: none; }
}

@media (max-width: 900px) {
	.ag-pv-pkgs { grid-template-columns: 1fr; }
	.ag-pv-solcards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.ag-pv-pkg { padding: 28px 24px; }
	.ag-pv-pkg__img { display: none; }
	.ag-pv-pkg__title { font-size: 32px; }
}

@media (max-width: 900px) {
	.ag-pv-icards { grid-template-columns: 1fr; }
	.ag-pv-csc__card {
		grid-template-columns: 1fr;
		padding: 32px;
	}
	.ag-pv-casilleros__map { opacity: 0.18; }
}

@media (max-width: 768px) {
	.ag-pv-hero__subtitle { font-size: 17px; }
	.ag-pv .agronorte-about-valores { grid-template-columns: 1fr; }
	.ag-pv-bullets { grid-template-columns: 1fr 1fr; }
	.ag-pv-casilleros { padding: 28px; }
	.ag-pv-altmedia__garantia { flex-direction: column; gap: 16px; padding: 24px; }
}

@media (max-width: 560px) {
	.ag-pv-hero__actions .agronorte-home-btn,
	.ag-pv-csc__actions .agronorte-home-btn,
	.ag-pv-band__actions .agronorte-home-btn { width: 100%; justify-content: center; }
	.ag-pv-csc__card, .ag-pv-casilleros { padding: 24px; }
	/* El CTA largo de Casilleros tiene white-space:nowrap (base .agronorte-home-btn):
	   su min-content (~338px) forzaba la sección más ancha que el wrap móvil y
	   metía ~12px de overflow horizontal. Lo dejamos envolver (height auto). */
	.ag-pv-casilleros .agronorte-home-btn {
		white-space: normal;
		height: auto;
		min-height: 56px;
	}
}

/* ─── Componentes hechos con bloques (theme editable, Fase 4) ─────────────
   Íconos como CSS masks + utilidades de espaciado + ag-pv-link como button block.
   Los SVG/estilos inline no pueden vivir en el markup de bloques. Scopeados con prefijo .ag-pv-. */

/* 1. Masks de íconos
   El elemento contenedor es un group/div vacío. background-color: currentColor
   deja que el color token del padre tiñe el ícono (hereda el verde de
   .ag-pv-icard__icon). El tamaño por default iguala el uso de ícono chico de 28px;
   .ag-pv-icard__icon lo pisa a 60px para igualar el dimensionado del SVG original. */
.ag-pv-iconmask {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: var(--pv-icon) center / contain no-repeat;
	mask: var(--pv-icon) center / contain no-repeat;
}
.ag-pv-iconmask--chat     { --pv-icon: url(../images/icons/pv-chat.svg); }
.ag-pv-iconmask--store    { --pv-icon: url(../images/icons/pv-store.svg); }
.ag-pv-iconmask--truck    { --pv-icon: url(../images/icons/pv-truck.svg); }
.ag-pv-iconmask--shield   { --pv-icon: url(../images/icons/pv-shield.svg); }
.ag-pv-iconmask--phone    { --pv-icon: url(../images/icons/pv-phone.svg); }
.ag-pv-iconmask--play     { --pv-icon: url(../images/icons/pv-play.svg); }
.ag-pv-iconmask--download { --pv-icon: url(../images/icons/pv-download.svg); }

/* Dentro de .ag-pv-icard__icon los SVG originales renderizan a height: 60px /
   width: auto. Limitá el elemento mask a la misma bounding box. */
.ag-pv-icard__icon .ag-pv-iconmask {
	width: 60px;
	height: 60px;
}

/* 2. Utilidades de espaciado — reemplazan atributos style inline que los bloques no pueden llevar */
.ag-pv-section--flush-top    { padding-top: 0 !important; }
.ag-pv-section--flush-bottom { padding-bottom: 0 !important; }
.ag-pv-mt-48                 { margin-top: 48px !important; }

/* 3. Link-con-flecha como WP Button block
   Fuente de verdad: .ag-pv-link (de este mismo archivo).
   Valores clonados:
     display: inline-flex; align-items: center; gap: 6px
     font-family: var(--wp--preset--font-family--host-grotesk)
     font-size: 15px; font-weight: 600
     color: var(--wp--preset--color--primary, #367c2b)
     text-decoration: none
     transition: gap 0.15s ease, color 0.15s ease
     hover: gap 10px; color: var(--wp--preset--color--primary-dark, #2d6830)
     arrow svg: width 18px; height 18px; transition: transform 0.15s ease
     hover arrow: translateX(2px)
   Defaults neutralizados: background none, border none, padding 0,
   border-radius 0, box-shadow none (el button block los agrega). */
.ag-pv-link-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #367c2b);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	transition:
		gap var(--wp--custom--transition--fast, 0.15s ease),
		color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-link-block .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 9px;
	background-color: currentColor;
	transition: transform 0.15s ease;
	-webkit-mask: url(../images/icons/arrow.svg) center / contain no-repeat;
	mask: url(../images/icons/arrow.svg) center / contain no-repeat;
}
.ag-pv-link-block .wp-block-button__link:hover {
	gap: 10px;
	color: var(--wp--preset--color--primary-dark, #2d6830);
}
.ag-pv-link-block .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

/* 4. Reset del espaciado de bloque de WP dentro de icard para que no empuje el layout */
.ag-pv-icard .wp-block-buttons,
.ag-pv-icard .wp-block-button { margin: 0 !important; }

/* ─── Puentes CSS — Fase 4 / Task 2: parts de Repuestos ─────────────────
   Compensan las diferencias del markup de bloques contra los originales PHP.    */

/* A. pv-repuestos-icards — label del section-header:
   El span `ag-pv-sh__divisor` se reemplaza por un pseudo ::before en el group del
   label. Cloná los valores exactos de .ag-pv-sh__divisor de arriba. */
.ag-pv-sh__label::before {
	content: '';
	display: block;
	width: 2px;
	height: 30px;
	background: var(--pv-divisor);
	flex-shrink: 0;
}
/* Párrafo que lleva el texto del tag — poné en cero los márgenes default del p. */
p.ag-pv-sh__tag {
	margin: 0;
}

/* B. pv-repuestos-icards — iconmask en el mismo elemento que __icon:
   El selector original `.ag-pv-icard__icon .ag-pv-iconmask` apunta a un hijo;
   en el markup de bloques las dos clases van en el mismo elemento. Sumá un
   selector de mismo-elemento para cubrir los dos casos. */
.ag-pv-icard__icon.ag-pv-iconmask {
	width: 60px;
	height: 60px;
}

/* C. pv-repuestos-icards — .wp-block-buttons de icard empujados abajo.
   La regla `.ag-pv-icard .wp-block-buttons { margin: 0 !important }` de arriba ya
   resetea los márgenes default del navegador/bloque. Sumá margin-top:auto
   para espejar el original `.ag-pv-icard .ag-pv-link { margin-top: auto }`. */
.ag-pv-icard > .wp-block-buttons {
	margin-top: auto !important;
}

/* D. pv-repuestos-banner — block del group de foto.
   `wp:image` envuelve la img en un `<figure>`. Sacá los márgenes del figure para
   que la img llene exacto el contenedor `.agronorte-noticias-banner__photo`. */
.agronorte-noticias-banner__photo .wp-block-image {
	margin: 0;
}
.agronorte-noticias-banner__photo .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* E. pv-repuestos-banner — override de padding del btn-block (espeja la regla de
   12px `.ag-pv .agronorte-noticias-banner__btn` para la variante en bloque, así
   los altos coinciden en todas las páginas de posventa). */
.ag-pv .agronorte-noticias-banner__btn-block .wp-block-button__link {
	padding: 12px 16px 12px 28px;
}

/* F. pv-repuestos-alternativos — outline + ícono de WhatsApp como block button.
   Clon de .agronorte-home-btn + .agronorte-home-btn--outline (home.css)
   estilado vía .wp-block-button__link para que el block editor lo renderice bien.
   El ícono WA es un CSS mask en ::after (pv-whatsapp.svg). El tamaño espeja
   `.agronorte-home-btn__wa svg` (display:block, 20×20). */
.agronorte-home-btn-block-outline-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 18px 28px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5);
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--neutral-900, #171717);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		border-color var(--wp--custom--transition--fast, 0.15s ease),
		background var(--wp--custom--transition--fast, 0.15s ease);
}
.agronorte-home-btn-block-outline-wa .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--neutral-400, #a3a3a3);
	background: var(--wp--preset--color--neutral-50, #fafafa);
}
/* Ícono de WhatsApp como mask en ::after (20×20, igual que .agronorte-home-btn__wa svg). */
.agronorte-home-btn-block-outline-wa .wp-block-button__link::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
	mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
}

/* G. pv-repuestos-alternativos — sh--solo: forzá el contenido a la tercera
   columna del grid (misma posición que cuando lo preceden dos spacers vacíos).
   .ag-pv-sh es un grid de 3 columnas: [320px 80px 1fr].
   Con sh--solo no hay divs spacer, así que saltamos el contenido a la col 3. */
.ag-pv-sh--solo > .ag-pv-sh__content {
	grid-column: 3;
}

/* H. pv-repuestos-alternativos — modifier gap-40 para el group de contenido. */
.ag-pv-sh__content--gap40 {
	gap: 40px;
}

/* I. pv-repuestos-alternativos — logos: wp:image envuelve la img en <figure>.
   Sacá los márgenes del figure para que el chip quede inline. */
.ag-pv-logos__chip .wp-block-image {
	margin: 0;
}
.ag-pv-logos__chip .wp-block-image img {
	height: 80px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* J. pv-repuestos-alternativos — block de video de altmedia.
   wp:video envuelve el video en un <figure class="wp-block-video">.
   Sacá los márgenes del figure para que el video llene exacto .ag-pv-altmedia__video. */
.ag-pv-altmedia__video .wp-block-video {
	margin: 0;
	height: 100%; /* llená la caja de aspect-ratio para que el video (object-fit:cover)
	                 quede pegado al panel de garantía — sin gap */
}
.ag-pv-altmedia__video .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El contenedor .ag-pv-altmedia ya recorta con su radio; anula el radio
	   global de .wp-block-video para no dejar muescas en las esquinas. */
	border-radius: 0;
}

/* K. pv-repuestos-alternativos — a diferencia de los íconos de icard (donde el
   elemento mismo ES el ícono), acá el escudo va ADENTRO del círculo verde oscuro
   de 48×48. Así que neutralizá el iconmask base en el elemento (mantené el círculo
   de .ag-pv-altmedia__icon) y renderizá el escudo blanco en un ::before centrado. */
.ag-pv-altmedia__icon.ag-pv-iconmask {
	width: 48px;
	height: 48px;
	background-color: var(--wp--preset--color--primary, #367c2b);
	-webkit-mask: none;
	mask: none;
	/* .ag-pv-iconmask fuerza display:inline-block (más tardío que el
	   display:flex de la base), por eso el escudo ::before quedaba arriba a la
	   izquierda. Restauramos el centrado flex aquí (specificity 0,2,0). */
	display: flex;
	align-items: center;
	justify-content: center;
}
.ag-pv-altmedia__icon.ag-pv-iconmask::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	/* El escudo es un ícono outline (stroke) — un CSS mask renderiza mal el stroke
	   grueso. Renderizá el SVG real (con el stroke blanco ya incluido) como
	   background, igual exacto que el SVG inline original. */
	background: url(../images/icons/pv-shield-white.svg) center / contain no-repeat;
}

/* L. pv-repuestos-prodcards — label de product-why: divisor vía ::before.
   El PHP usa un span aparte .agronorte-product-why__divisor; en bloques usamos
   ::before en el contenedor del label. Cloná los valores exactos.
   Scopeado a .ag-pv para que sólo aplique dentro de las parts de posventa (que
   siempre viven dentro de .ag-pv). Las fichas de producto de WC usan el span PHP
   (visible); el ::before no debe duplicar la barra ahí. */
.ag-pv .agronorte-product-why__label::before {
	content: '';
	display: block;
	width: 2px;
	height: 30px;
	background: var(--wp--preset--color--neutral-300, #d4d4d4);
	flex-shrink: 0;
}
/* Poné en cero los márgenes default del p en el párrafo del tag. */
p.agronorte-product-why__tag {
	margin: 0;
}

/* M. pv-repuestos-prodcards — media de prodcard: wp:image agrega un <figure>.
   Sacá los márgenes del figure para que la img llene la caja de aspect-ratio de __media. */
.ag-pv-prodcard__media .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}
.ag-pv-prodcard__media .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* N. pv-repuestos-prodcards — utilidad de padding-block de sección. */
.ag-pv-section--py50 {
	padding-block: var(--wp--preset--spacing--50) !important;
}

/* O. pv-repuestos-diferencial — responsive: sh--solo colapsa a 1 columna
   en el mismo breakpoint que el grid padre .ag-pv-sh. */
@media (max-width: 1024px) {
	.ag-pv-sh--solo > .ag-pv-sh__content {
		grid-column: 1;
	}
}

/* P. Limpieza del puente de divisor de Fase 4 — ocultá los duplicados del span PHP.
   .ag-pv-sh__divisor sólo existe en las parts de posventa, así que se oculta global.
   .agronorte-product-why__divisor está scopeado a .ag-pv: las parts de posventa
   (bloque, sin span → el ::before dibuja la barra) ocultan el span; las fichas de
   producto de WC (fuera de .ag-pv, el span PHP es el divisor visible) lo dejan visible. */
.ag-pv-sh__divisor {
	display: none;
}
.ag-pv .agronorte-product-why__divisor {
	display: none;
}

/* ─── Bridges de CSS — Fase 4 / Task 3: parts de Servicio Técnico ──────────
   Q–V. Compensan las diferencias del markup de bloques vs los originales en PHP. */

/* Q. pv-st-statement — bridge de la foto.
   El PHP usa `.ag-pv-statement__media { position: absolute; inset: 0; }`
   (ya declarado en este archivo). En el part de bloques el grupo media
   lleva la misma clase; wp:image envuelve la img en un <figure>.
   Saco los margins del figure y hago que la img llene el contenedor absolute. */
.ag-pv-statement__media .wp-block-image {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ag-pv-statement__media .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* R. pv-st-statement — grupo inner: z-index para que el contenido quede arriba
   de la foto absolute y del overlay ::after (z-index: 1 y 2 en el PHP).
   El bloque group emite un div; me aseguro de que apile sobre las dos capas. */
.ag-pv-statement .ag-pv-statement__inner.wp-block-group {
	z-index: 2;
}

/* S. pv-st-statement — botón blanco + WhatsApp como bloque wp:button.
   Clon de .agronorte-home-btn--white; sumo el ícono WA como mask en ::after.
   Clase modificadora: .ag-pv-st-btn-white-wa                            */
.ag-pv-st-btn-white-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 18px 28px;
	background: var(--wp--preset--color--white, #fff);
	border: none;
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--neutral-900, #171717);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--normal, 0.25s ease),
		border-color var(--wp--custom--transition--normal, 0.25s ease);
}
/* Hover estándar de los botones blancos del sitio (= .agronorte-home-btn--outline):
   cambia borde + relleno, sin translateY ni sombra. */
.ag-pv-st-btn-white-wa .wp-block-button__link:hover {
	background: var(--wp--preset--color--neutral-50, #fafafa);
}
/* Ícono de WhatsApp como mask en ::after (20×20). */
.ag-pv-st-btn-white-wa .wp-block-button__link::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
	mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
}

/* S2. pv-st-statement — botón secundario "Llamar por teléfono" (sin ícono WA).
   Mismo look que el botón blanco principal (fondo blanco, sin borde) pero a
   opacity .85 para marcar jerarquía; en hover sube a 1. Se diferencia del
   primario sólo en que no lleva el ícono de WhatsApp.
   Clase modificadora: .ag-pv-st-btn-outline                               */
.ag-pv-st-btn-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 56px;
	padding: 18px 28px;
	background: var(--wp--preset--color--white, #fff);
	border: none;
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--neutral-900, #171717);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var(--wp--custom--transition--normal, 0.25s ease);
}
.ag-pv-st-btn-outline .wp-block-button__link:hover {
	opacity: 1;
}

/* S3. pv-alquiler-final — Banner Big oscuro (statement default, texto blanco):
   botón secundario "ghost" (transparente + borde blanco) que contrasta con el
   botón blanco principal. Distinto de --ink (foto clara). Clase: .ag-pv-st-btn-ghost */
.ag-pv-st-btn-ghost .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 18px 28px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--normal, 0.25s ease),
		border-color var(--wp--custom--transition--normal, 0.25s ease);
}
.ag-pv-st-btn-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white, #fff);
	background: rgba(255, 255, 255, 0.1);
}

/* T. pv-st-faq — bridges del gate de FAQ.
   (a) Aplica los estilos de .ag-pv-faq__q al summary nativo dentro de un
       details de bloque. El summary del PHP lleva .ag-pv-faq__q; el markup de
       bloques emite un <summary> pelado. Extiendo la regla para cubrir los dos. */
.ag-pv-faq__item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* position:relative ancla las barras absolutas del ícono +/−; el
	   padding-right reserva su espacio (antes lo daba el ::after flex item).
	   padding-bottom 16px (constante) = gap pregunta→respuesta al abrir; no
	   togglea con [open], así no hay salto al colapsar. */
	position: relative;
	padding: 28px 40px 16px 0;
	font-family: var(--wp--preset--font-family--titillium, 'Titillium Web', sans-serif);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-900, #171717);
	transition: color var(--wp--custom--transition--fast, 0.15s ease);
}
.ag-pv-faq__item > summary::-webkit-details-marker { display: none; }
.ag-pv-faq__item > summary:hover,
.ag-pv-faq__item[open] > summary { color: var(--wp--preset--color--primary, #367c2b); }

/* (b) +/− icon en el summary del bloque, con dos barras absolutas (igual que el
   ícono del menú hamburguesa): ::before = barra horizontal, ::after = barra
   vertical. Al abrir, la vertical se desvanece y rota → transición suave + → −.
   (Antes se dibujaba con background-image, que no es animable.) */
.ag-pv-faq__item > summary::before,
.ag-pv-faq__item > summary::after {
	content: '';
	position: absolute;
	/* Centrado en la PRIMERA línea del texto (padding-top + media línea), no en
	   el centro de toda la fila — importa cuando la pregunta baja a 2+ líneas.
	   Para una sola línea equivale exactamente a top:50%. */
	top: calc(28px + 0.5lh);
	right: 3px;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform var(--wp--custom--transition--normal, 0.25s ease),
		opacity var(--wp--custom--transition--normal, 0.25s ease);
}
.ag-pv-faq__item > summary::after {
	transform: translateY(-50%) rotate(90deg);
}
/* Al abrir: la barra vertical se desvanece y rota a 0 → queda solo el − . */
.ag-pv-faq__item[open] > summary::after {
	opacity: 0;
	transform: translateY(-50%) rotate(0);
}
/* Oculta el span del ícono que mete el PHP cuando está dentro de un contenedor armado con bloques. */
.ag-pv-faq .ag-pv-faq__icon { display: none; }

/* (c) Reset del wp:details de core — el editor de bloques le mete margin al details. */
.ag-pv-faq .wp-block-details {
	margin: 0;
}

/* U. pv-st-pasos — CTAs de ag-pv-sh__actions como bloques wp:button.
   Verde + ícono WA: clon de .agronorte-home-btn--green
   + ícono WA como mask en ::after (mismo patrón que .ag-pv-st-btn-white-wa).
   Clase modificadora: .agronorte-home-btn-block-green-wa                      */
.agronorte-home-btn-block-green-wa .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 18px 28px;
	background: var(--wp--preset--color--primary, #367c2b);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--normal, 0.25s ease);
}
.agronorte-home-btn-block-green-wa .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-dark, #2d6830);
}
/* Ícono de WhatsApp como mask en ::after (20×20, igual que .agronorte-home-btn__wa svg). */
.agronorte-home-btn-block-green-wa .wp-block-button__link::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
	mask: url(../images/icons/pv-whatsapp.svg) center / contain no-repeat;
}

/* Variante outline sin ícono WA: clon de .agronorte-home-btn--outline (home.css).
   Reusa la base de .agronorte-home-btn-block-outline-wa pero sin el mask en
   ::after — solo base + hover.
   Clase modificadora: .agronorte-home-btn-block-outline                       */
.agronorte-home-btn-block-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 18px 28px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--neutral-200, #e5e5e5);
	border-radius: var(--wp--custom--border-radius--small, 12px);
	color: var(--wp--preset--color--neutral-900, #171717);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		border-color var(--wp--custom--transition--fast, 0.15s ease),
		background var(--wp--custom--transition--fast, 0.15s ease);
}
.agronorte-home-btn-block-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--neutral-400, #a3a3a3);
	background: var(--wp--preset--color--neutral-50, #fafafa);
}

/* Bridge de layout: los hijos de .ag-pv-sh__actions ahora son wp:buttons > wp:button.
   Replico el flex/gap de .ag-pv-sh__actions (display:flex; gap:16px) para que el
   wrapper wp:buttons no rompa el layout de la fila. */
.ag-pv-sh__actions .wp-block-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 !important;
}
.ag-pv-sh__actions .wp-block-buttons .wp-block-button {
	margin: 0 !important;
}

/* V. pv-st-faq — la fila de FAQ usa el grid de 3 columnas de ag-pv-sh; el grupo
   faq va en la tercera columna, igual que la fila con `style="margin-top:8px"` del PHP.
   Los dos divs spacer llevan ag-pv-st-faq-spacer y ocupan sus columnas del grid.
   Reaplico el margin-top de 8px que se perdió al pasar a bloques.           */
.ag-pv-st-faq-row { margin-top: 8px; }
.ag-pv-faq.wp-block-group { grid-column: 3; }
/* Gap subtítulo → 1ª FAQ: el neutralizador de márgenes de bloque (global.css)
   anula el margin-top del .ag-pv-faq (sigue a los spacers dentro del faq-row),
   dejando la lista pegada a la bajada. Re-afirmamos con !important. */
.ag-pv-st-faq-row > .ag-pv-faq { margin-top: 48px !important; }
@media (max-width: 1024px) {
	.ag-pv-faq.wp-block-group { grid-column: 1; }
}

/* ─── Bridges de CSS — Fase 4 / Task 4: parts de Paquetes de Seguimiento ───
   W–Z. Compensan las diferencias del markup de bloques vs los originales en PHP. */

/* W. pv-paquetes-agro/construccion — imagen del pkg: wp:image envuelve la img
   en un <figure>. Saco los margins del figure y hago que la img llene exacto
   el contenedor .ag-pv-pkg__img (que está en position absolute). */
.ag-pv-pkg__img .wp-block-image {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ag-pv-pkg__img .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* X. pv-paquetes-agro/construccion — CTA del pkg como bloque wp:button.
   Clon de .ag-pv-pkg__cta. Clase modificadora: .ag-pv-pkg__cta-block.
   El wrapper wp:buttons de afuera necesita resetear margins/display para
   que el botón se estire full-width como lo hace el <a> del PHP. */
.ag-pv-pkg__cta-wrap {
	margin-top: auto !important;
}
.ag-pv-pkg__cta-wrap.wp-block-buttons {
	/* top:auto pega el CTA al fondo de la card (las cards se igualan con el
	   align-items:stretch del grid); right/bottom/left resetean los defaults de
	   wp:buttons. Un `margin:0` plano acá pisaría el margin-top:auto de arriba y
	   dejaría el CTA de la card más corta flotando a media altura. */
	margin: auto 0 0 !important;
}
.ag-pv-pkg__cta-wrap .wp-block-button {
	margin: 0 !important;
	width: 100%;
}
.ag-pv-pkg__cta-block .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	border-radius: 12px;
	background: var(--wp--preset--color--primary, #367c2b);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--wp--custom--transition--fast, 0.15s ease);
	border: none;
	padding: 0 24px;
	box-sizing: border-box;
}
.ag-pv-pkg__cta-block .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-dark, #2d6830);
}
/* Los overrides del theme Construcción van sobre el article ancestro, así que
   el selector descendiente igual llega al link del botón de bloque. */
.ag-pv-pkg--construccion .ag-pv-pkg__cta-block .wp-block-button__link {
	background: var(--wp--preset--color--accent-orange, #f2a900);
	color: var(--wp--preset--color--white, #fff);
}
.ag-pv-pkg--construccion .ag-pv-pkg__cta-block .wp-block-button__link:hover {
	background: #d99700;
}

/* Y. pv-paquetes-agro/construccion — feats del pkg: el bloque wp:details mete
   un margin en el details. Replico la regla de margin 0 de
   `.ag-pv-faq .wp-block-details` pero scopeada al contexto de feats del pkg
   (acá no hay ancestro .ag-pv-faq). */
.ag-pv-pkg__feats .wp-block-details {
	margin: 0;
}

/* Fila compacta del summary de feats: el PHP scopea el spacing ajustado a
   .ag-pv-pkg__feats .ag-pv-faq__q (padding 6px 0; font-size 18px) — clase que el
   summary de bloque no tiene, así que sin esto el summary pelado conserva el
   padding de FAQ de 28px y las filas de la card de precios salen ~2× más altas. */
.ag-pv-pkg__feats > .ag-pv-faq__item > summary {
	/* padding-right reserva el ícono +/− (position:relative se hereda de la
	   regla base del summary). */
	padding: 6px 30px 6px 0;
	font-size: 18px;
	color: var(--wp--preset--color--neutral-900, #171717);
}

/* Summary de feats en markup de bloques: el color de hover/open propio del pkg
   está scopeado a .ag-pv-pkg__feats .ag-pv-faq__q (clase del PHP que el bloque
   no emite). Lo extiendo al summary pelado. */
.ag-pv-pkg__feats > .ag-pv-faq__item > summary:hover,
.ag-pv-pkg__feats > .ag-pv-faq__item[open] > summary {
	color: var(--wp--preset--color--neutral-900, #171717);
}

/* pkg feats icon: barras más cortas (14px) y verdes; hereda el resto (posición,
   rotación, transición) de la regla base del summary. */
.ag-pv-pkg__feats > .ag-pv-faq__item > summary::before,
.ag-pv-pkg__feats > .ag-pv-faq__item > summary::after {
	width: 14px;
	color: var(--wp--preset--color--primary, #367c2b);
	/* padding-top de paquetes = 6px (alinea a la 1ª línea). */
	top: calc(6px + 0.5lh);
}
/* Construcción: ícono naranja. */
.ag-pv-pkg--construccion .ag-pv-pkg__feats > .ag-pv-faq__item > summary::before,
.ag-pv-pkg--construccion .ag-pv-pkg__feats > .ag-pv-faq__item > summary::after {
	color: var(--wp--preset--color--accent-orange, #f2a900);
}

/* Z. pv-paquetes-agro/construccion — article del pkg como bloque wp:group:
   me aseguro de que el wp-block-group del article herede el layout flex en
   columna de .ag-pv-pkg (ya lo hereda por clase) y que el grupo __main
   tampoco colapse. */
article.wp-block-group.ag-pv-pkg {
	display: flex;
	flex-direction: column;
}

/* ─── Bridges de CSS — Fase 4 / Task 5: parts de AP + Paquete Esencial ─────
   AA–AE. Compensan las diferencias del markup de bloques vs los originales en PHP. */

/* AA. pv-ap-solcards — imagen del solcard: wp:image envuelve la img en un <figure>.
   El .agronorte-home-cat__img original es un <img> pelado con position:absolute.
   Replico ese comportamiento en el figure y su img hija, igual que el
   Bridge W (pkg__img) pero scopeado al contexto del solcard. */
.ag-pv-solcard__img .wp-block-image {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ag-pv-solcard__img .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
/* Escala la imagen (envuelta en figure) en el hover de la card (replica el
   .agronorte-home-cat:hover .agronorte-home-cat__img { transform: scale(1.05) }
   del img pelado). */
.ag-pv-solcard:hover .ag-pv-solcard__img .wp-block-image img {
	transform: scale(1.05);
}

/* AB. pv-ap-solcards — toda la card clickeable, igual que los catálogos de
   Repuestos (donde la card entera es un <a>). En markup de bloques no se puede
   envolver un grupo en <a>, así que el texto del footer queda como párrafo
   visual (.agronorte-home-cat__count, revelado en hover) y un link overlay
   (.ag-pv-solcard__link, hijo directo de la card) cubre toda la card. Su
   containing block es .ag-pv-solcard (position:relative), así que inset:0 lo
   estira sobre la card completa; z-index sobre __info para captar el click. */
.ag-pv-solcard {
	position: relative;
}
.ag-pv-solcard__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
}
.ag-pv-solcard .agronorte-home-cat__count {
	margin: 0;
}

/* AC. pv-ap-solcards — pseudo del arrow-btn: el PHP renderiza un SVG vía
   agronorte_arrow_svg(). En el part de bloques el .agronorte-home-cat__arrow-btn
   es un wp:group vacío; recreo la flecha derecha con un mask de CSS (mismo SVG
   que usa el bridge de careers-cta en nosotros.css). */
.ag-pv-solcard__arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--wp--custom--border-radius--small, 12px);
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}
.ag-pv-solcard__arrow::after {
	content: '';
	display: block;
	width: 16px;
	height: 9px;
	background-color: var(--wp--preset--color--white, #fff);
	-webkit-mask: url(../images/icons/arrow.svg) center / contain no-repeat;
	mask: url(../images/icons/arrow.svg) center / contain no-repeat;
}
.ag-pv-solcard:hover .ag-pv-solcard__arrow {
	background: rgba(255, 255, 255, 0.35);
}

/* AD. pv-ap-statement — statement--light: ag-pv-st-btn-white-wa (Bridge S)
   funciona en la variante oscura del statement (BG con overlay oscuro).
   En la variante --light el fondo de la sección es surface (#f1f2f1), así que
   el botón queda blanco y el texto neutral-900 — mismo resultado visual.
   No hace falta otro bridge; los colores del Bridge S ya matchean el contexto
   --light (relleno blanco, texto oscuro). Este comentario documenta el reuso
   intencional. */

/* AE. pv-esencial-hero — grupo de acciones del hero: el PHP usa un div pelado
   .ag-pv-hero__actions. En bloques un wp:group envuelve un wrapper wp:buttons.
   Reseteo el margin de wp:buttons para que los botones queden al ras en la fila flex. */
.ag-pv-hero__actions .wp-block-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 !important;
}
.ag-pv-hero__actions .wp-block-buttons .wp-block-button {
	margin: 0 !important;
}


/* AG. pv-ap-etapas / pv-st-pasos — utilidad de spacing mt-64 (grid de steps).
   El style="margin-top:64px" inline del PHP se reemplaza por la clase ag-pv-mt-64. */
.ag-pv-mt-64 { margin-top: 64px !important; }

/* CSC: el banner pre-footer respeta el horario del CSC. */
html:not(.agronorte-csc-open) .ag-pv-csc { display: none; }