*{ box-sizing: border-box; }

   :root{
     /* Base */
     --bg: #07090c;
   
     /* Panels */
     --panel: #141923;
     --panel2: #0f131b;
   
     /* Text */
     --text: rgba(255,255,255,.92);
     --muted: rgba(255,255,255,.75);
   
     /* Accent (vida) */
     --accent: #3a7bd5;
     --accent2: #66b3ff;
   
     /* Lines / borders */
     --line: rgba(255,255,255,.10);
   
     /* Depth */
     --radius: 16px;
     --shadow: 0 16px 44px rgba(0,0,0,.55);
     --shadowSoft: 0 10px 24px rgba(0,0,0,.45);
   
     /* Layout */
     --max: 1200px;
     --pad: 24px;
   
     /* Nav */
     --navH: 74px;
   }
   
   html{ scroll-behavior: smooth; }
   
   body{
     margin: 0;
     background: var(--bg);
     color: var(--text);
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   }

   h1,h2,h3{
     color: rgba(255,255,255,.96);
     letter-spacing: .2px;
   }
   
   p{
     color: var(--muted);
     font-size: 1.03rem;
     line-height: 1.65;
   }
   

   main{
     padding: 60px 0 24px;
   }
   
   article{
     text-align: center;
     padding: 0 var(--pad);
   }
   
   article p{
     max-width: 900px;
     margin: 10px auto 0;
   }
   
   /* Sections centradas */
   .anchor-section,
   .scope,
   footer{
     max-width: var(--max);
     margin: 0 auto;
     padding-left: var(--pad);
     padding-right: var(--pad);
   }
   

   .anchor-section,
   .scope{
     position: relative;
     padding-top: 90px;
     padding-bottom: 90px;
     text-align: center;
   }
   
   .anchor-section::before,
   .scope::before{
     content: "";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: min(900px, 92%);
     height: 1px;
     background: rgba(255,255,255,.06);
   }
   

   .topbar{
     position: fixed;
     top: 0; left: 0; right: 0;
     height: var(--navH);
     background: rgba(0,0,0,.86);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255,255,255,.08);
     z-index: 9999;
   }
   
   .nav_spacer{ height: var(--navH); }
   
   .nav_container{
     max-width: var(--max);
     margin: 0 auto;
     height: 100%;
     padding: 0 var(--pad);
   
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
   }
   

   .logo{
     display: flex;
     align-items: center;
     min-width: 180px;
   }
   
   .logo img{
    height: 150px;              
    width: auto;
    display: block;
  

    filter: brightness(1.2) contrast(1.1)
            drop-shadow(0 0 8px rgba(58,123,213,.35));
  }
   

   nav ul{
     list-style: none;
     margin: 0;
     padding: 0;
   
     display: flex;
     align-items: center;
     gap: 14px;
   }
   
   nav ul li{
     border-right: none;
     padding-right: 0;
   }
   
   nav a{
     color: rgba(255,255,255,.78);
     text-decoration: none;
     font-size: 12px;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     padding: 10px 6px;
     position: relative;
     white-space: nowrap;
   }
   
   nav a:hover{ color: rgba(255,255,255,.96); }
   
   nav a::after{
     content: "";
     position: absolute;
     left: 6px;
     right: 6px;
     bottom: 6px;
     height: 2px;
     background: var(--accent2);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .18s ease;
   }
   
   nav a:hover::after{ transform: scaleX(1); }
 
   .hero{
     position: relative;
     height: 82vh;
     min-height: 520px;
     overflow: hidden;
   }
   
   .hero-video{
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.02);
   }
   
   .hero::after{
     content: "";
     position: absolute;
     inset: 0;
     background:
       radial-gradient(80% 80% at 50% 30%, rgba(0,0,0,.10), rgba(0,0,0,.72)),
       linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.72));
   }
   
   .overlay{
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     text-align: center;
     padding: 0 18px;
     z-index: 1;
   }
   
   .overlay h1{
     margin: 0;
     font-size: clamp(2.1rem, 4vw, 4.1rem);
     text-shadow: 0 18px 50px rgba(0,0,0,.7);
   }
   
   .overlay p{
     margin: 10px 0 0;
     font-size: clamp(1rem, 1.7vw, 1.4rem);
     color: rgba(255,255,255,.88);
   }
   

   .cajita_grande{
     max-width: var(--max);
     margin: 52px auto 0;
     padding: 0 var(--pad);
   
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
   }
   
   .cajita{
     border-radius: var(--radius);
     padding: 22px;
   
     /* más pro + vida */
     background: linear-gradient(
       180deg,
       rgba(24,32,48,.96),
       rgba(12,16,24,.96)
     );
     border: 1px solid rgba(58,123,213,.22);
     box-shadow: var(--shadowSoft);
   }
   
   .cajita h2{
     margin: 0 0 8px;
     color: rgba(255,255,255,.95);
   }
   
   .cajita p{
     margin: 0;
     color: rgba(255,255,255,.72);
     line-height: 1.55;
   }

   .botones{
     max-width: var(--max);
     margin: 38px auto 78px;
     padding: 0 var(--pad);
   
     display: flex;
     justify-content: center;
     gap: 16px;
   }
   

   button{
     appearance: none;
     border-radius: 14px;
   
     padding: 16px 28px;
     font-size: 15.5px;
     font-weight: 750;
     letter-spacing: 1px;
     text-transform: uppercase;
   
     cursor: pointer;
     box-shadow: var(--shadowSoft);
   
     border: 1px solid rgba(102,179,255,.35);
     background: linear-gradient(
       180deg,
       rgba(30,45,70,.90),
       rgba(14,18,28,.92)
     );
     color: rgba(255,255,255,.92);
   
     transition: transform .15s ease, background .2s ease, border-color .2s ease;
   }
   
   button:hover{
     transform: translateY(-1px);
     background: linear-gradient(
       180deg,
       rgba(58,123,213,.95),
       rgba(25,65,130,.95)
     );
     border-color: rgba(102,179,255,.65);
   }
   

   

   .section2{
     max-width: var(--max);
     margin: 0 auto 84px;
     padding: 0 var(--pad);
   
     display: grid;
     grid-template-columns: 1.2fr 1.3fr .9fr;
     gap: 18px;
     align-items: center;
   }
   
   /* Image card */
   .col-imagen img{
     width: 100%;
     height: 100%;
     min-height: 260px;
     object-fit: cover;
   
     border-radius: var(--radius);
     border: 1px solid rgba(255,255,255,.08);
     box-shadow: var(--shadow);
     display: block;
   }
   
 
   .col-texto{
     border-radius: var(--radius);
     padding: 26px;
     box-shadow: var(--shadow);
   
     border: 1px solid rgba(58,123,213,.35);
     background: radial-gradient(
       120% 120% at 20% 0%,
       rgba(58,123,213,.18),
       rgba(12,16,24,.96)
     );
   }
   
   .col-texto h1{
     margin: 0 0 10px;
     font-size: 2rem;
     color: rgba(255,255,255,.96);
   }
   
   .col-texto h2{
     margin: 0 0 14px;
     font-size: 1.05rem;
     color: rgba(102,179,255,.92);
     font-weight: 650;
   }
   
   .lista{
     margin: 0;
     padding-left: 18px;
     color: rgba(255,255,255,.78);
     line-height: 1.7;
   }
   

   .col-boton{
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .explore{
     padding: 16px 28px;
     font-size: 15.5px;
   }
   

   .anchor-section h2{
     margin: 0 0 10px;
     color: rgba(102,179,255,.95);
   }
   
   .anchor-section p{
     max-width: 900px;
     margin: 0 auto;
   }

   .scope h2{
     margin: 0 0 10px;
     color: rgba(102,179,255,.95);
   }
   
   .scope p{
     max-width: 950px;
     margin: 0 auto;
   }
   



.cajita_grande{
  margin-bottom: 60px;
}


.section2{
  margin-top: 40px;
}


.col-boton{
  margin-top: 20px;
}

   footer{
     border-top: 1px solid rgba(255,255,255,.08);
     padding: 26px var(--pad);
     text-align: center;
     color: rgba(255,255,255,.68);
   }
   
   footer p{ margin: 6px 0; }
   

   @media (max-width: 980px){
     .cajita_grande{
       grid-template-columns: 1fr;
     }
   
     .section2{
       grid-template-columns: 1fr;
       gap: 16px;
     }
   
     .col-boton{
       justify-content: flex-start;
     }
   
     .botones{
       flex-direction: column;
       align-items: stretch;
     }
   
     .botones button{
       width: 100%;
     }
   }
   
   @media (max-width: 760px){
     .topbar{
       height: auto;
       padding: 10px 0;
     }
   
     .nav_spacer{
       height: 96px;
     }
   
     .nav_container{
       height: auto;
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
     }
   
     nav ul{
       flex-wrap: wrap;
       gap: 8px 12px;
     }
   }