/* ==========================================================================
   TÓNICA MUSIC GROUP — Design System
   --------------------------------------------------------------------------
   Hoja de estilos compartida por toda la web (home + verticales).
   Estructura:
     1. Tokens / variables
     2. Reset y base
     3. Tipografía y utilidades de texto
     4. Layout (contenedores, grillas, secciones)
     5. Navegación (header + footer)
     6. Componentes (botones, etiquetas, cards, consola, FAQ, etc.)
     7. Bloques de página (hero, stats, planes, CTA…)
     8. Animaciones / scroll reveal
     9. Responsive
   Pensada para que un dev pueda mapearla a componentes/CMS sin reescribir.
   ========================================================================== */

/* 1. TOKENS ================================================================= */
:root {
  /* Paleta de marca (tomada de los decks de Tónica) */
  --tnc-bg:        #0c0a09;   /* fondo negro cálido */
  --tnc-bg-2:      #110e0c;   /* fondo alterno de sección */
  --tnc-panel:     #17120e;   /* cards / paneles */
  --tnc-panel-2:   #1d1712;   /* panel elevado */
  --tnc-line:      #2a2320;   /* bordes sutiles */
  --tnc-line-soft: #1f1916;   /* bordes muy sutiles */

  --tnc-orange:    #e8451e;   /* acento principal */
  --tnc-orange-2:  #ff6a3d;   /* acento claro / hover */
  --tnc-magenta:   #b3257a;   /* glow secundario */
  --tnc-violet:    #5b2a8c;   /* glow terciario */

  --tnc-cream:     #f3ede1;   /* titulares / texto fuerte */
  --tnc-text:      #c9c0b6;   /* texto cuerpo */
  --tnc-muted:     #8c847b;   /* texto secundario */
  --tnc-faint:     #5f5852;   /* etiquetas tenues / pie */

  /* Tipografía */
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* Métricas */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Sombras / glow */
  --shadow: 0 24px 60px -30px rgba(0,0,0,.8);

  /* Transiciones */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 2. RESET / BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--tnc-bg);
  color: var(--tnc-text);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

::selection { background: var(--tnc-orange); color: #fff; }

/* 3. TIPOGRAFÍA ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--tnc-cream);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.01em;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--tnc-cream);
  font-size: clamp(3.2rem, 9vw, 7rem);
}

.h-xl { font-size: clamp(2.6rem, 6vw, 5rem); }
.h-lg { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.h-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.h-sm { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.accent { color: var(--tnc-orange); }
.cream  { color: var(--tnc-cream); }
.muted  { color: var(--tnc-muted); }

/* Etiqueta monoespaciada (eyebrow) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tnc-orange);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: "◆";
  font-size: .7em;
  color: var(--tnc-orange);
}
.eyebrow.no-mark::before { content: none; }
.eyebrow.faint { color: var(--tnc-faint); }
.eyebrow.faint::before { color: var(--tnc-faint); }

.mono {
  font-family: var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--tnc-muted);
}

.lead {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--tnc-text);
  max-width: 46ch;
}

/* 4. LAYOUT ================================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(64px, 9vw, 140px);
  position: relative;
}
.section--alt { background: var(--tnc-bg-2); }
.section--tight { padding-block: clamp(48px, 6vw, 90px); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.section-head { max-width: 56ch; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head p { margin-top: 18px; color: var(--tnc-muted); }

.divider { height: 1px; background: var(--tnc-line); border: 0; }

/* 5. NAVEGACIÓN ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--tnc-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tnc-line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--tnc-cream);
}
.brand .mark {
  width: 18px; height: 18px;
  border: 2px solid var(--tnc-orange);
  border-radius: 2px;
  flex: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tnc-muted);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tnc-cream); }
/* Subrayado animado en los enlaces principales del nav (excluye el botón CTA) */
.nav-links > a:not(.btn) { position: relative; }
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: var(--tnc-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav-links > a:not(.btn):hover::after,
.nav-links > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown de verticales */
.nav-drop { position: relative; }
.nav-drop > button {
  background: none; border: 0; padding: 0;
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tnc-muted); display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop > button:hover { color: var(--tnc-cream); }
.nav-drop > button::after { content: "▾"; font-size: .7em; }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--tnc-panel-2);
  border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 220px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: var(--shadow);
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop.is-open .nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-menu a {
  padding: 10px 12px; border-radius: var(--radius);
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: .9rem; color: var(--tnc-text);
}
.nav-menu a:hover { background: var(--tnc-panel); color: var(--tnc-cream); }

.nav-toggle { display: none; background: none; border: 0; color: var(--tnc-cream); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--tnc-line-soft);
  background: var(--tnc-bg-2);
  padding-block: clamp(48px, 6vw, 80px) 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-top h4 {
  font-family: var(--font-mono); color: var(--tnc-faint);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 18px;
}
.footer-col a { display: block; color: var(--tnc-muted); padding: 5px 0; transition: color .2s; font-size: .95rem; }
.footer-col a:hover { color: var(--tnc-cream); }
.footer-claim { max-width: 34ch; color: var(--tnc-muted); margin-top: 18px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  border-top: 1px solid var(--tnc-line-soft);
  padding-top: 24px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tnc-faint);
}

/* 6. COMPONENTES =========================================================== */
/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--tnc-orange); color: #fff; }
.btn--primary:hover { background: var(--tnc-orange-2); }
.btn--ghost { border-color: var(--tnc-line); color: var(--tnc-cream); }
.btn--ghost:hover { border-color: var(--tnc-orange); color: var(--tnc-orange); }
.btn--block { width: 100%; justify-content: center; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Pills / chips */
.pill {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tnc-muted);
  border: 1px solid var(--tnc-line); border-radius: 2px;
  padding: 7px 12px; display: inline-block;
}
.pill--on { background: var(--tnc-orange); color: #fff; border-color: var(--tnc-orange); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Card base */
.card {
  background: var(--tnc-panel);
  border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 34px);
  position: relative;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.card--hover:hover { border-color: var(--tnc-orange); transform: translateY(-4px); }
/* Microinteracción (#7): las tarjetas reaccionan sutilmente al puntero.
   Lift + borde tibio + sombra suave. El bloque global prefers-reduced-motion
   ya anula la transición, así que no necesita guarda extra. */
.card:hover { transform: translateY(-3px); border-color: rgba(232,69,30,.38); box-shadow: 0 16px 34px -20px rgba(0,0,0,.75); }
.card .kicker {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tnc-orange); margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.card .kicker .box {
  width: 13px; height: 13px; border: 1.5px solid var(--tnc-orange); border-radius: 2px;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--tnc-muted); font-size: .96rem; }

/* Card con esquinas tipo HUD (como en los decks) */
.card--hud { background: var(--tnc-panel); }
.card--hud::before, .card--hud::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--tnc-orange); pointer-events: none;
}
.card--hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card--hud::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Lista con checks */
.checklist { display: grid; gap: 0; margin-top: 8px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid var(--tnc-line-soft);
  color: var(--tnc-text); font-size: .96rem;
}
.checklist li::before {
  content: "✓"; color: var(--tnc-orange); font-weight: 700; flex: none; line-height: 1.5;
}
.checklist li.is-key { color: var(--tnc-orange); font-weight: 600; }
.checklist li.is-key::before { color: var(--tnc-orange); }

/* Stat */
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--tnc-orange);
  line-height: .9; letter-spacing: -.02em;
}
.stat .label {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tnc-cream); margin-top: 10px;
}
.stat p { color: var(--tnc-muted); font-size: .9rem; margin-top: 6px; max-width: 28ch; }

/* 7. BLOQUES DE PÁGINA ===================================================== */
/* Hero */
.hero { position: relative; padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 120px); overflow: hidden; }
.hero .glow {
  position: absolute; inset: -10% -5% auto -10%; height: 80%;
  background:
    radial-gradient(40% 60% at 18% 35%, color-mix(in srgb, var(--tnc-orange) 38%, transparent), transparent 70%),
    radial-gradient(38% 55% at 40% 55%, color-mix(in srgb, var(--tnc-magenta) 34%, transparent), transparent 72%),
    radial-gradient(46% 60% at 30% 75%, color-mix(in srgb, var(--tnc-violet) 30%, transparent), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: glowdrift 16s var(--ease) infinite alternate;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero h1 { margin: 20px 0 24px; }
.hero .lead { font-size: clamp(1.02rem, 1.6vw, 1.25rem); max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-foot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--tnc-line);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
}

/* Marco con "TONICA" tipo deck */
.brand-frame {
  border: 1px solid var(--tnc-orange);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 54px);
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tnc-orange) 6%, transparent));
}
.brand-frame .big {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 5vw, 4rem); color: var(--tnc-orange); line-height: .9;
}
.brand-frame .sub { font-family: var(--font-mono); letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; color: var(--tnc-muted); margin-top: 8px; }

/* Banda de logos / wordmarks */
.logo-band { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--tnc-line); border-radius: var(--radius-lg); overflow: hidden; }
.logo-band div {
  padding: 26px 18px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--tnc-cream);
  border-right: 1px solid var(--tnc-line); border-bottom: 1px solid var(--tnc-line);
}
.logo-band div.on { background: var(--tnc-orange); color: #fff; }
/* Variante de 3 columnas: para bandas con pocas marcas, cada bloque llena el ancho */
.logo-band.logo-band--3 { grid-template-columns: repeat(3, 1fr); }
.logo-band.logo-band--3 div { padding: 38px 20px; font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* Consola en vivo (mock UI con sliders) */
.console {
  background: var(--tnc-panel); border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg); padding: clamp(20px, 2.5vw, 30px); position: relative;
}
.console .console-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tnc-orange); padding-bottom: 16px; border-bottom: 1px solid var(--tnc-line-soft); margin-bottom: 20px;
}
.console .live {
  border: 1px solid var(--tnc-orange); color: var(--tnc-orange);
  padding: 4px 10px; border-radius: 2px; display: inline-flex; align-items: center; gap: 7px;
}
.console .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tnc-orange); animation: pulse 1.6s infinite; }
.console h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.console h3 span { font-family: var(--font-mono); font-size: .72rem; color: var(--tnc-muted); letter-spacing: .1em; }
.slider { margin-bottom: 16px; }
.slider .row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.slider .row .lbl { color: var(--tnc-muted); }
.slider .row .val { color: var(--tnc-cream); }
.slider .track { height: 4px; background: var(--tnc-line); border-radius: 4px; position: relative; }
.slider .fill { height: 100%; background: var(--tnc-orange); border-radius: 4px; position: relative; transition: width 1s var(--ease); }
.slider .fill::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--tnc-orange); }
.console .console-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--tnc-line-soft); margin-top: 22px; padding-top: 16px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tnc-muted);
}
.eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; }
.eq span { width: 3px; background: var(--tnc-orange); animation: eq 1s ease-in-out infinite; }
.eq span:nth-child(1){ animation-delay: 0s } .eq span:nth-child(2){ animation-delay:.2s }
.eq span:nth-child(3){ animation-delay:.4s } .eq span:nth-child(4){ animation-delay:.1s }
.eq span:nth-child(5){ animation-delay:.3s }

/* Schedule / programación */
.schedule { background: var(--tnc-panel); border: 1px solid var(--tnc-line); border-radius: var(--radius-lg); padding: clamp(18px,2.2vw,26px); }
.schedule .row {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; margin-bottom: 8px;
  background: var(--tnc-bg-2); border: 1px solid var(--tnc-line-soft);
}
.schedule .row .time { color: var(--tnc-orange); width: 56px; flex: none; }
.schedule .row .what { color: var(--tnc-cream); text-transform: uppercase; flex: 1; }
.schedule .row .tag { color: var(--tnc-muted); text-transform: uppercase; }
.schedule .row.is-now { background: var(--tnc-orange); border-color: var(--tnc-orange); }
.schedule .row.is-now .time, .schedule .row.is-now .what, .schedule .row.is-now .tag { color: #fff; }

/* Lista de locales sonando */
.network { display: grid; gap: 10px; }
.network .node {
  display: flex; align-items: center; gap: 16px;
  background: var(--tnc-panel); border: 1px solid var(--tnc-line);
  border-radius: var(--radius); padding: 16px 18px;
}
.network .badge {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--tnc-orange); border-radius: 3px; color: var(--tnc-orange);
  font-family: var(--font-display); font-weight: 700;
}
.network .node .meta { flex: 1; }
.network .node .name { color: var(--tnc-cream); font-weight: 600; font-family: var(--font-display); font-size: 1.15rem; }
.network .node .sub { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tnc-muted); margin-top: 3px; }

/* Tabla de exención país/entidad */
.exempt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.exempt-grid .cell {
  background: var(--tnc-panel); border: 1px solid var(--tnc-line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.exempt-grid .cell .top { display: flex; justify-content: space-between; align-items: center; }
.exempt-grid .cell .country { color: var(--tnc-cream); font-weight: 600; }
.exempt-grid .cell .x { color: var(--tnc-orange); font-size: .8rem; }
.exempt-grid .cell .ents { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tnc-faint); }

/* Planes / pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: var(--tnc-panel); border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 34px); position: relative;
}
.plan--feat { background: var(--tnc-orange); border-color: var(--tnc-orange); }
.plan--feat *, .plan--feat .checklist li { color: #fff !important; }
.plan--feat .checklist li::before { color: #fff; }
.plan--feat .plan-name { color: rgba(255,255,255,.8) !important; }
.plan .badge-top {
  position: absolute; top: -11px; right: 22px;
  background: var(--tnc-bg); border: 1px solid var(--tnc-orange); color: var(--tnc-orange);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 2px;
}
.plan-name { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tnc-orange); margin-bottom: 14px; }
.plan h3 { margin-bottom: 12px; }
.plan > p { color: var(--tnc-muted); font-size: .95rem; margin-bottom: 18px; }
.plan .checklist { margin-top: auto; }
.plans-foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.plans-foot .item { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--tnc-muted); display: inline-flex; gap: 7px; }
.plans-foot .item::before { content: "♪"; color: var(--tnc-orange); }

/* FAQ acordeón */
.faq { border-top: 1px solid var(--tnc-line); }
.faq-item { border-bottom: 1px solid var(--tnc-line); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; color: var(--tnc-cream); font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600;
}
.faq-q .ico { color: var(--tnc-orange); font-size: 1.4rem; flex: none; transition: transform .25s var(--ease); }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a p { padding-bottom: 24px; color: var(--tnc-muted); max-width: 70ch; }

/* CTA final */
.cta-band { position: relative; overflow: hidden; }
.cta-card {
  border: 1px solid var(--tnc-orange); border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 80px);
  display: grid; grid-template-columns: 1.3fr .9fr; gap: 50px; align-items: center;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--tnc-orange) 8%, transparent));
}
.cta-card h2 { margin-bottom: 18px; }

/* Vertical cards (home) */
.vert-card {
  display: flex; flex-direction: column; min-height: 230px;
  background: var(--tnc-panel); border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg); padding: clamp(22px,2.4vw,30px);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.vert-card:hover { border-color: var(--tnc-orange); transform: translateY(-4px); background: var(--tnc-panel-2); }
.vert-card .num { font-family: var(--font-mono); font-size: .72rem; color: var(--tnc-faint); letter-spacing: .14em; }
.vert-card h3 { margin: 14px 0 10px; }
.vert-card p { color: var(--tnc-muted); font-size: .94rem; flex: 1; }
.vert-card .go { margin-top: 18px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tnc-orange); display: inline-flex; gap: 8px; }
.vert-card:hover .go .arrow { transform: translateX(4px); }
.vert-card .go .arrow { transition: transform .2s var(--ease); }

/* Quote / testimonial */
.quote { background: var(--tnc-panel); border-left: 3px solid var(--tnc-orange); border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 28px; }
.quote p { color: var(--tnc-text); font-size: 1rem; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.quote .who .av { width: 34px; height: 34px; background: var(--tnc-orange); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: .7rem; border-radius: 3px; }
.quote .who .nm { color: var(--tnc-cream); font-weight: 600; font-size: .9rem; }
.quote .who .rl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tnc-muted); }

/* Carrusel de una sola reseña destacada (review-solo) */
.rev-solo { position: relative; max-width: 880px; margin: 30px auto 0; }
.rev-stage { position: relative; background: var(--tnc-panel-2); border: 1px solid var(--tnc-line); border-radius: var(--radius-lg); padding: clamp(28px,4vw,52px); overflow: hidden; }
.rev-stage::before { content: "\201C"; position: absolute; top: -.18em; left: .12em; font-family: var(--font-display); font-size: 8rem; line-height: 1; color: var(--tnc-orange); opacity: .16; pointer-events: none; }
.rev-slide { position: absolute; inset: clamp(28px,4vw,52px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rev-slide.is-active { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
.rev-slide blockquote { margin: 0; color: var(--tnc-cream); font-size: clamp(1.1rem,2.1vw,1.5rem); line-height: 1.5; font-weight: 500; }
.rev-slide .who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.rev-slide .who .av { width: 40px; height: 40px; background: var(--tnc-orange); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: .74rem; border-radius: 4px; flex: none; }
.rev-slide .who .nm { color: var(--tnc-cream); font-weight: 600; font-size: .95rem; }
.rev-slide .who .rl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tnc-muted); }
.rev-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.rev-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tnc-line); background: var(--tnc-panel); color: var(--tnc-cream); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.rev-btn:hover { border-color: var(--tnc-orange); color: var(--tnc-orange); }
.rev-btn:focus-visible { outline: 2px solid var(--tnc-orange); outline-offset: 2px; }
.rev-dots { display: flex; gap: 9px; }
.rev-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--tnc-line); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.rev-dot.is-active { background: var(--tnc-orange); transform: scale(1.25); }
.rev-dot:focus-visible { outline: 2px solid var(--tnc-orange); outline-offset: 2px; }

/* Sampler / muestreo musical (home) */
.sampler-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sample {
  display: flex; flex-direction: column; gap: 14px; text-align: left;
  background: var(--tnc-panel); border: 1px solid var(--tnc-line);
  border-radius: var(--radius-lg); padding: 20px 22px; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.sample:hover { border-color: var(--tnc-orange); transform: translateY(-3px); }
.sample.playing { border-color: var(--tnc-orange); background: var(--tnc-panel-2); }
.sample .s-top { display: flex; justify-content: space-between; align-items: center; }
.sample .s-tag {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tnc-orange); border: 1px solid var(--tnc-line); border-radius: 2px; padding: 4px 9px;
}
.sample .s-bpm { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--tnc-faint); }
.sample .s-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; line-height: .95; color: var(--tnc-cream); }
.sample .s-genre { font-size: .86rem; color: var(--tnc-muted); margin-top: -6px; }
.sample .s-bottom { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.sample .s-play {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--tnc-orange); color: #fff; display: grid; place-items: center;
  font-size: .9rem; transition: background .2s, transform .2s var(--ease);
}
.sample:hover .s-play { transform: scale(1.06); }
.sample .s-play .ico-pause { display: none; }
.sample.playing .s-play .ico-play { display: none; }
.sample.playing .s-play .ico-pause { display: inline; }
.sample .s-from { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tnc-faint); margin-left: auto; }
/* ecualizador del sampler: en pausa salvo que la card esté sonando */
.sample .eq { height: 22px; }
.sample .eq span { animation-play-state: paused; height: 5px; }
.sample.playing .eq span { animation-play-state: running; }
.sampler-note { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--tnc-faint); margin-top: 22px; }

/* Precio + tabla comparativa (página Precios) */
.price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--tnc-cream); line-height: 1; }
.price .cur { font-size: .6em; vertical-align: super; color: var(--tnc-muted); }
.price .per { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tnc-muted); display: block; margin-top: 8px; }
.plan .price { margin: 6px 0 16px; }
.plan--feat .price, .plan--feat .price .cur, .plan--feat .price .per { color: #fff !important; }
.table-scroll { overflow-x: auto; border: 1px solid var(--tnc-line); border-radius: var(--radius-lg); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: 16px 20px; border-bottom: 1px solid var(--tnc-line-soft); text-align: left; font-size: .92rem; }
.cmp thead th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tnc-muted); background: var(--tnc-bg-2); }
.cmp thead th.hl { color: var(--tnc-orange); }
.cmp td.c, .cmp th.c { text-align: center; }
.cmp .feat { color: var(--tnc-cream); font-weight: 500; }
.cmp .yes { color: var(--tnc-orange); font-weight: 700; }
.cmp .no { color: var(--tnc-faint); }
.cmp tbody tr:hover { background: var(--tnc-panel); }
.cmp td.hl { background: color-mix(in srgb, var(--tnc-orange) 7%, transparent); }

/* Fila de feature alterna (página Plataforma) */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; padding: clamp(40px,6vw,72px) 0; border-top: 1px solid var(--tnc-line-soft); }
.feature-row:nth-child(even) .feature-media { order: -1; }
.feature-row .eyebrow { margin-bottom: 16px; }
.feature-row h3 { margin-bottom: 16px; }

/* Índice de industrias: tarjetas grandes */
.ind-hero-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* Formulario (página Contacto) */
.form { display: grid; gap: 18px; }
.form .field { display: grid; gap: 7px; }
.form .field.two { grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tnc-muted); }
.form input, .form select, .form textarea {
  width: 100%; background: var(--tnc-bg-2); border: 1px solid var(--tnc-line);
  border-radius: var(--radius); padding: 13px 15px; color: var(--tnc-cream);
  font-family: var(--font-body); font-size: .96rem; transition: border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--tnc-orange); }
.form textarea { resize: vertical; min-height: 110px; }
.form .hint { font-size: .8rem; color: var(--tnc-faint); }
.contact-aside .item { padding: 18px 0; border-top: 1px solid var(--tnc-line-soft); }
.contact-aside .item .k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tnc-orange); }
.contact-aside .item .v { color: var(--tnc-cream); font-weight: 500; margin-top: 4px; }
@media (max-width: 680px){ .form .field.two { grid-template-columns: 1fr; } }

/* ===== FX club / energético (home v2) ===================================== */
/* Grano de film sutil sobre todo el sitio */
.fx-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Mesh de gradiente animado para el hero */
.hero-mesh {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  filter: blur(48px); opacity: .92;
  background:
    radial-gradient(28% 38% at 18% 28%, color-mix(in srgb, var(--tnc-orange) 60%, transparent), transparent 62%),
    radial-gradient(26% 36% at 58% 22%, color-mix(in srgb, var(--tnc-magenta) 50%, transparent), transparent 62%),
    radial-gradient(34% 46% at 78% 66%, color-mix(in srgb, var(--tnc-violet) 42%, transparent), transparent 64%),
    radial-gradient(24% 34% at 38% 82%, color-mix(in srgb, var(--tnc-orange) 38%, transparent), transparent 60%);
  animation: mesh 16s ease-in-out infinite alternate;
}
@keyframes mesh {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(-3%,2%,0) scale(1.12) rotate(2deg); }
  100% { transform: translate3d(3%,-2%,0) scale(1.06) rotate(-2deg); }
}
.hero-club .display { font-size: clamp(3.4rem, 11vw, 8.4rem); letter-spacing: -.02em; }
.hero-club::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(360px 360px at var(--mx, 30%) var(--my, 35%), color-mix(in srgb, var(--tnc-orange) 22%, transparent), transparent 70%);
}

/* Marquee / ticker en movimiento */
.marquee { overflow: hidden; padding-block: 16px; border-block: 1px solid var(--tnc-line); background: var(--tnc-bg-2); position: relative; z-index: 1; }
.marquee--bare { border: 0; background: transparent; padding-block: 6px; }
.marquee-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 2rem); color: var(--tnc-cream);
  padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; letter-spacing: .01em;
}
.marquee-item::after { content: "◆"; color: var(--tnc-orange); font-size: .5em; }
.marquee--brands .marquee-item { color: var(--tnc-faint); }
.marquee--brands .marquee-item:hover { color: var(--tnc-cream); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Brillo en hover de cards */
.card--hover { overflow: hidden; }
.card--hover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--tnc-orange) 18%, transparent), transparent 60%);
  transition: opacity .3s var(--ease);
}
.card--hover:hover::after { opacity: 1; }

/* Botón primario con leve glow al hover */
.btn--primary { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tnc-orange) 50%, transparent); }
.btn--primary:hover { box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--tnc-orange) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .marquee-track { animation: none !important; }
}

/* ===== Mockups e ilustraciones (home visual) ============================== */
/* Indicador "en vivo" reutilizable */
.live { border:1px solid var(--tnc-orange); color:var(--tnc-orange); padding:4px 10px; border-radius:2px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--tnc-orange); animation:pulse 1.6s infinite; }

/* Onda de audio animada */
.wave { display:flex; align-items:center; gap:3px; height:54px; width:100%; }
.wave span { flex:1; min-width:3px; height:30%; background:rgba(255,255,255,.9); border-radius:3px; animation:wv 1.1s ease-in-out infinite; }
@keyframes wv { 0%,100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
.wave span:nth-child(4n){ animation-delay:.1s } .wave span:nth-child(4n+1){ animation-delay:.35s }
.wave span:nth-child(4n+2){ animation-delay:.6s } .wave span:nth-child(4n+3){ animation-delay:.85s }
.wave span:nth-child(odd){ height:55% } .wave span:nth-child(3n){ height:80% } .wave span:nth-child(5n){ height:40% }

/* Tarjeta "now playing" (hero) */
.np { background:var(--tnc-panel); border:1px solid var(--tnc-line); border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,28px); box-shadow:var(--shadow); }
.np .np-top { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tnc-muted); margin-bottom:16px; }
.np .np-art { height:140px; border-radius:var(--radius); padding:16px; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(135deg, var(--tnc-orange), var(--tnc-magenta) 58%, var(--tnc-violet)); }
.np .np-title { font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--tnc-cream); margin-top:16px; line-height:1; }
.np .np-sub { font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tnc-muted); margin-top:8px; }
.np .slider { margin-top:14px; }

/* Showcase de dispositivos */
.devices { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.device { background:var(--tnc-panel); border:1px solid var(--tnc-line); border-radius:var(--radius-lg); padding:26px 22px; text-align:center; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.device:hover { border-color:var(--tnc-orange); transform:translateY(-4px); }
.device .d-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tnc-orange); }
.device .d-cap { color:var(--tnc-cream); font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin-top:14px; }
.device .d-mock { margin:8px auto 18px; }

/* Teléfono */
.phone { width:140px; aspect-ratio:9/18.5; border:1px solid var(--tnc-line); border-radius:24px; background:var(--tnc-bg-2); padding:12px 10px; position:relative; margin-inline:auto; }
.phone::before { content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:3px; background:var(--tnc-line); }
.phone .ph-scr { margin-top:18px; display:grid; gap:7px; }
.phone .ph-row { height:9px; border-radius:3px; background:var(--tnc-line); }
.phone .ph-row.hot { background:var(--tnc-orange); width:70%; }
.phone .ph-btn { margin-top:6px; height:22px; border-radius:5px; background:var(--tnc-orange); }

/* Dispositivo Box */
.box-dev { width:100%; aspect-ratio:5/3.4; border-radius:12px; border:1px solid var(--tnc-line); background:linear-gradient(160deg,#1c1612,#0d0b0a); padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.box-dev .bd-top { display:flex; justify-content:space-between; align-items:center; }
.box-dev .led { width:8px; height:8px; border-radius:50%; background:var(--tnc-orange); box-shadow:0 0 10px var(--tnc-orange); animation:pulse 1.8s infinite; }
.box-dev .bd-name { font-family:var(--font-display); font-weight:700; letter-spacing:.04em; color:var(--tnc-cream); font-size:1.1rem; }
.box-dev .bd-grid { display:flex; gap:5px; }
.box-dev .bd-grid i { flex:1; height:5px; border-radius:2px; background:var(--tnc-line); }
.box-dev .bd-grid i:nth-child(-n+3){ background:var(--tnc-orange); }

/* Panel mini (Studio) */
.panel-mock { background:var(--tnc-bg-2); border:1px solid var(--tnc-line); border-radius:10px; padding:14px; display:grid; gap:8px; }
.panel-mock .pm-bar { display:flex; align-items:center; gap:8px; }
.panel-mock .pm-bar .pm-l { height:7px; border-radius:3px; background:var(--tnc-line); flex:1; }
.panel-mock .pm-bar .pm-l.hot { background:var(--tnc-orange); }
.panel-mock .pm-dot { width:8px;height:8px;border-radius:50%;background:var(--tnc-orange);flex:none; }

/* Ícono glyph para features */
.glyph { width:40px; height:40px; border:1px solid var(--tnc-line); border-radius:9px; display:grid; place-items:center; color:var(--tnc-orange); margin-bottom:16px; }
.glyph svg { width:20px; height:20px; }

@media (max-width:680px){ .devices{ grid-template-columns:1fr; } .phone{ width:160px; } }

/* Box grande: specs de hardware */
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--tnc-line); border:1px solid var(--tnc-line); border-radius:var(--radius-lg); overflow:hidden; }
.spec-grid .spec { background:var(--tnc-panel); padding:16px 18px; }
.spec-grid .spec .s-k { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tnc-muted); }
.spec-grid .spec .s-v { font-family:var(--font-display); font-weight:600; color:var(--tnc-cream); font-size:1.18rem; margin-top:6px; }

/* Implementación en 28 días (timeline 4 semanas) */
.install { margin-top:clamp(36px,5vw,64px); }
.install-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:wk; }
.install-step { position:relative; background:var(--tnc-panel); border:1px solid var(--tnc-line); border-radius:var(--radius-lg); padding:24px 22px 26px; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.install-step:hover { border-color:var(--tnc-orange); transform:translateY(-4px); }
.install-step .wk { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tnc-orange); }
.install-step .wk-no { font-family:var(--font-display); font-weight:700; font-size:2.4rem; line-height:.9; color:var(--tnc-line); letter-spacing:-.02em; margin:10px 0 14px; transition:color .25s var(--ease); }
.install-step:hover .wk-no { color:var(--tnc-orange); }
.install-step h4 { font-family:var(--font-display); font-weight:600; color:var(--tnc-cream); font-size:1.18rem; margin-bottom:8px; }
.install-step p { color:var(--tnc-muted); font-size:.9rem; }
.install-track { display:flex; align-items:center; gap:14px; margin-top:18px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tnc-muted); }
.install-track .bar { flex:1; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--tnc-orange),var(--tnc-orange-2)); }
@media (max-width:880px){ .install-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .install-grid{ grid-template-columns:1fr; } .spec-grid{ grid-template-columns:1fr; } }

/* Bloque comparativo (con Tónica vs. sin Tónica) */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare .col { border:1px solid var(--tnc-line); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,32px); }
.compare .col--good { border-color:var(--tnc-orange); background:linear-gradient(160deg, color-mix(in srgb,var(--tnc-orange) 9%,transparent), transparent); }
.compare .col .c-head { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.compare .col--bad .c-head { color:var(--tnc-faint); }
.compare .col--good .c-head { color:var(--tnc-orange); }
.compare .col h3 { font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:14px; }
.compare .crow { display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--tnc-line-soft); color:var(--tnc-text); font-size:.95rem; }
.compare .col--bad .crow::before { content:"✕"; color:var(--tnc-faint); font-weight:700; flex:none; }
.compare .col--good .crow::before { content:"✓"; color:var(--tnc-orange); font-weight:700; flex:none; }
.compare .col--bad .crow { color:var(--tnc-muted); }
@media (max-width:680px){ .compare{ grid-template-columns:1fr; } }

/* 8. ANIMACIONES =========================================================== */
@keyframes glowdrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4%,3%,0) scale(1.08); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes eq {
  0%,100% { height: 5px; } 50% { height: 18px; }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

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

/* 8b. ACCESIBILIDAD (foco de teclado + anclas bajo el header fijo) ========== */
/* Anillo de foco visible solo para navegación por teclado, en el naranja de marca.
   No afecta el foco por puntero (usa :focus-visible). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tnc-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Los campos de formulario ya pintan su borde en naranja al enfocar: sumamos
   un halo suave para reforzar el estado de foco accesible. */
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tnc-orange) 35%, transparent);
}
/* Al saltar a una sección por ancla (#impacto, menús del nav, etc.) dejamos aire
   para que el header fijo no tape el título de destino. */
:target,
section[id],
[id] { scroll-margin-top: 96px; }

/* 9. RESPONSIVE ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .brand-frame { aspect-ratio: 16/9; }
  .split { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .exempt-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--tnc-panel-2); border-bottom: 1px solid var(--tnc-line);
    padding: 18px var(--gutter);
  }
  .nav-links.open .nav-drop { width: 100%; }
  .nav-links.open .nav-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 6px 0 0; min-width: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .exempt-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-band { grid-template-columns: repeat(2, 1fr); }
}