/* ===== Hero ===== */

.hero {
  min-height: calc(100svh - 76px);
  display: flex;
  align-items: center;
  padding-block: 40px 80px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.hero__copy .eyebrow {
  margin-bottom: 28px;
}

.hero__headline {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.015em;
  font-weight: 700;
  margin-bottom: 32px;
}

.hero__headline .is-accent {
  color: var(--accent);
}

.hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--text-300);
  max-width: 520px;
  margin-bottom: 40px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero__trust {
  display: flex;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text-400);
  max-width: 460px;
}

.hero__trust span:first-child {
  color: var(--accent);
}

/* ===== Fondo ambiental del hero (reemplaza a la P. — sin objeto 3D) =====
   Glows suaves que derivan lento (CSS) + un spotlight que sigue al mouse (JS, header.js).
   Todo vive detrás del copy (z-index) y respeta prefers-reduced-motion. */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* Grilla de puntos — textura de fondo, siempre debajo de los glows (orden en el DOM). */
.hero__dotgrid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.hero__glow--a {
  width: 520px;
  height: 520px;
  right: 6%;
  top: 4%;
  background: radial-gradient(circle, rgba(10, 166, 166, .12) 0%, rgba(10, 166, 166, 0) 70%);
}

.hero__glow--b {
  width: 460px;
  height: 460px;
  right: 20%;
  bottom: -8%;
  background: radial-gradient(circle, rgba(21, 29, 32, .8) 0%, rgba(21, 29, 32, 0) 70%);
}

.hero__glow--c {
  width: 380px;
  height: 380px;
  left: 20%;
  top: 30%;
  background: radial-gradient(circle, rgba(102, 215, 208, .07) 0%, rgba(102, 215, 208, 0) 70%);
}

.hero__spotlight {
  position: absolute;
  width: 640px;
  height: 640px;
  left: 0;
  top: 0;
  margin-left: -320px;
  margin-top: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 166, 166, .1) 0%, rgba(10, 166, 166, 0) 68%);
  opacity: 0;
  transition: opacity 500ms ease;
  will-change: transform;
}

.hero__spotlight.is-active {
  opacity: 1;
}

/* ===== P. de líneas (SVG/CSS, sin Three.js) =====
   La P existe solo como recorte de un campo de líneas horizontales sobre la silueta exacta
   del iso.svg (mismo contorno, mismo agujero) — nada de relleno sólido. El punto teal es la
   única forma maciza, fuera del clip. */

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 620px;
}

.hero__p-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Perspectiva sutil (CSS puro, no Three.js) — igual espíritu que la referencia: la P
     apenas girada en el espacio, no un giro fuerte. */
  transform: perspective(900px) rotateY(-26deg) rotateX(7deg);
  transform-style: preserve-3d;
}

.hero__p-line {
  fill: var(--text-200);
}

.hero__p-dot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  /* La P se arma: cada línea entra deslizándose desde un lado (alterna izq/der)
     mientras aparece — no un simple fundido en el lugar. Va en un <g> envolvente
     (una sola vez, con fill:both) para no pelear con la respiración continua del
     <rect> interior, que anima una propiedad distinta. */
  .hero__p-line-wrap {
    animation: hero-p-assemble .42s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0s) both;
  }

  .hero__p-line {
    animation: hero-p-breathe var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  }

  /* El punto entra después de que la P termina de armarse (~0.6s), con un pop breve. */
  .hero__p-dot {
    animation: hero-p-dot-enter .4s cubic-bezier(.34, 1.56, .64, 1) .6s both;
  }
}

@keyframes hero-p-assemble {
  from { opacity: 0; transform: translateX(var(--slide-from, 60px)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-p-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes hero-p-dot-enter {
  from { opacity: 0; transform: scale(0.25); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow,
  .hero__spotlight,
  .hero__p-line-wrap,
  .hero__p-line,
  .hero__p-dot {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1279px) {
  .hero__inner {
    gap: 40px;
  }
}

@media (max-width: 1023px) {
  .hero {
    min-height: auto;
    padding-block: 56px 64px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__visual {
    height: 420px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-block: 40px 48px;
  }

  .hero__headline {
    font-size: clamp(48px, 12vw, 58px);
    margin-bottom: 24px;
  }

  .hero__lead {
    margin-bottom: 32px;
  }

  .hero__glow {
    filter: blur(50px);
  }

  .hero__visual {
    height: 300px;
  }
}

/* ===== Encabezado de sección reutilizable (eyebrow + título + lead) ===== */

.authority,
.whatwedo,
.frictions,
.cases,
.process {
  padding-block: 100px;
  border-top: 1px solid var(--line-100);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 72px;
}

.section-head--solo {
  grid-template-columns: 1fr;
}

.section-head__intro .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.section-head__title {
  font-size: var(--fs-h2);
  max-width: 520px;
}

.section-head__lead {
  font-size: var(--fs-body-lg);
  color: var(--text-300);
  max-width: 420px;
}

.section-head__action {
  justify-self: end;
}

/* ===== Trayectoria (autoridad) — números grandes, sin cards, mismo tratamiento
   tipográfico que el resto del home (ver .hero__headline / .section-head__title) ===== */

.authority-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.authority-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.authority-stat__num {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-100);
}

.authority-stat__label {
  font-size: var(--fs-body);
  color: var(--text-300);
  max-width: 280px;
}

/* ===== Qué hacemos ===== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 32px;
}

.service-item {
  grid-column: span 3;
}

.service-item__icon {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-200);
  margin-bottom: 24px;
  transition: transform 260ms ease;
}

.service-item:hover .service-item__icon {
  transform: scale(1.02);
}

.service-item__title {
  font-size: var(--fs-h3);
  margin-bottom: 14px;
}

.service-item__desc {
  font-size: var(--fs-small);
  color: var(--text-300);
  margin-bottom: 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-100);
  transition: color 180ms ease, gap 180ms ease;
}

.text-link:hover {
  color: var(--accent);
  gap: 10px;
}

/* ===== De problema a oportunidad ===== */

.friction-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}

.friction-item__icon {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-200);
  margin-bottom: 20px;
  transition: transform 260ms ease;
}

.friction-item:hover .friction-item__icon {
  transform: scale(1.02);
}

.friction-item__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-100);
  margin-bottom: 10px;
}

.friction-item__desc {
  font-size: var(--fs-small);
  color: var(--text-400);
}

@media (max-width: 1279px) {
  .service-item {
    grid-column: span 6;
  }

  .friction-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }

}

@media (max-width: 767px) {
  .authority,
  .whatwedo,
  .frictions,
  .cases,
  .process {
    padding-block: 64px;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-head__action {
    justify-self: start;
  }

  .authority-stats {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-item {
    grid-column: span 12;
  }

  .friction-row {
    grid-template-columns: 1fr 1fr;
  }
}