/* LZK_LUNA tokens.css (skins + tokens) */

/*
  SWATCH TOKEN SYSTEM — QUICK MAP

  app.css  = structure (never per-skin selectors)
  tokens.css = color + surface + state tokens (per-skin blocks only here)

  How to debug:
    1) Inspect element → find var(--token-name) used
    2) Search this file for that token
    3) :root = default fallback, html[data-skin="..."] = per-skin override

  Skins currently defined:
    base: black, white
    originals: yellow, red, blueberry
    swatch: snow, cinema, sandia, kiwi, melocoton, bubblegum, banana, lima, menta, strawberry, lavanda, grau
*/


/* === skinmaster.css === */


/* ================= GLOBAL DEFAULTS (:root) — BLOCK 1 ================= */
:root {
  --c-black: var(--c-black);
  --c-white: var(--c-white);
  --c-ink: var(--c-ink);
  --w-00: var(--w-00);
  --w-02: var(--w-02);
  --w-03: var(--w-03);
  --w-04: var(--w-04);
  --w-05: var(--w-05);
  --w-06: var(--w-06);
  --w-08: var(--w-08);
  --w-10: var(--w-10);
  --w-12: var(--w-12);
  --w-14: var(--w-14);
  --w-16: var(--w-16);
  --w-22: var(--w-22);
  --w-72: var(--w-72);
  --w-92: var(--w-92);
  --b-55: var(--b-55);
  --b-75: var(--b-75);
  --border-subtle: 1px solid var(--w-12);
  --ease-default: cubic-bezier(.4,0,.2,1);
  --t-fast: .2s;
  --t-med: .35s;
  --t-slow: .6s;
  --z-modal: 9000;
  --z-overlay: 8000;
  --z-nav: 7000;
  --b-00: var(--b-00);
  --b-35: var(--b-35);
  --b-50: var(--b-50);
  --b-60: var(--b-60);
  --b-70: var(--b-70);
  --b-72: var(--b-72);
  --b-78: var(--b-78);
  --w-07: var(--w-07);
  --w-18: var(--w-18);
  --w-35: var(--w-35);
  --w-52: var(--w-52);
  --w-55: var(--w-55);
  --w-60: var(--w-60);
  --w-70: var(--w-70);
  --w-78: var(--w-78);
  --w-95: var(--w-95);
  --c-black-0b: var(--c-black-0b);
  --c-black-0c: var(--c-black-0c);
  --c-black-0f: var(--c-black-0f);
  --c-black-1f: var(--c-black-1f);
  --ink-92: var(--ink-92);
  --b-10: var(--b-10);
  --b-28: var(--b-28);
  --b-86: var(--b-86);
  --b-90: var(--b-90);
  --w-25: var(--w-25);
  --w-32: var(--w-32);
  --w-50: var(--w-50);
  --w-62: var(--w-62);
  --w-65: var(--w-65);
  --w-74: var(--w-74);
  --w-86: var(--w-86);
  --w-96: var(--w-96);
  --b-06: var(--b-06);
  --b-18: var(--b-18);
  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);
  --glass-bg: var(--w-06);
  --glass-bg-soft: var(--w-04);
  --glass-bg-strong: var(--w-10);
  --glass-border: var(--line);
  --glass-border-soft: var(--soft);
  --overlay-dim: var(--b-55);
  --overlay-deep: var(--b-88);
  --shadow-elev: var(--shadow);
  --c-black: var(--c-black);
  --c-white: var(--c-white);
  --c-cyan: var(--c-cyan-39d7ff);
  --c-cyan-soft: var(--c-cyan-8fe9ff);
  --c-magenta: var(--c-magenta-ff3bd1);
  --w-04: var(--w-04);
  --w-05: var(--w-05);
  --w-06: var(--w-06);
  --w-08: var(--w-08);
  --w-10: var(--w-10);
  --w-14: var(--w-14);
  --w-22: var(--w-22);
  --b-45: var(--b-45);
  --b-55: var(--b-55);
  --b-65: var(--b-65);
  --b-88: var(--b-88);
  --b-96: var(--b-96);
  --bg: var(--c-black);
  --fg: var(--c-white);
  --muted: var(--w-72);
  --muted2: var(--w-52);
  --line: var(--w-14);
  --soft: var(--w-08);
  --max: 1100px;
  --pad: 22px;
  --topbar-h: 64px;
  --topbar-bg: var(--overlay-deep);
  --footer-bg: var(--overlay-deep);
  --shadow: 0 8px 30px var(--b-45);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-h1: clamp(34px, 4.4vw, 56px);
  --fs-h2: clamp(22px, 2.2vw, 30px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 1.25vw, 19px);
  --lh-tight: 1.15;
  --lh-loose: 1.65;
  --lh-body: 1.55;
  --ls-body: .15px;
  --ls-h1: -.6px;
  --ls-h2: -.2px;
  --ls-h3: -.15px;
  --p-maxch: 72ch;
  --p-my: 10px;
  --h1-mb: 14px;
  --h2-mb: 14px;
  --h3-mb: 10px;

  /* === ISO: Grids presets (Stage 4) === */
  --grid-services-cols: 4;
  --grid-services-gap: 24px;
  --grid-services-mt: 22px;
  --grid-process-cols: 4;
  --grid-process-gap: 24px;
  --grid-process-mt: 22px;
  --grid-portfolio-cols: 3;
  --grid-portfolio-gap: 14px;
  --grid-portfolio-mt: 18px;

  --accent: var(--c-cyan);
  --accent2: var(--c-magenta);
  --link-accent: var(--c-blue-4da3ff);
  --link-accent-hover: color-mix(in srgb, var(--c-blue-4da3ff) 72%, black);
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-soft: 0 10px 34px var(--b-45);
  --shadow-lift: 0 18px 60px var(--b-60);
  --shadow-modal: 0 20px 60px var(--b-60);
  --shadow-gm: 0 20px 80px var(--b-55);

  /* Token-driven hero underline/divider (used by app.css, no per-skin selectors) */
  --hero-underline-bg: linear-gradient(90deg, var(--w-60), var(--w-00));
  --hero-divider-bg: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  --exp-nav-fg: var(--fg);
}


/* === skins.css === */

/* ================= SKIN: BLACK ================= */
html[data-skin="black"] {
  /* Modal/footer bars in black skin: recover the dark grey separation from the page bg */
  --modalbar-bg: rgba(38,38,38,.96);
  --modalbar-border: rgba(255,255,255,.12);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(14,14,14,.92);
  --band-base-b: rgba(0,0,0,1);
  --band-grid-a: rgba(255,255,255,.08);
  --band-grid-b: rgba(255,255,255,.06);
  --band-glow-a: rgba(57,215,255,.22);
  --band-glow-b: rgba(255,59,209,.16);
  --band-img: none;

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--band-base-a), var(--band-base-b)),
    var(--band-img) center/cover no-repeat;

  --cta-band-img: none;
}


/* ================= SKIN: WHITE ================= */
html[data-skin="white"] {
  --footer-lang-border: var(--w-14);
  --footer-lang-bg: var(--w-04);

  --bg: #f6f6f4;
  --fg: #0f0f0f;
  --w-04: var(--b-08);
  --w-05: var(--b-12);
  --w-06: var(--b-12);
  --w-08: var(--b-12);
  --w-10: var(--b-18);
  --w-14: var(--b-18);
  --w-16: var(--b-18);
  --w-18: var(--b-22);
  --w-22: var(--b-22);
  --w-52: var(--b-55);
  --w-72: var(--b-70);
  --w-78: var(--b-70);
  --muted: var(--b-70);
  --muted2: var(--b-55);
  --line: var(--b-18);
  --soft: var(--b-08);
  --overlay-dim: var(--w-78);
  --overlay-deep: var(--w-92);
  --topbar-bg: var(--w-92);
  --footer-bg: var(--w-92);
  --topbar-border: rgba(0,0,0,.08);
  --footer-border: rgba(0,0,0,.08);
  --glass-bg: var(--b-08);
  --glass-bg-soft: var(--b-08);
  --glass-bg-strong: var(--b-12);
  --glass-border: var(--line);
  --glass-border-soft: var(--soft);
  --glass-border-strong: var(--b-22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(246,246,244,1);
  --band-base-b: rgba(246,246,244,1);
  --band-grid-a: rgba(0,0,0,.07);
  --band-grid-b: rgba(0,0,0,.05);
  --band-glow-a: rgba(57,215,255,.10);
  --band-glow-b: rgba(255,59,209,.08);
  --band-img: none;

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--band-base-a), var(--band-base-b)),
    var(--band-img) center/cover no-repeat;

  --cta-band-img: none;

  /* Hero underline/divider tuned for WHITE (dark ink) */
  --hero-underline-bg: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  --hero-divider-bg: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.06));
  --exp-nav-fg: var(--fg);

}


/* =========================================================
   LAPTOP MODE OVERRIDES (loaded late via skins.css)
   Purpose: ensure Laptop typography wins over page CSS files
   Trigger: desktop width + low viewport height
   ========================================================= */
@media (min-width: 1024px) and (max-height: 820px) {
  /* Master rail for Laptop: align major sections to the same inner width */
  :root{
    --laptop-rail: 860px;
    /* Video "hero" standard in Laptop (HOME reel + large LAB players + modal video stage) */
    --laptop-video-maxw: 780px;
    /* Approx height of the modal control bar (ag-modal__bar). Used to compute a safe video size. */
    --laptop-modal-bar-h: 80px;
  }

  /* Default: any section that already uses a .container gets aligned automatically */
  .section > .container{
    max-width: var(--laptop-rail);
    width: 100%;
    margin-inline: auto;
  }

  /* LAB: CTA block (not a .section container) must align to the same master rail */
  body.lab-page .lab-cta-wrap{
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
  body.lab-page .lab-cta-inner{
    max-width: var(--laptop-rail);
    width: 100%;
    margin-inline: auto;
  }

  /* Shell chrome must follow the same mode logic:
     Laptop = inner rail, Desktop = default outer rail. */
  .topbar-inner,
  .footer.footerbar > .container{
    max-width: var(--laptop-rail);
    width: 100%;
    margin-inline: auto;
  }

  /* HOME: logo/stamp band is outside `.section > .container`,
     so align its inner content explicitly in Laptop. */
  body.home #presentacion .lz-band > .container{
    max-width: var(--laptop-rail);
    width: 100%;
    margin-inline: auto;
  }

  /* Hero typography (Home / Pro / Lab) */
  .section.hero h1,
  .hero h1{
    font-size: clamp(34px, 4.2vw, 46px);
    line-height: 1.03;
    margin: 0 0 10px;
  }
  .section.hero .hero-sub,
  .hero .hero-sub{
    font-size: 16.5px;
    line-height: 1.35;
    margin: 0 0 8px;
  }
  .section.hero .hero-desc,
  .hero .hero-desc{
    font-size: 14.25px;
    line-height: 1.55;
  }

  /* Hero pills / buttons (keep Desktop unchanged; compact only in Laptop) */
  .section.hero .btn,
  .section.hero a.btn,
  .section.hero button.btn,
  .hero-cta .btn,
  .hero-cta a.btn,
  .hero-cta button.btn {
    padding: 9px 13px;
    min-height: 36px;
    border-radius: 12px;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.1;
  }

  /* HOME: Reel should breathe + feel smaller (avoid edge-to-edge + reduce perceived crop) */
  body.home .section.reel {
    padding-top: clamp(28px, 3vw, 44px);
    padding-bottom: clamp(28px, 3vw, 44px);
  }
  body.home .section.reel > .container {
    max-width: var(--laptop-video-maxw); /* slightly narrower in Laptop to reduce overall reel footprint */
  }
  body.home .section.reel .reel-embed {
    /* Keep true 16:9 to avoid odd letterboxing; make the whole block smaller instead */
    padding-top: 56.25%;
    max-width: var(--laptop-video-maxw);
    margin: 10px auto 0;
    background-image: url("../img/reel/reel-thumb.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,.06);
  }
/* HOME reel baseline: thumb as poster (no JS, no skeleton overlays) */
body.home .section.reel .reel-embed::before{
  display:none !important;
  opacity:0 !important;
}


  /* HOME – Video modal: keep the whole panel visible (no inner scroll). If height is tight,
     reduce the video proportionally by shrinking the panel width.
     Goal: modal "stage" behaves like the HOME reel (same max width, 16:9, but can shrink). */
  /* VIDEO MODALS (HOME / PRO / LAB): keep 16:9 stage fully visible in Laptop.
     The modal shrinks proportionally (width driven by available height) — no deformation. */
  body.home #video-modal .modal__panel,
  body.pro #video-modal .modal__panel,
  body.lab-page #video-modal .modal__panel{
    /* Width is capped by our laptop video standard, but can shrink if viewport height is low */
    width: min(
      var(--laptop-video-maxw),
      calc((100dvh - 40px - var(--laptop-modal-bar-h)) * 16 / 9)
    );
    max-width: calc(100dvw - 40px);
    max-height: calc(100dvh - 40px);
  }

  /* PRO: Freelance modal uses a bottom footer (taller than ag-modal__bar), so reserve a bit more room */
  body.pro #pro-freelance-modal .modal__panel{
    width: min(
      var(--laptop-video-maxw),
      calc((100dvh - 40px - 140px) * 16 / 9)
    );
    max-width: calc(100dvw - 40px);
    max-height: calc(100dvh - 40px);
  }

  /* PRO: Freelance modal meta (right-side text) — prevent long strings from inflating the footer
     and destabilizing the panel sizing in Laptop. Keep the meta visible but compact.
     Strategy: slightly smaller type + single-line ellipsis per line. */
  body.pro #pro-freelance-modal .modal__meta{
    max-width: 260px;
    flex: 0 1 260px;
    min-width: 0;
  }
  body.pro #pro-freelance-modal .modal__meta-line{
    font-size: 12.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* PRO: Freelance modal footer — keep meta on the right in the same row (no wrap) */
  body.pro #pro-freelance-modal .modal__footer{
    flex-wrap: nowrap;
    align-items: center;
  }
  body.pro #pro-freelance-modal .modal__nav{
    flex: 1 1 auto;
    min-width: 0;
  }
  body.pro #pro-freelance-modal .modal__meta{
    margin-left: auto;
  }

  body.home #video-modal .modal__frame,
  body.pro #video-modal .modal__frame,
  body.lab-page #video-modal .modal__frame,
  body.pro #pro-freelance-modal .modal__frame{
    aspect-ratio: 16/9;
  }

  /* PRO: Golubo (gmModal / gmModalV2) — constrain dialog to viewport height and shrink video ratio area in Laptop */
  body.pro #gmModal .gm-modal__dialog,
  body.pro #gmModalV2 .gm-modal__dialog{
    max-height: calc(100dvh - 40px);
  }
  body.pro #gmModal .gm-panel,
  body.pro #gmModalV2 .gm-panel{
    max-height: calc(100dvh - 40px);
  }
  body.pro #gmModal .gm-video__ratio,
  body.pro #gmModalV2 .gm-video__ratio{
    width: min(
      var(--laptop-video-maxw),
      calc((100dvh - 220px) * 16 / 9)
    );
    max-width: 100%;
    margin-inline: auto;
  }

/* HOME: Work process must stay 1 row / 4 columns in Laptop */
  body.home #proceso .process-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
  body.home #proceso .process-icons .ptitle { font-size: 14px; }
  body.home #proceso .process-icons .pdesc { font-size: 12.75px; }


  /* LAB – Obeja Roller main player: match HOME reel size in Laptop */
  body.lab-page #obeja .obr-cinema {
    max-width: var(--laptop-video-maxw);
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
   iPad PORTRAIT: keep HOME "Proceso de trabajo" in 4 columns
   Covers iPad mini (744), iPad 11 (820/834), iPad 13 (1024)
   ========================================================= */
/*
  Tablet portrait rail.
  Use aspect-ratio instead of (orientation: portrait) because some browsers/devtools
  can report orientation inconsistently when emulating iPad sizes.
*/
@media (min-width: 700px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  html{
    --max: 860px;
  }


  /* Keep full-bleed backgrounds: do NOT constrain sections; only the inner .container rail changes via --max */

  html body.home .process-icons,
  html body.home .section.process .process-icons,
  html body.home #proceso .process-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* Slightly tighter type so the step titles stay on one line */
  html body.home .process-icons .ptitle,
  html body.home #proceso .process-icons .ptitle {
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  html body.home .process-icons .pdesc,
  html body.home #proceso .process-icons .pdesc {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  /* HOME: SVG-logo band background must stay full-bleed */
  html body.home .lz-band{
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Desktop alignment: sections that are marked as `.container.narrow` for readability
   should align with the main rail on large screens. This keeps iPad portrait rail
   padding intact while restoring desktop outer alignment. */
@media (min-width: 1200px) and (min-height: 821px) {
  body.home #agencias .container.narrow,
  body.home #proceso .container.narrow,
  body.home #trayectoria .container.narrow,
  body.pro #grafico .container.narrow,
  body.lab-page #los-comienzos .container.narrow,
  body.lab-page #archivo-grafico .container.narrow {
    max-width: var(--max);
  }
}


/* ===============================
   HOME REEL — BASELINE (NO JS)
   Poster thumb as container background. No skeleton overlays.
   =============================== */
body.home .section.reel .reel-embed{
  background: url("../img/reel/reel-thumb.jpg") center / cover no-repeat;
  background-color: rgba(0,0,0,.06);
}
body.home .section.reel .reel-embed::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
body.home .section.reel .reel-embed .reel-skeleton{
  display: none !important;
}



/* === tokens-black.css === */


/* ================= GLOBAL DEFAULTS (:root) — BLOCK 2 ================= */
:root {
  --c-black: #000000;
  --c-white: #ffffff;
  --c-ink: #111111;
  --c-black-0b: #0b0b0b;
  --c-black-0c: #0c0c0c;
  --c-black-0f: #0f0f0f;
  --c-black-1f: #1f1f1f;
  --w-00: rgba(255,255,255,0);
  --w-02: rgba(255,255,255,.02);
  --w-03: rgba(255,255,255,.03);
  --w-04: rgba(255,255,255,.04);
  --w-05: rgba(255,255,255,.05);
  --w-06: rgba(255,255,255,.06);
  --w-07: rgba(255,255,255,.07);
  --w-08: rgba(255,255,255,.08);
  --w-10: rgba(255,255,255,.10);
  --w-12: rgba(255,255,255,.12);
  --w-14: rgba(255,255,255,.14);
  --w-16: rgba(255,255,255,.16);
  --w-18: rgba(255,255,255,.18);
  --w-22: rgba(255,255,255,.22);
  --w-25: rgba(255,255,255,.25);
  --w-32: rgba(255,255,255,.32);
  --w-35: rgba(255,255,255,.35);
  --w-52: rgba(255,255,255,.52);
  --w-55: rgba(255,255,255,.55);
  --w-60: rgba(255,255,255,.60);
  --w-70: rgba(255,255,255,.70);
  --w-72: rgba(255,255,255,.72);
  --w-78: rgba(255,255,255,.78);
  --w-92: rgba(255,255,255,.92);
  --w-95: rgba(255,255,255,.95);
  --b-00: rgba(0,0,0,0);
  --b-08: rgba(0,0,0,.08);
  --b-10: rgba(0,0,0,.10);
  --b-12: rgba(0,0,0,.12);
  --b-18: rgba(0,0,0,.18);
  --b-22: rgba(0,0,0,.22);
  --b-28: rgba(0,0,0,.28);
  --b-35: rgba(0,0,0,.35);
  --b-45: rgba(0,0,0,.45);
  --b-50: rgba(0,0,0,.50);
  --b-55: rgba(0,0,0,.55);
  --b-60: rgba(0,0,0,.60);
  --b-65: rgba(0,0,0,.65);
  --b-70: rgba(0,0,0,.70);
  --b-72: rgba(0,0,0,.72);
  --b-75: rgba(0,0,0,.75);
  --b-78: rgba(0,0,0,.78);
  --b-86: rgba(0,0,0,.86);
  --b-88: rgba(0,0,0,.88);
  --b-90: rgba(0,0,0,.90);
  --b-96: rgba(0,0,0,.96);
  --ink-92: rgba(17,17,17,.92);

  /* UI structural tokens (skin-agnostic defaults) */
  --exp-card-bg: #ffffff;
  --exp-card-radius: 14px;
  --footer-lang-bg: rgba(0,0,0,.18);
  --footer-lang-border: rgba(255,255,255,.35);
}

.modal {
  z-index: 20000 !important;
}


/* === tokens-accent.css === */


/* ================= GLOBAL DEFAULTS (:root) — BLOCK 3 ================= */
:root {
  --c-cyan-39d7ff: #39d7ff;
  --c-cyan-8fe9ff: #8fe9ff;
  --c-cyan-6bdcff: #6bdcff;
  --c-cyan-4cc3ff: #4cc3ff;
  --c-blue-4da3ff: #4da3ff;
  --c-magenta-ff3bd1: #ff3bd1;
  --c-yellow-fef502: #fef502;
  --c-cyan-57-215-255-14: rgba(57,215,255,.14);
  --c-magenta-255-59-209-10: rgba(255,59,209,.10);
}


/* === tokens-white.css === */

/* ================= SKIN: WHITE ================= */
html[data-skin="white"] {
  --bg: #f6f6f4;
  --fg: #0f0f0f;
  --muted: rgba(0,0,0,.70);
  --line: rgba(0,0,0,.18);
  --soft: rgba(0,0,0,.08);
  --topbar-bg: var(--w-92);
  --footer-bg: var(--w-92);
  --topbar-border: rgba(0,0,0,.08);
  --footer-border: rgba(0,0,0,.08);
  --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);
  --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);
  --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"] body {
  background-image: none !important;
  background-repeat: no-repeat !important;
}


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

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;
}

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;
}

html[data-skin="white"] .reel-frame iframe {
  opacity: 1 !important;
  filter: none !important;
}

html[data-skin="white"] #gloubo-mola .service-card {
  box-shadow: none !important;
  border: 0 !important;
}

html[data-skin="white"] #gloubo-mola .gm-square__overlay {
  background: rgba(255,255,255,.60) !important;
}

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

html[data-skin="white"] #gloubo-mola .gm-square img {
  transition: filter .20s ease;
}

html[data-skin="white"] #gloubo-mola .gm-square:hover img, html[data-skin="white"] #gloubo-mola .gm-square.is-active img {
  filter: brightness(1.12) contrast(.70) saturate(.90);
}

html[data-skin="white"] #gloubo-mola .gm-card, html[data-skin="white"] #gloubo-mola .gm-square {
  box-shadow: none !important;
  filter: none !important;
}

html[data-skin="white"] #motion4startups .portfolio-item {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

html[data-skin="white"] #motion4startups .service-card {
  border: 0 !important;
  box-shadow: none !important;
}

html[data-skin="white"] #reel .reel-embed {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  background-color: transparent !important;
}

#reel .reel-embed iframe {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-skin="white"] #reel .reel-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--bg);
}

html[data-skin="white"] #gloubo-mola .gm-card, html[data-skin="white"] #gloubo-mola .gm-card * {
  box-shadow: none !important;
  filter: none !important;
}

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;
}

html[data-skin="white"] body.pro #contacto .contact-copy h2, html[data-skin="white"] body.pro #contacto .contact-copy p {
  color: #000 !important;
}

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;
}

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"] .gm-modal__close {
  background: rgba(0,0,0,.06) !important;
  color: #000 !important;
}

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

html[data-skin="white"] .modal__panel {
  border: 0 !important;
}

html[data-skin="white"] .gm-modal__dialog {
  border: 0 !important;
}

html[data-skin="white"] .gm2-dialog {
  border: 0 !important;
}

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

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;
}

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

html[data-skin="white"] [class*="overlay"] {
  background: rgba(0,0,0,.32) !important;
}

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

html[data-skin="white"] body.case {
  background: #fff !important;
  color: #000 !important;
}

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

html[data-skin="white"] .topbar {
  backdrop-filter: none !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: none !important;
}

html[data-skin="white"], html[data-skin="white"] body {
  background-image: none !important;
  background: #fff !important;
}

html[data-skin="white"] body::before, html[data-skin="white"] body::before, html[data-skin="white"] main::before, html[data-skin="white"] main::before {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

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

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 * {
  box-shadow: none !important;
  filter: none !important;
}

html[data-skin="white"] main, 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;
}

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;
}

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

html[data-skin="white"] .hero .kicker {
  background: rgba(0,0,0,0.05) !important;
}

html[data-skin="white"] .hero-kicker {
  background: rgba(0,0,0,0.05) !important;
}

html[data-skin="white"] .lz-stamp img {
  filter: brightness(0) saturate(100%) !important;
}

html[data-skin="white"] .hero::before {
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

html[data-skin="white"] .lz-band {
  --w-05: rgba(255,255,255,0.22);
  --pill-bg: rgba(255,255,255,0.22);
  position: relative;
  isolation: isolate;
  --cta-grid-alpha: 0.45;
  --cta-grid-w: 2px;
}

html[data-skin="white"] .lz-band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,var(--cta-grid-alpha)) 0 var(--cta-grid-w), transparent var(--cta-grid-w) 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,var(--cta-grid-alpha)) 0 var(--cta-grid-w), transparent var(--cta-grid-w) 56px);
}

html[data-skin="white"] .lz-band > * {
  position: relative;
  z-index: 1;
}

html[data-skin="white"] body.pro .lz-band {
  --cta-grid-alpha: 0.18;
}

html[data-skin="white"] body.pro .contact-band.lz-band::before {
  content: none !important;
  display: none !important;
}

html[data-skin="white"] body.pro .contact-band.lz-band {
  --w-05: rgba(255,255,255,.05);
  --pill-bg: rgba(255,255,255,.04);
}

html[data-skin="white"] .lab-page .lab-cta-bg {
  z-index: 0;
}

html[data-skin="white"] .lab-page .lab-cta-wrap {
  position: relative;
  isolation: isolate;
  --cta-grid-alpha: 0.45;
  --cta-grid-w: 2px;
}

html[data-skin="white"] .lab-page .lab-cta-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,var(--cta-grid-alpha)) 0 var(--cta-grid-w), transparent var(--cta-grid-w) 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,var(--cta-grid-alpha)) 0 var(--cta-grid-w), transparent var(--cta-grid-w) 56px);
}

html[data-skin="white"] .lab-page .lab-cta-inner {
  position: relative;
  z-index: 2;
}

html[data-skin="white"] body.home #presentacion .lz-band {
  border-bottom: none !important;
}

html[data-skin="white"] .nav-fs-btn.is-fs-active {
  color: var(--t-1);
  background: rgba(0,0,0,0.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

html[data-skin="white"] .gm2-meta {
  color: #000 !important;
}



/* === ISO: Cards & Thumbs presets (exact parity) === */


/* ================= GLOBAL DEFAULTS (:root) — BLOCK 4 ================= */
:root {
  --card-radius: var(--radius);
  --card-radius-sm: var(--radius2);
  --card-radius-exp: 10px;
  --card-pad: 18px;
  --card-pad-service: 22px;
  --thumb-radius: 14px;
  --card-hover-translate: -2px;
}

/* === Yellow skin (experimental) === */

/* ================= SKIN: YELLOW ================= */
html[data-skin="yellow"] {
  /* Experimental skin: Yellow (polished) */
  --bg:#F2B705;
  --fg:#3E1631;
  --muted:rgba(62,22,49,.72);
  --muted2:rgba(62,22,49,.52);
  --line:rgba(62,22,49,.22);
  --soft:rgba(62,22,49,.10);

  /* panels / glass */
  --glass-bg: rgba(242,183,5,.38);
  --glass-bg-soft: rgba(242,183,5,.28);
  --glass-bg-strong: rgba(242,183,5,.48);
  --glass-border: rgba(62,22,49,.18);
  --glass-border-soft: rgba(62,22,49,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(62,22,49,.18);
  --overlay-deep: rgba(62,22,49,.28);

  --topbar-bg: rgba(242,183,5,.94);
  --footer-bg: rgba(242,183,5,.94);
  --topbar-border: rgba(62,22,49,.14);
  --footer-border: rgba(62,22,49,.14);

  --shadow: 0 10px 34px rgba(62,22,49,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(242,183,5,.32);
  --band-base-b: rgba(242,183,5,.56);
  --band-grid-a: rgba(62,22,49,.12);
  --band-grid-b: rgba(62,22,49,.10);
  --band-glow-a: rgba(62,22,49,.10);
  --band-glow-b: rgba(62,22,49,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(62,22,49,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(62,22,49,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(62,22,49,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(242,183,5,.78), rgba(242,183,5,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* === Tropical skin (experimental) === */

/* ================= SKIN: GREEN ================= */

/* [DISABLED] Removed skin block: green (legacy) */
html[data-skin="red"] {
  /* Experimental skin: Yellow (polished) */
  --bg:#E12B2B;
  --fg:#2B0505;
  --muted:rgba(43,5,5,.70);
  --muted2:rgba(43,5,5,.48);
  --line:rgba(43,5,5,.20);
  --soft:rgba(43,5,5,.10);

  /* panels / glass */
  --glass-bg: rgba(255,236,236,.56);
  --glass-bg-soft: rgba(255,236,236,.42);
  --glass-bg-strong: rgba(255,236,236,.70);
  --glass-border: rgba(43,5,5,.16);
  --glass-border-soft: rgba(43,5,5,.10);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(43,5,5,.14);
  --overlay-deep: rgba(43,5,5,.24);

  --topbar-bg: rgba(225,43,43,.94);
  --footer-bg: rgba(225,43,43,.94);
  --topbar-border: rgba(43,5,5,.14);
  --footer-border: rgba(43,5,5,.14);

  --shadow: 0 10px 34px rgba(43,5,5,.20);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(225,43,43,.26);
  --band-base-b: rgba(225,43,43,.44);
  --band-grid-a: rgba(43,5,5,.10);
  --band-grid-b: rgba(43,5,5,.08);
  --band-glow-a: rgba(43,5,5,.10);
  --band-glow-b: rgba(43,5,5,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(43,5,5,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(43,5,5,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(43,5,5,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(225,43,43,.78), rgba(225,43,43,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}



/* ================= SKIN: ORANGE ================= */

/* [DISABLED] Removed skin block: orange (legacy) */

/* [DISABLED] Removed skin block: blue (legacy) */
html[data-skin="blueberry"] {
  /* Experimental skin: Blueberry (polished) */
  --bg:#6D5BD0;
  --fg:#0B1026;
  --muted:rgba(11,16,38,.72);
  --muted2:rgba(11,16,38,.52);
  --line:rgba(11,16,38,.22);
  --soft:rgba(11,16,38,.10);

  /* panels / glass */
  --glass-bg: rgba(109,91,208,.38);
  --glass-bg-soft: rgba(109,91,208,.28);
  --glass-bg-strong: rgba(109,91,208,.48);
  --glass-border: rgba(11,16,38,.18);
  --glass-border-soft: rgba(11,16,38,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(11,16,38,.18);
  --overlay-deep: rgba(11,16,38,.28);

  --topbar-bg: rgba(109,91,208,.94);
  --footer-bg: rgba(109,91,208,.94);
  --topbar-border: rgba(11,16,38,.14);
  --footer-border: rgba(11,16,38,.14);

  --shadow: 0 10px 34px rgba(11,16,38,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(109,91,208,.32);
  --band-base-b: rgba(109,91,208,.56);
  --band-grid-a: rgba(11,16,38,.12);
  --band-grid-b: rgba(11,16,38,.10);
  --band-glow-a: rgba(11,16,38,.10);
  --band-glow-b: rgba(11,16,38,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(11,16,38,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(11,16,38,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(11,16,38,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(109,91,208,.78), rgba(109,91,208,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* ================= SKIN: BUBBLEGUM ================= */
html[data-skin="bubblegum"] {
  /* Swatch skin: Bubblegum (pink base + plum secondary accent) */
  --bg:#F39FB1;
  --fg:#4D1F32;
  --muted:rgba(77,31,50,.72);
  --muted2:rgba(77,31,50,.52);
  --line:rgba(77,31,50,.22);
  --soft:rgba(77,31,50,.10);
  --accent:#C68BFF;
  --accent2:#7A4BCE;
  --link-accent:var(--accent2);
  --link-accent-hover:#5E35B1;


  /* panels / glass */
  --glass-bg: rgba(243,159,177,.38);
  --glass-bg-soft: rgba(243,159,177,.28);
  --glass-bg-strong: rgba(243,159,177,.48);
  --glass-border: rgba(77,31,50,.18);
  --glass-border-soft: rgba(77,31,50,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(77,31,50,.18);
  --overlay-deep: rgba(77,31,50,.28);

  --topbar-bg: rgba(243,159,177,.94);
  --footer-bg: rgba(243,159,177,.94);
  --topbar-border: rgba(77,31,50,.14);
  --footer-border: rgba(77,31,50,.14);

  --shadow: 0 10px 34px rgba(77,31,50,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(243,159,177,.32);
  --band-base-b: rgba(243,159,177,.56);
  --band-grid-a: rgba(77,31,50,.12);
  --band-grid-b: rgba(77,31,50,.10);
  --band-glow-a: rgba(77,31,50,.10);
  --band-glow-b: rgba(77,31,50,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(77,31,50,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(77,31,50,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(77,31,50,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(243,159,177,.78), rgba(243,159,177,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* ================= SKIN: BANANA ================= */
html[data-skin="banana"] {
  /* Swatch skin: Banana (yellow base + cobalt secondary accent) */
  --bg:#F4E04D;
  --fg:#4F460C;
  --muted:rgba(79,70,12,.72);
  --muted2:rgba(79,70,12,.52);
  --line:rgba(79,70,12,.22);
  --soft:rgba(79,70,12,.10);
  --accent:#8CB8FF;
  --accent2:#3D63DD;
  --link-accent:var(--accent2);
  --link-accent-hover:#2D47A8;


  /* panels / glass */
  --glass-bg: rgba(244,224,77,.38);
  --glass-bg-soft: rgba(244,224,77,.28);
  --glass-bg-strong: rgba(244,224,77,.48);
  --glass-border: rgba(79,70,12,.18);
  --glass-border-soft: rgba(79,70,12,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(79,70,12,.18);
  --overlay-deep: rgba(79,70,12,.28);

  --topbar-bg: rgba(244,224,77,.94);
  --footer-bg: rgba(244,224,77,.94);
  --topbar-border: rgba(79,70,12,.14);
  --footer-border: rgba(79,70,12,.14);

  --shadow: 0 10px 34px rgba(79,70,12,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(244,224,77,.32);
  --band-base-b: rgba(244,224,77,.56);
  --band-grid-a: rgba(79,70,12,.12);
  --band-grid-b: rgba(79,70,12,.10);
  --band-glow-a: rgba(79,70,12,.10);
  --band-glow-b: rgba(79,70,12,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(79,70,12,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(79,70,12,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(79,70,12,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(244,224,77,.78), rgba(244,224,77,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* ================= SKIN: LIMA ================= */
html[data-skin="lima"] {
  /* Swatch skin: Lima (green base + violet secondary accent) */
  --bg:#8BC34A;
  --fg:#244116;
  --muted:rgba(36,65,22,.72);
  --muted2:rgba(36,65,22,.52);
  --line:rgba(36,65,22,.22);
  --soft:rgba(36,65,22,.10);
  --accent:#C09BFF;
  --accent2:#7B4FD6;
  --link-accent:var(--accent2);
  --link-accent-hover:#5B35A7;


  /* panels / glass */
  --glass-bg: rgba(139,195,74,.38);
  --glass-bg-soft: rgba(139,195,74,.28);
  --glass-bg-strong: rgba(139,195,74,.48);
  --glass-border: rgba(36,65,22,.18);
  --glass-border-soft: rgba(36,65,22,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(36,65,22,.18);
  --overlay-deep: rgba(36,65,22,.28);

  --topbar-bg: rgba(139,195,74,.94);
  --footer-bg: rgba(139,195,74,.94);
  --topbar-border: rgba(36,65,22,.14);
  --footer-border: rgba(36,65,22,.14);

  --shadow: 0 10px 34px rgba(36,65,22,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(139,195,74,.32);
  --band-base-b: rgba(139,195,74,.56);
  --band-grid-a: rgba(36,65,22,.12);
  --band-grid-b: rgba(36,65,22,.10);
  --band-glow-a: rgba(36,65,22,.10);
  --band-glow-b: rgba(36,65,22,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(36,65,22,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(36,65,22,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(36,65,22,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(139,195,74,.78), rgba(139,195,74,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}


/* ================= SKIN: MENTA ================= */
html[data-skin="menta"] {
  /* Swatch skin: Menta (mint base + coral secondary accent) */
  --bg:#00C389;
  --fg:#083D30;
  --muted:rgba(8,61,48,.72);
  --muted2:rgba(8,61,48,.52);
  --line:rgba(8,61,48,.22);
  --soft:rgba(8,61,48,.10);
  --accent:#FF9A7A;
  --accent2:#E65C64;
  --link-accent:var(--accent2);
  --link-accent-hover:#B93B4A;


  /* panels / glass */
  --glass-bg: rgba(0,195,137,.38);
  --glass-bg-soft: rgba(0,195,137,.28);
  --glass-bg-strong: rgba(0,195,137,.48);
  --glass-border: rgba(8,61,48,.18);
  --glass-border-soft: rgba(8,61,48,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(8,61,48,.18);
  --overlay-deep: rgba(8,61,48,.28);

  --topbar-bg: rgba(0,195,137,.94);
  --footer-bg: rgba(0,195,137,.94);
  --topbar-border: rgba(8,61,48,.14);
  --footer-border: rgba(8,61,48,.14);

  --shadow: 0 10px 34px rgba(8,61,48,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(0,195,137,.32);
  --band-base-b: rgba(0,195,137,.56);
  --band-grid-a: rgba(8,61,48,.12);
  --band-grid-b: rgba(8,61,48,.10);
  --band-glow-a: rgba(8,61,48,.10);
  --band-glow-b: rgba(8,61,48,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(8,61,48,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(8,61,48,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(8,61,48,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(0,195,137,.78), rgba(0,195,137,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}


/* ================= SKIN: STRAWBERRY ================= */
html[data-skin="strawberry"] {
  /* Swatch skin: Strawberry (red base + aqua secondary accent) */
  --bg:#FF5F5C;
  --fg:#5A1716;
  --muted:rgba(90,23,22,.72);
  --muted2:rgba(90,23,22,.52);
  --line:rgba(90,23,22,.22);
  --soft:rgba(90,23,22,.10);
  --accent:#89F0FF;
  --accent2:#21A1D8;
  --link-accent:var(--accent2);
  --link-accent-hover:#1578A3;


  /* panels / glass */
  --glass-bg: rgba(255,95,92,.38);
  --glass-bg-soft: rgba(255,95,92,.28);
  --glass-bg-strong: rgba(255,95,92,.48);
  --glass-border: rgba(90,23,22,.18);
  --glass-border-soft: rgba(90,23,22,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(90,23,22,.18);
  --overlay-deep: rgba(90,23,22,.28);

  --topbar-bg: rgba(255,95,92,.94);
  --footer-bg: rgba(255,95,92,.94);
  --topbar-border: rgba(90,23,22,.14);
  --footer-border: rgba(90,23,22,.14);

  --shadow: 0 10px 34px rgba(90,23,22,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(255,95,92,.32);
  --band-base-b: rgba(255,95,92,.56);
  --band-grid-a: rgba(90,23,22,.12);
  --band-grid-b: rgba(90,23,22,.10);
  --band-glow-a: rgba(90,23,22,.10);
  --band-glow-b: rgba(90,23,22,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(90,23,22,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(90,23,22,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(90,23,22,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(255,95,92,.78), rgba(255,95,92,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}


/* ================= SKIN: LAVANDA ================= */
html[data-skin="lavanda"] {
  /* Swatch skin: Lavanda (lavender base + indigo secondary accent) */
  --bg:#EACFFC;
  --fg:#4A3460;
  --muted:rgba(74,52,96,.72);
  --muted2:rgba(74,52,96,.52);
  --line:rgba(74,52,96,.22);
  --soft:rgba(74,52,96,.10);
  --accent:#9FB4FF;
  --accent2:#5A67D8;
  --link-accent:var(--accent2);
  --link-accent-hover:#4049A8;


  /* panels / glass */
  --glass-bg: rgba(234,207,252,.38);
  --glass-bg-soft: rgba(234,207,252,.28);
  --glass-bg-strong: rgba(234,207,252,.48);
  --glass-border: rgba(74,52,96,.18);
  --glass-border-soft: rgba(74,52,96,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(74,52,96,.18);
  --overlay-deep: rgba(74,52,96,.28);

  --topbar-bg: rgba(234,207,252,.94);
  --footer-bg: rgba(234,207,252,.94);
  --topbar-border: rgba(74,52,96,.14);
  --footer-border: rgba(74,52,96,.14);

  --shadow: 0 10px 34px rgba(74,52,96,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(234,207,252,.32);
  --band-base-b: rgba(234,207,252,.56);
  --band-grid-a: rgba(74,52,96,.12);
  --band-grid-b: rgba(74,52,96,.10);
  --band-glow-a: rgba(74,52,96,.10);
  --band-glow-b: rgba(74,52,96,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(74,52,96,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(74,52,96,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(74,52,96,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(234,207,252,.78), rgba(234,207,252,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* ================= SKIN: GRAU ================= */
html[data-skin="grau"] {
  /* Swatch skin: Grau (neutral grey base + red secondary accent) */
  --bg:#D7D3DA;
  --fg:#2C2930;
  --muted:rgba(44,41,48,.72);
  --muted2:rgba(44,41,48,.52);
  --line:rgba(44,41,48,.22);
  --soft:rgba(44,41,48,.10);

  /* custom accent pair for shell CTA / logo dot / links */
  --accent:#F06A79;
  --accent2:#D7263D;
  --link-accent:var(--accent2);
  --link-accent-hover:#B71F33;

  /* panels / glass */
  --glass-bg: rgba(215,211,218,.38);
  --glass-bg-soft: rgba(215,211,218,.28);
  --glass-bg-strong: rgba(215,211,218,.48);
  --glass-border: rgba(44,41,48,.18);
  --glass-border-soft: rgba(44,41,48,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(44,41,48,.18);
  --overlay-deep: rgba(44,41,48,.28);

  --topbar-bg: rgba(215,211,218,.94);
  --footer-bg: rgba(215,211,218,.94);
  --topbar-border: rgba(44,41,48,.14);
  --footer-border: rgba(44,41,48,.14);

  --shadow: 0 10px 34px rgba(44,41,48,.22);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(215,211,218,.32);
  --band-base-b: rgba(215,211,218,.56);
  --band-grid-a: rgba(44,41,48,.12);
  --band-grid-b: rgba(44,41,48,.10);
  --band-glow-a: rgba(215,38,61,.12);
  --band-glow-b: rgba(215,38,61,.08);
  --band-img: url("../img/_others/relampagos.jpg");

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(215,38,61,.08), transparent 58%),
    repeating-linear-gradient(90deg, rgba(44,41,48,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(44,41,48,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(215,211,218,.78), rgba(215,211,218,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}



/* ================= SKIN: SNOW ================= */
html[data-skin="snow"] {
  /* Swatch skin: Snow (clean white rebuild + ice blue accent pair) */
  --bg:#F5F7FB;
  --fg:#233142;
  --muted:rgba(35,49,66,.72);
  --muted2:rgba(35,49,66,.52);
  --line:rgba(35,49,66,.18);
  --soft:rgba(35,49,66,.08);
  --accent:#A9D8FF;
  --accent2:#5B8DEF;
  --link-accent:var(--accent2);
  --link-accent-hover:#3F6FD1;

  /* panels / glass */
  --glass-bg: rgba(245,247,251,.58);
  --glass-bg-soft: rgba(245,247,251,.42);
  --glass-bg-strong: rgba(245,247,251,.72);
  --glass-border: rgba(35,49,66,.14);
  --glass-border-soft: rgba(35,49,66,.10);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(35,49,66,.12);
  --overlay-deep: rgba(35,49,66,.22);

  --topbar-bg: rgba(245,247,251,.94);
  --footer-bg: rgba(245,247,251,.94);
  --topbar-border: rgba(35,49,66,.12);
  --footer-border: rgba(35,49,66,.12);

  --shadow: 0 10px 34px rgba(35,49,66,.14);
  --hero-underline-bg: linear-gradient(90deg, rgba(35,49,66,.24), rgba(35,49,66,0));
  --hero-divider-bg: linear-gradient(90deg, rgba(35,49,66,.16), rgba(35,49,66,.06));

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(245,247,251,.76);
  --band-base-b: rgba(233,239,247,.94);
  --band-grid-a: rgba(35,49,66,.08);
  --band-grid-b: rgba(35,49,66,.06);
  --band-glow-a: rgba(169,216,255,.22);
  --band-glow-b: rgba(91,141,239,.14);
  --band-img: none;

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--band-base-a), var(--band-base-b)),
    var(--band-img) center/cover no-repeat;

  --cta-band-img: none;
}

/* ================= SKIN: CINEMA ================= */
html[data-skin="cinema"] {
  /* Swatch skin: Cinema (clean black rebuild + cyan/magenta accent pair) */
  --bg:#121212;
  --fg:#F5F5F5;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.14);
  --soft:rgba(255,255,255,.08);
  --accent:#39D7FF;
  --accent2:#FF3BD1;
  --link-accent:#4DA3FF;
  --link-accent-hover:color-mix(in srgb, #4DA3FF 72%, black);

  /* panels / glass */
  --glass-bg: rgba(0,0,0,.18);
  --glass-bg-soft: rgba(255,255,255,.04);
  --glass-bg-strong: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-soft: rgba(255,255,255,.08);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  /* overlays (used by modals/topbar/footer) */
  --overlay-dim: rgba(0,0,0,.78);
  --overlay-deep: rgba(18,18,18,.96);

  --topbar-bg: rgba(18,18,18,.96);
  --footer-bg: rgba(18,18,18,.96);
  --topbar-border: rgba(255,255,255,.10);
  --footer-border: rgba(255,255,255,.10);

  --modalbar-bg: rgba(38,38,38,.96);
  --modalbar-border: rgba(255,255,255,.12);

  --shadow: 0 8px 30px rgba(0,0,0,.45);

  /* Band (Presentacion + CTA) unified */
  --band-base-a: rgba(14,14,14,.92);
  --band-base-b: rgba(0,0,0,1);
  --band-grid-a: rgba(255,255,255,.08);
  --band-grid-b: rgba(255,255,255,.06);
  --band-glow-a: rgba(57,215,255,.22);
  --band-glow-b: rgba(255,59,209,.16);
  --band-img: none;

  /* CTA/Band unified background (used by home logo band + all CTAs) */
  --cta-band-bg:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--band-base-a), var(--band-base-b)),
    var(--band-img) center/cover no-repeat;

  --cta-band-img: none;
}



/* ================= SWATCH PREMIUM AMBIENT SYSTEM ================= */
html[data-skin="snow"],
html[data-skin="cinema"],
html[data-skin="sandia"],
html[data-skin="kiwi"],
html[data-skin="melocoton"],
html[data-skin="bubblegum"],
html[data-skin="banana"],
html[data-skin="lima"],
html[data-skin="menta"],
html[data-skin="strawberry"],
html[data-skin="lavanda"],
html[data-skin="grau"] {
  /* Cinema logic, translated to every clean swatch skin.
     Rule of construction:
     - strong left glow
     - strong right glow
     - softer floor/core glow
     - local logo safety halo
     - local copy safety field
     - broad depth/vignette to avoid flat color
     Sacred rule remains intact:
     HOME logo + HOME CTA + LAB CTA = gradient + grid only.
     PRO CTA photographic image still lives only in app.css ::before. */
  --cta-band-bg:
    radial-gradient(1180px 560px at 14% 44%, var(--band-left-glow), transparent 60%),
    radial-gradient(760px 520px at 28% 56%, var(--band-logo-safe), transparent 58%),
    radial-gradient(980px 460px at 84% 22%, var(--band-right-glow), transparent 56%),
    radial-gradient(920px 360px at 52% 100%, var(--band-core-glow), transparent 72%),
    radial-gradient(1080px 380px at 63% 50%, var(--band-copy-safe), transparent 66%),
    radial-gradient(1450px 720px at 50% 55%, transparent 34%, var(--band-depth) 100%),
    linear-gradient(180deg, var(--band-veil-a), var(--band-veil-b)),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--band-base-a), var(--band-base-b));
}

html[data-skin="snow"] {
  --band-left-glow: rgba(156,214,255,.30);
  --band-right-glow: rgba(171,186,255,.18);
  --band-core-glow: rgba(255,255,255,.18);
  --band-logo-safe: rgba(123,146,177,.16);
  --band-copy-safe: rgba(255,255,255,.22);
  --band-depth: rgba(124,145,173,.16);
  --band-veil-a: rgba(255,255,255,.10);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="cinema"] {
  --band-left-glow: rgba(57,215,255,.26);
  --band-right-glow: rgba(255,59,209,.18);
  --band-core-glow: rgba(255,255,255,.05);
  --band-logo-safe: rgba(0,0,0,0);
  --band-copy-safe: rgba(0,0,0,0);
  --band-depth: rgba(0,0,0,.42);
  --band-veil-a: rgba(255,255,255,.02);
  --band-veil-b: rgba(0,0,0,0);
}

html[data-skin="sandia"] {
  --band-left-glow: rgba(111,230,210,.18);
  --band-right-glow: rgba(165,36,64,.22);
  --band-core-glow: rgba(255,151,164,.18);
  --band-logo-safe: rgba(83,22,38,.14);
  --band-copy-safe: rgba(255,236,239,.12);
  --band-depth: rgba(100,32,44,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="kiwi"] {
  --band-left-glow: rgba(136,244,191,.18);
  --band-right-glow: rgba(88,64,26,.18);
  --band-core-glow: rgba(213,255,118,.18);
  --band-logo-safe: rgba(48,63,17,.14);
  --band-copy-safe: rgba(248,255,226,.10);
  --band-depth: rgba(59,71,24,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="melocoton"] {
  --band-left-glow: rgba(255,232,184,.18);
  --band-right-glow: rgba(232,121,96,.20);
  --band-core-glow: rgba(255,193,148,.18);
  --band-logo-safe: rgba(96,53,34,.12);
  --band-copy-safe: rgba(255,245,235,.12);
  --band-depth: rgba(113,70,49,.10);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="bubblegum"] {
  --band-left-glow: rgba(171,218,255,.20);
  --band-right-glow: rgba(122,75,206,.22);
  --band-core-glow: rgba(255,214,225,.18);
  --band-logo-safe: rgba(95,45,91,.12);
  --band-copy-safe: rgba(255,245,248,.14);
  --band-depth: rgba(94,47,91,.12);
  --band-veil-a: rgba(255,255,255,.06);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="banana"] {
  --band-left-glow: rgba(138,180,255,.24);
  --band-right-glow: rgba(255,180,62,.18);
  --band-core-glow: rgba(255,238,140,.18);
  --band-logo-safe: rgba(79,70,12,.12);
  --band-copy-safe: rgba(255,250,214,.12);
  --band-depth: rgba(109,96,19,.10);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="lima"] {
  --band-left-glow: rgba(94,224,200,.18);
  --band-right-glow: rgba(123,79,214,.22);
  --band-core-glow: rgba(193,240,120,.18);
  --band-logo-safe: rgba(36,65,22,.12);
  --band-copy-safe: rgba(242,255,223,.10);
  --band-depth: rgba(39,72,48,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="menta"] {
  --band-left-glow: rgba(94,232,214,.22);
  --band-right-glow: rgba(230,92,100,.20);
  --band-core-glow: rgba(125,255,218,.18);
  --band-logo-safe: rgba(8,61,48,.14);
  --band-copy-safe: rgba(222,255,246,.10);
  --band-depth: rgba(13,87,69,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="strawberry"] {
  --band-left-glow: rgba(137,240,255,.22);
  --band-right-glow: rgba(181,46,95,.20);
  --band-core-glow: rgba(255,153,150,.18);
  --band-logo-safe: rgba(90,23,22,.14);
  --band-copy-safe: rgba(255,235,235,.10);
  --band-depth: rgba(119,33,48,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="lavanda"] {
  --band-left-glow: rgba(174,220,255,.20);
  --band-right-glow: rgba(90,103,216,.22);
  --band-core-glow: rgba(244,230,255,.16);
  --band-logo-safe: rgba(74,52,96,.12);
  --band-copy-safe: rgba(255,250,255,.10);
  --band-depth: rgba(90,72,118,.12);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

html[data-skin="grau"] {
  --band-left-glow: rgba(196,209,224,.14);
  --band-right-glow: rgba(215,38,61,.20);
  --band-core-glow: rgba(255,236,240,.14);
  --band-logo-safe: rgba(44,41,48,.10);
  --band-copy-safe: rgba(255,255,255,.12);
  --band-depth: rgba(96,84,94,.10);
  --band-veil-a: rgba(255,255,255,.05);
  --band-veil-b: rgba(255,255,255,0);
}

/* ================= SKIN: PISTACCIO ================= */

/* [DISABLED] Removed skin block: pistaccio (legacy) */


/* --- SWATCH v16 MICROFIX: unify glass backgrounds --- */
.hero-kicker,
.service-card,
.service-card:hover{
    background-color: #FFFFFF24;
}



html[data-skin="sandia"] {
  /* Swatch skin: Sandia (watermelon rose base + deep rind accent) */
  --bg:#F06F83;
  --fg:#4E1C2A;
  --muted:rgba(78,28,42,.72);
  --muted2:rgba(78,28,42,.52);
  --line:rgba(78,28,42,.22);
  --soft:rgba(78,28,42,.10);
  --accent:#2F8F78;
  --accent2:#257260;
  --link-accent:var(--accent);
  --link-accent-hover:#174C41;

  --glass-bg: rgba(240,111,131,.36);
  --glass-bg-soft: rgba(240,111,131,.26);
  --glass-bg-strong: rgba(240,111,131,.46);
  --glass-border: rgba(78,28,42,.18);
  --glass-border-soft: rgba(78,28,42,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  --overlay-dim: rgba(78,28,42,.18);
  --overlay-deep: rgba(78,28,42,.28);

  --topbar-bg: rgba(240,111,131,.94);
  --footer-bg: rgba(240,111,131,.94);
  --topbar-border: rgba(78,28,42,.14);
  --footer-border: rgba(78,28,42,.14);

  --shadow: 0 10px 34px rgba(78,28,42,.22);

  --band-base-a: rgba(240,111,131,.30);
  --band-base-b: rgba(240,111,131,.54);
  --band-grid-a: rgba(78,28,42,.12);
  --band-grid-b: rgba(78,28,42,.10);
  --band-glow-a: rgba(47,143,120,.16);
  --band-glow-b: rgba(37,114,96,.10);
  --band-img: url("../img/_others/relampagos.jpg");

  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(47,143,120,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(78,28,42,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(78,28,42,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(240,111,131,.78), rgba(240,111,131,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

html[data-skin="kiwi"] {
  /* Swatch skin: Kiwi (fresh kiwi green base + seed brown accent) */
  --bg:#A9D94E;
  --fg:#30420F;
  --muted:rgba(48,66,15,.74);
  --muted2:rgba(48,66,15,.54);
  --line:rgba(48,66,15,.22);
  --soft:rgba(48,66,15,.10);
  --accent:#7A5A2B;
  --accent2:#60441E;
  --link-accent:var(--accent);
  --link-accent-hover:#3E2A10;

  --glass-bg: rgba(169,217,78,.34);
  --glass-bg-soft: rgba(169,217,78,.24);
  --glass-bg-strong: rgba(169,217,78,.44);
  --glass-border: rgba(48,66,15,.18);
  --glass-border-soft: rgba(48,66,15,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  --overlay-dim: rgba(48,66,15,.16);
  --overlay-deep: rgba(48,66,15,.24);

  --topbar-bg: rgba(169,217,78,.94);
  --footer-bg: rgba(169,217,78,.94);
  --topbar-border: rgba(48,66,15,.14);
  --footer-border: rgba(48,66,15,.14);

  --shadow: 0 10px 34px rgba(48,66,15,.20);

  --band-base-a: rgba(169,217,78,.30);
  --band-base-b: rgba(169,217,78,.54);
  --band-grid-a: rgba(48,66,15,.12);
  --band-grid-b: rgba(48,66,15,.10);
  --band-glow-a: rgba(122,90,43,.16);
  --band-glow-b: rgba(96,68,30,.10);
  --band-img: url("../img/_others/relampagos.jpg");

  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(122,90,43,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(48,66,15,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(48,66,15,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(169,217,78,.78), rgba(169,217,78,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

html[data-skin="melocoton"] {
  /* Swatch skin: Melocoton (soft peach base + coral pit accent) */
  --bg:#F4B489;
  --fg:#5A2E20;
  --muted:rgba(90,46,32,.72);
  --muted2:rgba(90,46,32,.52);
  --line:rgba(90,46,32,.22);
  --soft:rgba(90,46,32,.10);
  --accent:#E06D4F;
  --accent2:#C95538;
  --link-accent:var(--accent);
  --link-accent-hover:#933C28;

  --glass-bg: rgba(244,180,137,.34);
  --glass-bg-soft: rgba(244,180,137,.24);
  --glass-bg-strong: rgba(244,180,137,.44);
  --glass-border: rgba(90,46,32,.18);
  --glass-border-soft: rgba(90,46,32,.12);

  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);

  --overlay-dim: rgba(90,46,32,.16);
  --overlay-deep: rgba(90,46,32,.24);

  --topbar-bg: rgba(244,180,137,.94);
  --footer-bg: rgba(244,180,137,.94);
  --topbar-border: rgba(90,46,32,.14);
  --footer-border: rgba(90,46,32,.14);

  --shadow: 0 10px 34px rgba(90,46,32,.20);

  --band-base-a: rgba(244,180,137,.30);
  --band-base-b: rgba(244,180,137,.54);
  --band-grid-a: rgba(90,46,32,.12);
  --band-grid-b: rgba(90,46,32,.10);
  --band-glow-a: rgba(224,109,79,.16);
  --band-glow-b: rgba(201,85,56,.10);
  --band-img: url("../img/_others/relampagos.jpg");

  --cta-band-bg:
    radial-gradient(1200px 520px at 22% 45%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 420px at 78% 25%, rgba(224,109,79,.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(90,46,32,.10) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(90,46,32,.08) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, rgba(244,180,137,.78), rgba(244,180,137,.92));

  --cta-band-img: url("../img/_others/relampagos.jpg");
}

/* ================= SWATCH CLONE NORMALIZATION ================= */
html[data-skin="snow"],
html[data-skin="cinema"],
html[data-skin="sandia"],
html[data-skin="kiwi"],
html[data-skin="melocoton"],
html[data-skin="bubblegum"],
html[data-skin="banana"],
html[data-skin="lima"],
html[data-skin="menta"],
html[data-skin="strawberry"],
html[data-skin="lavanda"],
html[data-skin="grau"] {
  --nav-cta-hover-fg: #fff;
  --cta-icon-drop-shadow: drop-shadow(0 10px 20px rgba(35,49,66,.14));
  --cta-avatar-shadow: 0 8px 18px rgba(35,49,66,.14);
  --procta-text-fg: #fff;
  --procta-link-fg: var(--link-accent);
  --procta-link-hover-fg: var(--link-accent-hover);
  --procta-grid-a: var(--band-grid-a);
  --procta-grid-b: var(--band-grid-b);
}

html[data-skin="snow"] {
  --procta-grid-a: rgba(255,255,255,.14);
  --procta-grid-b: rgba(255,255,255,.11);
}

html[data-skin="sandia"],
html[data-skin="kiwi"],
html[data-skin="melocoton"],
html[data-skin="bubblegum"],
html[data-skin="banana"],
html[data-skin="lima"],
html[data-skin="menta"],
html[data-skin="strawberry"],
html[data-skin="lavanda"],
html[data-skin="grau"] {
  --procta-overlay: color-mix(in srgb, var(--bg) 82%, transparent);
  --procta-tint: color-mix(in srgb, var(--bg) 5%, transparent);
}