/* Hero con el equipo en 3D. El giro del equipo es por tiempo (modelo-3d/giro.js) y nunca frena el scroll:
   el hero mide una pantalla y sube con la página desde el primer momento. Hasta el 2026-10-16 medía 220vh
   con el contenido pegado (sticky) y la cámara seguía al scroll: la página parecía trabada mientras giraba.
   Fondo blanco y textos #333333 / #555555 según GUIA_DE_ESTILO_WEB.md (2026-10-09). */
.hero {
  --hero-text: #333333;
  --hero-text-soft: #555555;
  background: #FFFFFF; color: var(--hero-text);
}
.hero-inner {
  /* El menú ocupa --header-height arriba: el primer pantallazo (menú + hero) mide justo la ventana */
  height: calc(100vh / var(--page-zoom) - var(--header-height)); height: calc(100svh / var(--page-zoom) - var(--header-height)); overflow: hidden;
  /* Texto, equipo y cierre (checks + botón): el equipo toma el espacio que sobra */
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.hero .copy {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(20px, 4vh, 48px) 16px clamp(12px, 3vh, 32px);
}
/* Tipografías de la guía web: Montserrat en titular, línea y botón (styles/fonts.css) */
.hero h1 {
  font: 800 var(--text-h1)/1.08 var(--font-heading);
  letter-spacing: -.02em; text-wrap: balance;
}
/* Segunda línea del titular en el naranja de marca sólido (.hl): sin degradado */
.hero .line {
  margin-top: 16px;
  font: 600 clamp(.875rem, .83rem + .2vw, 1rem)/1.5 var(--font-heading);
  letter-spacing: .04em; color: var(--hero-text);
}
.hero .line span { white-space: nowrap; }
.hero .line i { font-style: normal; color: var(--orange); }
.hero .cta { font-family: var(--font-heading); font-weight: 700; }

/* Cierre del hero: checks y, debajo, el único botón de la sección, con aire arriba y abajo
   para que el hero termine claro y la sección siguiente arranque limpia. */
.hero-close {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(12px, 2vh, 20px) 16px clamp(28px, 6vh, 64px);
}
.hero-close .cta { margin-top: clamp(20px, 4vh, 36px); }

/* Tres promesas bajo el equipo, con check naranja en círculo #EBF9FC (guía web, íconos de trazo).
   Escritorio: una fila centrada con espacio uniforme. Celular: lista vertical centrada. */
.hero .promises {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 12px 40px;
  font: 500 1rem/1.3 var(--font-copy); color: #333333;
}
.hero .promises li { display: flex; align-items: center; gap: 10px; }
.promises__ast { color: var(--orange); font-weight: 700; margin-left: 1px; }
/* Nota de "Sin costo de instalación": 13 px, #555555 sobre blanco (7.5:1), centrada bajo las promesas */
.hero .promises__nota {
  position: relative; z-index: 2; max-width: 640px; margin: 10px auto 0; text-align: center; text-wrap: balance;
  font: 400 13px/1.45 var(--font-copy); color: #555555;
}
.hero .promises svg {
  flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%;
  background: #EBF9FC; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 640px) {
  .hero .promises { flex-direction: column; align-items: center; }
  .hero .promises li { width: 15.5rem; }
}
/* En pantallas angostas la línea se parte en un punto fijo, sin dejar un separador suelto */
.narrow-break { display: none; }
@media (max-width: 540px) {
  .narrow-break { display: inline; }
  .hero .line .at-break { display: none; }
}

.stage { position: relative; min-height: 0; }
/* Resplandor naranja detrás del equipo: capa propia, fuera del 3D, sin blur ni modo de mezcla.
   La imagen fija y el canvas son transparentes, así que la capa va debajo (z-index 0).
   Centrado en la caja y desvanecido hacia todos los bordes, para que no quede ningún corte recto.
   Respira (opacidad .35 a 1 y escala 1 a 1.05 cada 4.8 s) mientras el equipo está a la vista (.is-live).
   20 % de opacidad en el centro como máximo; si se nota doble con el brillo de la foto, se baja ese .20. */
.stage::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 70%; width: min(110%, 900px); aspect-ratio: 2.6; translate: -50% -50%;
  /* La luz del piso, con perspectiva, está en la escena 3D (modelo-3d/modelo.js, floorGlow). */
  background: radial-gradient(closest-side, rgba(255,102,0,.20), rgba(255,102,0,.08) 55%, rgba(255,102,0,0) 100%);
  opacity: .35;
}
/* La posición va en translate, así que la animación solo toca scale (transform) y opacity */
.stage.is-live::before { animation: respira 4.8s ease-in-out infinite; will-change: transform, opacity; }
@keyframes respira { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.stage img, .stage canvas {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  /* La luz del piso sigue más allá del borde del escenario: se desvanece en el último tramo para que no quede un corte recto */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.stage img { object-fit: cover; object-position: 50% 50%; }
.stage canvas { opacity: 0; transition: opacity .6s var(--ease-out); }
.stage.is-3d canvas { opacity: 1; }
.stage.is-3d img { opacity: 0; transition: opacity .6s var(--ease-out) .1s; }
.illustrative {
  position: absolute; z-index: 2; right: 16px; bottom: 16px;
  font: 600 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--hero-text-soft);
  /* Fondo propio: en celular la etiqueta puede caer sobre el equipo, que es negro */
  padding: 6px 10px; background: rgba(255,255,255,.88); border-radius: var(--radius-pill);
}

/* Celular de poca altura (320×568, 2026-10-16): el equipo se quedaba en 56 px y la etiqueta lo tapaba.
   Solo se aprieta el aire vertical; textos y tamaños no cambian. */
@media (max-width: 480px) and (max-height: 640px) {
  .hero .copy { padding: 12px 16px 8px; }
  .hero .line { margin-top: 8px; }
  .hero-close { padding: 6px 16px 14px; }
  .hero .promises { gap: 2px; }
  .hero-close .cta { margin-top: 12px; }
  .illustrative { right: 8px; bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage canvas, .stage img { transition: none; }
  .stage::before { opacity: .65; }
}