/**
 * Capacitaciones — deltas sobre el design system de posventa.
 *
 * Todo lo estructural (tokens, .ag-pv-section, .ag-pv-sh, .ag-pv-prodgrid,
 * .ag-pv-prodcard, .ag-pv-statement) viene de posventa.css. Acá viven solo
 * las piezas propias de la sección: pills de filtro, cards-link, y la ficha
 * de curso (.ag-cap-single).
 */

/* ── Toolbar: filtros + toggle de vista (landing) ──────── */

.ag-cap-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-top: 40px;
}

.ag-cap-filters {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Botón "Filtros": existe solo en mobile (ver bloque ≤768px al final). */
.ag-cap-filters-toggle {
	display: none;
}

/* Select de orden (custom-select) + toggle de vista, a la derecha. */
.ag-cap-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Los botones son .agronorte-pill / .agronorte-subcat-pill del catálogo de
   equipos (woocommerce.css) — acá solo se disponen las filas. */
.ag-cap-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Tipos de curso + modalidades en una misma fila (dos grupos, un renglón),
   con más aire entre grupos que entre pills. */
.ag-cap-pills-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
}

/* ── Cards de curso (landing + relacionados) ───────────── */

.ag-cap-grid {
	margin-top: 32px;
}

/* La prodcard de posventa es <article>; acá es un link. */
a.ag-cap-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--wp--preset--color--neutral-200);
	transition: border-color var(--wp--custom--transition--fast);
}

a.ag-cap-card:hover {
	border-color: var(--wp--preset--color--neutral-300);
}

/* Zoom de imagen en hover — misma convención que .agronorte-noticia-card
   (noticias.css): transform 0.4s ease → scale(1.05), media con overflow
   hidden para que el zoom no desborde la card. */
a.ag-cap-card .ag-pv-prodcard__media {
	overflow: hidden;
}

a.ag-cap-card .ag-pv-prodcard__media img {
	transition: transform 0.4s ease;
}

a.ag-cap-card:hover .ag-pv-prodcard__media img {
	transform: scale(1.05);
}

a.ag-cap-card[hidden] {
	display: none;
}

/* Badge de línea (Agro/Construcción): mismo badge de las cards de careers
   (.agronorte-job-card__badge) — valores calcados porque las vars --careers-*
   viven scopeadas a esas páginas. Es clickeable: aplica el filtro de línea. */
.ag-cap-card__tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 6px 12px;
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--border-radius--large);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22px;
	white-space: nowrap;
	margin-bottom: 8px;
	cursor: pointer;
}

/* Construcción en ámbar — mismos valores que las subcat pills del catálogo
   ([data-cat-theme="construccion"], woocommerce.css). Aplica al badge de la
   vista lista y a la pill sobre imagen de la grilla. */
.ag-cap-card__tag--construccion {
	background: #fef3cd;
	color: #996600;
}

/* Vista grilla: la línea va como pill sobre la imagen (mismo componente de
   las prodcards de Repuestos); el badge de la columna de texto queda solo
   para la vista lista, donde la pill sobre el thumb de 96px no tiene lugar. */
.ag-cap-card .ag-pv-prodcard__pill {
	cursor: pointer;
	box-shadow: none;
}

.ag-cap-grid:not(.is-list-view) .ag-pv-prodcard__text .ag-cap-card__badges {
	display: none;
}

.ag-cap-grid.is-list-view .ag-pv-prodcard__media .ag-pv-prodcard__pill {
	display: none;
}

/* Meta de la card (modalidad · duración): formato de la línea de ubicación
   de las cards de careers (.agronorte-job-card__location), con el icono de
   la modalidad en lugar del pin de ubicación. */
.ag-cap-card .ag-pv-prodcard__text p {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 13px;
	color: #8c8c8c; /* --careers-muted */
}

.ag-cap-card .ag-pv-prodcard__text p svg {
	flex-shrink: 0;
}

/* ── Vista listado (toggle, como oportunidades laborales) ─ */

.ag-cap-grid.is-list-view {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ag-cap-grid.is-list-view a.ag-cap-card {
	/* La card base trae flex-basis 304px (ancho en las filas de posventa);
	   en un contenedor columna eso se vuelve ALTURA, así que se anula. */
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 16px 0;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(245, 245, 245, 0) 25%, rgba(245, 245, 245, 0) 75%, transparent 100%);
	transition: background var(--wp--custom--transition--slow);
}

.ag-cap-grid.is-list-view a.ag-cap-card:last-child {
	border-bottom: none;
}

.ag-cap-grid.is-list-view a.ag-cap-card:hover {
	background: linear-gradient(90deg, transparent 0%, rgba(245, 245, 245, 0.5) 25%, rgba(245, 245, 245, 0.5) 75%, transparent 100%);
}

/* La vista lista es solo texto: la imagen queda para la grilla. */
.ag-cap-grid.is-list-view .ag-pv-prodcard__media {
	display: none;
}

.ag-cap-grid.is-list-view .ag-pv-prodcard__text {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	flex: 1;
	min-width: 0;
	padding: 0;
}

/* Columna del badge en lista: ancho fijo = columna alineada (mismo truco
   que .agronorte-careers-grid.is-list-view __badges). */
.ag-cap-grid.is-list-view .ag-cap-card__badges {
	flex: 0 0 120px;
	display: flex;
	align-items: center;
}

.ag-cap-grid.is-list-view .ag-cap-card__tag {
	margin-bottom: 0;
}

.ag-cap-grid.is-list-view .ag-pv-prodcard__text h3 {
	flex: 0 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

.ag-cap-grid.is-list-view .ag-pv-prodcard__text p {
	margin: 0 0 0 auto;
	flex-shrink: 0;
}

/* ── Equipos relacionados (ficha): ul.products del listado de equipos
      (content-product.php) dentro de la columna del título — la card, el
      tag y el zoom en hover son los del catálogo, sin CSS propio. La
      descripción del producto no aplica en este contexto. ───────────── */

ul.products.ag-cap-equipos li.product .product-overview {
	display: none;
}

/* Miniaturas de equipos relacionados: la caja toma el alto de la imagen (al
   80% del ancho de la card) en vez de los 170px fijos del catálogo, y la
   imagen llega sin recorte (medium_large, ver single-capacitacion.php), así
   no se cortan las fotos altas ni sobra caja cuando la foto es apaisada. */
ul.products.ag-cap-equipos li.product .product-card-image {
	height: auto;
	padding: 16px 0;
}

ul.products.ag-cap-equipos li.product .product-card-image img {
	width: 80%;
	height: auto;
	max-height: none;
}

/* ── Cursos relacionados: heading de .related.products (ficha de equipos)
      dentro de una .ag-pv-section — el spacing vertical lo pone la sección,
      así que se neutraliza el propio de related. ─────────────────────── */

.ag-cap-single .related.products {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* El wrap del "mostrar más" trae display:flex de woocommerce.css, que le
   gana al [hidden] del user agent — sin esto el botón nunca se oculta al
   filtrar con menos de 8 resultados o al llegar al final del listado. */
#cap-load-more-wrap[hidden] {
	display: none;
}


.ag-cap-empty {
	margin-top: 40px;
	padding: 48px 24px;
	text-align: center;
	border: 1px dashed var(--wp--preset--color--neutral-300);
	border-radius: var(--pv-radius-sm);
	color: var(--wp--preset--color--neutral-600);
}

/* ── Ficha de curso ────────────────────────────────────── */

/* El hero arranca a la altura del de la ficha de equipos: la ficha de
   producto usa padding-top spacing--60 (woocommerce.css `.single-product
   .product`), mientras que .ag-pv-section trae el padding de sección de
   posventa (clamp 64-96px) que dejaba todo mucho más abajo. */
.ag-cap-single__hero {
	padding-top: var(--wp--preset--spacing--60);
}

/* En la ficha de producto el CSS core de WooCommerce resetea el breadcrumb
   (`.woocommerce .woocommerce-breadcrumb { margin: 0 0 1em; padding: 0 }`),
   pero acá no hay ancestro .woocommerce y ganaba el padding de global.css,
   dejándolo 16px más abajo. Se replican los valores del contexto WC. */
.ag-cap-single .woocommerce-breadcrumb {
	padding: 0;
	margin: 0 0 1em;
}

/* Mismas proporciones que .agronorte-product-hero (ficha de equipos). */
.ag-cap-single__hero-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

/* El media del hero es una .agronorte-product-gallery (woocommerce.css):
   imagen principal 4:3 + thumbnails con switcheo. Solo se ajusta el
   encuadre: fotos de campo → cover con fondo neutro (el producto usa
   contain porque sus imágenes de estudio tienen fondo propio). */
.ag-cap-single__media .main-image {
	object-fit: cover;
	background: var(--wp--preset--color--neutral-100);
}

.ag-cap-single__title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 20px;
}

/* Ficha de datos (modalidad, lugar, duración, cupo): reusa la tabla de
   especificaciones de la ficha de equipos (woocommerce.css). Acá: marco y
   líneas verticales (el componente solo separa filas), primera columna con
   etiqueta + ícono alineado a la derecha, y sin el hover de fila.
   border-collapse: separate para que el marco respete el radio. */
.ag-cap-single__ficha {
	margin: 0 0 20px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--neutral-200);
}

.ag-cap-single__ficha th {
	vertical-align: middle;
	border-right: 1px solid var(--wp--preset--color--neutral-200);
}

/* Etiqueta a la izquierda, ícono pegado al divisor. El th no puede ser flex
   sin perder su rol de celda, por eso el span envolvente. */
.ag-cap-single__ficha-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ag-cap-single__ficha-head svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--neutral-500);
}

/* Columna de etiquetas al ancho de la más larga ("Inversión por jornada")
   para que ninguna parta en dos líneas: width 1% + nowrap = shrink-to-fit.
   Solo desktop; en mobile queda el 35% del componente y las etiquetas parten. */
@media (min-width: 769px) {
	.ag-cap-single__ficha th {
		width: 1%;
		white-space: nowrap;
	}
}

/* Valor + botón de info (fila de inversión): el ícono va pegado al borde
   derecho de la celda. El td no puede ser flex sin perder su rol de celda,
   por eso el span envolvente (mismo criterio que __ficha-head). */
.ag-cap-single__ficha-value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ag-cap-tooltip {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--neutral-500);
	cursor: help;
	transition: color var(--wp--custom--transition--fast);
}

.ag-cap-tooltip:hover,
.ag-cap-tooltip:focus-visible {
	color: var(--wp--preset--color--neutral-900);
}

/* Burbuja: el look es el tooltip del sitio (global.css, el mismo de los
   pines del mapa). Acá solo posición: anclada a la derecha del ícono (que
   está en el borde de la tabla) para no desbordar; el texto es largo, así
   que parte en líneas. Aparece con el mismo fade del mapa. */
.ag-cap-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	right: -8px;
	z-index: 10;
	width: max-content;
	max-width: 240px;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flecha: mismo triángulo de 6px del tooltip de Leaflet. */
.ag-cap-tooltip__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 10px;
	border: 6px solid transparent;
	border-top-color: var(--wp--preset--color--neutral-900);
}

.ag-cap-tooltip:hover .ag-cap-tooltip__bubble,
.ag-cap-tooltip:focus .ag-cap-tooltip__bubble {
	opacity: 1;
	visibility: visible;
}

/* Modalidad "Presencial / Virtual" trae dos íconos: aire entre ellos. */
.ag-cap-single__ficha-head svg + svg {
	margin-left: -8px;
}

.ag-cap-single__ficha tr:last-child th,
.ag-cap-single__ficha tr:last-child td {
	border-bottom: 0;
}

.ag-cap-single__ficha tr:hover {
	background: none;
}

.ag-cap-single__ficha tr:hover th {
	background-color: var(--wp--preset--color--neutral-50);
}

/* Los CTAs usan .agronorte-product-ctas (woocommerce.css): columna apilada,
   idéntica a la ficha de equipos. */

.ag-cap-single__objetivo {
	max-width: 60ch;
}

/* Caja verde "Material previo": más aire respecto del último párrafo del
   objetivo (el gap de .ag-pv-sh__content son 24px; acá suma 24px más). */
.ag-cap-single .ag-pv-casilleros {
	margin-top: 24px;
}

/* Logo de YouTube decorativo: absoluto a la derecha, centrado en vertical y
   asomando por el borde (la caja tiene overflow:hidden), detrás del contenido
   (__content ya lleva z-index 1). Mismo rol que .ag-pv-casilleros__map. */
.ag-cap-single__yt {
	position: absolute;
	top: 50%;
	right: -36px;
	transform: translateY(-50%);
	width: 230px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.ag-cap-single__yt {
		width: 170px;
		opacity: 0.5;
	}
}

@media (max-width: 768px) {
	.ag-cap-single__yt {
		display: none;
	}
}

/* Cuerpo de sección alineado con la columna del título: espeja la grilla de
   .ag-pv-sh (320px riel + 80px + contenido) para que las listas queden
   debajo de "Qué vas a aprender", no colgadas del borde izquierdo. */
.ag-cap-sh-body {
	display: grid;
	grid-template-columns: 320px 80px 1fr;
	gap: 24px;
	margin-top: 32px;
}

.ag-cap-sh-body > * {
	grid-column: 3;
	max-width: 842px; /* mismo ancho de lectura que .ag-pv-sh__content */
}

/* Temas: dos columnas con bullets de marca, alineadas con el título. */
.ag-cap-temas {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 40px;
}

/* Bullets: mismo dash verde de los listados de la ficha de oportunidad
   laboral (.agronorte-job-single__content li, careers.css). */
.ag-cap-temas li,
.ag-cap-beneficios li {
	position: relative;
	padding-left: 24px;
	line-height: 28px;
	color: var(--wp--preset--color--neutral-700);
}

.ag-cap-temas li::before,
.ag-cap-beneficios li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 8px;
	height: 4px;
	background: var(--wp--preset--color--primary);
	border-radius: 1px;
}

.ag-cap-beneficios {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 40px;
}

/* Material previo: recuadro destacado. */
.ag-cap-videos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Contenido libre del editor. */
.ag-cap-single__content {
	max-width: 760px;
}

/* ── Banner de tutoriales (fichas de producto y de curso) ─
   En la ficha de producto el wrapper .product ya acota el contenido a
   1290px con su propio padding → el banner NO agrega padding inline (si
   lo hace queda más angosto que las demás secciones). En la ficha de
   curso (.ag-pv) las secciones llevan su padding propio → el banner
   también, con el max-width por dentro (esquema .ag-pv-section+wrap). */

.agronorte-tutorials-banner {
	padding: 0 0 clamp(48px, 6vw, 80px);
}

.agronorte-tutorials-banner .agronorte-noticias-banner {
	max-width: 1290px;
	margin: 0 auto;
}

.ag-pv .agronorte-tutorials-banner {
	padding-inline: var(--pv-inline);
}

/* Foto del banner (agronorte-banner-videos-tutoriales.webp): el componente la
   pone absoluta a 320px del borde derecho con mix-blend-mode: screen. Acá va
   SIN screen (la foto se prepara con el fondo del banner, #171717, y su propio
   fundido horneado), un poco más ancha, con los bordes laterales desvanecidos
   por máscara, y el texto acotado para que no corra por debajo. Por debajo de
   1200px no hay lugar entre texto y botón: se oculta (el componente ya la
   oculta en ≤768px). */
.agronorte-tutorials-banner .agronorte-noticias-banner__img {
	mix-blend-mode: normal;
	width: 380px;
	right: 280px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
}

.agronorte-tutorials-banner .agronorte-noticias-banner__text {
	max-width: 520px;
}

@media (max-width: 1200px) {
	.agronorte-tutorials-banner .agronorte-noticias-banner__img {
		display: none;
	}

	.agronorte-tutorials-banner .agronorte-noticias-banner__text {
		max-width: none;
	}
}

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

/* Mismo breakpoint en el que .ag-pv-sh colapsa a una columna. */
@media (max-width: 1024px) {
	.ag-cap-sh-body {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 24px;
	}

	.ag-cap-sh-body > * {
		grid-column: 1;
		max-width: none;
	}

	/* El hero colapsa donde lo hace el de la ficha de equipos. */
	.ag-cap-single__hero-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 900px) {
	/* Listado en mobile: apilar texto, badge sin ancho fijo, meta a la izquierda. */
	.ag-cap-grid.is-list-view .ag-pv-prodcard__text {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.ag-cap-grid.is-list-view .ag-cap-card__badges {
		flex-basis: auto;
	}

	.ag-cap-grid.is-list-view .ag-pv-prodcard__text h3 {
		white-space: normal;
	}

	.ag-cap-grid.is-list-view .ag-pv-prodcard__text p {
		margin-left: 0;
	}

	.ag-cap-temas,
	.ag-cap-beneficios {
		grid-template-columns: 1fr;
	}
}

/* ── Landing: propuesta, modalidades y formatos ────────── */

/* Hero: fila bajo la bajada con el logo del área a la izquierda y las pills
   de modalidad a la derecha; en mobile se apilan (logo arriba). Los dos
   párrafos de la bajada llevan menos aire entre sí que el gap del head (24px). */
.ag-cap-hero__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 16px;
}

.ag-cap-hero__logo {
	margin: 0;
	flex-shrink: 0;
}

.ag-cap-hero__logo img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.ag-pv--capacitaciones .ag-pv-hero__subtitle + .ag-pv-hero__subtitle {
	margin-top: -8px;
}

/* Pills de modalidades bajo la bajada del hero: mismo componente de los
   filtros del catálogo, un paso más grandes y con icono; linkean al catálogo
   con el filtro de modalidad preaplicado. */
.ag-cap-modalidades {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ag-cap-modalidades .agronorte-pill {
	gap: 10px;
	padding: 18px 22px;
	font-size: 14px;
}

.ag-cap-modalidades .agronorte-pill svg {
	flex-shrink: 0;
}

/* Pilares: solcards de Agricultura de Precisión en 4 columnas (una por línea
   de cursos). posventa.css las colapsa a 1 col en 900px pero esta regla base
   ganaría por orden de carga — se re-colapsan acá abajo. Sin header arriba
   (sigue directo al hero), el margin-top de posventa.css se anula. */
.ag-cap-solcards {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 0;
}

/* Los pilares ocupan el lugar que tenía el video bajo el hero: el aire de
   arriba lo pone el padding inferior del hero, no el de sección. */
.ag-cap-propuesta {
	padding-top: 0;
}

/* En 4 columnas la card es angosta: título más chico para que "Tecnología
   de precisión" entre en una línea desde ~1420px de viewport (en pantallas
   más angostas baja a dos). */
.ag-cap-solcards .agronorte-home-cat__name {
	font-size: 25px;
}

/* Formatos: 4 cards en una fila (mismo corte que las icards de Alquiler). */
.ag-pv--capacitaciones .ag-pv-icards {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.ag-pv--capacitaciones .ag-pv-icards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Cards estáticas: sin link ni footer en el markup. El único hover que
   conservan es el zoom de imagen heredado de posventa.css
   (.ag-pv-solcard:hover … img { transform: scale(1.05) }). */

@media (max-width: 1200px) {
	.ag-cap-solcards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ag-pv--capacitaciones .ag-pv-icards {
		grid-template-columns: 1fr;
	}

	.ag-cap-solcards {
		grid-template-columns: 1fr;
	}
}

/* Apiladas tipo mazo en mobile, igual que las categorías de Home (home.css):
   sticky con el mismo top para las 3 y card-stack.js escala la de atrás.
   .ag-pv-solcard es position:relative en posventa.css; acá gana por especificidad. */
@media (max-width: 768px) {
	.ag-cap-solcards {
		padding-bottom: 96px;
	}

	.ag-cap-solcards .ag-pv-solcard {
		position: sticky;
		top: 16px;
		transform-origin: 50% 0;
	}
}

/* ─── Banner final "Capacitate con nosotros" ─────────────────────────────
   Reusa .ag-pv-statement--light (posventa.css). Solo en esta página la foto
   baja y la sección crece la misma medida, así el recorte de la foto es el
   de siempre pero más abajo: en desktop el texto gana aire; en mobile el
   título arranca sobre fondo liso y el resto del texto y los botones apoyan
   sobre el cielo, con la maquinaria fuera de la zona de lectura. La máscara
   funde el borde superior de la foto con el fondo de la sección en vez de
   cortar en seco. Scopeado por la página porque la variante --light también
   vive en Agricultura de Precisión. */
.ag-pv--capacitaciones .ag-pv-statement {
	--cap-statement-offset: 300px;
	min-height: calc(900px + var(--cap-statement-offset));
}

.ag-pv--capacitaciones .ag-pv-statement__media {
	top: var(--cap-statement-offset);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
}

@media (max-width: 768px) {
	.ag-pv--capacitaciones .ag-pv-statement {
		--cap-statement-offset: 440px;
		min-height: calc(560px + var(--cap-statement-offset));
	}
}

/* Banner final: logo del área sobre el heading, mismo ancho que en el hero.
   La separación la pone el gap (28px) de .ag-pv-statement__inner. */
.ag-cap-statement__logo {
	margin: 0;
}

.ag-cap-statement__logo img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

/* Banner final: el <br> tras "¡Capacitate con nosotros!" va en todos los
   anchos. El componente lo oculta en ≤768px, así que acá se fuerza scopeado
   a la página. */
.ag-pv--capacitaciones .ag-pv-statement__text br {
	display: inline;
}

/* ─── Mobile: modalidades, toolbar y filtros del catálogo ───────────────── */
@media (max-width: 768px) {
	.ag-cap-hero__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ag-cap-hero__row .ag-cap-modalidades {
		align-self: stretch;
	}

	/* Pills de modalidad del hero: las tres en una sola
	   fila, de ancho igual. Con el padding de desktop suman más que el viewport
	   (382px en 390px) y la tercera caía a otra línea. */
	.ag-cap-modalidades {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.ag-cap-modalidades .agronorte-pill {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		gap: 6px;
		padding: 14px 8px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* Toolbar del catálogo: las pills de filtro se ven siempre (pedido del
	   cliente, 2026-10: sin agruparlas detrás del botón "Filtros"), a todo el
	   ancho, y debajo el orden / toggle de vista. */
	.ag-cap-toolbar {
		flex-wrap: wrap;
		align-items: center;
	}

	/* El botón "Filtros" queda en el markup (y en capacitaciones.js) pero no se
	   muestra: si se quiere volver al panel desplegable, alcanza con restaurar
	   este bloque y el de .ag-cap-filters de abajo. */
	.ag-cap-filters-toggle {
		display: none;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		padding: 10px 14px;
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--neutral-200);
		border-radius: var(--wp--custom--border-radius--small);
		font-family: var(--wp--preset--font-family--host-grotesk);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--neutral-700);
		cursor: pointer;
		transition: border-color var(--wp--custom--transition--normal);
	}

	.ag-cap-filters-toggle svg {
		color: var(--wp--preset--color--neutral-400);
		transition: transform var(--wp--custom--transition--normal);
	}

	.ag-cap-filters-toggle[aria-expanded="true"] {
		border-color: var(--wp--preset--color--neutral-300);
	}

	.ag-cap-filters-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.ag-cap-toolbar__controls {
		order: 2;
		margin-left: auto;
	}

	.ag-cap-filters {
		display: flex;
		order: 1;
		width: 100%;
	}

	/* Tipos y modalidades dejan de compartir renglón: cada grupo es su propia
	   fila con scroll horizontal. */
	.ag-cap-pills-row {
		display: contents;
	}

	/* Cada grupo scrollea hacia la derecha como los pills del catálogo de
	   equipos (woocommerce.css): sin wrap, bleed hasta el borde del viewport y
	   scrollbar oculta. */
	.ag-cap-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-padding-inline: var(--pv-inline);
		padding-inline: var(--pv-inline);
		margin-inline: calc(-1 * var(--pv-inline));
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ag-cap-pills::-webkit-scrollbar {
		display: none;
	}

	.ag-cap-pills > * {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

@media (max-width: 360px) {
	/* Sin ícono: con tres pills de ~100px no queda lugar para texto + ícono. */
	.ag-cap-modalidades .agronorte-pill svg {
		display: none;
	}
}

/* Ficha de curso, mobile: el <br> de "Material previo" es solo para desktop. */
@media (max-width: 768px) {
	.ag-cap-single .ag-pv-casilleros__text br {
		display: none;
	}
}

/* Grillas de cursos relacionados — "Otras capacitaciones que te pueden
   interesar" (ficha de curso) y "Capacitaciones relacionadas con este equipo"
   (ficha de equipo), ambas dentro de .related.products: en mobile scrollean
   hacia la derecha con las mismas reglas que los equipos relacionados
   (.related.products ul.products, woocommerce.css). El catálogo de la landing
   no está dentro de .related.products, así que no cambia. */
@media (max-width: 768px) {
	.related.products .ag-cap-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		padding-inline: 16px;
		margin-inline: -16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.related.products .ag-cap-grid::-webkit-scrollbar {
		display: none;
	}

	.related.products .ag-cap-grid > * {
		flex: 0 0 260px;
		scroll-snap-align: start;
	}
}