/* =========================================================================
   HERO.CSS — Banner principal (portada)
   ========================================================================= */

.hero {
  position: relative; margin-top: var(--header-h);
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  /* Foto real de obra (Costa del Sol) con velo azul encima para mantener la
     paleta y garantizar la legibilidad del texto. */
  background:
    linear-gradient(115deg, rgba(20,44,70,.93) 0%, rgba(27,58,92,.82) 45%, rgba(46,109,164,.60) 100%),
    url("../images/projetos/hero-costa-del-sol.jpg") center 30% / cover no-repeat,
    var(--navy-deep);
}

/* Trama arquitectónica sutil de fondo (líneas tipo plano) */
.hero__pattern {
  position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
}
/* Isotipo gigante como marca de agua */
.hero__watermark {
  position: absolute; right: -60px; bottom: -80px; width: min(46vw, 560px);
  opacity: .07; pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; max-width: 760px; padding: 3rem 0; }
.hero__eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: .8rem; color: var(--blue-soft); margin-bottom: 1.1rem;
}
.hero__title { font-size: clamp(2.3rem, 6vw, 4.3rem); line-height: 1.06; color: #fff; }
.hero__title em { color: var(--blue-soft); font-style: italic; }
.hero__subtitle { margin-top: 1.4rem; font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--text-on-navy-soft); max-width: 640px; }
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Franja de indicadores bajo el hero */
.hero__stats {
  position: relative; z-index: 2; margin-top: 2.8rem;
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.6rem;
}
.hero__stat b { display: block; font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.hero__stat span { font-size: .9rem; color: var(--text-on-navy-soft); }