/* ==========================================================================
   Aakway · Home (index principal) — intro loader, hero-menú y padding lateral
   ========================================================================== */

/* Intro loader: fondo blanco, spinner turquesa, logo y 3 letreros (clip-path) */
.intro-loader{
  position:fixed; inset:0; z-index:99999; background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  animation: introLift 1.15s cubic-bezier(.76,0,.24,1) forwards 2.8s;
}
.intro-inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(24px,5vh,44px); }
.intro-spinner{ position:relative; width:132px; height:132px; display:flex; align-items:center; justify-content:center; }
.intro-spinner::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid #e3f0f0; border-top-color:#008080; border-right-color:#00c0c0;
  animation: introSpin 1s linear infinite;
}
.intro-logo{ width:76px; height:76px; object-fit:contain; }
.intro-words{ display:flex; align-items:baseline; gap:clamp(14px,4vw,42px); overflow:hidden; padding:3px 0; }
.intro-word{
  display:inline-block; font-family:"Rubik"; font-weight:500; text-transform:uppercase;
  letter-spacing:3px; font-size:clamp(15px,2.6vw,26px); line-height:1;
  opacity:0; transform:translateY(120%); clip-path:inset(100% 0 0 0);
  animation: introTextIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-word:nth-child(1){ color:#002F2F; animation-delay:.45s; }
.intro-word:nth-child(2){ color:#008080; animation-delay:.95s; }
.intro-word:nth-child(3){ color:#00c0c0; animation-delay:1.45s; }
@keyframes introSpin{ to{ transform:rotate(360deg); } }
@keyframes introTextIn{
  0%{ transform:translateY(120%); opacity:0; clip-path:inset(100% 0 0 0); }
  60%{ opacity:1; }
  100%{ transform:translateY(0); opacity:1; clip-path:inset(0 0 0 0); }
}
@keyframes introLift{
  0%{ transform:translateY(0); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  55%{ clip-path:polygon(0 0,100% 0,100% 78%,0 100%); }
  100%{ transform:translateY(-100%); clip-path:polygon(0 0,100% 0,100% 0,0 0); visibility:hidden; }
}

/* Hero: menú de 7 iconos como cards estilo paquetes, dentro del video.
   Hero full-bleed 100vh x 100vw y por delante del body (antes z-index:-3 impedía el click). */
.video-container{ width:100vw; height:100vh; margin-top:0 !important; z-index:1 !important; }
#top{ position:absolute; top:0; left:0; right:0; z-index:30; }
.hero-menu .menuIconsItem{ cursor:pointer; }
.video-container .overlay{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:13vh var(--side-pad) 8vh; box-sizing:border-box; gap:clamp(18px,3.5vh,40px);
}

/* ===== Padding lateral homogeneo: desktop 5% · tablet/movil 2% ===== */
:root{ --side-pad:5%; }
.topHeader{ margin:0 !important; width:100% !important; padding:0 var(--side-pad) !important; box-sizing:border-box; }
.index .container{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.recomendation{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.firstStage .titleSlider{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; }
.firstStage .carousel-track{ max-width:none !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.productsInside{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.footer{ width:auto !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.footer .box_footer_father{ padding-left:0 !important; padding-right:0 !important; }
.footer .bottom{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }

#title{
  position:static !important; padding:0 !important; margin:0 !important;
  color:#fff; text-align:center; font-weight:300; letter-spacing:1px;
  font-size:clamp(24px,4vw,50px); text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.hero-menu{ width:100%; display:flex; flex-direction:column; align-items:center; gap:clamp(16px,3vh,30px); }
.hero-menu .menuIcons{ width:100%; margin:0; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.8vh,18px); }
.hero-menu .menuIconsBox{ width:auto; margin:0; display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(6px,1.2vw,16px); }
.hero-menu .menuIconsItem{
  width:clamp(90px,18vw,172px); aspect-ratio:1/1; margin:0; padding:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(5px,1vh,11px);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; text-decoration:none; box-sizing:border-box;
  transition:.35s cubic-bezier(.19,1,.22,1);
}
.hero-menu .menuIconsItem:hover{ background:rgba(255,255,255,.2); border-color:#fff; transform:translateY(-5px); }
.hero-menu .menuIconsItem img{ width:clamp(40px,7vw,74px); height:clamp(40px,7vw,74px); margin:0; filter:brightness(0) invert(1); }
.hero-menu .menuIconsItem p{ margin:0; color:#fff; font-family:"Rubik"; font-weight:600; font-size:clamp(11px,1.35vw,14px); letter-spacing:1px; text-transform:uppercase; line-height:1.15; text-align:center; }

@media (max-width:1024px){ :root{ --side-pad:2%; } }
@media (max-width:768px){
  .video-container .overlay{ padding:12vh var(--side-pad) 6vh; gap:clamp(14px,3vh,26px); }
}