/* ==========================================================================
   HERO.CSS
   Primera sección del sitio. En vez de una foto de stock (no hay
   material fotográfico disponible), se usa una ilustración de skyline
   en SVG que retoma el trazo diagonal del isologo y se "dibuja" al
   cargar la página: es el único momento animado importante del sitio.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--space-7) + 3rem);
  padding-bottom: var(--space-6);
  overflow: hidden;
  background: linear-gradient(180deg, #eef2f6 0%, var(--color-bg) 60%);
}

/* Grilla técnica de fondo, como referencia a un plano de obra */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 75%);
  opacity: 0.6;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-5);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-blue);
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
}

.hero__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
}

.hero h1 {
  font-size: var(--fs-hero);
  max-width: 14ch;
}

.hero__lead {
  margin-top: var(--space-3);
  font-size: 1.1rem;
  max-width: 44ch;
  color: var(--color-navy-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Franja de capacidades clave. Deliberadamente no son cifras (años de
   experiencia, cantidad de obras, etc.): al no contar con esos datos
   confirmados por el cliente, se prioriza no inventarlos. */
.hero__quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.hero__quick-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
}

.hero__quick-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
  flex-shrink: 0;
}

/* ---- Composición de la derecha: foto + skyline + chip -------------------- */

.hero__art {
  position: relative;
}

/* Bloque de profundidad detrás de la foto, con el corte diagonal del isologo */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 26px -14px -14px 30px;
  background: var(--color-navy);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  z-index: 0;
}

.hero__photo {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: var(--shadow-soft);
  animation: hero-float 7s ease-in-out 1.2s infinite;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chip flotante sobre la foto */
.hero__chip {
  position: absolute;
  left: -14px;
  bottom: 26px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-navy);
  z-index: 3;
  animation: hero-float 7s ease-in-out 2s infinite reverse;
}

.hero__chip svg {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
  flex-shrink: 0;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Skyline: pasa a ser una trama técnica tenue detrás de la foto */
.hero__skyline {
  position: absolute;
  z-index: 1;
  right: -14%;
  top: -12%;
  width: 118%;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__chip {
    animation: none;
  }
}

/* Cada trazo del SVG arranca invisible (dasharray = dashoffset) y se
   revela de izquierda a derecha vía animations.js, que calcula el
   largo real de cada trazo. Este estado inicial evita el "flash" del
   dibujo completo antes de que corra el script. */
.hero__skyline path,
.hero__skyline polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero__skyline .skyline-fill {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 600ms ease 900ms;
}

.hero__skyline.is-drawn .skyline-fill {
  opacity: 1;
}

/* Paleta de trazos del skyline (mismos tokens que el resto del sitio) */
.hero__skyline .skyline-stroke {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__skyline .skyline-stroke--thin {
  stroke-width: 2;
}

.hero__skyline .skyline-navy {
  stroke: var(--color-navy);
}

.hero__skyline .skyline-blue {
  stroke: var(--color-blue);
}

.hero__skyline .skyline-line {
  stroke: var(--color-line-strong);
}

.hero__skyline .skyline-fill-blue {
  fill: var(--color-blue-light);
}

.hero__skyline .skyline-fill-navy {
  fill: var(--color-navy);
}