*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    /* ── ESTILO DE LA PAGINA── */
    /* ── FRONT END── */
  /* ── COLORES INTERFAZ── */
  /* ── COLORES BOTONES DEGRADADO TRIPLE DE ACUERDO A PALETA── */
   /*─ ─ 4 PESTAÑAS / TIPO DE COLORR── */
    /*─ sE EMPIEZA A HEREDERAR PARA LAS PESTAÑAS─ */
    /*─ OBJETO COLOR─ */

  --navy:#0b0b36;--navy2:#0c0357ee;--blue:#0c7911;--blue2:#1251c5;
  --accent:#2f80ff;--cyan:#85e1f3fa;--cyan2:#00ffea;--white:#fff;
  --glass:rgba(71, 4, 255, 0.829);--glass-b:rgb(42, 29, 214);
  --green:#03e473cc;--gold:#290233a1;
  --font:'Cabinet Grotesk',sans-serif;
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--navy);color:var(--white);cursor:default;-webkit-font-smoothing:antialiased}
 
/* ── BG ELEMENTS ── */
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(47,128,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(47,128,255,0.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;animation:gridMove 24s linear infinite}
@keyframes gridMove{from{background-position:0 0}to{background-position:60px 60px}}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;animation:orbF 12s ease-in-out infinite}
/* Optimizamos los orbes para que no estiren la pantalla en celulares pequeños */
.orb1{width:min(520px, 100vw);height:min(520px, 100vw);background:radial-gradient(circle,rgba(47,128,255,0.08) 0%,transparent 70%);top:-150px;left:-150px}
.orb2{width:min(380px, 80vw);height:min(380px, 80vw);background:radial-gradient(circle,rgba(0,212,255,0.05) 0%,transparent 70%);bottom:-80px;right:5%;animation-delay:-5s;animation-duration:15s}
.orb3{width:min(280px, 60vw);height:min(280px, 60vw);background:radial-gradient(circle,rgba(0,255,234,0.03) 0%,transparent 70%);top:35%;left:50%;animation-delay:-9s;animation-duration:18s}
@keyframes orbF{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(30px,-40px) scale(1.05)}70%{transform:translate(-20px,25px) scale(.95)}}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
 
/* ── NAV DISEÑO ── */
/* Cambiado padding rígido por clamp responsivo para evitar roturas laterales */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px, 5vw, 80px);height:70px;background:rgba(2,13,31,0.85);border-bottom:1px solid var(--glass-b);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:navDrop .8s cubic-bezier(.16,1,.3,1) both}
@keyframes navDrop{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.logo{display:flex;align-items:center;gap:0px;text-decoration:none;cursor:pointer}
.logo-name{font-size:15px;font-weight:800;color:var(--white)}
.logo-sub{font-size:7.5px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);display:block}
.nav-links{display:flex;align-items:center;gap:clamp(15px, 6vw, 90px);list-style:none}
.nav-links a{font-size:13px;font-weight:500;color:rgba(255,255,255,0.55);text-decoration:none;transition:color .2s;position:relative;cursor:pointer}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--cyan);transition:width .3s}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--white)}
.btn-nav{background:linear-gradient(135deg,var(--accent),var(--cyan));color:var(--navy);border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;font-family:var(--font);position:relative;overflow:hidden;white-space:nowrap}
.btn-nav:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(47,128,255,0.4)}
 
/* ── SISTEMA DE PAGINA ── */
.page{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;opacity:0;pointer-events:none;transform:translateY(24px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.page.active{opacity:1;pointer-events:all;transform:translateY(0)}
 
/* ── ANIMACIONES ── */
/* Modificado el padding lateral rígido (56px) por uno fluido con clamp() */
.page-wrap{padding:100px clamp(20px, 4vw, 56px) 80px;min-height:100vh}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes lineRev{from{transform:translateY(110%)}to{transform:translateY(0)}}
.page.active .a1{animation:fadeUp .7s .05s both}
.page.active .a2{animation:fadeUp .7s .15s both}
.page.active .a3{animation:fadeUp .7s .25s both}
.page.active .a4{animation:fadeUp .7s .35s both}
.page.active .a5{animation:fadeUp .7s .45s both}
.page.active .al1{animation:fadeLeft .7s .05s both}
.page.active .al2{animation:fadeLeft .7s .2s both}
.page.active .al3{animation:fadeLeft .7s .35s both}
.page.active .ar1{animation:fadeRight .7s .1s both}
.rv{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rvl{opacity:0;transform:translateX(-32px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rvl.on{opacity:1;transform:none}
.rvr{opacity:0;transform:translateX(32px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rvr.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
 
/* ── BOTONES SECCIÓN DISEÑO DE COOLOR ── */
.btn-p{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:var(--navy);border:none;border-radius:10px;padding:13px 26px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;font-family:var(--font)}
.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan),var(--cyan2));opacity:0;transition:opacity .3s}
.btn-p:hover::after{opacity:1}
.btn-p span{position:relative;z-index:1;display:flex;align-items:center;gap:8px}
.btn-g{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.18);border-radius:10px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .25s;font-family:var(--font)}
.btn-g:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0, 0, 0, 0.05);transform:translateY(-3px)}
 
/* ── SECCIONAR ── */
.stag{font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.sh{font-size:clamp(24px, 5vw, 46px);font-weight:800;line-height:1.1;margin-bottom:12px;word-wrap:break-word;overflow-wrap:break-word}
.sh em{
  font-style:normal;
  font-family:var(--font);
  font-weight:900;
  font-size:1.0em;
  letter-spacing:-.5px;
  background:linear-gradient(135deg,#0416b9a4 0%,var(--cyan) 60%,var(--cyan2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ========================================================
   MODO RESPONSIVO PARA CUALQUIER DISPOSITIVO MÓVIL (MENOR A 768px)
   ======================================================== */
@media (max-width: 768px) {
    /* 1. Evitamos desbordes fantasma horizontales en la estructura global */
    html, body {
        overflow-x: hidden;
    }

    /* 2. Reestructuración del Nav para que no se rompa ni amontone */
    nav {
        height: auto;
        padding: 12px 20px;
        flex-direction: column;
        gap: 12px;
    }

    /* Acomodamos los enlaces del menú en fila fluida centrada */
    .nav-links {
        width: 100%;
        justify-content: center;
        gap: 20px; /* Separación balanceada para pantallas de 360px */
    }

    .nav-links a {
        font-size: 12px;
    }

    /* El botón se ajusta y previene que el texto se rompa en dos líneas */
    .btn-nav {
        padding: 6px 14px;
        font-size: 11px;
    }

    /* 3. Ajuste de espaciados de página para ganar área visible */
    .page-wrap {
        padding-top: 150px; /* Espacio extra arriba para que el Nav vertical no tape el contenido */
    }

    /* 4. Seguridad ante desbordes en textos generales */
    p, h1, h2, h3, h4, span, a {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 5. Aseguramos que cualquier botón principal no sobrepase el ancho del celular */
    .btn-p, .btn-g {
        width: 100%;
        max-width: 290px;
        justify-content: center;
    }
}

/* ========================================================
   SOLUCIÓN DEFINITIVA DE CORTE DE ANIMACIÓN AL FINAL DEL CSS
   ======================================================== */
@media (max-width: 768px) {
    /* 1. Anulamos el desfase de la animación lineRev */
    h1.hero-title .line,
    h1.hero-title .lr {
        display: block !important;
        transform: translateY(0) !important; /* Fuerza al texto a volver a su posición real */
        animation: none !important;          /* Apaga la animación que lo deja abajo */
        overflow: visible !important;        /* Permite que el texto se muestre */
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 2. Estilo del título adaptado al ancho de pantalla */
    h1.hero-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 32px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        width: 100% !important
        
          padding-top: 100px !important; 
        margin-bottom: 24px !important;
    }

    /* 3. Mantenemos el degradado original de PC */
    h1.hero-title .ital {
        display: inline-block !important;
        background-image: linear-gradient(135deg, #0416b9a4 0%, var(--cyan) 60%, var(--cyan2) 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}