/* ==========================================================================
   Buzz — dirección v2 (piloto)

   Toma el layout y los recursos de composición de intercom.com; conserva
   nuestra paleta, nuestros tokens y nuestra retícula. Se carga DESPUÉS de
   styles.css y pages.css: acá solo hay lo que cambia.

   Qué se tomó de ellos, y por qué funciona con lo nuestro:

   · Titular a dos tonos (gris → tinta). Ellos enfatizan con color de texto,
     no con negrita ni cursiva. Nuestro --ink-3 mide 5.23:1, así que la parte
     "apagada" sigue pasando AA. El azul deja de ser el énfasis del titular y
     se reserva para los acentos de producto: el color pasa a significar algo.
   · Serif en el cuerpo contra sans en el display. Ellos usan Honey, que es
     propietaria; acá va Newsreader, self-hosted, mismo rol.
   · Marcas cuadradas en vez de círculos, y marcas de registro en las esquinas
     de los paneles. Conversa con nuestra retícula de hairlines mejor que el
     círculo: los dos son lenguaje de hoja técnica.
   · Hero centrado con collage entrando por los bordes, y los mockups sobre
     fondo atmosférico en vez de superficie plana.

   Qué NO se tomó:
   · Su paleta (#000ce1 azul eléctrico, #ff5600 naranja). Van los nuestros.
   · Su nivel de contraste. #7b7b78 sobre #f4f3ec da ~3.9:1 y no pasa AA para
     texto de cuerpo. Nuestro piso sigue siendo --ink-3.
   ========================================================================== */

/* Serif de texto. Sin preload a propósito: es la voz del cuerpo, no del
   titular, así que puede llegar un cuadro más tarde sin costo perceptible. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --serif: 'Newsreader', ui-serif, Georgia, serif;
  --v2-mark: var(--brand-700);
  --nav-h: 60px;

  /* Los cuatro acentos en componentes RGB. Los degradados atmosféricos y el
     grano necesitan alfa variable, y rgba() no acepta un hex de una custom
     property: hace falta el triplete suelto. Mismos colores que --*-live. */
  --crm-rgb:  34, 211, 238;   /* #22D3EE cian    */
  --agt-rgb:  56, 189, 248;   /* #38BDF8 celeste */
  --desk-rgb: 84, 163, 242;   /* #54A3F2 azul    */
  --wave-rgb: 76, 111, 255;   /* #4C6FFF índigo  */
}


/* ==========================================================================
   Barra de anuncio
   ========================================================================== */
.announce {
  position: relative; z-index: 101;
  background: var(--ink); color: #FEFEFD;
  font-size: 13.5px; letter-spacing: -.005em;
}
.announce__in {
  max-width: var(--maxw); margin: 0 auto; padding: 9px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
}
.announce a {
  color: #FEFEFD; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px;
}
.announce a:hover { text-decoration-color: #FEFEFD; }
.announce__x {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: rgba(255,255,255,.6);
}
.announce__x:hover { color: #FEFEFD; background: rgba(255,255,255,.1); }
.announce__x svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
.announce[hidden] { display: none; }
@media (max-width: 700px) { .announce__x { display: none; } .announce__in { padding-right: var(--gutter); } }


/* ==========================================================================
   Marca cuadrada · reemplaza al .dot circular
   ========================================================================== */
.sq {
  width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--c, var(--v2-mark));
}

/* Marcas de registro en las esquinas de un panel. Es el recurso que ellos
   usan para que un panel sin borde siga leyéndose como un recorte. */
.reg { position: relative; }
.reg::before, .reg::after {
  content: ''; position: absolute; width: 5px; height: 5px; z-index: 2;
  background: var(--line-strong); border-radius: 1px; pointer-events: none;
}
.reg::before { top: 10px; left: 10px; }
.reg::after  { bottom: 10px; right: 10px; }
.reg > .reg__b, .reg > .reg__c { position: absolute; width: 5px; height: 5px; z-index: 2; background: var(--line-strong); border-radius: 1px; }
.reg > .reg__b { top: 10px; right: 10px; }
.reg > .reg__c { bottom: 10px; left: 10px; }


/* ==========================================================================
   Titular a dos tonos
   El recurso central de la dirección: la frase arranca apagada y aterriza en
   tinta plena. Lo que queda en negro es la promesa; el resto es andamiaje
   gramatical.
   ========================================================================== */
.dim { color: var(--ink-3); }
.h1 em, .h2 em { font-style: normal; color: inherit; }   /* el azul sale del titular */

.v2 .h1 {
  font-size: clamp(38px, 6.6vw, 86px);
  line-height: .98; letter-spacing: -.042em; font-weight: 700;
}
.v2 .h2 {
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 700;
}

/* Cuerpo en serif. Solo leads y prosa: las listas, chips y labels se quedan
   en sans, que es donde el sans rinde. */
.v2 .lead, .v2 .cta p, .v2 .empty p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55; letter-spacing: -.005em; color: var(--ink-2);
}
.v2 .prose p { font-family: var(--serif); font-size: 18.5px; line-height: 1.62; }


/* ==========================================================================
   Hero centrado, con collage entrando por los bordes
   ========================================================================== */
.vhero {
  position: relative; isolation: isolate; overflow: clip;
  padding: var(--s9) 0 var(--s7); text-align: center;
}
.vhero__in { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: 0 var(--gutter); }

.proof {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--s6);
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3);
}
/* Cada industria es una unidad: el cuadrito y su etiqueta nunca se separan al
   envolver. Sueltos como hermanos del flex, a 375px el cuarto par quedaba
   partido y "Educación" caía sola a una segunda línea. */
.proof__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.vhero h1 { margin-bottom: var(--s5); }
.vhero .lead { margin: 0 auto var(--s6); max-width: 58ch; }
.vhero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

.assure {
  /* flex-start y no center: cuando el texto pasa a dos líneas, centrar deja el
     check flotando a media altura, lejos de la primera palabra. */
  margin-top: var(--s5); display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--ink-3); text-align: left;
}
.assure svg {
  width: 15px; height: 15px; margin-top: 3px; flex: none;
  stroke: var(--crm-ink); stroke-width: 2.2; fill: none;
}

/* El collage. Cuatro paneles en ángulo, dos por lado, cortados por el borde
   del viewport. Cada uno lleva el lavado de un producto — es el lugar donde
   la rampa cian→índigo se muestra entera de un vistazo.

   Son SLOTS DE FOTO. Hoy los llena un degradado de nuestra paleta más un
   fragmento de mockup; el día que haya fotografía, se cambia el contenido de
   .shot__fill y el layout no se toca. */
.collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@media (max-width: 1180px) { .collage { display: none; } }

.shot {
  position: absolute; overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -28px rgba(12,40,80,.28), 0 2px 6px rgba(12,30,58,.06);
}
/* El lavado va MUY bajo. Un degradado saturado a este tamaño se lee como
   mancha decorativa y le pelea el foco al titular, que es lo único que la
   gente tiene que leer en el hero. */
.shot__fill {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(var(--g1), .30), transparent 72%),
    radial-gradient(110% 100% at 85% 95%, rgba(var(--g2), .20), transparent 74%),
    var(--surface);
}
.shot__fill::after {
  content: ''; position: absolute; inset: 0; opacity: .45;
  background-image: radial-gradient(rgba(11,11,13,.05) .5px, transparent .5px);
  background-size: 3px 3px;
}
/* Adentro va un fragmento real de la UI del producto, recortado. Ellos ponen
   fotos de personas; nosotros no tenemos banco de imágenes, y una foto de
   stock genérica valdría menos que mostrar el producto. El recorte deja el
   fragmento a medio salir, que es lo que hace que se lea como fragmento. */
.shot__ui {
  position: absolute; inset: 13px 0 auto 13px;
  width: 290px; transform-origin: top left; transform: scale(.70);
  pointer-events: none;
}
.shot__ui .mock { box-shadow: var(--shadow-sm); border-color: var(--line); }
.shot__ui .mock__body { padding: var(--s4); }
.shot__ui .mrow { padding: 7px 0; }
.shot__ui .instr__item { padding: 8px 10px; }


.shot--a { width: 214px; height: 176px; left: -18px;  top: 92px;  transform: rotate(-4deg); }
.shot--b { width: 214px; height: 150px; left: 16px;   top: 320px; transform: rotate(3deg); }
.shot--c { width: 214px; height: 152px; right: -24px; top: 88px;  transform: rotate(4deg); }
.shot--d { width: 214px; height: 176px; right: 22px;  top: 300px; transform: rotate(-3deg); }

/* Marcas de registro del hero, en las cuatro esquinas del ancho útil. */
.vhero__marks span {
  position: absolute; width: 6px; height: 6px; border-radius: 1px;
  background: var(--brand-500); opacity: .85;
}
.vhero__marks span:nth-child(1) { left: var(--gutter);  top: 34px; }
.vhero__marks span:nth-child(2) { right: var(--gutter); top: 34px; }
.vhero__marks span:nth-child(3) { left: var(--gutter);  bottom: 22px; }
.vhero__marks span:nth-child(4) { right: var(--gutter); bottom: 22px; }


/* ==========================================================================
   Kickers de producto · las cuatro etiquetas con su cuadrado de color
   Es el recurso que en Intercom marca "helpdesk + Fin". Con cuatro productos
   rinde más: se lee el porfolio entero en una línea de 11px.
   ========================================================================== */
.kickers { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s5); }
.kick {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2);
}


/* ==========================================================================
   Escenario + tabs como contenido
   El patrón más distintivo de ellos: un panel grande de media arriba y, abajo,
   una fila donde cada tab es un bloque de contenido con título, bajada y
   enlace. La fila no es un control accesorio: es la sección.
   ========================================================================== */
.stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  padding: var(--s8) var(--s7);
  background: var(--w, var(--surface-alt));
  border: 1px solid var(--line);
  min-height: 440px; display: grid; place-items: center;
  transition: background var(--dur-slow) var(--ease);
}
/* El fondo atmosférico: lo que ellos resuelven con una foto desenfocada. */
.stage::before {
  content: ''; position: absolute; inset: -30%;
  background:
    radial-gradient(42% 46% at 24% 30%, rgba(var(--g1), .85), transparent 66%),
    radial-gradient(46% 50% at 76% 72%, rgba(var(--g2), .7), transparent 68%);
  filter: blur(46px) saturate(1.05);
  transition: opacity var(--dur-slow) var(--ease);
}
.stage__panes { position: relative; z-index: 1; width: 100%; max-width: 720px; }
.stage__pane { display: none; }
.stage__pane.is-on { display: block; }

.tabstrip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); margin-top: var(--s6);
}
.tab {
  position: relative; text-align: left; padding: var(--s5) var(--s4) var(--s6);
  border-top: 2px solid transparent; border-left: 1px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:first-child { border-left: none; }
.tab__t {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--s3);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.tab p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.tab__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s4);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease);
}
.tab__go svg { width: 14px; height: 14px; }

/* El tab activo no se distingue por relleno fuerte sino por el filo de color
   arriba y por recuperar el contraste: los demás se apagan. */
.tab.is-on { border-top-color: var(--c); background: var(--surface); }
.tab.is-on .tab__t { color: var(--ink); }
.tab.is-on p { color: var(--ink-2); }
.tab.is-on .tab__go { color: var(--ci); border-bottom-color: currentColor; }
.tab:hover .tab__t { color: var(--ink); }

@media (max-width: 900px) {
  .tabstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab:nth-child(3) { border-left: none; }
  .tab:nth-child(n+3) { border-top-width: 2px; }
  .stage { min-height: 0; padding: var(--s6) var(--s5); }
}
@media (max-width: 560px) {
  .tabstrip { grid-template-columns: minmax(0, 1fr); }
  .tab { border-left: none; }
}


/* ==========================================================================
   Mockups sobre fondo atmosférico
   ========================================================================== */
.mstage {
  position: relative; border-radius: var(--r-lg); padding: var(--s7);
  background: var(--w); overflow: hidden;
}
.mstage::before {
  content: ''; position: absolute; inset: -25%;
  background:
    radial-gradient(40% 44% at 22% 26%, rgba(var(--g1), .8), transparent 64%),
    radial-gradient(44% 48% at 78% 74%, rgba(var(--g2), .62), transparent 66%);
  filter: blur(42px);
}
.mstage > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .mstage { padding: var(--s5); } }


/* ==========================================================================
   Ajustes al resto del sistema
   ========================================================================== */
/* Viñetas cuadradas en las listas de features. */
.v2 .feats li > svg { display: none; }
.v2 .feats li::before {
  content: ''; width: 7px; height: 7px; border-radius: 1px; flex: none;
  margin-top: 9px; background: var(--ci);
}

/* Los encabezados de sección van a la izquierda y respiran más. */
.v2 .section { padding: calc(var(--s10) + 16px) 0; }
.v2 .section-head { max-width: 60ch; margin-bottom: var(--s8); }

/* Botones un punto menos redondos y sin halo: el brillo del azul competía con
   el collage. La presión del click se mantiene. */
.v2 .btn { border-radius: 10px; }
.v2 .btn--primary { box-shadow: none; }
.v2 .btn--primary:hover { box-shadow: 0 6px 20px -8px rgba(16,112,209,.4); }

/* La retícula es nuestra y se queda, un punto más tenue para que el collage
   y los degradados tengan lugar. */
.v2 .rules span { border-left-color: color-mix(in srgb, var(--line) 70%, transparent); }

.v2 .chapter i { color: var(--ink-3); }
.v2 .eyebrow b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .stage, .stage::before, .tab, .tab__t, .tab p, .tab__go { transition: none; }
}


/* ==========================================================================
   Prueba social · fila simple
   El muro en grilla sirve en /clientes/, donde los logos son el contenido.
   Acá son de reojo: van en una fila sin marco, centrada, y respiran.
   ========================================================================== */
.logorow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s6) var(--s8); padding: var(--s2) 0;
}
.logorow img { height: 27px; width: auto; opacity: .72; }
.logorow img.is-dark { filter: brightness(0); opacity: .6; }
.logorow img[src*="dlocalgo"] { height: 33px; }
@media (max-width: 640px) { .logorow { gap: var(--s5) var(--s6); } .logorow img { height: 22px; } }

/* La franja de logos no es una sección: es el pie del hero. Se le saca el
   ritmo de sección para que no abra 144px de aire contra el hero. */
.v2 .section--proof { padding: var(--s6) 0 var(--s9); }
.v2 .section--proof .clients__label { margin-bottom: var(--s5); }

/* ==========================================================================
   Contencion de la aurora
   ========================================================================== */
/* La aurora se declara con inset negativo (-504px a cada lado). No genera
   scroll horizontal porque <html> lleva overflow-x: clip, pero sin contener
   obliga al compositor a pintar ~2.450px de gradiente desenfocado para mostrar
   1.440. Recortarla en su propia seccion evita ese trabajo de mas.
   clip y no hidden: hidden crearia un contenedor de scroll y rompe position:
   sticky en los descendientes. */
.v2 .phead,
.v2 .cta-section,
.v2 .section--alt { overflow: clip; }

/* ==========================================================================
   Logos: nunca deformados
   ========================================================================== */
/* .logo-wall img y .case__logo fijan height y dejan width:auto, pero el
   max-width:100% de la celda recorta el ancho de los logos mas apaisados
   (Astroselling 6.25:1, CumaeLearn 6.81:1) y los aplasta: quedan renderizando
   a 4.7:1. object-fit:contain hace que al toparse con el limite el logo se
   achique en proporcion en vez de distorsionarse. */
.logo-wall img,
.case__logo { object-fit: contain; object-position: center; }

/* ==========================================================================
   Comparativas
   ========================================================================== */

/* Utilidad que el sistema no tenia: texto solo para lectores de pantalla.
   La usa el <caption> de la tabla, que debe existir para accesibilidad pero
   duplicaria el h2 si se mostrara. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Las dos rutas ------------------------------------------------------- */
/* Gemelas y del mismo peso visual a proposito: si una se ve como la opcion
   "buena", la bifurcacion deja de funcionar y perdes al que no queria migrar. */
.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.route {
  display: flex; flex-direction: column;
  padding: var(--s7) var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg);
}
.route__k {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.route h3 { margin-bottom: var(--s3); }
.route > p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin-bottom: var(--s5); }
.route .feats { margin-top: auto; margin-bottom: var(--s6); }
/* Sin <svg> en los items: el sistema pinta el bullet con ::before (regla .v2 .feats) */
.route .btn { align-self: flex-start; }

/* --- Tabla comparativa --------------------------------------------------- */
.cmp { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); overflow: hidden; }
.cmp__t { width: 100%; border-collapse: collapse; font-size: 15px; }

.cmp__t thead th {
  position: sticky; top: var(--nav-h); z-index: 3;
  background: var(--surface-alt);
  padding: var(--s4) var(--s5); text-align: left;
  font-size: 12.5px; font-family: var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.cmp__t thead th.cmp__me { color: var(--ink); }

.cmp__t tbody th {
  text-align: left; font-weight: 600; color: var(--ink);
  padding: var(--s5); vertical-align: top; width: 22%;
  border-top: 1px solid var(--line);
}
.cmp__t tbody td {
  padding: var(--s5); vertical-align: top; color: var(--ink-2);
  line-height: 1.5; border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* Zebra con color solido, no con opacidad: sobre el fondo hueso la opacidad
   ensucia el tono en vez de aclararlo. */
.cmp__t tbody tr:nth-child(even) th,
.cmp__t tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }

.cmp__t td.cmp__me { color: var(--ink); background: color-mix(in srgb, var(--crm-wash) 60%, transparent); }
.cmp__t tbody tr:nth-child(even) td.cmp__me { background: color-mix(in srgb, var(--crm-wash) 85%, transparent); }
.cmp__t b { color: var(--ink); font-weight: 600; }

/* Nota al pie: cada dato sobre un competidor apunta a su fuente fechada. */
.fn {
  display: inline-block; margin-left: 4px; vertical-align: super;
  font-size: 10.5px; font-family: var(--mono); color: var(--ink-3);
  text-decoration: none; border-bottom: 0;
}
.fn:hover { color: var(--brand-700); }

.cmp__note {
  margin-top: var(--s5); font-size: 14.5px; line-height: 1.6; color: var(--ink-3);
  max-width: 78ch;
}
.cmp__note b { color: var(--ink-2); }

/* --- Fuentes ------------------------------------------------------------- */
.sources {
  padding: var(--s6); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface-alt);
}
.sources__k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4);
}
.sources__l { margin: 0 0 var(--s5) var(--s5); display: grid; gap: var(--s3); }
.sources__l li { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.sources__l b { color: var(--ink); }
.sources__d { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin-top: var(--s3); }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 900px) {
  .routes { grid-template-columns: 1fr; }

  /* Una tabla de 4 columnas no se scrollea en horizontal: se transpone.
     Cada fila pasa a ser una tarjeta con el criterio como titulo y una linea
     por producto, etiquetada con data-l. Mismo markup, otra presentacion. */
  .cmp { border: 0; background: none; }
  .cmp__t, .cmp__t tbody, .cmp__t tr, .cmp__t th, .cmp__t td { display: block; width: auto; }
  .cmp__t thead { display: none; }

  .cmp__t tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--bg); margin-bottom: var(--s4); overflow: hidden;
  }
  .cmp__t tbody th {
    width: auto; padding: var(--s4) var(--s5);
    background: var(--surface-alt); border-top: 0;
    font-size: 14px;
  }
  .cmp__t tbody td {
    padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 92px);
    border-left: 0; position: relative; font-size: 14.5px;
  }
  .cmp__t tbody tr:nth-child(even) th { background: var(--surface-alt); }
  .cmp__t tbody tr:nth-child(even) td { background: transparent; }
  .cmp__t tbody td::before {
    content: attr(data-l); position: absolute; left: var(--s5); top: var(--s4);
    width: 84px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .cmp__t tbody td.cmp__me { background: color-mix(in srgb, var(--crm-wash) 70%, transparent); }
  .cmp__t tbody tr:nth-child(even) td.cmp__me { background: color-mix(in srgb, var(--crm-wash) 70%, transparent); }
}

/* ==========================================================================
   Tabs: el contenedor es la tarjeta, adentro hay dos controles reales
   ==========================================================================
   Antes cada tab era un solo <button> con un "Ver X →" decorativo adentro:
   parecia un enlace y no navegaba a ningun lado. Ahora la tarjeta (.tab) es un
   div y contiene el boton que cambia el panel (.tab__hit) mas un enlace de
   verdad al producto (.tab__go). Un <a> no puede ir dentro de un <button>. */
.tab { display: flex; flex-direction: column; align-items: flex-start; }

.tab__hit {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; cursor: pointer;
}
.tab__hit:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 4px; border-radius: var(--r-sm); }

/* Enlace real: 44px de alto util para el dedo, no solo el alto del texto. */
.tab__go {
  min-height: 44px; align-items: center;
  border-bottom: 0;   /* el subrayado lo pinta .tab.is-on, no el estado base */
}
.tab__go:hover { color: var(--ci, var(--brand-700)); }
.tab__go:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 3px; border-radius: var(--r-sm); }

/* El subrayado del activo se pinta sobre el texto, no sobre la caja de 44px */
.tab.is-on .tab__go { color: var(--ci); border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }

.tab:hover .tab__t { color: var(--ink); }

/* ==========================================================================
   Mockups de producto: metricas y campana
   ==========================================================================
   Recrean en CSS las pantallas reales de BuzzAgents y BuzzWave. Se dibujan en
   vez de usar una captura por tres razones: escalan a cualquier densidad de
   pantalla, se leen en mobile, y no publican datos operativos de un cliente. */

/* --- Tarjetas de metrica ------------------------------------------------- */
.mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.mtiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mtile {
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); border-top: 2px solid var(--c, var(--line));
}
.mtile__k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.mtile__v {
  font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.mtile__u { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mtile__t {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mtile__t span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 5px;
}
.mtile__t code { font-size: 11px; }
.mtile--sm { padding: var(--s3); }
.mtile--sm .mtile__v { font-size: 21px; }

/* --- Distribucion por tipo ----------------------------------------------- */
.mdist { display: flex; align-items: center; gap: var(--s6); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.mdist__ring {
  width: 82px; height: 82px; flex: none; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--agt-live) 0 49%, var(--crm-live) 49% 81%, var(--desk-live) 81% 100%);
  position: relative;
}
.mdist__ring::before { content: ''; position: absolute; inset: 13px; background: var(--bg); border-radius: 50%; }
.mdist__ring span, .mdist__ring small { position: relative; z-index: 1; display: block; }
.mdist__ring span { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mdist__ring small { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mdist__l { display: grid; gap: 7px; flex: 1; min-width: 0; }
.mdist__l li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.mdist__l i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mdist__l b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Detalle de campana --------------------------------------------------- */
.camp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.camp__name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.camp__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.camp__meta code { font-size: 11px; }

.camp__bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.camp__bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.camp__prog { display: flex; justify-content: space-between; margin: 6px 0 var(--s4); font-size: 11.5px; color: var(--ink-3); }
.camp__prog b { color: var(--ink); font-variant-numeric: tabular-nums; }

.camp__rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.camp__rule { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.camp__rk { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.camp__rule code { font-size: 11px; }
.camp__rs { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

.camp__cronk { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.camp__cron { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.crow {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--s3);
  padding: 9px var(--s4); font-size: 12px; color: var(--ink-2);
  border-top: 1px solid var(--line); background: var(--bg);
}
.crow:first-child { border-top: 0; }
.crow b { color: var(--ink); font-variant-numeric: tabular-nums; }
.crow__s { color: var(--ink-3); font-size: 11.5px; }

@media (max-width: 720px) {
  .mtiles, .mtiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp__rules { grid-template-columns: 1fr; }
  .mdist { flex-direction: column; align-items: flex-start; }
  .mdist__l { width: 100%; }
  .crow { grid-template-columns: 1fr auto auto; }
  .crow__s { display: none; }
}

/* ==========================================================================
   Banner de consentimiento
   ==========================================================================
   Aceptar y Rechazar con el mismo peso visual. Un "Rechazar" escondido o en
   gris claro es un patron oscuro y, ademas, invalida el consentimiento: tiene
   que ser tan facil negarse como aceptar. */
.cbanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--bg); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 30px -18px rgba(11, 11, 13, .28);
  transform: translateY(100%);
  transition: transform 320ms var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.cbanner.is-in { transform: none; }

.cbanner__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s5) var(--gutter);
  display: flex; align-items: center; gap: var(--s6);
}
.cbanner__t { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.cbanner__d { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 72ch; }
.cbanner__d a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.cbanner__d a:hover { border-bottom-color: var(--ink); }
.cbanner__ax { display: flex; gap: var(--s3); flex: none; margin-left: auto; }
/* El .btn--sm del sistema mide 40px; en pantalla tactil sube a 44. */
@media (pointer: coarse) { .cbanner__ax .btn { min-height: 44px; } }

@media (max-width: 760px) {
  .cbanner__in { flex-direction: column; align-items: stretch; gap: var(--s4); }
  .cbanner__ax { margin-left: 0; }
  .cbanner__ax .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cbanner { transition: none; transform: none; }
}

/* ==========================================================================
   Paginas legales
   ==========================================================================
   Medida de linea corta y jerarquia clara: un texto legal que no se puede leer
   no cumple su funcion, por mas completo que sea. */
.legal { max-width: 72ch; }
.legal h2 { margin: var(--s8) 0 var(--s4); }
.legal h2:first-child { margin-top: 0; }
.legal__h {
  margin: var(--s6) 0 var(--s3);
  font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.legal p { margin-bottom: var(--s4); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal p b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.legal a:hover { border-bottom-color: var(--ink); }
.legal code { font-size: 14px; }

.legal__l { margin: 0 0 var(--s4) var(--s5); display: grid; gap: var(--s3); }
.legal__l li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.legal__l b { color: var(--ink); font-weight: 600; }

.legal__tw { margin-bottom: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.legal__t { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal__t th, .legal__t td { padding: var(--s4); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.legal__t thead th {
  background: var(--surface-alt); border-top: 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.legal__t tbody th { font-weight: 600; color: var(--ink); }
.legal__t tbody td { color: var(--ink-2); }

.legal__n { font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }

.legal .btn { margin-top: var(--s2); }

@media (max-width: 640px) {
  .legal__t, .legal__t tbody, .legal__t tr, .legal__t th, .legal__t td { display: block; width: auto; }
  .legal__t thead { display: none; }
  .legal__t tbody tr { border-top: 1px solid var(--line); }
  .legal__t tbody tr:first-child { border-top: 0; }
  .legal__t tbody th { background: var(--surface-alt); border-top: 0; }
  .legal__t tbody td { border-top: 0; padding-top: 0; }
}