/* ======================================================================
   LZK TOKENS — WHITE OVERRIDES (ALPHA)
   ----------------------------------------------------------------------
   White must be ONLY token overrides. No component rules here.
   Loaded AFTER tokens-black/tokens-accent to ensure it wins cascade.
   ====================================================================== */

html[data-skin="white"]{
  /* White palette */
  --bg: #f6f6f4;
  --fg: #0f0f0f;
  --muted: rgba(0,0,0,.70);

  /* Lines / soft surfaces */
  --line: rgba(0,0,0,.18);
  --soft: rgba(0,0,0,.08);

  /* Topbar / footer already tokenized */
  --topbar-bg: var(--w-92);
  --footer-bg: var(--w-92);
  --topbar-border: rgba(0,0,0,.08);
  --footer-border: rgba(0,0,0,.08);

  /* Invert the "white ladder" used by hero pills + dividers in black.
     Many hero elements use --w-* for subtle whites on black. In white,
     we map those steps to subtle blacks for the same contrast. */
  --w-00: var(--b-00);
  --w-05: var(--b-12);
  --w-06: var(--b-10);
  --w-10: var(--b-18);
  --w-16: var(--b-18);
  --w-22: var(--b-22);
  --w-60: var(--b-60);
  --w-78: var(--b-70);
  
  /* Shadows — make them lighter in white */
  --shadow: 0 8px 30px var(--b-18);
  --shadow-soft: 0 10px 34px var(--b-18);
  --shadow-lift: 0 18px 60px var(--b-28);
  --shadow-modal: 0 20px 60px var(--b-28);
  --shadow-gm: 0 20px 80px var(--b-28);
}

html[data-skin="white"]{
  --shadow: none;
  --shadow-soft: none;
  --shadow-lift: none;
  --shadow-modal: none;
  --shadow-gm: none;
}

/* WHITE — hard disable any remaining explicit shadows (legacy rules) */
html[data-skin="white"] .logo::before,
html[data-skin="white"] .nav-cta,
html[data-skin="white"] .lab-page .lab-cta-avatar,
html[data-skin="white"] .contact-visual img,
html[data-skin="white"] .lz-helmet,
html[data-skin="white"] .lz-stamp img,
html[data-skin="white"] .gm2-dialog{
  box-shadow: none !important;
  filter: none !important;
}

/* WHITE — PRO: kill shadows only (do NOT touch Vimeo/filters) */
html[data-skin="white"] .reel-frame,
html[data-skin="white"] #gloubo-mola .gm-card,
html[data-skin="white"] #gloubo-mola .gm-brand-item{
  box-shadow: none !important;
}

/* WHITE — safety: keep reel iframe fully visible */
html[data-skin="white"] .reel-frame iframe{
  opacity: 1 !important;
  filter: none !important;
}

/* WHITE — PRO / GOLUBO static cards: no shadow */
html[data-skin="white"] #gloubo-mola .service-card{
  box-shadow: none !important;
}

/* WHITE — PRO / GOLUBO overlay on hover must be white */
html[data-skin="white"] #gloubo-mola .gm-square__overlay{
  background: rgba(255,255,255,.92) !important;
}

html[data-skin="white"] #gloubo-mola .gm-square__overlay-text{
  color: #000 !important;
}

/* WHITE — PRO / GOLUBO: kill any residual shadow on left column container */
html[data-skin="white"] #gloubo-mola .gm-card,
html[data-skin="white"] #gloubo-mola .gm-square{
  box-shadow: none !important;
  filter: none !important;
}

/* WHITE — PRO / GOLUBO: nuclear option (kills any shadow/filter inside the right column grid too) */
html[data-skin="white"] #gloubo-mola .gm-card,
html[data-skin="white"] #gloubo-mola .gm-card *{
  box-shadow: none !important;
  filter: none !important;
}

/* WHITE — PRO / GOLUBO: if it still "looks like shadow", flatten surfaces (remove tinted card backgrounds) */
html[data-skin="white"] #gloubo-mola .gm-card{
  background: transparent !important;
}

html[data-skin="white"] #gloubo-mola .gm-brand-item{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

/* WHITE — PRO CTA (contact band has background image): regular text must be white (links unchanged) */
html[data-skin="white"] body.pro #contacto .contact-copy h2,
html[data-skin="white"] body.pro #contacto .contact-copy p{
  color: #fff !important;
}

/* WHITE — LAB CTA: regular text must be black (links unchanged) */
html[data-skin="white"] body.lab #contacto .contact-copy h2,
html[data-skin="white"] body.lab #contacto .contact-copy p{
  color: #000 !important;
}

/* WHITE — LAB CTA: regular text must be black (links unchanged) */
html[data-skin="white"] body.lab-page #contacto .lab-cta-quote,
html[data-skin="white"] body.lab-page #contacto .lab-cta-sub{
  color: #000 !important;
}

/* WHITE — MODALS: switch from black to white */
html[data-skin="white"] .modal__panel,
html[data-skin="white"] .gm-modal__dialog,
html[data-skin="white"] .gm2-dialog{
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}

html[data-skin="white"] .modal__backdrop,
html[data-skin="white"] .gm-modal__overlay{
  background: rgba(255,255,255,.85) !important;
}

html[data-skin="white"] .modal__close,
html[data-skin="white"] .gm-modal__close{
  background: rgba(0,0,0,.06) !important;
  color: #000 !important;
}

/* WHITE — MODALS: unified overlay/backdrop (mid grey so modal reads) */
html[data-skin="white"] .modal__backdrop,
html[data-skin="white"] .gm-modal__overlay,
html[data-skin="white"] .gm2-overlay,
html[data-skin="white"] .gm2-backdrop,
html[data-skin="white"] .gm2-backdrop2{
  background: rgba(0,0,0,.50) !important;
}

/* WHITE — MODAL panels: subtle border for separation */
html[data-skin="white"] .modal__panel,
html[data-skin="white"] .gm-modal__dialog,
html[data-skin="white"] .gm2-dialog{
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* WHITE — Universal Video Modal (HOME fav / PRO motion4startups / PRO grafico / LAB AG): bar + buttons */
html[data-skin="white"] .ag-modal__bar{
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
}

html[data-skin="white"] .ag-btn{
  background: rgba(0,0,0,.06) !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

html[data-skin="white"] .ag-btn:hover{
  background: rgba(0,0,0,.10) !important;
}

html[data-skin="white"] .ag-btn:disabled{
  opacity: .35 !important;
}

html[data-skin="white"] .ag-btn--close{
  background: rgba(0,0,0,.08) !important;
}

html[data-skin="white"] .ag-modal__bar,
html[data-skin="white"] .ag-modal__bar *{
  color: #000 !important;
}

/* WHITE — MODAL OVERLAYS: lighter (was too dark) */
html[data-skin="white"] .modal__backdrop,
html[data-skin="white"] .gm-modal__overlay,
html[data-skin="white"] .fs-overlay,
html[data-skin="white"] .gm2-overlay,
html[data-skin="white"] .gm2-backdrop,
html[data-skin="white"] .gm2-backdrop2{
  background: rgba(0,0,0,.32) !important;
}

/* WHITE — overlays for PRO/grafico & LAB/Archivografico modals */
html[data-skin="white"] .grafico-modal__overlay,
html[data-skin="white"] .archive-modal__overlay{
  background: rgba(0,0,0,.32) !important;
}

/* WHITE — FORCE ALL OVERLAYS LIGHT (catch-all) */
html[data-skin="white"] .overlay,
html[data-skin="white"] .overlay-bg,
html[data-skin="white"] .modal-overlay,
html[data-skin="white"] .backdrop,
html[data-skin="white"] [class*="overlay"]{
  background: rgba(0,0,0,.32) !important;
}

/* WHITE — AG modal (PRO/grafico + LAB/Archivografico): overlay lives on .ag-modal container */
html[data-skin="white"] .ag-modal{
  background: rgba(0,0,0,.32) !important;
}

/* WHITE — PRO/GOLUBO modal: footer/meta text must be black */
html[data-skin="white"] #gloubo-mola .gm-modal__meta,
html[data-skin="white"] #gloubo-mola .gm-modal__footer,
html[data-skin="white"] #gloubo-mola .gm-modal__footer *{
  color:#000 !important;
}

/* WHITE — Individual project pages background */
html[data-skin="white"] body.project-page,
html[data-skin="white"] body.project-page main,
html[data-skin="white"] .project-wrapper,
html[data-skin="white"] .project-page-wrapper{
  background: #ffffff !important;
  color: #000000 !important;
}

/* WHITE — Project pages (/proyectos/*): enable WHITE backgrounds when swatch is active */
html[data-skin="white"] body.case{
  background: #fff !important;
  color: #000 !important;
}

/* WHITE — soften top header shadow (HOME / PRO / LAB) */
html[data-skin="white"] header,
html[data-skin="white"] .navbar,
html[data-skin="white"] .site-header{
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* WHITE — soften/remove the top "vignette" in main background (was too strong) */
html[data-skin="white"] body{
  background-image: radial-gradient(900px 500px at 50% -120px, rgba(0,0,0,.03), transparent 60%) !important;
}

/* WHITE — kill top glow completely (it was still showing) */
html[data-skin="white"],
html[data-skin="white"] body{
  background-image: none !important;
  background: #fff !important;
}

html[data-skin="white"] body{
  background-repeat: no-repeat !important;
}

/* WHITE — nuke any top vignette layers (pseudo-elements / wrappers) */
html[data-skin="white"] body::before,
html[data-skin="white"] body::after,
html[data-skin="white"] main::before,
html[data-skin="white"] main::after,
html[data-skin="white"] .page::before,
html[data-skin="white"] .page::after,
html[data-skin="white"] .page-wrap::before,
html[data-skin="white"] .page-wrap::after,
html[data-skin="white"] .content::before,
html[data-skin="white"] .content::after,
html[data-skin="white"] #app::before,
html[data-skin="white"] #app::after{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* WHITE — also remove any stray top box-shadows on main wrappers */
html[data-skin="white"] main,
html[data-skin="white"] .page,
html[data-skin="white"] .page-wrap,
html[data-skin="white"] .content,
html[data-skin="white"] #app{
  box-shadow: none !important;
  filter: none !important;
}

/* WHITE — Topbar/Footer: remove blur wash that reads like a shadow band */
html[data-skin="white"] .topbar,
html[data-skin="white"] .footer,
html[data-skin="white"] .footer2.footer2bar,
html[data-skin="white"] .footer-new{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
}

html[data-skin="white"] .topbar{
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* WHITE — Topbar: absolutely flat (no line, no shadow, fully solid) */
html[data-skin="white"] .topbar{
  background: #fff !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html[data-skin="white"] .topbar *{
  box-shadow: none !important;
  filter: none !important;
}

/* WHITE — Top band still visible: nuke borders/inset shadows on first content containers */
html[data-skin="white"] main,
html[data-skin="white"] .page,
html[data-skin="white"] .page-wrap,
html[data-skin="white"] .content,
html[data-skin="white"] .hero,
html[data-skin="white"] .section:first-of-type{
  border-top: none !important;
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

/* WHITE — also kill any inset shadow that can look like a top band */
html[data-skin="white"] main,
html[data-skin="white"] .page,
html[data-skin="white"] .page-wrap,
html[data-skin="white"] .content{
  box-shadow: none !important;
}

/* WHITE — Services cards: outline only (no fill) */
html[data-skin="white"] .service-card{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

html[data-skin="white"] .service-card:hover{
  border-color: rgba(0,0,0,0.30) !important;
}

/* WHITE — HERO pills + primary button: softer gray (0.05) */
html[data-skin="white"]{
  --pill-bg: rgba(0,0,0,0.05);
  --ui-soft: rgba(0,0,0,0.05);
  --surface-soft: rgba(0,0,0,0.05);
}

html[data-skin="white"] .pill,
html[data-skin="white"] .tag,
html[data-skin="white"] .badge,
html[data-skin="white"] a.btn.primary,
html[data-skin="white"] .btn.primary{
  background: rgba(0,0,0,0.05) !important;
}

/* WHITE — HERO pill: match primary button alpha (0.05) */
html[data-skin="white"] .hero .pill,
html[data-skin="white"] .hero .tag,
html[data-skin="white"] .hero .badge,
html[data-skin="white"] .hero .kicker,
html[data-skin="white"] .hero-label,
html[data-skin="white"] .hero-pill{
  background: rgba(0,0,0,0.05) !important;
}

/* WHITE — HERO pill (.hero-kicker): match primary button softness (0.05) */
html[data-skin="white"] .hero-kicker{
  background: rgba(0,0,0,0.05) !important;
}