/*
   ==========================================================================
   COMPONENTE: Hero (mobile-first)
   ========================================================================== */

/* La foto ya no vive en una tarjeta aparte: cubre el hero entero como fondo
   y se funde con dos degradados superpuestos — uno horizontal, oscuro
   detrás de la columna de texto (que va alineada a la izquierda) y que se
   aclara hacia la derecha para dejar ver la foto, y uno vertical que
   termina exactamente en --color-bg-main (el mismo fondo de página/próxima
   sección) para que el hero se disuelva en lo que sigue sin corte duro. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-main);
  /* Piso de alto para que la foto siempre tenga espacio real donde
     mostrarse — sin esto, en pantallas bajas/anchas (celular en horizontal,
     poco contenido) el hero podía quedar tan bajo que "cover" terminaba
     recortando casi toda la imagen. El techo (40rem) evita que en monitores
     muy altos quede un hero exagerado; el contenido sigue pudiendo crecer
     más si el texto lo necesita, esto es solo un mínimo. */
  min-height: clamp(26rem, 60vh, 40rem);
  padding-top: 3.5rem;
  padding-bottom: 6rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-photo-bg);
  background-size: cover;
  /* La foto es muy panorámica (brotes creciendo de izquierda a derecha,
     el más alto pegado al borde derecho). En pantallas angostas "cover"
     recorta la mayor parte del ancho; además el degradado oscuro de
     .hero-bg::after tapa más el lado izquierdo, así que el costado
     derecho (donde además el overlay es más liviano) es el que más se
     ve. Encuadramos bien a la derecha en mobile para que el brote más
     alto quede siempre visible, y volvemos al centro desde tablet,
     donde ya entra la foto casi completa. */
  background-position: 92% 40%;
  background-repeat: no-repeat;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(16, 24, 18, 0.82) 0%, rgba(16, 24, 18, 0.6) 42%, rgba(16, 24, 18, 0.22) 72%, rgba(16, 24, 18, 0.06) 100%),
    linear-gradient(to bottom, rgba(16, 24, 18, 0.15) 0%, transparent 35%, var(--color-bg-main) 96%);
}

/* A diferencia del resto del sitio, el hero no usa el .container centrado
   de 1180px: va a ancho completo con un padding chico, así el texto queda
   pegado al borde de la pantalla en vez de encajonado y centrado. */
.hero .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 1.25rem;
}

.hero-copy {
  max-width: 34rem;
  text-align: left;
}

.hero-copy .eyebrow { margin-bottom: 1rem; }

.hero h1 {
  font-size: var(--fs-display);
  color: var(--color-text-light);
  text-shadow: 0 2px 18px rgba(16, 24, 18, 0.35);
  margin-bottom: 0.5em;
}

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--color-text-light-muted);
  text-shadow: 0 1px 12px rgba(16, 24, 18, 0.3);
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

/* Mini animación del CTA: además del lift que ya trae .btn:hover, la
   flecha se corre hacia la derecha (empuja/vuelve con bounce) y el botón
   gana sombra, para reforzar la idea de "avanzar al catálogo". */
.hero-actions .btn-primary {
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}
.hero-actions .btn-primary:hover {
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.hero-actions .btn-primary svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-actions .btn-primary:hover svg { transform: translateX(5px); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.5rem;
  border-top: 1px solid var(--border-color-dark);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
}

.hero-meta div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-highlight);
}

.hero-meta div span {
  font-size: 0.82rem;
  color: var(--color-text-light-muted);
}

.hero-caption {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-text-light-muted);
}
.hero-caption strong { color: var(--color-text-light); font-weight: 600; }

/* --------------------------------------------------------------------------
   Desde tablet
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
  .hero {
    padding-top: clamp(4.5rem, 3rem + 5vw, 7.5rem);
    padding-bottom: clamp(7rem, 5rem + 6vw, 11rem);
  }

  .hero .container { padding: 0 clamp(1.25rem, -1rem + 5vw, 4rem); }

  .hero-bg { background-position: center 40%; }

  .hero-meta { gap: clamp(1.5rem, 1rem + 2vw, 3rem); flex-wrap: nowrap; }
  .hero-meta div strong { font-size: 1.6rem; }
}