:root{
    --bg:#0b0b0d;
    --bg-alt:#111218;
    --text:#e9e9ee;
    --muted:#b9bac4;
    --accent:#9aa0ff;
    --card:#161824;
    --border:#22253a;
    --radius:18px;
    --maxw:1100px;
  }
  
  /* RESET */
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#050507 0%, #0b0b0d 60%);
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  
  /* SECCIONES */
  .section{
    max-width:var(--maxw);
    margin:0 auto;
    padding:60px 16px;
  }
  .section.alt{
    background:var(--bg-alt);
    border-top:1px solid #1f2130;
    border-bottom:1px solid #1f2130;
  }
  h2{
    font-size:1.8rem;
    margin:0 0 16px;
  }
  .muted{color:var(--muted)}
  
  /* NAV */
  .nav{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    backdrop-filter: blur(6px);
    z-index:10;
  }
  
  .nav-left{
    display:flex;
    gap:10px;
    align-items:center;
  }
  
  .logo{
    width:40px;
    height:40px;
    object-fit:contain;
  }
  
  .brand{
    font-weight:800;
    font-size:1.05rem;
  }
  
  /* Botón hamburguesa */
  .menu-btn{
    font-size:1.6rem;
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
  }
  
  /* Links ocultos en móvil por defecto */
  .nav-right{
    position:absolute;
    top:64px;
    right:16px;
    left:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    display:none;
    flex-direction:column;
    gap:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  
  .nav-right a{
    padding:10px 12px;
    border-radius:10px;
  }
  
  .nav-right a:hover{
    background:#0f1020;
  }
  
  /* Clase que abre el menú */
  .nav-right.open{
    display:flex;
  }
  
  /* HERO */
  .hero{
    min-height:90vh;
    background:
      radial-gradient(800px 400px at 20% -10%, #1b1e55 0%, transparent 60%),
      radial-gradient(600px 300px at 80% 10%, #3a124f 0%, transparent 60%),
      var(--bg);
    display:flex;
    flex-direction:column;
  }
  
  .hero-content{
    max-width:var(--maxw);
    margin:0 auto;
    padding:60px 16px 30px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  
  /* TITULO + LOGO */
  .hero-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    animation: fadeIn 1.2s ease;
  }
  
  .hero-text h1{
    font-size:2.4rem;
    line-height:1.15;
    margin:0;
    animation: slideIn 1.3s ease;
  }
  
  .accent{
    color:var(--accent);
    font-weight:800;
  }
  
  .hero-logo{
    width:120px;
    height:120px;
    object-fit:contain;
    animation: zoomIn 1.5s ease;
  }
  
  /* ANIMACIONES */
  @keyframes fadeIn{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
  }
  
  @keyframes slideIn{
    from{opacity:0;transform:translateX(-20px);}
    to{opacity:1;transform:translateX(0);}
  }
  
  @keyframes zoomIn{
    from{opacity:0;transform:scale(0.8);}
    to{opacity:1;transform:scale(1);}
  }
  
  /* VIDEO PRINCIPAL RESPONSIVE */
  .hero-video{
    margin-top:10px;
    width:100%;
    max-width:820px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    aspect-ratio:16/9;
  }
  .hero-video iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
  }
  
  /* GRID */
  .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  
  .card{
    background:var(--card);
    border:1px solid var(--border);
    padding:16px;
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .card h3{
    margin:0 0 6px;
    font-size:1.2rem;
  }
  .card p{
    margin:0;
    color:var(--muted);
    line-height:1.4;
  }
  
  /* MUESTRAS DE VIDEO (SHORTS 9:16) */
  .samples .sample-video{
    background:#0f1020;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    aspect-ratio:9/16;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  
  .sample-video iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
  }
  
  /* CONTACTO */
  .contact-box{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--card);
    border:1px solid var(--border);
    padding:16px;
    border-radius:16px;
    max-width:520px;
  }
  
  /* FOOTER */
  .footer{
    text-align:center;
    padding:26px 10px;
    color:var(--muted);
    border-top:1px solid #1f2130;
  }
  
  /* TABLET */
  @media (min-width:640px){
    .grid{
      grid-template-columns:repeat(2,1fr);
    }
    .hero-text h1{
      font-size:2.8rem;
    }
  }
  
  /* PC */
  @media (min-width:1024px){
    .menu-btn{display:none;}
  
    .nav-right{
      position:static;
      display:flex !important;
      flex-direction:row;
      background:transparent;
      border:none;
      padding:0;
      gap:16px;
      box-shadow:none;
    }
  
    .grid{
      grid-template-columns:repeat(4,1fr);
    }
  
    .hero-logo{
      width:180px;
      height:180px;
    }
  
    .hero-text h1{
      font-size:3.1rem;
    }
  
    .samples{
      grid-template-columns:repeat(3,1fr);
    }
  }
  root{
    --bg:#0b0b0d;
    --bg-alt:#111218;
    --text:#e9e9ee;
    --muted:#b9bac4;
    --accent:#9aa0ff;
    --card:#161824;
    --border:#22253a;
    --radius:18px;
    --maxw:1100px;
  }
  
  /* RESET */
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#050507 0%, #0b0b0d 60%);
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  
  /* SECCIONES */
  .section{
    max-width:var(--maxw);
    margin:0 auto;
    padding:60px 16px;
  }
  .section.alt{
    background:var(--bg-alt);
    border-top:1px solid #1f2130;
    border-bottom:1px solid #1f2130;
  }
  h1,h2{letter-spacing:.3px}
  h2{font-size:1.8rem;margin:0 0 16px}
  .muted{color:var(--muted)}
  
  /* HERO */
  .hero{
    min-height:90vh;
    background:
      radial-gradient(800px 400px at 20% -10%, #1b1e55 0%, transparent 60%),
      radial-gradient(600px 300px at 80% 10%, #3a124f 0%, transparent 60%),
      var(--bg);
    display:flex;
    flex-direction:column;
  }
  
  /* NAV MOBILE-FIRST */
  .nav{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    backdrop-filter: blur(6px);
    z-index:10;
  }
  
  .nav-left{
    display:flex;
    gap:10px;
    align-items:center;
  }
  
  .logo{
    width:40px;
    height:40px;
    object-fit:contain;
  }
  
  .brand{
    font-weight:800;
    font-size:1.05rem;
  }
  
  /* Botón hamburguesa */
  .menu-btn{
    font-size:1.6rem;
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
  }
  
  /* Links ocultos en móvil por defecto */
  .nav-right{
    position:absolute;
    top:64px;
    right:16px;
    left:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    display:none;              /* oculto */
    flex-direction:column;
    gap:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  
  .nav-right a{
    padding:10px 12px;
    border-radius:10px;
  }
  .nav-right a:hover{
    background:#0f1020;
  }
  
  /* Clase que activa el menú (la usará main.js) */
  .nav-right.open{
    display:flex;
  }
  
  /* HERO CONTENT */
  .hero-content{
    max-width:var(--maxw);
    margin:0 auto;
    padding:60px 16px 30px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .hero-content h1{
    font-size:2.4rem;
    line-height:1.12;
    margin:0;
  }
  .hero-content p{
    color:var(--muted);
    font-size:1.05rem;
    max-width:640px;
  }
  .hero-cta{
    display:flex;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
  }
  
  /* BOTONES */
  .btn{
    padding:10px 16px;
    border-radius:999px;
    border:1px solid #2a2d44;
    background:#141628;
    color:white;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
  }
  .btn-primary{
    background:var(--accent);
    color:#0c0c12;
    border:none;
  }
  .btn-ghost{
    background:transparent;
  }
  
  /* GRID + CARDS */
  .grid{
    display:grid;
    grid-template-columns:1fr;     /* móvil 1 columna */
    gap:14px;
  }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    padding:16px;
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .card h3{
    margin:0 0 6px;
    font-size:1.2rem;
  }
  .card p{
    margin:0;
    color:var(--muted);
    line-height:1.4;
  }
  
  /* MUESTRAS */
  .samples .sample{
    background:#0f1020;
    border:1px dashed #2b2e49;
    padding:26px;
    border-radius:14px;
    text-align:center;
    color:var(--muted);
    font-weight:600;
  }
  
  /* CONTACTO */
  .contact-box{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--card);
    border:1px solid var(--border);
    padding:14px;
    border-radius:14px;
    max-width:520px;
  }
  
  /* FOOTER */
  .footer{
    text-align:center;
    padding:26px 10px;
    color:var(--muted);
    border-top:1px solid #1f2130;
  }
  
  /* ====== BREAKPOINTS ====== */
  
  /* Tablets */
  @media (min-width: 640px){
    .hero-content h1{font-size:3rem}
    .grid{
      grid-template-columns:repeat(2,1fr);
    }
  }
  
  /* Desktop */
  @media (min-width: 1024px){
    .menu-btn{display:none;} /* ocultar hamburguesa */
  
    .nav-right{
      position:static;
      display:flex !important;
      flex-direction:row;
      background:transparent;
      border:none;
      padding:0;
      gap:16px;
      box-shadow:none;
    }
  
    .nav-right a{
      padding:6px 8px;
    }
  
    .grid{
      grid-template-columns:repeat(4,1fr);
    }
  
    .hero-content{
      padding-top:80px;
    }
  }
  
  /* HERO TITLE + LOGO A LA DERECHA */
.hero-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  
  .hero-title h1{
    flex:1;
  }
  
  .hero-logo{
    width:120px;      /* tamaño móvil */
    height:120px;
    object-fit:contain;
    margin-top:10px;
  }
  
  .accent{
    color:var(--accent);
    font-weight:800;
  }
  
  /* Desktop */
  @media (min-width: 768px){
    .hero-logo{
      width:180px;     /* tamaño PC */
      height:180px;
    }
  }
  /* HERO TITLE + ANIMACIONES */
.hero-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    animation: fadeIn 1.2s ease;
  }
  
  .hero-text h1{
    flex:1;
    animation: slideIn 1.3s ease;
  }
  
  .accent{
    color:var(--accent);
    font-weight:800;
  }
  
  /* LOGO A LA DERECHA */
  .hero-logo{
    width:120px;
    height:120px;
    object-fit:contain;
    animation: zoomIn 1.5s ease;
  }
  
  /* Animaciones */
  @keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
  }
  
  @keyframes slideIn{
    from{opacity:0; transform:translateX(-20px);}
    to{opacity:1; transform:translateX(0);}
  }
  
  @keyframes zoomIn{
    from{opacity:0; transform:scale(0.8);}
    to{opacity:1; transform:scale(1);}
  }
  
  /* Desktop */
  @media (min-width: 768px){
    .hero-logo{
      width:180px;
      height:180px;
    }
  
    .hero-title{
      gap:40px;
    }
  
    .hero-text h1{
      font-size:3.1rem;
    }
  }