/* ==========================================================================
   Landing: Productores MX (Hortifrut Genetics)
   --------------------------------------------------------------------------
   Solo lo específico de esta landing. Lo común está en _comun/base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lpg-hero {
  position: relative;
  background: url('img/patron-berries.webp') center / cover no-repeat, var(--blanco);
  padding-block: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.lpg-hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .lpg-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: start;
  }
}

/* Cada slide apila sus 3 elementos (texto superior, imagen "MÁS", texto
   inferior) centrados dentro de su propia columna, que es la mitad izquierda
   del hero: el formulario ocupa la otra mitad y no entra en este centrado.

   --hero-sup es el tamaño del texto superior. El inferior se calcula a partir
   de él, así la proporción 1.5x se mantiene en cualquier ancho de pantalla. */
.lpg-slide {
  --hero-sup: clamp(1.5rem, 1rem + 2.2vw, 2.9rem);

  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* El slide de zarzamora usa el morado del arte en lugar del rojo */
.lpg-slide--mora { --color-slide: #3d1030; }

.lpg .lpg-hero__eyebrow {
  font-family: var(--font-display);   /* Hagrid */
  font-weight: 400;
  font-style: italic;
  color: var(--color-slide, var(--rojo));
  font-size: var(--hero-sup);
  line-height: 1;
  margin-bottom: 0.15em;
}

.lpg-hero__word { width: 100%; height: auto; }

.lpg .lpg-hero__claim {
  font-family: var(--font-texto);     /* Geomanist Black */
  font-weight: 900;
  color: var(--color-slide, var(--rojo));
  font-size: calc(var(--hero-sup) * 1.5);
  line-height: 1;
  margin-top: 0.1em;
}

/* --------------------------------------------------------------------------
   Franja crema
   -------------------------------------------------------------------------- */
.lpg-claim-band {
  background: var(--crema);
  padding-block: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
}
.lpg-claim-band__inner {
  display: grid;
  justify-items: center;
  gap: clamp(1.2rem, 0.8rem + 1.6vw, 2rem);
}

/* --------------------------------------------------------------------------
   Banda "El mercado demanda"
   -------------------------------------------------------------------------- */
/* --asomo: cuánto sobresale el sombrero por encima de la banda.
   La imagen viene recortada al contenido (1px de margen arriba), así que este
   valor es literal: lo que se pone es lo que se ve.
   Sin overflow:hidden, si no el recorte se comería justo ese asomo. */
.lpg-mercado {
  --asomo: 25px;

  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 14rem + 22vw, 26rem);
  display: grid;
}
.lpg-mercado__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lpg-mercado__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Ya no hay velo sobre toda la banda: el contraste lo da el fondo del propio
   panel de texto, así la fotografía se ve limpia. */

.lpg-mercado__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;          /* el panel queda centrado en la banda */
  padding-block: clamp(1.5rem, 1rem + 2vw, 2rem);
}
@media (min-width: 62rem) {
  .lpg-mercado__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2rem;
    padding-block: 0;
  }
}

/* La persona ocupa la primera columna del grid y sirve de referencia; la
   imagen va absoluta dentro de ella, anclada abajo y a la derecha para quedar
   lo más cerca posible del panel de texto.
   Su altura es la de la columna más el asomo, así que sobresale por arriba y
   el sombrero rompe el borde superior de la fotografía de fondo. */
.lpg-mercado__persona { display: none; }

@media (min-width: 62rem) {
  .lpg-mercado__persona {
    display: block;
    position: relative;
    grid-column: 1;
    align-self: stretch;        /* toma toda la altura de la banda */
    z-index: 1;                 /* por detrás del panel de texto */
    pointer-events: none;
  }
  .lpg-mercado__persona img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(100% + var(--asomo));
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom right;
  }
}

.lpg-mercado__panel {
  position: relative;
  z-index: 2;                   /* por delante de la persona */
  background: rgb(0 0 0 / 0.7);
  padding: 1rem;
  color: var(--blanco);
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}
/* La persona está fuera del flujo, así que el panel es el único item del
   grid y caería en la primera columna, encima de ella. Se fija a la segunda. */
@media (min-width: 62rem) {
  .lpg-mercado__panel { grid-column: 2; }
}
.lpg .lpg-mercado__panel p { font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem); }
.lpg-mercado__panel strong { font-weight: 700; }

.lpg-textlink {
  font-size: 0.95rem;                 /* 0.78rem + 2pt */
  text-decoration: underline;
  text-underline-offset: 3px;
  max-width: 26rem;
  transition: color 0.18s ease;
}
.lpg-textlink:hover { color: var(--amarillo); }

/* --------------------------------------------------------------------------
   Variedades
   -------------------------------------------------------------------------- */
.lpg-variedad {
  background: url('img/patron-berries.webp') center / cover no-repeat, var(--blanco);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.lpg-variedad__slide {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  padding-inline: 0.25rem;
}
@media (min-width: 62rem) {
  .lpg-variedad__slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Las fotos llegan ya recortadas con la forma, y el contorno dorado viene en
   su propio archivo, un 11% más grande. No hay máscara en CSS: solo dos capas
   superpuestas y centradas.
   La proporción del contenedor es la del contorno, que es la pieza mayor. */
.lpg-blob {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 871 / 852;
  max-width: 34rem;
  width: 100%;
  margin-inline: auto;
}
.lpg-blob picture {
  grid-area: 1 / 1;
  width: 90%;                   /* 784 de 871 */
}
.lpg-blob img {
  width: 100%;
  height: auto;
}
/* El contorno, por encima de la foto */
.lpg-blob::after {
  content: '';
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  background: url('img/flor-deco.webp') center / contain no-repeat;
  pointer-events: none;
}

.lpg-varcard {
  background: var(--rojo);
  color: var(--blanco);
  border-radius: var(--radio-lg);
  padding: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}
/* Las variedades de zarzamora usan el morado en lugar del rojo */
.lpg-varcard--mora { background: var(--morado); }
.lpg .lpg-varcard__title {
  font-family: var(--font-display);   /* Hagrid Regular */
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1;
}

.lpg-checklist { display: grid; gap: 1.05rem; }
.lpg .lpg-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  /* Llega a 1.4rem en escritorio y baja en pantallas pequeñas: con un valor
     fijo, en un móvil de 390px el texto saldría desproporcionado. */
  font-size: clamp(1rem, 0.8rem + 0.7vw, 1.4rem);
  line-height: 1.4;
}
/* En em para que el icono acompañe al texto si cambia de tamaño */
.lpg-check {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  margin-top: 0.12em;
}

/* --------------------------------------------------------------------------
   Productores
   -------------------------------------------------------------------------- */
.lpg-productores {
  padding-block: clamp(2.8rem, 1.8rem + 4vw, 4.5rem);
  display: grid;
}
.lpg-productores .wrap { display: grid; gap: clamp(1.2rem, 0.8rem + 1.5vw, 1.9rem); }

/* El nombre de marca de este titular va en Hagrid Regular cursiva. En los
   títulos de formulario sigue heredando el peso de su bloque (700) y recto. */
.lpg-productores .lpg-marca {
  font-weight: 400;
  font-style: italic;
}

.lpg .lpg-productores__q {
  text-align: center;
  font-family: var(--font-display);   /* Hagrid Regular */
  font-weight: 400;
  font-style: normal;
  color: var(--rojo);
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
}

.lpg-benefits {
  display: grid;
  gap: clamp(0.8rem, 0.5rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 56rem;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 48rem) {
  .lpg-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Va con .lpg delante porque es un <li>: la neutralización de base.css baja a
   ".lpg :is(ul,ol) li" (0,1,2) y le impondría color:inherit, dejando el texto
   y los iconos en oscuro sobre el fondo rojo. */
.lpg .lpg-benefit {
  background: var(--rojo);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 20px;
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  align-content: start;
  text-align: center;
  aspect-ratio: 1 / 1.06;
  transition: transform 0.2s ease;
}
.lpg-benefit:hover { transform: translateY(-4px); }

/* El ancho es el 80% del espacio interior, ya descontado el padding.
   Los cuatro iconos tienen proporciones distintas (de 0.73 a 1.0), así que
   max-height evita que el más estrecho se dispare de alto y desplace al
   texto: se ajusta al ancho salvo que eso lo haga demasiado alto. */
.lpg-benefit__icon {
  width: 80%;
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
}
/* Geomanist y no Hagrid: la versión trial de Hagrid trae los dígitos
   sustituidos por un cartel de la fundición, y aquí hay un "+40". */
.lpg .lpg-benefit p {
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.09rem);   /* +2pt */
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */
.lpg-banner-wrap { padding-block: clamp(1rem, 0.5rem + 2vw, 2rem); }

.lpg-banner {
  position: relative;
  isolation: isolate;
  border-radius: var(--radio-lg);
  overflow: hidden;
  min-height: clamp(11rem, 8rem + 12vw, 16rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) 1.25rem;
}
/* Sirve igual para el vídeo y para el <picture> que había antes: los dos se
   recortan a la banda con object-fit. El poster del vídeo se encuadra igual
   que el propio vídeo, así que no hay salto cuando arranca. */
.lpg-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lpg-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.lpg-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(30 42 20 / 0.38);
}

.lpg-banner__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}
.lpg-banner__logo { width: clamp(3.2rem, 2.5rem + 2.5vw, 4.6rem); height: auto; }
.lpg .lpg-banner__text {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--blanco);
  text-align: center;
  font-size: clamp(1.2rem, 0.9rem + 1.5vw, 2rem);
  line-height: 1.25;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.35);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   FAQ + formulario
   -------------------------------------------------------------------------- */
.lpg-faq-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.lpg-faq-section__inner {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .lpg-faq-section__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.lpg-faq__icon { width: 3.1rem; height: auto; color: var(--amarillo); margin-bottom: 0.9rem; }
.lpg .lpg-faq__title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--rojo);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  margin-bottom: 1.2rem;
}
/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */
.lpg-cierre { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.lpg-cierre .lpg-h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); }