/* ===============================
   Estilos base globales
================================ */

/* Tipografía (Montserrat) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root{
  --ink:#111; --bg:#fff; --muted:#666; --accent:#efc747;
  --font-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --wrap-max:1700px;

  /* Logos */
  --logo-h-desktop:104px;
  --logo-h-mobile:56px;
  --footer-logo-h:96px;

  /* Nav */
  --head-pad-x:clamp(16px,4vw,48px);
  --nav-gap:26px;
  --nav-size-desktop:15px;
  --nav-size-medium:14px;
  --nav-size-mobile:13px;

  /* Marquee */
  --marquee-dur:18s;

  /* Footer */
  --footer-gap:18px;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
a{ text-decoration:none; color:inherit }
img{ display:block; max-width:100% }
html, body, button, input, select, textarea{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Contenedor común */
.wrap, main{ width:min(1100px,92vw); margin-inline:auto; }

/* ===== Header (desktop) ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #eee;
}
.head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--head-pad-x);
}

/* Marca */
.brand img{ height:var(--logo-h-desktop); width:auto; }

/* Nav (desktop inline) */
nav{ display:flex; align-items:center; gap:var(--nav-gap); }
nav a{
  font-weight:600; font-size:var(--nav-size-desktop);
  letter-spacing:.02em; position:relative;
}
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:transparent; transition:background .2s ease;
}
nav a:hover{ color:var(--accent) }
nav a:hover::after{ background:var(--accent) }

/* RRSS solo en footer (ocultas en header) */
header .social{ display:none !important; }

/* Botón hamburguesa oculto en desktop */
.hamburger{ display:none; }

/* ===== Footer ===== */
footer{
  background:#111; color:#aaa;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 12px; border-top:none;
}
footer .footer-logo{
  height:var(--footer-logo-h); width:auto; display:block;
  margin-bottom:var(--footer-gap);
  opacity:.9; transition:opacity .25s ease;
}
footer .footer-logo:hover{ opacity:1 }
footer p{ margin:0; font-size:14px; letter-spacing:.03em; color:#aaa }
footer .social{ display:flex; gap:14px; margin-top:14px; }
footer .social img{
  width:24px; height:24px;
  opacity:.9; transition:opacity .2s, transform .2s;
}
footer .social img:hover{ opacity:1; transform:translateY(-2px) }

/* ===== Marquee ===== */
.hero-marquee{
  background:#fff; color:#000; overflow:hidden;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
}
.hero-marquee .marquee-inner,
.hero-marquee .marquee-track{
  display:flex; flex-wrap:nowrap; white-space:nowrap;
  will-change:transform;
  animation:mcMarquee var(--marquee-dur) linear infinite;
}
.hero-marquee span{
  display:inline-block; white-space:nowrap;
  padding:16px clamp(16px,4vw,40px);
  font-weight:800; letter-spacing:.01em;
  font-size:clamp(14px,3.2vw,18px);
}
@keyframes mcMarquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .hero-marquee .marquee-inner,
  .hero-marquee .marquee-track{ animation:none; }
}

/* ===== Botón volver arriba ===== */
#toTop{
  position:fixed; right:16px; bottom:20px; width:44px; height:44px; border-radius:50%;
  border:0; background:#000; color:#fff; font-size:22px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:1100;
}
#toTop.show{ opacity:.85; pointer-events:auto }
#toTop:hover{ transform:translateY(-2px); opacity:1 }

/* ===== Badge ===== */
.badge{ position:absolute; width:140px; height:140px; z-index:3; color:#111; pointer-events:none; }
.badge svg{ width:100%; height:100%; overflow:visible; animation:spin 12s linear infinite; transform-origin:50% 50% }
.badge text{ fill:#000; font-size:24px; font-weight:800; letter-spacing:8px }
.badge-tl{ top:16px; left:16px } .badge-tr{ top:16px; right:16px }
.badge-bl{ bottom:16px; left:16px } .badge-br{ bottom:16px; right:16px }
.badge-center{ top:50%; left:50%; transform:translate(-50%,-50%) }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ===== WORK: grid grande solo en /work ===== */
.work-page .wrap{ width:min(2000px,96vw); }
.work-page .work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(520px,1fr));
  gap:28px;
  padding:8px 0 48px;
  margin:0;
}
.work-page .work-grid.is-hidden{
  max-height:0; padding:0; margin:0; opacity:0; overflow:hidden; pointer-events:none;
  transition:max-height .35s ease, opacity .25s ease, filter .25s ease, padding .25s ease, margin .25s ease;
}

/* ===== Lightbox global ===== */
.lb-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.90);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1000;
}
.lb{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1001;
}
.lb.is-open, .lb-backdrop.is-open{ opacity:1; pointer-events:auto; }
.lb img{
  max-width:100vw; max-height:100vh; width:auto; height:auto; object-fit:contain;
  border-radius:0; box-shadow:none; user-select:none; -webkit-user-drag:none;
}
.lb-btn{
  position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:46px;
  z-index:1002; backdrop-filter:blur(4px);
}
.lb-btn:hover{ background:rgba(255,255,255,.26); }
.lb-prev{ left:20px; } .lb-next{ right:20px; }
.lb-close{
  position:fixed; top:20px; right:24px;
  width:42px; height:42px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.15); color:#fff; font-size:22px; line-height:42px; z-index:1003;
}
.lb-close:hover{ background:rgba(255,255,255,.25); }
.lb-counter{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:600; font-size:14px;
  background:rgba(0,0,0,.4); padding:6px 10px; border-radius:999px; z-index:1003;
}

/* ============= Responsive generales ============= */
@media (max-width:1400px){
  nav a{ font-size:var(--nav-size-medium); }
}
@media (max-width:900px){
  :root{ --marquee-dur:14s; --footer-logo-h:56px; --footer-gap:12px; }
  footer{ padding:40px 12px; }
}
@media (max-width:480px){
  :root{ --marquee-dur:10s; --footer-logo-h:48px; }
  .hero-marquee span{ padding:10px 14px; font-size:13px; }
  footer .social img{ width:22px; height:22px; }
}

/* ======= MÓVIL (≤900px): logo izq + hamburguesa der + menú off-canvas ======= */
@media (max-width: 900px){
  /* Header en fila */
  .head{
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 12px;
  }

  /* Logo reducido */
  .brand img{ height:var(--logo-h-mobile); }

  /* Hamburguesa: SIEMPRE 3 rayas blancas */
  .hamburger{
    display:inline-flex; width:40px; height:40px;
    align-items:center; justify-content:center;
    border:0; background:#111; border-radius:8px; z-index:1301;
  }
  .hamburger span{
    display:block; width:22px; height:2px; background:#fff;
  }
  .hamburger span + span{ margin-top:4px; }

  /* Drawer del menú (blanco y opaco, SIN velo) */
  #siteNav{
    position:fixed; top:0; right:0; bottom:0;
    width:min(86vw,380px);
    background:#fff; color:#111;
    transform:translateX(100%); transition:transform .3s ease;
    display:flex; flex-direction:column;
    padding:80px 24px 24px; gap:8px; z-index:1200;
    box-shadow:-16px 0 48px rgba(0,0,0,.18);
  }
  body.nav-open #siteNav{ transform:translateX(0); }

  #siteNav > a{
    display:block; font-size:18px; color:#111;
    padding:12px 0; border-bottom:1px solid #eee;
  }
  #siteNav > a:last-of-type{ border-bottom:0; }

  /* RRSS del footer en blanco */
  footer .social img{ filter:invert(1) brightness(1.1); }

  /* Desactiva cualquier velo si existiera por HTML antiguo */
  .nav-backdrop{ display:none !important; }
}
/* ===== [FINAL OVERRIDE v10] — móvil: drawer blanco + 3 rayas ===== */
@media (max-width:900px){

  /* Header: logo izq, burger der */
  .head{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:10px 12px !important;
  }
  .brand img{ height:var(--logo-h-mobile) !important; }

  /* Hamburguesa SIEMPRE con 3 barras blancas (nunca “X”) */
  .hamburger{
    display:inline-flex !important;
    width:40px; height:40px;
    align-items:center; justify-content:center;
    border:0; background:#111 !important; border-radius:8px;
    z-index:1301;
  }
  .hamburger span{
    display:block !important;
    width:20px; height:2px; background:#fff !important;
    margin:0 !important; transform:none !important; opacity:1 !important;
  }
  .hamburger span + span{ margin-top:4px !important; }
  body.nav-open .hamburger span{ transform:none !important; opacity:1 !important; }

  /* Drawer del menú — SIEMPRE opaco y desde la derecha */
  #siteNav{
    position:fixed !important; top:0; right:0; bottom:0;
    width:min(86vw,380px) !important;
    padding:80px 24px 24px !important;
    display:flex !important; flex-direction:column !important; gap:8px !important;
    background:#fff !important; color:#111 !important;
    box-shadow:-16px 0 48px rgba(0,0,0,.12) !important;
    transform:translateX(100%) !important;          /* cerrado */
    transition:transform .28s ease !important;
    z-index:1200 !important;
  }
  body.nav-open #siteNav{ transform:translateX(0) !important; } /* abierto */

  /* Items del menú */
  #siteNav > a{
    display:block !important; width:100% !important;
    padding:12px 0 !important; font-size:18px !important;
    text-align:left !important; border-bottom:1px solid #eee !important;
  }
  #siteNav > a:last-child{ border-bottom:0 !important; }

  /* Quita cualquier layout viejo/transparente que te lo pisa */
  nav{ position:static !important; width:auto !important; padding:0 !important;
       transform:none !important; opacity:1 !important; background:transparent !important; }
  header .social{ display:none !important; }   /* RRSS solo en footer */
  .nav-backdrop{ display:none !important; }    /* sin velo negro */
}