:root{
  --bg:#0b0f14;
  --panel:#121826;
  --soft:#1b2336;
  --line:#2a3550;
  --text:#e8eefc;
  --muted:#9fb0d0;
  --brand:#79a7ff;
  --brand-dark:#0f3d8a;
  --accent:#00d1b2;
  --container:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Base */
body{
  margin:0;
  padding:clamp(16px,4vw,2cm);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:radial-gradient(60rem 60rem at -10% -20%, #141c2b 0, transparent 60%),var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1}
img,video{max-width:100%; height:auto; display:block}

/* NAVBAR (oscuro por defecto en desktop) */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(18,24,38,.75));
  backdrop-filter:blur(8px);
  padding:.8rem 1rem;
  border:1px solid var(--line);
  border-radius:16px;
}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text)}
.logo{width:38px; height:38px; object-fit:contain}
.logo.sm{width:28px; height:28px}
.brand-text{font-weight:800; letter-spacing:.5px}
.nav-links{display:flex; gap:.8rem; align-items:center}
.nav-links a{
  padding:.55rem .9rem;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  border-radius:10px;
  transition:background .2s ease;
}
.nav-links a:hover{background:var(--soft)}
.nav-links .active{border-color:var(--line); background:var(--panel)}
.nav-links .cta{background:var(--brand-dark); border-color:#0b2d68}

/* Botón hamburguesa (oculto en desktop) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:24px;
  cursor:pointer;
  color:#fff;
}

/* HERO */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; margin-top:1.2rem}
.hero-text h1{font-size:clamp(1.8rem,3vw,3rem); margin:.2rem 0 1rem}
.hero-text p{color:var(--muted)}
.hero-actions{display:flex; gap:.8rem; margin-top:1rem}
.btn{display:inline-block; padding:.7rem 1rem; border-radius:12px; background:var(--brand); color:#0a1020; font-weight:700; text-decoration:none; border:1px solid transparent}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.pill{border-radius:999px}
.btn.full{width:100%}
.center{text-align:center}

/* Carousel */
.carousel{position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#0d1220}
.carousel .slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease}
.carousel .slide.active{opacity:1}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); border:1px solid var(--line); color:#fff; font-size:1.6rem; padding:.1rem .6rem; border-radius:10px; cursor:pointer}
.carousel-btn.prev{left:.5rem} .carousel-btn.next{right:.5rem}

/* Sections */
.section{padding-top:1rem; margin-bottom:3.5rem}
.section h2{margin:.2rem 0 1rem}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem}
.card{background:var(--panel); border:1px solid var(--line); padding:1rem; border-radius:16px}

/* Servicios grid */
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0}
.service-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem; min-width:0}
.service-box .price{margin-top:.6rem; font-weight:800; color:var(--brand)}
.service-box h3{line-height:1.2; word-break:break-word}
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:.8rem; border-bottom:1px solid var(--line)}
.muted{color:var(--muted)}

/* Store: Importantes */
.subtitle{color:var(--muted); margin-top:-.6rem}
.important-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin:1.2rem 0 1.8rem}
.important-card{display:flex; flex-direction:column; gap:.6rem; background:var(--panel); border:1px solid var(--line); padding:1rem; border-radius:16px; text-decoration:none; color:var(--text)}
.important-card .thumb{height:180px; background:#26324d; border-radius:12px; border:1px dashed #3a4a72}
.important-card .thumb.clapper{position:relative}
.important-card h3{margin:0; text-align:center}

/* Tabs + categories */
.tab-panel{display:none}
.tab-panel.active{display:block}
.category-list{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem}
.chip{background:var(--soft); border:1px solid var(--line); color:var(--text); padding:.45rem .7rem; border-radius:999px; cursor:pointer}
.chip:hover{filter:brightness(1.1)}
.hidden{display:none}

/* REKTAZ */
.rektaz-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem}
.rektaz-item{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.rektaz-img{background:#1a2133; aspect-ratio:3/4}
.rektaz-title{padding:.8rem; font-weight:600}

/* Prebuilts */
.banner{background:linear-gradient(90deg,#0f3d8a,#143d6b); border:1px solid #0b2d68; padding:1rem; border-radius:16px; font-weight:600; margin-bottom:1.2rem}
.layout{display:grid; grid-template-columns:280px 1fr; gap:1.2rem}
.sidebar{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem}
.sidebar label{display:block; margin:.6rem 0 .4rem; color:var(--muted)}
.price-range{display:flex; gap:.5rem}
.stack{display:flex; flex-direction:column; gap:.3rem}
.content{min-height:420px}
.prebuilt-list{list-style:none; padding:0; margin:0; display:grid; gap:1rem}
.prebuilt-item{display:flex; gap:1rem; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem; align-items:center}
.prebuilt-item img{width:160px; height:120px; object-fit:cover; border-radius:12px}
.prebuilt-item .price{color:var(--accent)}
.cta-box{margin-top:1.2rem; background:var(--soft); border:1px dashed var(--line); padding:1rem; border-radius:16px}
.prebuilt-detail{display:grid; grid-template-columns:420px 1fr; gap:1.2rem}
.prebuilt-detail img{border-radius:16px; border:1px solid var(--line)}
.specs{columns:2; gap:2rem}

/* Nosotros */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.steps{margin:.2rem 0 0 1rem}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.team-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem; text-align:center}
.avatar{height:120px; border-radius:12px; background:#26324d; border:1px dashed #3a4a72}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.contact-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem; text-decoration:none; color:var(--text)}
.map-placeholder{height:180px; margin-top:.6rem; background:#26324d; border:1px dashed #3a4a72; border-radius:12px; display:flex; align-items:center; justify-content:center}

/* Footer */
.footer{
  margin-top:40px;
  padding:20px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
  border-top:1px solid var(--line);
  position:relative; bottom:0; width:100%;
}
.footer.simple{border:none; padding-top:0}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; align-items:center}
.copy{color:var(--muted)}

/* Titulares fluidos */
h1{font-size:clamp(1.6rem,2vw + 1rem,2.2rem)}
h2{font-size:clamp(1.2rem,1.4vw + .9rem,1.6rem)}

/* Responsive grids */
@media (max-width:1100px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.service-grid{grid-template-columns:1fr}}
@media (max-width:1000px){
  body{padding:1.2cm}
  .hero{grid-template-columns:1fr}
  .cards-3,.service-grid,.important-grid,.two-col,.team-grid,.contact-grid{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .prebuilt-detail{grid-template-columns:1fr}
}

/* ===== Fuerza navbar en móviles tipo OfertaSimple ===== */
@media (max-width:900px){
  body .navbar{
    background:#fff !important;
    border:1px solid #ddd !important;
    border-radius:0 !important;
  }
  body .brand-text{ color:#e74c3c !important; }

  body .nav-links{
    position:fixed !important;
    top:56px !important; left:0 !important; right:0 !important;
    background:#fff !important;
    flex-direction:column !important;
    gap:12px !important;
    padding:16px !important;
    border-top:1px solid #ddd !important;
    transform:translateY(-120%) !important;
    transition:transform .25s ease !important;
  }
  body .navbar.nav-open .nav-links{ transform:translateY(0) !important; }

  body .nav-links a{
    color:#222 !important;
    font-weight:500 !important;
    padding:10px 0 !important;
    width:100% !important;
    text-align:left !important;
    border:none !important;
    border-bottom:1px solid #eee !important;
    border-radius:0 !important;
    background:none !important;
  }
  body .nav-links a:hover,
  body .nav-links .active{ border-bottom:2px solid #e74c3c !important; }

  body .nav-links .cta{
    color:#e74c3c !important;
    font-weight:700 !important;
    background:none !important;
    border:none !important;
  }

  body .nav-toggle{
    display:block !important;
    background:transparent !important;
    border:0 !important;
    font-size:24px !important;
    color:#222 !important;
  }
}


















@media (max-width:900px){
  html body .navbar{
    background:#fff !important;
    border:0 !important;
    border-bottom:1px solid #ddd !important;
    border-radius:0 !important;
  }

  html body .nav-links{
    position:fixed !important;
    top:56px !important; left:0 !important; right:0 !important;
    background:#fff !important;
    display:flex !important; flex-direction:column !important;
    gap:8px !important; padding:12px !important;
    transform:translateY(-120%) !important;
    transition:transform .25s ease !important;
    z-index:999 !important;
  }
  html body .navbar.nav-open .nav-links{ transform:translateY(0) !important; }

  html body .nav-links a{
    color:#222 !important;
    background:none !important;
    border:none !important;
    border-bottom:1px solid #eee !important;
    padding:12px !important;
    text-align:left !important;
  }
  html body .nav-links a:hover,
  html body .nav-links .active{ border-bottom:2px solid #e74c3c !important; }

  html body .nav-toggle{
    display:block !important;
    background:none !important;
    border:none !important;
    font-size:26px !important;
    color:#222 !important;
  }
}