/* Vitrina Meridiano — capa de presentación sobre meridiano-tokens.css.
   Expresividad al máximo (§7.6) sin definir un solo color crudo: todo var(--color-*). */

:root {
  --semilla-h: 264.6;                 /* matiz vivo que el visitante dobla */
  --resorte: linear(0, 0.35 10%, 1.0 28%, 1.14 42%, 0.98 64%, 1.02 82%, 1);
  --reveal-y: 28px;
}

/* El visitante re-tinta el sistema entero: solo se re-mapea la capa semántica. */
[data-vitrina] {
  --color-accion-primaria: oklch(51.6% 0.223 var(--semilla-h));
  --color-accion-primaria-activa: oklch(44.2% 0.196 var(--semilla-h));
  --color-accion-primaria-suave: oklch(95.2% 0.02 var(--semilla-h));
  --color-foco: oklch(51.6% 0.223 var(--semilla-h));
  --dato-1: oklch(51.6% 0.223 var(--semilla-h));
  /* Acento como TEXTO pequeño: más oscuro en claro, claro en oscuro. AA en todo matiz. */
  --acento-texto: oklch(44.2% 0.196 var(--semilla-h));
}
[data-vitrina][data-tema="oscuro"] {
  --color-accion-primaria-suave: oklch(28% 0.07 var(--semilla-h));
  --acento-texto: oklch(80% 0.12 var(--semilla-h));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-sans);
  color: var(--color-texto-principal);
  background: var(--color-fondo-base);
  overflow-x: hidden;
}

/* ---------- Atmósfera: rejilla de meridianos + resplandor OKLCH ---------- */
.fondo-atmosfera {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%,
      color-mix(in oklch, var(--color-accion-primaria) 18%, transparent), transparent 60%),
    repeating-linear-gradient(90deg,
      transparent 0 calc(100% / 12 - 1px),
      color-mix(in oklch, var(--color-borde) 55%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
  transition: background 600ms var(--ease-estandar);
}
[data-tema="oscuro"] .fondo-atmosfera {
  background:
    radial-gradient(120% 80% at 50% -10%,
      color-mix(in oklch, var(--color-accion-primaria) 26%, transparent), transparent 60%),
    repeating-linear-gradient(90deg,
      transparent 0 calc(100% / 12 - 1px),
      color-mix(in oklch, var(--color-borde) 80%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
}

/* ---------- Estructura ---------- */
.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 var(--espacio-lg); }
section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.seccion-cabecera { max-width: 60ch; margin-bottom: var(--espacio-2xl); }
.kicker {
  font-family: var(--fuente-mono); font-size: var(--fs-etiqueta);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acento-texto); margin: 0 0 var(--espacio-sm);
}
h2.titulo-seccion {
  font-family: var(--fuente-serif); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 var(--espacio-md); color: var(--color-texto-principal);
}
.seccion-cabecera p { font-size: var(--fs-subtitulo); color: var(--color-texto-secundario); margin: 0; }

/* ---------- Barra de control flotante (la magia) ---------- */
.control {
  position: sticky; top: var(--espacio-md); z-index: 50;
  margin: 0 auto var(--espacio-2xl); max-width: 1180px;
  display: flex; flex-wrap: wrap; gap: var(--espacio-md); align-items: center;
  padding: var(--espacio-sm) var(--espacio-lg);
  background: color-mix(in oklch, var(--color-fondo-base) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--color-borde); border-radius: var(--radio-full);
  box-shadow: var(--elev-2);
}
.control-grupo { display: flex; align-items: center; gap: var(--espacio-xs); }
.control-etiqueta { font-family: var(--fuente-mono); font-size: var(--fs-etiqueta);
  color: var(--color-texto-secundario); white-space: nowrap; }
.semilla-slider {
  -webkit-appearance: none; appearance: none; height: 8px; width: clamp(110px, 22vw, 220px);
  border-radius: var(--radio-full); outline-offset: 4px;
  background: linear-gradient(90deg in oklch,
    oklch(51.6% 0.223 0), oklch(51.6% 0.223 60), oklch(51.6% 0.223 120),
    oklch(51.6% 0.223 180), oklch(51.6% 0.223 240), oklch(51.6% 0.223 300), oklch(51.6% 0.223 360));
}
.semilla-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-fondo-base); border: 3px solid var(--color-accion-primaria);
  box-shadow: var(--elev-2); cursor: grab; transition: transform 200ms var(--resorte);
}
.semilla-slider::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }
.semilla-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--color-fondo-base);
  border: 3px solid var(--color-accion-primaria); box-shadow: var(--elev-2); cursor: grab;
}
.segmento { display: inline-flex; background: var(--color-fondo-elevado);
  border-radius: var(--radio-md); padding: 3px; gap: 2px; }
.segmento button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-pequeno); padding: 6px 12px; border-radius: 6px;
  color: var(--color-texto-secundario); min-height: 32px;
  transition: background 200ms var(--ease-estandar), color 200ms;
}
.segmento button[aria-pressed="true"] {
  background: var(--color-fondo-base); color: var(--color-texto-principal);
  box-shadow: var(--elev-1); font-weight: 600;
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2rem, 6vw, 4rem); text-align: center; position: relative; }
.hero-pildora {
  display: inline-flex; align-items: center; gap: var(--espacio-xs);
  font-family: var(--fuente-mono); font-size: var(--fs-etiqueta);
  padding: 6px 14px; border-radius: var(--radio-full);
  background: var(--color-accion-primaria-suave); color: var(--acento-texto);
  margin-bottom: var(--espacio-lg);
}
.hero h1 {
  font-family: var(--fuente-serif); font-weight: 600;
  font-size: clamp(2.8rem, 1.5rem + 7vw, 6.5rem); line-height: 0.98;
  letter-spacing: -0.03em; margin: 0 auto var(--espacio-lg); max-width: 14ch;
}
.hero h1 em { font-style: italic; color: var(--color-accion-primaria); }
.hero-bajada { font-size: clamp(1.05rem, 1rem + 0.6vw, 1.4rem);
  color: var(--color-texto-secundario); max-width: 56ch; margin: 0 auto var(--espacio-xl); line-height: 1.5; }
.hero-acciones { display: flex; gap: var(--espacio-md); justify-content: center; flex-wrap: wrap; }
.hero-meridiano { display: block; margin: var(--espacio-2xl) auto 0; width: min(560px, 90%); height: auto; }
.hero-meridiano .traza { stroke: var(--color-accion-primaria); stroke-width: 1.5; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; }

/* ---------- Botones de la vitrina (consumen tokens) ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--espacio-xs);
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radio-md);
  padding: 0 var(--espacio-lg); min-height: 44px; border: 1px solid transparent;
  transition: transform 200ms var(--resorte), background 200ms, box-shadow 200ms; }
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--color-accion-primaria); color: var(--color-texto-invertido);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-accion-primaria) 40%, transparent); }
.btn-primario:hover { background: var(--color-accion-primaria-activa); transform: translateY(-2px) scale(1.02); }
.btn-secundario { background: var(--color-fondo-base); color: var(--color-texto-principal);
  border-color: var(--color-borde); }
.btn-secundario:hover { background: var(--color-fondo-elevado); transform: translateY(-2px); }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: var(--espacio-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tarjeta-v {
  background: var(--color-fondo-base); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--espacio-lg); box-shadow: var(--elev-1);
  transition: transform 280ms var(--resorte), box-shadow 280ms; }
.tarjeta-v:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
.tarjeta-v .icono { width: 44px; height: 44px; border-radius: var(--radio-md);
  display: grid; place-items: center; background: var(--color-accion-primaria-suave);
  color: var(--color-accion-primaria); margin-bottom: var(--espacio-md); }
.tarjeta-v h3 { margin: 0 0 var(--espacio-xs); font-size: var(--fs-titulo-3); }
.tarjeta-v p { margin: 0; color: var(--color-texto-secundario); }

/* ---------- Muestras de color ---------- */
.swatches { display: grid; gap: var(--espacio-sm);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.swatch { border-radius: var(--radio-md); overflow: hidden; border: 1px solid var(--color-borde); }
.swatch .muestra { height: 72px; transition: transform 280ms var(--resorte); }
.swatch:hover .muestra { transform: scale(1.06); }
.swatch .meta { padding: var(--espacio-xs) var(--espacio-sm); }
.swatch .nombre { font-weight: 600; font-size: var(--fs-pequeno); }
.swatch .hex { font-family: var(--fuente-mono); font-size: var(--fs-etiqueta); color: var(--color-texto-secundario); }

/* ---------- Escala tipográfica ---------- */
.tipo-fila { display: flex; align-items: baseline; gap: var(--espacio-lg);
  padding: var(--espacio-sm) 0; border-bottom: 1px solid var(--color-separador); }
.tipo-fila .rol { font-family: var(--fuente-mono); font-size: var(--fs-etiqueta);
  color: var(--color-texto-secundario); width: 7ch; flex-shrink: 0; }
.tipo-muestra { font-family: var(--fuente-serif); color: var(--color-texto-principal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- KPIs ---------- */
.kpi-fila { display: grid; gap: var(--espacio-lg);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { background: var(--color-fondo-base); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--espacio-lg); box-shadow: var(--elev-1); }
.kpi .et { font-size: var(--fs-etiqueta); color: var(--color-texto-secundario);
  font-family: var(--fuente-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.kpi .cifra { font-family: var(--fuente-serif); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-variant-numeric: tabular-nums;
  line-height: 1; margin: var(--espacio-xs) 0; }
.kpi .delta { font-weight: 600; font-size: var(--fs-pequeno); font-variant-numeric: tabular-nums; }
.kpi .delta.sube { color: var(--color-exito-texto); }

/* ---------- Bloque interactivo de componentes ---------- */
.lab { display: grid; gap: var(--espacio-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.lab-celda { background: var(--color-fondo-base); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--espacio-lg); }
.lab-celda h3 { margin: 0 0 var(--espacio-md); font-size: var(--fs-titulo-3);
  display: flex; align-items: center; gap: var(--espacio-xs); }
.lab-celda h3 .num { font-family: var(--fuente-mono); font-size: var(--fs-etiqueta);
  color: var(--acento-texto); }
.fila-botones { display: flex; gap: var(--espacio-sm); flex-wrap: wrap; }

/* ---------- Cierre ---------- */
.cierre { text-align: center; }
.cierre blockquote { font-family: var(--fuente-serif); font-style: italic;
  font-size: clamp(1.4rem, 1rem + 2.5vw, 2.4rem); line-height: 1.3; max-width: 22ch;
  margin: 0 auto var(--espacio-xl); color: var(--color-texto-principal); }
.pie-v { text-align: center; padding: var(--espacio-2xl) 0; color: var(--color-texto-secundario);
  font-size: var(--fs-pequeno); border-top: 1px solid var(--color-separador); }
.pie-v a { color: var(--acento-texto); }

/* ---------- Revelado al hacer scroll (mejora progresiva) ----------
   Solo se oculta si hay JS (.js): sin JS, el contenido es siempre visible. */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity 700ms var(--ease-estandar), transform 700ms var(--resorte); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Confeti (celebración) ---------- */
.confeti { position: fixed; width: 10px; height: 10px; border-radius: 2px;
  pointer-events: none; z-index: 100; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}