/* m-hero — lo escribe su agente */

/* === m-hero === */
/* Barra, menú ☰, portada y franja de logos en tablet y móvil. */

/* ---------- barra y menú: todo lo que tiene botón ☰ (≤1180) ---------- */
@media (max-width:1180px){
  /* la barra compactada ponía un desenfoque a todo lo ancho detrás de la píldora:
     una banda borrosa sin fondo. La píldora ya lleva su propio cristal. */
  .cab[data-lui~="barra"][data-lui-fija="1"]{backdrop-filter:none;-webkit-backdrop-filter:none}

  .cab-pill{z-index:2}
  .cab-menu{border-color:rgb(157 123 255 / .32);
    background:radial-gradient(circle at 50% 0%,rgb(143 99 255 / .22),transparent 70%),rgb(12 9 24 / .7);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:border-color .3s,box-shadow .3s}
  .cab.abierto .cab-menu{border-color:rgb(157 123 255 / .7);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 0 24px -4px rgb(124 77 255 / .8)}
  .cab-menu i{width:19px}

  /* velo detrás del menú abierto: tapa la portada y cierra al tocarlo (parche de JS) */
  .cab.abierto::before{content:"";position:fixed;inset:0;z-index:-1;
    background:radial-gradient(90% 60% at 80% 0%,rgb(107 43 255 / .22),transparent 70%),rgb(3 2 9 / .72);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:mh-velo .35s ease both}

  .menu-movil:not(:has(.mm-nav)){position:relative;z-index:1;counter-reset:mm;grid-template-columns:1fr 1fr;gap:4px 10px;
    margin-top:10px;padding:12px;border-radius:28px;max-height:calc(100svh - 110px);overflow:auto;overscroll-behavior:contain;
    background:radial-gradient(120% 70% at 100% 0%,rgb(107 43 255 / .3),transparent 62%),linear-gradient(180deg,rgb(22 17 40 / .95),rgb(9 7 16 / .97));
    border:1px solid rgb(157 123 255 / .3);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 40px 90px -30px rgb(0 0 0 / .95),0 0 60px -30px rgb(124 77 255 / .7);
    backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
    transform-origin:top center;animation:mh-entra .42s cubic-bezier(.2,.8,.2,1) both}
  .menu-movil:not(:has(.mm-nav)) a{counter-increment:mm;position:relative;display:flex;align-items:center;gap:14px;min-height:58px;padding:14px 16px;
    border-radius:18px;font:600 22px/1.1 var(--titular);letter-spacing:-.025em;color:#f2f0fa;
    transition:background .25s,color .25s;animation:mh-enlace .5s cubic-bezier(.2,.8,.2,1) both}
  .menu-movil:not(:has(.mm-nav)) a::before{content:counter(mm,decimal-leading-zero);flex:none;width:24px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:#8f63ff}
  .menu-movil:not(:has(.mm-nav)) a::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border:solid rgb(201 184 255 / .45);border-width:1.6px 1.6px 0 0;
    transform:rotate(45deg);transition:border-color .25s,transform .25s}
  .menu-movil:not(:has(.mm-nav)) a:hover,.menu-movil:not(:has(.mm-nav)) a:focus-visible{background:rgb(157 123 255 / .12)}
  .menu-movil:not(:has(.mm-nav)) a:hover::after{border-color:#c9b8ff;transform:translateX(3px) rotate(45deg)}
  .menu-movil:not(:has(.mm-nav)) a:nth-child(2){animation-delay:.04s}
  .menu-movil:not(:has(.mm-nav)) a:nth-child(3){animation-delay:.08s}
  .menu-movil:not(:has(.mm-nav)) a:nth-child(4){animation-delay:.12s}
  .menu-movil:not(:has(.mm-nav)) a:nth-child(5){animation-delay:.16s}
  .menu-movil:not(:has(.mm-nav)) a:nth-child(6){animation-delay:.2s}
  /* Contacto cierra la lista como llamada a la acción */
  .menu-movil:not(:has(.mm-nav)) a:last-child{grid-column:1 / -1;justify-content:center;gap:12px;margin-top:10px;min-height:58px;border-radius:999px;
    font:600 16.5px/1 "Inter",sans-serif;letter-spacing:0;color:#fff;background:linear-gradient(180deg,#7d45ff,#5b1ff0);
    box-shadow:0 14px 40px -12px rgb(107 43 255 / .9),inset 0 1px 0 rgb(255 255 255 / .28)}
  .menu-movil:not(:has(.mm-nav)) a:last-child::before{display:none}
  .menu-movil:not(:has(.mm-nav)) a:last-child::after{margin-left:0;border-color:#fff}
  .menu-movil:not(:has(.mm-nav)) a:last-child:hover{background:linear-gradient(180deg,#8a57ff,#6a2fff)}
}
@keyframes mh-entra{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mh-enlace{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mh-velo{from{opacity:0}to{opacity:1}}
@keyframes mh-estela{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* ---------- tablet (641–1080) ---------- */
@media (min-width:641px) and (max-width:1080px){
  .hero .boton{min-height:54px;padding:0 26px;font-size:16px}
  .hero .entradilla{font-size:18px;line-height:1.6}
}
/* tablet en vertical: el titular se montaba sobre el globo y sobraba media pantalla
   debajo de los botones. El texto baja al tercio inferior y el globo queda libre. */
@media (min-width:641px) and (max-width:1080px) and (orientation:portrait){
  .hero{align-items:flex-end;padding-bottom:96px}
}

/* ---------- móvil (≤640) ---------- */
@media (max-width:640px){
  /* barra: logo con presencia y alineado con el texto de la portada */
  .cab-pill{height:62px;padding:0 7px 0 10px}
  .cab-pill .lui-logo{padding-left:10px}
  .cab .lui-logo img{height:25px}
  .cab-menu{width:48px;height:48px}

  /* menú: una columna, letra grande, fácil de tocar */
  .menu-movil:not(:has(.mm-nav)){grid-template-columns:1fr;gap:0;padding:10px;border-radius:26px}
  .menu-movil:not(:has(.mm-nav)) a{min-height:60px;font-size:24px}
  .menu-movil:not(:has(.mm-nav)) a:not(:last-child) + a:not(:last-child){background:linear-gradient(90deg,transparent,rgb(157 123 255 / .18) 18%,rgb(157 123 255 / .18) 82%,transparent) top/100% 1px no-repeat}

  /* portada */
  .hero{padding-bottom:64px}
  .hero h1{font-size:clamp(40px,11.8vw,48px);line-height:1.02;letter-spacing:-.045em;max-width:none;margin-bottom:22px}
  .hero h1 [data-lui~="rotan"] > :first-child{color:transparent;
    background:linear-gradient(100deg,#c9b8ff,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#8f63ff) 0 0/250% 100%;
    -webkit-background-clip:text;background-clip:text;padding-right:.04em;
    filter:drop-shadow(0 0 16px rgb(124 77 255 / .35));animation:mh-estela 7s ease-in-out infinite}
  .hero .entradilla{font-size:16.5px;line-height:1.62;color:#cbc9d6;max-width:none}
  .hero .acciones{flex-direction:column;gap:10px;margin-top:30px}
  .hero .acciones .boton{width:100%;justify-content:center;min-height:56px;font-size:16px;padding:0 22px}
  .hero .acciones .boton.borde{background:rgb(12 9 24 / .5);border-color:rgb(157 123 255 / .3);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  /* franja de logos: rótulo centrado entre dos filetes y logos a buen tamaño */
  .marcas{padding:26px 0 28px}
  .marcas .env{align-items:stretch;gap:20px}
  .marcas .rotulo{display:flex;justify-content:center;gap:14px;font-size:11px;letter-spacing:.2em;color:#8c8a99}
  .marcas .rotulo::before,.marcas .rotulo::after{content:"";display:block;flex:1;max-width:56px;height:1px;
    background:linear-gradient(90deg,transparent,rgb(157 123 255 / .45))}
  .marcas .rotulo::after{background:linear-gradient(270deg,transparent,rgb(157 123 255 / .45))}
  .marcas [data-lui="carrusel"]{--lui-hueco:44px;margin-inline:calc(-1 * var(--lado));width:auto;
    -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .marcas .marca{font-size:19px;color:#8a8896}
  .marcas .marca svg{width:21px;height:21px}
}

@media (max-width:370px){
  .hero h1{font-size:40px}
  .menu-movil:not(:has(.mm-nav)) a{font-size:22px;min-height:56px}
}

@media (prefers-reduced-motion:reduce){
  .menu-movil,.menu-movil:not(:has(.mm-nav)) a,.cab.abierto::before{animation:none}
  .hero h1 [data-lui~="rotan"] > :first-child{animation:none}
  .cab-menu,.menu-movil:not(:has(.mm-nav)) a,.menu-movil:not(:has(.mm-nav)) a::after{transition:none}
}
/* === fin m-hero === */

/* === globo === */
/* El globo (assets/globo.js) se coloca solo: a la derecha en escritorio y, en móvil y tablet vertical,
   centrado en el hueco entre la barra y el titular. Aquí sólo su entrada suave al estar listo. */
.hero.globo-ok .globo{animation:globo-entra 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes globo-entra{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.hero.globo-ok .globo{animation:none}}
/* === fin globo === */