/* ============================================================
   GRULLA ESTUDIO — Hero (S01)

   Zonas compositivas (% desde top del viewport):
   ─────────────────────────────────────────────
   0  -  9%   Header
   9  - 22%   Zona firmas superior (seba, lu)
   22 - 30%   Zona firmas media-alta (eim, ari)
   30 - 33%   Overline
   33 - 49%   H1 + tagline  ← SIN firmas
   49 - 72%   Aire + firmas baja (agus, zoe)  ← sin texto
   70 - 72%   Border top footer
   72 - 85%   Value prop + CTAs
   85 - 100%  Padding inferior
   ============================================================ */


/* ------------------------------------------------------------
   Contenedor
   ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--header-height);
}


/* ------------------------------------------------------------
   Fondo
   ------------------------------------------------------------ */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 18, 0.20) 0%,
    rgba(18, 18, 18, 0.30) 35%,
    rgba(18, 18, 18, 0.55) 62%,
    rgba(18, 18, 18, 0.88) 100%
  );
}


/* ------------------------------------------------------------
   Firmas
   Posicionadas en zonas sin texto. Regla: ninguna firma
   puede superponerse al H1, tagline o bloque inferior.
   ------------------------------------------------------------ */

.hero__firmas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.firma {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .firma {
    animation: firmaAppear 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--firma-delay, 0.9s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .firma { opacity: 0.75; }
}

@keyframes firmaAppear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

.firma__img {
  display: block;
  height: auto;
}

/* Nombre unificado — mismo tamaño para todas las firmas,
   independientemente del ancho de la imagen */
.firma__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(229, 253, 104, 0.92);
  border: 1px solid rgba(229, 253, 104, 0.55);
  border-radius: 100px;
  padding: 3px 9px 3.5px;
  background: transparent;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/*
   Composición — las firmas rodean "construimos" sin tocarlo.
   Con padding-top: 30vh el H1 ocupa ~42-57% del viewport.

   Distribución:
   ┌─────────────────────────────────────────────┐
   │      seba (34%, 9%)        lu (right:5%, 11%) │  ← corona superior
   │  ari (4%, 30%)    eim (right:15%, 22%)         │  ← flancos altos
   │           [ H1: 42–57% del viewport ]          │  ← ZONA PROTEGIDA
   │                              gaspi (right:2%, 46%) │  ← flanco derecho
   │  agus (5%, 63%)        zoe (51%, 64%)           │  ← base inferior
   └─────────────────────────────────────────────┘
*/

/* Corona superior — rodean la parte alta de "construimos" */
.firma--seba {
  left: 36%;
  top: 22%;
  --firma-delay: 0.90s;
}
.firma--seba .firma__img { width: clamp(70px, 7vw, 106px); }

.firma--lu {
  right: 38%;
  top: 30%;
  --firma-delay: 1.00s;
}
.firma--lu .firma__img { width: clamp(62px, 6.2vw, 94px); }

/* Flancos altos */
.firma--eim {
  right: 16%;
  top: 24%;
  --firma-delay: 1.10s;
}
.firma--eim .firma__img { width: clamp(76px, 7.6vw, 115px); }

.firma--ari {
  left: 7%;
  top: 26%;
  --firma-delay: 0.82s;
}
.firma--ari .firma__img { width: clamp(70px, 7vw, 106px); }

/* Flanco derecho */
.firma--gaspi {
  right: 7%;
  top: 35%;
  --firma-delay: 1.18s;
}
.firma--gaspi .firma__img { width: clamp(76px, 7.6vw, 115px); }

/* Base inferior — debajo de "construimos" con margen amplio */
.firma--agus {
  left: 22%;
  top: 63%;
  --firma-delay: 1.06s;
}
.firma--agus .firma__img { width: clamp(80px, 8vw, 120px); }

.firma--zoe {
  left: 42%;
  top: 66%;
  --firma-delay: 1.24s;
}
.firma--zoe .firma__img { width: clamp(72px, 7.2vw, 108px); }

/* Mobile: sin firmas */
@media (max-width: 767px) {
  .hero__firmas { display: none; }
}

/* Tablet: solo zona alta */
@media (min-width: 768px) and (max-width: 1023px) {
  .firma--agus,
  .firma--zoe,
  .firma--gaspi,
  .firma--ari {
    display: none;
  }
}


/* ------------------------------------------------------------
   Contenido
   Estructura vertical con spacer que genera el "mucho aire"
   entre el bloque H1 y la franja inferior.
   ------------------------------------------------------------ */

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);

  /* H1 center a ~48-50% del viewport (more centered) */
  padding-top: clamp(3.5rem, 30vh, 18rem);
  padding-bottom: clamp(1.75rem, 3vh, 2.5rem);
}

/* El spacer absorbe todo el espacio intermedio (el "mucho aire") */
.hero__spacer {
  flex: 1;
  min-height: clamp(2rem, 5vh, 4rem);
}

/* Créditos del equipo — oculto en desktop (las firmas cumplen esa función) */
.hero__team-credits {
  display: none;
}


/* ------------------------------------------------------------
   Overline — hermano del headline-row, no dentro del flex
   ------------------------------------------------------------ */

.hero__overline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.005em;
  margin-bottom: var(--sp-3);

  opacity: 0;
  animation: heroSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.15s;
}


/* ------------------------------------------------------------
   Fila del headline: H1 · sep · tagline

   Estrategia de alineación:
   - align-items: flex-end → todo el bloque baja a la línea base del H1
   - margin-bottom en sep y tagline = ~descender del H1 (~8% del font-size)
     → sube su base a la línea de base visual de "construimos"
   - Resultado: sep y tagline se alinean exactamente entre el
     cap-top y el baseline de "construimos"
   ------------------------------------------------------------ */

.hero__headline-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-8));
}

.hero__headline {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--color-white);

  opacity: 0;
  animation: heroSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.30s;
}

/* Separador lima
   - height ≈ cap-height del H1 (0.73 × font-size)
   - margin-bottom sube la base al baseline visual del H1
*/
.hero__sep {
  flex-shrink: 0;
  width: 2px;
  height: clamp(40px, 6.6vw, 88px);   /* ~73% del H1 font-size = cap height */
  background-color: var(--color-lime);
  border-radius: 1px;
  margin-bottom: clamp(4px, 0.75vw, 10px);  /* compensa el descender */

  opacity: 0;
  animation: heroFadeIn 0.5s ease forwards 0.50s;
}

/* Tagline — misma compensación de baseline */
.hero__tagline-group {
  flex: 0 1 340px;
  margin-bottom: clamp(4px, 0.75vw, 10px);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 1.35vw, var(--text-md));
  font-weight: 400;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.5;

  opacity: 0;
  animation: heroSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.45s;
}

.hero__tagline strong {
  font-weight: 700;
  color: var(--color-white);
}


/* ------------------------------------------------------------
   Franja inferior
   ------------------------------------------------------------ */

.hero__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-14));
  padding-top: clamp(var(--sp-6), 3vh, var(--sp-10));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero__description {
  flex: 1;
  max-width: 460px;
}

.hero__value-prop {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;

  opacity: 0;
  animation: heroSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.65s;
}

.hero__value-prop strong {
  display: block;
  font-weight: 600;
  color: var(--color-lime);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}

.hero__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);

  opacity: 0;
  animation: heroSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.78s;
}


/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__team-credits,
  .hero__overline,
  .hero__headline,
  .hero__sep,
  .hero__tagline,
  .hero__value-prop,
  .hero__actions {
    opacity: 1;
    animation: none;
  }
}


/* ------------------------------------------------------------
   Tablet (768–1023px)
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner {
    padding-top: clamp(2.5rem, 22vh, 11rem);
  }

  .hero__tagline-group {
    flex-basis: 240px;
  }

  .hero__tagline {
    font-size: var(--text-base);
  }

  .hero__description {
    max-width: 340px;
  }
}


/* ------------------------------------------------------------
   Mobile (<768px)
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  /* En mobile el hero no necesita forzar altura de viewport — que la defina el contenido */
  .hero {
    min-height: auto;
  }

  .hero__inner {
    padding-top: clamp(1.75rem, 6vh, 3.5rem);
    padding-bottom: clamp(3rem, 7vh, 5rem);
  }

  /* En mobile el spacer colapsa — el footer marca su propio límite */
  .hero__spacer {
    flex: 0;
    min-height: 0;
  }

  /* ── Créditos del equipo ── */
  .hero__team-credits {
    display: block;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: var(--sp-7);
    opacity: 0;
    animation: heroSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.05s;
  }

  /* ── Overline: trazo lima al pie como puente visual hacia el H1 ── */
  .hero__overline {
    margin-bottom: 0;
  }

  .hero__overline::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-lime);
    border-radius: 1px;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-5);
  }

  /* ── H1: font-size ajustado para que "construimos" no desborde en 390px ── */
  .hero__headline {
    font-size: clamp(40px, 12vw, 58px);
  }

  /* ── Headline row: apilado con más aire ── */
  .hero__headline-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-7);
  }

  .hero__sep {
    display: none;
  }

  /* ── Tagline: borde lima izquierdo — evoca el separador del desktop ── */
  .hero__tagline-group {
    flex-basis: auto;
    max-width: 100%;
    margin-bottom: 0;
    border-left: 2px solid var(--color-lime);
    padding-left: var(--sp-4);
  }

  .hero__tagline {
    font-size: var(--text-base);
  }

  /* ── Footer apilado — más aire respecto al bloque principal ── */
  .hero__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
    border-top: 2px solid rgba(255, 255, 255, 0.20);
    padding-top: var(--sp-8);
    margin-top: var(--sp-4);
  }

  /* "Somos tu socio estratégico" — lima en mobile, separado visualmente por el border-top */
  .hero__value-prop strong {
    font-size: 0.8125rem;
    color: var(--color-lime);
    font-weight: 600;
  }
  .hero__value-prop {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
  }

  .hero__description {
    max-width: 100%;
  }

  /* ── CTAs full width ── */
  .hero__actions {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-3);
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem;
  }
}