/* Hero — eyebrow + título + subtítulo + CTAs + decoración (blobs + clusters de píxeles). */

.hero {
  position: relative;
  padding: var(--space-3xl) 0;
  background: var(--color-white);
  overflow: hidden;
}
.hero.section--beige { background: var(--color-beige); }
.hero.section--dark  { background: var(--color-dark); }

.hero__inner {
  max-width: 900px;
  position: relative;
  z-index: 3;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-md);
}

.hero__title {
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-gray);
  margin-bottom: var(--space-lg);
  max-width: 700px;
  line-height: 1.5;
}
.hero.section--dark .hero__subtitle { color: rgba(255, 255, 255, 0.85); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Blobs difuminados */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}
.hero__blob--1 {
  top: -10%;
  right: -5%;
  width: 480px;
  height: 480px;
  background: rgba(65, 187, 201, 0.18);
}
.hero__blob--2 {
  bottom: -15%;
  left: -10%;
  width: 420px;
  height: 420px;
  background: rgba(235, 90, 44, 0.08);
}

/* Clusters de píxeles turquesa */
.hero__pixels {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.hero__pixels--tr { top: 8%;  right: 5%;  width: 160px; height: 160px; }
.hero__pixels--br { bottom: 12%; right: 8%;  width: 110px; height: 110px; }
.hero__pixels--bl { bottom: 18%; left: 4%;   width: 90px;  height: 90px; }
.hero__pixels--ml { top: 45%;    left: -10px;width: 70px;  height: 70px; }

.hero__pixel { position: absolute; background: var(--color-turquoise); }

.hero__pixels--tr .hero__pixel:nth-child(1) { width: 44px; height: 44px; top: 0;    left: 30%; }
.hero__pixels--tr .hero__pixel:nth-child(2) { width: 24px; height: 24px; top: 8px;  left: 4%;  }
.hero__pixels--tr .hero__pixel:nth-child(3) { width: 30px; height: 30px; top: 52px; left: 72%; }
.hero__pixels--tr .hero__pixel:nth-child(4) { width: 16px; height: 16px; top: 80px; left: 18%; }
.hero__pixels--tr .hero__pixel:nth-child(5) { width: 22px; height: 22px; top: 104px;left: 48%; }
.hero__pixels--tr .hero__pixel:nth-child(6) { width: 12px; height: 12px; top: 130px;left: 80%; }

.hero__pixels--br .hero__pixel:nth-child(1) { width: 28px; height: 28px; top: 0;    left: 30%; }
.hero__pixels--br .hero__pixel:nth-child(2) { width: 14px; height: 14px; top: 36px; left: 0;   }
.hero__pixels--br .hero__pixel:nth-child(3) { width: 20px; height: 20px; top: 56px; left: 56%; }
.hero__pixels--br .hero__pixel:nth-child(4) { width: 10px; height: 10px; top: 84px; left: 20%; }

.hero__pixels--bl .hero__pixel:nth-child(1) { width: 22px; height: 22px; top: 0;    left: 30%; }
.hero__pixels--bl .hero__pixel:nth-child(2) { width: 12px; height: 12px; top: 28px; left: 0;   }
.hero__pixels--bl .hero__pixel:nth-child(3) { width: 16px; height: 16px; top: 50px; left: 50%; }

.hero__pixels--ml .hero__pixel:nth-child(1) { width: 18px; height: 18px; top: 0;    left: 40%; }
.hero__pixels--ml .hero__pixel:nth-child(2) { width: 10px; height: 10px; top: 26px; left: 4px; }
.hero__pixels--ml .hero__pixel:nth-child(3) { width: 14px; height: 14px; top: 44px; left: 56%; }

@media (max-width: 968px) {
  .hero { padding: var(--space-2xl) 0; }
  .hero__pixels--tr { transform: scale(0.7); top: 5%; right: 2%; }
  .hero__pixels--bl,
  .hero__pixels--br,
  .hero__pixels--ml { display: none; }
}

/* ===== Variante subpage (top-level non-home) ===== */
/* Beige + clusters de píxeles dark + texto centrado. */
.hero--subpage {
  background-color: var(--color-beige);
  color: var(--color-dark);
  padding: var(--space-2xl) 0;
  text-align: center;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Sin width:100% el .container queda con max-content dentro del flex y el
   margin:0 auto NO centra horizontalmente. */
.hero--subpage .container { width: 100%; }
.hero--subpage .hero__inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero--subpage .hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  margin-bottom: var(--space-md);
}
.hero--subpage .hero__title {
  color: var(--color-dark);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero--subpage .hero__title em {
  font-style: normal;
  color: var(--color-orange);
  display: inline;
}
/* En subpage los píxeles mantienen el turquesa del diseño base. */
.hero--subpage .hero__pixel { background: var(--color-turquoise); }
.hero--subpage .hero__pixels--tr {
  top: 14px;
  right: 4%;
  width: 140px;
  height: 110px;
}
.hero--subpage .hero__pixels--bl {
  bottom: 14px;
  left: 4%;
  width: 100px;
  height: 70px;
  top: auto;
}

@media (max-width: 768px) {
  .hero--subpage { padding: var(--space-xl) 0; min-height: 240px; }
}

/* ===== Variante subpage-servicio ===== */
/* Centrado, sin blobs, con icono SVG decorativo grande de fondo a la derecha. */
.hero--subpage-servicio {
  padding: var(--space-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero--subpage-servicio .hero__inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero--subpage-servicio .hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
}
.hero--subpage-servicio .hero__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.hero--subpage-servicio .hero__title em {
  font-style: normal;
  color: var(--color-orange);
  display: inline;
}
.hero--subpage-servicio .hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray);
  line-height: 1.6;
  margin: var(--space-md) auto 0;
  max-width: 700px;
}
.hero--subpage-servicio .hero__actions {
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Icono SVG grande decorativo de fondo */
.hero__bg-icon {
  position: absolute;
  top: 50%;
  right: -3%;
  transform: translateY(-50%) rotate(-8deg);
  width: 380px;
  height: 380px;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  transition: var(--transition);
}

@media (max-width: 768px) {
  .hero__bg-icon { width: 220px; height: 220px; right: -10%; opacity: 0.08; }
}