/* =========================================================
   OKLYCOSMETICS — HERO REEL V6.0
   Solo afecta la sección hero.
   Desktop: imágenes 1920x900.
   Móvil: imágenes 1080x1350 + titular HTML arriba a la izquierda.
   ========================================================= */

.hero.hero-reel{
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
  min-height:0 !important;
  background:#f8e9e7 !important;
  isolation:isolate;
}

/* Neutraliza fondos del hero de versiones anteriores. */
.hero.hero-reel::before,
.hero.hero-reel::after{
  display:none !important;
  content:none !important;
}

.hero-reel-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f5e9e4;
}

.hero-reel-slides{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-reel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .75s ease, visibility .75s ease;
}

.hero-reel-slide.is-active{
  opacity:1;
  visibility:visible;
}

.hero-reel-slide,
.hero-reel-slide img{
  width:100%;
  height:100%;
}

.hero-reel-slide img{
  display:block;
  object-fit:cover;
  object-position:center center;
}

.hero-reel-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.hero-reel-primary,
.hero-reel-secondary,
.hero-reel-dots{
  z-index:2;
}

.hero-reel-primary{
  position:absolute;
}

.hero-reel-secondary{
  position:absolute;
}

.hero-reel-dots{
  position:absolute;
  display:flex;
  gap:8px;
}

.hero-reel-dots button{
  appearance:none;
  border:0;
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,.58);
  box-shadow:0 0 0 1px rgba(31,38,92,.16);
  cursor:pointer;
  transition:width .25s ease, background .25s ease;
}

.hero-reel-dots button.is-active{
  width:27px;
  border-radius:999px;
  background:#fff;
}

.hero-reel .hero-title-logo{
  filter:none !important;
}

.hero-reel .hero-actions{
  display:flex;
}

/* ---------------- DESKTOP / TABLET HORIZONTAL ---------------- */
@media(min-width:701px){
  .hero-reel-stage{
    /* Altura vinculada a la proporción real 1920 x 900. */
    height:clamp(620px,46.875vw,900px);
  }

  .hero-reel-shade{
    background:
      linear-gradient(90deg,
        rgba(252,235,233,.98) 0%,
        rgba(252,235,233,.94) 20%,
        rgba(251,235,232,.80) 33%,
        rgba(251,238,235,.35) 45%,
        rgba(251,238,235,0) 58%);
  }

  .hero-reel-primary{
    left:50%;
    top:11%;
    width:min(1180px,calc(100% - 40px));
    transform:translateX(-50%);
  }

  .hero-reel-primary .eyebrow{
    margin-bottom:14px;
    color:#765f5b;
  }

  .hero-reel-primary .hero-title-block{
    width:min(560px,47vw);
    gap:10px;
  }

  .hero-reel-primary h1{
    margin:0;
    color:#1b2a63;
    font-size:clamp(58px,5.25vw,94px);
    line-height:.91;
    letter-spacing:-.035em;
  }

  .hero-reel-primary .hero-title-logo{
    width:auto;
    height:clamp(80px,6.2vw,112px);
    max-width:320px;
    object-fit:contain;
  }

  .hero-reel-secondary{
    left:50%;
    bottom:7%;
    width:min(1180px,calc(100% - 40px));
    transform:translateX(-50%);
    padding:0;
  }

  .hero-reel-secondary .lead,
  .hero-reel-secondary > p:not(.lead){
    width:min(590px,48vw);
  }

  .hero-reel-secondary .lead{
    margin:0 0 14px;
    color:#1b2a63;
    font-size:clamp(20px,1.55vw,26px);
    line-height:1.28;
    font-weight:750;
  }

  .hero-reel-secondary > p:not(.lead){
    margin:0;
    color:#465476;
    font-size:clamp(15px,1.05vw,18px);
    line-height:1.52;
  }

  .hero-reel .hero-actions{
    margin-top:25px;
    gap:16px;
    flex-wrap:wrap;
  }

  .hero-reel .hero-actions .btn{
    min-height:60px;
    padding:0 30px;
    font-size:15px;
  }

  .hero-reel-dots{
    right:max(28px,calc((100% - 1180px)/2));
    bottom:28px;
  }
}

/* ---------------- MÓVIL: FOTO 4:5 + TITULAR HTML ---------------- */
@media(max-width:700px){
  .hero.hero-reel{
    background:#fff7f4 !important;
  }

  .hero-reel-stage{
    aspect-ratio:4/5;
    height:auto;
    min-height:0;
  }

  .hero-reel-slide img{
    object-position:center center;
  }

  .hero-reel-shade{
    /* Solo protege la lectura en la zona superior izquierda. */
    background:
      linear-gradient(145deg,
        rgba(255,248,245,.92) 0%,
        rgba(255,248,245,.74) 24%,
        rgba(255,248,245,.28) 44%,
        rgba(255,248,245,0) 59%);
  }

  .hero-reel-primary{
    top:6.5%;
    left:20px;
    right:20px;
    width:auto;
    transform:none;
  }

  .hero-reel-primary .eyebrow{
    max-width:250px;
    margin:0 0 10px;
    color:#765f5b;
    font-size:9px;
    letter-spacing:.19em;
  }

  .hero-reel-primary .hero-title-block{
    display:block;
    width:min(76vw,330px);
  }

  .hero-reel-primary h1{
    margin:0 0 8px;
    color:#1b2a63;
    font-size:clamp(39px,11.8vw,55px);
    line-height:.91;
    letter-spacing:-.035em;
  }

  .hero-reel-primary .hero-title-logo{
    display:block;
    width:auto;
    height:clamp(52px,15vw,72px);
    max-width:205px;
    object-fit:contain;
  }

  /* El resto de los textos y botones se conserva debajo de la fotografía:
     así no tapa las imágenes móviles y mantiene buena lectura. */
  .hero-reel-secondary{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    padding:24px 18px 28px;
    background:
      linear-gradient(180deg,#fff8f5 0%,#fbe9e7 100%);
  }

  .hero-reel-secondary .lead{
    margin:0 0 12px;
    color:#1b2a63;
    font-size:19px;
    line-height:1.32;
    font-weight:750;
  }

  .hero-reel-secondary > p:not(.lead){
    margin:0;
    color:#4d5875;
    font-size:15px;
    line-height:1.5;
  }

  .hero-reel .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
    margin-top:20px;
  }

  .hero-reel .hero-actions .btn{
    width:100%;
    min-height:55px;
    padding:0 20px;
    font-size:14px;
  }

  .hero-reel-dots{
    right:18px;
    bottom:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-reel-slide{
    transition:none;
  }
}


/* =========================================================
   V6.1 — AJUSTE SOLO PC
   Coloca textos secundarios y botones inmediatamente debajo
   de “Haz crecer tu negocio con OKLY”.
   MÓVIL NO SE MODIFICA.
   ========================================================= */
@media(min-width:701px){
  .hero-reel-secondary{
    left:50% !important;
    top:48% !important;
    bottom:auto !important;
    width:min(1180px,calc(100% - 40px)) !important;
    transform:translateX(-50%) !important;
    padding:0 !important;
  }

  .hero-reel-secondary .lead,
  .hero-reel-secondary > p:not(.lead){
    width:min(590px,48vw) !important;
  }

  .hero-reel-secondary .lead{
    margin:0 0 12px !important;
  }

  .hero-reel .hero-actions{
    margin-top:22px !important;
  }
}

/* Mantener exactamente el comportamiento móvil aprobado */
@media(max-width:700px){
  .hero-reel-secondary{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    padding:24px 18px 28px !important;
  }
}


/* =========================================================
   V6.2 — AJUSTE VERTICAL SOLO PC
   Sube el bloque secundario dentro de la fotografía, usando
   el espacio libre izquierdo mostrado en la referencia.
   MÓVIL NO SE MODIFICA.
   ========================================================= */
@media(min-width:701px){
  .hero-reel-secondary{
    top:36% !important;
    bottom:auto !important;
  }
}

/* Reafirma la versión móvil aprobada */
@media(max-width:700px){
  .hero-reel-secondary{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    padding:24px 18px 28px !important;
  }
}


/* =========================================================
   V6.3 — PC: BLOQUE COMPLETO DENTRO DE LA FOTO
   El texto y los botones quedan inmediatamente debajo del logo
   OKLY, sobre la imagen del carrusel.
   MÓVIL SE CONSERVA EXACTAMENTE COMO ESTABA.
   ========================================================= */

.hero-reel-secondary-desktop{ display:none; }
.hero-reel-secondary-mobile{ display:block; }

@media(min-width:701px){
  .hero-reel-secondary-desktop{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:52% !important;
    bottom:auto !important;
    width:min(1180px,calc(100% - 40px)) !important;
    transform:translateX(-50%) !important;
    padding:0 !important;
    z-index:3 !important;
  }

  .hero-reel-secondary-desktop .lead,
  .hero-reel-secondary-desktop > p:not(.lead){
    width:min(590px,48vw) !important;
  }

  .hero-reel-secondary-desktop .lead{
    margin:0 0 12px !important;
    color:#1b2a63 !important;
    font-size:clamp(20px,1.55vw,26px) !important;
    line-height:1.28 !important;
    font-weight:750 !important;
  }

  .hero-reel-secondary-desktop > p:not(.lead){
    margin:0 !important;
    color:#465476 !important;
    font-size:clamp(15px,1.05vw,18px) !important;
    line-height:1.52 !important;
  }

  .hero-reel-secondary-desktop .hero-actions{
    margin-top:22px !important;
    gap:16px !important;
    flex-wrap:wrap !important;
  }

  .hero-reel-secondary-desktop .hero-actions .btn{
    min-height:60px !important;
    padding:0 30px !important;
    font-size:15px !important;
  }

  .hero-reel-secondary-mobile{
    display:none !important;
  }
}

@media(max-width:700px){
  .hero-reel-secondary-desktop{
    display:none !important;
  }

  .hero-reel-secondary-mobile{
    display:block !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    padding:24px 18px 28px !important;
  }
}


/* =========================================================
   V6.4 — SEPARACIÓN VERTICAL SOLO PC
   Baja el bloque secundario para que no se monte sobre el logo.
   Móvil no cambia.
   ========================================================= */
@media(min-width:701px){
  .hero-reel-secondary-desktop{
    top:52% !important;
  }
}