/*
 * AV: sistema de diseño del Canal A+V en Helix Ultimate + SP Page Builder.
 *
 * Portado a mano del prototipo de Astro (src/styles/global.css y los componentes), que sigue
 * siendo la especificación visual. Marco: Taste Skill (diales 8/6/5, modo evolución de la
 * Home 02 de Agron) con el piso de calidad de Impeccable:
 * - sin rótulos sobre los títulos, display de 6rem como máximo, un solo acento (trigo);
 * - radios: lo interactivo es píldora, las superficies usan --av-radio-bloque;
 * - un solo momento de movimiento propio (la entrada del hero), todo apagado con
 *   prefers-reduced-motion;
 * - las superficies del navegador (selección, caret, scrollbar, foco) también con la paleta.
 *
 * Vive en media/templates/site/shaper_helixultimate/ (una actualización de Helix no lo pisa) y
 * se sirve por el enlace simbólico templates/shaper_helixultimate/css/custom.css.
 * Prefijo `av-` en todo: así no se pisa con Bootstrap, Helix ni SPPB.
 */

/* ── Tipografía: autoalojada, subset latino ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('/media/templates/site/shaper_helixultimate/fonts/bodoni-moda-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('/media/templates/site/shaper_helixultimate/fonts/bodoni-moda-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/media/templates/site/shaper_helixultimate/fonts/outfit-normal.woff2') format('woff2');
}

/* ── Tokens: FUENTE DE VERDAD del color en Joomla (= @theme del prototipo) ───────────────── */
:root {
  --av-fuente: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --av-fuente-display: 'Bodoni Moda', ui-serif, Georgia, serif;

  --av-verde-50: #f2f8ef;
  --av-verde-100: #e1efda;
  --av-verde-200: #c3dfb6;
  --av-verde-300: #96c683;
  --av-verde-400: #5b8c51;
  --av-verde-500: #3a8a24;
  --av-verde-600: #22700f;
  --av-verde-700: #1b5a0c;
  --av-verde-800: #16460b;
  --av-verde-900: #11350a;
  --av-verde-950: #0a2803;

  --av-trigo-100: #faf5d9;
  --av-trigo-300: #efe08f;
  --av-trigo-400: #e6d462;
  --av-trigo-500: #d4bf3f;

  --av-tierra-300: #c9a27a;
  --av-tierra-500: #8b5e34;
  --av-tierra-700: #5c3b1e;

  --av-hueso-50: #f7f8f4;
  --av-hueso-100: #edf0e8;
  --av-hueso-200: #dfe4d8;

  --av-tinta-500: #4c5749;
  --av-tinta-700: #2c352a;

  --av-radio-bloque: 0.375rem;
  --av-ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --av-sombra-profunda: 0 24px 60px -20px rgb(10 40 3 / 0.45);
  --av-alto-cabezal: 6.5rem;
}

/* ── Base (y neutralización de Bootstrap/Helix) ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--av-alto-cabezal);
  scrollbar-color: var(--av-verde-400) var(--av-hueso-100);
  accent-color: var(--av-verde-600);
}
body,
body.site {
  margin: 0;
  background: #fff;
  color: var(--av-tinta-500);
  font-family: var(--av-fuente);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body h1,
body h2 {
  margin: 0;
  font-family: var(--av-fuente-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--av-verde-950);
  text-wrap: balance;
}
body h3,
body h4 {
  margin: 0;
  font-family: var(--av-fuente);
  font-weight: 600;
  line-height: 1.35;
  color: var(--av-verde-950);
  text-wrap: balance;
}
body p {
  margin: 0;
}
body a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
body a:hover {
  color: inherit;
}
body img {
  max-width: 100%;
}
:focus-visible {
  outline: 3px solid var(--av-trigo-400);
  outline-offset: 2px;
}
::selection {
  background: var(--av-trigo-300);
  color: var(--av-verde-950);
}
input,
textarea,
select {
  caret-color: var(--av-verde-600);
}

/* Helix: cuerpo sin márgenes ni fondos propios; la página la arman los bloques. */
#sp-main-body,
#sp-main-body > .row,
#sp-component,
#sp-component > .sp-column {
  padding: 0;
  margin: 0;
}
#sp-main-body > .row {
  --bs-gutter-x: 0;
}
.sp-page-builder .page-content > .sppb-section,
.sp-page-builder .page-content > section {
  margin: 0;
}

/* SPPB: las filas del sitio (`av-fila`) no agregan padding, contenedor ni gutters: cada bloque
   trae su propio .av-contenedor. Alcance bajo .av-fila (lección L9). */
.av-fila,
.av-fila > .sppb-row-container,
.av-fila .sppb-container-inner,
.av-fila .sppb-row,
.av-fila .sppb-row-column,
.av-fila .sppb-col,
.av-fila .sppb-column,
.av-fila .sppb-column-addons,
.av-fila .sppb-addon-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
}
.av-fila .sppb-row {
  display: block;
}

.av-contenedor {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .av-contenedor {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .av-contenedor {
    padding-inline: 2rem;
  }
}

.av-titulo-seccion {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.av-icono {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.av-icono--chico {
  width: 0.875rem;
  height: 0.875rem;
}
.av-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Botones píldora ─────────────────────────────────────────────────────────────────────── */
/* La flecha se desplaza al pasar el mouse y el botón se hunde al apretarlo. */
.av-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.75rem 1.625rem;
  font-family: var(--av-fuente);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition:
    background-color 0.3s var(--av-ease-suave),
    color 0.3s var(--av-ease-suave),
    border-color 0.3s var(--av-ease-suave),
    transform 0.3s var(--av-ease-suave);
}
.av-btn:active {
  transform: scale(0.98);
}
.av-btn .av-icono {
  width: 1.125rem;
  height: 1.125rem;
}
.av-btn__flecha {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s var(--av-ease-suave);
}
.av-btn:hover .av-btn__flecha {
  transform: translate(0.125rem, -0.125rem);
}
.av-btn--chico {
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
}
body .av-btn--primario {
  background: var(--av-verde-600);
  color: #fff;
}
body .av-btn--primario:hover {
  background: var(--av-verde-800);
  color: #fff;
}
body .av-btn--trigo {
  background: var(--av-trigo-400);
  color: var(--av-verde-950);
}
body .av-btn--trigo:hover {
  background: var(--av-trigo-300);
  color: var(--av-verde-950);
}
body .av-btn--claro {
  background: #fff;
  color: var(--av-verde-950);
}
body .av-btn--claro:hover {
  background: var(--av-hueso-100);
  color: var(--av-verde-950);
}
body .av-btn--contorno-claro {
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
}
body .av-btn--contorno-claro:hover {
  border-color: #fff;
  background: #fff;
  color: var(--av-verde-950);
}
body .av-btn--contorno {
  border-color: var(--av-verde-600);
  color: var(--av-verde-700);
}
body .av-btn--contorno:hover {
  background: var(--av-verde-600);
  color: #fff;
}
body .av-btn--contorno-oscuro {
  border-color: var(--av-verde-950);
  color: var(--av-verde-950);
}
body .av-btn--contorno-oscuro:hover {
  background: var(--av-verde-950);
  color: #fff;
}

/* ── Cabecera en píldora (headers/av-pildora) ───────────────────────────────────────────── */
.av-cabezal {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 0.75rem 0;
}
@media (min-width: 640px) {
  .av-cabezal {
    padding: 1.25rem 1rem 0;
  }
}
.av-cabezal__pildora {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1400px;
  margin-inline: auto;
  border-radius: 999px;
  background: #fff;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
}
@media (min-width: 640px) {
  .av-cabezal__pildora {
    padding-left: 1.75rem;
  }
}
/* La sombra vive en un pseudo-elemento: al hacer scroll sólo se anima su opacidad. */
.av-cabezal__pildora::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 14px 40px -14px rgb(10 40 3 / 0.45);
  opacity: 0.6;
  pointer-events: none;
}
.av-cabezal__logo {
  display: block;
  flex-shrink: 0;
}
.av-cabezal__logo img {
  display: block;
  width: auto;
  height: 2.25rem;
}
@media (min-width: 640px) {
  .av-cabezal__logo img {
    height: 2.75rem;
  }
}
.av-cabezal__nav {
  display: none;
}
@media (min-width: 1024px) {
  .av-cabezal__nav {
    display: block;
  }
}
.av-cabezal__nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--av-verde-950);
}
/* Subrayado trigo que crece desde la izquierda; fijo en la página actual. */
.av-enlace-menu {
  position: relative;
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--av-verde-950);
}
.av-enlace-menu::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--av-trigo-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--av-ease-suave);
}
.av-enlace-menu:hover::after,
.av-enlace-menu[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}
.av-cabezal__acciones {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.av-cabezal__acciones .av-btn--chico {
  padding: 0.75rem 1.25rem;
}
.av-cabezal__boton-menu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--av-verde-950);
  cursor: pointer;
  transition: background-color 0.3s var(--av-ease-suave);
}
.av-cabezal__boton-menu:hover {
  background: var(--av-hueso-100);
}
.av-cabezal__boton-menu svg {
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 1024px) {
  .av-cabezal__boton-menu {
    display: none;
  }
}
.av-cabezal__movil {
  visibility: hidden;
  max-width: 1400px;
  margin: 0.5rem auto 0;
  border-radius: var(--av-radio-bloque);
  background: #fff;
  padding: 0.75rem;
  box-shadow: var(--av-sombra-profunda);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.3s var(--av-ease-suave),
    transform 0.3s var(--av-ease-suave),
    visibility 0.3s var(--av-ease-suave);
}
.av-cabezal__movil[data-abierto] {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.av-cabezal__movil ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 500;
}
.av-cabezal__movil a {
  display: block;
  border-radius: var(--av-radio-bloque);
  padding: 0.75rem 1rem;
  color: var(--av-verde-950);
  transition: background-color 0.3s var(--av-ease-suave);
}
.av-cabezal__movil a:hover,
.av-cabezal__movil a[aria-current='page'] {
  background: var(--av-hueso-100);
}
@media (min-width: 1024px) {
  .av-cabezal__movil {
    display: none;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────────────────────── */
.av-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--av-verde-950);
}
.av-hero__foto,
.av-hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.av-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% top;
}
.av-hero__velo {
  background:
    linear-gradient(to top, var(--av-verde-950) 0%, rgb(10 40 3 / 0.55) 45%, transparent 80%),
    linear-gradient(to right, rgb(10 40 3 / 0.85) 0%, rgb(10 40 3 / 0.35) 55%, transparent 100%);
}
.av-hero__cuerpo {
  display: grid;
  align-content: end;
  min-height: min(100dvh, 58rem);
  padding-top: 7rem;
  padding-bottom: 8rem;
}
@media (min-width: 640px) {
  .av-hero__cuerpo {
    padding-bottom: 10rem;
  }
}
.av-hero__texto {
  max-width: 50rem;
}
body .av-hero__titulo {
  padding-bottom: 0.25rem;
  font-size: clamp(3.5rem, 9.5vw, 6rem);
  font-weight: 500;
  line-height: 0.98;
  color: #fff;
}
.av-hero__titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--av-trigo-300);
}
.av-hero__bajada {
  max-width: 34rem;
  margin-top: 1.5rem !important;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.85);
}
@media (min-width: 640px) {
  .av-hero__bajada {
    font-size: 1.25rem;
  }
}
.av-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.av-hero__onda {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 4rem;
  color: #fff;
}
@media (min-width: 640px) {
  .av-hero__onda {
    height: 6rem;
  }
}
.av-hero__sello {
  position: absolute;
  right: 6%;
  bottom: 1.25rem;
  width: 6rem;
}
@media (min-width: 640px) {
  .av-hero__sello {
    bottom: 1.75rem;
    width: 10rem;
  }
}
.av-sello {
  display: block;
  width: 100%;
  color: var(--av-verde-600);
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 12px rgb(10 40 3 / 0.3));
}

/* ── Dónde vernos ────────────────────────────────────────────────────────────────────────── */
.av-vernos {
  padding-block: 3.5rem;
}
body .av-vernos__titulo {
  font-family: var(--av-fuente);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  color: var(--av-tinta-500);
}
.av-vernos__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .av-vernos__lista {
    gap: 2rem;
  }
}
.av-vernos__item {
  display: grid;
  place-content: center;
  width: 7rem;
  height: 7rem;
  border: 2px dashed rgb(34 112 15 / 0.4);
  border-radius: 999px;
  padding: 0.5rem;
  text-align: center;
  transition:
    border-color 0.3s var(--av-ease-suave),
    background-color 0.3s var(--av-ease-suave);
}
@media (min-width: 640px) {
  .av-vernos__item {
    width: 8rem;
    height: 8rem;
  }
}
a.av-vernos__item:hover {
  border-color: var(--av-verde-600);
  background: var(--av-verde-50);
}
.av-vernos__nombre {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--av-verde-800);
}
.av-vernos__detalle {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--av-tierra-500);
}

/* ── El canal ────────────────────────────────────────────────────────────────────────────── */
.av-canal {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .av-canal {
    padding-block: 7rem;
  }
}
.av-canal__grilla {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .av-canal__grilla {
    grid-template-columns: 1fr 1.6fr 1fr;
  }
}
.av-canal__foto {
  width: 16rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .av-canal__foto {
    width: 100%;
  }
}
.av-canal__foto--izq {
  transform: rotate(-3deg);
}
.av-canal__foto--der {
  transform: rotate(3deg);
}
.av-canal__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--av-radio-bloque);
  box-shadow: 0 20px 40px -18px rgb(10 40 3 / 0.45);
}
.av-canal__texto {
  text-align: center;
}
.av-canal__texto h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
.av-canal__texto p {
  max-width: 42rem;
  margin: 1.5rem auto 0;
}
.av-canal__texto p + p {
  margin-top: 1rem;
}
.av-canal__pilares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 36rem;
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
}
.av-canal__pilares li {
  border-radius: 999px;
  background: var(--av-hueso-100);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--av-verde-800);
}
.av-canal__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.av-canal__telefono {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}
.av-canal__telefono-icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--av-trigo-400);
  color: var(--av-verde-950);
}
.av-canal__telefono-rotulo {
  display: block;
  font-size: 0.875rem;
}
.av-canal__telefono-numero {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--av-verde-950);
}

/* ── Secciones (carrusel) ────────────────────────────────────────────────────────────────── */
.av-secciones {
  background: var(--av-hueso-100);
  padding-block: 5rem;
}
.av-secciones__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.av-secciones__controles {
  display: flex;
  gap: 0.5rem;
}
.av-secciones__control {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--av-verde-950);
  cursor: pointer;
  box-shadow: 0 6px 16px -10px rgb(10 40 3 / 0.4);
  transition:
    background-color 0.3s var(--av-ease-suave),
    color 0.3s var(--av-ease-suave);
}
.av-secciones__control:hover {
  background: var(--av-verde-600);
  color: #fff;
}
.av-icono--atras {
  transform: rotate(-135deg);
}
.av-icono--adelante {
  transform: rotate(45deg);
}
.av-secciones__ventana {
  margin: 2.5rem -1rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 1rem 1rem;
}
.av-secciones__ventana::-webkit-scrollbar {
  display: none;
}
.av-secciones__lista {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.av-secciones__item {
  flex-shrink: 0;
  width: 85%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .av-secciones__item {
    width: 60%;
  }
}
@media (min-width: 1024px) {
  .av-secciones__item {
    width: calc((100% - 2.5rem) / 2.4);
  }
}
.av-seccion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--av-radio-bloque);
  background: #fff;
  padding: 1.75rem;
}
.av-seccion h3 {
  font-family: var(--av-fuente-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
}
.av-seccion p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
.av-seccion .av-btn {
  margin-top: 1.5rem;
}
.av-seccion__foto {
  width: 7rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 0 0 8px var(--av-hueso-100);
}
@media (min-width: 640px) {
  .av-seccion__foto {
    width: 10rem;
  }
}

/* ── Uruguay de adentro (mosaico) ────────────────────────────────────────────────────────── */
.av-adentro {
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .av-adentro {
    padding-block: 7rem;
  }
}
.av-adentro__cabeza {
  max-width: 40rem;
}
.av-adentro__cabeza p {
  margin-top: 1.25rem;
}
.av-adentro__mosaico {
  display: grid;
  gap: 1rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .av-adentro__mosaico {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, minmax(15rem, 1fr));
  }
  .av-adentro__pieza--1 {
    grid-row: span 2;
  }
}
.av-adentro__pieza figure {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-950);
}
.av-adentro__pieza img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  transition: transform 0.7s var(--av-ease-suave);
}
.av-adentro__pieza:hover img {
  transform: scale(1.04);
}
.av-adentro__pieza figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 3.5rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgb(10 40 3 / 0.85), transparent);
}
.av-adentro__pieza h3 {
  font-family: var(--av-fuente-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  color: #fff;
}
.av-adentro__pieza--1 h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* ── Titular calado ──────────────────────────────────────────────────────────────────────── */
.av-calado {
  overflow: hidden;
}
.av-calado__texto {
  font-family: var(--av-fuente);
  font-size: clamp(3.5rem, 13vw, 12rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  background-size: cover;
  background-position: center 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.av-calado__texto span {
  font-size: 0.82em;
}

/* ── Videos ──────────────────────────────────────────────────────────────────────────────── */
.av-videos {
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .av-videos {
    padding-block: 7rem;
  }
}
.av-videos__titulo {
  text-align: center;
}
.av-videos__filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.av-filtro {
  border: 2px solid rgb(34 112 15 / 0.3);
  border-radius: 999px;
  background: transparent;
  padding: 0.5rem 1.25rem;
  font-family: var(--av-fuente);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--av-verde-800);
  cursor: pointer;
  transition:
    border-color 0.3s var(--av-ease-suave),
    background-color 0.3s var(--av-ease-suave),
    color 0.3s var(--av-ease-suave);
}
.av-filtro:hover {
  border-color: var(--av-verde-600);
}
.av-filtro[aria-pressed='true'] {
  border-color: var(--av-verde-600);
  background: var(--av-verde-600);
  color: #fff;
}
/* Widget de Elfsight: se carga diferido; el alto mínimo evita que el resto de la página salte. */
.av-videos__widget {
  margin-top: 2.5rem;
  min-height: 24rem;
}
.av-videos__lista {
  display: grid;
  gap: 2.5rem 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .av-videos__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .av-videos__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}
.av-videos__lista > li[hidden] {
  display: none;
}
.av-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-950);
}
.av-video__boton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.av-video__boton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 40 3 / 0.6), transparent);
}
.av-video__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--av-ease-suave);
}
.av-video__boton:hover .av-video__img {
  transform: scale(1.05);
}
.av-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--av-trigo-400);
  color: var(--av-verde-950);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.3), 0 10px 24px -10px rgb(10 40 3 / 0.6);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--av-ease-suave);
}
.av-video__boton:hover .av-video__play {
  transform: translate(-50%, -50%) scale(1.1);
}
.av-video__play .av-icono {
  width: 1.5rem;
  height: 1.5rem;
  transform: translateX(0.125rem);
}
.av-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.av-videos__nombre {
  margin-top: 1rem !important;
  font-size: 1.25rem;
}
.av-videos__meta {
  margin-top: 0.25rem !important;
  font-size: 0.875rem;
  color: var(--av-tierra-500);
}
.av-videos__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
}
.av-videos__acciones [hidden] {
  display: none;
}

/* ── De Pago en Pago ─────────────────────────────────────────────────────────────────────── */
.av-depago {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .av-depago {
    padding-block: 7rem;
  }
}
.av-depago__fondo,
.av-depago__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.av-depago__fondo {
  object-fit: cover;
  /* Alineada arriba: en la foto de los conductores el recorte tiene que perder el piso, no las cabezas. */
  object-position: center top;
}
.av-depago__velo {
  background: linear-gradient(to right, rgb(10 40 3 / 0.4), transparent);
}
.av-depago__tarjeta {
  max-width: 32rem;
  box-sizing: border-box;
  border-radius: var(--av-radio-bloque);
  background: var(--av-trigo-400);
  padding: 2rem;
  box-shadow: 0 30px 60px -24px rgb(10 40 3 / 0.55);
}
@media (min-width: 640px) {
  .av-depago__tarjeta {
    padding: 2.5rem;
  }
}
.av-depago__logo {
  display: block;
  width: auto;
  height: 6rem;
}
.av-depago__descripcion {
  margin-top: 1.5rem !important;
  color: rgb(10 40 3 / 0.85);
}
.av-depago__datos {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--av-verde-950);
}
.av-depago__datos li {
  display: flex;
  gap: 0.75rem;
}
.av-depago__datos .av-icono {
  margin-top: 0.25rem;
}
.av-depago .av-btn {
  margin-top: 2rem;
}

/* Franja horizontal: la foto se ve entera arriba y el contenido se reparte en una banda abajo. */
.av-depago--horizontal {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(34rem, 52vw, 46rem);
  padding-block: 0;
  padding-top: min(52vw, 24rem);
}
.av-depago--horizontal .av-depago__velo {
  background: linear-gradient(to top, rgb(10 40 3 / 0.55), transparent 55%);
}
.av-depago--horizontal .av-contenedor {
  width: 100%;
  padding-bottom: 1.5rem;
}
.av-depago--horizontal .av-depago__tarjeta {
  max-width: none;
  padding: 1.5rem;
}
@media (min-width: 1024px) {
  .av-depago--horizontal .av-depago__tarjeta {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      'logo texto datos'
      'logo boton datos';
    align-items: center;
    column-gap: 2.5rem;
    padding: 1.5rem 2.5rem;
  }
  .av-depago--horizontal .av-depago__titulo {
    grid-area: logo;
  }
  .av-depago--horizontal .av-depago__descripcion {
    grid-area: texto;
    margin-top: 0 !important;
  }
  .av-depago--horizontal .av-depago__datos {
    grid-area: datos;
    margin-top: 0;
    gap: 0.5rem;
    font-size: 0.9375rem;
  }
  .av-depago--horizontal .av-btn {
    grid-area: boton;
    justify-self: start;
    margin-top: 1rem;
  }
}
.av-depago--horizontal .av-depago__logo {
  height: 5rem;
}
/* Portada de un programa: la foto absorbe también el banner (migas + título arriba). */
.av-depago.av-depago--portada {
  min-height: clamp(36rem, 56vw, 52rem);
  padding-top: 0;
}
.av-depago.av-depago--portada .av-depago__velo {
  background:
    linear-gradient(to bottom, rgb(10 40 3 / 0.7), transparent 38%),
    linear-gradient(to top, rgb(10 40 3 / 0.5), transparent 40%);
}
.av-depago__cabecera {
  margin-block: 8rem auto;
  padding-inline: 1.5rem;
  text-align: center;
}
body .av-depago__cabecera h1 {
  margin-top: 0.75rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
@media (max-width: 1023px) {
  .av-depago.av-depago--portada {
    padding-top: 0;
  }
  /* En mobile la foto va en una franja 16:9 arriba; migas y título quedan sobre ella. */
  .av-depago.av-depago--portada {
    --av-alto-portada: max(70vw, 17rem);
    padding-top: var(--av-alto-portada);
  }
  .av-depago.av-depago--portada .av-depago__fondo {
    height: var(--av-alto-portada);
  }
  .av-depago.av-depago--portada .av-depago__velo {
    display: block;
    height: var(--av-alto-portada);
    background: linear-gradient(to bottom, rgb(10 40 3 / 0.75), rgb(10 40 3 / 0.2));
  }
  .av-depago__cabecera {
    position: absolute;
    inset: 0 0 auto;
    height: var(--av-alto-portada);
    margin: 0;
    padding: 4.5rem 1rem 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  body .av-depago__cabecera h1 {
    margin-top: 0.25rem;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

/* Mobile: la foto entera (16:9) arriba y el contenido debajo, sin tapar a nadie. */
@media (max-width: 1023px) {
  .av-depago--horizontal {
    min-height: 0;
    padding-top: 56.25vw;
    background: var(--av-trigo-400);
  }
  .av-depago--horizontal .av-depago__fondo {
    height: 56.25vw;
  }
  .av-depago--horizontal .av-depago__velo {
    display: none;
  }
  .av-depago--horizontal .av-contenedor {
    padding: 0;
  }
  .av-depago--horizontal .av-depago__tarjeta {
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem 1rem 2rem;
  }
}

/* ── Grilla de programación ──────────────────────────────────────────────────────────────── */
.av-grilla {
  background: var(--av-hueso-100);
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .av-grilla {
    padding-block: 7rem;
  }
}
.av-grilla__grilla {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .av-grilla__grilla {
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
  }
}
.av-grilla__texto p {
  max-width: 32rem;
  margin-top: 1.25rem;
}
.av-grilla__vigencia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--av-verde-800);
}
.av-grilla__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.av-grilla__figura {
  margin: 0;
}
.av-grilla__ampliar {
  position: relative;
  display: block;
  width: 100%;
  max-height: 34rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--av-radio-bloque);
  background: #fff;
  padding: 0;
  cursor: zoom-in;
  box-shadow: 0 24px 50px -28px rgb(10 40 3 / 0.5);
}
.av-grilla__img {
  display: block;
  width: 100%;
  height: auto;
}
/* La grilla es alta: se muestra la primera parte y se sugiere ampliarla. */
.av-grilla__ampliar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 8rem;
  background: linear-gradient(to top, #fff, transparent);
}
.av-grilla__lupa {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--av-verde-950);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transform: translateX(-50%);
  transition: background-color 0.3s var(--av-ease-suave);
}
.av-grilla__ampliar:hover .av-grilla__lupa {
  background: var(--av-verde-600);
}
/* Visor ampliado: <div> fijo y no <dialog> (lección L10: el header de Helix le ganaba). */
.av-grilla__visor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgb(10 40 3 / 0.92);
  padding: 4.5rem 1rem 1rem;
  overscroll-behavior: contain;
}
.av-grilla__visor[hidden] {
  display: none;
}
.av-grilla__lienzo {
  width: 100%;
  max-width: 64rem;
  max-height: 100%;
  overflow: auto;
  border-radius: var(--av-radio-bloque);
  background: #fff;
}
.av-grilla__lienzo img {
  display: block;
  width: 100%;
  height: auto;
}
.av-grilla__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--av-verde-950);
  cursor: pointer;
}
.av-grilla__cerrar .av-icono {
  width: 1.5rem;
  height: 1.5rem;
}
body.av-sin-scroll {
  overflow: hidden;
}

/* ── Ver en vivo (se monta sobre el pie) ─────────────────────────────────────────────────── */
.av-vivo {
  position: relative;
  z-index: 10;
  margin-bottom: -6rem;
  padding-top: 5rem;
}
.av-vivo__banda {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-700);
  padding: 2rem;
}
@media (min-width: 640px) {
  .av-vivo__banda {
    padding: 3rem;
  }
}
@media (min-width: 1024px) {
  .av-vivo__banda {
    grid-template-columns: 1.4fr 1fr;
  }
}
.av-vivo__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  mix-blend-mode: luminosity;
}
body .av-vivo h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: #fff;
}
.av-vivo__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .av-vivo__botones {
    justify-content: flex-end;
  }
}

/* ── Pie (parámetro before_body de Helix: queda fuera de <main>) ──────────────────────────── */
/* El cuerpo va por encima del pie: así la banda "en vivo" se monta sobre él. Helix pone
   overflow: hidden en .body-innerwrapper, que la recortaba: clip en x evita el scroll
   horizontal sin crear un contenedor que corte en vertical. */
.body-wrapper {
  position: relative;
  z-index: 1;
}
.body-innerwrapper {
  overflow-x: clip;
  overflow-y: visible;
}
.av-pie {
  position: relative;
  z-index: 0;
  background: var(--av-verde-950);
  color: var(--av-verde-100);
}
.av-pie__onda {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2.5rem;
  color: #fff;
}
@media (min-width: 640px) {
  .av-pie__onda {
    height: 3.5rem;
  }
}
.av-pie__grilla {
  display: grid;
  gap: 3rem;
  padding-top: 9rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) {
  .av-pie__grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .av-pie__grilla {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}
.av-pie__logo {
  display: block;
  width: auto;
  height: 3.5rem;
}
.av-pie__marca p {
  max-width: 24rem;
  margin-top: 1.5rem;
  color: rgb(225 239 218 / 0.8);
}
.av-pie__redes {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.av-pie__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transition:
    background-color 0.3s var(--av-ease-suave),
    color 0.3s var(--av-ease-suave);
}
.av-pie__redes a:hover {
  background: var(--av-trigo-400);
  color: var(--av-verde-950);
}
.av-pie__redes svg {
  width: 1.25rem;
  height: 1.25rem;
}
body .av-pie h2 {
  font-size: 1.125rem;
  color: #fff;
}
.av-pie__lista {
  display: grid;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.av-pie__lista a:hover {
  color: var(--av-trigo-400);
}
.av-pie__contacto a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-wrap: anywhere;
}
.av-pie__contacto svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--av-trigo-400);
}
.av-pie__legal {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.av-pie__legal p {
  padding-block: 1.5rem;
  font-size: 0.875rem;
  color: rgb(225 239 218 / 0.7);
}

/* ── Contacto: banner, vías y formulario ─────────────────────────────────────────────────── */
.av-banner {
  padding: 0;
}
/* A todo el ancho de la pantalla y pegado arriba: la cabecera flotante queda sobre la foto. */
.av-banner__caja {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 34vw, 28rem);
  width: 100%;
  overflow: hidden;
  background: var(--av-verde-950);
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}
.av-banner__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.45;
}
.av-banner__migas {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.av-banner__migas a:hover {
  color: var(--av-trigo-400);
}
/* Sin foto: verde sólido como el pie, con tres ondas que suben desde abajo y cierran en blanco. */
.av-banner--solido .av-banner__caja {
  background: var(--av-verde-950);
}
.av-banner__ondas {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  width: 100%;
  height: 70%;
  color: var(--av-trigo-400);
}
.av-banner__onda--1 {
  fill: var(--av-verde-800);
  opacity: 0.5;
}
.av-banner__onda--2 {
  fill: currentColor;
  opacity: 0.12;
}
.av-banner__onda--3 {
  fill: #fff;
}
body .av-banner h1 {
  margin-top: 0.75rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.av-vias {
  padding-block: 4rem;
}
.av-vias__lista {
  display: grid;
  margin-block: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .av-vias__lista {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .av-vias__lista > li + li {
    border-left: 1px solid var(--av-hueso-200);
  }
}
@media (max-width: 767px) {
  .av-vias__lista > li + li {
    border-top: 1px solid var(--av-hueso-200);
  }
}
.av-via {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  transition: background-color 0.3s var(--av-ease-suave);
}
a.av-via:hover {
  background: var(--av-hueso-50);
}
.av-via__icono {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--av-trigo-400);
  color: var(--av-verde-950);
}
.av-via__titulo {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--av-verde-950);
}
.av-via__dato {
  display: block;
  margin-top: 0.125rem;
  overflow-wrap: anywhere;
}

/* Fila del formulario: texto + ajax_contact a la izquierda, foto a la derecha. */
.av-fila--formulario {
  background: var(--av-hueso-100);
}
.av-fila--formulario .sppb-row {
  display: grid !important;
  /* A sangre: el fondo y la foto llegan a los dos bordes; el contenido se centra con el padding de la columna. */
  max-width: none !important;
  margin-inline: 0 !important;
}
@media (min-width: 1024px) {
  .av-fila--formulario .sppb-row {
    grid-template-columns: 1.2fr 1fr;
  }
}
.av-fila--formulario .sppb-column.av-col-formulario {
  box-sizing: border-box;
  padding: 4rem 1rem !important;
}
@media (min-width: 640px) {
  .av-fila--formulario .sppb-column.av-col-formulario {
    padding: 4rem 2rem !important;
  }
}
@media (min-width: 1024px) {
  .av-fila--formulario .sppb-column.av-col-formulario {
    padding: 6rem 4rem 6rem max(2rem, calc((100vw - 1320px) / 2 + 2rem)) !important;
  }
}
/* La foto llena la altura de la fila en escritorio. */
.av-fila--formulario .av-col-foto,
.av-fila--formulario .av-col-foto .sppb-column-addons,
.av-fila--formulario .av-col-foto .sppb-addon-wrapper,
.av-fila--formulario .av-col-foto .sppb-addon-wrapper > div {
  height: 100%;
}
/* Respiro blanco antes de la onda del pie (en el prototipo, el div h-24). */
.av-fila.av-fila--formulario {
  margin-bottom: 6rem !important;
}
.av-texto p {
  max-width: 36rem;
  margin-top: 1rem;
}
.av-foto {
  height: 100%;
  margin: 0;
}
.av-foto img {
  display: block;
  width: 100%;
  height: 18rem;
  object-fit: cover;
}
@media (min-width: 640px) {
  .av-foto img {
    height: 24rem;
  }
}
@media (min-width: 1024px) {
  .av-foto img {
    height: 100%;
  }
}

/* ajax_contact de SPPB con los estilos del sitio (custom.js le arregla los label). */
.av-fila--formulario .sppb-addon-ajax-contact {
  margin-top: 2.5rem;
}
.av-fila--formulario .sppb-ajaxt-contact-form .sppb-row {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .av-fila--formulario .sppb-ajaxt-contact-form .sppb-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .av-fila--formulario .sppb-ajaxt-contact-form .sppb-form-group:has(textarea) {
    grid-column: 1 / -1;
  }
}
.av-fila--formulario .sppb-form-group {
  display: grid;
  gap: 0.375rem;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.av-fila--formulario .sppb-form-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--av-verde-950);
}
.av-fila--formulario .sppb-form-control {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 3.25rem;
  border: 0;
  border-radius: var(--av-radio-bloque);
  background: #fff;
  padding: 1rem 1.25rem;
  font-family: var(--av-fuente);
  font-size: 1rem;
  color: var(--av-verde-950);
  box-shadow: inset 0 0 0 1px rgb(10 40 3 / 0.12);
  transition: box-shadow 0.2s var(--av-ease-suave);
}
.av-fila--formulario .sppb-form-control::placeholder {
  color: rgb(76 87 73 / 0.75);
}
.av-fila--formulario .sppb-form-control:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--av-verde-600);
}
.av-fila--formulario .sppb-form-button {
  margin-top: 1.5rem;
}
.av-fila--formulario .sppb-form-button .sppb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  border-radius: 999px;
  background: var(--av-verde-600);
  padding: 0.875rem 1.75rem;
  font-family: var(--av-fuente);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s var(--av-ease-suave);
}
.av-fila--formulario .sppb-form-button .sppb-btn:hover {
  background: var(--av-verde-800);
}
.av-fila--formulario .sppb-ajax-contact-status[data-av-avisado] {
  display: none !important;
}
.av-fila--formulario .sppb-ajax-contact-status {
  margin-top: 1rem !important;
  font-weight: 700;
  color: var(--av-verde-800);
}

/* Aviso de envío del formulario (lo arma custom.js a partir del estado del addon de SPPB). */
.av-contacto-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-100);
  color: var(--av-verde-950);
  animation: av-entrada 0.4s var(--av-ease-suave) both;
}
.av-contacto-aviso--error {
  background: #fdecea;
  color: #5c1410;
}
.av-contacto-aviso__icono {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
}
.av-contacto-aviso__titulo {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
}
.av-contacto-aviso a {
  font-weight: 700;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .av-contacto-aviso {
    animation: none;
  }
}

/* Espacio para que el pie respire debajo de páginas sin la banda en vivo. */
.av-respiro {
  height: 6rem;
}

/* ── Movimiento ──────────────────────────────────────────────────────────────────────────── */
/* Curva única: arranca rápido y frena suave. Todo se apaga con prefers-reduced-motion, y lo
   atado al scroll sólo corre donde hay animation-timeline (si no, se ve quieto y completo).
   El timeline va SIEMPRE por variable: si va literal, un minificador lo funde en el shorthand
   `animation`, donde es inválido, y el navegador descarta la animación (lección L11). */
@keyframes av-entrada {
  from {
    opacity: 0;
    transform: translateY(1rem);
    filter: blur(6px);
  }
}
@keyframes av-asentar {
  from {
    transform: scale(1.07);
  }
}
@keyframes av-paralaje {
  to {
    transform: translateY(18%);
  }
}
@keyframes av-cabezal-subir {
  to {
    transform: translateY(-0.5rem);
  }
}
@keyframes av-cabezal-sombra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes av-calado-correr {
  from {
    background-position: center 10%;
  }
  to {
    background-position: center 80%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .av-entrada {
    animation: av-entrada 0.9s var(--av-ease-suave) both;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms);
  }
  .av-hero__img {
    animation: av-asentar 1.8s var(--av-ease-suave) both;
  }

  @supports (animation-timeline: view()) {
    .av-hero__foto {
      --av-linea-vista: view();
      animation: av-paralaje linear both;
      animation-timeline: var(--av-linea-vista);
      animation-range: exit 0% exit 100%;
    }
    .av-calado__texto {
      --av-linea-vista: view();
      animation: av-calado-correr linear both;
      animation-timeline: var(--av-linea-vista);
    }
  }

  @supports (animation-timeline: scroll()) {
    .av-cabezal {
      --av-linea-scroll: scroll(root);
      animation: av-cabezal-subir linear both;
      animation-timeline: var(--av-linea-scroll);
      animation-range: 0 12rem;
    }
    .av-cabezal__pildora::after {
      --av-linea-scroll: scroll(root);
      animation: av-cabezal-sombra linear both;
      animation-timeline: var(--av-linea-scroll);
      animation-range: 0 12rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .av-cabezal__movil,
  .av-btn,
  .av-video__img,
  .av-adentro__pieza img {
    transition: none;
  }
}

/* ── Programación semanal (av_programacion) ─────────────────────────────────────────────── */
/* Escritorio: 7 columnas; cada fila vale 15 minutos y cada bloque ocupa las filas que dura,
   así el alto es proporcional. Mobile: pestañas de días y lista del día. Sin JS se ve toda la
   semana apilada. Un solo acento (trigo): estrenos y línea de "ahora". */
.av-prog {
  --av-prog-fila: 1.5rem;
  padding-block: 2.5rem 5rem;
}
.av-prog__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.av-prog__vigencia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--av-verde-800);
}
.av-prog__ahora {
  font-size: 0.9375rem;
  color: var(--av-tinta-700);
}
.av-prog__ahora:empty {
  display: none;
}
.av-prog__ahora strong {
  color: var(--av-verde-800);
}
.av-prog__dias {
  display: none;
}
.av-prog__semana {
  display: grid;
  gap: 2rem;
}
.av-prog__riel {
  display: none;
}
.av-prog__dia {
  min-width: 0;
}
.av-prog__encabezado {
  margin: 0;
  font-family: var(--av-fuente);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--av-verde-950);
}
.av-prog__bloques,
.av-prog__horas {
  margin: 0;
  padding: 0;
  list-style: none;
}
.av-bloque {
  display: grid;
  grid-template-columns: 6.25rem 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  border-top: 1px solid var(--av-hueso-200);
  padding: 0.875rem 0.5rem;
  color: var(--av-tinta-700);
}
.av-bloque__hora {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--av-verde-800);
}
.av-bloque__nombre {
  font-weight: 600;
  color: var(--av-verde-950);
}
.av-bloque__estreno,
.av-bloque__ahora {
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.av-bloque__estreno {
  background: var(--av-trigo-300);
  color: var(--av-verde-950);
}
.av-bloque__ahora {
  display: none;
  background: var(--av-verde-950);
  color: #fff;
}
.av-bloque[aria-current='time'] {
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-100);
}
.av-bloque[aria-current='time'] .av-bloque__ahora {
  display: inline-block;
}

/* Mobile con JS: una pestaña por día y solo se ve el día activo. */
.av-prog--js .av-prog__dias {
  display: flex;
  gap: 0.5rem;
  margin: 0 -1rem 1.5rem;
  padding: 0.25rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.av-prog--js .av-prog__boton-dia {
  flex-shrink: 0;
  scroll-snap-align: center;
}
.av-prog--js .av-prog__dia:not([data-activo]) {
  display: none;
}
.av-prog--js .av-prog__dia > .av-prog__encabezado {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.av-prog--js .av-prog__semana {
  display: block;
}

@media (min-width: 1024px) {
  .av-prog {
    padding-block: 3rem 7rem;
  }
  /* La semana entera cabe: pestañas fuera y todos los días a la vista. */
  .av-prog--js .av-prog__dias {
    display: none;
  }
  .av-prog--js .av-prog__dia:not([data-activo]) {
    display: grid;
  }
  .av-prog--js .av-prog__dia > .av-prog__encabezado {
    position: sticky;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .av-prog__semana,
  .av-prog--js .av-prog__semana {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr));
    gap: 0 0.375rem;
  }
  .av-prog__riel,
  .av-prog__dia {
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .av-prog__encabezado {
    position: sticky;
    top: var(--av-alto-cabezal);
    z-index: 3;
    display: grid;
    place-items: center;
    height: 3rem;
    margin-bottom: 0.375rem;
    border-radius: var(--av-radio-bloque);
    background: var(--av-verde-800);
    font-size: 1rem;
    color: #fff;
  }
  .av-prog__riel > .av-prog__encabezado {
    background: transparent;
  }
  .av-prog__dia[data-hoy] > .av-prog__encabezado {
    background: var(--av-trigo-400);
    color: var(--av-verde-950);
  }
  .av-prog__bloques,
  .av-prog__horas {
    position: relative;
    display: grid;
    grid-template-rows: repeat(96, var(--av-prog-fila));
    gap: 2px 0;
  }
  .av-prog__horas li,
  .av-bloque {
    grid-row: var(--r1) / var(--r2);
  }
  .av-prog__horas li {
    align-self: start;
    transform: translateY(-0.55em);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    color: var(--av-tinta-500);
  }
  .av-prog__horas .av-prog__hora-cabal {
    font-weight: 700;
    color: var(--av-verde-800);
  }
  .av-bloque {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-height: 0;
    overflow: hidden;
    border-top: 0;
    border-radius: var(--av-radio-bloque);
    background: var(--av-hueso-100);
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.25;
  }
  .av-bloque--largo {
    background: var(--av-verde-50);
  }
  .av-bloque--estreno {
    background: var(--av-trigo-100);
  }
  .av-bloque__hora {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--av-tinta-500);
  }
  .av-bloque--corto .av-bloque__hora {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .av-bloque--largo .av-bloque__nombre {
    position: sticky;
    top: calc(var(--av-alto-cabezal) + 4rem);
  }
  .av-bloque__estreno {
    align-self: flex-start;
    margin-top: auto;
  }
  .av-bloque[aria-current='time'] {
    background: var(--av-verde-700);
    color: #fff;
  }
  .av-bloque[aria-current='time'] .av-bloque__nombre,
  .av-bloque[aria-current='time'] .av-bloque__hora {
    color: #fff;
  }
  .av-bloque[aria-current='time'] .av-bloque__ahora {
    align-self: flex-start;
    margin-top: auto;
    background: var(--av-trigo-400);
    color: var(--av-verde-950);
  }
  .av-prog__bloques[data-linea]::after {
    content: '';
    position: absolute;
    top: calc(var(--ahora-filas) * var(--av-prog-fila));
    right: -0.25rem;
    left: -0.25rem;
    z-index: 2;
    height: 2px;
    background: var(--av-trigo-500);
    pointer-events: none;
  }
}

/* ── Ahora en A+V (av_ahora) ────────────────────────────────────────────────────────────── */
.av-ahora {
  padding-block: 4rem 0;
}
.av-ahora__caja {
  display: grid;
  gap: 2rem;
  border-radius: var(--av-radio-bloque);
  background: var(--av-verde-950);
  padding: 2rem;
  color: var(--av-verde-100);
}
@media (min-width: 640px) {
  .av-ahora__caja {
    padding: 3rem;
  }
}
@media (min-width: 1024px) {
  .av-ahora__caja {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}
body .av-ahora h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-family: var(--av-fuente);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--av-verde-200);
}
.av-ahora__punto {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--av-trigo-400);
  animation: av-latido 2s ease-in-out infinite;
}
@keyframes av-latido {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .av-ahora__punto {
    animation: none;
  }
}
.av-ahora__programa {
  margin-top: 1rem;
  font-family: var(--av-fuente-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.av-ahora__horario {
  margin-top: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--av-trigo-300);
}
.av-ahora__barra {
  height: 0.375rem;
  margin-top: 1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}
.av-ahora__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--av-trigo-400);
  transition: width 1s var(--av-ease-suave);
}
.av-ahora__sigue {
  margin-top: 1rem;
  font-size: 0.9375rem;
}
.av-ahora__sigue strong {
  color: #fff;
}
.av-ahora__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.av-ahora__acciones .av-btn {
  justify-content: center;
  white-space: normal;
  text-align: center;
}

/* ── Widget de Elfsight (YouTube Gallery) con la estética del sitio ─────────────────────── */
/* Todo cuelga de .av-videos__widget: si Elfsight cambia sus clases, el widget vuelve a su
   aspecto original y la página sigue andando. Colores y cantidad de videos del widget se
   cambian en el panel de Elfsight; acá solo lo que el panel no permite. */
.av-videos__widget .yottie-widget-header {
  display: none;
}
.av-videos__widget .yottie-widget,
.av-videos__widget .yottie-widget * {
  font-family: var(--av-fuente) !important;
}
.av-videos__widget .yottie-widget-video-preview-thumbnail,
.av-videos__widget .yottie-widget-video-preview-thumbnail img,
.av-videos__widget .yottie-widget-video-overlay {
  border-radius: var(--av-radio-bloque) !important;
}
.av-videos__widget .yottie-widget-video-preview-thumbnail img {
  transition: transform 0.6s var(--av-ease-suave);
}
.av-videos__widget .yottie-widget-video:hover .yottie-widget-video-preview-thumbnail img {
  transform: scale(1.04);
}
/* Botón de play: verde del logo y no el rojo de YouTube. */
.av-videos__widget .yottie-widget-video-preview-play .maincolor {
  fill: var(--av-verde-600) !important;
}
.av-videos__widget .yottie-widget-video-preview-play .subcolor {
  fill: #fff !important;
}
.av-videos__widget .yottie-widget-video-preview-marker-duration {
  border-radius: 999px !important;
  background: var(--av-verde-950) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-variant-numeric: tabular-nums;
}
.av-videos__widget .yottie-widget-video-info-title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--av-verde-950) !important;
}
.av-videos__widget .yottie-widget-video-info-title:hover {
  color: var(--av-verde-600) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.av-videos__widget .yottie-widget-video-info-properties,
.av-videos__widget .yottie-widget-video-info-properties * {
  font-size: 0.8125rem !important;
  color: var(--av-tinta-500) !important;
}
.av-videos__widget .yottie-widget-feed-section-arrow {
  border-radius: 999px !important;
  background: var(--av-verde-600) !important;
  color: #fff !important;
}
.av-videos__widget .yottie-widget-feed-section-arrow:hover {
  background: var(--av-verde-700) !important;
}
.av-videos__widget a:focus-visible,
.av-videos__widget button:focus-visible {
  outline: 3px solid var(--av-trigo-400);
  outline-offset: 2px;
}

/* El widget es un slider vertical (2 "páginas" de 80 videos y una flecha que desliza entre
   ellas): se desactiva el deslizamiento interno y se muestran los primeros 12 videos. El resto
   está en el botón "Canal de YouTube". Si Elfsight cambia sus clases, vuelve a su aspecto. */
.av-videos__widget .yottie-widget-feed-section-inner {
  height: auto !important;
  overflow: visible !important;
}
.av-videos__widget .swiper-wrapper {
  height: auto !important;
  transform: none !important;
}
.av-videos__widget .swiper-slide:nth-child(n + 2),
.av-videos__widget .yottie-widget-video:nth-child(n + 13),
.av-videos__widget .yottie-widget-feed-section-arrow,
.av-videos__widget .yottie-widget-feed-section-loader {
  display: none !important;
}

/* ── Botón flotante de WhatsApp (en el pie, así sale en todas las páginas) ─────────────── */
.av-whatsapp {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  border-radius: 999px;
  background: var(--av-verde-600);
  padding: 0 1rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  box-shadow: var(--av-sombra-profunda);
  transition:
    background-color 0.3s var(--av-ease-suave),
    transform 0.3s var(--av-ease-suave);
}
body .av-whatsapp:hover {
  background: var(--av-verde-700);
  color: #fff;
}
.av-whatsapp:active {
  transform: scale(0.97);
}
.av-whatsapp svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
/* En mobile es solo el ícono; el texto aparece desde tablet. */
.av-whatsapp__texto {
  display: none;
}
@media (min-width: 640px) {
  .av-whatsapp {
    bottom: 1.5rem;
    left: 1.5rem;
    padding: 0 1.5rem 0 1rem;
  }
  .av-whatsapp__texto {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  .av-whatsapp {
    transition: none;
  }
}

/* ── AV: links de programa y horarios de un programa ─────────────────────────────────────── */
.av-bloque__enlace,
.av-ahora__programa a,
.av-ahora__sigue a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--av-trigo-500, currentColor);
  text-underline-offset: 0.2em;
}
.av-bloque__enlace:hover,
.av-ahora__programa a:hover,
.av-ahora__sigue a:hover {
  text-decoration-thickness: 2px;
}

.av-horarios {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.av-horarios__vivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block: 1.5rem;
  border-radius: var(--av-radio-bloque, 1.5rem);
  padding: 1.25rem 1.5rem;
  background: var(--av-verde-800);
  color: #fff;
}
.av-horarios__vivo[hidden] {
  display: none;
}
.av-horarios__vivo p {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-weight: 700;
  font-size: 1.125rem;
}
.av-horarios__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.av-horarios__dia {
  border-radius: var(--av-radio-bloque, 1.5rem);
  padding: 1.25rem 1.5rem;
  background: var(--av-hueso-100, #f4f3ea);
}
.av-horarios__nombre {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--av-verde-950);
}
.av-horarios__horas {
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}
.av-horarios__horas li[aria-current='time'] {
  font-weight: 700;
  color: var(--av-verde-800);
}
.av-horarios__estreno {
  margin-left: 0.25rem;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  background: var(--av-trigo-300);
  color: var(--av-verde-950);
}

/* ── AV: franja de redes de una página de programa ───────────────────────────────────────── */
.av-fila--redes {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.av-fila--redes .sppb-row {
  max-width: 80rem !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}
.av-fila--redes .sppb-addon-button-group .sppb-addon-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
body .av-fila--redes .sppb-btn {
  border: 2px solid var(--av-verde-800);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  background: transparent;
  font-weight: 600;
  color: var(--av-verde-800);
}
body .av-fila--redes .sppb-btn:hover {
  background: var(--av-verde-800);
  color: #fff;
}

/* ── AV: reCAPTCHA v3 sin badge flotante (el aviso legal va junto al formulario) ─────────── */
.grecaptcha-badge {
  visibility: hidden;
}
.av-recaptcha__aviso {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--av-tinta-700);
}
.av-recaptcha__aviso a {
  text-decoration: underline;
}