/* =========================================================================
   PI Agro: acento propio de la sección AgroIndustria sobre el diseño del tema.
   Verde campo (portada), verde (botones y etiquetas) y dorado trigo (detalles).
   Diseñado primero para celular.
   ========================================================================= */
.pi-agro {
	--agro-campo: #1f3d1c;
	--agro-verde: #2f6b2a;
	--agro-verde-oscuro: #24561f;
	--agro-verde-100: #e7f0e4;
	--agro-trigo: #d9b45a;
	--agro-trigo-100: #f7eed8;
}

/* Foco visible en el acento de la sección */
.pi-agro :focus-visible { outline-color: var(--agro-trigo); }

/* ---------- Botones ---------- */
.pi-agro-btn { background: var(--agro-verde); color: #fff; min-height: 44px; }
.pi-agro-btn:hover, .pi-agro-btn:focus-visible { background: var(--agro-verde-oscuro); color: #fff; }
.pi-agro-btn svg, .pi-agro-btn--claro svg { width: 20px; height: 20px; }
.pi-agro .pi-agro-btn--claro { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); min-height: 44px; }
.pi-agro .pi-agro-btn--claro:hover { border-color: var(--agro-trigo); color: #fff; }
.pi-agro-btn--grande { min-height: 52px; padding: 12px 24px; font-size: var(--t-base); }

/* ---------- Etiqueta de rubro ---------- */
.pi-agro-etiqueta { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-sm); background: var(--agro-verde-100); color: var(--agro-verde-oscuro); font: 600 11px/1.4 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- 1. Portada ---------- */
.pi-agro-portada { background: var(--agro-campo); color: #dfe9dc; padding-block: var(--e-6) var(--e-7); position: relative; overflow: hidden; }
.pi-agro-portada::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--agro-trigo); }
.pi-agro-portada__reticula { display: grid; gap: var(--e-6); align-items: center; }
.pi-agro-portada .migas, .pi-agro-portada .migas a { color: #b8cbb3; }
.pi-agro-antetitulo { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--e-3); font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--agro-trigo); }
.pi-agro-antetitulo::before { content: ""; width: 24px; height: 3px; background: var(--agro-trigo); flex-shrink: 0; }
.pi-agro-portada h1 { color: #fff; font-size: var(--t-3xl); line-height: 1.08; max-width: 14em; }
.pi-agro-portada__bajada { margin: var(--e-4) 0 0; font-size: var(--t-md); color: #cfdccb; max-width: 34em; }
.pi-agro-portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* Video destacado (vertical) */
.pi-agro-destacado { margin: 0; display: grid; gap: var(--e-4); justify-items: center; }
.pi-agro-destacado .pi-agro-mini { width: min(100%, 340px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.pi-agro-destacado figcaption { width: min(100%, 340px); display: grid; gap: var(--e-2); }
.pi-agro-destacado__marca { color: var(--agro-trigo); font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; }
.pi-agro-destacado h2 { font-size: var(--t-lg); color: #fff; }
.pi-agro-destacado h2 a { color: inherit; text-decoration: none; }
.pi-agro-destacado h2 a:hover { text-decoration: underline; }
.pi-agro-destacado .pi-agro-credito, .pi-agro-destacado .pi-agro-credito a { color: #cfdccb; }
.pi-agro-destacado__datos { display: flex; align-items: center; gap: var(--e-3); margin: 0; font-size: var(--t-sm); color: #cfdccb; }
.pi-agro-destacado .pi-agro-etiqueta { background: var(--agro-trigo); color: var(--agro-campo); }

/* ---------- Miniatura con botón de reproducir (9:16) ---------- */
.pi-agro-mini { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: #2a3a28; isolation: isolate; }
.pi-agro-mini > img { width: 100%; height: 100%; object-fit: cover; }
.pi-agro-mini::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, transparent 26%, transparent 70%, rgba(0, 0, 0, .45)); }
.pi-agro-mini__vacia { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .6); }
.pi-agro-mini__vacia svg { width: 40px; height: 40px; }
.pi-agro-mini__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; color: #fff; }
.pi-agro-mini__play svg { width: 58px; height: 58px; padding: 14px 12px 14px 16px; border-radius: 50%; background: rgba(31, 61, 28, .82); box-shadow: 0 0 0 3px rgba(217, 180, 90, .9); transition: transform .2s var(--ease), background .2s; }
.pi-agro-mini__play:hover svg, .pi-agro-mini__play:focus-visible svg { transform: scale(1.08); background: var(--agro-verde); }
.pi-agro-mini__play:focus-visible { outline: 3px solid var(--agro-trigo); outline-offset: -3px; }
.pi-agro-mini__origen, .pi-agro-mini__duracion { position: absolute; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .62); color: #fff; font: 600 11px/1.3 var(--f-texto); }
.pi-agro-mini__origen { top: 8px; left: 8px; }
.pi-agro-mini__origen svg { width: 14px; height: 14px; }
.pi-agro-mini__duracion { bottom: 8px; right: 8px; font-variant-numeric: tabular-nums; }

/* Reproductor cargado */
.pi-agro-reproductor { position: relative; aspect-ratio: 9 / 16; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.pi-agro-reproductor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-agro-reproductor--instagram { aspect-ratio: auto; min-height: 480px; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: var(--r-md); }
.pi-agro-reproductor--instagram .instagram-media { margin: 0 auto !important; }
.pi-agro-fuera { display: grid; place-items: center; align-content: center; gap: var(--e-3); aspect-ratio: 9 / 16; padding: var(--e-5); border-radius: var(--r-lg); background: var(--agro-campo); color: #fff; text-align: center; }
.pi-agro-fuera p { margin: 0; color: #cfdccb; font-size: var(--t-sm); }

/* ---------- 2. Videos agro ---------- */
.pi-agro-filtros { margin: 0 calc(var(--gutter) * -1) var(--e-5); }
.pi-agro-filtros ul { display: flex; gap: var(--e-2); margin: 0; padding: 2px var(--gutter) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pi-agro-filtros ul::-webkit-scrollbar { display: none; }
.pi-agro-filtros li { flex: 0 0 auto; scroll-snap-align: start; }
.pi-agro-filtros a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--papel); color: var(--grafito); font: 600 var(--t-sm)/1 var(--f-texto); text-decoration: none; white-space: nowrap; }
.pi-agro-filtros a:hover { border-color: var(--agro-verde); color: var(--agro-verde-oscuro); }
.pi-agro-filtros a[aria-current="page"] { background: var(--agro-verde); border-color: var(--agro-verde); color: #fff; box-shadow: inset 0 -3px 0 var(--agro-trigo); }

.pi-agro-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
.pi-agro-tarjeta { position: relative; display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.pi-agro-tarjeta__cuerpo { display: grid; gap: 6px; justify-items: start; }
.pi-agro-tarjeta h3 { font-size: var(--t-base); line-height: 1.25; }
.pi-agro-tarjeta h3 a { color: inherit; text-decoration: none; }
.pi-agro-tarjeta h3 a:hover { color: var(--agro-verde-oscuro); text-decoration: underline; text-decoration-thickness: 1px; }
.pi-agro-credito { margin: 0; font-size: var(--t-xs); color: var(--gris-600); }
.pi-agro-credito a { color: inherit; }
.pi-agro-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3); margin-top: var(--e-6); font-size: var(--t-sm); color: var(--gris-600); }

/* ---------- 3. Noticias del agro ---------- */
.pi-agro-grilla-noticias { display: grid; gap: var(--e-6); }
.pi-agro .enlace-flecha { color: var(--agro-verde-oscuro); min-height: 44px; }

/* ---------- 4. Colaborar ---------- */
.pi-agro-colaborar { display: grid; gap: var(--e-5); padding: var(--e-6) var(--e-5); border-radius: var(--r-md); background: var(--agro-trigo-100); border: 1px solid #ead9ab; border-left: 6px solid var(--agro-trigo); }
.pi-agro-colaborar h2 { font-size: var(--t-xl); color: var(--agro-campo); }
.pi-agro-colaborar p { margin: var(--e-2) 0 0; max-width: 46em; }
.pi-agro-colaborar .pi-agro-btn { justify-self: stretch; white-space: normal; text-align: center; }

/* ---------- Página de un video ---------- */
.pi-agro-ficha { background: var(--papel); padding-block: var(--e-5) var(--e-7); border-bottom: 1px solid var(--linea); }
.pi-agro-ficha__reticula { display: grid; gap: var(--e-5); }
.pi-agro-ficha__video { width: min(100%, 400px); margin-inline: auto; }
.pi-agro-ficha__texto { display: grid; gap: var(--e-3); align-content: start; }
.pi-agro-ficha h1 { font-size: var(--t-2xl); }
.pi-agro-ficha__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: var(--t-sm); color: var(--gris-600); }
.pi-agro-ficha .pi-agro-credito { font-size: var(--t-sm); }
.pi-agro-ficha__descripcion { margin: 0; font-size: var(--t-md); }
.pi-agro-compartir { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
.pi-agro-externo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--agro-verde-oscuro); font-weight: 600; }
.pi-agro-externo svg { width: 16px; height: 16px; }

/* ---------- Ventana del reproductor (al tocar una tarjeta) ---------- */
.pi-agro-dialogo { width: min(100vw - 24px, 420px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: #0f1d0e; color: #fff; overflow: visible; }
.pi-agro-dialogo::backdrop { background: rgba(8, 16, 7, .82); }
.pi-agro-dialogo__caja { display: grid; gap: var(--e-3); padding: var(--e-3); }
.pi-agro-dialogo .pi-agro-reproductor { margin-inline: auto; }
.pi-agro-dialogo .pi-agro-reproductor:not(.pi-agro-reproductor--instagram) { width: min(100%, calc((100dvh - 150px) * 9 / 16)); }
.pi-agro-dialogo .pi-agro-reproductor--instagram { max-height: calc(100dvh - 150px); }
.pi-agro-dialogo__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.pi-agro-dialogo__pie p { margin: 0; font-size: var(--t-sm); line-height: 1.3; color: #cfdccb; }
.pi-agro-dialogo__pie a { color: #fff; font-weight: 600; }
.pi-agro-dialogo__cerrar { position: absolute; top: -8px; right: -8px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--agro-trigo); color: var(--agro-campo); cursor: pointer; }
.pi-agro-dialogo__cerrar svg { width: 22px; height: 22px; }

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 640px) {
	.pi-agro-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); }
	.pi-agro-grilla-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pi-agro-colaborar { padding: var(--e-6); }
	.pi-agro-colaborar .pi-agro-btn { justify-self: start; }
}
@media (min-width: 900px) {
	.pi-agro-portada { padding-block: var(--e-7) var(--e-8); }
	.pi-agro-portada__reticula { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--e-8); }
	.pi-agro-destacado { justify-items: stretch; }
	.pi-agro-filtros { margin-inline: 0; }
	.pi-agro-filtros ul { flex-wrap: wrap; padding-inline: 0; overflow: visible; }
	.pi-agro-grilla-noticias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pi-agro-colaborar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.pi-agro-ficha__reticula { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
	.pi-agro-ficha__video { margin: 0; }
}
@media (min-width: 1024px) {
	.pi-agro-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.pi-agro-mini__play svg { transition: none; }
}