/* =====================================================
   OPCIÓN BÁSICA - MOBILE FIRST FIX
   Menú móvil + ajuste de hero + botones compactos
===================================================== */

.mobile-menu-toggle,
.mobile-drawer,
.mobile-drawer-backdrop{
  display:none;
}

html, body{
  max-width:100%;
  overflow-x:hidden;
}

img, video, iframe{
  max-width:100%;
}

@media(max-width:900px){

  body{
    overflow-x:hidden !important;
    font-size:16px !important;
  }

  .topbar{
    display:none !important;
  }

  nav{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:14px 18px !important;
    background:#f6f1e7 !important;
  }

  .brand,
  .logo{
    max-width:155px !important;
    line-height:1.15 !important;
    font-size:20px !important;
  }

  .brand span,
  .logo span{
    display:inline !important;
  }

  .menu,
  .nav-links{
    display:none !important;
  }

  nav > .btn,
  .nav-inner > .btn{
    width:auto !important;
    min-height:40px !important;
    padding:10px 16px !important;
    border-radius:999px !important;
    font-size:0 !important;
    white-space:nowrap !important;
  }

  nav > .btn::after,
  .nav-inner > .btn::after{
    content:"Cotizar";
    font-size:14px;
    font-weight:900;
  }

  .mobile-menu-toggle{
    display:inline-grid !important;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.15);
    background:#0a0d11;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    z-index:1002;
  }

  .mobile-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.58);
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
    z-index:998;
  }

  .mobile-drawer{
    display:block;
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(84vw,360px);
    background:linear-gradient(145deg,#10151c,#050607);
    border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-30px 0 80px rgba(0,0,0,.45);
    transform:translateX(105%);
    transition:.35s ease;
    z-index:999;
    padding:86px 24px 28px;
  }

  .mobile-drawer.open{
    transform:translateX(0);
  }

  .mobile-drawer-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-drawer a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#f8f4eb;
    font-weight:800;
    padding:17px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    text-decoration:none;
  }

  .mobile-drawer a::after{
    content:"›";
    color:#bd9140;
    font-size:22px;
  }

  .mobile-drawer .drawer-cta{
    margin-top:22px;
    width:100%;
    justify-content:center;
    padding:14px 18px;
    border-radius:999px;
    background:#bd9140;
    color:#111;
    border:0;
  }

  .mobile-drawer .drawer-cta::after{
    content:"";
  }

  body.drawer-lock{
    overflow:hidden !important;
  }

  .hero{
    min-height:auto !important;
    display:block !important;
    padding:68px 22px 54px !important;
    background:#0a0d11 !important;
    color:#fff !important;
  }

  .hero h1{
    font-size:clamp(40px, 13vw, 58px) !important;
    line-height:.98 !important;
    letter-spacing:-1px !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
  }

  .hero p{
    font-size:19px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }

  .hero img{
    margin-top:26px !important;
    width:100% !important;
    height:auto !important;
    max-height:340px !important;
    object-fit:cover !important;
    border-radius:18px !important;
  }

  .stats,
  .service-grid,
  .steps,
  .portfolio-grid,
  .contact-wrap,
  .about,
  footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .stat{
    width:100% !important;
  }

  section{
    padding:58px 22px !important;
  }

  .title h2,
  .section-title h2,
  h2{
    font-size:clamp(30px, 10vw, 42px) !important;
    line-height:1.08 !important;
  }

  .about img,
  .portfolio-grid img,
  .portfolio-grid img:first-child{
    width:100% !important;
    height:auto !important;
    min-height:240px !important;
    max-height:340px !important;
    object-fit:cover !important;
    grid-row:auto !important;
  }

  .form{
    padding:22px !important;
  }

  input, textarea, select{
    font-size:16px !important;
  }

  footer{
    padding:38px 22px !important;
    text-align:left !important;
  }

  .whatsapp{
    width:54px !important;
    height:54px !important;
    right:16px !important;
    bottom:16px !important;
    font-size:24px !important;
  }

  .btn{
    max-width:100% !important;
    text-align:center !important;
  }
}

@media(max-width:380px){
  .hero h1{
    font-size:36px !important;
  }

  nav{
    padding:12px 14px !important;
  }

  .brand,
  .logo{
    font-size:18px !important;
    max-width:140px !important;
  }
}