/* =========================================================
   QUE HACEMOS — CSS
   ✅ + EFECTOS DE ENTRADA (premium, sin romper layout)
   ❌ No altera colores, tamaños ni responsive
========================================================= */

/* Recomendado global (evita rayitas por margin del body) */
html, body { margin: 0; padding: 0; }

.qhbg{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;

  /* ✅ entrada general */
  animation:qhFade .7s ease-out both;
}

/* Fondo curvo (IMG/SVG) */
.qhbg__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  z-index: 0;
  pointer-events: none;

  /* ✅ fade muy suave */
  animation:qhFade 1s ease-out both;
  animation-delay:.05s;
}

/* Contenedor */
.qhbg__container{
  position: relative;
  z-index: 1;

  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);

  padding-top: 56px;
  padding-bottom: 40px;

  /* ✅ entra desde abajo */
  animation:qhUp .85s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.08s;
  will-change:transform, opacity;
}

/* =========================
   GRID
========================= */
.qhbg__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  column-gap: 56px;

  padding: 0 35px;
}

/* =========================
   TEXTO
========================= */
.qhbg__copy{
  color: #FFFFFF;
  max-width: 620px;

  /* ✅ bloque de texto entra primero */
  animation:qhUp .9s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.14s;
  will-change:transform, opacity;
}

.qhbg__title{
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.2;
  margin: 0 0 16px 0;

  /* ✅ título con presencia */
  animation:qhTitle .95s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.18s;
  will-change:transform, opacity;
}

.qhbg__subtitle{
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 20px 0;
  max-width: 520px;

  /* ✅ subtítulo después */
  animation:qhUp .9s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.30s;
}

.qhbg__text{
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
  opacity: .95;
  margin: 0;

  /* ✅ texto final */
  animation:qhFade .8s ease-out both;
  animation-delay:.42s;
}

/* =========================
   IMAGEN (device)
========================= */
.qhbg__visual{
  display: flex;
  justify-content: center;
  align-items: flex-end;

  /* ✅ entra desde la derecha */
  animation:qhRight .95s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.22s;
  will-change:transform, opacity;
}

.qhbg__device{
  width: 460px;
  max-width: 100%;
  height: auto;
  transform: translateY(36px);
}

/* =========================
   TEXTO INFERIOR
========================= */
.qhbg__bottom{
  margin-top: 18px;
  padding: 35px 35px 0 35px;

  /* ✅ aparece suave */
  animation:qhUp .9s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.55s;
}

.qhbg__bottomText{
  font-size: 18px;
  line-height: 1.5;
  max-width: 900px;
  color: #011077;
  margin: 0;

  animation:qhFade .8s ease-out both;
  animation-delay:.62s;
}

/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes qhFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes qhUp{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes qhRight{
  from{
    opacity:0;
    transform:translateX(36px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes qhTitle{
  from{
    opacity:0;
    transform:translateY(18px);
    filter:blur(2px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

/* ✅ Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .qhbg,
  .qhbg__bg,
  .qhbg__container,
  .qhbg__copy,
  .qhbg__title,
  .qhbg__subtitle,
  .qhbg__text,
  .qhbg__visual,
  .qhbg__bottom,
  .qhbg__bottomText{
    animation:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}

/* =========================================================
   RESPONSIVE (TABLET)
========================================================= */
@media (max-width: 1024px){
  .qhbg__container{
    padding-top: 44px;
    padding-bottom: 34px;
  }

  .qhbg__grid{
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding: 0 24px;

    text-align: center;
    justify-items: center;
  }

  .qhbg__copy{ max-width: 760px; }

  .qhbg__visual{
    animation:qhUp .9s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:.24s;
  }

  .qhbg__device{
    width: min(420px, 92%);
    transform: translateY(18px);
  }

  .qhbg__bottom{ padding: 0 24px; }

  .qhbg__bottomText{
    margin: 0 auto;
    text-align: center;
    max-width: 760px;
  }
}

/* =========================================================
   RESPONSIVE (MOBILE) — FIX RAYA
========================================================= */
@media (max-width: 600px){
  .qhbg__container{
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .qhbg__bg{
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    transform: scale(1.02);
    transform-origin: center;
    object-fit: cover;
  }

  .qhbg__title{ font-size: 28px; margin-bottom: 12px; }
  .qhbg__subtitle{ font-size: 16px; margin-bottom: 14px; }
  .qhbg__text{ font-size: 15px; }

  .qhbg__device{
    width: min(420px, 92%);
    transform: translateY(10px);
  }

  .qhbg__bottom{
    padding: 18px;
    margin-top: 10px;
  }

  .qhbg__bottomText{
    font-size: 16px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
  }
}