/* NOVA v4 — base */
:root{
  --bg:#0d1224; --panel:#121a34; --ink:#e8eeff; --muted:#a7b4d8;
  --brand:#69a8ff; --brand2:#7cf1d7; --ring:0 0 0 4px rgb(105 168 255 / .25);
  --radius:16px; --shadow:0 20px 60px rgb(0 0 0 / .35);
}
.theme-light{
  --bg:#ffffff; --panel:#f6f8ff; --ink:#0e1730; --muted:#5d6a86;
  --ring:0 0 0 4px rgb(37 99 235 / .25); --shadow:0 12px 40px rgb(2 6 23 / .15)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%,#243b6b55,transparent),
    radial-gradient(1000px 400px at 100% 0,#2a3e7833,transparent),
    var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif
}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw);margin-inline:auto}

/* ===== Logo por tema (desktop) ===== */
/* Oculta ambos por defecto */
.brand .logo{
  display:none;
  height:48px;
  width:auto;
  flex-shrink:0;
}
/* Muestra SOLO el que corresponde */
.theme-dark  .brand .logo--dark { display:inline-block; }
.theme-light .brand .logo--light{ display:inline-block; }

/* Wordmark (texto BUILDEREST) */
.wordmark{
  font-weight:800;
  letter-spacing:.5px;
  line-height:1;
  font-size:clamp(18px,2.2vw,28px);
  color:var(--ink);
  white-space:nowrap;
}

/* Footer más pequeño */
.footer .brand .logo{ height:44px; }

/* Desktop un poco más grande */
@media (min-width:1024px){
  .brand .logo{ height:56px; }
  .footer .brand .logo{ height:48px; }
}

/* ===== MÓVIL: mostrar SOLO el nombre (ocultar logo) ===== */
@media (max-width:600px){
  /* oculta el logo sin importar el tema */
  .brand .logo{ display:none !important; }
  /* asegúrate de que el texto sí se muestre en móvil */
  .wordmark{ display:inline !important; }
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,rgba(13,18,36,.9),transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid #1b2545
}
.theme-light .header{
  background:linear-gradient(180deg,var(--bg),transparent);
  border-bottom:1px solid #e6eaf5
}
.header__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none}

.nav a{margin-left:1rem;text-decoration:none;color:inherit;font-weight:700;opacity:.9}
.nav a:hover{opacity:1}
.controls{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.flag{border:1px solid #2b3761;border-radius:10px;background:#0f172a;font-size:18px;line-height:1;padding:.38rem .58rem;color:#e8eeff}
.mode{border:1px solid #2b3761;border-radius:999px;width:34px;height:34px;background:#0f172a;color:#7cf1d7}
.theme-light .flag,.theme-light .mode{border-color:#d0d7e7;background:#fff;color:#0e1730}

/* Primitives */
.btn{
  display:inline-block;border-radius:12px;padding:.85rem 1.15rem;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#0b1020;font-weight:800;text-decoration:none;box-shadow:0 12px 40px #69a8ff2e
}
.btn--sm{padding:.55rem .85rem}
.btn--ghost{background:transparent;color:#cfe1ff;border:2px solid #36538b}
.theme-light .btn--ghost{color:#2563eb;border-color:#2563eb}
.lead{color:var(--muted)}
.chip{
  display:inline-block;padding:.35rem .6rem;border-radius:999px;
  border:1px solid #23325d;background:linear-gradient(180deg,#141e3a,#0f1833);
  color:#cfe1ff;font-weight:800;letter-spacing:.3px;cursor:default
}
.theme-light .chip{border-color:#d0d7e7;background:#ffffff;color:#334155}
.row{display:flex;align-items:center}
.gap{gap:1rem}
.section{padding:72px 0}
.section--alt{background:linear-gradient(180deg,#0f1732,#0d1224)}
.theme-light .section--alt{background:linear-gradient(180deg,#f7faff,#ffffff)}
.card{
  background:linear-gradient(180deg,#ffffff14,#ffffff08);
  border:1px solid #24345f;border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)
}
.theme-light .card{background:#ffffff;border-color:#e6eaf5}
.card--form label{display:block;margin:.6rem 0}
input,select,textarea{
  width:100%;padding:.9rem;border-radius:12px;border:1px solid #2a365f;
  background:#0f172a;color:#e8eeff;font-size:1rem
}
.theme-light input,.theme-light select,.theme-light textarea{background:#ffffff;color:#0e1730;border-color:#cbd5e1}
select{appearance:auto}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring)}
.grid{display:grid;gap:1rem}
.grid--cards{grid-template-columns:repeat(5,1fr)}
/* Grid general */
.grid{display:grid;gap:1rem}

/* ===== Services grid (8 servicios: 4 + 4) ===== */
.services-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1060px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
.grid--prices{grid-template-columns:repeat(3,1fr)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.price{border:1px solid #253260;border-radius:var(--radius);padding:1.2rem;background:linear-gradient(180deg,#ffffff12,#ffffff06)}
.price.is-hot{border-color:var(--brand);box-shadow:0 16px 60px #69a8ff3b}
.theme-light .price{background:#ffffff;border-color:#e6eaf5;box-shadow:var(--shadow)}
.amount{font-size:2.1rem;font-weight:900;color:#cfe2ff;margin:.3rem 0}
.theme-light .amount{color:#2563eb}
.note{color:var(--muted)}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed #26345d}
.theme-light .list li{border-bottom-color:#e2e8f0}

/* Footer */
.footer{border-top:1px solid #1b2545;padding:24px 0;margin-top:24px;background:#111;color:#fff;font-size:.9rem}
.theme-light .footer{border-top-color:#e6eaf5;background:#fff;color:#0e1730}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;text-align:center}
.footer__bar .brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;font-weight:700}
.footer__bar img{display:block}

/* Hero */
.hero{padding:68px 0 48px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.stack{position:relative;height:280px}
.tile{
  position:absolute;inset:auto;border-radius:14px;border:1px solid #2a365f;
  box-shadow:inset 0 0 30px rgba(0,0,0,.35);background-size:cover;background-position:center;background-repeat:no-repeat
}
.t1{width:58%;height:58%;left:0;top:0;background-image:url("/assets/hero_cam.jpg")}
.t2{width:42%;height:42%;right:10%;top:14%;background-image:url("/assets/hero_sound.jpg")}
.t3{width:62%;height:24%;left:8%;bottom:12%;background-image:url("/assets/hero_net.jpg")}
.t4{width:26%;height:26%;right:0;bottom:0;background-image:url("/assets/hero_tv.jpg")}

/* Responsive base */
@media (max-width:1060px){
  .grid--cards{grid-template-columns:repeat(2,1fr)}
  .grid--prices,.contact{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .footer__bar{flex-direction:column;justify-content:center}
}

/* Mobile nav (dropdown) */
.nav__toggle{display:none;position:relative;width:42px;height:38px;border-radius:10px;border:1px solid #2b3761;background:#0f172a;color:inherit}
.theme-light .nav__toggle{background:#fff;border-color:#d0d7e7}
.nav__bar{display:block;width:22px;height:2px;margin:6px auto;background:currentColor;border-radius:2px}
@media (max-width: 920px){
  .nav__toggle{display:block}
  .nav{
    position:absolute;right:16px;top:64px;width:min(86vw,360px);
    display:none;flex-direction:column;gap:10px;padding:14px;
    background:#0f172a;border:1px solid #24345f;border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);z-index:80
  }
  .theme-light .nav{background:#ffffff;border-color:#e6eaf5;box-shadow:0 18px 50px rgba(2,6,23,.18)}
  .nav.is-open{display:flex;animation:navIn .16s ease-out}
  @keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .nav a{margin:0;padding:.75rem .7rem;border-radius:10px;opacity:1;color:var(--ink)}
  .nav a:hover{background:rgba(255,255,255,.06)}
  .theme-light .nav a{color:#0e1730}
  .theme-light .nav a:hover{background:#f5f7ff}
  .nav .btn{width:100%;text-align:center}
  .nav .controls{margin-left:0;justify-content:flex-start}
}

/* ===== Desktop: mostrar también controles (bandera + modo) ===== */
@media (min-width: 921px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .nav .controls {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
}

/* ===== WORK: filtros + galería + lightbox ===== */
.work__head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1rem}
.filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.filters .chip{cursor:pointer;user-select:none}
.filters .chip.is-active{outline:var(--ring)}
.filters__spacer{flex:1}
.filters__search{
  width:min(320px,50vw);padding:.7rem .9rem;border-radius:10px;
  border:1px solid #2a365f;background:#0f172a;color:var(--ink)
}
.theme-light .filters__search{background:#fff;border-color:#cbd5e1;color:#0e1730}

.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gitem{
  display:flex;flex-direction:column;gap:.55rem;
  background:linear-gradient(180deg,#ffffff10,#ffffff06);
  border:1px solid #24345f;border-radius:14px;padding:.6rem;
  opacity:1;transform:translateY(0);transition:.18s ease
}
.theme-light .gitem{background:#fff;border-color:#e6eaf5}
.gitem[hidden]{display:none!important}

.photo{
  display:block;border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;background:#0f172a;border:1px solid #2a365f
}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.photo:hover img{transform:scale(1.03)}
figcaption h4{margin:.1rem 0;font-size:1rem}
.badges{display:flex;gap:.35rem;flex-wrap:wrap}
.badge{
  display:inline-block;padding:.25rem .5rem;border-radius:999px;
  border:1px solid #23325d;color:#cfe1ff;font-size:.78rem;
  background:linear-gradient(180deg,#141e3a,#0f1833)
}
.theme-light .badge{color:#0e1730;border-color:#d0d7e7;background:#fff}

.lightbox{
  position:fixed;inset:0;display:none;place-items:center;
  background:rgba(0,10,25,.82);z-index:999;padding:5vh 5vw
}
.lightbox.is-open{display:grid;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox__img{
  max-width:92vw;max-height:76vh;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  border:1px solid #2a365f;background:#0f172a
}
.lightbox__caption{margin-top:.7rem;color:#cfe1ff;text-align:center}
.lightbox__close{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:12px;
  border:1px solid #2b3761;background:#0f172a;color:#cfe1ff;cursor:pointer
}
.theme-light .lightbox__close{background:#fff;color:#0e1730;border-color:#d0d7e7}

@media (max-width:560px){
  .filters__search{width:100%;order:3}
}

/* Gallery (simple) si quieres una rejilla clásica en otra sección */
.grid--gallery{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--gallery{grid-template-columns:1fr}}
.grid--gallery img{width:100%;display:block;border-radius:12px;object-fit:cover;aspect-ratio:4/3}

/* Ajuste de fila del formulario */
.card--form .row {
  display: flex;
  gap: 1rem;        /* espacio horizontal */
  flex-wrap: wrap;  /* permite que se apilen */
}

.card--form .row label {
  flex: 1;
  min-width: 200px; /* evita que se encojan demasiado */
}

/* En pantallas pequeñas (móvil), fuerza 1 columna */
@media (max-width: 600px) {
  .card--form .row {
    flex-direction: column;
    gap: 0.75rem; /* espacio vertical entre campos */
  }

  .card--form .row label {
    width: 100%; 
  }
}

/* Bloquea el scroll mientras carga */
html.is-loading { overflow: hidden; }

/* Overlay de carga */
#preloader{
  position: fixed; inset: 0; z-index: 2147483647;   /* bien arriba */
  display: grid; place-items: center;
  background: #0d1224; color: #e8eeff;
  min-height: 100dvh;                                /* corrige 100vh en móvil */
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
  visibility: visible; opacity: 1;
  pointer-events: auto;                              /* clicable mientras está activo */
}

/* Estado oculto: además de opacity/visibility, lo sacamos fuera del viewport */
#preloader.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;                              /* no captura eventos */
  transform: translateY(-2%);                       /* evita ghost text en móvil */
}

/* Spinner */
.spinner{
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #69a8ff; animation: spin 1s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Tema claro opcional */
.theme-light #preloader{ background:#ffffff; color:#0e1730 }
.theme-light .spinner{ border-color: rgba(2,6,23,.12); border-top-color:#2563eb }