/* Hero reconstruido a partir de la referencia visual (1600 x 900) */

/* Cabecera: mismo contenedor de 1320 px que el hero */
header .container { box-sizing: content-box; width: min(1320px, 100% - 48px); max-width: none; padding: 0; }
header .header-content { box-sizing: border-box; }

.hx { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; background: #000; }

/* Fondo: imagen de ondas; zona luminosa detrás de la foto, zona del titular oscura */
.hx-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 62%),
    url("../img/hero-bg.jpg") center / cover no-repeat;
}
.hx-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, transparent, #000); }

.hx-inner { position: relative; z-index: 1; width: min(1320px, 100% - 48px); margin: 0 auto; padding-top: 210px; }
.hx-copy { position: relative; z-index: 2; width: 600px; max-width: 100%; }

/* Oscurecimiento difuso detrás de los párrafos, sin bordes visibles */
.hx-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -140px; top: 300px; width: 900px; height: 400px;
  background: radial-gradient(ellipse 50% 50% at 46% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.12) 75%, transparent 100%);
}
.hx-title {
  margin: 0; font-size: 76px; line-height: 1.03; font-weight: 800; letter-spacing: -2.6px; color: #f3f4f6;
}
.hx-accent { color: #32d58b; }

.hx-lead { margin: 32px 0 0; font-size: 20px; line-height: 1.6; color: #c4ccd5; max-width: 560px; }
.hx-sub { margin: 19px 0 0; font-size: 18px; line-height: 1.55; color: #aeb8c4; max-width: 520px; }

.hx-cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; height: 64px; padding: 0 34px;
  border-radius: 999px; background: #32d58b; color: #000; font-size: 18px; font-weight: 600; letter-spacing: 0;
  transition: transform .2s, box-shadow .2s;
}
.hx-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(50, 213, 139, 0.3); }

.hx-points { display: flex; align-items: center; width: max-content; list-style: none; margin: 48px 0 0; padding: 0; }
.hx-points li { display: flex; align-items: center; gap: 22px; padding: 0 44px; font-size: 16px; line-height: 1.6; color: #fff; white-space: nowrap; }
.hx-points li:first-child { padding-left: 0; }
.hx-points li + li { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.hx-points img { width: 56px; height: 56px; flex: none; filter: brightness(0.86) saturate(0.9); }

/* Fotografía: B/N, contorno verde muy sutil, borde inferior y lateral integrados en el fondo */
.hx-photo {
  position: absolute; z-index: 1; right: 3px; top: calc(-134px + max(0px, (100vh - 900px) / 2)); width: 630px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.72) 71%, rgba(0, 0, 0, 0.32) 79%, rgba(0, 0, 0, 0.08) 86%, transparent 91%), linear-gradient(to right, #000 78%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.72) 71%, rgba(0, 0, 0, 0.32) 79%, rgba(0, 0, 0, 0.08) 86%, transparent 91%), linear-gradient(to right, #000 78%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
  mask-composite: intersect;
}
.hx-photo img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) contrast(1.08) brightness(1.12) drop-shadow(0 0 1.5px rgba(50, 213, 139, 0.34)) drop-shadow(0 0 10px rgba(50, 213, 139, 0.07));
}


/* Tablet */
@media (max-width: 1200px) {
  .hx-inner { padding-top: 190px; }
  .hx-title { font-size: 66px; letter-spacing: -2.2px; }
  .hx-copy { width: 540px; }
  .hx-lead { font-size: 18.5px; } .hx-sub { font-size: 17px; }
  .hx-photo { right: -70px; top: -70px; width: 480px; }
  .hx-points li { padding: 0 28px; gap: 16px; font-size: 15px; }
  .hx-points img { width: 48px; height: 48px; }
}
/* Móvil: foto arriba, texto debajo, indicadores en columna adaptable */
@media (max-width: 900px) {
  .hx { min-height: 100svh; padding-bottom: 70px; }
  .hx-inner { padding-top: 96px; display: flex; flex-direction: column; }
  .hx-photo { position: relative; right: auto; top: auto; width: min(340px, 82%); height: 400px; overflow: hidden; margin: 0 auto -40px; order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
  .hx-photo img { width: 150%; max-width: none; margin-left: -25%; margin-top: -135px; }
  .hx-copy { width: 100%; text-align: left; }
  .hx-title { font-size: clamp(44px, 10.5vw, 64px); letter-spacing: -2.2px; line-height: 1.02; }
  .hx-lead { font-size: 18px; margin-top: 28px; max-width: none; } .hx-sub { font-size: 16.5px; max-width: none; }
  .hx-cta { height: 58px; font-size: 17px; padding: 0 28px; }
  .hx-points { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 48px; }
  .hx-cta { margin-top: 56px; }
  .hx-points li, .hx-points li:first-child, .hx-points li + li { padding: 0; border: 0; }
  .hx-bg { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)), url("../img/hero-bg.jpg") 70% center / cover no-repeat; }
}

/* Pantallas con poca altura: el conjunto sube para que el botón no quede pegado al borde inferior (210 px a partir de 900 px de alto) */
@media (min-width: 901px) { .hx-inner { padding-top: calc(clamp(104px, 100vh - 702px, 210px) + max(0px, (100vh - 900px) / 2)); padding-bottom: 64px; } }

/* Móvil (≤ 700 px): hero tipográfico, sin fotografía; altura natural y ritmo vertical equilibrado */
@media (max-width: 700px) {
  .hx { min-height: 0; padding-bottom: 56px; }
  .hx-photo { display: none; }
  .hx-inner { padding-top: calc(var(--header-height) + 44px); }
  .hx-title { font-size: clamp(36px, 12.6vw, 58px); line-height: 1.04; letter-spacing: -0.04em; }
  .hx-lead { margin-top: 26px; font-size: 1.1875rem; line-height: 1.5; font-weight: 500; color: #dbe3ea; }
  .hx-sub { margin-top: 14px; font-size: 1rem; line-height: 1.55; color: #aeb8c4; }
  /* Beneficios: tres tarjetas informativas del mismo ancho que el botón */
  .hx-points { display: grid; grid-auto-rows: 1fr; width: 100%; gap: 12px; margin: 28px 0 0; }
  .hx-points li, .hx-points li:first-child, .hx-points li + li {
    display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid rgba(34, 197, 94, 0.22); border-radius: 20px;
    background: rgba(3, 15, 12, 0.6); font-size: 1rem; line-height: 1.35; white-space: normal;
  }
  .hx-points span { display: block; color: #aeb8c4; }
  .hx-points span::first-line { color: #fff; font-weight: 600; }
  .hx-points img { width: 48px; height: 48px; flex: none; }
  .hx-cta { width: 100%; justify-content: center; margin-top: 28px; height: 60px; font-size: 1.0625rem; padding: 0 24px; }
  /* fondo vertical: ondas hacia la derecha, parte superior más oscura para el titular */
  .hx-bg {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%), url("../img/hero-bg.jpg") 72% center / cover no-repeat;
  }
  .hx-bg::after { height: 110px; }
}

/* Animación de entrada del hero: logo/navegación → título → subtítulo → texto → tarjetas → botón.
   Empieza cuando el documento está listo (clase "loaded"); sin JS arranca al cargar. */
@keyframes hx-rise { from { opacity: 0; transform: translateY(var(--rise, 16px)); } to { opacity: 1; transform: none; } }
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.loaded) header .header-content,
  html.js:not(.loaded) #inicio :is(.hx-title, .hx-lead, .hx-sub, .hx-points li, .hx-cta, .hx-photo),
  html.js:not(.loaded) .hx-bg { opacity: 0; }
  html.loaded .hx-bg, html.no-js .hx-bg { animation: hx-fade 1.4s ease-out backwards; }
  html.loaded .hx-photo, html.no-js .hx-photo { animation: hx-fade 1.2s ease-out 500ms backwards; }
  html.loaded header .header-content, html.no-js header .header-content { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) backwards; }
  html.loaded #inicio .hx-title, html.no-js #inicio .hx-title { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 150ms backwards; }
  html.loaded #inicio .hx-lead, html.no-js #inicio .hx-lead { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 300ms backwards; }
  html.loaded #inicio .hx-sub, html.no-js #inicio .hx-sub { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 450ms backwards; }
  html.loaded #inicio .hx-points li:nth-child(1), html.no-js #inicio .hx-points li:nth-child(1) { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 600ms backwards; }
  html.loaded #inicio .hx-points li:nth-child(2), html.no-js #inicio .hx-points li:nth-child(2) { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 750ms backwards; }
  html.loaded #inicio .hx-points li:nth-child(3), html.no-js #inicio .hx-points li:nth-child(3) { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 900ms backwards; }
  html.loaded #inicio .hx-cta, html.no-js #inicio .hx-cta { animation: hx-rise 1s var(--ease-soft, cubic-bezier(0.33, 1, 0.68, 1)) 1050ms backwards; }
}