/* =============================================================
   ECODESA — styles.css · v20260701b
   "El plano vivo" v2 — blanco + color por bloques, sellos,
   iconografía duotono, 60fps (transform/opacity only).
   Display: Bricolage Grotesque · Body: Instrument Sans · Datos: IBM Plex Mono
   ============================================================= */

[hidden] { display: none !important; }

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  --white:      #FFFFFF;
  --wash-a:     #EFF9F5;   /* aguamarina suave */
  --wash-b:     #E9F6F0;
  --wash-sun:   #FBF7ED;
  --ink:        #0A2E23;
  --ink-70:     rgba(10, 46, 35, 0.74);
  --ink-55:     rgba(10, 46, 35, 0.58);
  --ink-40:     rgba(10, 46, 35, 0.42);
  --line:       rgba(10, 46, 35, 0.12);
  --line-soft:  rgba(10, 46, 35, 0.07);

  --emerald:    #0C8A5F;
  --emerald-2:  #0A7350;
  --aqua:       #35C9AC;
  --azure:      #0E86C8;
  --amber:      #DF8A00;
  --coral:      #E0523C;
  --sun:        #FFC24B;

  --display:    "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans:       "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:       "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --section-v:  clamp(5rem, 10vw, 8.5rem);
  --max-w:      1320px;
  --nav-h:      72px;

  --r-md:       14px;
  --r-lg:       20px;
  --r-xl:       26px;
  --r-band:     clamp(22px, 3vw, 38px);

  --shadow-lum:  0 20px 50px -24px rgba(12, 138, 95, 0.25), 0 4px 14px -8px rgba(10, 46, 35, 0.08);
  --shadow-deep: 0 34px 74px -30px rgba(12, 138, 95, 0.35), 0 8px 22px -10px rgba(10, 46, 35, 0.12);

  /* Superficies elevadas (tarjetas, inputs, chips) */
  --surface:        #FFFFFF;
  --surface-raised: #FAFDFB;
  --surface-subtle: #F0FAF6;
  --mix-base:       #FFFFFF;
  --on-accent:      #FFFFFF;
  --on-inverse:     #FFFFFF;
  --inverse-bg:     #0A2E23;
  --tint-ui:        rgba(12, 138, 95, 0.1);
  --tint-ui-soft:   rgba(12, 138, 95, 0.08);
  --tint-ui-border: rgba(12, 138, 95, 0.2);
  --track-muted:    rgba(10, 46, 35, 0.14);
  --scroll-border:  rgba(10, 46, 35, 0.28);
  --contact-gradient-end: #EDF7F2;
  --tienda-bg-start:      #F3FBF7;
  --tienda-bg-end:        #EEF8F3;
  --plano-grid:     rgba(12, 138, 95, 0.05);
  --plano-dash:     rgba(10, 46, 35, 0.14);
  --btn-line-border:rgba(10, 46, 35, 0.2);
  --shimmer-a:      rgba(12, 138, 95, 0.16);
  --shimmer-b:      rgba(53, 201, 172, 0.3);
  --valores-bg:     rgba(53, 201, 172, 0.14);
  --valores-border: rgba(53, 201, 172, 0.4);
  --focus-ring:     rgba(53, 201, 172, 0.2);
  --active-shadow:  rgba(10, 46, 35, 0.1);
  --sticky-shadow:  rgba(10, 46, 35, 0.15);
  --sector-hover-border: rgba(53, 201, 172, 0.55);
  --step-done-bg:   rgba(53, 201, 172, 0.2);
  --step-ping:      rgba(12, 138, 95, 0.35);
  --kp-pulse:       rgba(12, 138, 95, 0.4);
  --btn-hover-bg:       #0a0a0a;
  --btn-hover-bg-mini:  #0a0a0a;
  --btn-hover-fg:       #f5f5f5;
  --btn-paint-duration: 1.35s;
  --btn-paint-exit:     0.82s;
  --btn-paint-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --btn-wave-size:      100% 150%;
  --btn-wave-size-round: 90% 130%;
  --btn-wave-origin:    50% 100%;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A2E23' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Tema claro (default explícito) · Minimalism & Swiss ── */
:root,
[data-theme="light"] {
  --depth-travel: 120px;
  --parallax-fade-min: 0.55;
  --particle-opacity: 0.14;
  --particle-opacity-desk: 0.22;
  --tilt-max-deg: 6;
  --nc-grow-rotate-x: 12deg;
  --nc-grow-translate-y: 36px;
  --nc-grow-scale-from: 0.96;
  --serv-grow-scale-y: 0.55;
  --serv-grow-translate-y: 28px;
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Tema oscuro · Deep forest + Dimensional Layering ── */
[data-theme="dark"] {
  --white:      #060d07;
  --wash-a:     #0d1a0e;
  --wash-b:     #142115;
  --wash-sun:   #1a2b1c;
  --ink:        #e8f5e9;
  --ink-70:     rgba(232, 245, 233, 0.74);
  --ink-55:     rgba(232, 245, 233, 0.58);
  --ink-40:     rgba(232, 245, 233, 0.42);
  --line:       rgba(0, 230, 118, 0.14);
  --line-soft:  rgba(0, 230, 118, 0.08);
  --emerald:    #00e676;
  --emerald-2:  #69f0ae;
  --aqua:       #69f0ae;
  --azure:      #4dd0e1;
  --shadow-lum: 0 20px 50px -24px rgba(0, 230, 118, 0.16), 0 4px 14px -8px rgba(0, 0, 0, 0.42);
  --shadow-deep:0 34px 74px -30px rgba(0, 230, 118, 0.22), 0 8px 22px -10px rgba(0, 0, 0, 0.5);
  --depth-travel: 200px;
  --parallax-fade-min: 0.22;
  --particle-opacity: 0.22;
  --particle-opacity-desk: 0.38;
  --tilt-max-deg: 12;
  --nc-grow-rotate-x: 28deg;
  --nc-grow-translate-y: 72px;
  --nc-grow-scale-from: 0.86;
  --serv-grow-scale-y: 0.3;
  --serv-grow-translate-y: 48px;
  --surface:        #1a2b1c;
  --surface-raised: #213524;
  --surface-subtle: #142115;
  --mix-base:       #1a2b1c;
  --on-accent:      #060d07;
  --on-inverse:     #e8f5e9;
  --inverse-bg:     #142115;
  --tint-ui:        rgba(0, 230, 118, 0.12);
  --tint-ui-soft:   rgba(0, 230, 118, 0.08);
  --tint-ui-border: rgba(0, 230, 118, 0.22);
  --track-muted:    rgba(232, 245, 233, 0.12);
  --scroll-border:  rgba(232, 245, 233, 0.28);
  --contact-gradient-end: #0d1a0e;
  --tienda-bg-start:      #0d1a0e;
  --tienda-bg-end:        #142115;
  --plano-grid:     rgba(0, 230, 118, 0.06);
  --plano-dash:     rgba(232, 245, 233, 0.14);
  --btn-line-border:rgba(0, 230, 118, 0.28);
  --shimmer-a:      rgba(0, 230, 118, 0.14);
  --shimmer-b:      rgba(105, 240, 174, 0.22);
  --valores-bg:     rgba(0, 230, 118, 0.1);
  --valores-border: rgba(0, 230, 118, 0.32);
  --focus-ring:     rgba(0, 230, 118, 0.18);
  --active-shadow:  rgba(0, 0, 0, 0.35);
  --sticky-shadow:  rgba(0, 0, 0, 0.42);
  --sector-hover-border: rgba(0, 230, 118, 0.45);
  --step-done-bg:   rgba(0, 230, 118, 0.14);
  --step-ping:      rgba(0, 230, 118, 0.32);
  --kp-pulse:       rgba(0, 230, 118, 0.42);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8f5e9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] ::selection {
  background: var(--emerald);
  color: #060d07;
}

/* Transiciones suaves al cambiar de tema */
html[data-theme] body,
html[data-theme] .nav,
html[data-theme] .sec,
html[data-theme] .band,
html[data-theme] .serv-card,
html[data-theme] .nc-card,
html[data-theme] .kicker-pill,
html[data-theme] .btn,
html[data-theme] .nav-overlay,
html[data-theme] .hero-bg,
html[data-theme] .hero-veil,
html[data-theme] .nc-section--dimensional,
html[data-theme] .ficha-card,
html[data-theme] .sector,
html[data-theme] .prod,
html[data-theme] .cont-form,
html[data-theme] .hv-float,
html[data-theme] .plano-frame,
html[data-theme] .stat {
  transition: var(--theme-transition);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

::selection { background: var(--aqua); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 8px;
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--inverse-bg); color: var(--on-inverse);
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 0.75rem;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { padding-block: var(--section-v); }

/* Bandas de color redondeadas — el blanco enmarca el color */
.band {
  margin-inline: clamp(10px, 1.6vw, 26px);
  border-radius: var(--r-band);
}

.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-2);
  background: rgba(12, 138, 95, 0.09);
  border: 1px solid rgba(12, 138, 95, 0.22);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
}
.kp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  animation: dotPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--kp-pulse); }
  55%      { box-shadow: 0 0 0 7px rgba(12, 138, 95, 0); }
}

.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.sec-head .h2 { margin-top: 1.2rem; }

.h2 {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  font-weight: 760;
  max-width: 21ch;
}
.h2 em {
  font-style: normal;
  color: var(--emerald);
}

.lead {
  font-size: clamp(0.98rem, 1.8vw, 1.14rem);
  color: var(--ink-70);
  max-width: 56ch;
  line-height: 1.75;
}

/* Reveals — estado inicial solo bajo html.js */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
html.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   4. BOTONES
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.9rem 1.85rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: border-color 0.2s ease;
}

.btn-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: inherit;
  line-height: 1;
  transition: color 0.22s var(--ease-out);
}

.btn-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.btn-chevron__icon {
  display: block;
  width: 0.42rem;
  height: 0.65rem;
}

.btn-lg .btn-chevron {
  width: 1.65rem;
  height: 1.65rem;
}

.btn-mini .btn-chevron {
  width: 1.25rem;
  height: 1.25rem;
}

.btn-mini .btn-chevron__icon {
  width: 0.36rem;
  height: 0.56rem;
}

.btn-lg { padding: 1.05rem 2.2rem; font-size: 0.98rem; }

.btn-solid {
  background: var(--emerald);
  color: var(--on-accent);
  box-shadow: 0 10px 26px -12px rgba(12, 138, 95, 0.6);
}

.btn-line {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--btn-line-border);
}

.btn-mini {
  font-size: 0.8rem;
  padding: 0.55rem 1.15rem;
  background: var(--inverse-bg);
  color: var(--on-inverse);
}

/* Tienda — botones con acento de tarjeta (--fc); ola negra universal vía .btn::before */
.prod .btn-mini {
  --prod-btn-accent: var(--fc);
  --prod-btn-surface: var(--prod-btn-accent);
  --prod-btn-fg: #fff;
  background: var(--prod-btn-surface);
  color: var(--prod-btn-fg);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--prod-btn-accent) 58%, transparent);
}

/* WCAG AA: fondo mínimamente más oscuro donde el acento no alcanza 4.5:1 con blanco */
.prod[style*="#0C8A5F"] .btn-mini { --prod-btn-surface: color-mix(in srgb, var(--fc) 93%, #000); }
.prod[style*="#0E86C8"] .btn-mini { --prod-btn-surface: color-mix(in srgb, var(--fc) 86%, #000); }
.prod[style*="#E0523C"] .btn-mini { --prod-btn-surface: color-mix(in srgb, var(--fc) 82%, #000); }
.prod[style*="#7C5CD6"] .btn-mini { --prod-btn-surface: color-mix(in srgb, var(--fc) 78%, #000); }

/* Acentos claros: texto oscuro para contraste ≥ 4.5:1 */
.prod[style*="#B8860B"] .btn-mini {
  --prod-btn-surface: var(--prod-btn-accent);
  --prod-btn-fg: #1a1408;
}

.btn-hue {
  background: var(--hue, var(--emerald));
  color: var(--on-accent);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--hue, var(--emerald)) 60%, transparent);
}

.btn-full { width: 100%; border-radius: var(--r-md); }
.magnetic { will-change: transform; }

/* Ola negra universal — elipse ancha que emerge desde el centro de la base */
.btn::before,
.nc-cta::before,
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--btn-hover-bg);
  clip-path: ellipse(0% 0% at var(--btn-wave-origin));
  transition: clip-path var(--btn-paint-exit) var(--btn-paint-ease);
  z-index: 0;
  pointer-events: none;
  will-change: clip-path;
}

/* Ola perceptible sobre fondos ya oscuros (modo oscuro / btn-mini oscuro) */
[data-theme="dark"] .btn::before,
[data-theme="dark"] .nc-cta::before,
[data-theme="dark"] .theme-toggle::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.btn-full::before {
  --btn-wave-size: 110% 165%;
}

.theme-toggle::before {
  --btn-wave-size: var(--btn-wave-size-round);
}

/* Hover / focus teclado — solo puntero fino (desktop) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before,
  .btn:focus-visible::before,
  .nc-cta:hover::before,
  .nc-cta:focus-visible::before,
  .theme-toggle:hover::before,
  .theme-toggle:focus-visible::before {
    clip-path: ellipse(var(--btn-wave-size) at var(--btn-wave-origin));
    transition: clip-path var(--btn-paint-duration) var(--btn-paint-ease);
  }

  .btn-solid:hover .btn-text,
  .btn-solid:focus-visible .btn-text,
  .btn-hue:hover .btn-text,
  .btn-hue:focus-visible .btn-text,
  .nc-cta:hover .btn-text,
  .nc-cta:focus-visible .btn-text {
    color: var(--btn-hover-fg);
    transition: color 0.25s ease 0.28s;
  }

  .btn-solid:hover,
  .btn-solid:focus-visible,
  .btn-hue:hover,
  .btn-hue:focus-visible,
  .nc-cta:hover,
  .nc-cta:focus-visible,
  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    color: var(--btn-hover-fg);
  }

  .btn-line:hover,
  .btn-line:focus-visible {
    border-color: var(--btn-hover-bg);
  }

  .btn-line:hover .btn-text,
  .btn-line:focus-visible .btn-text {
    color: var(--btn-hover-fg);
    transition: color 0.25s ease 0.32s;
  }

  .btn-mini:hover,
  .btn-mini:focus-visible,
  .btn-mini:hover .btn-text,
  .btn-mini:focus-visible .btn-text {
    color: var(--btn-hover-fg);
    transition: color 0.25s ease 0.28s;
  }

  .btn:hover .btn-chevron,
  .btn:focus-visible .btn-chevron,
  .nc-cta:hover .btn-chevron,
  .nc-cta:focus-visible .btn-chevron {
    opacity: 1;
    color: inherit;
    border-color: currentColor;
  }

  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    border-color: var(--btn-hover-bg);
  }

  .theme-toggle .theme-icon {
    position: relative;
    z-index: 1;
  }

  .float-wa:hover::after,
  .float-wa:focus-visible::after {
    clip-path: ellipse(var(--btn-wave-size-round) at var(--btn-wave-origin));
    transition: clip-path var(--btn-paint-duration) var(--btn-paint-ease);
  }

  .float-wa:hover,
  .float-wa:focus-visible {
    color: var(--btn-hover-fg);
  }
}

/* =============================================================
   5. PROGRESO DE SCROLL
   ============================================================= */
.progress-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--aqua));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  .progress-fill {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progressGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* =============================================================
   6. NAV
   ============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  overflow: visible;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px -18px rgba(10, 46, 35, 0.2);
}
[data-theme="dark"] .nav.is-scrolled {
  background: rgba(6, 13, 7, 0.9);
  box-shadow: 0 8px 30px -18px rgba(0, 230, 118, 0.12);
}

.nav-inner {
  max-width: 1380px;
  margin-inline: auto;
  height: var(--nav-h);
  padding-inline: clamp(1.25rem, 3.5vw, 3rem);
  display: flex;
  align-items: center;
  gap: 2rem;
  overflow: visible;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
  overflow: visible;
}

.brand-logo-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 90px;
  padding: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* Logo — solo respiración (sin ondas ripple) */
.brand-logo {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  animation: logoBreathe 2.8s ease-in-out infinite;
}
@keyframes logoBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.13); }
}
.brand-mark { width: 33px; height: 33px; }
.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand-sas {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--emerald);
  margin-left: 0.35rem;
}

.nav-links { flex: 1; display: none; justify-content: center; }
.nav-links ul { display: flex; align-items: center; gap: clamp(1.3rem, 2.4vw, 2.4rem); }
.nav-links a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-70);
  padding-block: 0.3rem;
  transition: color 0.25s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--aqua));
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.btn-nav { display: none; padding: 0.66rem 1.5rem; font-size: 0.86rem; flex-shrink: 0; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-shrink: 0;
}
@media (min-width: 992px) {
  .nav-actions { margin-left: 0; }
}

.theme-toggle {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink-70);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-icon { display: block; }
.theme-icon--sun  { display: none; }
.theme-icon--moon { display: block; }
[data-theme="dark"] .theme-icon--sun  { display: block; }
[data-theme="dark"] .theme-icon--moon { display: none; }
[data-theme="dark"] .theme-toggle {
  background: rgba(0, 230, 118, 0.08);
  border-color: var(--line);
  color: var(--emerald);
}

.burger {
  margin-left: 0;
  width: 44px; height: 44px;
  display: grid;
  place-content: center;
  gap: 7px;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 26px; height: 2.2px;
  background: var(--ink);
  border-radius: 99px;
  transition: transform 0.35s var(--ease-out);
}
.burger.is-open span:nth-child(1) { transform: translateY(4.6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4.6px) rotate(-45deg); }

@media (min-width: 992px) {
  .nav-links { display: flex; }
  .btn-nav { display: inline-flex; }
  .burger { display: none; }
}

/* Overlay móvil */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(53, 201, 172, 0.2) 0%, transparent 55%),
    radial-gradient(100% 80% at -10% 110%, rgba(12, 138, 95, 0.12) 0%, transparent 50%),
    var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 2rem var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay.is-open { opacity: 1; pointer-events: all; }
.nav-overlay li {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + 80ms);
}
.nav-overlay.is-open li { opacity: 1; transform: none; }
.nav-overlay nav a {
  font-family: var(--display);
  font-weight: 760;
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.5;
  transition: color 0.25s;
}
.nav-overlay nav a:hover { color: var(--emerald); }
.nav-overlay .btn { align-self: flex-start; }
.overlay-contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-55);
}
.overlay-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: grid; place-content: center;
  font-size: 1.3rem;
  color: var(--ink-55);
  transition: color 0.2s, transform 0.3s var(--ease-out);
}
.overlay-close:hover { color: var(--ink); transform: rotate(90deg); }

/* =============================================================
   7. HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 1rem);
  overflow: visible;
}

/* Depth parallax — translateY falso, sin perspective (iOS-safe) */
.hero-depth-layer {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 112%;
  top: -6%;
  background: var(--white);
  overflow: hidden;
}

/* Aurora boreal — blobs animados detrás de cáusticas/venas */
.hero-aurora {
  position: absolute;
  inset: -12%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.hero-aurora-blob--1 {
  width: 58%;
  height: 52%;
  top: 2%;
  right: 6%;
  background: radial-gradient(circle at 42% 38%, rgba(53, 201, 172, 0.82) 0%, rgba(12, 138, 95, 0.42) 42%, transparent 72%);
  animation: auroraFlow1 14s ease-in-out infinite, auroraBreathe1 9s ease-in-out infinite;
}
.hero-aurora-blob--2 {
  width: 50%;
  height: 48%;
  bottom: 4%;
  left: -4%;
  background: radial-gradient(circle at 55% 50%, rgba(12, 138, 95, 0.72) 0%, rgba(53, 201, 172, 0.38) 48%, transparent 74%);
  animation: auroraFlow2 17s ease-in-out infinite, auroraBreathe2 11s ease-in-out infinite;
  animation-delay: 0s, -2s;
}
.hero-aurora-blob--3 {
  width: 44%;
  height: 44%;
  top: 38%;
  left: 18%;
  filter: blur(60px);
  background: radial-gradient(circle at 50% 45%, rgba(14, 134, 199, 0.55) 0%, rgba(53, 201, 172, 0.32) 50%, transparent 75%);
  animation: auroraFlow3 12s ease-in-out infinite, auroraBreathe3 8s ease-in-out infinite;
  animation-delay: 0s, -4s;
}
.hero-aurora-blob--4 {
  width: 46%;
  height: 40%;
  top: 8%;
  left: 42%;
  filter: blur(80px);
  background: radial-gradient(circle at 48% 52%, rgba(53, 201, 172, 0.68) 0%, rgba(14, 134, 199, 0.28) 46%, transparent 72%);
  animation: auroraFlow4 20s ease-in-out infinite, auroraBreathe4 13s ease-in-out infinite;
  animation-delay: 0s, -1s;
}
[data-theme="dark"] .hero-aurora-blob--1 {
  background: radial-gradient(circle at 42% 38%, rgba(0, 230, 118, 0.62) 0%, rgba(27, 94, 32, 0.38) 42%, transparent 72%);
}
[data-theme="dark"] .hero-aurora-blob--2 {
  background: radial-gradient(circle at 55% 50%, rgba(105, 240, 174, 0.52) 0%, rgba(0, 230, 118, 0.32) 48%, transparent 74%);
}
[data-theme="dark"] .hero-aurora-blob--3 {
  background: radial-gradient(circle at 50% 45%, rgba(0, 150, 199, 0.48) 0%, rgba(0, 230, 118, 0.28) 50%, transparent 75%);
}
[data-theme="dark"] .hero-aurora-blob--4 {
  background: radial-gradient(circle at 48% 52%, rgba(0, 230, 118, 0.55) 0%, rgba(77, 208, 225, 0.22) 46%, transparent 72%);
}
[data-theme="dark"] .hero-aurora-blob {
  mix-blend-mode: lighten;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg.shader-off .hero-canvas { display: none; }

/* Partículas — capa fondo; visibles en móvil con opacidad reducida */
.hero-particles {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--particle-opacity);
}
@media (min-width: 768px) {
  .hero-particles {
    opacity: var(--particle-opacity-desk);
  }
}

[data-theme="dark"] .hero-bg {
  background: var(--white);
}
[data-theme="dark"] .hero-veil {
  background:
    linear-gradient(to bottom, rgba(6, 13, 7, 0.72) 0%, transparent 24%, transparent 68%, var(--white) 100%),
    radial-gradient(65% 85% at 16% 60%, rgba(0, 230, 118, 0.1) 0%, transparent 60%);
}
[data-theme="dark"] .nav-overlay {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(0, 230, 118, 0.12) 0%, transparent 55%),
    radial-gradient(100% 80% at -10% 110%, rgba(27, 94, 32, 0.22) 0%, transparent 50%),
    var(--white);
}

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, transparent 24%, transparent 70%, var(--white) 100%),
    radial-gradient(65% 85% at 16% 60%, rgba(255, 255, 255, 0.8) 0%, transparent 60%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-block: 3rem 6rem;
}

.hero-title {
  font-size: clamp(3.1rem, 9vw, 7.4rem);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.034em;
  margin: 1.5rem 0 1.4rem;
  max-width: 12ch;
}
.hero-title .mask {
  display: block;
  overflow: hidden;
  padding-block: 0.07em;
  margin-block: -0.07em;
}
.hero-title .line { display: inline-block; }

/* Hero curtain reveal — clip-path GPU sweep on load */
html.js .hero-title {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}
html.js .hero-title.in {
  clip-path: inset(0 0 0 0);
}

/* Degradado que navega dentro de la línea enmascarada (anidado) */
.grad-text {
  background: linear-gradient(100deg, var(--emerald) 0%, var(--aqua) 32%, var(--azure) 55%, var(--emerald) 80%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradPan 9s linear infinite;
}
@keyframes gradPan {
  from { background-position: 0% 50%; }
  to   { background-position: 280% 50%; }
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.16rem);
  color: var(--ink-70);
  max-width: 44ch;
  margin-bottom: 2.2rem;
}
.hero-sub strong { color: var(--emerald-2); font-weight: 650; }

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-70);
}
.hero-proof svg { color: var(--emerald); flex-shrink: 0; }

/* Entrada del hero */
html.js .hero-kicker,
html.js .hero-sub,
html.js .hero-actions,
html.js .hero-proof,
html.js .hero-visual,
html.js .scrollcue {
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}
html.js body.is-loaded .hero-kicker  { opacity: 1; transition-delay: 0.15s; }
html.js body.is-loaded .hero-sub     { opacity: 1; transition-delay: 0.5s; }
html.js body.is-loaded .hero-actions { opacity: 1; transition-delay: 0.65s; }
html.js body.is-loaded .hero-proof   { opacity: 1; transition-delay: 0.8s; }
html.js body.is-loaded .hero-visual  { opacity: 1; transition-delay: 0.55s; }
html.js body.is-loaded .scrollcue    { opacity: 1; transition-delay: 1.5s; }

/* — Visual: tarjeta de licencia + chips + compás — */
.hero-visual {
  position: relative;
  min-height: 500px;
}
.hero-deco {
  position: absolute;
  top: 50%; left: 55%;
  width: min(48vw, 620px);
  transform: translate(-50%, -50%);
  color: var(--emerald);
  opacity: 0.55;
  pointer-events: none;
}
.hd-spin {
  transform-origin: 260px 260px;
  transform-box: view-box;
  animation: decoSpin 70s linear infinite;
}
@keyframes decoSpin { to { transform: rotate(360deg); } }

.hv-card {
  position: absolute;
  top: 16%; left: 8%;
  width: min(400px, 88%);
  z-index: 2;
}
.hv-card .hv-float {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
  padding: 1.4rem 1.5rem;
  animation: chipFloat 12s ease-in-out infinite;
}
.hvc-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
}
.hvc-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-content: center;
  background: var(--tint-ui);
  color: var(--emerald);
}
.hvc-titles strong {
  display: block;
  font-family: var(--display);
  font-weight: 720;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.hvc-titles em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  margin-top: 0.2rem;
}
.hvc-status {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--emerald);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}
.hvc-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.2rem 0 1.3rem;
}
.hvc-rows span {
  display: block;
  height: 9px;
  width: var(--w, 80%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--shimmer-a), var(--shimmer-b), var(--shimmer-a));
  background-size: 200% 100%;
  animation: shimmer 3.6s linear infinite;
}
.hvc-rows span:nth-child(2) { animation-delay: 0.5s; }
.hvc-rows span:nth-child(3) { animation-delay: 1s; }
.hvc-rows span:nth-child(4) { animation-delay: 1.5s; }
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -80% 0; }
}
.hvc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.hvc-seal {
  width: 84px;
  color: var(--emerald);
  transform: rotate(-10deg);
}
.hvc-sign { width: 110px; color: var(--ink-55); }

.hv-chip {
  position: absolute;
  z-index: 3;
  will-change: transform;
}
.hv-chip-a { top: 2%; right: 2%; }
.hv-chip-b { bottom: 10%; left: 0; }
.hv-chip .hv-float {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lum);
  padding: 0.75rem 1.05rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
  animation: chipFloat 10s ease-in-out infinite;
}
.hv-chip-b .hv-float { animation-delay: -5s; }
.hv-chip em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.58rem;
  color: var(--ink-55);
  margin-top: 0.15rem;
  letter-spacing: 0.04em;
}
.hv-chip svg { color: var(--emerald); flex-shrink: 0; }
.hv-bar {
  width: 52px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.hv-bar span {
  display: block;
  height: 100%;
  width: 86%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--emerald), var(--aqua));
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.scrollcue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.scrollcue-track {
  width: 22px; height: 36px;
  border: 1.5px solid var(--scroll-border);
  border-radius: 99px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scrollcue-dot {
  width: 4px; height: 8px;
  border-radius: 99px;
  background: var(--emerald);
  animation: cueDrop 1.9s var(--ease-soft) infinite;
}
@keyframes cueDrop {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
.scrollcue-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
}

@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: 1.02fr 0.98fr; }
}
@media (max-width: 1099px) {
  .hero-visual { min-height: 460px; max-width: 560px; margin-inline: auto; width: 100%; }
  .hero-deco { left: 50%; }
}
@media (max-width: 520px) {
  .hero-visual { min-height: 400px; }
  .hv-card { left: 0; width: 100%; }
  .hv-chip-a { right: -4px; }
}

/* =============================================================
   8. SELLOS — autoridades y normas (marquee anidado)
   ============================================================= */
.normas {
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2.8rem, 5vw, 4.2rem);
  background: var(--white);
}
.normas-title {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 2.4rem;
  padding-inline: var(--gutter);
}
.seal-marquee {
  overflow: hidden;
}
.seal-track {
  display: flex;
  width: max-content;
  animation: marqueeX 46s linear infinite;
}
.seal-marquee:hover .seal-track { animation-play-state: paused; }
.seal-set {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.2rem, 4.5vw, 3.8rem);
  padding-right: clamp(2.2rem, 4.5vw, 3.8rem);
}
@keyframes marqueeX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 116px;
  flex-shrink: 0;
}
.seal-ring {
  position: relative;
  width: 78px; height: 78px;
  color: var(--emerald);
  display: grid;
  place-content: center;
}
.seal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-spin {
  transform-origin: 38px 38px;
  transform-box: view-box;
  animation: sealSpin 34s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.seal-ring b {
  font-family: var(--display);
  font-weight: 760;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: center;
  line-height: 1.05;
}
.seal-ring b i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--emerald-2);
  margin-top: 0.15rem;
}
.seal-name {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: center;
  line-height: 1.55;
}

/* =============================================================
   9. NOSOTROS
   ============================================================= */
.nosotros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 768px) {
  .nosotros { min-height: 78vh; }
}

.nos-constellation {
  display: none;
  position: absolute;
  top: -6%;
  left: -5%;
  width: 110%;
  height: 112%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background: transparent;
}
@media (min-width: 768px) {
  .nos-constellation { display: block; }
}
.nosotros > .container {
  position: relative;
  z-index: 1;
}

/* Legibilidad sobre red neuronal prominente */
.nosotros .sec-head,
.nosotros .nos-main {
  position: relative;
}
.nosotros .sec-head::before,
.nosotros .nos-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.4rem -2rem;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.42) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
[data-theme="dark"] .nosotros .sec-head::before,
[data-theme="dark"] .nosotros .nos-main::before {
  background: linear-gradient(145deg, rgba(5, 14, 10, 0.88) 0%, rgba(5, 14, 10, 0.65) 50%, rgba(5, 14, 10, 0.38) 100%);
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.08);
}

.nos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: clamp(2.4rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  --hue: var(--emerald);
  background: color-mix(in srgb, var(--hue) 7%, var(--mix-base));
  border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--hue) 45%, transparent);
}
.stat-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  background: color-mix(in srgb, var(--hue) 14%, var(--mix-base));
  color: var(--hue);
}
.stat-val {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-val i {
  font-style: normal;
  font-size: 0.6em;
  color: var(--hue);
}
.stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-70);
}

/* Ficha técnica */
.ficha-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lum);
  overflow: hidden;
}
.ficha-band {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--emerald);
  color: var(--on-accent);
  border-radius: 12px;
  padding: 0.65rem 1.05rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.ficha-band-logo {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  /* Icono verde → blanco nítido sobre verde oscuro (modo claro) */
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
[data-theme="dark"] .ficha-band-logo {
  /* Icono verde → tinta oscura sobre verde neón (modo oscuro) */
  filter: brightness(0) saturate(100%);
  opacity: 0.94;
}
.ficha-topo {
  position: absolute;
  top: -20px; right: -70px;
  width: 400px;
  height: auto;
  color: var(--emerald);
  pointer-events: none;
  will-change: transform;
}
.ficha-rows { position: relative; }
.frow {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}
.frow dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-top: 0.2rem;
}
.frow dd {
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink);
}

.mv { position: relative; border-bottom: 1px solid var(--line-soft); }
.mv summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding-block: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.mv summary::-webkit-details-marker { display: none; }
.mv summary i {
  font-style: normal;
  width: 24px; height: 24px;
  display: grid; place-content: center;
  border-radius: 8px;
  background: var(--tint-ui);
  color: var(--emerald);
  transition: transform 0.35s var(--ease-out);
}
.mv[open] summary i { transform: rotate(45deg); }
.mv p {
  font-size: 0.88rem;
  color: var(--ink-70);
  line-height: 1.7;
  padding-bottom: 1.2rem;
}

.valores { margin-top: 1.4rem; position: relative; }
.valores-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 0.8rem;
}
.valores ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.valores li {
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--emerald-2);
  background: var(--valores-bg);
  border: 1px solid var(--valores-border);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
}

@media (min-width: 960px) {
  .nos-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; }
}

/* Misión / Visión / Valores — acordeón en ficha técnica */
.mvv-accordion { margin-top: 1.4rem; }
.mvv-heading {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 0.4rem;
}

.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 0; }

.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 16px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
  text-align: left;
  border-radius: 8px;
  transition: background 0.2s ease-out;
}
.acc-head:hover { background: var(--tint-ui); }

.acc-ico {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid;
  place-content: center;
  font-style: normal;
  color: var(--emerald);
  transform: rotate(0deg);
  transition: transform 0.3s ease-out;
}
.acc-ico::before { content: "▶"; font-size: 0.6rem; }
.acc-item.is-open .acc-ico { transform: rotate(90deg); }

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.acc-item.is-open .acc-body { max-height: 32rem; }
.acc-body p {
  font-size: 0.88rem;
  color: var(--ink-70);
  line-height: 1.7;
  padding: 0 4px 1rem;
}
.acc-body .mvv-values { padding: 0 4px 1rem; }

.mvv-values { display: flex; flex-direction: column; gap: 0.7rem; }
.mvv-values li {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding-left: 1.5rem;
  position: relative;
}
.mvv-values li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--emerald);
  font-weight: 700;
}
.mvv-values li span {
  display: block;
  font-size: 0.8rem;
  font-weight: 450;
  color: var(--ink-40);
}

/* =============================================================
   10. SERVICIOS — banda de color + recorrido horizontal
   ============================================================= */
.servicios {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 1.5rem) 2.5rem;
  background:
    radial-gradient(70% 55% at 88% 8%, rgba(53, 201, 172, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--wash-a) 0%, var(--wash-b) 100%);
  overflow: visible;
}

.serv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: 1.5rem;
}
.serv-title {
  margin-top: 1.1rem;
  max-width: none;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.serv-progress {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--mono);
  flex-shrink: 0;
}
.serv-num {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}
.serv-total { font-size: 0.78rem; color: var(--ink-40); }
.serv-bar {
  width: 90px;
  height: 3px;
  background: var(--track-muted);
  border-radius: 99px;
  overflow: hidden;
  align-self: center;
}
.serv-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--aqua));
  transform: scaleX(0.2);
  transform-origin: left center;
}

.serv-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.serv-viewport::-webkit-scrollbar { display: none; }
.servicios.js-hscroll .serv-viewport {
  overflow: visible;
  scroll-snap-type: none;
}

.serv-track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}

.serv-card {
  --hue: var(--emerald);
  position: relative;
  flex: 0 0 min(88vw, 1060px);
  scroll-snap-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--hue);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.65rem;
  min-height: auto;
  height: auto;
  box-shadow: var(--shadow-lum);
  overflow: visible;
  will-change: transform, opacity;
}

/* Scroll-triggered grow-in — IntersectionObserver */
html.js .serv-card.service-card {
  opacity: 0;
  transform: scaleY(var(--serv-grow-scale-y)) translateY(var(--serv-grow-translate-y));
  transform-origin: bottom center;
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.js .serv-card.service-card.is-grown {
  opacity: 1;
  transform: scale(1);
}
.serv-card.is-active {
  box-shadow:
    0 32px 76px -30px color-mix(in srgb, var(--hue) 42%, transparent),
    0 6px 18px -10px var(--active-shadow);
}

.sc-mark {
  position: absolute;
  right: -36px; bottom: -48px;
  width: 300px;
  color: var(--hue);
  opacity: 0.06;
  transform: rotate(-8deg);
  pointer-events: none;
}

.sc-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
  will-change: transform;
}
.sc-idx {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.8vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--hue) 22%, transparent);
  transition: color 0.5s;
  will-change: transform;
}
.serv-card.is-active .sc-idx {
  color: color-mix(in srgb, var(--hue) 38%, transparent);
}
.sc-icon {
  width: 78px; height: 78px;
  border-radius: 20px;
  display: grid;
  place-content: center;
  background: color-mix(in srgb, var(--hue) 10%, var(--mix-base));
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  color: var(--hue);
  will-change: transform;
}
.sc-icon svg { width: 48px; height: 48px; }
.icon-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.5s var(--ease-out) 0.25s;
}
.serv-card.is-active .icon-path { stroke-dashoffset: 0; }
html.no-js .icon-path { stroke-dashoffset: 0; }

.sc-title {
  font-size: clamp(1.68rem, 3vw, 2.45rem);
  font-weight: 760;
  color: var(--ink);
  line-height: 1.08;
}
.sc-desc {
  font-size: 0.92rem;
  color: var(--ink-70);
  max-width: 40ch;
  line-height: 1.58;
}

.sc-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
  will-change: transform;
}
.sc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.sc-list li {
  position: relative;
  font-size: 0.86rem;
  color: var(--ink-70);
  padding: 0.4rem 0 0.4rem 1.55rem;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.4;
}
.sc-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0.38rem;
  width: 16px; height: 16px;
  border-radius: 5px;
  display: grid;
  place-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 12%, var(--mix-base));
}
.sc-cta { align-self: flex-start; font-size: 0.84rem; padding: 0.68rem 1.35rem; }

.serv-hint {
  margin-top: 1.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}

@media (min-width: 960px) {
  .servicios {
    padding-block: calc(var(--nav-h) + 1rem) 1.75rem;
  }
  .serv-card { grid-template-columns: 0.42fr 0.58fr; gap: 2.5rem; align-items: start; }
  .servicios.js-hscroll .serv-hint { visibility: hidden; }
}
@media (min-width: 1100px) {
  .sc-list { grid-template-columns: 1fr 1fr; column-gap: 1.65rem; }
}

/* =============================================================
   11. SECTORES
   ============================================================= */
.sectores { background: var(--white); }

.sectores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.sector {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.3rem 1.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.sector:hover {
  transform: translateY(-6px);
  border-color: var(--sector-hover-border);
  box-shadow: var(--shadow-lum);
}

.medallion {
  width: 66px; height: 66px;
  border-radius: 18px;
  display: grid;
  place-content: center;
  background: var(--tint-ui-soft);
  border: 1px solid var(--tint-ui-border);
  color: var(--emerald);
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.medallion svg { width: 40px; height: 40px; }
.sector:hover .medallion {
  background: var(--emerald);
  color: var(--on-accent);
  transform: scale(1.06) rotate(-3deg);
}

.sector-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sector-sub {
  font-size: 0.74rem;
  color: var(--ink-55);
  margin-top: -0.35rem;
}

@media (min-width: 640px)  { .sectores-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sectores-grid { grid-template-columns: repeat(6, 1fr); } }

/* =============================================================
   12. TIENDA
   ============================================================= */
.tienda {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(50% 40% at 85% 10%, rgba(53, 201, 172, 0.14) 0%, transparent 60%),
    radial-gradient(45% 38% at 6% 92%, rgba(255, 194, 75, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--tienda-bg-start) 0%, var(--tienda-bg-end) 100%);
  overflow: clip;
}
.tienda-hud {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --scan-travel: 700px;
  --tienda-hud-line: rgba(12, 138, 95, 0.14);
  --tienda-scan-core: rgba(53, 230, 190, 0.95);
  --tienda-scan-glow: rgba(0, 220, 180, 0.65);
}
[data-theme="dark"] .tienda-hud {
  --tienda-hud-line: rgba(0, 230, 118, 0.16);
  --tienda-scan-core: rgba(120, 255, 220, 1);
  --tienda-scan-glow: rgba(0, 255, 200, 0.75);
}
.tienda-hud-grid {
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image:
    repeating-linear-gradient(0deg, var(--tienda-hud-line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--tienda-hud-line) 0 1px, transparent 1px 44px);
}
[data-theme="dark"] .tienda-hud-grid { opacity: 0.15; }

.tienda-scan {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 3px;
  will-change: transform, opacity;
  pointer-events: none;
}
.tienda-scan--main {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(53, 201, 172, 0.25) 18%,
    var(--tienda-scan-core) 50%,
    rgba(53, 201, 172, 0.25) 82%,
    transparent 100%);
  filter: drop-shadow(0 0 10px var(--tienda-scan-glow)) drop-shadow(0 0 24px var(--tienda-scan-glow));
  animation: tiendaScanMain 3.5s ease-in-out infinite;
}
.tienda-scan--sub {
  height: 1px;
  opacity: 0.28;
  background: linear-gradient(90deg, transparent, var(--tienda-scan-core), transparent);
  filter: drop-shadow(0 0 6px var(--tienda-scan-glow));
}
.tienda-scan--sub-1 { animation: tiendaScanSub1 5.2s ease-in-out infinite; }
.tienda-scan--sub-2 { animation: tiendaScanSub2 7s ease-in-out infinite 0.8s; }
.tienda-scan--sub-3 { animation: tiendaScanSub3 4.4s ease-in-out infinite 1.6s; }

.tienda-terminals {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tienda-terminal {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tienda-scan-core);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  text-shadow: 0 0 12px var(--tienda-scan-glow);
  pointer-events: none;
}
.tienda-terminal.is-on {
  opacity: 0.38;
  transform: translate3d(0, 0, 0);
}
[data-theme="dark"] .tienda-terminal.is-on { opacity: 0.45; }

.tienda-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 32% at 50% 50%, rgba(53, 201, 172, 0.1) 0%, transparent 60%);
  animation: glowBreath 14s ease-in-out infinite;
}
@keyframes glowBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tienda .container { position: relative; z-index: 2; }

.tienda-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  color: var(--ink-55);
  margin-top: 0.9rem;
}

.tienda-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 3rem;
}

.prod {
  --fc: var(--emerald);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--fc);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.prod:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-deep);
}
.prod--featured {
  box-shadow: 0 0 0 4px rgba(255, 194, 75, 0.25), var(--shadow-lum);
}
.prod--sanichek {
  background: var(--surface);
  z-index: 1;
  transition: transform 0.45s var(--ease-out), box-shadow 0.2s ease-out;
}
.prod--sanichek.is-scan-hit {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--fc) 55%, transparent),
    0 0 32px color-mix(in srgb, var(--fc) 45%, transparent),
    0 0 64px rgba(53, 201, 172, 0.28),
    0 0 0 4px rgba(255, 194, 75, 0.25),
    var(--shadow-lum);
}
[data-theme="dark"] .prod--sanichek.is-scan-hit {
  box-shadow:
    0 0 0 2px rgba(0, 230, 118, 0.55),
    0 0 36px rgba(0, 230, 118, 0.4),
    0 0 72px rgba(0, 255, 200, 0.22),
    0 0 0 4px rgba(255, 194, 75, 0.2),
    var(--shadow-lum);
}

.prod-flag {
  position: absolute;
  top: -13px; left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  box-shadow: 0 6px 16px -6px rgba(255, 194, 75, 0.8);
}

.prod-top { display: flex; }
.prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 10%, var(--mix-base));
  border: 1px solid color-mix(in srgb, var(--fc) 28%, transparent);
}

.prod-name {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.prod-format {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.prod-desc {
  font-size: 0.88rem;
  color: var(--ink-70);
  line-height: 1.6;
  flex: 1;
}
.prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.prod-price {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.prod-price em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--ink-40);
  letter-spacing: 0.08em;
}

.tienda-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.tienda-cta p { color: var(--ink-55); font-size: 0.95rem; }

@media (min-width: 640px)  { .tienda-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tienda-grid { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   12b. SOLUCIONES A MEDIDA — plan PSB + herramientas IA
   ============================================================= */
.soluciones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px)  { .soluciones-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
@media (min-width: 1024px) { .sol-card { padding: 32px; } }

.sol-card {
  position: relative;
  background: linear-gradient(165deg, color-mix(in srgb, var(--emerald) 5%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--emerald);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.sol-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  z-index: 2;
}

.sol-card--ia {
  border-left-width: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px color-mix(in srgb, var(--emerald) 35%, transparent);
}
.sol-card--ia:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--emerald) 55%, transparent);
}

.sol-badge {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald) 28%, transparent);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
}
.sol-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sol-price {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--emerald);
}
.sol-price em { font-style: normal; font-size: 0.65rem; color: var(--ink-40); letter-spacing: 0.08em; }
.sol-desc { font-size: 0.92rem; color: var(--ink-70); line-height: 1.6; }

.sol-features, .sol-includes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--ink-70);
}
.sol-features li {
  padding-block: 0.15rem;
  padding-inline: 1.9rem 0.4rem;
  margin-inline: -0.4rem;
  position: relative;
  border-radius: 6px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease-out;
}
.sol-features li:hover {
  transform: translateX(4px);
  background: color-mix(in srgb, var(--emerald) 8%, transparent);
}
.sol-features li::before {
  content: "";
  position: absolute;
  left: 0.4rem; top: 0.35em;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--emerald) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald) 45%, transparent);
}
.sol-features li::after {
  content: "✓";
  position: absolute;
  left: 0.62rem; top: -0.05em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--emerald);
  transform-origin: center;
}
html.js .sol-features li.in::after {
  animation: solCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--rd, 0s);
}
@keyframes solCheckPop {
  0%   { transform: rotate(-360deg) scale(0.3); opacity: 0; }
  70%  { transform: rotate(12deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

.sol-includes-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 0.25rem;
}
.sol-includes li { padding-left: 1rem; position: relative; }
.sol-includes li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--emerald);
}

.sol-card .btn {
  margin-top: auto;
  align-self: flex-start;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--emerald) 60%, transparent);
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
.sol-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--emerald) 55%, transparent);
}

.btn-ripple {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: solRipple 0.6s ease-out forwards;
}
@keyframes solRipple {
  to { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* =============================================================
   13. PROCESO — scrollytelling con secuencia
   ============================================================= */
.proceso {
  position: relative;
  background: var(--white);
  padding-top: var(--section-v);
}
.proceso-head .h2 { margin-top: 1.2rem; }
.proceso-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.08rem);
  color: var(--ink-55);
  max-width: 52ch;
  margin-top: 1rem;
}

.proceso-stage { padding-bottom: var(--section-v); padding-top: 2.5rem; }
.proceso-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vh, 2rem);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  opacity: 0.38;
  transition: opacity 0.45s var(--ease-soft);
}
.step.is-active { opacity: 1; }
.step.is-done   { opacity: 0.65; }

.step-ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-content: center;
  background: var(--tint-ui-soft);
  border: 1px solid var(--tint-ui-border);
  color: var(--emerald);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.step.is-active .step-ico {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--on-accent);
  animation: stepPing 2.4s ease-in-out infinite;
}
.step.is-done .step-ico {
  background: var(--step-done-bg);
  color: var(--emerald-2);
}
@keyframes stepPing {
  0%, 100% { box-shadow: 0 0 0 0 var(--step-ping); }
  55%      { box-shadow: 0 0 0 10px rgba(12, 138, 95, 0); }
}

.step-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  font-weight: 740;
  margin-bottom: 0.4rem;
}
.step-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--emerald);
  background: var(--tint-ui-soft);
  border: 1px solid var(--tint-ui-border);
  border-radius: 7px;
  padding: 0.18rem 0.45rem;
}
.step-desc {
  font-size: 0.92rem;
  color: var(--ink-70);
  max-width: 44ch;
  line-height: 1.65;
}

.step-bar {
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: -1.1rem;
  width: 2.5px;
  background: var(--track-muted);
  border-radius: 99px;
  overflow: hidden;
}
.step:last-child .step-bar { display: none; }
.step-bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--emerald), var(--aqua));
  transform: scaleY(0);
  transform-origin: top center;
}

/* El plano vivo */
.plano { position: relative; will-change: transform; }
.plano-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: min(70vh, 660px);
  margin-inline: auto;
  background:
    repeating-linear-gradient(0deg,  var(--plano-grid) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--plano-grid) 0 1px, transparent 1px 44px),
    linear-gradient(150deg, var(--surface) 0%, var(--surface-subtle) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lum);
  overflow: hidden;
}
.plano-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--plano-dash);
  border-radius: calc(var(--r-xl) - 10px);
  pointer-events: none;
}
#planoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plano-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
#frameCounter {
  color: var(--emerald);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#frameCounter::after {
  content: "_";
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.plano-bar {
  display: block;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--track-muted);
  border-radius: 99px;
  overflow: hidden;
}
.plano-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--aqua));
  transform: scaleX(0);
  transform-origin: left center;
}

@media (min-width: 1024px) {
  .proceso-grid { grid-template-columns: 0.46fr 0.54fr; gap: 4rem; }
  .proceso-stage {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--nav-h) + 1rem) 2rem;
  }
}
@media (max-width: 1023px) {
  .plano {
    order: -1;
    position: sticky;
    top: calc(var(--nav-h) + 6px);
    z-index: 2;
    background: var(--surface);
    padding-bottom: 0.7rem;
    box-shadow: 0 18px 18px -18px var(--sticky-shadow);
  }
  .plano-frame { max-height: 42vh; }
  .steps { padding-top: 1.6rem; }
}

/* =============================================================
   14. CONTACTO + CIERRE 3D
   ============================================================= */
.close-zone {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 46%, #EFF4F2 100%);
}
.close-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.close-mesh-scene {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  perspective: 800px;
  transform-style: preserve-3d;
  will-change: transform;
}
.close-mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
.close-mesh-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%),
    linear-gradient(180deg, transparent 62%, rgba(12, 138, 95, 0.04) 100%);
}
[data-theme="dark"] .close-mesh-veil {
  background:
    linear-gradient(180deg, rgba(4, 18, 9, 0.82) 0%, rgba(4, 18, 9, 0.22) 28%, transparent 50%),
    linear-gradient(180deg, transparent 40%, rgba(2, 12, 7, 0.35) 100%);
}
.close-zone .contacto,
.close-zone .footer {
  position: relative;
  z-index: 2;
}
.close-zone .container {
  position: relative;
  z-index: 1;
}
.close-mesh--paused .close-mesh-scene {
  animation-play-state: paused;
}

.contacto {
  background:
    radial-gradient(58% 48% at 90% 88%, rgba(12, 138, 95, 0.05) 0%, transparent 58%);
}

.cont-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.cont-form {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lum);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.field label span { color: var(--emerald); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1.05rem;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  appearance: none;
  -webkit-appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-40); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--emerald);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.field textarea { resize: vertical; min-height: 120px; }

/* Honeypot anti-spam — invisible para humanos */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 200;
  width: max-content;
  max-width: min(90vw, 420px);
  font-size: 0.88rem;
  font-weight: 550;
  border-radius: var(--r-md);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translate(-50%, 130%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
  pointer-events: none;
}
.form-status.is-ok, .form-status.is-err {
  opacity: 1;
  transform: translate(-50%, 0);
}
.form-status.is-ok {
  color: var(--emerald-2);
  background: var(--tint-ui);
  border: 1px solid var(--tint-ui-border);
}
.form-status.is-err {
  color: #A83A28;
  background: rgba(224, 82, 60, 0.09);
  border: 1px solid rgba(224, 82, 60, 0.3);
}

.form-wa-alt {
  align-self: center;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--emerald-2);
  border-bottom: 1px solid rgba(12, 138, 95, 0.35);
  padding-bottom: 0.15rem;
  transition: color 0.25s, border-color 0.25s;
}
.form-wa-alt:hover { color: var(--emerald); border-color: var(--emerald); }
.field select {
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* Tarjeta de contacto — verde profundo con orbes luminosos
   (campo gira → orbe flota → núcleo pulsa: 3 niveles anidados) */
.cont-card {
  position: relative;
  background: linear-gradient(150deg, #0C8A5F 0%, #0A6B4F 62%, #0B5B66 130%);
  border-radius: var(--r-xl);
  padding: clamp(1.7rem, 3.4vw, 2.5rem);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--on-inverse);
}
.orb-field {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  animation: fieldSpin 80s linear infinite;
  will-change: transform;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.5;
  animation: orbFloat 12s ease-in-out infinite alternate;
  will-change: transform;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: inherit;
  animation: orbCore 3.4s ease-in-out infinite;
}
.orb-a { width: 260px; height: 260px; top: 6%;  left: 58%; background: rgba(53, 201, 172, 0.55); }
.orb-b { width: 200px; height: 200px; top: 58%; left: 10%; background: rgba(255, 255, 255, 0.18); animation-delay: -4s; }
.orb-c { width: 150px; height: 150px; top: 32%; left: 32%; background: rgba(255, 194, 75, 0.28);  animation-delay: -8s; }
@keyframes fieldSpin { to { transform: rotate(360deg); } }
@keyframes orbFloat {
  from { transform: translateY(-16px); }
  to   { transform: translateY(16px); }
}
@keyframes orbCore {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.3);  opacity: 1; }
}

.cont-card-title {
  position: relative;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 760;
  margin-bottom: 1.1rem;
}
.info-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.3s var(--ease-out);
}
a.info-link:hover { transform: translateX(4px); }
.info-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, 0.13);
  color: var(--on-inverse);
  flex-shrink: 0;
}
.info-wa .info-ico { background: rgba(255, 255, 255, 0.22); }
.info-txt strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--on-inverse);
}
.info-txt em {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}
.info-static { border-bottom: 0; }
.badge-compliance {
  position: relative;
  align-self: flex-start;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-inverse);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
}

@media (min-width: 1024px) {
  .cont-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .cont-card { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* =============================================================
   15. FOOTER
   ============================================================= */
.footer {
  position: relative;
  background: linear-gradient(180deg, #1a5242 0%, #0f3529 14%, #07271D 28%);
  color: rgba(255, 255, 255, 0.78);
  overflow: clip;
  margin-top: 0;
}

.foot-marquee {
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.2rem;
}
.foot-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 9vw, 6.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(53, 201, 172, 0.34);
  animation: marqueeX 42s linear infinite;
}

.foot-topo {
  position: absolute;
  right: -40px; bottom: -20px;
  width: 420px;
  color: var(--aqua);
  opacity: 0.14;
  pointer-events: none;
}

.foot-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 3.5rem 3rem;
}
.foot-logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--on-inverse);
  display: inline-block;
  margin-bottom: 0.7rem;
  transition: color 0.25s;
}
.foot-logo:hover { color: var(--aqua); }
.foot-tagline {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 26ch;
  margin-bottom: 1.1rem;
}
.foot-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--aqua);
  transition: color 0.25s;
}
.foot-wa:hover { color: var(--on-inverse); }

.foot-col h4 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 1rem;
}
.foot-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.foot-col a, .foot-col span {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.25s;
}
.foot-col a:hover { color: var(--aqua); }

.foot-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.4rem;
}
.foot-bottom p {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 720px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* =============================================================
   16. WHATSAPP FLOTANTE
   ============================================================= */
.float-wa {
  position: fixed;
  bottom: 1.4rem; right: 1.4rem;
  z-index: 800;
  width: 54px; height: 54px;
  border-radius: 50%;
  background-color: #25D366;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, 0.6);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out);
}
.float-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: waPing 2.8s ease-out infinite;
  z-index: 2;
  pointer-events: none;
}
.float-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--btn-hover-bg);
  clip-path: ellipse(0% 0% at var(--btn-wave-origin));
  transition: clip-path var(--btn-paint-exit) var(--btn-paint-ease);
  z-index: 1;
  pointer-events: none;
  will-change: clip-path;
}
@keyframes waPing {
  0%   { transform: scale(1);    opacity: 1; }
  75%, 100% { transform: scale(1.55); opacity: 0; }
}
.float-wa svg {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  display: block;
  width: 100%;
  height: 100%;
}

/* =============================================================
   17. MOVIMIENTO REDUCIDO
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .seal-track,
  .foot-marquee-track,
  .sr-spin,
  .hd-spin,
  .hv-card .hv-float,
  .hv-chip .hv-float,
  .hvc-rows span,
  .orb-field,
  .orb,
  .orb::after,
  .scrollcue-dot,
  .grad-text,
  .brand-logo,
  .tienda-glow,
  .tienda-scan,
  .tienda-terminal,
  .float-wa::before,
  .kp-dot,
  .step-ico,
  #frameCounter::after,
  .servicios-ambient,
  .servicios-ambient *,
  .serv-card-ambient,
  .serv-card-ambient *,
  .bio-blob,
  .bio-pollen,
  .bio-leaf,
  .aurora-mesh,
  .hero-aurora-blob,
  .close-mesh-scene,
  .hud-scan,
  .hydro-ripple,
  .hydro-flow,
  .nc-bio-blob,
  .nc-pollen,
  .ambient-bulb,
  .ambient-bulb-glow,
  .ambient-bulb-icon,
  .lab-spark,
  .risk-house-fire,
  .risk-fire-flame,
  .risk-fire-layer,
  .risk-smoke,
  .forest-tree,
  .forest-crown,
  .bio-leaf--fall,
  .serv-card[data-serv-theme="sst"] .sc-icon {
    animation: none !important;
  }

  .hero-aurora-blob {
    will-change: auto;
    opacity: 0.55;
  }

  .close-mesh-scene {
    will-change: auto;
    transform: none !important;
  }

  .tienda-scan { display: none !important; }
  .tienda-terminal { display: none !important; }
  .prod--sanichek.is-scan-hit { box-shadow: 0 0 0 4px rgba(255, 194, 75, 0.25), var(--shadow-lum) !important; }

  .btn::before,
  .nc-cta::before,
  .theme-toggle::before,
  .float-wa::after {
    transition: none !important;
  }

  html.js [data-reveal],
  html.js .hero-title,
  html.js .serv-card.service-card,
  html.js .nc-grid .nc-card,
  html.js .nc-grid .nc-card .nc-num,
  html.js .nc-grid .nc-card .nc-list li,
  html.js .hero-kicker,
  html.js .hero-sub,
  html.js .hero-actions,
  html.js .hero-proof,
  html.js .hero-visual,
  html.js .scrollcue,
  html.js .hero-depth-layer {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }

  .grad-text {
    -webkit-text-fill-color: currentColor;
    color: var(--emerald);
    background: none;
  }

  .sector:hover, .prod:hover, .stat:hover { transform: none; }

  .hero-particles { display: none !important; }

  html.js .nc-grid .nc-card::before {
    animation: none !important;
    height: 100% !important;
  }

  /* NC: solo fade simple, sin 3D ni tilt */
  html.js .nc-grid .nc-card {
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 0.5s ease-out !important;
    transition-delay: calc(var(--nc-i, 0) * 80ms) !important;
  }
  html.js .nc-grid.is-grown .nc-card {
    opacity: 1 !important;
  }
}

/* =============================================================
   18. ANIMACIONES — SAFEGUARDS DEEP FOREST DARK
   Solo transform/opacity/clip-path; contraste preservado.
   ============================================================= */

/* Capas hero: aurora → cáusticas/venas → velo → copy */
.hero-aurora    { z-index: 0; }
.hero-canvas,
.hero-particles { z-index: 1; }
.hero-veil      { z-index: 2; }
.hero-grid      { z-index: 3; }

html.js .hero.is-depth-active .hero-depth-layer[data-hero-layer="back"]  { z-index: 0; }
html.js .hero.is-depth-active .hero-depth-layer[data-hero-layer="mid"]   { z-index: 1; }
html.js .hero.is-depth-active .hero-depth-layer[data-hero-layer="front"] { z-index: 2; position: relative; }

/* Curtain reveal: el h1 mantiene color pleno; clip-path no atenúa texto */
html.js .hero-title {
  color: var(--ink);
}
html.js .hero-title.in .grad-text {
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Grow-in: tipografía interna siempre legible una vez visible */
html.js .serv-card.service-card.is-grown .sc-title,
html.js .serv-card.service-card.is-grown .sc-desc,
html.js .serv-card.service-card.is-grown .sc-list li {
  opacity: 1;
  color: inherit;
}

/* Contadores: solo el número anima; etiquetas estáticas */
.stat-label {
  opacity: 1;
}

/* Partículas sutiles — opacidad por tema */
@media (min-width: 768px) {
  .hero-particles { opacity: var(--particle-opacity-desk); }
}

/* Logo respirando: solo escala, sin fade que reduzca contraste */
.brand-logo {
  opacity: 1;
}

.brand-logo{height:48px;width:auto}.hero-logo{max-width:240px;width:100%;margin:0 auto 2rem}.footer-logo{height:60px;width:auto}
p:not(.prod-desc):not(.prod-format):not(.sc-desc):not(.stat-label):not(.sector-sub):not(.serv-hint):not(.nc-desc){text-align:justify;text-justify:inter-word;hyphens:auto}

.nc-grid{
  display:flex;flex-wrap:wrap;gap:32px;
  overflow:visible;
  padding-block:36px;
  perspective:1000px;
  position:relative;
  z-index:2;
}

/* ── Light mode: NC minimal (Swiss) ── */
[data-theme="light"] .nc-section--dimensional{
  --nc-bg:#EFF9F5;
  --nc-bg-2:#FFFFFF;
  --nc-bg-card:#FFFFFF;
  --nc-cream:#0A2E23;
  --nc-cream-2:rgba(10,46,35,.74);
  --nc-muted:rgba(10,46,35,.58);
  --nc-accent:#0C8A5F;
  --nc-accent-dim:rgba(12,138,95,.09);
  --nc-line:rgba(10,46,35,.12);
  --nc-elev-1:0 1px 3px rgba(10,46,35,.06);
  --nc-elev-2:var(--shadow-lum);
  --nc-elev-3:0 12px 32px rgba(12,138,95,.1);
  --nc-elev-4:var(--shadow-deep);
  color:var(--nc-cream);
  background:
    radial-gradient(85% 55% at 12% -8%, rgba(12,138,95,.06) 0%, transparent 58%),
    linear-gradient(180deg,var(--nc-bg) 0%,var(--nc-bg-2) 100%);
}
[data-theme="light"] .nc-section--dimensional .nc-depth-plane--back{
  background:rgba(12,138,95,.06);
}
[data-theme="light"] .nc-section--dimensional .nc-depth-plane--mid{
  background:rgba(53,201,172,.08);
}
[data-theme="light"] .nc-section--dimensional .nc-card{
  background:linear-gradient(155deg,#FFFFFF 0%,#F0FAF6 100%);
}
[data-theme="light"] .nc-section--dimensional .nc-card::after{
  background:rgba(12,138,95,.1);
  opacity:.3;
  filter:blur(10px);
}
[data-theme="light"] .nc-section--dimensional .nc-grid.is-grown .nc-card:nth-child(even){
  margin-top:0;
}
[data-theme="light"] .nc-num{
  background:rgba(12,138,95,.09);
  border-color:rgba(12,138,95,.2);
  color:var(--nc-accent);
}
[data-theme="light"] .nc-cta{
  color:#FFFFFF;
  background:var(--nc-accent);
  box-shadow:0 4px 18px rgba(12,138,95,.22);
}

/* ── Negocios Comerciales · Dimensional Layering + deep forest dark ── */
.nc-section--dimensional{
  --nc-bg:#060d07;
  --nc-bg-2:#0d1a0e;
  --nc-bg-card:#1a2b1c;
  --nc-cream:#e8f5e9;
  --nc-cream-2:#c8e6c9;
  --nc-muted:rgba(200,230,201,.58);
  --nc-accent:#00e676;
  --nc-accent-dim:rgba(0,230,118,.16);
  --nc-line:rgba(0,230,118,.14);
  --nc-elev-1:0 1px 3px rgba(0,0,0,.45);
  --nc-elev-2:0 4px 14px rgba(0,0,0,.42),0 0 0 1px rgba(0,230,118,.08);
  --nc-elev-3:0 12px 32px rgba(0,0,0,.48),0 0 28px rgba(0,230,118,.1);
  --nc-elev-4:0 22px 52px rgba(0,0,0,.55),0 0 44px rgba(0,230,118,.16);
  position:relative;
  overflow:visible;
  color:var(--nc-cream);
  background:
    radial-gradient(85% 55% at 12% -8%, rgba(0,230,118,.09) 0%, transparent 58%),
    radial-gradient(70% 50% at 92% 108%, rgba(27,94,32,.28) 0%, transparent 52%),
    linear-gradient(180deg, var(--nc-bg) 0%, var(--nc-bg-2) 100%);
  isolation:isolate;
}
.nc-section--dimensional .container{
  position:relative;
  z-index:2;
}
.nc-depth-ambient{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.nc-depth-plane{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  opacity:.55;
}
.nc-depth-plane--back{
  width:min(72vw,680px);
  height:min(42vw,360px);
  top:-8%;
  right:-6%;
  background:rgba(0,230,118,.07);
}
.nc-depth-plane--mid{
  width:min(58vw,520px);
  height:min(36vw,300px);
  bottom:-6%;
  left:-4%;
  background:rgba(27,94,32,.22);
}
.nc-section--dimensional .kicker-pill{
  color:var(--nc-accent);
  background:var(--nc-accent-dim);
  border-color:var(--nc-line);
}
.nc-section--dimensional .kp-dot{
  background:var(--nc-accent);
  animation:ncDotPulse 2.6s ease-in-out infinite;
}
@keyframes ncDotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.42)}
  55%{box-shadow:0 0 0 7px rgba(0,230,118,0)}
}
.nc-section--dimensional .h2{
  color:var(--nc-cream);
}
.nc-section--dimensional .h2 em{
  color:var(--nc-accent);
}

.nc-section,
.nc-section .container{
  overflow:visible;
}
.nc-card{
  --nc-rx:0deg;
  --nc-ry:0deg;
  display:flex;gap:24px;
  flex:0 0 calc(50% - 16px);
  width:calc(50% - 16px);
  max-width:calc(50% - 16px);
  position:relative;
  z-index:1;
  background:linear-gradient(155deg, var(--surface) 0%, var(--surface-subtle) 100%);
  border:1px solid var(--nc-line,var(--line));
  border-radius:16px;
  padding:32px;
  overflow:visible;
  transform-style:preserve-3d;
  transform-origin:center center;
  box-shadow:var(--nc-elev-2,0 4px 14px rgba(0,0,0,.42));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  will-change:transform,opacity;
}
.nc-section--dimensional .nc-card::after{
  content:"";
  position:absolute;
  inset:10px -6px -14px -6px;
  border-radius:inherit;
  background:rgba(0,0,0,.42);
  filter:blur(14px);
  transform:translateY(10px) scale(.97);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.nc-num{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  border-radius:14px;
  background:var(--tint-ui);
  border:1px solid var(--tint-ui-border);
  font-size:1.4rem;font-weight:700;
  color:var(--nc-accent,#00e676);
  box-shadow:var(--nc-elev-1,0 1px 3px rgba(0,0,0,.45));
  will-change:transform,opacity;
}
.nc-body{flex:1;min-width:0}
.nc-title{font-size:1.05rem;font-weight:600;color:var(--nc-cream,#e8f5e9);margin:0 0 8px}
.nc-desc{font-size:.9rem;color:var(--nc-muted,rgba(200,230,201,.58));margin:0 0 14px}
.nc-list{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.nc-list li{padding:0;color:var(--nc-cream-2,#c8e6c9);font-size:.9rem;border-top:none;will-change:transform,opacity}
.nc-list li::before{content:"✓";color:var(--nc-accent,#00e676);font-weight:600;margin-right:6px}
.nc-cta{
  display:inline-flex;align-items:center;gap:4px;
  position:relative;overflow:hidden;isolation:isolate;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--nc-bg,#060d07);
  background:var(--nc-accent,#00e676);
  font-weight:600;font-size:.9rem;
  text-decoration:none;
  padding:10px 20px;border-radius:20px;
  box-shadow:0 4px 18px rgba(0,230,118,.28);
  cursor:pointer;
  transition:border-color .2s ease;
}
.nc-cta .btn-text { gap: 4px; }
.nc-section--dimensional .nc-grid.is-grown .nc-card:nth-child(odd){
  z-index:3;
}
.nc-section--dimensional .nc-grid.is-grown .nc-card:nth-child(even){
  margin-top:1.15rem;
  z-index:2;
}
[data-theme="dark"] .nc-section--dimensional .nc-card::after{
  opacity:.68;
  filter:blur(18px);
}
[data-theme="dark"] .nc-section--dimensional .nc-depth-plane{
  opacity:.72;
}

/* ── Dark mode: refuerzos de jerarquía y bordes ── */
[data-theme="dark"] .servicios {
  background:
    radial-gradient(70% 55% at 88% 8%, rgba(0, 230, 118, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, var(--wash-a) 0%, var(--wash-b) 100%);
}
[data-theme="dark"] .tienda {
  background:
    radial-gradient(50% 40% at 85% 10%, rgba(0, 230, 118, 0.1) 0%, transparent 60%),
    radial-gradient(45% 38% at 6% 92%, rgba(255, 194, 75, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--tienda-bg-start) 0%, var(--tienda-bg-end) 100%);
}
[data-theme="dark"] .close-zone {
  background: linear-gradient(180deg, var(--wash-a) 0%, #061a10 58%, #041209 100%);
}
[data-theme="dark"] .contacto {
  background:
    radial-gradient(60% 50% at 90% 90%, rgba(0, 230, 118, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(4, 18, 9, 0.18) 100%);
}
[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #0a2e22 0%, #061a10 16%, #041209 30%);
}
[data-theme="dark"] .foot-marquee-track {
  -webkit-text-stroke: 1.2px rgba(0, 230, 118, 0.28);
}
[data-theme="dark"] .prod-flag {
  color: var(--on-accent);
}
[data-theme="dark"] .form-status.is-ok {
  background: var(--tint-ui);
  border-color: var(--tint-ui-border);
}

/* ── 1. Entrada escalonada 3D (grow-in) ── */
html.js .nc-grid .nc-card{
  opacity:0;
  transform:rotateX(var(--nc-grow-rotate-x)) translateY(var(--nc-grow-translate-y)) scale(var(--nc-grow-scale-from));
  transition:
    transform .9s cubic-bezier(.34,1.56,.64,1),
    opacity .9s ease-out,
    box-shadow .35s ease;
  transition-delay:calc(var(--nc-i,0) * 120ms);
}
html.js .nc-grid.is-grown .nc-card{
  opacity:1;
  transform:rotateX(0) translateY(0) scale(1);
}

/* ── 2. Ícono / número — rotación de entrada ── */
html.js .nc-grid .nc-card .nc-num{
  opacity:0;
  transform:rotate(-15deg) scale(.5);
  transition:
    opacity .55s cubic-bezier(.34,1.56,.64,1),
    transform .55s cubic-bezier(.34,1.56,.64,1);
}
html.js .nc-grid.is-grown .nc-card .nc-num{
  opacity:1;
  transform:rotate(0) scale(1);
  transition-delay:calc(var(--nc-i,0) * 120ms + 150ms);
}

/* ── 3. Borde izquierdo progresivo (capa de acento) ── */
html.js .nc-grid .nc-card::before{
  content:"";
  position:absolute;left:0;top:0;
  width:4px;height:0%;
  background:var(--nc-accent,#00e676);
  border-radius:16px 0 0 16px;
  pointer-events:none;
  z-index:1;
}
html.js .nc-grid.is-grown .nc-card::before{
  animation:ncBorderGrow .55s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(var(--nc-i,0) * 120ms + 120ms);
}
@keyframes ncBorderGrow{
  from{height:0%}
  to{height:100%}
}

/* ── 4. Checkmarks en cascada ── */
html.js .nc-grid .nc-card .nc-list li{
  --li-i:0;
  opacity:0;
  transform:translateX(-10px);
  transition:
    opacity .4s cubic-bezier(.34,1.56,.64,1),
    transform .4s cubic-bezier(.34,1.56,.64,1);
}
html.js .nc-grid .nc-card .nc-list li:nth-child(1){--li-i:0}
html.js .nc-grid .nc-card .nc-list li:nth-child(2){--li-i:1}
html.js .nc-grid .nc-card .nc-list li:nth-child(3){--li-i:2}
html.js .nc-grid .nc-card .nc-list li:nth-child(4){--li-i:3}
html.js .nc-grid.is-grown .nc-card .nc-list li{
  opacity:1;
  transform:translateX(0);
  transition-delay:calc(var(--nc-i,0) * 120ms + 280ms + var(--li-i) * 50ms);
}

/* ── 5. Hover 3D tilt — solo desktop, elevación dimensional ── */
@media (hover:hover) and (pointer:fine){
  html.js .nc-grid.is-grown .nc-card{
    transform:rotateX(var(--nc-rx)) rotateY(var(--nc-ry)) translateY(0) scale(1);
  }
  html.js .nc-grid.is-grown .nc-card.nc-tilting{
    transition:transform .2s ease-out,box-shadow .2s ease-out;
  }
  html.js .nc-section--dimensional .nc-grid.is-grown .nc-card:hover{
    box-shadow:var(--nc-elev-4);
    z-index:5;
  }
  html.js .nc-section--dimensional .nc-grid.is-grown .nc-card:hover::after{
    opacity:.72;
    transform:translateY(14px) scale(.96);
  }
}

@media (max-width:720px){
  .nc-card{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
  }
  .nc-section--dimensional .nc-grid.is-grown .nc-card:nth-child(even){
    margin-top:0;
  }
}

/* =============================================================
   19. AMBIENTES BIÓFILICOS — Organic / Nature / Aurora / HUD
   Fondos decorativos por temática · claro + oscuro · GPU-safe
   ============================================================= */

/* ── Keyframes compartidos ── */
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 62% 38% / 38% 42% 58% 62%; transform: translate3d(0, 0, 0) scale(1); }
  33%      { border-radius: 58% 42% 38% 62% / 52% 38% 62% 48%; transform: translate3d(2%, -1.5%, 0) scale(1.04); }
  66%      { border-radius: 38% 62% 54% 46% / 48% 56% 44% 52%; transform: translate3d(-1.5%, 2%, 0) scale(0.97); }
}
@keyframes pollenDrift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.35; }
  50%  { transform: translate3d(12px, -28px, 0); opacity: 0.75; }
  100% { transform: translate3d(-6px, -52px, 0); opacity: 0.2; }
}
@keyframes leafFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.45; }
  50%      { transform: translate3d(10px, -22px, 0) rotate(12deg); opacity: 0.8; }
}
@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; opacity: 0.55; }
  50%      { background-position: 100% 50%; opacity: 0.85; }
}
@keyframes auroraFlow1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(5%, -8%) scale(1.15); }
  66%      { transform: translate(-8%, 5%) scale(0.9); }
}
@keyframes auroraFlow2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-7%, 6%) scale(1.12); }
  70%      { transform: translate(6%, -5%) scale(0.88); }
}
@keyframes auroraFlow3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(4%, 7%) scale(1.1); }
  75%      { transform: translate(-6%, -5%) scale(0.94); }
}
@keyframes auroraFlow4 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50%      { transform: translate(-5%, -7%) scale(0.92); }
}
@keyframes auroraBreathe1 {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.78; }
}
@keyframes auroraBreathe2 {
  0%, 100% { opacity: 0.48; }
  50%      { opacity: 0.8; }
}
@keyframes auroraBreathe3 {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.72; }
}
@keyframes auroraBreathe4 {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.76; }
}
@keyframes hudScan {
  0%   { transform: translate3d(0, -110%, 0); opacity: 0; }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.7; }
  100% { transform: translate3d(0, 110%, 0); opacity: 0; }
}
@keyframes tiendaScanMain {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.88; }
  50%      { transform: translate3d(0, var(--scan-travel, 700px), 0); opacity: 1; }
}
@keyframes tiendaScanSub1 {
  0%, 100% { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.06), 0); opacity: 0.18; }
  50%      { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.9), 0); opacity: 0.32; }
}
@keyframes tiendaScanSub2 {
  0%, 100% { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.94), 0); opacity: 0.22; }
  50%      { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.1), 0); opacity: 0.3; }
}
@keyframes tiendaScanSub3 {
  0%, 100% { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.15), 0); opacity: 0.2; }
  50%      { transform: translate3d(0, calc(var(--scan-travel, 700px) * 0.72), 0); opacity: 0.28; }
}
.tienda-hud--paused .tienda-scan,
.tienda-hud--paused .tienda-terminal { animation-play-state: paused; }
@keyframes hydroRipple {
  0%   { transform: scale(0.55); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes hydroFlowDash {
  to { stroke-dashoffset: -120; }
}
@keyframes iconMonitorPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes bulbGlowPulse {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  50%      { opacity: 0.92; transform: scale(1.06); }
}
@keyframes bulbGlowPulseMid {
  0%, 100% { opacity: 0.28; transform: scale(0.96) translate(-4%, 2%); }
  50%      { opacity: 0.72; transform: scale(1.08) translate(3%, -2%); }
}
@keyframes bulbGlowPulseSoft {
  0%, 100% { opacity: 0.18; transform: scale(1.04) translate(5%, -3%); }
  50%      { opacity: 0.48; transform: scale(1.14) translate(-2%, 4%); }
}
@keyframes bulbFilamentPulse {
  0%, 100% { opacity: 0.62; filter: brightness(0.92); }
  50%      { opacity: 0.95; filter: brightness(1.08); }
}
@keyframes labSparkBurst {
  0%   { transform: translate(-50%, -50%) rotate(var(--spark-angle)) translate3d(0, 0, 0) scale(1); opacity: 0; }
  6%   { opacity: 0.72; }
  28%  { transform: translate(-50%, -50%) rotate(var(--spark-angle)) translate3d(22px, 0, 0) scale(0.95); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) rotate(var(--spark-angle)) translate3d(54px, 0, 0) scale(0.15); opacity: 0; }
}
@keyframes riskFlameFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1) skewX(-2deg); }
  22%      { transform: scaleY(1.12) scaleX(0.96) skewX(1deg); }
  48%      { transform: scaleY(0.94) scaleX(1.04) skewX(-1deg); }
  74%      { transform: scaleY(1.06) scaleX(0.98) skewX(2deg); }
}
@keyframes riskFireWarm {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 0.58; }
}
@keyframes riskFireHot {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.88; }
}
@keyframes riskSmokeRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.32; }
  100% { transform: translateY(-48px) scale(1.35); opacity: 0; }
}
@keyframes treeSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.6deg); }
}
@keyframes branchSwayLower {
  0%, 100% { transform: rotate(-2.8deg); }
  50%      { transform: rotate(3.2deg); }
}
@keyframes branchSwayUpper {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(5deg); }
}
@keyframes leafFall {
  0%   { transform: translate3d(0, -8%, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.65; }
  100% { transform: translate3d(var(--leaf-drift, 16px), 115%, 0) rotate(var(--leaf-spin, 36deg)); opacity: 0; }
}

/* ── Capa sección Servicios (Nature Distilled) ── */
.servicios-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.serv-head,
.serv-viewport,
.serv-hint {
  position: relative;
  z-index: 1;
}

/* ── Capa por tarjeta de servicio ── */
.serv-card-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Blobs orgánicos (Biomimetic / Organic 2.0) */
.bio-blob {
  position: absolute;
  display: block;
  filter: blur(42px);
  animation: blobMorph 14s ease-in-out infinite;
  will-change: transform, border-radius;
}
.bio-blob--a {
  width: min(42vw, 340px);
  height: min(32vw, 260px);
  top: -8%;
  right: 6%;
  background: rgba(12, 138, 95, 0.14);
  animation-duration: 13s;
}
.bio-blob--b {
  width: min(36vw, 280px);
  height: min(28vw, 220px);
  bottom: -6%;
  left: 4%;
  background: rgba(53, 201, 172, 0.12);
  animation-duration: 16s;
  animation-delay: -4s;
}
[data-theme="dark"] .bio-blob--a { background: rgba(0, 230, 118, 0.12); }
[data-theme="dark"] .bio-blob--b { background: rgba(105, 240, 174, 0.1); }

.bio-blob--card {
  filter: blur(36px);
  opacity: 0.85;
}
.bio-blob--card.bio-blob--a {
  width: 220px;
  height: 180px;
  top: 8%;
  right: 12%;
}
.bio-blob--card.bio-blob--b {
  width: 180px;
  height: 150px;
  bottom: 10%;
  left: 8%;
}
.bio-blob--forest-a {
  width: 200px;
  height: 170px;
  top: 6%;
  right: 10%;
  background: rgba(15, 118, 110, 0.14);
  animation-duration: 15s;
}
.bio-blob--forest-b {
  width: 160px;
  height: 140px;
  bottom: 12%;
  left: 6%;
  background: rgba(12, 138, 95, 0.1);
  animation-duration: 12s;
  animation-delay: -3s;
}
[data-theme="dark"] .bio-blob--forest-a { background: rgba(77, 208, 225, 0.1); }
[data-theme="dark"] .bio-blob--forest-b { background: rgba(0, 230, 118, 0.09); }

/* Polen / partículas orgánicas */
.bio-pollen {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(12, 138, 95, 0.45);
  animation: pollenDrift 12s ease-in-out infinite;
  will-change: transform, opacity;
}
[data-theme="dark"] .bio-pollen { background: rgba(0, 230, 118, 0.5); }
.bio-pollen--1 { top: 18%; left: 14%; animation-duration: 11s; }
.bio-pollen--2 { top: 42%; left: 72%; width: 4px; height: 4px; animation-duration: 14s; animation-delay: -2s; }
.bio-pollen--3 { top: 68%; left: 28%; animation-duration: 13s; animation-delay: -5s; }
.bio-pollen--4 { top: 32%; left: 48%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: -7s; }
.servicios-ambient .bio-pollen--1 { top: 22%; left: 8%; }
.servicios-ambient .bio-pollen--2 { top: 55%; left: 82%; }
.servicios-ambient .bio-pollen--3 { top: 78%; left: 22%; }

/* Hojas flotantes (Forestal) */
.bio-leaf {
  position: absolute;
  width: 14px;
  height: 22px;
  border-radius: 0 80% 0 80%;
  background: rgba(15, 118, 110, 0.35);
  transform-origin: center bottom;
  animation: leafFloat 13s ease-in-out infinite;
  will-change: transform, opacity;
}
[data-theme="dark"] .bio-leaf { background: rgba(105, 240, 174, 0.38); }
.bio-leaf--1 { top: 20%; left: 18%; animation-duration: 12s; }
.bio-leaf--2 { top: 38%; left: 76%; transform: rotate(-28deg); animation-duration: 14s; animation-delay: -3s; }
.bio-leaf--3 { top: 62%; left: 34%; transform: rotate(18deg); animation-duration: 11s; animation-delay: -6s; }
.bio-leaf--4 { top: 48%; left: 56%; width: 11px; height: 18px; animation-duration: 15s; animation-delay: -9s; }

/* ── 01 Gestión Ambiental — luz realista multicapa ── */
.ambient-bulb {
  position: absolute;
  top: 14%;
  right: 10%;
  width: 72px;
  height: 108px;
  color: rgba(180, 128, 48, 0.48);
}
[data-theme="dark"] .ambient-bulb { color: rgba(175, 210, 130, 0.52); }
.ambient-bulb-icon {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  animation: bulbFilamentPulse 4.2s ease-in-out infinite;
  will-change: opacity, filter;
}
.ambient-bulb-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.ambient-bulb-glow--core {
  inset: -18%;
  z-index: 1;
  background:
    radial-gradient(ellipse 42% 38% at 48% 46%, rgba(255, 252, 235, 0.72) 0%, rgba(255, 220, 140, 0.38) 28%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 52% 54%, rgba(255, 194, 75, 0.28) 0%, transparent 70%);
  animation: bulbGlowPulse 4.2s ease-in-out infinite;
}
.ambient-bulb-glow--mid {
  inset: -42%;
  z-index: 0;
  background:
    radial-gradient(ellipse 48% 44% at 44% 48%, rgba(255, 210, 120, 0.22) 0%, rgba(255, 180, 80, 0.1) 40%, transparent 72%);
  animation: bulbGlowPulseMid 5.1s ease-in-out infinite;
  animation-delay: -1.2s;
}
.ambient-bulb-glow--soft {
  inset: -68%;
  z-index: 0;
  background:
    radial-gradient(ellipse 52% 46% at 56% 52%, rgba(255, 194, 75, 0.12) 0%, rgba(255, 160, 60, 0.05) 45%, transparent 78%);
  animation: bulbGlowPulseSoft 6.4s ease-in-out infinite;
  animation-delay: -2.4s;
}
[data-theme="dark"] .ambient-bulb-glow--core {
  background:
    radial-gradient(ellipse 42% 38% at 48% 46%, rgba(240, 255, 210, 0.55) 0%, rgba(160, 230, 100, 0.28) 30%, transparent 64%),
    radial-gradient(ellipse 55% 50% at 52% 54%, rgba(0, 200, 100, 0.18) 0%, transparent 72%);
}
[data-theme="dark"] .ambient-bulb-glow--mid {
  background: radial-gradient(ellipse 48% 44% at 44% 48%, rgba(120, 220, 90, 0.16) 0%, transparent 74%);
}
[data-theme="dark"] .ambient-bulb-glow--soft {
  background: radial-gradient(ellipse 52% 46% at 56% 52%, rgba(0, 180, 90, 0.08) 0%, transparent 80%);
}
@keyframes bulbGlowPulseDark {
  0%, 100% { opacity: 0.38; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}
[data-theme="dark"] .ambient-bulb-glow--core {
  animation-name: bulbGlowPulseDark;
}

/* Hidrología — ondas concéntricas + flujo */
.serv-ambient-svg--hydro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.hydro-ripple {
  stroke: rgba(14, 134, 200, 0.28);
  stroke-width: 1.2;
  transform-origin: 310px 210px;
  animation: hydroRipple 9s ease-out infinite;
}
.hydro-ripple--2 { animation-delay: 3s; }
.hydro-ripple--3 { animation-delay: 6s; }
[data-theme="dark"] .hydro-ripple { stroke: rgba(77, 208, 225, 0.32); }
.hydro-flow {
  stroke: rgba(12, 138, 95, 0.22);
  stroke-width: 1.4;
  stroke-dasharray: 10 14;
  stroke-linecap: round;
  animation: hydroFlowDash 14s linear infinite;
}
.hydro-flow--2 {
  stroke: rgba(14, 134, 200, 0.18);
  animation-duration: 18s;
  animation-direction: reverse;
}
[data-theme="dark"] .hydro-flow { stroke: rgba(0, 230, 118, 0.26); }
[data-theme="dark"] .hydro-flow--2 { stroke: rgba(77, 208, 225, 0.22); }

/* SST — escaneo HUD + pulso en ícono */
.serv-card-ambient--sst .hud-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(223, 138, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 138, 0, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="dark"] .serv-card-ambient--sst .hud-grid {
  background-image:
    linear-gradient(rgba(255, 194, 75, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 194, 75, 0.08) 1px, transparent 1px);
}
.hud-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(223, 138, 0, 0.45), transparent);
  box-shadow: 0 0 18px rgba(223, 138, 0, 0.25);
  animation: hudScan 10s ease-in-out infinite;
  will-change: transform, opacity;
}
[data-theme="dark"] .hud-scan {
  background: linear-gradient(90deg, transparent, rgba(255, 194, 75, 0.5), transparent);
  box-shadow: 0 0 20px rgba(255, 194, 75, 0.2);
}
.serv-card[data-serv-theme="sst"] .sc-icon {
  animation: iconMonitorPulse 8s ease-in-out infinite;
  will-change: transform;
}

/* SST — partículas granulares con estela */
.lab-spark-field {
  position: absolute;
  top: 58%;
  right: 18%;
  width: 1px;
  height: 1px;
  z-index: 1;
}
.lab-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(198, 128, 42, 0.62);
  box-shadow: 0 0 3px rgba(198, 128, 42, 0.35);
  animation: labSparkBurst var(--spark-dur, 4s) cubic-bezier(0.12, 0.82, 0.28, 1) infinite;
  animation-delay: var(--spark-delay, 0s);
  will-change: transform, opacity;
}
.lab-spark::before,
.lab-spark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: inherit;
  pointer-events: none;
}
.lab-spark::before {
  width: 1.5px;
  height: 1.5px;
  transform: translate(-160%, -50%);
  opacity: 0.45;
  filter: blur(0.6px);
}
.lab-spark::after {
  width: 1px;
  height: 1px;
  transform: translate(-280%, -50%);
  opacity: 0.22;
  filter: blur(1.2px);
}
.lab-spark--green {
  background: rgba(12, 120, 92, 0.55);
  box-shadow: 0 0 2px rgba(12, 120, 92, 0.3);
  width: 1.5px;
  height: 1.5px;
}
[data-theme="dark"] .lab-spark {
  background: rgba(210, 165, 72, 0.58);
  box-shadow: 0 0 3px rgba(210, 165, 72, 0.28);
}
[data-theme="dark"] .lab-spark--green {
  background: rgba(72, 190, 130, 0.52);
  box-shadow: 0 0 2px rgba(72, 190, 130, 0.25);
}

/* Gestión del Riesgo — casa incendiándose (ilustración SVG) */
.risk-house-fire {
  position: absolute;
  top: 14%;
  right: 6%;
  width: min(210px, 30vw);
  height: auto;
  opacity: 0.72;
  pointer-events: none;
  will-change: opacity;
}
[data-theme="dark"] .risk-house-fire { opacity: 0.78; }

.risk-house-stroke {
  fill: none;
  stroke: rgba(10, 46, 35, 0.38);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .risk-house-stroke {
  stroke: rgba(0, 230, 118, 0.32);
}

.risk-fire-flame {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: riskFlameFlicker 2.4s ease-in-out infinite;
  will-change: transform;
}
.risk-fire-flame--1 { animation-delay: 0s; animation-duration: 2.2s; }
.risk-fire-flame--2 { animation-delay: 0.45s; animation-duration: 2.6s; }
.risk-fire-flame--3 { animation-delay: 0.9s; animation-duration: 2.3s; }
.risk-fire-flame--4 { animation-delay: 1.35s; animation-duration: 2.5s; }

.risk-fire-layer--warm {
  fill: url(#riskFlameWarm);
  opacity: 0.88;
  animation: riskFireWarm 2.4s ease-in-out infinite;
  will-change: opacity;
}
.risk-fire-layer--hot {
  fill: url(#riskFlameHot);
  opacity: 0.62;
  animation: riskFireHot 2.4s ease-in-out infinite;
  will-change: opacity;
}
.risk-fire-flame--1 .risk-fire-layer--warm,
.risk-fire-flame--1 .risk-fire-layer--hot { animation-delay: 0s; }
.risk-fire-flame--2 .risk-fire-layer--warm,
.risk-fire-flame--2 .risk-fire-layer--hot { animation-delay: 0.45s; }
.risk-fire-flame--3 .risk-fire-layer--warm,
.risk-fire-flame--3 .risk-fire-layer--hot { animation-delay: 0.9s; }
.risk-fire-flame--4 .risk-fire-layer--warm,
.risk-fire-flame--4 .risk-fire-layer--hot { animation-delay: 1.35s; }

.risk-smoke {
  fill: rgba(90, 106, 115, 0.22);
  animation: riskSmokeRise 5.5s ease-out infinite;
  will-change: transform, opacity;
}
.risk-smoke--1 { animation-delay: 0s; animation-duration: 5.2s; }
.risk-smoke--2 { animation-delay: 1.6s; animation-duration: 6s; }
.risk-smoke--3 { animation-delay: 3.2s; animation-duration: 5.8s; }
[data-theme="dark"] .risk-smoke {
  fill: rgba(150, 165, 172, 0.18);
}

/* Forestal — árboles con balanceo orgánico por capas */
.forest-tree {
  position: absolute;
  bottom: 8%;
  color: rgba(15, 108, 100, 0.24);
  transform-origin: center bottom;
  animation: treeSway 5.8s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
[data-theme="dark"] .forest-tree { color: rgba(95, 200, 165, 0.28); }
.forest-tree--1 { left: 10%; width: 64px; height: 96px; animation-duration: 5.4s; }
.forest-tree--2 { left: 42%; width: 52px; height: 78px; animation-duration: 6.6s; animation-delay: -2.1s; opacity: 0.85; }
.forest-tree--3 { right: 12%; width: 58px; height: 88px; animation-duration: 6.1s; animation-delay: -3.8s; opacity: 0.72; }
.forest-trunk {
  transform-origin: center bottom;
}
.forest-crown {
  transform-box: fill-box;
  will-change: transform;
}
.forest-crown--lower {
  transform-origin: 40px 74px;
  animation: branchSwayLower 4.8s ease-in-out infinite;
}
.forest-crown--upper {
  transform-origin: 40px 34px;
  animation: branchSwayUpper 5.6s ease-in-out infinite;
}
.forest-tree--1 .forest-crown--lower { animation-delay: 0s; }
.forest-tree--1 .forest-crown--upper { animation-delay: -1.4s; animation-duration: 4.2s; }
.forest-tree--2 .forest-crown--lower { animation-delay: -0.8s; animation-duration: 5.2s; }
.forest-tree--2 .forest-crown--upper { animation-delay: -2.2s; animation-duration: 6.1s; }
.forest-tree--3 .forest-crown--lower { animation-delay: -1.6s; animation-duration: 5.5s; }
.forest-tree--3 .forest-crown--upper { animation-delay: -3s; animation-duration: 4.6s; }
.bio-leaf--fall {
  animation-name: leafFall;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bio-leaf--fall.bio-leaf--1 { top: 8%; left: 22%; --leaf-drift: 14px; --leaf-spin: 28deg; animation-duration: 9s; }
.bio-leaf--fall.bio-leaf--2 { top: 5%; left: 58%; --leaf-drift: -18px; --leaf-spin: -32deg; animation-duration: 11s; animation-delay: -2s; }
.bio-leaf--fall.bio-leaf--3 { top: 12%; left: 78%; --leaf-drift: 10px; --leaf-spin: 42deg; animation-duration: 10s; animation-delay: -4s; }
.bio-leaf--fall.bio-leaf--4 { top: 6%; left: 36%; --leaf-drift: -12px; --leaf-spin: -24deg; animation-duration: 12s; animation-delay: -6s; width: 11px; height: 18px; }
.bio-leaf--fall.bio-leaf--5 { top: 10%; left: 68%; --leaf-drift: 20px; --leaf-spin: 36deg; animation-duration: 13s; animation-delay: -8s; width: 12px; height: 19px; }

/* Negocios Comerciales — blobs orgánicos en espacios vacíos */
.nc-bio-blob {
  filter: blur(56px);
  opacity: 0.5;
  z-index: 0;
}
.nc-bio-blob--a {
  width: min(48vw, 420px);
  height: min(34vw, 300px);
  top: 12%;
  left: -8%;
  background: rgba(12, 138, 95, 0.1);
  animation-duration: 15s;
}
.nc-bio-blob--b {
  width: min(40vw, 360px);
  height: min(30vw, 260px);
  bottom: 8%;
  right: -6%;
  background: rgba(53, 201, 172, 0.09);
  animation-duration: 18s;
  animation-delay: -6s;
}
[data-theme="dark"] .nc-bio-blob--a { background: rgba(0, 230, 118, 0.09); opacity: 0.65; }
[data-theme="dark"] .nc-bio-blob--b { background: rgba(77, 208, 225, 0.08); opacity: 0.65; }
.nc-pollen {
  z-index: 0;
  opacity: 0.6;
}
.nc-pollen--1 { top: 28%; right: 18%; animation-duration: 13s; }
.nc-pollen--2 { bottom: 22%; left: 20%; animation-duration: 16s; animation-delay: -4s; }

/* Legibilidad: superficie de tarjeta opaca sobre ambientes */
.serv-card {
  background: var(--surface);
}
.serv-card-ambient,
.servicios-ambient {
  mix-blend-mode: normal;
}