/* ==========================================================================
   lab.css — TRIADA Diseño Vivo (Visual Lab)
   --------------------------------------------------------------------------
   Dos mundos:
   1) CHROME del laboratorio — barra superior + riel de themes. Paleta fija
      "lab" (petróleo oscuro) para que la herramienta siempre sea legible.
   2) STAGE — todo lo que se re-skinea. Consume tokens --tk-* que inyecta
      lab.js según el theme activo. Cambiar de theme = cambiar 20 variables.
   ========================================================================== */

/* ------------------------------------------------- FUENTES SELF-HOSTED
   Spectral + Libre Franklin se sirven desde el mismo dominio (las woff2 del
   sitio, en /assets/fonts/), así funcionan bajo la CSP estricta sin depender
   de terceros. Fraunces + Space Grotesk TAMBIÉN self-hosted (subsets latin +
   latin-ext, OFL) — la CSP del lab es self-only, sin Google Fonts. */
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/spectral-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/spectral-500.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:500; font-display:swap; src:url('/assets/fonts/spectral-500-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:600; font-display:swap; src:url('/assets/fonts/spectral-600-italic.woff2') format('woff2'); }
@font-face { font-family:'Libre Franklin'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/libre-franklin-400.woff2?v=2') format('woff2'); }
@font-face { font-family:'Libre Franklin'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/libre-franklin-500.woff2') format('woff2'); }
@font-face { font-family:'Libre Franklin'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/libre-franklin-600.woff2?v=2') format('woff2'); }
@font-face { font-family:'Libre Franklin'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/libre-franklin-700.woff2') format('woff2'); }
/* Fraunces + Space Grotesk — SELF-HOSTED (antes Google Fonts). Variables, subsets
   latin + latin-ext. Permite cerrar la CSP del lab a self-only. OFL. */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/diseno-vivo/assets/fonts/fraunces-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/diseno-vivo/assets/fonts/fraunces-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 600; font-display:swap; src:url('/diseno-vivo/assets/fonts/fraunces-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 600; font-display:swap; src:url('/diseno-vivo/assets/fonts/fraunces-italic-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/diseno-vivo/assets/fonts/spacegrotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/diseno-vivo/assets/fonts/spacegrotesk-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ----------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Libre Franklin', system-ui, sans-serif;
  color: #E7EEF2; background: #0A1620;
  line-height: 1.55; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #7FD0CC; outline-offset: 3px; border-radius: 4px; }
h1,h2,h3,h4 { line-height: 1.1; font-weight: 600; }
[id] { scroll-margin-top: 76px; }

/* Paleta fija del chrome del laboratorio */
:root {
  --lab-bg:      #0A1620;
  --lab-panel:   #10212E;
  --lab-panel-2: #15293A;
  --lab-border:  rgba(127,208,204,.16);
  --lab-border-2:rgba(255,255,255,.08);
  --lab-ink:     #F1F6F8;
  --lab-text:    #A9BCC6;
  --lab-text-2:  #6E828E;
  --lab-teal:    #7FD0CC;
  --lab-teal-d:  #2F8C93;
  --wrap: 1200px;
}

/* ============================================================ CHROME NAV */
.labnav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(10,22,32,.86);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--lab-border-2);
}
.labnav__brand { display: flex; align-items: center; gap: 12px; }
.labnav__mark { width: 34px; height: 34px; flex: none; }
.labnav__mark path { stroke-width: 13; }
.labnav__name {
  display: block; white-space: nowrap;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px;
  color: var(--lab-ink); letter-spacing: .2px;
}
.labnav__name b { color: var(--lab-teal); font-weight: 600; }
.labnav__tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lab-text-2); display: block; margin-top: 1px;
}
.labnav__links { display: flex; align-items: center; gap: clamp(10px,1.6vw,26px); }
.labnav__link {
  font-size: 13.5px; font-weight: 500; color: var(--lab-text);
  transition: color .2s ease; padding: 6px 2px;
}
.labnav__link:hover { color: var(--lab-ink); }
.labnav__now {
  display: none; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--lab-border); border-radius: 30px;
  font-size: 12.5px; color: var(--lab-text);
}
.labnav__now b { color: var(--lab-ink); font-weight: 600; }
.labnav__now-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lab-teal); }
.labnav__right { display: flex; align-items: center; gap: 12px; }
.labnav__home {
  display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 30px;
  font-size: 13px; font-weight: 600; color: var(--lab-ink); white-space: nowrap;
  border: 1px solid var(--lab-border); background: rgba(127,208,204,.06);
  transition: background .18s ease, border-color .18s ease;
}
.labnav__home:hover { background: rgba(127,208,204,.14); border-color: var(--lab-teal); }
@media (min-width: 1180px) { .labnav__now { display: inline-flex; } }
@media (max-width: 1023px) { .labnav__tag { display: none; } }
@media (max-width: 859px)  { .labnav__links { display: none; } }

/* =============================================================== HERO LAB */
.lhero {
  position: relative; overflow: hidden;
  padding: clamp(64px,10vw,120px) clamp(16px,4vw,40px) clamp(48px,7vw,88px);
  background: radial-gradient(120% 100% at 82% 0%, #15384a 0%, #0A1620 58%);
  border-bottom: 1px solid var(--lab-border-2);
}
.lhero__halo {
  position: absolute; top: -20%; right: -8%; width: min(60vw,640px); height: min(60vw,640px);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47,140,147,.30) 0%, rgba(47,140,147,0) 62%);
  animation: haloPulse 8s ease-in-out infinite;
}
.lhero__inner { position: relative; max-width: var(--wrap); margin-inline: auto; }
.lhero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  padding: 8px 16px; border: 1px solid var(--lab-border); border-radius: 30px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lab-text);
}
.lhero__eyebrow span { width: 7px; height: 7px; border-radius: 50%; }
.lhero__title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.8rem); line-height: 1.02;
  color: #fff; max-width: 15ch; margin-bottom: 24px;
}
.lhero__title em { font-style: italic; color: var(--lab-teal); }
.lhero__lead {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem); line-height: 1.6;
  color: rgba(234,229,216,.82); max-width: 52ch; margin-bottom: 36px;
}
.lhero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lhero__stats {
  display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(40px,6vw,68px);
  padding-top: 28px; border-top: 1px solid var(--lab-border-2);
}
.lhero__stat b {
  display: block; font-family: 'Fraunces', Georgia, serif; font-size: 2rem;
  color: #fff; font-weight: 600; line-height: 1;
}
.lhero__stat span { font-size: 12.5px; color: var(--lab-text-2); letter-spacing: .04em; }

/* Botones del chrome */
.lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 10px; font-size: 15px; font-weight: 600;
  letter-spacing: .2px; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.lbtn--primary {
  background: linear-gradient(120deg,#1C7A82,#16606A); color:#fff;
  border-color: rgba(255,255,255,.14); box-shadow: 0 18px 40px -16px rgba(28,122,130,.9);
}
.lbtn--primary:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px rgba(28,122,130,1); }
.lbtn--ghost { background: rgba(255,255,255,.05); color:#fff; border-color: rgba(255,255,255,.22); }
.lbtn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

/* ============================================================ SECTION SHELL */
.section { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px,8vw,96px) clamp(16px,4vw,40px); }
.section--tight { max-width: 980px; }
.shead { margin-bottom: clamp(32px,4vw,52px); max-width: 60ch; }
.shead__k {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lab-teal); margin-bottom: 14px;
}
.shead__t {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem); color: var(--lab-ink); line-height: 1.06;
  margin-bottom: 16px;
}
.shead__d { font-size: clamp(1.02rem,1rem+.3vw,1.18rem); color: var(--lab-text); line-height: 1.6; }

/* =============================================================== SELECTOR */
.selector { border-top: 1px solid var(--lab-border-2); background: #0B1824; }
.tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.tab {
  padding: 9px 17px; border-radius: 30px; font-size: 13.5px; font-weight: 600;
  color: var(--lab-text); border: 1px solid var(--lab-border-2);
  transition: all .18s ease;
}
.tab:hover { color: var(--lab-ink); border-color: var(--lab-border); }
.tab[aria-selected="true"] {
  background: rgba(127,208,204,.12); color: var(--lab-teal); border-color: rgba(127,208,204,.4);
}
.themegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.tcard {
  position: relative; text-align: left; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--lab-border-2); background: var(--lab-panel);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(0,0,0,.8); border-color: var(--lab-border); }
.tcard[aria-pressed="true"] { border-color: var(--lab-teal); box-shadow: 0 0 0 2px rgba(127,208,204,.35); }
.tcard__sw { display: flex; height: 76px; }
.tcard__sw span { flex: 1; }
.tcard__body { padding: 14px 16px 16px; }
.tcard__name { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; color: var(--lab-ink); font-weight: 600; line-height: 1.15; }
.tcard__tag { display: block; font-size: 11.5px; color: var(--lab-text-2); margin-top: 4px; letter-spacing: .02em; }
.tcard__cat {
  position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 30px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10,22,32,.72); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tcard__check {
  position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lab-teal); color: #06131a; display: none; align-items: center; justify-content: center;
}
.tcard[aria-pressed="true"] .tcard__check { display: flex; }

/* ============================================================ THE STAGE */
/* Todo lo de aquí abajo consume tokens --tk-* del theme activo. */
.stage {
  background: var(--tk-bg); color: var(--tk-text);
  font-family: var(--tk-sans);
  border-top: 1px solid var(--lab-border-2);
  transition: background .5s ease, color .5s ease;
}
.stage__wrap { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px,5vw,64px) clamp(16px,4vw,40px); }
.stage h1,.stage h2,.stage h3,.stage h4 { font-family: var(--tk-serif); color: var(--tk-ink); }
/* Títulos sobre banda oscura: mayor especificidad para ganarle a `.stage h2/h3`
   (0-1-1) y usar el color claro de banda, no el ink oscuro de superficie crema. */
.p-hero .p-hero__t, .proposal .proposal__t { color: var(--tk-band-ink); }
.stagebar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px clamp(16px,4vw,40px); background: var(--tk-surface2);
  border-bottom: 1px solid var(--tk-border);
}
.stagebar__l { display: flex; align-items: center; gap: 12px; }
.stagebar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tk-primary); }
.stagebar__title { font-family: var(--tk-serif); font-weight: 600; color: var(--tk-ink); font-size: 1.05rem; }
.stagebar__title b { color: var(--tk-primary); }
.stagebar__meta { font-size: 12px; color: var(--tk-text2); letter-spacing: .02em; }
.stagebar__pill {
  padding: 6px 14px; border-radius: 30px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--tk-primary) 14%, transparent); color: var(--tk-primary);
}
.stagebar__r { display: flex; align-items: center; gap: 12px; }
.stagebar__share {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 30px;
  font-size: 12.5px; font-weight: 600; color: var(--tk-text2);
  border: 1px solid var(--tk-border); transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.stagebar__share svg { width: 15px; height: 15px; }
.stagebar__share:hover { color: var(--tk-primary); border-color: var(--tk-primary); }
.stagebar__share.is-copied { color: var(--tk-primary); border-color: var(--tk-primary); background: color-mix(in srgb, var(--tk-primary) 10%, transparent); }
@media (max-width: 480px) { .stagebar__share span { display: none; } }

/* Utilidades de marca dentro del stage */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-primary);
}
.eyebrow::before { content:''; width: 22px; height: 2px; background: var(--tk-primary); border-radius: 2px; }
.block-title { font-size: clamp(1.5rem,1.2rem+1.4vw,2.2rem); color: var(--tk-ink); line-height: 1.08; margin-bottom: 12px; }
.block-lead { font-size: 1.05rem; line-height: 1.6; color: var(--tk-text); max-width: 56ch; }
.grid { display: grid; gap: clamp(16px,2vw,22px); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

/* Botones themed */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: calc(var(--tk-radius) * .6px);
  font-family: var(--tk-sans); font-size: 15px; font-weight: 600; letter-spacing: .2px;
  border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn--primary {
  background: var(--tk-g-primary); color: var(--tk-on-primary);
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--tk-primary) 85%, transparent);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -16px color-mix(in srgb, var(--tk-primary) 90%, transparent); }
.btn--sec {
  background: transparent; color: var(--tk-ink);
  border-color: var(--tk-border); box-shadow: none;
}
.btn--sec:hover { border-color: var(--tk-primary); color: var(--tk-primary); transform: translateY(-2px); }
.btn--accent { background: var(--tk-accent); color: #fff; }
.btn--onband { background: rgba(255,255,255,.06); color: var(--tk-band-ink); border-color: rgba(255,255,255,.22); }
.btn--onband:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* Badges themed */
.badges { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 30px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
}
.badge--solid { background: var(--tk-primary); color: var(--tk-on-primary); }
.badge--soft { background: color-mix(in srgb, var(--tk-primary) 12%, transparent); color: var(--tk-primary); }
.badge--accent { background: color-mix(in srgb, var(--tk-accent) 16%, transparent); color: color-mix(in srgb, var(--tk-accent) 88%, var(--tk-ink)); }
.badge--out { border: 1px solid var(--tk-border); color: var(--tk-text); }
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Componente: HERO aplicado (banda oscura) ---------- */
.p-hero {
  position: relative; overflow: hidden; border-radius: calc(var(--tk-radius) * 1.2px);
  background: var(--tk-band); color: var(--tk-band-ink);
  padding: clamp(36px,5vw,64px);
  box-shadow: 0 30px 60px -34px rgba(var(--tk-shadow), .5);
}
.p-hero__halo {
  position: absolute; top: -30%; right: -6%; width: 380px; height: 380px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tk-band-accent) 34%, transparent) 0%, transparent 64%);
}
.p-hero__mark { position: absolute; right: 4%; bottom: -14%; width: 260px; opacity: .12; pointer-events: none; }
.p-hero__mark path { stroke-width: 12; }
.p-hero__in { position: relative; max-width: 34ch; }
.p-hero__eye {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 15px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 30px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tk-band-text);
}
.p-hero__eye i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.p-hero__t {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.03; color: var(--tk-band-ink); margin-bottom: 18px;
}
.p-hero__t em { font-style: italic; color: var(--tk-band-accent); }
.p-hero__d { font-size: 1.08rem; line-height: 1.6; color: var(--tk-band-text); margin-bottom: 28px; }
.p-hero__act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Componente: cards de servicio ---------- */
.card {
  position: relative; background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: calc(var(--tk-radius) * 1px); padding: clamp(24px,2.6vw,32px); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(var(--tk-shadow), .55); }
.card__ico {
  width: 50px; height: 50px; border-radius: calc(var(--tk-radius) * .8px); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
.card__ico svg { width: 24px; height: 24px; stroke-width: 1.7; }
.card__ico--1 { background: color-mix(in srgb, var(--tk-tri1) 14%, transparent); color: var(--tk-tri1); }
.card__ico--2 { background: color-mix(in srgb, var(--tk-tri2) 14%, transparent); color: var(--tk-tri2); }
.card__ico--3 { background: color-mix(in srgb, var(--tk-tri3) 16%, transparent); color: var(--tk-tri3); }
.card__k { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.card__ico--1 ~ .card__k, .card--1 .card__k { color: var(--tk-tri1); }
.card--2 .card__k { color: var(--tk-tri2); }
.card--3 .card__k { color: var(--tk-tri3); }
.card__t { font-size: 1.3rem; color: var(--tk-ink); margin-bottom: 8px; }
.card__x { font-size: .98rem; line-height: 1.55; color: var(--tk-text2); }

/* ---------- Componente: diagnóstico (gauge + barras) ---------- */
.diag { display: grid; grid-template-columns: minmax(180px,240px) 1fr; gap: clamp(24px,3vw,40px); align-items: center; }
.gauge { position: relative; width: 100%; max-width: 220px; margin-inline: auto; }
.gauge__num {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge__val { font-family: var(--tk-serif); font-size: 3rem; font-weight: 600; color: var(--tk-ink); line-height: 1; }
.gauge__lab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tk-text2); margin-top: 4px; }
.bars { display: flex; flex-direction: column; gap: 16px; }
.bar__top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 7px; }
.bar__name { color: var(--tk-text); font-weight: 500; }
.bar__val { color: var(--tk-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar__track { height: 9px; border-radius: 9px; background: var(--tk-surface2); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 9px; }

/* ---------- Componente: propuesta comercial (banda) ---------- */
.proposal {
  position: relative; overflow: hidden; border-radius: calc(var(--tk-radius) * 1.1px);
  background: var(--tk-band); color: var(--tk-band-ink); padding: clamp(28px,3.4vw,44px);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px,3vw,40px); align-items: center;
}
.proposal__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tk-band-accent); margin-bottom: 14px; }
.proposal__t { font-size: clamp(1.5rem,1.2rem+1.2vw,2rem); line-height: 1.12; color: var(--tk-band-ink); margin-bottom: 12px; }
.proposal__x { color: var(--tk-band-text); line-height: 1.6; margin-bottom: 22px; max-width: 42ch; }
.proposal__list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.proposal__list li { display: flex; align-items: center; gap: 11px; font-size: .96rem; color: var(--tk-band-text); }
.proposal__list i { width: 20px; height: 20px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--tk-band-accent) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--tk-band-accent); }
.proposal__price {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(var(--tk-radius) * .9px); padding: 26px;
}
.proposal__price-k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tk-band-text); }
.proposal__price-v { font-family: var(--tk-serif); font-size: 2.4rem; font-weight: 600; color: var(--tk-band-ink); margin: 8px 0 4px; }
.proposal__price-n { font-size: 12.5px; color: var(--tk-band-text); }

/* ---------- Componente: testimonio ---------- */
.quote {
  background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: calc(var(--tk-radius) * 1px); padding: clamp(28px,3vw,40px);
  position: relative;
}
.quote__mark { font-family: var(--tk-serif); font-size: 4rem; line-height: .6; color: color-mix(in srgb, var(--tk-primary) 34%, transparent); }
.quote__t { font-family: var(--tk-serif); font-size: 1.3rem; line-height: 1.5; color: var(--tk-ink); margin: 6px 0 22px; font-style: italic; }
.quote__by { display: flex; align-items: center; gap: 13px; }
.quote__av { width: 46px; height: 46px; border-radius: 50%; background: var(--tk-g-primary); color: var(--tk-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--tk-serif); }
.quote__n { font-weight: 700; color: var(--tk-ink); font-size: .96rem; }
.quote__r { font-size: 12.5px; color: var(--tk-text2); }

/* ---------- Componente: pricing cards ---------- */
.price {
  background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: calc(var(--tk-radius) * 1px); padding: clamp(24px,2.6vw,32px);
  display: flex; flex-direction: column;
}
.price--feat { border-color: var(--tk-primary); box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--tk-primary) 60%, transparent); position: relative; }
.price__tag { position: absolute; top: -12px; left: 24px; padding: 5px 13px; border-radius: 30px; background: var(--tk-primary); color: var(--tk-on-primary); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.price__k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tk-text2); }
.price__v { font-family: var(--tk-serif); font-size: 2.4rem; font-weight: 600; color: var(--tk-ink); margin: 10px 0 2px; }
.price__v small { font-size: .9rem; color: var(--tk-text2); font-family: var(--tk-sans); font-weight: 500; }
.price__x { font-size: .92rem; color: var(--tk-text2); margin-bottom: 18px; }
.price__f { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.price__f li { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: var(--tk-text); }
.price__f i { color: var(--tk-primary); flex: none; }

/* ---------- Componente: formulario ---------- */
.formcard {
  background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: calc(var(--tk-radius) * 1px); padding: clamp(24px,2.8vw,34px);
}
.formcard__step { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tk-primary); margin-bottom: 18px; }
.formcard__num { width: 22px; height: 22px; border-radius: 50%; background: var(--tk-primary); color: var(--tk-on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--tk-text); }
.field input, .field select {
  padding: 12px 14px; border: 1px solid var(--tk-border); border-radius: calc(var(--tk-radius) * .55px);
  background: var(--tk-bg); font: inherit; font-size: 15px; color: var(--tk-ink); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus { border-color: var(--tk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-primary) 18%, transparent); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.pill {
  padding: 9px 15px; border-radius: 30px; background: var(--tk-bg); border: 1px solid var(--tk-border);
  color: var(--tk-text); font-size: 13.5px; font-weight: 500; transition: all .18s ease;
}
.pill[aria-pressed="true"] { background: var(--tk-primary); border-color: var(--tk-primary); color: var(--tk-on-primary); }

/* ---------- Componente: footer aplicado ---------- */
.p-footer {
  background: var(--tk-band); color: var(--tk-band-text); border-radius: calc(var(--tk-radius) * 1px);
  padding: clamp(28px,3.4vw,44px);
}
.p-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.p-footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.p-footer__brand svg { width: 30px; height: 30px; }
.p-footer__brand svg path { stroke-width: 13; }
.p-footer__name { font-family: var(--tk-serif); font-weight: 600; font-size: 19px; color: var(--tk-band-ink); }
.p-footer__about { font-size: .92rem; line-height: 1.55; max-width: 34ch; color: var(--tk-band-text); }
.p-footer__cols { display: flex; gap: clamp(28px,4vw,56px); flex-wrap: wrap; }
.p-footer__ct { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--tk-band-ink) 55%, transparent); margin-bottom: 12px; }
.p-footer__link { display: block; font-size: 14px; color: var(--tk-band-text); margin-bottom: 8px; transition: color .2s ease; }
.p-footer__link:hover { color: var(--tk-band-ink); }
.p-footer__bot { padding-top: 22px; font-size: 12.5px; color: color-mix(in srgb, var(--tk-band-ink) 45%, transparent); }

/* ---------- Componente: panel lateral / modal (demo) ---------- */
.panel-demo {
  border: 1px dashed var(--tk-border); border-radius: calc(var(--tk-radius) * 1px);
  padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--tk-primary) 5%, var(--tk-surface));
}
.modal-back {
  position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,15,20,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-back.is-open { display: flex; }
.modal {
  width: min(440px,100%); background: var(--tk-surface); color: var(--tk-text);
  border: 1px solid var(--tk-border); border-radius: calc(var(--tk-radius) * 1.1px);
  padding: clamp(24px,3vw,34px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  animation: modalIn .3s cubic-bezier(.22,.61,.36,1);
}
.modal__ico { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--tk-primary) 14%, transparent); color: var(--tk-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.modal__t { font-family: var(--tk-serif); font-size: 1.5rem; color: var(--tk-ink); margin-bottom: 10px; }
.modal__x { font-size: 1rem; line-height: 1.55; color: var(--tk-text2); margin-bottom: 24px; }
.modal__act { display: flex; gap: 12px; flex-wrap: wrap; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* ============================================================ COMPARADOR */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; }
.mini {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--lab-border-2);
  background: var(--mini-bg); color: var(--mini-text); font-family: var(--mini-sans);
}
.mini__band { background: var(--mini-band); padding: 20px 20px 22px; color: var(--mini-band-ink); position: relative; overflow: hidden; }
.mini__mark { display: flex; gap: 3px; margin-bottom: 14px; }
.mini__eye { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mini-band-accent); margin-bottom: 8px; }
.mini__t { font-family: var(--mini-serif); font-size: 1.2rem; line-height: 1.1; color: var(--mini-band-ink); }
.mini__body { padding: 18px 20px 20px; }
.mini__x { font-size: .86rem; line-height: 1.5; color: var(--mini-text2); margin-bottom: 16px; }
.mini__row { display: flex; align-items: center; gap: 8px; }
.mini__btn { padding: 9px 16px; border-radius: 8px; background: var(--mini-primary); color: var(--mini-on); font-size: 12.5px; font-weight: 600; }
.mini__pill { padding: 6px 12px; border-radius: 30px; background: color-mix(in srgb, var(--mini-primary) 14%, transparent); color: var(--mini-primary); font-size: 11.5px; font-weight: 600; }
.mini__cap { padding: 12px 20px 16px; border-top: 1px solid var(--mini-border); }
.mini__cap b { display: block; font-family: var(--mini-serif); color: var(--mini-ink); font-size: .95rem; }
.mini__cap span { font-size: 11.5px; color: var(--mini-text2); }

/* ============================================================ GALERÍA */
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 18px; }
.pal {
  background: var(--lab-panel); border: 1px solid var(--lab-border-2); border-radius: 18px; overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.pal:hover { transform: translateY(-3px); border-color: var(--lab-border); }
.pal__strip { display: flex; height: 88px; }
.pal__strip span { flex: 1; position: relative; }
.pal__strip span::after {
  content: attr(data-hex); position: absolute; left: 6px; bottom: 6px; font-size: 8.5px;
  font-weight: 600; letter-spacing: .02em; opacity: 0; transition: opacity .2s ease;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.pal:hover .pal__strip span::after { opacity: 1; }
.pal__body { padding: 18px 20px 20px; }
.pal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pal__name { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; color: var(--lab-ink); font-weight: 600; }
.pal__cat { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lab-teal); }
.pal__pers { font-size: 12.5px; color: var(--lab-text-2); margin-bottom: 12px; letter-spacing: .01em; }
.pal__x { font-size: 13.5px; line-height: 1.55; color: var(--lab-text); margin-bottom: 16px; }
.pal__meta { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--lab-border-2); }
.pal__meta-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.pal__meta-k { flex: none; width: 74px; font-weight: 700; color: var(--lab-text-2); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; padding-top: 1px; }
.pal__meta-v { color: var(--lab-text); }
.pal__meta-v.is-good { color: #7FD0CC; }
.pal__meta-v.is-warn { color: #DDA76A; }
.pal__apply { margin-top: 16px; width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--lab-border); background: rgba(127,208,204,.08); color: var(--lab-teal); font-weight: 600; font-size: 13.5px; transition: all .18s ease; }
.pal__apply:hover { background: rgba(127,208,204,.16); }

/* ============================================================ MODO CLIENTE */
.client {
  border-top: 1px solid var(--lab-border-2);
  background: radial-gradient(120% 100% at 15% 0%, #15384a 0%, #0A1620 56%);
}
.client__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; }
.client__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 32px; }
.client__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--lab-text); }
.client__list i { color: var(--lab-teal); flex: none; margin-top: 2px; }
.quote-strip {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: clamp(1.3rem,1.1rem+1vw,1.9rem);
  line-height: 1.35; color: #fff; border-left: 3px solid var(--lab-teal); padding-left: 22px; margin: 8px 0 0;
}
/* Demo "una marca, muchas temporadas" */
.seasonal {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--lab-border-2);
  background: var(--sea-bg); transition: background .6s ease;
}
.seasonal__band { background: var(--sea-band); padding: 26px 26px 30px; color: var(--sea-ink); transition: background .6s ease; position: relative; overflow: hidden; }
.seasonal__halo { position: absolute; top: -40%; right: -10%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sea-accent) 40%, transparent), transparent 65%); }
.seasonal__mark { display: flex; gap: 3px; margin-bottom: 16px; position: relative; }
.seasonal__eye { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sea-accent); margin-bottom: 10px; }
.seasonal__t { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.4rem,1.2rem+1vw,2rem); line-height: 1.1; color: var(--sea-ink); max-width: 20ch; }
.seasonal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 26px; flex-wrap: wrap; }
.seasonal__btn { padding: 11px 20px; border-radius: 9px; background: var(--sea-primary); color: var(--sea-on); font-weight: 600; font-size: 13.5px; }
.seasonal__name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--sea-fg); }
.seasonal__ctrls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.seasonal__chip {
  padding: 8px 15px; border-radius: 30px; font-size: 12.5px; font-weight: 600; color: var(--lab-text);
  border: 1px solid var(--lab-border-2); transition: all .18s ease;
}
.seasonal__chip[aria-pressed="true"] { background: rgba(127,208,204,.14); color: var(--lab-teal); border-color: rgba(127,208,204,.4); }
.seasonal__chip:hover { color: var(--lab-ink); }
.seasonal__note { font-size: 12.5px; color: var(--lab-text-2); margin-top: 14px; }
.seasonal__live { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lab-border-2); }
.seasonal__live-k { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; color: var(--lab-ink); margin-bottom: 6px; }
.seasonal__live-d { font-size: 13px; color: var(--lab-text); line-height: 1.55; margin-bottom: 14px; }
.seasonal__live-d strong { color: var(--lab-ink); font-weight: 600; }
.seasonal__live-links { display: flex; flex-wrap: wrap; gap: 8px; }
.seasonal__live-links a {
  padding: 8px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 600; color: var(--lab-teal);
  border: 1px solid rgba(127,208,204,.28); background: rgba(127,208,204,.07);
  transition: background .18s ease, border-color .18s ease;
}
.seasonal__live-links a:hover { background: rgba(127,208,204,.16); border-color: var(--lab-teal); }

/* ============================================================ TIPOGRAFÍA */
.typegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.typecard { background: var(--lab-panel); border: 1px solid var(--lab-border-2); border-radius: 16px; padding: 24px; }
.typecard__k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lab-teal); margin-bottom: 14px; }
.typecard__spec { font-size: 2.4rem; line-height: 1; color: var(--lab-ink); margin-bottom: 4px; }
.typecard__pair { font-size: 13px; color: var(--lab-text-2); margin-bottom: 16px; }
.typecard__body { font-size: 14px; line-height: 1.6; color: var(--lab-text); margin-bottom: 16px; }
.typecard__use { font-size: 12.5px; color: var(--lab-text-2); border-top: 1px solid var(--lab-border-2); padding-top: 14px; }
.typecard__use b { color: var(--lab-text); }

/* ============================================================ TÉCNICO */
.tech { border-top: 1px solid var(--lab-border-2); background: #0B1824; }
.codeblock {
  background: #06121A; border: 1px solid var(--lab-border-2); border-radius: 14px;
  padding: 22px 24px; overflow-x: auto; font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 13px; line-height: 1.7; color: #B7C7D0;
}
.codeblock .k { color: #7FD0CC; } .codeblock .s { color: #DDA76A; } .codeblock .c { color: #5E7280; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; margin-top: 24px; }
.stepc { background: var(--lab-panel); border: 1px solid var(--lab-border-2); border-radius: 16px; padding: 22px; }
.stepc__n { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; color: var(--lab-teal); font-weight: 600; margin-bottom: 8px; }
.stepc__t { color: var(--lab-ink); font-weight: 600; margin-bottom: 6px; }
.stepc__x { font-size: 13.5px; color: var(--lab-text); line-height: 1.55; }

/* ============================================================ FOOTER LAB */
.labfoot {
  border-top: 1px solid var(--lab-border-2); background: #06121A;
  padding: clamp(40px,5vw,64px) clamp(16px,4vw,40px);
}
.labfoot__in { max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.labfoot__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.labfoot__brand svg { width: 30px; height: 30px; } .labfoot__brand svg path { stroke-width: 13; }
.labfoot__name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; color: var(--lab-ink); }
.labfoot__x { font-size: 13.5px; color: var(--lab-text); max-width: 40ch; line-height: 1.6; }
.labfoot__meta { font-size: 12.5px; color: var(--lab-text-2); text-align: right; line-height: 1.7; }

/* ---------- Isotipo themed (3 chevrons) + helpers de tríada ---------- */
.iso path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.iso path:nth-child(1) { stroke: var(--tk-tri1); }
.iso path:nth-child(2) { stroke: var(--tk-tri2); }
.iso path:nth-child(3) { stroke: var(--tk-tri3); }
.bar__fill--1 { background: var(--tk-tri1); }
.bar__fill--2 { background: var(--tk-tri2); }
.bar__fill--3 { background: var(--tk-tri3); }
.dot--1 { background: var(--tk-tri1); }
.dot--2 { background: var(--tk-tri2); }
.dot--3 { background: var(--tk-tri3); }

/* ---------- Lockup de marca en el p-hero (todos los themes) ---------- */
.p-hero__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; position: relative; z-index: 4; }
.p-hero__iso { position: relative; display: inline-flex; width: 34px; height: 34px; flex: none; }
.p-hero__iso .iso { width: 34px; height: 34px; }
.p-hero__iso .iso path { stroke-width: 13; }
.p-hero__wm { font-family: var(--tk-serif); font-weight: 600; font-size: 20px; color: var(--tk-band-ink); letter-spacing: .2px; }
.p-hero__wm b { color: var(--tk-band-accent); }

/* ============================================================ DECORACIÓN
   Capa festiva del Lab (la vitrine). Gated por .stage.deco-<slug> que pone
   lab.js al aplicar un theme con `deco`. Mismo lenguaje visual que el motor
   del sitio real (seasonal.css). Respeta prefers-reduced-motion. */

/* --- Navidad --- */
.stage.deco-navidad .p-hero__iso::after {
  content: ''; position: absolute; left: 8px; top: -10px; width: 24px; height: 20px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath d='M7 32 Q16 6 38 13 Q29 20 26 33 Z' fill='%23C6303E'/%3E%3Cpath d='M3 32 Q22 24 30 33 Q22 39 3 36 Z' fill='%23F6EFE6'/%3E%3Ccircle cx='39' cy='12' r='5' fill='%23F6EFE6'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
/* nieve dentro del hero card */
.p-hero .tx-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.p-hero .tx-flake { position: absolute; top: -12px; border-radius: 50%; background: #fff; animation: txfallHero linear infinite; }
.p-hero .tx-deco.is-paused .tx-flake { animation-play-state: paused; }
@keyframes txfallHero { to { transform: translateY(460px) translateX(var(--dx,0)); } }
/* guirnalda de luces en el borde superior del hero card */
.stage.deco-navidad .p-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; z-index: 3; pointer-events: none;
  background-image:
    radial-gradient(circle 3.5px at 14px 9px, #F0CE6C 62%, rgba(240,206,108,0) 66%),
    radial-gradient(circle 3.5px at 42px 9px, #D8444F 62%, rgba(216,68,79,0) 66%),
    radial-gradient(circle 3.5px at 70px 9px, #77CB96 62%, rgba(119,203,150,0) 66%);
  background-size: 84px 16px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 4px rgba(240,206,108,.4));
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: txtwinkleLab 2.8s ease-in-out infinite;
}
@keyframes txtwinkleLab { 0%,100% { opacity: .95; } 50% { opacity: .5; } }
/* snow-caps en las cards del Lab */
.stage.deco-navidad .card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle 6px at 14px 100%, #fff 96%, transparent 100%),
    radial-gradient(circle 7px at 40px 100%, #fff 96%, transparent 100%),
    radial-gradient(circle 6px at 70px 100%, #fff 96%, transparent 100%),
    radial-gradient(circle 7px at 104px 100%, #fff 96%, transparent 100%),
    linear-gradient(180deg, #fff 45%, rgba(255,255,255,0) 100%);
  background-repeat: repeat-x;
  filter: drop-shadow(0 1px 1px rgba(30,50,40,.10));
}
@media (prefers-reduced-motion: reduce) {
  .p-hero .tx-flake { display: none; }
  .stage.deco-navidad .p-hero::before { animation: none; }
}

/* ============================================================ ANIM */
@keyframes haloPulse { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 860px) {
  .diag { grid-template-columns: 1fr; }
  .proposal { grid-template-columns: 1fr; }
  .client__grid { grid-template-columns: 1fr; }
  .client__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .frow { grid-template-columns: 1fr; }
  .lhero__stats { gap: 16px 28px; }
  .stagebar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ MOTION OFF */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}