/* LANT AUDIO — sections.css · generado de _build/ (Fase 3). No editar a mano. */

/* ============ equipo ============ */
/* ============================================================================
   LANT AUDIO — sección EQUIPO (prefijo eq-)
   Grid estático de 5 tarjetas de equipo + callout "sistema principal + delays".
   Sin JS. Reutiliza .section / .wrap / .eyebrow / .section-title de styles.css
   y SOLO tokens de tokens.css. Patrones de COMPONENTS.md.
   ========================================================================== */

/* ---- Grid responsive de tarjetas ---------------------------------------- */
.eq-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (max-width: 900px) { .eq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .eq-grid { grid-template-columns: 1fr; } }

/* ---- Tarjeta base (patrón COMPONENTS) ----------------------------------- */
.eq-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.eq-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---- Placeholder de imagen (mismo lenguaje que .hero__bg; Fase 4) ------- */
.eq-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eq-thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    radial-gradient(120% 90% at 70% 20%, var(--lant-orange-tint-16), transparent 62%),
    linear-gradient(180deg, var(--lant-gray-900) 0%, var(--lant-black) 100%);
  border-bottom: 1px solid var(--border-subtle);
}
.eq-thumb::after {
  content: "";
  position: absolute; left: 1.25rem; top: 1.25rem;
  width: 22px; height: 22px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: .55;
}

/* ---- Cuerpo de la tarjeta ----------------------------------------------- */
.eq-body {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem 2rem;
  flex: 1;
}

/* Tag: naranja como fondo → texto negro (AA ✓). */
.eq-tag {
  align-self: flex-start;
  background: var(--accent);
  color: var(--text-on-orange);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.eq-name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--text);
}
.eq-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: .7rem;
}

/* ---- reduced-motion: sin transición, estado final visible --------------- */
@media (prefers-reduced-motion: reduce) {
  .eq-card { transition: none; }
  .eq-card:hover { transform: none; }
}

/* ============ experiencias ============ */
/* ============================================================================
   LANT AUDIO — experiencias.css  ·  Sección #experiencias (prefijo exp-)
   Bloques: (A) tarjetas expandibles · (B) complementos · (C) diferenciación.
   Solo tokens. Sin hex crudos salvo los alfa sobre crema que marca COMPONENTS.md.
   ========================================================================== */

/* ---- Encabezados de bloque ---------------------------------------------- */
.exp-head-block { max-width: 56ch; }

/* Badge (esquina superior) */
.exp-badge {
  position: absolute; top: -11px; left: 2rem; z-index: 1;
  background: var(--accent); color: var(--text-on-orange);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radius-sm);
}

/* Cierre "Cotización personalizada" (reemplaza cualquier precio) */
.exp-quote {
  margin: 1.25rem 2rem 2rem;
  border-top: .5px solid var(--border-subtle);
  padding-top: 1.25rem;
}
.exp-quote-amount {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight); color: var(--text);
}
.exp-quote-note { font-size: var(--fs-xs); color: var(--text-secondary); } /* AA sobre --surface */

/* ============================================================================
   CONFIGURADOR (.cfg-*)  ·  sustituye la vitrina de 6 acordeones
   ----------------------------------------------------------------------------
   Controles NATIVOS (input radio / checkbox) a propósito: esta sección ES el
   contenido de #experiencias y tiene que leerse y operarse sin JavaScript, al
   revés que la calculadora, que vive entera bajo .js. Lo único gateado por .js
   es el resumen, porque sin JS no hay estado que resumir.
   La receta de "elegido" es la MISMA de .calc-chip/.calc-toggle
   (borde --accent + fondo --lant-orange-tint-10). Si tocas una, toca la otra.
   Uso de :has(): SOLO para pintar la caja completa (tarjeta de base y de extra)
   cuando su input está marcado o enfocado, porque el input es hermano y no
   ancestro de la caja. Todo lo demás —las marcas de radio/checkbox, el tint del
   label y el revelado de .cfg-size— usa el combinador hermano input:checked + X,
   que funciona en cualquier navegador. El bloque @supports del final repone el
   estado y el foco donde :has() no existe: si tocas uno, toca el otro.
   ========================================================================== */
.cfg { margin-top: clamp(2rem, 5vw, 3rem); }
.cfg-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Una sola columna por defecto: sin JS el resumen no existe y una pista fija
   dejaría 330 px de hueco muerto. La segunda columna solo aparece cuando el
   resumen de verdad está ahí (.js) y cabe. */
.cfg-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}
@media (min-width: 981px) {
  .js .cfg-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}

/* ---- Paso ---------------------------------------------------------------- */
.cfg-step + .cfg-step { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.cfg-steplabel {
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--accent);
}
.cfg-steptitle {
  margin-top: .4rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight);
  line-height: 1.15; color: var(--text);
}
.cfg-stephint {
  margin-top: .6rem; max-width: 62ch;
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6;
}

/* Lista de lo que va en TODAS las bases */
.cfg-fixed__label {
  margin-top: 1.4rem;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-secondary);
}
.cfg-fixed {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
  margin-top: .5rem;
}
.cfg-fixed li {
  position: relative; padding-left: 1rem;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.cfg-fixed li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---- Paso 1 · bases (single-select) -------------------------------------- */
.cfg-bases {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem; margin-top: 1.5rem;
}
@media (max-width: 620px) { .cfg-bases { grid-template-columns: 1fr; } }

/* La caja es .cfg-base, no el <label>: la lista de equipo es hermana del label
   (un <ul> dentro de <label> sería HTML inválido) y tiene que quedar DENTRO
   del recuadro. El estado elegido se pinta con :has(); el @supports de más
   abajo degrada al borde sobre el label si el navegador no lo soporta. */
.cfg-base {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding-bottom: 1.4rem;
  transition: border-color var(--duration-base) var(--ease-standard),
              background   var(--duration-base) var(--ease-standard),
              transform    var(--duration-base) var(--ease-standard);
}
.cfg-base:hover { border-color: var(--lant-gray-500); transform: translateY(-2px); }
.cfg-base .exp-badge { top: -11px; left: 1.6rem; z-index: 2; }

/* El input real: invisible pero ENFOCABLE (nunca display:none) */
.cfg-base__input,
.cfg-extra__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cfg-base__label {
  display: block; width: 100%;
  padding: 1.75rem 1.5rem 0 3.2rem;
  cursor: pointer;
}
/* El <ul> del equipo es hermano del label (un <ul> dentro de <label> sería HTML
   inválido), así que sin esto solo ~37 % de la tarjeta seleccionaría la base
   mientras el hover levanta la caja entera y promete lo contrario. La capa
   extiende el área activa a toda la tarjeta. */
/* z-index: los <li> del equipo llevan position:relative (por su viñeta) y, al
   venir después en el DOM, se pintarían ENCIMA de la capa. */
.cfg-base__label::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Marca de radio — mismo indicador circular que .calc-chip::before */
.cfg-base__mark {
  position: absolute; top: 1.95rem; left: 1.5rem;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow   var(--duration-fast) var(--ease-standard);
}
.cfg-base__exp {
  display: block; font-size: var(--fs-xs); color: var(--accent);
  font-style: italic; letter-spacing: .5px;
}
.cfg-base__name {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: var(--ls-tight); font-size: var(--fs-h3);
  color: var(--text); line-height: 1.1;
}
.cfg-base__for {
  display: block; margin-top: .6rem;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.cfg-base__equip { list-style: none; margin-top: 1.1rem; padding: 0 1.5rem; }
.cfg-base__equip li {
  font-size: var(--fs-sm); color: var(--text-secondary);
  padding: .45rem 0 .45rem 1.1rem; position: relative;
  border-top: .5px solid var(--border-subtle);
}
.cfg-base__equip li::before {
  content: ""; position: absolute; left: 0; top: .95rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Estado elegido */
.cfg-base:has(.cfg-base__input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--lant-orange-tint-10), transparent 55%), var(--surface);
}
.cfg-base__input:checked + .cfg-base__label .cfg-base__mark {
  border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent);
}
/* El tint naranja detrás del eyebrow naranja bajaba el contraste a 4.27:1 (AA
   pide 4.5). En la tarjeta elegida el eyebrow pasa a texto normal: la selección
   ya la comunican el borde y la marca de radio. */
.cfg-base__input:checked + .cfg-base__label .cfg-base__exp { color: var(--text); }
/* Foco: anillo de la casa dibujado sobre la tarjeta.
   OJO: :has() NO es "forgiving". Si va en la misma lista de selectores que una
   regla que debe sobrevivir sin él, el navegador que no lo implementa tira la
   lista ENTERA y los extras se quedan sin foco visible. Por eso van separadas. */
.cfg-base:has(.cfg-base__input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.cfg-extra__input:focus-visible + .cfg-extra__label {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
/* Degradación donde no hay :has() — el estado y el foco se siguen viendo */
@supports not selector(:has(*)) {
  .cfg-base__input:checked + .cfg-base__label,
  .cfg-base__input:focus-visible + .cfg-base__label,
  .cfg-extra__input:focus-visible + .cfg-extra__label {
    outline: 2px solid var(--accent); outline-offset: -1px;
  }
}

/* ---- Paso 2 · extras (multi-select) -------------------------------------- */
.cfg-extras {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: start;              /* revelar .cfg-size no estira a la tarjeta vecina */
  gap: .75rem; margin-top: 1.5rem;
}
@media (max-width: 620px) { .cfg-extras { grid-template-columns: 1fr; } }

/* La caja es el <li>, no el <label>: así el sub-selector de tamaño de pantalla
   (hermano del label) queda DENTRO del recuadro y no flotando sobre el fondo. */
.cfg-extra {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--duration-base) var(--ease-standard),
              background   var(--duration-base) var(--ease-standard);
}
.cfg-extra:hover { border-color: var(--lant-gray-500); }
.cfg-extra__label {
  display: block; width: 100%;
  padding: .95rem 1.1rem .95rem 2.6rem;
  cursor: pointer;
}
/* Marca de casilla — cuadrada, como .calc-toggle::before */
.cfg-extra__mark {
  position: absolute; top: 1.1rem; left: 1rem;
  width: 15px; height: 15px; border-radius: var(--radius-sm);
  border: 2px solid var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background   var(--duration-fast) var(--ease-standard);
}
/* Palomita: el estado NO depende solo del color (1.4.1) */
.cfg-extra__mark::after {
  content: ""; position: absolute; left: 3px; top: 0;
  width: 5px; height: 9px; opacity: 0;
  border: solid var(--text-on-orange); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cfg-extra__name {
  display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.cfg-extra__detail {
  display: block; margin-top: .3rem;
  font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55;
}
.cfg-extra:has(.cfg-extra__input:checked) {
  border-color: var(--accent); background: var(--lant-orange-tint-10);
}
@supports not selector(:has(*)) {
  .cfg-extra__input:checked + .cfg-extra__label {
    outline: 1px solid var(--accent); outline-offset: -1px;
  }
}
.cfg-extra__input:checked + .cfg-extra__label .cfg-extra__mark {
  border-color: var(--accent); background: var(--accent);
}
.cfg-extra__input:checked + .cfg-extra__label .cfg-extra__mark::after { opacity: 1; }

/* Sub-elección de tamaño de pantalla — se revela SOLO con CSS */
.cfg-size {
  display: none; border: 0; min-width: 0;
  margin: 0 1.1rem 1rem 2.6rem; padding: 0;
}
.cfg-extra__input:checked ~ .cfg-size { display: block; }
.cfg-size__legend {
  padding: 0; font-size: var(--fs-xs); color: var(--text-secondary);
}
.cfg-size__opt { display: inline-block; margin: .45rem .5rem 0 0; }
.cfg-size__opt input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.cfg-size__opt label {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: .3rem .85rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary);
}
.cfg-size__opt input:checked + label {
  border-color: var(--accent); background: var(--lant-orange-tint-10); color: var(--text);
}
.cfg-size__opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Resumen · única pieza que exige JS ---------------------------------- */
.cfg-summary { display: none; }
.js .cfg-summary {
  display: block; position: sticky; top: 6rem;
  border: 1px solid var(--accent); border-radius: var(--radius-lg);
  background: var(--bg-elevated); box-shadow: var(--shadow-md);
  padding: 1.6rem 1.5rem;
}
@media (max-width: 980px) { .js .cfg-summary { position: static; } }
.cfg-summary__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight); color: var(--text);
}
.cfg-summary__base {
  margin-top: .3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
}
.cfg-summary__lead {
  margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.cfg-summary__list { list-style: none; margin-top: .5rem; }
.cfg-summary__list li {
  font-size: var(--fs-sm); color: var(--text-secondary);
  padding: .4rem 0 .4rem 1.1rem; position: relative;
  border-top: .5px solid var(--border-subtle);
}
.cfg-summary__list li:first-child { border-top: none; }
.cfg-summary__list li::before {
  content: ""; position: absolute; left: 0; top: .9rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cfg-summary__diff {
  margin-top: .9rem; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.6;
}
.cfg-summary .exp-quote { margin: 1.1rem 0 0; }
.cfg-summary .exp-quote-amount { font-size: var(--fs-lead); }
.cfg-summary__actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.cfg-summary__actions .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .cfg-base, .cfg-extra, .cfg-base__mark, .cfg-extra__mark { transition: none; }
  .cfg-base:hover { transform: none; }
}

/* CTA del bloque A */
.exp-cta { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---- Sub-encabezado compartido (B y C) ---------------------------------- */
.exp-block { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.exp-subhead { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.exp-subtitle {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.1;
  color: var(--text); text-wrap: balance;
}

/* ---- (B) Complementos ---------------------------------------------------- */
.exp-addons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
@media (max-width: 980px) { .exp-addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .exp-addons { grid-template-columns: 1fr; } }

.exp-addon {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.5rem 1.4rem;
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.exp-addon:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .exp-addon { transition: none; }
  .exp-addon:hover { transform: none; }
}
.exp-addon__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-body); letter-spacing: var(--ls-tight); color: var(--text);
  line-height: 1.25;
}
.exp-addon__detail {
  font-size: var(--fs-sm); color: var(--text-secondary);
  margin-top: .55rem; flex: 1 1 auto;
}
.exp-addon__tag {
  align-self: flex-start; margin-top: 1rem;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--accent);
  padding-left: .95rem; position: relative;
}

/* Varios tags por tarjeta (Experiencias recomendadas) */
.exp-addon__tags {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-top: 1rem;
}
.exp-addon__tags .exp-addon__tag { align-self: auto; margin-top: 0; }
/* Los tags nuevos son frases que envuelven a dos renglones: el punto tiene que
   alinearse al PRIMER renglón, no al centro de la caja. */
.exp-addon__tags .exp-addon__tag::before { top: .55em; transform: none; }

.exp-addon__tag::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---- (C) Diferenciación -------------------------------------------------- */
.exp-compare {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
@media (max-width: 820px) { .exp-compare { grid-template-columns: 1fr; } }

.exp-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 2rem 1.85rem;
}
.exp-col--lant {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, var(--lant-orange-tint-10), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-glow-orange);
}
.exp-col__label {
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 1.25rem;   /* AA sobre --surface */
}
.exp-col--lant .exp-col__label { color: var(--accent); }

.exp-col__list { list-style: none; }
.exp-col__list li {
  position: relative; padding: .7rem 0 .7rem 1.6rem;
  font-size: var(--fs-sm);
  border-top: .5px solid var(--border-subtle);
}
.exp-col__list li:first-child { border-top: none; }

/* Mercado genérico: texto apagado, marca "×" */
.exp-col--generic .exp-col__list li { color: var(--text-secondary); } /* AA sobre --surface */
.exp-col--generic .exp-col__list li::before {
  content: "\00d7"; position: absolute; left: 0; top: .6rem;
  font-weight: 700; line-height: 1; color: var(--text-secondary);
}
/* Lant Audio: texto claro, viñeta naranja */
.exp-col--lant .exp-col__list li { color: var(--text); }
.exp-col--lant .exp-col__list li::before {
  content: ""; position: absolute; left: .15rem; top: 1.15rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ============ venues ============ */
/* ============================================================================
   LANT AUDIO — venues.css  ·  sección #venues (prefijo vn-)
   Marquee horizontal en loop, puro CSS. El track se duplica en el HTML
   (grupo real + grupo aria-hidden) y se desplaza con translateX(-50%),
   por lo que el bucle es continuo sin salto.
   reduced-motion: animación off, dup oculto y los items en fila con wrap.
   Solo tokens; sin hex crudos.
   ========================================================================== */

.vn-lead {
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  max-width: 56ch;
  margin-top: .25rem;
}

/* ---- Viewport del marquee: ancho completo, recorta el desbordamiento ------ */
.vn-marquee {
  margin-top: clamp(2rem, 5vw, 3rem);
  overflow: hidden;
  /* Desvanecido en los bordes para que los items "entren/salgan" sin cortar seco.
     Fallback: sin mask se ve el borde recto, igualmente correcto. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---- Track: dos grupos idénticos en fila, animados como uno solo ---------- */
.vn-track {
  display: flex;
  width: max-content;          /* el track mide lo que suman ambos grupos */
  list-style: none;
  animation: vn-scroll 38s linear infinite;
  will-change: transform;
}
/* Pausa al pasar el cursor o al enfocar dentro (cortesía de lectura) */
.vn-marquee:hover .vn-track,
.vn-marquee:focus-within .vn-track { animation-play-state: paused; }

.vn-group {
  display: flex;
  flex: none;                  /* cada grupo conserva su ancho intacto */
}

/* Cada item lleva su propia separación a la derecha (sin flex-gap) para que
   ambos grupos midan EXACTAMENTE lo mismo y translateX(-50%) empalme perfecto. */
.vn-item {
  flex: none;
  margin-right: clamp(.75rem, 2vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  padding: .85rem 1.5rem .85rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.vn-marquee:hover .vn-item { border-color: var(--border); } /* estabiliza en pausa */
.vn-item:hover { border-color: var(--accent); background: var(--surface-hover); }

/* Viñeta = punto naranja de 5px (lenguaje de marca) */
.vn-item::before {
  content: "";
  width: 5px; height: 5px;
  margin-right: .7rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@keyframes vn-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* medio track = un grupo completo */
}

/* ---- reduced-motion: sin desplazamiento; items estáticos en fila con wrap -- */
@media (prefers-reduced-motion: reduce) {
  .vn-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: var(--gutter);
  }
  .vn-track {
    animation: none;
    width: auto;
    justify-content: center;
  }
  #vn-dup { display: none; }        /* el duplicado solo servía al loop */
  .vn-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.6rem, 2vw, 1rem);
    max-width: var(--wrap-max);
    margin-inline: auto;
  }
  .vn-item { margin-right: 0; transition: none; }  /* separación por gap; sin transición */
}

/* ============ proceso ============ */
/* ============================================================================
   LANT AUDIO — PROCESO (id="proceso", prefijo "pr-")
   Filas alternadas texto/imagen, número grande tenue, divisor sutil entre pasos.
   Ritmo editorial tipo lamalama: contraste de escala, mucho aire.
   Solo tokens; sin JS (reveal por [data-reveal], ya cableado en main.js).
   ========================================================================== */

.pr-head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* ---- Lista de pasos ------------------------------------------------------ */
.pr-steps { list-style: none; }

.pr-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 0.5px solid var(--border-subtle);
}
.pr-step:first-child { border-top: none; padding-top: 0; }

/* Alterna el lado: pares → imagen a la izquierda, texto a la derecha */
.pr-step:nth-child(even) .pr-text  { order: 2; }
.pr-step:nth-child(even) .pr-media { order: 1; }

/* ---- Bloque de texto ----------------------------------------------------- */
.pr-text { position: relative; }

.pr-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: .9;
  letter-spacing: var(--ls-tight);
  color: var(--accent);
  opacity: .28;              /* número tenue/naranja */
  margin-bottom: .5rem;
}

.pr-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--text);
}

.pr-detail {
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  max-width: 42ch;
  margin-top: .9rem;
}

/* ---- Panel imagen (placeholder Fase 4) ----------------------------------- */
.pr-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  /* fondo = fallback mientras carga la imagen (mismo lenguaje que el hero) */
  background:
    radial-gradient(120% 90% at 70% 20%, var(--lant-orange-tint-16), transparent 60%),
    linear-gradient(180deg, var(--lant-gray-900) 0%, var(--bg) 100%);
}
.pr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Responsive: en móvil apila (número → texto → imagen) ---------------- */
@media (max-width: 820px) {
  .pr-step {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: clamp(2rem, 8vw, 3rem);
  }
  /* el texto siempre va primero; la imagen debajo, en cualquier paso */
  .pr-step:nth-child(even) .pr-text  { order: 0; }
  .pr-step:nth-child(even) .pr-media { order: 0; }
  .pr-media { aspect-ratio: 16 / 9; }
}

/* ============ calculadora ============ */
/* ============================================================================
   LANT AUDIO — CALCULADORA (Fase 3b) · prefijo .calc-
   Estilos scoped, SOLO tokens (nada de hex crudos). Reutiliza .btn / .btn--primary
   / .visually-hidden de styles.css y los patrones de COMPONENTS.md.

   Sin JS: .calc-wizard{display:none} → el <noscript> es lo único visible.
   Con JS: .js .calc-wizard{display:block}.
   ========================================================================== */

.calc { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---- Sin JS: bloque noscript ------------------------------------------- */
.calc-noscript {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.calc-noscript-msg {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ---- Contenedor del wizard (oculto hasta .js) --------------------------- */
.calc-wizard {
  display: none;
  max-width: 620px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.js .calc-wizard { display: block; }

/* ---- Barra de progreso (naranja 2px, arriba del todo) ------------------- */
.calc-progress {
  position: relative;
  height: 2px;
  background: var(--border-subtle);
}
.calc-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 16.6667%;                 /* 1/6 · lo recalcula el JS */
  background: var(--accent);
  transition: width var(--duration-base) var(--ease-standard);
}

/* ---- Header ------------------------------------------------------------- */
.calc-header {
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.calc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.calc-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.calc-steplabel {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  white-space: nowrap;
}
.calc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--text);
}
.calc-sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: .5rem;
}

/* ---- Cuerpo / pasos ----------------------------------------------------- */
.calc-body {
  padding: clamp(1.5rem, 4vw, 2rem);
  min-height: 360px;
}

/* fieldset reset */
.calc-step {
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.calc-step.is-active { display: block; }
.js .calc-step.is-active { animation: calc-fade var(--duration-base) var(--ease-standard); }
@keyframes calc-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.calc-q {
  display: block;
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  color: var(--text);
}
.calc-optional {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ---- Slider (paso 1) ---------------------------------------------------- */
.calc-slider { margin-top: 2.25rem; text-align: center; }
.calc-slider-out {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 3.75rem);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--accent);
}
.calc-slider-cap {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  margin-top: .35rem;
}
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin-top: 2.25rem;
  border-radius: var(--r-pill);
  /* el relleno naranja lo pinta el JS vía background linear-gradient */
  background: var(--border);
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.calc-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.calc-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.calc-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---- Chips single-select + toggles multi -------------------------------- */
.calc-chips {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.5rem;
}
.calc-chips--row { flex-direction: row; flex-wrap: wrap; }

.calc-toggles {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.5rem;
}
.calc-toggle-wrap { display: flex; flex-direction: column; }

/* Base compartida de chip / toggle (todos son <button> reales) */
.calc-chip,
.calc-toggle {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.calc-chip:hover,
.calc-toggle:hover { border-color: var(--lant-gray-500); color: var(--text); }

/* Indicador circular (radio) para chips */
.calc-chip::before {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  border: 2px solid var(--border);
  border-radius: 50%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
/* Indicador cuadrado (checkbox) para toggles */
.calc-toggle::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

/* Estado seleccionado — borde naranja + fondo tint (mockup aprobado) */
.calc-chip[aria-checked="true"],
.calc-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--lant-orange-tint-10);
  color: var(--text);
}
.calc-chip[aria-checked="true"]::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.calc-toggle[aria-pressed="true"]::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* Sub-selección de tamaño de pantalla (chips compactos tipo pill) */
.calc-subselect {
  display: flex;
  gap: .5rem;
  margin: .6rem 0 .2rem 1.9rem;
}
.calc-subselect[hidden] { display: none; }

.calc-chip--sm {
  width: auto;
  padding: .5rem 1rem;
  font-size: var(--fs-xs);
  border-radius: var(--r-pill);
}
.calc-chip--sm::before { display: none; }   /* sin punto: el borde/tint marca el estado */

/* ---- Formularios (pasos 5 y 6) ------------------------------------------ */
.calc-formgrid {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.calc-field { display: flex; flex-direction: column; gap: .55rem; }
.calc-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.calc-req { color: var(--accent); }
.calc-label .calc-optional { text-transform: none; }

.calc-selrow { display: flex; gap: .5rem; flex-wrap: wrap; }

.calc-select,
.calc-input {
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .8rem .9rem;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.calc-select { flex: 1 1 0; min-width: 5rem; cursor: pointer; }
.calc-input { width: 100%; }
.calc-select:hover,
.calc-input:hover { border-color: var(--lant-gray-500); }
.calc-select:focus-visible,
.calc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.calc-input::placeholder { color: var(--text-muted); }

.calc-input[aria-invalid="true"] { border-color: var(--danger); }

.calc-hinttext { font-size: var(--fs-xs); color: var(--text-muted); }
.calc-error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; }

/* Hint de validación de radiogroup (paso 2 / 3) */
.calc-hint {
  margin-top: .9rem;
  font-size: var(--fs-xs);
  color: var(--danger);
  font-weight: 600;
}

/* ---- Pantalla final ¡Gracias! ------------------------------------------- */
.calc-done { text-align: center; padding-block: clamp(1rem, 4vw, 2rem); }
.calc-done-mark {
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lant-orange-tint-16);
  color: var(--accent);
  font-size: 2rem; font-weight: 800; line-height: 1;
}
.calc-done-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.calc-done-msg {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 42ch;
  margin: .75rem auto 0;
}

/* ---- Footer / navegación ------------------------------------------------ */
.calc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--border-subtle);
}
.calc-back {
  margin-right: auto;               /* pegado a la izquierda; "Siguiente" queda a la derecha */
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-secondary);
  padding: .7rem .2rem;
}
.calc-back:hover { color: var(--text); }

/* [hidden] debe ganarle a los display: flex/block explícitos de arriba */
.calc-back[hidden],
.calc-footer[hidden],
.calc-alt[hidden] { display: none; }

/* Primario naranja, texto negro (regla de contraste de la casa) */
.calc-next {
  background: var(--accent);
  color: var(--text-on-orange);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: .9rem 1.9rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.calc-next:hover { background: var(--accent-hover); }
.calc-next:active { transform: translateY(1px); }

/* ---- Escape hatch a WhatsApp ------------------------------------------- */
.calc-alt {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 0 clamp(1.5rem, 4vw, 2rem) 1.4rem;
}
.calc-alt-link {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.calc-alt-link:hover { border-bottom-color: var(--accent); }

/* ---- Honeypot (fuera de pantalla, no enfocable) ------------------------- */
.calc-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- reduced-motion: transición instantánea, sin animar ---------------- */
@media (prefers-reduced-motion: reduce) {
  .js .calc-step.is-active { animation: none; }
  .calc-progress-fill,
  .calc-chip, .calc-toggle,
  .calc-select, .calc-input,
  .calc-next, .calc-alt-link { transition: none; }
}