@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
   GENESYS — Starter Theme · main.css
   Design system: tokens + base + 20 reusable components.
   Concepto: "Eficiencia Fluida" — confianza corporativa B2B con frescura tech.
   Paleta: navy #021623 + azul eléctrico #1944DF + superficie #0024a6 (sin verde).
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   01 · TOKENS
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Color — brand */
  --color-primary:        #021623;            /* navy — texto fuerte, secciones dark */
  --color-secondary:      #FFFFFF;
  --color-accent:         #1944DF;            /* azul eléctrico — CTAs, hover, activo */
  --color-accent-600:     #1338b8;            /* azul presionado/hover oscuro */
  --color-bg-surface:     #0024a6;            /* superficies elevadas / secciones azules */

  /* Color — texto */
  --color-text-primary:   #535353;            /* cuerpo */
  --color-text-secondary: rgba(83,83,83,.65); /* (fix de #FFFFFF00) meta / subtítulos */
  --color-text-inverse:   #FFFFFF;            /* texto sobre fondos oscuros */
  --color-heading:        #021623;            /* títulos */

  /* Color — fondos */
  --color-bg-main:        #F5F5F5;            /* fondo principal */
  --color-bg-white:       #FFFFFF;            /* superficies limpias */
  --color-bg-soft:        #F0F2F5;            /* gris ultra-claro alterno */

  /* Color — bordes (base navy de baja opacidad, sin verde) */
  --color-border-default: rgba(2,22,35,.08);
  --color-border-strong:  rgba(2,22,35,.14);
  --color-border-dark:    rgba(255,255,255,.10);

  /* Tintes de acento (iconografía encapsulada) */
  --tint-accent-10:       rgba(25,68,223,.10);
  --tint-accent-14:       rgba(25,68,223,.14);
  --tint-white-06:        rgba(255,255,255,.06);
  --tint-white-10:        rgba(255,255,255,.10);

  /* Estados */
  --color-error:          #e11d48;
  --color-error-bg:       rgba(225,29,72,.08);
  --color-success:        #0024a6;
  --color-success-bg:     rgba(0,36,166,.08);

  /* Tipografía */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Escala de espaciado — base 4px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px;

  /* Radios */
  --radius-btn:    8px;
  --radius-card:   14px;
  --radius-pill:   999px;

  /* Sombras suaves */
  --shadow-card:  0 2px 10px rgba(2,22,35,.06);
  --shadow-hover: 0 16px 40px rgba(2,22,35,.12);
  --shadow-accent: 0 10px 26px rgba(25,68,223,.30);

  /* Capas */
  --z-nav: 1000;
  --z-float: 1500;
  --z-modal: 2000;

  /* Transiciones */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .18s var(--ease);
  --t-base: .28s var(--ease);
}

/* ──────────────────────────────────────────────────────────────────────────
   02 · RESET / BASE
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a   { color: var(--color-accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-accent-600); }

ul[class] { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   03 · TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3.25rem); }
h3 { font-size: 1.125rem; font-weight: 700; }
h4 { font-size: 1rem;     font-weight: 700; }
h5 { font-size: .9375rem; font-weight: 700; }
h6 { font-size: .8125rem; font-weight: 700; }

p { margin: 0 0 1rem; }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.section-title--inverse { color: var(--color-text-inverse); }
.section-title .accent { color: var(--color-accent); }

.section-lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-primary);
  max-width: 56ch;
}
.section-lead--inverse { color: rgba(255,255,255,.72); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: currentColor;
}
.eyebrow--inverse { color: var(--color-text-inverse); }
.eyebrow--plain::before { display: none; }

.text-muted { color: var(--color-text-secondary); }

/* ──────────────────────────────────────────────────────────────────────────
   04 · LAYOUT UTILITIES
   ────────────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }

/* Ritmo luz/sombra */
.section--dark    { background: var(--color-primary); color: var(--color-text-inverse); }
.section--surface { background: var(--color-bg-surface); color: var(--color-text-inverse); }
.section--soft    { background: var(--color-bg-soft); }
.section--white   { background: var(--color-bg-white); }

/* Blur splashes / blobs orgánicos */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
.blob--accent  { background: var(--color-accent); }
.blob--surface { background: var(--color-bg-surface); }
.blob--navy    { background: var(--color-primary); }

/* ──────────────────────────────────────────────────────────────────────────
   05 · ICON BOX (iconografía encapsulada)
   ────────────────────────────────────────────────────────────────────────── */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--tint-accent-10);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--t-base), background var(--t-base);
}
.icon-box svg, .icon-box [data-lucide] { width: 26px; height: 26px; }

/* Variante sólida — sustituye la "iconografía de relleno" con Lucide line */
.icon-box--solid {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-accent);
}
/* Sobre fondos oscuros */
.icon-box--ondark {
  background: var(--tint-white-06);
  color: var(--color-text-inverse);
}
.icon-box--sm { width: 44px; height: 44px; border-radius: 11px; }
.icon-box--sm svg, .icon-box--sm [data-lucide] { width: 20px; height: 20px; }

/* ──────────────────────────────────────────────────────────────────────────
   06 · BUTTONS
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  --btn-py: 13px;
  --btn-px: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  transition: transform var(--t-fast), background var(--t-fast),
              color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn svg, .btn [data-lucide] { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-text-inverse); box-shadow: 0 20px 40px rgba(25,68,223,.40); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--tint-accent-10); }

.btn-outline-light {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255,255,255,.35);
}
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: var(--color-text-inverse); border-color: #fff; }

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.8);
  border-color: transparent;
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); }

.btn-sm { --btn-py: 10px; --btn-px: 18px; font-size: .875rem; }
.btn-lg { --btn-py: 16px; --btn-px: 32px; font-size: 1rem; }
.btn-block { width: 100%; }

/* — Shape variants — */
.btn-sharp { border-radius: 0; }
.btn-soft  { border-radius: 24px; }
.btn-pill  { border-radius: var(--radius-pill); }

/* ──────────────────────────────────────────────────────────────────────────
   07 · BADGES & EYEBROWS
   ────────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.badge--accent { background: var(--tint-accent-10); color: var(--color-accent); }
.badge--dark   { background: var(--color-primary);  color: var(--color-text-inverse); }
.badge--light  { background: rgba(255,255,255,.14); color: var(--color-text-inverse); }

/* ──────────────────────────────────────────────────────────────────────────
   08 · CARDS (base)
   ────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-border-strong); }
.card .icon-box { margin-bottom: var(--space-5); }
.card h3 { margin-bottom: var(--space-3); }
.card p  { color: var(--color-text-primary); margin: 0; }

.card--dark {
  background: var(--tint-white-06);
  border-color: var(--color-border-dark);
  box-shadow: none;
  color: var(--color-text-inverse);
}
.card--dark h3 { color: var(--color-text-inverse); }
.card--dark p  { color: rgba(255,255,255,.66); }
.card--dark:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }

/* ── Card variante: imagen destacada en la parte superior ─────────────────── */
.card--media {
  padding: 0;
  overflow: hidden;
}
.card--media .card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card--media .card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card--media:hover .card__media img { transform: scale(1.06); }
.card--media .card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card--media .card__body .badge { align-self: flex-start; }
.card--media .card__body h3 { margin: 0; }
.card--media .card__body p { color: var(--color-text-primary); margin: 0; font-size: .9375rem; line-height: 1.7; }

/* ── Card variante: imagen de fondo + overlay-gradiente vertical ─────────── */
.card--cover {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: flex-end;
  border: none;
  box-shadow: var(--shadow-hover);
}
.card--cover .card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .55s var(--ease);
}
.card--cover:hover .card__bg { transform: scale(1.06); }
.card--cover::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(2,22,35,.94) 0%,
    rgba(2,22,35,.52) 50%,
    rgba(2,22,35,.06) 100%);
}
.card--cover .card__body {
  position: relative; z-index: 2;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: #fff;
}
.card--cover .card__body h3 { color: #fff; margin: 0; }
.card--cover .card__body p {
  color: rgba(255,255,255,.75);
  margin: 0; font-size: .9375rem; line-height: 1.6;
}

/* ── Card variante: horizontal (imagen izq · texto der) ───────────────────── */
.card--horizontal {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.card--horizontal .card__img {
  flex-shrink: 0;
  width: 200px;
  overflow: hidden;
}
.card--horizontal .card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card--horizontal:hover .card__img img { transform: scale(1.06); }
.card--horizontal .card__body {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.card--horizontal .card__body h3 { margin: 0; }
.card--horizontal .card__body p { color: var(--color-text-primary); margin: 0; font-size: .9375rem; line-height: 1.7; }

/* ──────────────────────────────────────────────────────────────────────────
   08b · CARD VARIANTS (numbered · stat · person · feature · glass)
   ────────────────────────────────────────────────────────────────────────── */

/* ── numbered: icon-box (flujo) + número ghost grande (absoluto top-right) ── */
.card--numbered { position: relative; overflow: hidden; }
.card--numbered .card__num {
  position: absolute;
  top: -8px; right: 12px;
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

/* ── stat: métrica grande + label eyebrow + texto descriptivo ─────────────── */
.card--stat { text-align: center; }
.card__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.card__stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.card--stat p { font-size: .9375rem; }

/* ── person: avatar circular + nombre + rol + bio ─────────────────────────── */
.card--person { text-align: center; }
.card__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent);
  margin: 0 auto var(--space-5);
  display: block;
}
.card--person h3 { margin-bottom: var(--space-2); }
.card__role {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.card--person p { font-size: .9375rem; }

/* ── feature: row icon-left + texto-right + borde accent izquierdo ─────────── */
.card--feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  border-left: 3px solid var(--color-accent);
}
.card--feature .icon-box { flex-shrink: 0; margin-bottom: 0; }
.card--feature h3 { margin-bottom: var(--space-2); font-size: 1.0625rem; }
.card--feature p  { font-size: .9375rem; margin: 0; }

/* ── glass: frosted glass para secciones oscuras ──────────────────────────── */
.card--glass {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  color: var(--color-text-inverse);
}
.card--glass h3 { color: var(--color-text-inverse); }
.card--glass p  { color: rgba(255,255,255,.66); }
.card--glass:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,22,35,.20);
}

/* Shared link style for card variants */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--t-fast), color var(--t-fast);
}
.card__link:hover { gap: 10px; color: var(--color-accent-600); }
.card--cover .card__link { color: rgba(255,255,255,.85); }
.card--cover .card__link:hover { color: #fff; }

@media (max-width: 640px) {
  .card--horizontal { flex-direction: column; }
  .card--horizontal .card__img { width: 100%; height: 200px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   09 · FORMS (float labels + states)
   ────────────────────────────────────────────────────────────────────────── */
.form-group { position: relative; margin-bottom: var(--space-5); }

.form-control {
  width: 100%;
  padding: 18px 16px 8px;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--tint-accent-10);
}
.form-control--textarea { min-height: 120px; resize: vertical; padding-top: 22px; }

/* Float label */
.form-group label {
  position: absolute;
  left: 16px;
  top: 15px;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-secondary);
  pointer-events: none;
  transition: all var(--t-fast);
}
.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
  top: 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Sobre fondo oscuro */
.form-group--ondark .form-control {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.form-group--ondark label { color: rgba(255,255,255,.5); }

/* States */
.form-control.error { border-color: var(--color-error); }
.form-control.error:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
.form-control.error + label { color: var(--color-error); }

.form-error {
  display: none;
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--color-error);
}
.form-control.error ~ .form-error { display: block; }

.form-success {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 16px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid rgba(0,36,166,.18);
  border-radius: var(--radius-btn);
}
.form-success svg, .form-success [data-lucide] { width: 18px; height: 18px; }

/* ── Select variant (float-label permanente) ─────────────────────────────── */
.form-control--select {
  padding-top: 22px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23535353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.form-group--select label {
  top: 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent);
  pointer-events: none;
}

/* ── Contact panel (fondo navy) ──────────────────────────────────────────── */
.contact-panel {
  background: var(--color-primary);
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .contact-panel { padding: var(--space-10) var(--space-6); }
}

/* ── Contact strip sobre fondo oscuro ────────────────────────────────────── */
.contact-strip--ondark .contact-strip__label { color: rgba(255,255,255,.55); }
.contact-strip--ondark .contact-strip__value  { color: #fff; }
.contact-strip--ondark .icon-box { background: rgba(255,255,255,.08); color: #fff; }

/* ── Botón en estado de carga ────────────────────────────────────────────── */
.btn--loading {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   10 · NAVIGATION
   ────────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 18px 0;
  transition: background var(--t-base), box-shadow var(--t-base), padding var(--t-base);
}
.nav__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav__wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -.02em;
  color: var(--color-primary);
}
.nav__menu { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.nav__link {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav__link:hover { color: var(--color-accent); }
.nav__link.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }

/* Acciones persistentes (CTA siempre visible + toggle en móvil) */
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  color: var(--color-primary);
}
.nav__toggle svg, .nav__toggle [data-lucide] { width: 24px; height: 24px; }

/* Backdrop del menú off-canvas (móvil) */
.nav__backdrop {
  position: fixed; inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(2,22,35,.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* Variante sobre hero oscuro (solo index) */
.nav--over-hero .nav__wordmark { color: #fff; }
.nav--over-hero .nav__link { color: rgba(255,255,255,.72); }
.nav--over-hero .nav__link:hover { color: #fff; }
.nav--over-hero .nav__link.active { color: #fff; border-bottom-color: var(--color-accent); }
.nav--over-hero .nav__toggle { color: #fff; }

/* Estado scrolled — frosted glass */
.nav.is-scrolled {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-border-default), 0 6px 24px rgba(2,22,35,.05);
  padding: 12px 0;
}
.nav.is-scrolled .nav__wordmark { color: var(--color-primary); }
.nav.is-scrolled .nav__link { color: var(--color-text-primary); }
.nav.is-scrolled .nav__link.active { color: var(--color-primary); }
.nav.is-scrolled .nav__toggle { color: var(--color-primary); }

/* Variante: menú centrado (wordmark izq · menú centro · acciones der).
   Grid de 3 zonas para centrar ópticamente sin depender del ancho de los lados.
   Solo en desktop; en móvil el menú es off-canvas y se usa el flex base. */
@media (min-width: 769px) {
  .nav--centered .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav--centered .nav__menu { margin-left: 0; justify-self: center; }
  .nav--centered .nav__actions { justify-self: end; }
}

@media (max-width: 768px) {
  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 96px var(--space-8);
    background: var(--color-bg-white);
    box-shadow: -10px 0 40px rgba(2,22,35,.14);
    transform: translateX(100%);
    transition: transform var(--t-base);
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__menu .nav__link { color: var(--color-primary); }
  .nav__toggle { display: inline-flex; }
  /* Mantener CTA + toggle por encima del panel off-canvas (position:fixed) */
  .nav__actions { position: relative; z-index: 2; }
}

@media (min-width: 769px) {
  .nav__backdrop { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   11 · HERO (index)
   ────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding-block: 140px var(--space-20);
}
.hero__bg {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .28; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(2,22,35,.92) 0%, rgba(2,22,35,.72) 55%, rgba(0,36,166,.4) 100%);
  z-index: 1;
}
.hero__content { position: relative; z-index: 2; max-width: 720px; }
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin: var(--space-5) 0 var(--space-5);
}
.hero__title .accent { color: var(--color-accent); }
.hero__sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  max-width: 54ch;
  margin-bottom: var(--space-8);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Titular en 3 líneas con máscara (revelado tipográfico al cargar).
   padding-bottom evita que la máscara recorte los descendentes (g, p, q). */
.hero__line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.08em; }
.hero__line > span { display: inline-block; will-change: transform; }
.hero__line .accent { color: var(--color-accent); }

/* Nota de apoyo bajo los CTAs */
.hero__note {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: .8125rem; color: rgba(255,255,255,.6);
}
.hero__note svg, .hero__note [data-lucide] { width: 16px; height: 16px; color: var(--color-accent); }

/* Estado inicial del reveal — solo cuando JS confirma que se permite animar
   (clase .hero-anim en <html>). Sin JS o con reduced-motion: todo visible.
   Las líneas se ocultan con opacity (no transform) para que GSAP sea el único
   dueño del transform y no haya conflicto de unidades (%/px) en el yPercent. */
.hero-anim .hero__line > span { opacity: 0; }
.hero-anim .hero__reveal { opacity: 0; transform: translateY(16px); }

/* ── Hero slider (variante con Swiper) ──────────────────────────────────────
   El reveal del texto se dispara por slide activo (CSS puro, se reproduce en
   cada cambio). No usa GSAP ni la clase .hero-anim. */
.hero-swiper { position: relative; }
.hero-swiper .swiper-slide { height: 100vh; }
.hero-swiper .hero { min-height: 100%; height: 100%; }

.hero-swiper .hero__line > span {
  opacity: 1;                        /* cancela .hero-anim que lo pone en 0 */
  transform: translateY(110%);
  transition: transform .8s var(--ease);
}
.hero-swiper .hero__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-swiper .swiper-slide-active .hero__line > span { transform: translateY(0); }
.hero-swiper .swiper-slide-active .hero__reveal { opacity: 1; transform: none; }

/* Escalonado del slide activo */
.hero-swiper .swiper-slide-active .hero__title .hero__line:nth-child(1) > span { transition-delay: .15s; }
.hero-swiper .swiper-slide-active .hero__title .hero__line:nth-child(2) > span { transition-delay: .27s; }
.hero-swiper .swiper-slide-active .hero__title .hero__line:nth-child(3) > span { transition-delay: .39s; }
.hero-swiper .swiper-slide-active .hero__sub  { transition-delay: .50s; }
.hero-swiper .swiper-slide-active .hero__ctas { transition-delay: .60s; }
.hero-swiper .swiper-slide-active .hero__note { transition-delay: .68s; }

/* Variante "crecimiento suavizado" (.hero-grow): zoom Ken Burns lento del fondo
   + barra de acento que crece. Se reproduce en cada slide activo; el global de
   reduced-motion lo neutraliza (queda estático, sin movimiento). */
@keyframes heroGrow {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.hero-grow .hero__bg { transform: scale(1); transform-origin: 60% 50%; }
.hero-grow .swiper-slide-active .hero__bg { animation: heroGrow 7.5s var(--ease) forwards; }

.hero-grow .hero__title .accent { position: relative; display: inline-block; }
.hero-grow .hero__title .accent::after {
  content: ''; position: absolute; left: 0; bottom: -.04em;
  width: 100%; height: 3px; border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease);
}
.hero-grow .swiper-slide-active .hero__title .accent::after {
  transform: scaleX(1); transition-delay: .75s;
}

/* Paginación */
.hero-swiper .swiper-pagination { bottom: 30px; }
.hero-swiper .swiper-pagination-bullet {
  width: 10px; height: 10px;
  background: rgba(255,255,255,.4);
  opacity: 1;
  transition: width var(--t-base), background var(--t-base);
}
.hero-swiper .swiper-pagination-bullet-active {
  width: 30px; border-radius: 5px;
  background: var(--color-accent);
}

/* ── Hero variante: Light (fondo claro) ─────────────────────────────────────
   Sobreescribe los colores del hero base para uso sobre fondo blanco/gris.
   Dos sub-variantes: --split (2 col, imagen derecha) y --center (centrado). */
.hero--light {
  background: var(--color-bg-main);
  color: var(--color-primary);
}
.hero--light .hero__title   { color: var(--color-primary); }
.hero--light .hero__title .accent { color: var(--color-accent); }
.hero--light .hero__sub     { color: var(--color-text-primary); }
.hero--light .hero__note    { color: var(--color-text-primary); opacity: .7; }
.hero--light .hero__note [data-lucide],
.hero--light .hero__note svg { color: var(--color-accent); }

/* Layout dos columnas: texto izq · visual der */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero--split .hero__content { max-width: 100%; }
.hero--split .hero__visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(2,22,35,.14);
  aspect-ratio: 4/3;
}
.hero--split .hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Badge flotante sobre la imagen visual */
.hero__visual-badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  box-shadow: 0 6px 24px rgba(2,22,35,.14);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary);
}
.hero__visual-badge [data-lucide] { width:16px; height:16px; color: var(--color-accent); }

/* Blob decorativo de fondo (luz) */
.hero--light .hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  pointer-events: none;
  z-index: 0;
}

/* Variante centrada */
.hero--center { text-align: center; }
.hero--center .hero__content { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.hero--center .hero__ctas   { justify-content: center; }
.hero--center .hero__sub    { max-width: 58ch; margin-inline: auto; }
.hero--center .hero__note   { justify-content: center; }

/* Fila de stats bajo los CTAs en hero centrado */
.hero__stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
}
.hero__stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.hero__stat-item strong {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -.03em;
}
.hero__stat-item span {
  font-size: .8125rem;
  color: var(--color-text-primary);
}

/* Dots pattern de fondo para hero centrado */
.hero--dots {
  background-image: radial-gradient(circle, rgba(2,22,35,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

@media (max-width: 768px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; }
  .hero--split .hero__visual { display: none; }
}

/* ── Hero variante: Bento interactivo ───────────────────────────────────────
   Asimétrico: texto a la izquierda + rejilla bento a la derecha con
   micro-interacciones al hover. Reutiliza la base .hero (navy + blobs). */
.hero-bento__layout {
  position: relative;   /* por encima de .hero__overlay (z-index 1) */
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-12);
  align-items: center;
  width: 100%;
}
.hero-bento .hero__content { max-width: 560px; }

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}
.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  min-height: 136px;
  background: var(--tint-white-06);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-card);
  color: var(--color-text-inverse);
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base), background var(--t-base);
}
.bento__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
  box-shadow: var(--shadow-hover);
  background: rgba(255,255,255,.09);
}
.bento__card .icon-box { transition: transform var(--t-base), background var(--t-base), color var(--t-base); }
.bento__card:hover .icon-box { transform: scale(1.06); }
.bento__card--tall { grid-row: span 2; }
.bento__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-4); }

.bento__card--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}
.bento__card--accent:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.bento__card--accent .icon-box { background: rgba(255,255,255,.18); color: #fff; }

.bento__stat { font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.bento__label { font-size: .8125rem; color: rgba(255,255,255,.7); margin-top: 4px; }
.bento__card--accent .bento__label { color: rgba(255,255,255,.85); }
.bento__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.25; }

@media (max-width: 900px) {
  .hero-bento__layout { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 768px) {
  .bento__card--tall { grid-row: auto; }
}

/* ── Hero variante: Titular cinético (palabra rotativa) ──────────────────────
   La tipografía es la protagonista: una palabra rota con animación de máscara.
   El JS (initKineticTitle) alterna .is-active / .is-leaving. */
.hero-kinetic .hero__content { max-width: 860px; }
.kinetic {
  display: block;
  position: relative;
  height: 1.15em;
  overflow: hidden;
}
.kinetic__word {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  line-height: 1.05;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(100%);
  transition: transform .6s var(--ease), opacity .55s var(--ease);
}
.kinetic__word.is-active  { opacity: 1; transform: translateY(0); }
.kinetic__word.is-leaving { opacity: 0; transform: translateY(-100%); }

/* ── Hero variante: Constelación interactiva (canvas) ────────────────────────
   Red de nodos que reacciona al cursor (lo dibuja initConstellation en JS). */
.hero-constellation .constellation {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hero-constellation__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,22,35,.88) 0%, rgba(2,22,35,.45) 48%, rgba(2,22,35,.12) 100%);
}
.hero-constellation .hero__content { position: relative; z-index: 2; }

/* ── Hero variante: Ondas de luz (canvas) ────────────────────────────────────
   Filamentos sinusoidales con degradado cromático (rosa→blanco→cian) y glow.
   El canvas vive en z-index:0; la capa oscura lateral en z-index:1 (::after);
   el contenido en z-index:2. */
.hero-waves { background: #08070f; }
.hero-waves .waves-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero-waves::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(8,7,15,.82) 0%,
    rgba(8,7,15,.30) 45%,
    rgba(8,7,15,.06) 100%
  );
}
.hero-waves .hero__content { position: relative; z-index: 2; }

/* ── Hero variante: Bubbles (magenta · cian · coral · cobalto) ─────────────
   Paleta cromática vibrante sobre base índigo oscuro. Cinco orbes radiales
   con mix-blend-mode: screen generan el efecto "lente de luz" donde se
   superponen (magenta + cian → blanco luminoso). Sin canvas, sin JS. */
.hero-bubbles { background: #0e0630; overflow: hidden; }
.hero-bubbles .hero__bg,
.hero-bubbles .hero__overlay { display: none; }

/* El titular usa cian como acento para armonizar con la paleta */
.hero-bubbles .accent { color: #7de8f8; }

.bubbles-bg {
  position: absolute; inset: 0;
  z-index: 0; overflow: hidden;
}

/* Grain sutil sobre los orbes (mismo SVG que .morphing-bg::after) */
.bubbles-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity: .032; pointer-events: none; z-index: 10;
}

.bubbles-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, border-radius;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Orbe A — Fuchsia/Magenta grande, cuadrante top-left */
.bubbles-orb--a {
  width: 860px; height: 860px;
  top: -260px; left: -160px;
  background: radial-gradient(ellipse at center,
    rgba(210,42,240,.90) 0%,
    rgba(192,32,228,.22) 52%,
    transparent 72%);
  animation: bOrb-a 22s ease-in-out infinite;
}

/* Orbe B — Cian brillante, zona central-izquierda */
.bubbles-orb--b {
  width: 740px; height: 740px;
  top: 2%; left: 18%;
  background: radial-gradient(ellipse at center,
    rgba(52,192,240,.88) 0%,
    rgba(36,176,228,.18) 54%,
    transparent 72%);
  animation: bOrb-b 18s ease-in-out infinite;
  animation-delay: -5s;
}

/* Orbe C — Coral/Rosa cálido, centro-derecha */
.bubbles-orb--c {
  width: 660px; height: 660px;
  top: 18%; right: -80px;
  background: radial-gradient(ellipse at center,
    rgba(240,80,116,.84) 0%,
    rgba(228,64,100,.17) 52%,
    transparent 70%);
  animation: bOrb-c 15s ease-in-out infinite;
  animation-delay: -8s;
}

/* Orbe D — Cobalto/Azul real, flanco right + bottom */
.bubbles-orb--d {
  width: 720px; height: 720px;
  bottom: -200px; right: -120px;
  background: radial-gradient(ellipse at center,
    rgba(36,52,216,.92) 0%,
    rgba(28,44,208,.22) 54%,
    transparent 72%);
  animation: bOrb-d 24s ease-in-out infinite;
  animation-delay: -10s;
}

/* Orbe E — Violeta profundo, base central-baja */
.bubbles-orb--e {
  width: 520px; height: 520px;
  bottom: -80px; left: 28%;
  background: radial-gradient(ellipse at center,
    rgba(140,48,216,.78) 0%,
    rgba(124,32,204,.14) 54%,
    transparent 70%);
  animation: bOrb-e 13s ease-in-out infinite;
  animation-delay: -3s;
}

/* Velo lateral — protege la legibilidad del texto */
.bubbles-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(14,6,48,.85) 0%, rgba(14,6,48,.52) 48%, rgba(14,6,48,.16) 100%),
    linear-gradient(180deg, rgba(14,6,48,.40) 0%, transparent 38%, rgba(14,6,48,.52) 100%);
}

.hero-bubbles .hero__content { position: relative; z-index: 2; }

/* Keyframes de deriva y morfología — duraciones primas para evitar sincronía */
@keyframes bOrb-a {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  32%  { transform: translate(100px, 90px) scale(1.10);
         border-radius: 58% 42% 54% 46% / 46% 58% 42% 54%; }
  68%  { transform: translate(-65px, 55px) scale(.93);
         border-radius: 42% 58% 46% 54% / 54% 42% 58% 46%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes bOrb-b {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  28%  { transform: translate(85px, -75px) scale(1.14);
         border-radius: 64% 36% 56% 44% / 44% 64% 36% 56%; }
  70%  { transform: translate(-75px, 45px) scale(.90);
         border-radius: 36% 64% 48% 52% / 52% 36% 64% 48%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes bOrb-c {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  38%  { transform: translate(-110px, 65px) scale(1.12);
         border-radius: 56% 44% 62% 38% / 38% 56% 44% 62%; }
  76%  { transform: translate(55px, -55px) scale(.88);
         border-radius: 44% 56% 40% 60% / 60% 44% 56% 40%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes bOrb-d {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  30%  { transform: translate(-85px, -65px) scale(1.13);
         border-radius: 54% 46% 60% 40% / 40% 54% 46% 60%; }
  74%  { transform: translate(65px, -35px) scale(.91);
         border-radius: 46% 54% 42% 58% / 58% 46% 54% 42%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes bOrb-e {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  50%  { transform: translate(75px, -65px) scale(1.22);
         border-radius: 62% 38% 66% 34% / 34% 62% 38% 66%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}

/* ── Hero variante: Morphing Gradients (CSS puro) ──────────────────────────
   Fondo vivo: cinco orbes radiales que morfan su forma y derivan lentamente.
   Sin canvas, sin JS de fondo. mix-blend-mode: screen fusiona los colores en
   zonas de superposición para el efecto de luz cromática. */
.hero-morphing {
  background: #060e1a;
  overflow: hidden;
}
.hero-morphing .hero__bg,
.hero-morphing .hero__overlay { display: none; }

.morphing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Grain sutil sobre los orbes */
.morphing-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity: .035;
  pointer-events: none;
  z-index: 10;
}

.morphing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform, border-radius;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Orbe A — azul eléctrico grande, esquina top-right */
.morphing-orb--a {
  width: 720px; height: 720px;
  top: -200px; right: -120px;
  background: radial-gradient(ellipse at center, rgba(25,68,223,.92) 0%, rgba(25,68,223,.22) 52%, transparent 72%);
  animation: mOrb-a 16s ease-in-out infinite;
}

/* Orbe B — azul profundo, esquina bottom-left */
.morphing-orb--b {
  width: 600px; height: 600px;
  bottom: -140px; left: -100px;
  background: radial-gradient(ellipse at center, rgba(0,36,166,.95) 0%, rgba(0,36,166,.28) 55%, transparent 74%);
  animation: mOrb-b 21s ease-in-out infinite;
  animation-delay: -5s;
}

/* Orbe C — índigo, zona central-alta */
.morphing-orb--c {
  width: 460px; height: 460px;
  top: 8%; left: 30%;
  background: radial-gradient(ellipse at center, rgba(79,70,229,.82) 0%, rgba(79,70,229,.14) 55%, transparent 72%);
  animation: mOrb-c 13s ease-in-out infinite;
  animation-delay: -2s;
}

/* Orbe D — sky/cian, flanco derecho medio */
.morphing-orb--d {
  width: 400px; height: 400px;
  top: 50%; right: 8%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(14,165,233,.78) 0%, rgba(14,165,233,.12) 55%, transparent 70%);
  animation: mOrb-d 10s ease-in-out infinite;
  animation-delay: -3s;
}

/* Orbe E — cian brillante, punto medio-left */
.morphing-orb--e {
  width: 290px; height: 290px;
  top: 62%; left: 18%;
  background: radial-gradient(ellipse at center, rgba(6,182,212,.72) 0%, rgba(6,182,212,.1) 52%, transparent 70%);
  animation: mOrb-e 8s ease-in-out infinite;
  animation-delay: -1s;
}

/* Velo de legibilidad: oscurece el lado del texto sin ahogar los orbes */
.morphing-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(6,14,26,.88) 0%, rgba(6,14,26,.58) 48%, rgba(6,14,26,.18) 100%),
    linear-gradient(180deg, rgba(6,14,26,.42) 0%, transparent 38%, rgba(6,14,26,.55) 100%);
}

.hero-morphing .hero__content { position: relative; z-index: 2; }

/* Keyframes — cada orbe tiene su propia trayectoria y morfología */
@keyframes mOrb-a {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  30%  { transform: translate(-80px, 70px) scale(1.12);
         border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
  65%  { transform: translate(55px, -50px) scale(.92);
         border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes mOrb-b {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  28%  { transform: translate(75px, -65px) scale(1.18);
         border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; }
  68%  { transform: translate(-45px, 42px) scale(.88);
         border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes mOrb-c {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  40%  { transform: translate(65px, 55px) scale(1.22);
         border-radius: 65% 35% 50% 50% / 50% 65% 35% 50%; }
  78%  { transform: translate(-55px, -35px) scale(.84);
         border-radius: 35% 65% 55% 45% / 45% 35% 65% 55%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}
@keyframes mOrb-d {
  0%   { transform: translateY(-50%) scale(1);
         border-radius: 50%; }
  50%  { transform: translate(-90px, -50%) scale(1.16);
         border-radius: 55% 45% 62% 38% / 38% 62% 45% 55%; }
  100% { transform: translateY(-50%) scale(1);
         border-radius: 50%; }
}
@keyframes mOrb-e {
  0%   { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
  50%  { transform: translate(55px, -42px) scale(1.28);
         border-radius: 62% 38% 66% 34% / 34% 62% 38% 66%; }
  100% { transform: translate(0, 0) scale(1);
         border-radius: 50%; }
}

/* ── Hero variante: Kinético con fondo claro ───────────────────────────────
   Sin imagen de fondo — la tipografía sostiene el hero (más exigente que el
   oscuro). Dos círculos concéntricos CSS anclan la composición sin imágenes.
   La palabra .kinetic__word se escala 1.2× respecto a las líneas estáticas
   para crear tensión tipográfica editorial (el riesgo de diseño consciente). */
.hero--light {
  background: #F0F4FF;
  color: var(--color-primary);
}

/* Desactiva los elementos del hero base que no aplican aquí */
.hero--light .hero__bg,
.hero--light .hero__overlay { display: none; }

/* Decoración: par de círculos concéntricos (CSS puro, sin imágenes).
   Anclan el espacio vacío derecho y refuerzan la paleta navy/accent. */
.hero--light::before,
.hero--light::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero--light::before {
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(480px, 52vw, 760px);
  height: clamp(480px, 52vw, 760px);
  border: 1.5px solid rgba(25,68,223,.09);
}
.hero--light::after {
  right: 6%;
  top: 26%;
  width: clamp(180px, 20vw, 300px);
  height: clamp(180px, 20vw, 300px);
  border: 1.5px solid rgba(25,68,223,.06);
}

.hero--light .hero__content { position: relative; z-index: 2; }

/* Texto: navy sobre claro */
.hero--light .hero__title  { color: var(--color-primary); }
.hero--light .hero__sub    { color: var(--color-text-primary); }
.hero--light .hero__note   { color: rgba(2,22,35,.55); }
.hero--light .hero__note svg,
.hero--light .hero__note [data-lucide] { color: var(--color-accent); }

/* Palabra kinética: acento azul (igual que en oscuro) */
.hero--light .kinetic { height: 1.1em; }
.hero--light .kinetic .kinetic__word {
  font-size: 1.2em;         /* 20% más grande — tensión tipográfica editorial */
  letter-spacing: -.038em;
  line-height: 1;
}

/* ── Hero variante: Video de fondo ─────────────────────────────────────────
   El <video> reemplaza a .hero__bg. Mismo overlay de gradiente del hero base.
   Siempre muted para cumplir la política de autoplay de los navegadores.
   El botón .hero__mute-btn permite al usuario activar el audio si lo desea. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
  z-index: 0;
  pointer-events: none;
}

/* Botón flotante mute/unmute */
.hero__mute-btn {
  position: absolute;
  bottom: var(--space-8); right: var(--space-8);
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero__mute-btn:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.06);
}
.hero__mute-btn svg { width: 20px; height: 20px; pointer-events: none; }

/* Estado muted: icono volume-x; unmuted: volume-2 */
.hero__mute-btn .icon-unmuted { display: none; }
.hero__mute-btn.is-unmuted .icon-muted   { display: none; }
.hero__mute-btn.is-unmuted .icon-unmuted { display: block; }

/* Badge de scroll — indicador de invitación al scroll */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-8); left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: rgba(255,255,255,.5);
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: scrollHintBounce 2s ease-in-out infinite;
}
.hero__scroll-hint svg { width: 20px; height: 20px; }
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   12 · SUB-HERO (internal pages)
   ────────────────────────────────────────────────────────────────────────── */
.subhero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 160px 0 var(--space-20);
  text-align: center;
}
.subhero__inner { position: relative; z-index: 2; }
.subhero .eyebrow { justify-content: center; color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.subhero__title { color: #fff; margin-bottom: var(--space-3); font-size: clamp(2rem, 4vw, 3rem); }
.breadcrumb {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   12b · SUBHERO — LIGHT VARIANT
   ────────────────────────────────────────────────────────────────────────── */

/* — Color layer — */
.subhero--light {
  background: var(--color-bg-main);
  color: var(--color-text-primary);
}
.subhero--light .subhero__title {
  color: var(--color-heading);
}
.subhero--light .eyebrow {
  color: var(--color-text-primary);
}
.subhero--light .eyebrow::before {
  background: var(--color-accent);
}
.subhero--light .breadcrumb {
  color: rgba(83,83,83,.55);
}
.subhero--light .breadcrumb a {
  color: var(--color-accent);
}
.subhero--light .breadcrumb a:hover {
  color: var(--color-primary);
}

/* — Deco: blob — */
.subhero--deco-blob::before,
.subhero--deco-blob::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.subhero--deco-blob::before {
  width: 320px;
  height: 320px;
  top: -100px;
  right: -60px;
  background: rgba(25,68,223,.06);
  filter: blur(60px);
}
.subhero--deco-blob::after {
  width: 180px;
  height: 180px;
  bottom: -60px;
  left: -40px;
  background: rgba(25,68,223,.06);
  filter: blur(40px);
}

/* — Deco: dot pattern — */
.subhero--deco-pattern {
  background-image: radial-gradient(circle, rgba(25,68,223,.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
.subhero--deco-pattern::before,
.subhero--deco-pattern::after { display: none; }

/* — Deco: clean — */
.subhero--deco-clean {
  border-bottom: 1px solid var(--color-border-default);
}
.subhero--deco-clean::before,
.subhero--deco-clean::after { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   13 · SERVICE CARDS
   ────────────────────────────────────────────────────────────────────────── */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.service-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--color-border-strong); }
.service-card:hover .icon-box { background: var(--color-accent); color: #fff; transform: scale(1.05); }
.service-card .icon-box { margin-bottom: var(--space-5); }
.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}
.service-card__text { font-size: .9375rem; line-height: 1.7; color: var(--color-text-primary); margin-bottom: var(--space-4); }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-accent);
}
.service-card__link:hover { gap: 10px; }

/* ──────────────────────────────────────────────────────────────────────────
   14 · PROJECT CARDS
   ────────────────────────────────────────────────────────────────────────── */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.project-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.project-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.project-card:hover .project-card__img { transform: scale(1.06); }
.project-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(2,22,35,.92) 0%, rgba(2,22,35,.4) 55%, transparent 100%);
  color: #fff;
}
.project-card__num {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.project-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.project-card__tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 11px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
}

/* ──────────────────────────────────────────────────────────────────────────
   15 · PLANS / PRICING
   ────────────────────────────────────────────────────────────────────────── */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.plan-card {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.plan-card__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-heading); }
.plan-card__price { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 800; color: var(--color-heading); letter-spacing: -.02em; margin-top: var(--space-2); }
.plan-card__period { font-size: .8125rem; color: var(--color-text-secondary); }
.plan-card__divider { height: 1px; background: var(--color-border-default); margin: var(--space-6) 0; }
.plan-card__features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); flex: 1; }
.plan-card__feature { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.plan-card__feature-icon { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

.plan-card--featured {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.plan-card--featured .plan-card__name,
.plan-card--featured .plan-card__price { color: #fff; }
.plan-card--featured .plan-card__period { color: rgba(255,255,255,.75); }
.plan-card--featured .plan-card__divider { background: rgba(255,255,255,.22); }
.plan-card--featured .plan-card__feature-icon { color: #fff; }
.plan-card__badge {
  position: absolute; top: var(--space-5); right: var(--space-5);
  padding: 6px 12px;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.18); color: #fff;
  border-radius: var(--radius-pill);
}

/* ──────────────────────────────────────────────────────────────────────────
   16 · CTA BAND
   ────────────────────────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-12);
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,.10); top: -120px; left: -80px;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta-band__title { color: #fff; margin-bottom: var(--space-3); }
.cta-band__text { color: rgba(255,255,255,.82); margin-bottom: var(--space-8); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ──────────────────────────────────────────────────────────────────────────
   16b · CTA BAND — VARIANTS
   ────────────────────────────────────────────────────────────────────────── */

/* — Dark — */
.cta-band--dark { background: var(--color-primary); }
.cta-band--dark::before { background: rgba(255,255,255,.08); }

/* — Light — */
.cta-band--light { background: var(--color-bg-main); }
.cta-band--light::before { background: rgba(25,68,223,.06); }
.cta-band--light .cta-band__title { color: var(--color-heading); }
.cta-band--light .cta-band__text  { color: var(--color-text-primary); }

/* — Gradient — */
.cta-band--gradient {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}
.cta-band--gradient::before { background: rgba(255,255,255,.12); }

/* — Horizontal — */
.cta-band--horizontal .cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  max-width: 900px;
  text-align: left;
}
.cta-band--horizontal .cta-band__btns {
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cta-band--horizontal .cta-band__inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-band--horizontal .cta-band__btns {
    flex-direction: row;
    align-items: center;
  }
}

/* — Full-width — */
.cta-band--full {
  border-radius: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.cta-band--full .cta-band__inner { max-width: 900px; }

/* ──────────────────────────────────────────────────────────────────────────
   17 · NEWSLETTER
   ────────────────────────────────────────────────────────────────────────── */
.newsletter {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-12);
  text-align: center;
}
.newsletter__inner { position: relative; z-index: 1; max-width: 560px; margin-inline: auto; }
.newsletter__title { color: #fff; margin-bottom: var(--space-2); }
.newsletter__text { color: rgba(255,255,255,.66); margin-bottom: var(--space-8); }
.newsletter__form { display: flex; gap: var(--space-3); }
.newsletter__input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-btn);
}
.newsletter__input::placeholder { color: rgba(255,255,255,.5); }
.newsletter__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(25,68,223,.3); }
.newsletter__success {
  display: none;
  align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: .875rem; color: #fff;
}
.newsletter__success svg, .newsletter__success [data-lucide] { width: 18px; height: 18px; }

/* ──────────────────────────────────────────────────────────────────────────
   18 · FAQ (accordion)
   ────────────────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq__item.is-open { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700; text-align: left;
  color: var(--color-heading);
  background: none; border: none; cursor: pointer;
  border-radius: inherit;
  transition: background var(--t-fast), color var(--t-fast);
}
.faq__q:hover { background: var(--color-bg-soft); }
.faq__icon { width: 20px; height: 20px; color: var(--color-accent); transition: transform var(--t-base); flex-shrink: 0; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base);
}
.faq__a-inner { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-primary); line-height: 1.7; }
.faq__item.is-open .faq__a { max-height: 320px; }

/* ──────────────────────────────────────────────────────────────────────────
   19 · CONTACT STRIP
   ────────────────────────────────────────────────────────────────────────── */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.contact-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.contact-strip__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.contact-strip__label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.contact-strip__value { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-heading); }

/* ──────────────────────────────────────────────────────────────────────────
   20 · TESTIMONIALS
   ────────────────────────────────────────────────────────────────────────── */
.testimonial-card {
  background: var(--tint-white-06);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  height: 100%;
}
.testimonial-card__stars { display: flex; gap: 2px; color: var(--color-accent); margin-bottom: var(--space-4); }
.testimonial-card__stars svg, .testimonial-card__stars [data-lucide] { width: 18px; height: 18px; }
.testimonial-card__quote { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.88); margin-bottom: var(--space-6); }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-card__name { font-family: var(--font-heading); font-weight: 700; font-size: .9375rem; color: #fff; }
.testimonial-card__role { font-size: .8125rem; color: rgba(255,255,255,.6); }

/* light variant for light sections */
.testimonial-card--light {
  background: var(--color-bg-white);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-card);
}
.testimonial-card--light .testimonial-card__quote { color: var(--color-primary); }
.testimonial-card--light .testimonial-card__name { color: var(--color-heading); }
.testimonial-card--light .testimonial-card__role { color: var(--color-text-secondary); }

/* ──────────────────────────────────────────────────────────────────────────
   21 · FOOTER
   ────────────────────────────────────────────────────────────────────────── */
.footer { background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-20) 0 var(--space-8); }
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer__wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: #fff; margin-bottom: var(--space-3); }
.footer__tagline { font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.6); max-width: 36ch; margin-bottom: var(--space-5); }
.footer__socials { display: flex; gap: var(--space-3); }
.footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tint-white-06); color: rgba(255,255,255,.8);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.footer__social-link:hover { background: var(--color-accent); color: #fff; transform: translateY(-2px); }
.footer__social-link svg, .footer__social-link [data-lucide] { width: 18px; height: 18px; }
.footer__col-title { font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-5); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link { font-size: .9375rem; color: rgba(255,255,255,.6); }
.footer__link:hover { color: #fff; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-6);
  font-size: .8125rem; color: rgba(255,255,255,.45);
}

/* ──────────────────────────────────────────────────────────────────────────
   21b · FOOTER — VARIANTS
   ────────────────────────────────────────────────────────────────────────── */

/* — Contact Strip Grid (structural, no modifier class needed) — */
.footer__contact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-10);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  transition: background var(--t-base);
}
.footer__contact-item:hover { background: rgba(255,255,255,.10); }
.footer__contact-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.footer__contact-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* — Compact — */
.footer--compact { padding: var(--space-8) 0; }
.footer--compact .footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-dark);
  grid-template-columns: unset;
}
.footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}
.footer__nav-row .footer__link { font-size: .9375rem; color: rgba(255,255,255,.6); }
.footer__nav-row .footer__link:hover { color: #fff; }

/* — Light — */
.footer--light {
  background: #fff;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border-default);
}
.footer--light .footer__wordmark { color: var(--color-heading); }
.footer--light .footer__tagline  { color: var(--color-text-primary); }
.footer--light .footer__col-title { color: var(--color-heading); }
.footer--light .footer__link { color: var(--color-text-primary); }
.footer--light .footer__link:hover { color: var(--color-accent); }
.footer--light .footer__social-link { background: rgba(2,22,35,.06); color: var(--color-primary); }
.footer--light .footer__social-link:hover { background: var(--color-accent); color: #fff; }
.footer--light .footer__top { border-bottom-color: var(--color-border-default); }
.footer--light .footer__bottom { color: rgba(83,83,83,.45); }

/* — Centered — */
.footer--centered .footer__top {
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
}
.footer--centered .footer__tagline { max-width: 48ch; margin-inline: auto; }
.footer--centered .footer__socials { justify-content: center; }
.footer--centered .footer__bottom  { justify-content: center; flex-direction: column; gap: var(--space-2); text-align: center; }
.footer__nav-row--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  margin: var(--space-6) 0;
}
.footer__nav-row--centered .footer__link { color: rgba(255,255,255,.6); }
.footer__nav-row--centered .footer__link:hover { color: #fff; }

/* — Responsive overrides for variants — */
@media (max-width: 768px) {
  .footer__contact-strip { grid-template-columns: 1fr; }
  .footer--compact .footer__top { flex-direction: column; text-align: center; }
  .footer__nav-row { justify-content: center; }
  .footer--compact .footer__socials { justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────────────────
   22 · WHATSAPP FLOAT
   ────────────────────────────────────────────────────────────────────────── */
.wa-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: var(--z-float);
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform var(--t-fast);
}
.wa-btn:hover { transform: scale(1.08); color: #fff; }
.wa-btn svg, .wa-btn [data-lucide] { width: 28px; height: 28px; }

/* ──────────────────────────────────────────────────────────────────────────
   23 · SCROLL TOP
   ────────────────────────────────────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 24px;
  z-index: var(--z-float);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(25,68,223,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.scroll-top svg, .scroll-top [data-lucide] { width: 18px; height: 18px; }
.scroll-top:hover { background: var(--color-accent-600); transform: translateY(-2px); }
.scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top.is-visible:hover { transform: translateY(-2px); }

/* — Position variants — */
.scroll-top--left  { left:  24px; }
.scroll-top--right { right: 24px; }

/* ──────────────────────────────────────────────────────────────────────────
   22b · SECTION HELPERS (encabezados + sliders de sección + story)
   ────────────────────────────────────────────────────────────────────────── */
.section__head { margin-bottom: var(--space-12); }
.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section__head--center .eyebrow { justify-content: center; }
.section__head .section-title { margin-top: var(--space-3); }
.section__head .section-lead { margin-top: var(--space-4); }
.section--dark .section__head .section-title,
.section--surface .section__head .section-title { color: var(--color-text-inverse); }
.section--dark .section__head .section-lead,
.section--surface .section__head .section-lead { color: rgba(255,255,255,.7); }

/* Sliders dentro de secciones (servicios, testimonios) */
.section-swiper { padding-bottom: 48px; }
.section-swiper .swiper-slide { height: auto; }
.section-swiper .service-card,
.section-swiper .testimonial-card { height: 100%; }
.section-swiper .swiper-pagination { bottom: 0; }
.section-swiper .swiper-pagination-bullet {
  background: rgba(2,22,35,.25); opacity: 1;
  transition: width var(--t-base), background var(--t-base);
}
.section-swiper .swiper-pagination-bullet-active { background: var(--color-accent); width: 26px; border-radius: 5px; }
.section--dark .section-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.3); }

/* Watch Our Story — columnas con borde izquierdo de acento */
.story-item { border-left: 3px solid var(--color-accent); padding-left: var(--space-5); }
.story-item h3 { margin-bottom: var(--space-2); }

/* Gutter vertical para el grid: este build de Bootstrap es v4 (sólo trae
   gutters horizontales). Las clases g-* añaden separación entre filas que
   hacen wrap (servicios, proyectos, etc.). El horizontal ya lo da Bootstrap. */
.row.g-3 { row-gap: var(--space-3); }
.row.g-4 { row-gap: var(--space-6); }
.row.g-5 { row-gap: var(--space-8); }

/* ──────────────────────────────────────────────────────────────────────────
   23 · RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-strip  { grid-template-columns: 1fr; }
  .footer__top    { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-16); }
  .services__grid,
  .projects__grid,
  .plans__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; }
  .cta-band, .newsletter { padding: var(--space-12) var(--space-6); }
}

@media (max-width: 520px) {
  .hero__ctas .btn,
  .cta-band__btns .btn { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   10b · NAV VARIANT — DARK (.nav--dark)
   ────────────────────────────────────────────────────────────────────────── */
.nav--dark { background: var(--color-primary); }
.nav--dark .nav__wordmark { color: #fff; }
.nav--dark .nav__link     { color: rgba(255,255,255,.72); }
.nav--dark .nav__link:hover { color: #fff; }
.nav--dark .nav__link.active { color: #fff; border-bottom-color: var(--color-accent); }
.nav--dark .nav__toggle   { color: #fff; }
.nav--dark.is-scrolled {
  background: var(--color-primary);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 32px rgba(2,22,35,.40);
  padding: 12px 0;
}
.nav--dark.is-scrolled .nav__wordmark,
.nav--dark.is-scrolled .nav__toggle   { color: #fff; }
.nav--dark.is-scrolled .nav__link     { color: rgba(255,255,255,.72); }
.nav--dark.is-scrolled .nav__link.active { color: #fff; }
@media (max-width: 768px) {
  .nav--dark .nav__menu {
    background: var(--color-primary);
    box-shadow: -10px 0 40px rgba(2,22,35,.45);
  }
  .nav--dark .nav__menu .nav__link       { color: rgba(255,255,255,.75); }
  .nav--dark .nav__menu .nav__link.active { color: #fff; }
}

/* ──────────────────────────────────────────────────────────────────────────
   10c · NAV VARIANT — MEGA MENU (.nav--mega)
   ────────────────────────────────────────────────────────────────────────── */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav__item--has-mega > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__item--has-mega > .nav__link [data-lucide] {
  width: 14px; height: 14px;
  transition: transform var(--t-fast);
}
.nav__item--has-mega:hover > .nav__link [data-lucide],
.nav__item--has-mega:focus-within > .nav__link [data-lucide] {
  transform: rotate(-180deg);
}
.nav__mega {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 560px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 48px rgba(2,22,35,.14);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
  z-index: calc(var(--z-nav) + 10);
}
.nav__item--has-mega:hover .nav__mega,
.nav__item--has-mega:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav__mega__col { display: flex; flex-direction: column; gap: 2px; }
.nav__mega__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-btn);
  color: inherit;
  transition: background var(--t-fast);
}
.nav__mega__link:hover { background: var(--color-bg-soft); }
.nav__mega__icon.icon-box {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  margin-bottom: 0;
}
.nav__mega__body { display: flex; flex-direction: column; gap: 2px; }
.nav__mega__label {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.2;
}
.nav__mega__desc {
  font-size: .8125rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
@media (max-width: 768px) {
  .nav__item { flex-direction: column; align-items: stretch; width: 100%; }
  .nav__mega {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-border-default);
    border-radius: 0;
    grid-template-columns: 1fr;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-base);
  }
  .nav__item--has-mega.is-open .nav__mega { max-height: 600px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   10d · NAV VARIANT — PILLS (.nav--pills)
   ────────────────────────────────────────────────────────────────────────── */
.nav--pills .nav__link {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border-bottom: none;
  background: transparent;
}
.nav--pills .nav__link:hover {
  background: var(--tint-accent-10);
  color: var(--color-accent);
}
.nav--pills .nav__link.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-bottom: none;
}
.nav--pills.nav--over-hero .nav__link          { color: rgba(255,255,255,.80); }
.nav--pills.nav--over-hero .nav__link:hover    { background: rgba(255,255,255,.12); color: #fff; }
.nav--pills.nav--over-hero .nav__link.active   { background: var(--color-accent); color: #fff; border-bottom: none; }
.nav--pills.nav--over-hero.is-scrolled .nav__link       { color: var(--color-text-primary); }
.nav--pills.nav--over-hero.is-scrolled .nav__link:hover { background: var(--tint-accent-10); color: var(--color-accent); }
.nav--pills.nav--over-hero.is-scrolled .nav__link.active { background: var(--color-accent); color: var(--color-text-inverse); border-bottom: none; }

/* ──────────────────────────────────────────────────────────────────────────
   10e · NAV VARIANT — SIDEBAR (.nav--sidebar)
   ────────────────────────────────────────────────────────────────────────── */
.nav-sidebar-body { padding-left: 240px; }
.nav--sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: auto;
  width: 240px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  background: var(--color-primary);
  border-right: 1px solid rgba(255,255,255,.08);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.nav--sidebar .nav__topbar { display: none; }
.nav--sidebar .nav__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
}
.nav__sidebar-header {
  padding: var(--space-8) var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.nav--sidebar .nav__wordmark { color: #fff; font-size: 1.25rem; }
.nav__sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-4);
  overflow-y: auto;
}
.nav--sidebar .nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-btn);
  color: rgba(255,255,255,.65);
  border-bottom: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav--sidebar .nav__link [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }
.nav--sidebar .nav__link:hover  { background: rgba(255,255,255,.07); color: #fff; }
.nav--sidebar .nav__link.active { background: rgba(25,68,223,.28); color: #fff; border-bottom: none; }
.nav__sidebar-footer {
  padding: var(--space-5) var(--space-4) var(--space-8);
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.nav--sidebar.is-scrolled {
  background: var(--color-primary);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
@media (max-width: 768px) {
  .nav-sidebar-body { padding-left: 0; padding-top: 64px; }
  .nav--sidebar {
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; height: auto;
    flex-direction: row;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav--sidebar .nav__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--space-5);
  }
  .nav--sidebar .nav__topbar .nav__wordmark { color: #fff; }
  .nav--sidebar .nav__inner.nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 84vw);
    height: 100vh;
    background: var(--color-primary);
    box-shadow: -10px 0 40px rgba(2,22,35,.35);
    transform: translateX(100%);
    transition: transform var(--t-base);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-y: auto;
  }
  .nav--sidebar .nav__inner.nav__menu.is-open { transform: translateX(0); }
  .nav--sidebar .nav__toggle { display: inline-flex; color: #fff; }
}
@media (min-width: 769px) {
  .nav--sidebar .nav__topbar { display: none; }
  .nav--sidebar .nav__toggle { display: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24 · MARQUEE — banda horizontal con backdrop-filter blur
   Estructura: .marquee > .marquee__track > items (×2 en HTML)
   Loop: translateX(0 → -50%), con los items duplicados el
   segundo set = primer set visualmente → loop perfecto.
   Edge fade: mask-image transparente en 0–8% y 92–100%.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.marquee {
  --marquee-duration: 30s;
  overflow: hidden;
  position: relative;
  padding: var(--space-5) 0;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Sobre sección clara — sobreescribe dark defaults */
.marquee--light {
  background: rgba(2,22,35,.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top-color: var(--color-border-default);
  border-bottom-color: var(--color-border-default);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  animation: marqueeScroll var(--marquee-duration) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* ── Variante logos ───────────────────── */
.marquee__logo {
  height: 32px;
  width: auto;
  opacity: .55;
  filter: grayscale(1);
  flex-shrink: 0;
  transition: opacity var(--t-fast), filter var(--t-fast);
}
.marquee:hover .marquee__logo { opacity: .75; filter: grayscale(.4); }

.marquee__sep {
  color: rgba(255,255,255,.30);
  font-size: 1rem;
  flex-shrink: 0;
  user-select: none;
}
.marquee--light .marquee__sep { color: var(--color-border-default); }

/* ── Variante tech ────────────────────── */
.marquee--tech .marquee__track { gap: var(--space-10); }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.marquee__label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ── Variante text ────────────────────── */
.marquee__phrase {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee__star {
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
  user-select: none;
}

/* ── Variante cards ───────────────────── */
.marquee__card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.marquee__card:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.marquee__card-logo { height: 20px; width: auto; opacity: .75; flex-shrink: 0; }
.marquee__card-name { font-size: .875rem; font-weight: 600; color: var(--color-text-inverse); }

/* ── Keyframes ────────────────────────── */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Accesibilidad ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   E1 · ALERTS & TOASTS
   ────────────────────────────────────────────────────────────────────────── */

/* ── Alert (inline) ───────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.55;
}
.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.alert__body { flex: 1; }
.alert__title {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  margin: 0 0 3px;
}
.alert__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
}
.alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  color: inherit;
  opacity: .55;
  transition: opacity var(--t-fast);
  display: flex;
  align-items: center;
}
.alert__close:hover { opacity: 1; }
.alert__close svg { width: 16px; height: 16px; }

/* -- Info */
.alert--info {
  background: rgba(25,68,223,.07);
  border-color: rgba(25,68,223,.20);
  color: #1338b8;
}
.alert--info .alert__title { color: #0e2899; }

/* -- Success */
.alert--success {
  background: rgba(5,150,105,.07);
  border-color: rgba(5,150,105,.22);
  color: #047857;
}
.alert--success .alert__title { color: #065f46; }

/* -- Warning */
.alert--warning {
  background: rgba(217,119,6,.08);
  border-color: rgba(217,119,6,.25);
  color: #92400e;
}
.alert--warning .alert__title { color: #78350f; }

/* -- Error */
.alert--error {
  background: rgba(225,29,72,.07);
  border-color: rgba(225,29,72,.22);
  color: #be123c;
}
.alert--error .alert__title { color: #9f1239; }

/* -- Ghost (sin relleno) */
.alert--ghost {
  background: transparent;
  border-style: dashed;
}

/* ── Toast (flotante) ─────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: calc(var(--z-float) + 10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: rgba(255,255,255,.90);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(2,22,35,.22);
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  animation: toastIn var(--t-base) var(--ease) forwards;
}
.toast.is-hiding {
  animation: toastOut var(--t-base) var(--ease) forwards;
}
.toast__icon { flex-shrink: 0; width: 18px; height: 18px; }
.toast__msg  { flex: 1; }
.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  transition: color var(--t-fast);
}
.toast__close:hover { color: #fff; }
.toast__close svg { width: 15px; height: 15px; }

/* -- Variantes de color */
.toast--info    { background: var(--color-accent); }
.toast--success { background: #059669; }
.toast--warning { background: #d97706; }
.toast--error   { background: #e11d48; }

/* -- Con barra de progreso */
.toast--progress { padding-bottom: calc(var(--space-3) + 4px); position: relative; overflow: hidden; }
.toast__bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,.35);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  animation: toastBar 4s linear forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
@keyframes toastBar {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   NAV DROPDOWN — dropdown estándar de enlaces simples
   Uso: <div class="nav__item has-dropdown"> + <ul class="nav__dropdown">
   ────────────────────────────────────────────────────────────────────────── */
.has-dropdown { position: relative; }

/* Bridge: evita que el cursor "pierda" el hover al cruzar el gap */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px; right: -8px;
  height: 12px;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--color-bg-white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(2,22,35,.12), 0 2px 8px rgba(2,22,35,.06);
  padding: var(--space-1) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  pointer-events: none;
  z-index: calc(var(--z-nav) + 1);
}
.has-dropdown:not(:hover):not(.is-open) .nav__dropdown { transition-delay: 100ms; }

.has-dropdown:hover .nav__dropdown,
.has-dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.nav__dropdown li { margin: 0; }

.nav__dropdown a {
  display: block;
  padding: 9px var(--space-4);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.nav__dropdown a:hover {
  background: var(--color-bg-soft);
  color: var(--color-primary);
  padding-left: calc(var(--space-4) + 4px);
}

.nav__dropdown__divider {
  height: 1px;
  background: rgba(0,0,0,.07);
  margin: var(--space-1) 0;
}

@media (max-width: 768px) {
  .nav__dropdown { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   C11 · MEGA MENU
   ────────────────────────────────────────────────────────────────────────── */

/* El nav__item que contiene un mega menu necesita posición relativa */
.nav__item { display: inline-flex; align-items: center; }
.has-mega { position: relative; }

/* ── BRIDGE: pseudo-elemento invisible que cubre el gap entre el link y el
   panel del mega menu. Sin él el cursor "sale" del <li> al cruzar el gap
   y :hover se pierde antes de llegar a los links del menú. ── */
.has-mega::after {
  content: '';
  position: absolute;
  /* cubre desde el borde inferior del <li> hasta 14px más abajo (gap visual) */
  top: 100%;
  left: -24px;
  right: -24px;
  height: 14px;
  /* transparente — solo amplía el área de hover */
}

/* Flecha indicadora en el nav link padre */
.has-mega > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.has-mega > .nav__link svg,
.has-mega > .nav__link [data-lucide] {
  width: 15px; height: 15px;
  transition: transform var(--t-fast);
}
.has-mega:hover > .nav__link svg,
.has-mega:hover > .nav__link [data-lucide] { transform: rotate(180deg); }
.has-mega.is-open > .nav__link svg,
.has-mega.is-open > .nav__link [data-lucide] { transform: rotate(180deg); }

/* Panel del mega menu — top = gap visual (10px) */
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 780px;
  z-index: calc(var(--z-nav) + 1);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(2,22,35,.14), 0 4px 16px rgba(2,22,35,.06);
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-base),
    visibility var(--t-base),
    transform var(--t-base);
  pointer-events: none;
}

/* Triángulo puntero — se ajusta al nuevo top */
.mega-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  background: var(--color-bg-white);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-left: 1px solid var(--color-border-default);
  border-right: 1px solid var(--color-border-default);
}

/* Hover (desktop) */
.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Delay de salida — ayuda cuando el cursor se mueve en diagonal */
.has-mega .mega-menu { transition-delay: 0s; }
.has-mega:not(:hover):not(.is-open) .mega-menu { transition-delay: 120ms; }

/* Grid interno */
.mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 200px;
  gap: var(--space-6);
}
.mega-menu__inner--2col { grid-template-columns: 1fr 1fr; }
.mega-menu__inner--3col { grid-template-columns: 1fr 1fr 1fr; }

/* Heading de columna */
.mega-menu__heading {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

/* Lista de links */
.mega-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.mega-menu__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: background var(--t-fast);
}
.mega-menu__link:hover { background: var(--color-bg-soft); }

.mega-menu__link-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--tint-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background var(--t-fast);
}
.mega-menu__link-icon svg { width: 15px; height: 15px; color: var(--color-accent); }
.mega-menu__link:hover .mega-menu__link-icon { background: var(--color-accent); }
.mega-menu__link:hover .mega-menu__link-icon svg { color: #fff; }

.mega-menu__link-title {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-heading);
  display: block;
  line-height: 1.3;
}
.mega-menu__link-desc {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--color-text-secondary);
  display: block;
  margin-top: 1px;
  line-height: 1.4;
}

/* Columna featured (tarjeta oscura) */
.mega-menu__featured {
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mega-menu__featured-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  opacity: .7;
}
.mega-menu__featured-body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.mega-menu__featured-label {
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.mega-menu__featured-title {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.mega-menu__featured-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--t-fast);
}
.mega-menu__featured-cta:hover { gap: var(--space-2); }
.mega-menu__featured-cta svg { width: 13px; height: 13px; }

/* Divisor horizontal interno */
.mega-menu__divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: var(--space-4) 0 var(--space-3);
}

/* Footer con links de acción */
.mega-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
  grid-column: 1 / -1;
}
.mega-menu__footer-text {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
}

/* Ocultar en móvil — el off-canvas es el equivalente */
@media (max-width: 768px) {
  .mega-menu { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   C12 · OFF-CANVAS NAV
   ────────────────────────────────────────────────────────────────────────── */

/* Wrapper */
.offcanvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
.offcanvas.is-open { pointer-events: auto; }

/* Panel lateral */
.offcanvas__panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(340px, 88vw);
  background: var(--color-bg-white);
  box-shadow: -12px 0 48px rgba(2,22,35,.16);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform var(--t-base) cubic-bezier(.34,1.2,.64,1);
  overflow: hidden;
}
.offcanvas.is-open .offcanvas__panel { transform: translateX(0); }

/* Variante desde la izquierda */
.offcanvas--left .offcanvas__panel { right: auto; left: 0; transform: translateX(-110%); box-shadow: 12px 0 48px rgba(2,22,35,.16); }
.offcanvas--left.is-open .offcanvas__panel { transform: translateX(0); }

/* Backdrop */
.offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,22,35,.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.offcanvas.is-open .offcanvas__backdrop { opacity: 1; }

/* Header */
.offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.offcanvas__wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-primary);
}
.offcanvas__close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.offcanvas__close:hover { background: var(--color-border-default); color: var(--color-heading); }
.offcanvas__close svg { width: 16px; height: 16px; }

/* Search bar */
.offcanvas__search {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  position: relative;
}
.offcanvas__search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 22px);
  border: 1.5px solid var(--color-border-default);
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-heading);
  background: var(--color-bg-soft);
  transition: border-color var(--t-fast), background var(--t-fast);
  outline: none;
}
.offcanvas__search-input:focus { border-color: var(--color-accent); background: var(--color-bg-white); }
.offcanvas__search-icon {
  position: absolute;
  left: calc(var(--space-6) + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* Nav scrollable */
.offcanvas__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
.offcanvas__nav::-webkit-scrollbar { display: none; }

/* Link simple */
.offcanvas__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.offcanvas__link svg { width: 18px; height: 18px; color: var(--color-text-secondary); flex-shrink: 0; }
.offcanvas__link:hover { background: var(--color-bg-soft); color: var(--color-heading); }
.offcanvas__link.is-active { background: var(--tint-accent-10); color: var(--color-accent); font-weight: 600; }
.offcanvas__link.is-active svg { color: var(--color-accent); }

/* Etiqueta de sección */
.offcanvas__section-label {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-4) var(--space-4) var(--space-1);
  display: block;
}

/* Grupo acordeón */
.offcanvas__group { display: flex; flex-direction: column; }

.offcanvas__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--t-fast), color var(--t-fast);
}
.offcanvas__group-toggle:hover { background: var(--color-bg-soft); color: var(--color-heading); }
.offcanvas__group-toggle svg { width: 18px; height: 18px; color: var(--color-text-secondary); flex-shrink: 0; }

/* Flecha del acordeón */
.offcanvas__group-chevron {
  margin-left: auto;
  width: 16px; height: 16px;
  color: var(--color-text-secondary);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.offcanvas__group.is-open .offcanvas__group-chevron { transform: rotate(90deg); }
.offcanvas__group.is-open > .offcanvas__group-toggle { color: var(--color-accent); }
.offcanvas__group.is-open > .offcanvas__group-toggle svg:first-child { color: var(--color-accent); }

/* Sub-menú colapsable */
.offcanvas__submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base);
}
.offcanvas__group.is-open .offcanvas__submenu { max-height: 600px; }

.offcanvas__submenu li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.offcanvas__submenu li a:hover { background: var(--color-bg-soft); color: var(--color-accent); }
.offcanvas__submenu li a svg { width: 14px; height: 14px; }

/* Footer */
.offcanvas__footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.offcanvas__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.offcanvas__social-link {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.offcanvas__social-link:hover { background: var(--color-accent); color: #fff; }
.offcanvas__social-link svg { width: 16px; height: 16px; }

/* Dark variant */
.offcanvas--dark .offcanvas__panel { background: var(--color-primary); }
.offcanvas--dark .offcanvas__header { border-color: rgba(255,255,255,.08); }
.offcanvas--dark .offcanvas__wordmark { color: #fff; }
.offcanvas--dark .offcanvas__close { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.offcanvas--dark .offcanvas__close:hover { background: rgba(255,255,255,.16); color: #fff; }
.offcanvas--dark .offcanvas__search { border-color: rgba(255,255,255,.08); }
.offcanvas--dark .offcanvas__search-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff; }
.offcanvas--dark .offcanvas__search-input::placeholder { color: rgba(255,255,255,.35); }
.offcanvas--dark .offcanvas__search-input:focus { border-color: var(--color-accent); background: rgba(255,255,255,.1); }
.offcanvas--dark .offcanvas__search-icon { color: rgba(255,255,255,.4); }
.offcanvas--dark .offcanvas__section-label { color: rgba(255,255,255,.35); }
.offcanvas--dark .offcanvas__link { color: rgba(255,255,255,.72); }
.offcanvas--dark .offcanvas__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.offcanvas--dark .offcanvas__link.is-active { background: rgba(25,68,223,.35); color: #fff; }
.offcanvas--dark .offcanvas__link svg,
.offcanvas--dark .offcanvas__group-toggle svg { color: rgba(255,255,255,.4); }
.offcanvas--dark .offcanvas__group-toggle { color: rgba(255,255,255,.72); }
.offcanvas--dark .offcanvas__group-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.offcanvas--dark .offcanvas__group-chevron { color: rgba(255,255,255,.35); }
.offcanvas--dark .offcanvas__group.is-open > .offcanvas__group-toggle { color: rgba(255,255,255,.9); }
.offcanvas--dark .offcanvas__submenu li a { color: rgba(255,255,255,.55); }
.offcanvas--dark .offcanvas__submenu li a:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.offcanvas--dark .offcanvas__footer { border-color: rgba(255,255,255,.08); }
.offcanvas--dark .offcanvas__social-link { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.offcanvas--dark .offcanvas__social-link:hover { background: var(--color-accent); color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   C15 · PAGINATION
   ────────────────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
  user-select: none;
}
.page-item:hover { background: var(--color-bg-soft); color: var(--color-heading); }
.page-item.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 700; cursor: default; }
.page-item.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.page-item--prev, .page-item--next { gap: var(--space-1); padding: 0 var(--space-3); }
.page-item--ellipsis { cursor: default; letter-spacing: .1em; }
.page-item--ellipsis:hover { background: transparent; color: var(--color-text-secondary); }
.page-item svg { width: 16px; height: 16px; }

/* Variante outline */
.pagination--outline .page-item { border-color: var(--color-border-default); }
.pagination--outline .page-item:hover { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
.pagination--outline .page-item.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Variante pills */
.pagination--pills .page-item { border-radius: 40px; }

/* Variante minimal (solo prev/next) */
.pagination--minimal {
  gap: var(--space-3);
  align-items: center;
}
.pagination--minimal .page-info {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Centrado */
.pagination--center { justify-content: center; }
.pagination--end    { justify-content: flex-end; }

/* ──────────────────────────────────────────────────────────────────────────
   C16 · EMPTY STATE
   ────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
}
.empty-state--sm { padding: var(--space-10) var(--space-6); }
.empty-state--card {
  background: var(--color-bg-white);
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-8);
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}
.empty-state__icon svg { width: 36px; height: 36px; color: var(--color-text-secondary); }
.empty-state__icon--accent { background: var(--tint-accent-10); }
.empty-state__icon--accent svg { color: var(--color-accent); }

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}
.empty-state__text {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
  max-width: 380px;
}
.empty-state__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.empty-state__hint {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────────────────────
   C17 · 404 / ERROR PAGE
   ────────────────────────────────────────────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

.error-page__code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-border-default);
  margin: 0 0 var(--space-6);
  position: relative;
  z-index: 1;
  user-select: none;
}
.error-page__code--filled { -webkit-text-stroke: 0; color: var(--color-bg-soft); }
.error-page__code--accent { -webkit-text-stroke: 2px var(--color-accent); color: transparent; }

.error-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  position: relative;
  z-index: 1;
}
.error-page__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-8);
  max-width: 440px;
  position: relative;
  z-index: 1;
}
.error-page__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Blob de fondo decorativo */
.error-page__blob {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tint-accent-10) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   C18 · TRUST BADGES
   ────────────────────────────────────────────────────────────────────────── */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.trust-badges--center { justify-content: center; }
.trust-badges--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-default);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.trust-badge:hover { box-shadow: var(--shadow-hover); border-color: var(--color-accent); }

.trust-badge__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: var(--tint-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-badge__icon svg { width: 18px; height: 18px; color: var(--color-accent); }
.trust-badge__icon--green { background: rgba(5,150,105,.1); }
.trust-badge__icon--green svg { color: #059669; }

.trust-badge__label {
  display: block;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}
.trust-badge__sub {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* Badge vertical (apilado) */
.trust-badge--vertical {
  flex-direction: column;
  text-align: center;
  padding: var(--space-5);
}
.trust-badge--vertical .trust-badge__icon { width: 48px; height: 48px; margin-bottom: var(--space-2); }
.trust-badge--vertical .trust-badge__icon svg { width: 22px; height: 22px; }
.trust-badge--vertical .trust-badge__label { font-size: .875rem; }

/* Dark */
.trust-badge--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.trust-badge--dark .trust-badge__label { color: #fff; }
.trust-badge--dark .trust-badge__sub { color: rgba(255,255,255,.5); }
.trust-badge--dark .trust-badge__icon { background: rgba(255,255,255,.1); }
.trust-badge--dark .trust-badge__icon svg { color: rgba(255,255,255,.8); }
.trust-badge--dark:hover { border-color: rgba(255,255,255,.25); box-shadow: none; }

/* Stat badge (número grande) */
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-white);
  text-align: center;
}
.trust-stat__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-heading);
  line-height: 1;
  letter-spacing: -.03em;
}
.trust-stat__label {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ──────────────────────────────────────────────────────────────────────────
   C14 · COOKIE BANNER
   ────────────────────────────────────────────────────────────────────────── */

/* Banner inferior (default) */
.cookie-banner {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-10));
  max-width: 860px;
  z-index: calc(var(--z-modal) - 2);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 48px rgba(2,22,35,.16);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  animation: slideUpBanner var(--t-base) cubic-bezier(.34,1.36,.64,1);
}
.cookie-banner.is-hidden { display: none; }

@keyframes slideUpBanner {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cookie-banner__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}
.cookie-banner__content { flex: 1; }
.cookie-banner__title {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.cookie-banner__text {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.cookie-banner__text a { color: var(--color-accent); text-decoration: none; }
.cookie-banner__text a:hover { text-decoration: underline; }

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Variante full-width bottom bar */
.cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: calc(var(--z-modal) - 2);
  background: var(--color-primary);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: 0 -8px 32px rgba(2,22,35,.22);
}
.cookie-bar.is-hidden { display: none; }
.cookie-bar__text {
  flex: 1;
  font-family: var(--font-body);
  font-size: .875rem;
  color: rgba(255,255,255,.7);
}
.cookie-bar__text a { color: rgba(255,255,255,.9); }
.cookie-bar__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Variante modal de preferencias */
.cookie-prefs__group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.cookie-prefs__group:last-child { border-bottom: none; }
.cookie-prefs__info { flex: 1; }
.cookie-prefs__name {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.cookie-prefs__desc {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Toggle switch */
.cookie-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--color-border-default);
  border-radius: 24px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.cookie-toggle__slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cookie-toggle input:checked + .cookie-toggle__slider { background: var(--color-accent); }
.cookie-toggle input:checked + .cookie-toggle__slider::before { transform: translateX(20px); }
.cookie-toggle input:disabled + .cookie-toggle__slider { opacity: .6; cursor: not-allowed; }

@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; width: calc(100% - var(--space-6)); }
  .cookie-banner__actions { width: 100%; }
  .cookie-bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ──────────────────────────────────────────────────────────────────────────
   C13 · MODAL / DRAWER
   ────────────────────────────────────────────────────────────────────────── */

/* Backdrop */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(2,22,35,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn var(--t-base) ease;
}
.modal-backdrop.is-open { display: block; }

/* Modal dialog */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.modal.is-open { display: flex; }

.modal__dialog {
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(2,22,35,.22);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp var(--t-base) cubic-bezier(.34,1.36,.64,1);
}
.modal__dialog--sm  { max-width: 420px; }
.modal__dialog--lg  { max-width: 780px; }
.modal__dialog--xl  { max-width: 1040px; }
.modal__dialog--full { max-width: calc(100vw - var(--space-10)); max-height: calc(100vh - var(--space-10)); }

/* Header */
.modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) 0;
  flex-shrink: 0;
}
.modal__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--tint-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal__icon svg { width: 20px; height: 20px; color: var(--color-accent); }
.modal__icon--danger { background: rgba(239,68,68,.1); }
.modal__icon--danger svg { color: #ef4444; }

.modal__header-text { flex: 1; }
.modal__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.modal__subtitle {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  margin-left: auto;
}
.modal__close:hover { background: var(--color-border-default); color: var(--color-heading); }
.modal__close svg { width: 16px; height: 16px; }

/* Body */
.modal__body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* Footer */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-6);
  flex-shrink: 0;
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}
.modal__footer--start { justify-content: flex-start; }
.modal__footer--between { justify-content: space-between; }

/* Divider dentro del modal */
.modal__divider { border: none; border-top: 1px solid var(--color-border-default); margin: var(--space-4) 0; }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}
.drawer.is-open { display: block; }

.drawer__panel {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-white);
  box-shadow: -12px 0 48px rgba(2,22,35,.16);
  display: flex;
  flex-direction: column;
  animation: slideInRight var(--t-base) cubic-bezier(.34,1.36,.64,1);
}
.drawer--left .drawer__panel {
  left: 0; right: auto;
  box-shadow: 12px 0 48px rgba(2,22,35,.16);
  animation: slideInLeft var(--t-base) cubic-bezier(.34,1.36,.64,1);
}

.drawer__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.drawer__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  flex: 1;
}
.drawer__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}
.drawer__footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Animaciones */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 576px) {
  .modal__dialog { max-width: 100%; }
  .drawer__panel { max-width: 90vw; }
}

/* ──────────────────────────────────────────────────────────────────────────
   C10 · GALLERY / PORTFOLIO FILTER
   ────────────────────────────────────────────────────────────────────────── */

/* Filtros */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: 40px;
  border: 1.5px solid var(--color-border-default);
  background: transparent;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.gallery-filter:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.gallery-filter.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.gallery-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}
.gallery-filter:not(.is-active) .gallery-filter__count {
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
}

/* Grid de proyectos */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Item */
.gallery-item {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: opacity var(--t-base), transform var(--t-base);
}
.gallery-item.is-hidden { display: none; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Overlay con info */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,22,35,.88) 0%, rgba(2,22,35,.2) 60%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }

.gallery-item__category {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.gallery-item__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-2);
}
.gallery-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--t-fast);
}
.gallery-item__link svg { width: 14px; height: 14px; }
.gallery-item__link:hover { color: #fff; }

/* Badge de categoría siempre visible */
.gallery-item__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

/* Variante masonry (solo visual, columnas CSS) */
.gallery-masonry {
  columns: 3;
  column-gap: var(--space-5);
}
.gallery-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}
.gallery-masonry .gallery-item img { aspect-ratio: auto; }

@media (max-width: 992px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }
}
@media (max-width: 576px) {
  .gallery-grid, .gallery-grid--2, .gallery-grid--4 { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   C9 · VIDEO SECTION
   ────────────────────────────────────────────────────────────────────────── */

/* Video embed responsive (YouTube / Vimeo / iframe) */
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-primary);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video thumbnail con play button */
.video-thumb {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.video-thumb img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.video-thumb:hover img { transform: scale(1.04); }

/* Overlay */
.video-thumb__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(2,22,35,.7));
  transition: background var(--t-base);
}
.video-thumb:hover .video-thumb__overlay { background: linear-gradient(to bottom, transparent 20%, rgba(2,22,35,.55)); }

/* Play button */
.video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-base), box-shadow var(--t-base);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.video-thumb:hover .video-thumb__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.video-thumb__play svg { width: 28px; height: 28px; color: var(--color-accent); margin-left: 4px; }

/* Variante pill play */
.video-thumb__play--pill {
  border-radius: 40px;
  width: auto;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-accent);
}
.video-thumb__play--pill svg { width: 18px; height: 18px; margin-left: 0; }

/* Caption */
.video-thumb__caption {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: var(--space-5) var(--space-6);
}
.video-thumb__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-1);
}
.video-thumb__meta {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
}

/* Variante accent ring (acento eléctrico en borde del play) */
.video-thumb__play--accent {
  background: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(25,68,223,.25), 0 8px 32px rgba(25,68,223,.4);
}
.video-thumb__play--accent svg { color: #fff; margin-left: 4px; }
.video-thumb:hover .video-thumb__play--accent { box-shadow: 0 0 0 10px rgba(25,68,223,.18), 0 12px 40px rgba(25,68,223,.5); }

/* Modal lightbox (simple, no JS lib) */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(2,22,35,.92);
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.video-modal.is-open { display: flex; }
.video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 900px;
}
.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--t-fast);
}
.video-modal__close:hover { background: rgba(255,255,255,.22); }
.video-modal__close svg { width: 18px; height: 18px; }

/* ──────────────────────────────────────────────────────────────────────────
   C8 · CLIENT LOGOS GRID
   ────────────────────────────────────────────────────────────────────────── */
.logos-section__label {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-8);
}

/* Grid estática */
.logos-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  filter: grayscale(1) opacity(.5);
  transition: filter var(--t-base);
}
.logo-item:hover { filter: grayscale(0) opacity(1); }
.logo-item img, .logo-item svg { max-height: 36px; max-width: 120px; width: auto; display: block; }

/* Variante con borde */
.logos-grid--bordered .logo-item {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
}
.logos-grid--bordered .logo-item:hover { box-shadow: var(--shadow-hover); }

/* Grid columnas fijas */
.logos-grid--cols-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-border-default); }
.logos-grid--cols-5 .logo-item { background: var(--color-bg-white); margin: 0; border-radius: 0; }
.logos-grid--cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Marquee / infinite scroll */
.logos-marquee { overflow: hidden; position: relative; }
.logos-marquee::before,
.logos-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
}
.logos-marquee::before { left: 0;  background: linear-gradient(to right, var(--color-bg-main), transparent); }
.logos-marquee::after  { right: 0; background: linear-gradient(to left,  var(--color-bg-main), transparent); }

.logos-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  animation: marquee 28s linear infinite;
}
.logos-marquee:hover .logos-marquee__track { animation-play-state: paused; }
.logos-marquee--reverse .logos-marquee__track { animation-direction: reverse; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos-marquee .logo-item {
  padding: var(--space-2) var(--space-6);
  flex-shrink: 0;
}

/* Logo placeholder (texto) */
.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 100px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-heading);
  user-select: none;
}

/* Dark logos */
.logos-marquee--dark::before { background: linear-gradient(to right, var(--color-primary), transparent); }
.logos-marquee--dark::after  { background: linear-gradient(to left, var(--color-primary), transparent); }
.logos-marquee--dark .logo-item { filter: grayscale(1) invert(1) opacity(.45); }
.logos-marquee--dark .logo-item:hover { filter: grayscale(0) invert(1) opacity(.9); }

@media (max-width: 768px) {
  .logos-grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .logos-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────────────
   C7 · TIMELINE
   ────────────────────────────────────────────────────────────────────────── */

/* ── Vertical (default) ───────────────────────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 48px;
}
/* Línea central */
.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border-default);
}

.timeline-item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: var(--space-10);
}
.timeline-item:last-child { padding-bottom: 0; }

/* Marcador */
.timeline-item__marker {
  position: absolute;
  left: -48px;
  top: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  z-index: 1;
  transition: all var(--t-base);
}
.timeline-item__marker svg { width: 16px; height: 16px; }
.timeline-item.is-active .timeline-item__marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 5px var(--tint-accent-14);
}
.timeline-item.is-done .timeline-item__marker {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

/* Contenido */
.timeline-item__date {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.timeline-item.is-active .timeline-item__date { color: var(--color-accent); }

.timeline-item__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
.timeline-item__body {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
}
.timeline-item__tags { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Card contenedor opcional */
.timeline-item__card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base);
}
.timeline-item:hover .timeline-item__card { box-shadow: var(--shadow-hover); }

/* ── Variante horizontal ──────────────────────────────────────────────────── */
.timeline--horizontal {
  flex-direction: row;
  padding-left: 0;
  padding-top: 48px;
  align-items: flex-start;
  overflow-x: auto;
  gap: 0;
}
.timeline--horizontal::before {
  left: 0; right: 0;
  top: 19px;
  bottom: auto;
  width: auto;
  height: 2px;
}
.timeline--horizontal .timeline-item {
  flex: 1;
  min-width: 200px;
  padding-bottom: 0;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  padding-top: var(--space-10);
}
.timeline--horizontal .timeline-item__marker {
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
}

/* ── Dark ─────────────────────────────────────────────────────────────────── */
.timeline--dark::before { background: rgba(255,255,255,.12); }
.timeline--dark .timeline-item__marker {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.5);
}
.timeline--dark .timeline-item__date  { color: rgba(255,255,255,.45); }
.timeline--dark .timeline-item__title { color: #fff; }
.timeline--dark .timeline-item__body  { color: rgba(255,255,255,.65); }
.timeline--dark .timeline-item.is-active .timeline-item__marker { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.timeline--dark .timeline-item.is-active .timeline-item__date   { color: rgba(255,255,255,.7); }
.timeline--dark .timeline-item__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); box-shadow: none; }

/* ──────────────────────────────────────────────────────────────────────────
   C6 · COMPARISON TABLE
   ────────────────────────────────────────────────────────────────────────── */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: .9375rem;
}

/* Cabecera de plan */
.compare-table__head th {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border-default);
}
.compare-table__head th:first-child { text-align: left; }

.compare-plan-name {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-heading);
  display: block;
  margin-bottom: var(--space-1);
}
.compare-plan-price {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -.02em;
  line-height: 1;
}
.compare-plan-price sup { font-size: .875rem; vertical-align: top; margin-top: 4px; }
.compare-plan-price span { font-size: .8125rem; font-weight: 400; color: var(--color-text-secondary); }

/* Columna destacada */
.compare-table__head th.is-featured {
  background: var(--tint-accent-10);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.compare-table__head th.is-featured .compare-plan-name { color: var(--color-accent); }
.compare-table__head th.is-featured .compare-plan-price { color: var(--color-accent); }

/* Sección de grupo */
.compare-table__group td,
.compare-table__group th {
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-soft);
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-default);
}

/* Filas de features */
.compare-table tbody tr:not(.compare-table__group) td,
.compare-table tbody tr:not(.compare-table__group) th {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  text-align: center;
  vertical-align: middle;
}
.compare-table tbody tr:not(.compare-table__group) th { text-align: left; font-weight: 500; }
.compare-table tbody tr:not(.compare-table__group):hover td,
.compare-table tbody tr:not(.compare-table__group):hover th { background: var(--color-bg-soft); }

.compare-table .is-featured { background: rgba(25,68,223,.04); }
.compare-table tbody tr:hover .is-featured { background: rgba(25,68,223,.07); }

/* Íconos check / cross */
.compare-check { color: #059669; display: flex; align-items: center; justify-content: center; }
.compare-cross  { color: #d1d5db; display: flex; align-items: center; justify-content: center; }
.compare-check svg, .compare-cross svg { width: 18px; height: 18px; }

/* Fila de CTA al pie */
.compare-table__cta td {
  padding: var(--space-5);
  border-top: 2px solid var(--color-border-default);
  text-align: center;
}
.compare-table__cta td.is-featured { background: rgba(25,68,223,.04); }

/* Feature label con tooltip */
.compare-feature-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   C5 · TABS
   ────────────────────────────────────────────────────────────────────────── */
.tabs { display: flex; flex-direction: column; }

/* ── Tab Nav ──────────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
}
.tab-nav__item:hover { color: var(--color-heading); }
.tab-nav__item.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}
.tab-nav__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.tab-nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--tint-accent-14);
  color: var(--color-accent);
  font-size: .625rem;
  font-weight: 700;
}
.tab-nav__item.is-active .tab-nav__badge {
  background: var(--color-accent);
  color: #fff;
}

/* Tab panels */
.tab-panel { display: none; padding-top: var(--space-6); }
.tab-panel.is-active { display: block; }

/* ── Variante: pills ──────────────────────────────────────────────────────── */
.tab-nav--pills {
  border-bottom: none;
  gap: var(--space-2);
  background: var(--color-bg-soft);
  border-radius: var(--radius-card);
  padding: var(--space-2);
  width: fit-content;
}
.tab-nav--pills .tab-nav__item {
  border-radius: 10px;
  border-bottom: none;
  margin-bottom: 0;
  padding: var(--space-2) var(--space-4);
  font-size: .875rem;
}
.tab-nav--pills .tab-nav__item.is-active {
  background: var(--color-bg-white);
  color: var(--color-heading);
  box-shadow: var(--shadow-card);
}

/* ── Variante: buttons ────────────────────────────────────────────────────── */
.tab-nav--buttons {
  border-bottom: none;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tab-nav--buttons .tab-nav__item {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-5);
  font-size: .875rem;
}
.tab-nav--buttons .tab-nav__item.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.tab-nav--buttons .tab-nav__item.is-active .tab-nav__badge {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* ── Variante: vertical ───────────────────────────────────────────────────── */
.tabs--vertical { flex-direction: row; gap: var(--space-8); align-items: flex-start; }
.tab-nav--vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border-default);
  gap: 0;
  min-width: 200px;
  flex-shrink: 0;
}
.tab-nav--vertical .tab-nav__item {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  text-align: left;
  width: 100%;
}
.tab-nav--vertical .tab-nav__item.is-active {
  border-right-color: var(--color-accent);
  border-bottom-color: transparent;
}
.tabs--vertical .tab-panel { padding-top: 0; flex: 1; }

/* ── Dark ─────────────────────────────────────────────────────────────────── */
.tab-nav--dark { border-bottom-color: rgba(255,255,255,.12); }
.tab-nav--dark .tab-nav__item { color: rgba(255,255,255,.45); }
.tab-nav--dark .tab-nav__item:hover { color: rgba(255,255,255,.8); }
.tab-nav--dark .tab-nav__item.is-active { color: #fff; border-bottom-color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   C4 · TEAM SECTION
   ────────────────────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* ── Member card (default: centrada) ─────────────────────────────────────── */
.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
  gap: var(--space-3);
}
.member-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.member-card__photo-wrap {
  position: relative;
  margin-bottom: var(--space-2);
}
.member-card__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--tint-accent-14);
  display: block;
}
/* Overlay con socials al hover */
.member-card__socials-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(25,68,223,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.member-card:hover .member-card__socials-overlay { opacity: 1; }
.member-card__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  transition: background var(--t-fast);
  text-decoration: none;
}
.member-card__social-btn:hover { background: rgba(255,255,255,.35); }
.member-card__social-btn svg   { width: 14px; height: 14px; }

.member-card__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}
.member-card__role {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: .02em;
}
.member-card__bio {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text-primary);
  line-height: 1.55;
  margin: 0;
}
.member-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-1);
}

/* ── Variante horizontal (foto izquierda + info derecha) ─────────────────── */
.member-card--horizontal {
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
}
.member-card--horizontal .member-card__photo { width: 72px; height: 72px; flex-shrink: 0; }
.member-card--horizontal .member-card__body  { flex: 1; }
.member-card--horizontal .member-card__tags  { justify-content: flex-start; }

/* ── Variante cover (imagen de fondo, texto encima) ──────────────────────── */
.member-card--cover {
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  aspect-ratio: 3/4;
  align-items: flex-start;
  text-align: left;
  background: var(--color-primary);
}
.member-card--cover .member-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.member-card--cover:hover .member-card__bg { transform: scale(1.05); }
.member-card--cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,22,35,.88) 0%, transparent 55%);
}
.member-card--cover .member-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-6);
  z-index: 1;
}
.member-card--cover .member-card__name { color: #fff; }
.member-card--cover .member-card__role { color: rgba(255,255,255,.65); }
.member-card--cover .member-card__socials-overlay {
  border-radius: 0;
  inset: auto;
  position: relative;
  display: flex;
  opacity: 1;
  background: none;
  justify-content: flex-start;
  margin-top: var(--space-3);
}

/* ── Dark ─────────────────────────────────────────────────────────────────── */
.member-card--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.member-card--dark:hover { background: rgba(255,255,255,.10); }
.member-card--dark .member-card__name { color: #fff; }
.member-card--dark .member-card__bio  { color: rgba(255,255,255,.6); }

/* ──────────────────────────────────────────────────────────────────────────
   C3 · BLOG / POST CARDS
   ────────────────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
/* Grid editorial: 1 card grande + 2 pequeñas */
.blog-grid--editorial {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}
.blog-grid--editorial .post-card:first-child {
  grid-row: span 2;
}
@media (max-width: 767px) {
  .blog-grid--editorial { grid-template-columns: 1fr; }
  .blog-grid--editorial .post-card:first-child { grid-row: span 1; }
}

/* ── Post Card ────────────────────────────────────────────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.post-card__img-wrap {
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  flex-shrink: 0;
}
.post-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card__img-wrap img { transform: scale(1.04); }

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.post-card__cat {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.post-card__date {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--color-text-secondary);
}
.post-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.35;
  margin: 0;
  transition: color var(--t-fast);
}
.post-card:hover .post-card__title { color: var(--color-accent); }
.post-card__excerpt {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}
.post-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
}
.post-card__author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.post-card__read {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Variante horizontal ──────────────────────────────────────────────────── */
.post-card--horizontal {
  flex-direction: row;
}
.post-card--horizontal .post-card__img-wrap {
  width: 200px;
  aspect-ratio: auto;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .post-card--horizontal { flex-direction: column; }
  .post-card--horizontal .post-card__img-wrap { width: 100%; aspect-ratio: 16/9; }
}

/* ── Variante minimal (sin imagen) ───────────────────────────────────────── */
.post-card--minimal {
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* ── Featured post (card grande hero-style) ──────────────────────────────── */
.post-card--featured .post-card__img-wrap { aspect-ratio: 4/3; }
.post-card--featured .post-card__title    { font-size: 1.375rem; }
.post-card--featured .post-card__excerpt  { -webkit-line-clamp: 4; line-clamp: 4; }

/* ──────────────────────────────────────────────────────────────────────────
   C2 · PROCESS / HOW IT WORKS
   ────────────────────────────────────────────────────────────────────────── */

/* ── Variante horizontal (pasos en fila) ──────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  position: relative;
}
/* Línea conectora decorativa entre tarjetas */
.process-grid--connected {
  column-gap: 0;
}
.process-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  position: relative;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.process-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* Número fantasma de fondo */
.process-card__num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 800;
  color: var(--tint-accent-10);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
}
.process-card__icon { flex-shrink: 0; }
.process-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}
.process-card__text {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
}
/* Flecha entre cards en el grid conectado */
.process-card__arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--space-5));
  transform: translateY(-50%);
  width: var(--space-10);
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  z-index: 1;
}
@media (min-width: 768px) {
  .process-grid--connected .process-card { border-radius: 0; border-right-width: 0; }
  .process-grid--connected .process-card:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
  .process-grid--connected .process-card:last-child  { border-right-width: 1px; border-radius: 0 var(--radius-card) var(--radius-card) 0; }
}

/* ── Variante: alternada (zigzag) ─────────────────────────────────────────── */
.process-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  position: relative;
}
/* Línea vertical central */
.process-list::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border-default);
  transform: translateX(-50%);
}
.process-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: center;
}
.process-row__content {
  padding: var(--space-6);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.process-row__content-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}
.process-row__content-text {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
}
.process-row__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .9375rem;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--tint-accent-10);
}
/* Lado derecho: voltea el orden visual */
.process-row--right .process-row__content { order: 3; }
.process-row--right .process-row__spacer  { order: 1; }

/* Dark */
.process-card--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.process-card--dark:hover { background: rgba(255,255,255,.10); box-shadow: none; transform: none; }
.process-card--dark .process-card__title { color: #fff; }
.process-card--dark .process-card__text  { color: rgba(255,255,255,.65); }
.process-card--dark .process-card__num   { color: rgba(255,255,255,.06); }

@media (max-width: 767px) {
  .process-list::before { left: 24px; }
  .process-row { grid-template-columns: auto 1fr; }
  .process-row__spacer  { display: none; }
  .process-row--right .process-row__content { order: unset; }
  .process-row--right .process-row__spacer  { order: unset; }
}

/* ──────────────────────────────────────────────────────────────────────────
   C1 · STATS COUNTER SECTION
   ────────────────────────────────────────────────────────────────────────── */
.stats-section {
  padding: var(--space-20) 0;
}

/* ── Grid de estadísticas ─────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-8);
  background: var(--color-bg-white);
  gap: var(--space-2);
  transition: background var(--t-fast);
}
.stat-item:hover { background: var(--color-bg-soft); }

.stat-item__value {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -.03em;
  line-height: 1;
}
.stat-item__value .accent { color: var(--color-accent); }
.stat-item__label {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.stat-item__sub {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
  opacity: .7;
}

/* ── Variante: dark (sobre fondo navy) ─────────────────────────────────────  */
.stats-grid--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.stats-grid--dark .stat-item {
  background: transparent;
}
.stats-grid--dark .stat-item:hover { background: rgba(255,255,255,.04); }
.stats-grid--dark .stat-item__value { color: #fff; }
.stats-grid--dark .stat-item__label { color: rgba(255,255,255,.55); }
.stats-grid--dark .stat-item__sub   { color: rgba(255,255,255,.35); }

/* ── Variante: cards (cada stat en su propia card) ─────────────────────────  */
.stats-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  background: none;
  border: none;
}
.stats-grid--cards .stat-item {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
  align-items: flex-start;
  text-align: left;
}
.stats-grid--cards .stat-item:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  transition: box-shadow var(--t-base), transform var(--t-base);
}

/* ── Variante: con ícono lateral ───────────────────────────────────────────  */
.stat-item--icon {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  text-align: left;
}
.stat-item__icon-wrap {
  flex-shrink: 0;
}
.stat-item__body { display: flex; flex-direction: column; gap: 4px; }

/* ── Ticker: icono de tendencia ────────────────────────────────────────────  */
.stat-item__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-1);
}
.stat-item__trend--up   { background: rgba(5,150,105,.10); color: #059669; }
.stat-item__trend--down { background: rgba(225,29,72,.08); color: #e11d48; }
.stat-item__trend svg   { width: 12px; height: 12px; }

/* ──────────────────────────────────────────────────────────────────────────
   E8 · PROGRESS BARS
   ────────────────────────────────────────────────────────────────────────── */

/* ── Barra base ───────────────────────────────────────────────────────────── */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.progress__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.progress__label {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-heading);
}
.progress__value {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.progress__track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border-default);
  overflow: hidden;
  position: relative;
}
.progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width .6s var(--ease);
  position: relative;
}

/* Tamaños */
.progress--xs .progress__track { height: 4px; }
.progress--sm .progress__track { height: 6px; }
.progress--lg .progress__track { height: 12px; }
.progress--xl .progress__track { height: 18px; }

/* Colores del fill */
.progress--success .progress__fill { background: #059669; }
.progress--warning .progress__fill { background: #d97706; }
.progress--error   .progress__fill { background: #e11d48; }
.progress--primary .progress__fill { background: var(--color-primary); }

/* Gradiente */
.progress--gradient .progress__fill {
  background: linear-gradient(90deg, var(--color-accent), #0024a6);
}

/* Striped animado */
.progress--striped .progress__fill {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.12) 0px,
    rgba(255,255,255,.12) 8px,
    transparent 8px,
    transparent 16px
  );
  background-color: var(--color-accent);
}
.progress--animated .progress__fill {
  background-size: 32px 32px;
  animation: progressStripes .6s linear infinite;
}

/* Indeterminate */
.progress--indeterminate .progress__fill {
  width: 40% !important;
  animation: progressIndeterminate 1.4s ease-in-out infinite;
}

/* Con marca de valor dentro de la barra */
.progress--xl .progress__fill::after {
  content: attr(data-value);
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* Dark */
.progress--dark .progress__track { background: rgba(255,255,255,.12); }
.progress--dark .progress__label { color: #fff; }
.progress--dark .progress__value { color: rgba(255,255,255,.55); }

/* ── Circular progress ────────────────────────────────────────────────────── */
.progress-circle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  position: relative;
}
.progress-circle__svg { transform: rotate(-90deg); }
.progress-circle__bg  { fill: none; stroke: var(--color-border-default); }
.progress-circle__arc {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset .7s var(--ease);
}
.progress-circle__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-heading);
  text-align: center;
  line-height: 1.1;
}
.progress-circle__label span {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.progress-circle__name {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes progressStripes {
  from { background-position: 32px 0; }
  to   { background-position: 0 0; }
}
@keyframes progressIndeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress--animated .progress__fill,
  .progress--indeterminate .progress__fill { animation: none; }
  .progress-circle__arc { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   E7 · LOADERS / SPINNERS
   ────────────────────────────────────────────────────────────────────────── */

/* ── Spinner circular ─────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--tint-accent-14);
  border-top-color: var(--color-accent);
  animation: spinnerRotate .7s linear infinite;
  flex-shrink: 0;
}
/* Tamaños */
.spinner--xs  { width: 16px; height: 16px; border-width: 2px; }
.spinner--sm  { width: 24px; height: 24px; border-width: 2px; }
.spinner--lg  { width: 48px; height: 48px; border-width: 4px; }
.spinner--xl  { width: 64px; height: 64px; border-width: 5px; }

/* Colores */
.spinner--white {
  border-color: rgba(255,255,255,.22);
  border-top-color: #fff;
}
.spinner--primary {
  border-color: rgba(2,22,35,.10);
  border-top-color: var(--color-primary);
}
.spinner--success {
  border-color: rgba(5,150,105,.12);
  border-top-color: #059669;
}

/* ── Dots (tres puntos pulsantes) ─────────────────────────────────────────── */
.dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: dotsPulse 1.2s ease-in-out infinite;
}
.dots__dot:nth-child(2) { animation-delay: .18s; }
.dots__dot:nth-child(3) { animation-delay: .36s; }

.dots--sm .dots__dot { width: 6px; height: 6px; gap: 4px; }
.dots--lg .dots__dot { width: 11px; height: 11px; }
.dots--white .dots__dot { background: rgba(255,255,255,.8); }
.dots--primary .dots__dot { background: var(--color-primary); }

/* ── Skeleton (placeholder de contenido) ─────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-border-default) 25%, rgba(2,22,35,.03) 50%, var(--color-border-default) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 6px;
  display: block;
}
.skeleton--text  { height: 14px; border-radius: 4px; }
.skeleton--title { height: 24px; border-radius: 6px; }
.skeleton--avatar { border-radius: 50%; }
.skeleton--card  { border-radius: var(--radius-card); }

/* ── Overlay de página / sección ─────────────────────────────────────────── */
.loader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(245,245,245,.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border-radius: inherit;
  z-index: 50;
}
.loader-overlay--dark {
  background: rgba(2,22,35,.65);
}
.loader-overlay__label {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.loader-overlay--dark .loader-overlay__label { color: rgba(255,255,255,.6); }

/* ── Botón con spinner inline ─────────────────────────────────────────────── */
.btn.is-loading {
  pointer-events: none;
  opacity: .75;
  position: relative;
}
.btn.is-loading .btn__text  { opacity: 0; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: spinnerRotate .65s linear infinite;
}
.btn-outline.is-loading::after {
  border-color: var(--tint-accent-14);
  border-top-color: var(--color-accent);
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}
@keyframes dotsPulse {
  0%, 80%, 100% { transform: scale(.6); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1; }
}
@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .dots__dot, .skeleton, .btn.is-loading::after { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   E6 · TOOLTIPS
   ────────────────────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: default;
}
[data-tooltip]::before,
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
/* Burbuja */
[data-tooltip]::before {
  content: attr(data-tooltip);
  z-index: calc(var(--z-float) + 20);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(2,22,35,.22);
  max-width: 220px;
  white-space: normal;
  text-align: center;
}
/* Flecha */
[data-tooltip]::after {
  content: '';
  z-index: calc(var(--z-float) + 19);
  border: 5px solid transparent;
}

/* ── Posición: top (default) ─────────────────────────────────────────────── */
[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip][data-tooltip-pos="top"]::before {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-pos="top"]::after {
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-top-color: var(--color-primary);
}
[data-tooltip]:not([data-tooltip-pos]):hover::before,
[data-tooltip][data-tooltip-pos="top"]:hover::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-tooltip]:not([data-tooltip-pos]):hover::after,
[data-tooltip][data-tooltip-pos="top"]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Posición: bottom ────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="bottom"]::before {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border-bottom-color: var(--color-primary);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Posición: left ──────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="left"]::before {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip][data-tooltip-pos="left"]::after {
  right: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  border-left-color: var(--color-primary);
}
[data-tooltip][data-tooltip-pos="left"]:hover::before {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ── Posición: right ─────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="right"]::before {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
[data-tooltip][data-tooltip-pos="right"]::after {
  left: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border-right-color: var(--color-primary);
}
[data-tooltip][data-tooltip-pos="right"]:hover::before {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
[data-tooltip][data-tooltip-pos="right"]:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ── Variante accent (azul) ──────────────────────────────────────────────── */
[data-tooltip][data-tooltip-theme="accent"]::before { background: var(--color-accent); }
[data-tooltip][data-tooltip-theme="accent"]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-theme="accent"][data-tooltip-pos="top"]::after    { border-top-color: var(--color-accent); }
[data-tooltip][data-tooltip-theme="accent"][data-tooltip-pos="bottom"]::after { border-bottom-color: var(--color-accent); }
[data-tooltip][data-tooltip-theme="accent"][data-tooltip-pos="left"]::after   { border-left-color: var(--color-accent); }
[data-tooltip][data-tooltip-theme="accent"][data-tooltip-pos="right"]::after  { border-right-color: var(--color-accent); }

/* ── Variante light ──────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-theme="light"]::before {
  background: var(--color-bg-white);
  color: var(--color-heading);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}
[data-tooltip][data-tooltip-theme="light"]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-theme="light"][data-tooltip-pos="top"]::after    { border-top-color: var(--color-bg-white); }
[data-tooltip][data-tooltip-theme="light"][data-tooltip-pos="bottom"]::after { border-bottom-color: var(--color-bg-white); }
[data-tooltip][data-tooltip-theme="light"][data-tooltip-pos="left"]::after   { border-left-color: var(--color-bg-white); }
[data-tooltip][data-tooltip-theme="light"][data-tooltip-pos="right"]::after  { border-right-color: var(--color-bg-white); }

/* ──────────────────────────────────────────────────────────────────────────
   E5 · CHIPS / TAGS
   ────────────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-white);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--tint-accent-10);
}
.chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Botón de cierre (removible) */
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.10);
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  flex-shrink: 0;
  transition: background var(--t-fast);
  margin-left: 2px;
}
.chip__remove:hover { background: rgba(0,0,0,.20); }
.chip__remove svg  { width: 10px; height: 10px; }
.chip.is-active .chip__remove { background: rgba(255,255,255,.22); }
.chip.is-active .chip__remove:hover { background: rgba(255,255,255,.35); }

/* Dot decorativo */
.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: .65;
}

/* Tamaños */
.chip--sm { padding: 3px var(--space-3); font-size: .75rem; }
.chip--sm svg { width: 12px; height: 12px; }
.chip--lg { padding: 8px var(--space-5); font-size: .9375rem; }

/* Variantes de color */
.chip--accent  { border-color: rgba(25,68,223,.28);  color: var(--color-accent);  background: var(--tint-accent-10); }
.chip--accent.is-active { background: var(--color-accent); color: #fff; }
.chip--success { border-color: rgba(5,150,105,.28);  color: #059669; background: rgba(5,150,105,.07); }
.chip--success.is-active { background: #059669; border-color: #059669; color: #fff; }
.chip--warning { border-color: rgba(217,119,6,.28);  color: #d97706; background: rgba(217,119,6,.07); }
.chip--warning.is-active { background: #d97706; border-color: #d97706; color: #fff; }
.chip--error   { border-color: rgba(225,29,72,.28);  color: #e11d48; background: rgba(225,29,72,.07); }
.chip--error.is-active   { background: #e11d48; border-color: #e11d48; color: #fff; }

/* Dark */
.chip--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.7);
}
.chip--dark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.chip--dark.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Grupo de chips */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   E4 · AVATAR STACK
   ────────────────────────────────────────────────────────────────────────── */

/* ── Avatar individual ─────────────────────────────────────────────────────  */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tint-accent-14);
  border: 2px solid var(--color-bg-white);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tamaños */
.avatar--xs  { width: 24px; height: 24px; font-size: .625rem; border-width: 1.5px; }
.avatar--sm  { width: 32px; height: 32px; font-size: .6875rem; }
.avatar--md  { width: 40px; height: 40px; font-size: .8125rem; }   /* default */
.avatar--lg  { width: 56px; height: 56px; font-size: 1rem; border-width: 3px; }
.avatar--xl  { width: 72px; height: 72px; font-size: 1.25rem; border-width: 3px; }
.avatar--2xl { width: 96px; height: 96px; font-size: 1.5rem;  border-width: 4px; }

/* Colores de iniciales */
.avatar--accent  { background: var(--tint-accent-14);          color: var(--color-accent); }
.avatar--primary { background: rgba(2,22,35,.10);               color: var(--color-primary); }
.avatar--success { background: rgba(5,150,105,.10);             color: #059669; }
.avatar--warning { background: rgba(217,119,6,.10);             color: #d97706; }
.avatar--error   { background: rgba(225,29,72,.10);             color: #e11d48; }

/* Indicador de estado */
.avatar__status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-white);
}
.avatar--xs  .avatar__status { width: 7px;  height: 7px; }
.avatar--sm  .avatar__status { width: 8px;  height: 8px; }
.avatar--lg  .avatar__status { width: 13px; height: 13px; bottom: 2px; right: 2px; }
.avatar--xl  .avatar__status { width: 16px; height: 16px; bottom: 3px; right: 3px; }

.avatar__status--online  { background: #22c55e; }
.avatar__status--away    { background: #f59e0b; }
.avatar__status--busy    { background: #ef4444; }
.avatar__status--offline { background: #9ca3af; }

/* ── Avatar Stack ─────────────────────────────────────────────────────────── */
.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack .avatar {
  margin-left: -10px;
  transition: transform var(--t-fast), z-index 0s;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar:hover { transform: translateY(-3px); z-index: 10; }

/* Tamaños del stack */
.avatar-stack--sm .avatar  { margin-left: -8px; }
.avatar-stack--lg .avatar  { margin-left: -14px; }
.avatar-stack--xl .avatar  { margin-left: -18px; }

/* Contador "+N" */
.avatar-stack__count {
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-bg-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .6875rem;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.avatar-stack--sm .avatar-stack__count { width: 32px; height: 32px; font-size: .625rem;  margin-left: -8px; }
.avatar-stack--lg .avatar-stack__count { width: 56px; height: 56px; font-size: .875rem;  margin-left: -14px; border-width: 3px; }
.avatar-stack--xl .avatar-stack__count { width: 72px; height: 72px; font-size: 1rem;     margin-left: -18px; border-width: 3px; }

/* Orientación inversa (último encima) */
.avatar-stack--reverse { flex-direction: row-reverse; }
.avatar-stack--reverse .avatar:first-child { margin-left: -10px; }
.avatar-stack--reverse .avatar:last-child  { margin-left: 0; }

/* Dark border */
.avatar-stack--dark .avatar          { border-color: var(--color-primary); }
.avatar-stack--dark .avatar-stack__count { border-color: var(--color-primary); background: rgba(255,255,255,.15); }

/* ── Avatar + meta (nombre + rol) ────────────────────────────────────────── */
.avatar-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.avatar-meta__name {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}
.avatar-meta__role {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────────────────────
   E3 · STEPS / STEPPER
   ────────────────────────────────────────────────────────────────────────── */

/* ── Horizontal ───────────────────────────────────────────────────────────── */
.steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
/* Conector entre pasos */
.step::before {
  content: '';
  position: absolute;
  top: 19px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}
.step:last-child::before { display: none; }

/* Marcador */
.step__marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
  transition: all var(--t-base);
  flex-shrink: 0;
}
.step__marker svg { width: 16px; height: 16px; }

.step__label {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.35;
  padding: 0 var(--space-2);
}
.step__sub {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  padding: 0 var(--space-2);
}

/* Estados */
.step.is-done .step__marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.step.is-done::before { background: var(--color-accent); }
.step.is-done .step__label { color: var(--color-heading); }

.step.is-active .step__marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--tint-accent-14);
}
.step.is-active .step__label { color: var(--color-heading); font-weight: 700; }

/* ── Variante: numbered (sin ícono, solo número) ───── ya es el default ──── */

/* ── Variante: pill markers ───────────────────────────────────────────────── */
.steps--pill .step__marker {
  width: auto;
  height: 32px;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  font-size: .75rem;
}
.steps--pill .step::before { top: 15px; }

/* ── Variante: compact (sin sub-label) ─────────────────────────────────────  */
.steps--compact .step__marker { width: 32px; height: 32px; font-size: .75rem; }
.steps--compact .step::before { top: 15px; }
.steps--compact .step__label  { font-size: .75rem; }

/* ── Variante vertical ────────────────────────────────────────────────────── */
.steps--vertical {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}
.steps--vertical .step {
  flex: none;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  width: 100%;
}
.steps--vertical .step:last-child { padding-bottom: 0; }
.steps--vertical .step::before {
  left: 19px;
  top: 40px;
  bottom: 0;
  right: auto;
  width: 2px;
  height: auto;
}
.steps--vertical .step__body { padding-top: 8px; }
.steps--vertical .step__label { margin-top: 0; padding: 0; font-size: .9375rem; }
.steps--vertical .step__sub   { padding: 0; font-size: .875rem; margin-top: 4px; }

/* ── On dark ──────────────────────────────────────────────────────────────── */
.steps--dark .step__marker {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.5);
}
.steps--dark .step::before          { background: rgba(255,255,255,.15); }
.steps--dark .step__label           { color: rgba(255,255,255,.5); }
.steps--dark .step.is-done .step__marker { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.steps--dark .step.is-done::before  { background: var(--color-accent); }
.steps--dark .step.is-done .step__label  { color: #fff; }
.steps--dark .step.is-active .step__marker { background: #fff; border-color: #fff; color: var(--color-primary); box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.steps--dark .step.is-active .step__label  { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   E2 · DIVIDERS
   ────────────────────────────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-default);
}
/* Sin contenido: línea simple */
.divider--plain::before { display: block; }
.divider--plain::after  { display: none; }
.divider--plain { display: block; height: 1px; background: var(--color-border-default); margin: var(--space-6) 0; }

/* Alineación del label */
.divider--left::before  { display: none; }
.divider--right::after  { display: none; }

/* Grosor */
.divider--thick::before,
.divider--thick::after  { height: 2px; }

/* Estilo de línea */
.divider--dashed::before,
.divider--dashed::after { background: none; border-top: 1px dashed var(--color-border-strong); }

.divider--dotted::before,
.divider--dotted::after { background: none; border-top: 1px dotted var(--color-border-strong); }

/* Gradiente accent */
.divider--accent::before,
.divider--accent::after {
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  height: 1px;
}

/* Solo línea izq, sin texto */
.divider--accent-left {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
  border: none;
  margin: var(--space-6) 0;
}

/* Decorativo: línea + ornamento central */
.divider__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  flex-shrink: 0;
  color: var(--color-accent);
}
.divider__ornament svg { width: 14px; height: 14px; }

/* Variante oscura (para secciones dark) */
.divider--dark {
  color: rgba(255,255,255,.4);
}
.divider--dark::before,
.divider--dark::after {
  background: rgba(255,255,255,.12);
}

/* Sección — separador de sección grande con eyebrow */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-10) 0;
}
.section-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-border-default);
}
.section-divider__label {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}


/* ==========================================================================
   UI KIT — Página del sistema de diseño
   ========================================================================== */

/* ── Layout ── */
.kit-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-soft);
}

/* ── Sidebar ── */
.kit-sidebar {
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--color-primary);
  border-right: 1px solid rgba(255,255,255,.06);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.kit-sidebar::-webkit-scrollbar { width: 4px; }
.kit-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.kit-sidebar__brand {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  background: var(--color-primary);
  z-index: 1;
  flex-shrink: 0;
}

.kit-sidebar__wordmark {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.kit-sidebar__meta {
  font-family: var(--font-body);
  font-size: .62rem;
  color: rgba(255,255,255,.28);
  letter-spacing: .04em;
}

.kit-nav {
  padding: var(--space-4) 0 var(--space-10);
  flex: 1;
}

.kit-nav__group {
  margin-top: var(--space-5);
}

.kit-nav__group-label {
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  display: block;
  margin-bottom: var(--space-1);
}

.kit-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px var(--space-6);
  font-family: var(--font-body);
  font-size: .8rem;
  color: rgba(255,255,255,.42);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  line-height: 1.5;
}
.kit-nav__link:hover {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
}
.kit-nav__link.is-active {
  color: #fff;
  border-left-color: var(--color-accent);
  background: rgba(25,68,223,.14);
}

.kit-nav__num {
  font-size: .6rem;
  color: rgba(255,255,255,.16);
  font-weight: 600;
  min-width: 18px;
  letter-spacing: .02em;
}

/* ── Main ── */
.kit-main {
  margin-left: 260px;
  padding: var(--space-14) var(--space-12) var(--space-20);
  width: calc(100% - 260px);
  max-width: 1060px;
}

/* ── Section ── */
.kit-section {
  margin-bottom: var(--space-24);
  scroll-margin-top: 40px;
}

.kit-section__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.kit-section__title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}

.kit-section__desc {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: var(--space-8);
}

.kit-section__rule {
  height: 1px;
  background: var(--color-border-default);
  margin-bottom: var(--space-8);
}

/* ── Block (demo + snippet) ── */
.kit-block {
  margin-bottom: var(--space-10);
}

.kit-block__label {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  display: block;
}

/* Demo canvas */
.kit-demo {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-bottom: none;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.kit-demo--col   { flex-direction: column; align-items: flex-start; }
.kit-demo--dark  { background: var(--color-primary); }
.kit-demo--soft  { background: var(--color-bg-soft); }
.kit-demo--grid  { display: grid; }
.kit-demo--full  { padding: 0; overflow: hidden; }
/* cuando no hay snippet debajo */
.kit-demo--alone {
  border-bottom: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
}

/* Code snippet */
.kit-snippet {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.07);
  border-top: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  position: relative;
}

.kit-snippet__copy {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  color: rgba(255,255,255,.38);
  font-size: .62rem;
  font-family: var(--font-body);
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background var(--t-fast), color var(--t-fast);
}
.kit-snippet__copy:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.kit-snippet__copy.is-copied {
  color: #7ee787;
  border-color: rgba(126,231,135,.3);
}

.kit-snippet pre {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
}

.kit-snippet code {
  font-family: 'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: .775rem;
  line-height: 1.75;
  color: #e6edf3;
  white-space: pre;
}

/* ── Foundation: Color swatches ── */
.kit-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.kit-swatch {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-white);
}

.kit-swatch__color {
  height: 68px;
  display: block;
}

.kit-swatch__info {
  padding: var(--space-3);
}

.kit-swatch__name {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-heading);
  display: block;
  margin-bottom: 2px;
}

.kit-swatch__hex {
  font-family: monospace;
  font-size: .62rem;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 2px;
}

.kit-swatch__var {
  font-family: monospace;
  font-size: .58rem;
  color: var(--color-accent);
  display: block;
  word-break: break-all;
  line-height: 1.4;
}

/* ── Foundation: Typography scale ── */
.kit-type-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.kit-type-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.kit-type-row:first-child { border-top: 1px solid var(--color-border-default); }

.kit-type-meta {
  min-width: 200px;
  flex-shrink: 0;
}
.kit-type-meta strong {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.kit-type-meta span {
  font-family: monospace;
  font-size: .62rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: block;
}

/* ── Foundation: Spacing scale ── */
.kit-space-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.kit-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.kit-space-row:first-child { border-top: 1px solid var(--color-border-default); }

.kit-space-meta {
  min-width: 180px;
  flex-shrink: 0;
}
.kit-space-meta strong {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1px;
}
.kit-space-meta span {
  font-family: monospace;
  font-size: .62rem;
  color: var(--color-text-secondary);
}

.kit-space-bar {
  background: var(--color-accent);
  height: 6px;
  border-radius: 3px;
  opacity: .5;
  flex-shrink: 0;
}

/* ── Foundation: Icon grid ── */
.kit-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.kit-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-white);
  text-align: center;
  cursor: default;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.kit-icon-item:hover {
  border-color: var(--color-accent);
  background: var(--tint-accent-10);
}
.kit-icon-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--color-heading);
  display: block;
}
.kit-icon-item:hover [data-lucide] { color: var(--color-accent); }

.kit-icon-item span {
  font-family: var(--font-body);
  font-size: .57rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
  word-break: break-all;
}

/* ── Logo demo helpers ── */
.kit-logo-variants {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.kit-logo-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kit-logo-box__label {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.kit-logo-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  min-width: 180px;
}
.kit-logo-canvas--dark {
  background: var(--color-primary);
  border-color: rgba(255,255,255,.06);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .kit-sidebar { transform: translateX(-100%); }
  .kit-main { margin-left: 0; width: 100%; padding: var(--space-8) var(--space-5) var(--space-16); }
}


/* ==========================================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Desactiva animaciones y transiciones para usuarios que las han deshabilitado
   en su sistema operativo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      .01ms !important;
    scroll-behavior:          auto  !important;
  }
  /* Evita que WOW.js deje elementos ocultos permanentemente */
  .wow { visibility: visible !important; }
}