/*------------------------------------------------------------------
  Hero de la home (Section1.tsx) — versión 2.

  Se apoya en las clases viejas `.sec-1-home-11*` de main.css (fondo de video,
  botón de scroll) y redefine el resto con el prefijo `.hero-p50`. Todo lo que
  choca con la versión anterior se sobrescribe aquí, no en main.css.

  Las animaciones las hace GSAP desde el componente. Este archivo deja todo
  visible por defecto: sin JavaScript o con movimiento reducido, el hero se ve
  completo y quieto.
------------------------------------------------------------------*/

.hero-p50 {
  --hero-azul: #4988c4;
  --hero-azul-claro: #6ba4dc;
  --hero-azul-hielo: #b9d8f5;
  isolation: isolate;
  background-color: #07090c;
}

/* --- Fondo ------------------------------------------------------------------ */

/* La izquierda se oscurece mucho más para que el texto se lea perfecto; la derecha
   deja ver el video detrás del teléfono. Abajo se funde con la sección siguiente. */
.hero-p50 .hero-p50__velo {
  background:
    linear-gradient(90deg, rgba(6, 8, 11, 0.94) 0%, rgba(6, 8, 11, 0.86) 34%, rgba(6, 8, 11, 0.55) 62%, rgba(6, 8, 11, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.55) 0%, rgba(6, 8, 11, 0) 30%, rgba(6, 8, 11, 0) 70%, rgba(6, 8, 11, 0.95) 100%);
}

/* --- Estructura --------------------------------------------------------------- */

.hero-p50__contenedor {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  /* El ancho y los márgenes laterales los da `.container`, el mismo del header: así el
     titular arranca exactamente donde arranca el logo. */
  padding-top: clamp(118px, 13vw, 150px);
  padding-bottom: 0;
}

/* Una sola columna: el hero ya no lleva teléfono, el texto ocupa el ancho del container. */

.hero-p50__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* --- Rótulo ------------------------------------------------------------------- */

/* --- Titular ------------------------------------------------------------------ */

.hero-p50__titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4.55vw, 70px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: none;
}

/* Cada línea es una máscara: el texto sube desde debajo del borde inferior.
   El padding deja sitio a los descendentes (p, g) sin que la máscara los corte. */
.hero-p50__linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hero-p50__linea-in {
  display: inline-block;
  will-change: transform;
}

/* La palabra que rota. `inline-grid` apila la palabra visible y una copia invisible de
   la más larga (`data-max`) en la misma celda: el hueco mide siempre lo mismo y el
   titular no se mueve al cambiar. El contenido de `::after` no es texto de la página,
   así que el H1 que leen los buscadores sigue diciendo solo "inteligentes". */
.hero-p50__acento {
  display: inline-grid;
  overflow: hidden;
  padding: 0 0.06em 0.12em 0;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}

.hero-p50__acento::after {
  content: attr(data-max);
  grid-area: 1 / 1;
  visibility: hidden;
  height: 0;
}

.hero-p50__acento-palabra {
  grid-area: 1 / 1;
  color: var(--hero-azul);
  white-space: nowrap;
}

/* --- Subtítulo y botones -------------------------------------------------------- */

.hero-p50__subtitulo {
  max-width: 54ch;
  margin: 26px 0 0;
  color: rgba(225, 232, 240, 0.78);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.65;
}

.hero-p50__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.hero-p50__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.hero-p50__btn--principal {
  position: relative;
  overflow: hidden;
  border: 0;
  background: linear-gradient(135deg, var(--hero-azul-claro) 0%, var(--hero-azul) 100%);
  color: #06121d;
  box-shadow: 0 16px 40px -16px rgba(73, 136, 196, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Reflejo que cruza el botón al pasar el ratón. */
.hero-p50__btn--principal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

.hero-p50__btn--principal > * {
  position: relative;
}

.hero-p50__btn--principal:hover,
.hero-p50__btn--principal:focus-visible {
  color: #06121d;
  filter: brightness(1.06);
  box-shadow: 0 22px 50px -16px rgba(73, 136, 196, 1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-p50__btn--principal:hover::before {
  transform: translateX(120%);
}

.hero-p50__btn--principal svg {
  transition: transform 0.3s ease;
}

.hero-p50__btn--principal:hover svg,
.hero-p50__btn--principal:focus-visible svg {
  transform: translateX(5px);
}

.hero-p50__btn--secundario {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
}

.hero-p50__btn--secundario:hover,
.hero-p50__btn--secundario:focus-visible {
  border-color: var(--hero-azul-claro);
  background: rgba(73, 136, 196, 0.14);
  color: #fff;
}

.hero-p50__btn:focus-visible {
  outline: 2px solid var(--hero-azul-claro);
  outline-offset: 3px;
}

.hero-p50__nota {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  color: rgba(225, 232, 240, 0.58);
  font-size: 13.5px;
}

.hero-p50__nota svg {
  color: var(--hero-azul-claro);
}

/* --- Cifras ------------------------------------------------------------------- */

.hero-p50__cifras {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin: 44px 0 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-p50__cifra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 clamp(20px, 2.6vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-p50__cifra:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-p50__cifra-valor {
  color: #fff;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hero-p50__cifra-etiqueta {
  color: rgba(225, 232, 240, 0.58);
  font-size: 13px;
  line-height: 1.35;
  max-width: 16ch;
}

/* --- Columna visual: teléfono y halo ---------------------------------- */

.hero-p50__visual {
  display: none;
}

@media (min-width: 992px) {
  .hero-p50__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 20px 0;
  }
}

.hero-p50__halo {
  position: absolute;
  top: 50%;
  right: calc(clamp(270px, 21vw, 350px) / 2);
  left: auto;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(73, 136, 196, 0.28), rgba(73, 136, 196, 0.08) 50%, transparent 72%);
  filter: blur(10px);
}

.hero-p50__flota {
  position: relative;
  width: clamp(270px, 21vw, 350px);
}

.hero-p50 .hero-p50__telefono {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 60px 120px -40px rgba(73, 136, 196, 0.75),
    0 40px 70px -30px rgba(0, 0, 0, 0.95);
}

/* --- Pie y botón de scroll --------------------------------------------------- */

.hero-p50 .hero-p50__pie {
  /* main.css le daba un relleno lateral propio al pie viejo: aquí manda el del
     `.container`, para que "Scroll" quede alineado con el titular y el logo. */
  padding: clamp(28px, 3.5vw, 48px) calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.hero-p50 .sec-1-home-11__reel:hover .sec-1-home-11__reel-ring {
  border-color: var(--hero-azul);
  background-color: var(--hero-azul);
}

/* --- Tableta y celular --------------------------------------------------------- */

@media (max-width: 991px) {
  /* main.css centraba el hero viejo en tableta; el nuevo queda alineado a la izquierda. */
  .hero-p50 .hero-p50__pie {
    justify-content: flex-start;
  }

  .hero-p50 .hero-p50__velo {
    background:
      linear-gradient(180deg, rgba(6, 8, 11, 0.8) 0%, rgba(6, 8, 11, 0.82) 55%, rgba(6, 8, 11, 0.96) 100%);
  }
}

@media (max-width: 575px) {
  .hero-p50__contenedor {
    padding-top: 108px;
  }

  .hero-p50__titulo {
    font-size: clamp(30px, 9.4vw, 44px);
    line-height: 1.06;
  }

  .hero-p50__subtitulo {
    margin-top: 20px;
    font-size: 15.5px;
  }

  .hero-p50__acciones {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 28px;
    gap: 10px;
  }

  .hero-p50__btn {
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    white-space: normal;
    text-align: center;
  }

  .hero-p50__nota {
    align-self: center;
  }

  .hero-p50__cifras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 32px;
    padding-top: 20px;
  }

  .hero-p50__cifra {
    padding: 0 10px;
  }

  .hero-p50__cifra-valor {
    font-size: 24px;
  }

  .hero-p50__cifra-etiqueta {
    font-size: 11.5px;
  }

  .hero-p50 .hero-p50__pie {
    justify-content: center;
    padding-top: 28px;
  }
}

/* --- Movimiento reducido: todo quieto y visible -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-p50 .sec-1-home-11__scroll-cta-icon {
    animation: none;
  }

  .hero-p50__btn,
  .hero-p50__btn--principal::before,
  .hero-p50__btn--principal svg {
    transition: none;
  }
}