/* =====================================================
   HERO — TEXTO COMO LA REFERENCIA FINAL
   (FONDO YA ES AZUL, NO SE SOBRECARGA)
   ✅ Tipografía mejorada
   ✅ Contenido centrado (texto)
   ✅ Botones: 1 grande + 1 más pequeño
   ✅ Mantiene efecto burbuja (hover)
   ✅ + EFECTO DE ENTRADA (sin afectar nada)
   Colores: #011077 / #000000 / #FFFFFF
===================================================== */

.hero{
  width:100%;
  background:#011077;
}

.hero__wrap{
  width:1440px;
  height:568px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:#011077;

  /* ✅ entrada general suave */
  animation:heroFade .9s ease-out both;
}

/* Imagen de fondo (ya tiene el azul correcto) */
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  z-index:0;

  /* ✅ entra un pelín después (sutil) */
  animation:heroFade 1.1s ease-out both;
  animation-delay:.05s;
}

/* Overlay MUY SUAVE (solo para contraste del texto) */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      152deg,
      rgba(1,16,119,.25) 0%,
      rgb(1 16 119 / 43%) 40%,
      rgb(1 16 119 / 44%) 65%,
      rgb(1 16 119 / 43%) 100%
    );

  /* ✅ entra con fade para no “golpear” */
  animation:heroFade .9s ease-out both;
  animation-delay:.1s;
}

/* =====================================================
   CONTENIDO — BLOQUE DERECHO
===================================================== */
.hero__content{
  position:relative;
  z-index:2;
  height:100%;
  width:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding-left:45%;
  padding-right:50px;

  text-align:center;
  color:#FFFFFF;

  /* ✅ mejora perf + evita micro saltos */
  will-change:transform, opacity;
}

/* =====================================================
   TÍTULO — ESTILO REFERENCIA
===================================================== */
.hero__title{
  max-width:760px;
  margin:0 auto 18px;

  font-size:clamp(32px, 3.2vw, 52px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.01em;

  color:#FFFFFF;
  text-shadow:0 10px 30px rgba(0,0,0,.35);

  /* ✅ entrada (desde abajo) */
  animation:heroFadeUp .8s ease-out both;
  animation-delay:.15s;
  will-change:transform, opacity;
}

/* =====================================================
   SUBTÍTULO — MÁS FINO Y AIREADO
===================================================== */
.hero__subtitle{
  max-width:620px;
  margin:0 auto 30px;

  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.02em;

  color:rgba(255,255,255,.85);

  /* ✅ entrada (desde abajo) */
  animation:heroFadeUp .8s ease-out both;
  animation-delay:.30s;
  will-change:transform, opacity;
}

/* =====================================================
   BOTONES — 1 grande + 1 pequeño + burbuja
===================================================== */
.hero__actions{
  width:100%;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center; /* ✅ centrados */

  /* ✅ entrada del grupo */
  animation:heroFadeUp .9s ease-out both;
  animation-delay:.45s;
  will-change:transform, opacity;
}

/* Base botón */
.hero__btn{
  /* ✅ el ancho lo controlamos por variante */
  height:56px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  text-decoration:none;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;

  border:0 !important;
  outline:0 !important;

  position:relative;
  overflow:hidden;
  isolation:isolate;
  z-index:0;

  -webkit-tap-highlight-color:transparent;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    color .22s ease,
    background .22s ease;

  will-change:transform, opacity;
}

/* ✅ tamaños como la referencia:
   - Primary más grande
   - Secondary más pequeño */
.hero__btn--primary{
  width:min(640px, 100%);  /* grande */

  /* ✅ entrada individual (desde la derecha) */
  animation:heroFadeLeft .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.55s;
}

.hero__btn--secondary{
  width:min(520px, 100%);  /* más pequeño */

  /* ✅ entrada individual (desde la derecha) */
  animation:heroFadeLeft .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.65s;
}

/* Focus */
.hero__btn:focus,
.hero__btn:focus-visible{
  outline:none !important;
  border:0 !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

/* =====================================================
   ESTILOS (manteniendo look + colores)
===================================================== */

/* Primary: pill azul con ligera “profundidad” */
.hero__btn--primary{
  color:#ffffff;
  background:linear-gradient(180deg, rgba(1,16,119,.98) 0%, rgba(1,16,119,.78) 100%);
  box-shadow:0 18px 38px rgba(0,0,0,.35);

  --flow:#011077;
}

/* Secondary: blanco */
.hero__btn--secondary{
  background:rgba(255,255,255,.92);
  color:#011077;
  box-shadow:0 14px 30px rgba(0,0,0,.22);

  --flow:#011077;
}

/* =====================================================
   EFECTO BURBUJA (tu efecto original)
===================================================== */
.hero__btn::before,
.hero__btn::after{
  content:"";
  position:absolute;
  bottom:0;
  width:50%;
  height:120%;
  background:var(--flow);
  border-radius:50%;
  transform:translateY(120%) scale(1);
  transition:transform .45s ease;
  z-index:-1;
  pointer-events:none;
}
.hero__btn::before{ left:0; }
.hero__btn::after{ left:50%; transition-delay:.12s; }

/* Hover */
.hero__btn:hover{
  transform:translateY(-2px);
  opacity:.98;
  color:#ffffff;
  border:0 !important;
}
.hero__btn:hover::before,
.hero__btn:hover::after{
  transform:translateY(0) scale(1.6);
}

/* Hover sombras */
.hero__btn--primary:hover{
  box-shadow:0 26px 54px rgba(0,0,0,.42);
}
.hero__btn--secondary:hover{
  box-shadow:0 20px 42px rgba(0,0,0,.30);
}

/* Active */
.hero__btn:active{
  transform:translateY(1px);
}

/* =====================================================
   ANIMACIONES DE ENTRADA — (SOLO ENTRADA, SIN TOCAR LO DEMÁS)
===================================================== */

/* Fade suave */
@keyframes heroFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Fade + slide desde abajo */
@keyframes heroFadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Fade + slide desde la derecha */
@keyframes heroFadeLeft{
  from{
    opacity:0;
    transform:translateX(60px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ✅ Accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .hero__wrap,
  .hero__bg,
  .hero__overlay,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__btn--primary,
  .hero__btn--secondary{
    animation:none !important;
  }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1440px){
  .hero__wrap{ width:100%; }
}

@media (max-width:1024px){
  .hero__content{
    padding-left:42%;
    padding-right:28px;
  }
  .hero__btn--primary{ width:min(600px, 100%); }
  .hero__btn--secondary{ width:min(480px, 100%); }
}

@media (max-width:820px){
  .hero__wrap{
    height:auto;
  }

  .hero__content{
    padding:56px 16px;
  }

  .hero__title{
    font-size:clamp(28px, 6vw, 42px);
  }

  /* En móvil, ambos a ancho completo (usabilidad) */
  .hero__btn--primary,
  .hero__btn--secondary{
    width:100%;
  }
}