/* =========================================================================
   home-sections.css — Secciones teaser del index (después de la secuencia
   del hero). Estética limpia y moderna (ref. Homy): tipografía grande,
   layouts alternados, tarjetas redondeadas. Animaciones en home-sections.js.
   ========================================================================= */

.home2 { background: #fff; color: #3a433a; }

.home2-section { max-width: 1200px; margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2rem); }
.home2-eyebrow { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--primary, #2e7d32); font-weight: 600; margin: 0 0 1rem; }
.home2-title { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; color: #12160f; margin: 0 0 1.2rem; letter-spacing: -.01em; }
.home2-title .hl { color: var(--primary, #2e7d32); }
.home2-text { line-height: 1.8; font-size: 1.08rem; color: #5b655b; margin: 0 0 2rem; max-width: 48ch; }

.home2-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.7rem; border-radius: 999px; background: #12160f; color: #fff; font-weight: 600; transition: transform .2s ease, background .2s ease; }
.home2-btn:hover { background: var(--primary-dark, #005005); transform: translateY(-2px); }
.home2-btn .arw { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #12160f; display: grid; place-items: center; font-size: .9rem; transition: transform .2s ease; }
.home2-btn:hover .arw { transform: translateX(2px); }
.home2-btn--green { background: var(--primary, #2e7d32); }
.home2-btn--green .arw { color: var(--primary, #2e7d32); }

/* Reveal (lo activa home-sections.js) */
.home-reveal { opacity: 0; transform: translateY(42px); }
@media (prefers-reduced-motion: reduce) { .home-reveal { opacity: 1 !important; transform: none !important; } }

/* ------------------------------------------------------------- SPLIT (zigzag) */
.home2-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.home2-split__media { position: relative; overflow: hidden; border-radius: 26px; box-shadow: 0 30px 60px rgba(0,0,0,.16); }
.home2-split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; will-change: transform; }
.home2-split--rev .home2-split__media,
.home2-split--rev .pina-reveal { order: 2; }
/* Variante sin marco (para ilustraciones / mapas, ej. el mundo) */
.home2-split__media--plain { border-radius: 0; box-shadow: none; overflow: visible; background: transparent; display: flex; align-items: center; justify-content: center; }
.home2-split__media--plain img { aspect-ratio: auto; width: 100%; max-width: 540px; height: auto; object-fit: contain; }
@media (max-width: 900px) { .home2-split { grid-template-columns: 1fr; } .home2-split--rev .home2-split__media, .home2-split--rev .pina-reveal, .home2-split__media, .pina-reveal { order: -1; } }

/* ---------- Efecto SPOTLIGHT: revela piña2 bajo el cursor sobre piña1 ----------
   Estilo "linterna": la capa de atrás se ve tenue por toda la imagen (--ghost)
   y se intensifica al 100% donde está el cursor. Cursor en forma de "+". */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ghost { syntax: "<number>"; inherits: true; initial-value: 0; }
.pina-reveal {
  --x: 50%; --y: 50%; --r: 0px; --ghost: 0;
  position: relative; overflow: hidden;   /* recorta el desborde de la piña escalada */
  aspect-ratio: 928 / 1232;      /* mismo ratio que las imágenes: sin recortes */
  background: transparent; cursor: crosshair;
  transition: --r .3s ease, --ghost .35s ease;
}
.pina-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pina-reveal__top {
  transform: scale(1.05);        /* cubre la línea de cáscara del borde (ajustable) */
  /* Centro 100% -> difumina al valor fantasma (--ghost) hacia afuera */
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 42%, rgba(0,0,0,var(--ghost)) 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 42%, rgba(0,0,0,var(--ghost)) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pina-reveal.is-active { --ghost: .32; }   /* nivel del "fantasma" al pasar el mouse */
.pina-reveal__hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 4; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem;
  padding: .4rem .9rem; border-radius: 999px; pointer-events: none; transition: opacity .25s ease;
}
.pina-reveal.is-active .pina-reveal__hint { opacity: 0; }
@media (hover: none) { .pina-reveal { cursor: default; } .pina-reveal__hint { display: none; } }

/* Badges de certificaciones (en la sección de Calidad) */
.home2-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.home2-badges span { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #2e7d32; background: #eaf5ec; border: 1px solid #cfe6d4; padding: .45rem .8rem; border-radius: 999px; }

/* ------------------------------------------------------------- PRODUCTOS (chips) */
.home2-center { text-align: center; max-width: 60ch; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.home2-center .home2-text { margin-left: auto; margin-right: auto; }
/* 3 columnas: con 6 productos queda una retícula 3x2 pareja. Si en algún
   momento vuelven a ser 4 u 8 productos, subir a repeat(4, 1fr). */
.home2-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 2.5rem; }
.home2-chip {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.5rem 1rem; border-radius: 18px; background: #f6f8f6; border: 1px solid #eef1ee;
  color: #16324f; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.home2-chip:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.1); border-color: #d8eadc; background: #fff; }
.home2-chip img { width: 46px; height: 46px; object-fit: contain; transition: transform .25s ease; }
.home2-chip:hover img { transform: scale(1.12); }
.home2-chip span { font-size: .98rem; }
.home2-actions { text-align: center; }
@media (max-width: 700px) { .home2-chips { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- MERCADOS (marquee) */
.home2-mkt { background: transparent; }

/* La cinta ondulada (.wave-band) ahora vive en site.css para poder
   reutilizarla en todas las páginas, no solo en el index. */
.home2-marquee { position: relative; overflow: hidden; margin-top: 2.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home2-marquee__track { display: flex; gap: 1rem; width: max-content; animation: home2-scroll 40s linear infinite; }
.home2-marquee:hover .home2-marquee__track { animation-play-state: paused; }
@keyframes home2-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home2-flag { display: inline-flex; align-items: center; gap: .7rem; flex: none; padding: .55rem 1.1rem; border-radius: 999px; background: #fff; border: 1px solid #ececec; font-weight: 600; color: #12160f; font-size: .92rem; white-space: nowrap; }
.home2-flag img { width: 28px; height: 19px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
@media (prefers-reduced-motion: reduce) { .home2-marquee__track { animation: none; flex-wrap: wrap; } }

/* ------------------------------------------------------------- NOTICIAS (teaser) */
.home2-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2.5rem; }
.home2-ncard { display: flex; flex-direction: column; background: #fff; border: 1px solid #eef0ee; border-radius: 16px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.home2-ncard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.1); border-color: #dcebe0; }
.home2-ncard__media { aspect-ratio: 16/10; overflow: hidden; }
.home2-ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home2-ncard:hover .home2-ncard__media img { transform: scale(1.06); }
.home2-ncard__body { padding: 1.2rem 1.3rem 1.4rem; }
.home2-ncard__date { font-size: .75rem; color: #2e7d32; font-weight: 600; letter-spacing: .03em; }
.home2-ncard__title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.12rem; color: #16324f; line-height: 1.25; margin: .4rem 0 0; }
@media (max-width: 900px) { .home2-news-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto 2.5rem; } }

/* ------------------------------------------------------------- CTA */
.home2-cta { padding: 0; }
.home2-cta__box { position: relative; overflow: hidden; border-radius: 0; padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2rem); text-align: center; color: #12160f; }
.home2-cta__bg { position: absolute; inset: 0; background-image: url("/assets/img/trailer.webp"); background-size: cover; background-position: center; z-index: 0; }
/* Capa translúcida: halo claro detrás del texto para que resalte sin tapar la foto */
.home2-cta__ov { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 100%); }
/* Ola verde que baja desde la sección anterior y se funde con la imagen */
.home2-cta__topwave { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(55px, 7vw, 100px); z-index: 1; display: block; line-height: 0; }
.home2-cta__topwave path { fill: #0b3d2e; }
.home2-cta__box > h2,
.home2-cta__box > p,
.home2-cta__box > .home2-cta__actions { position: relative; z-index: 2; }
.home2-cta__box h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 1rem; color: #12160f; text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 2px 16px rgba(255,255,255,.6); }
.home2-cta__box p { color: rgba(0,0,0,.78); margin: 0 auto 2rem; max-width: 50ch; line-height: 1.7; text-shadow: 0 1px 10px rgba(255,255,255,.75); }
.home2-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home2-cta__actions a { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 2rem; border-radius: 999px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.home2-cta__gold { background: var(--accent, #f9a825); color: #3a2a00; }
.home2-cta__gold:hover { background: #ffd95a; transform: translateY(-2px); }
.home2-cta__out { border: 1.5px solid rgba(0,0,0,.5); color: #12160f; }
.home2-cta__out:hover { background: #12160f; color: #fff; transform: translateY(-2px); }

/* =========================================================================
   RESPONSIVE — escalones intermedios
   Los grids saltaban de 3–4 columnas directo a 1, así que en tablet quedaba
   una columna estrecha centrada con mucho espacio desperdiciado a los lados.
   ========================================================================= */

/* -------------------------------------------------- TABLET (601–900) */
@media (min-width: 601px) and (max-width: 900px) {
  /* Antes: 3 → 1. Ahora pasa por 2, que es lo que pide el ancho de tablet. */
  .home2-news-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
/* (En tablet se mantienen las 3 columnas del layout base; a ≤700 bajan a 2.) */

/* -------------------------------------------------- MÓVIL (≤600) */
@media (max-width: 600px) {
  .home2-text { font-size: 1rem; line-height: 1.7; }
  .home2-btn { padding: .85rem 1.4rem; }
  .home2-chip { padding: 1.15rem .6rem; gap: .5rem; }
  .home2-chip img { width: 38px; height: 38px; }
  .home2-chip span { font-size: .88rem; }
  .home2-badges span { font-size: .7rem; padding: .4rem .65rem; }

  /* A ancho completo la piña vertical ocupaba casi una pantalla entera */
  .pina-reveal { max-width: 340px; margin: 0 auto; }

  /* Botones del CTA a ancho completo: más fáciles de pulsar */
  .home2-cta__actions { flex-direction: column; align-items: stretch; }
  .home2-cta__actions a { justify-content: center; }
}

/* -------------------------------------------------- MÓVIL PEQUEÑO (≤380) */
@media (max-width: 380px) {
  .home2-chips { gap: .7rem; }
  .home2-chip { padding: 1rem .45rem; }
  .home2-chip span { font-size: .82rem; }
  .home2-flag { font-size: .85rem; padding: .5rem .9rem; }
}

/* -------------------------------------------------- DESKTOP GRANDE (≥1441) */
@media (min-width: 1441px) {
  .home2-section { max-width: 1360px; }
}