/* ============================================================================
 * brand.css — los tokens visuales del escaparate. FUENTE ÚNICA.
 *
 * Antes vivían duplicados en el <style> de CADA página (10 ficheros con el mismo
 * #4f46e5 escrito a mano). Cambiar la marca eran 10 ediciones y la garantía de que
 * en un mes divergieran. Ahora se cambia aquí y punto.
 *
 * ─── DIRECCIÓN, Y DE DÓNDE SALE ────────────────────────────────────────────
 * No es gusto: son medidas tomadas el 17 jul 2026 con Playwright sobre las webs
 * que el dueño señaló como referencia. Si alguien quiere cambiar una regla, que
 * mida primero.
 *
 *   apple.com/macbook-pro : titular 80px PESO 600 tracking -1.2px · CTA radio 8px
 *                           · 139 imágenes · 14 vídeos · 176 degradados
 *   apple.com (home)      : titular 56px peso 600 · texto #1D1D1F · CTA radio 8px
 *   linear.app            : 72px peso 510 tracking -1.58px · CTA radio 8px
 *   llmpulse.ai           : IBM Plex Sans · fondo BLANCO · acento azul eléctrico
 *                           rgb(47,0,255) · 215 imágenes · 453 gráficos · muro de logos
 *
 * Lo que esas medidas DESMIENTEN (y que casi meto por dogma):
 *   · "Cero degradados" era MENTIRA: Apple usa 176 en una sola página. Lo que no
 *     hace es un lavado violeta de fondo — los usa como LUZ sobre el producto.
 *   · Titulares peso 400 = tímido. Apple y Linear van a 600 y 510. El tell de "hecho
 *     con IA" no es el peso: es el 800 de golpe y el texto centrado sin jerarquía.
 *   · Apple no es CSS: es PRODUCTO FOTOGRAFIADO. 139 imágenes. El 90% del efecto
 *     está en enseñar la cosa, grande. Aquí el "producto" es la respuesta de la IA
 *     nombrando a tu competencia y no a ti. Ese es nuestro MacBook sobre negro.
 *
 * Las reglas:
 *  1. TITULAR grande, PESO 600, muy apretado (-0.03em). Nunca 800.
 *  2. CTA PRIMARIO NEGRO (Apple/Peec), radio 8px. El azul es para el DATO y el
 *     enlace, no para el botón: un botón azul de esquinas redondas es la firma
 *     exacta de la plantilla generada.
 *  3. NADA DE ÍNDIGO #4f46e5 NI VIOLETA. Es el morado por defecto de Tailwind.
 *     Ojo al matiz: llmpulse SÍ lleva acento azul-eléctrico y gusta. Lo que
 *     chirriaba no era el color: era el índigo por defecto. Cobalto puro, sin rojo.
 *  4. El color saturado se gana: acento en la frase clave del titular, y verde/rojo
 *     SOLO en el dato (apareces / no apareces).
 *  5. Radios Apple: 8px botón, 12px control, 18-22px tarjeta grande. Nunca 30px.
 *  6. Grises de Apple, medidos: texto #1D1D1F, secundario #86868B, fondo #F5F5F7.
 * ========================================================================== */

/* Geist: lo más cercano a SF Pro que se puede licenciar (SF es de Apple y no se
 * puede usar en web). NO Inter: es la fuente-firma de todo lo generado con IA.
 * NO IBM Plex: es la de llmpulse, y copiarle la tipografía es hacer su web. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* — superficie (grises de Apple, medidos) — */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F5F7;     /* el gris de apple.com */
  --black:#000000;          /* negro absoluto: el fondo de las páginas de producto */
  --line:#E5E5E7;
  --line-2:#D2D2D7;

  /* — tinta — */
  --ink:#1D1D1F;            /* el negro de Apple: NO es #000 */
  --ink-2:#4A4A4F;
  --ink-mute:#86868B;       /* el gris de Apple */
  --on-black:#F5F5F7;       /* texto sobre negro: hueso, nunca blanco puro */
  --on-black-mute:#A1A1A6;

  /* — acento: COBALTO. Sin rojo dentro = no vira a violeta. — */
  --accent:#0B5CFF;
  --accent-2:#0040D9;
  --accent-weak:#EBF1FF;
  --accent-glow:rgba(11,92,255,.28);

  /* — el halo de tarjetas y botones —
   * Vivían escritos a mano dentro de CADENAS DE JAVASCRIPT (el efecto 3D pinta el
   * box-shadow como estilo en línea al pasar el ratón), así que ningún cambio de color
   * por tokens podía alcanzarlos. Dos consecuencias, y la segunda es la fea:
   *   1. al servir el sitio con otra marca, las tarjetas seguían con el borde azul;
   *   2. la mitad de esos halos eran ÍNDIGO #4f46e5 / #6366f1 — el morado por defecto de
   *      Tailwind que la regla 3 de arriba prohíbe expresamente. Llevaban así desde el
   *      rediseño de julio: el acento de la página era cobalto y el halo, índigo.
   * Ahora son tokens. Si vuelve a aparecer un rgba() de marca dentro de un .js o de un
   * box-shadow, es un error: se declara aquí. */
  --glow-card:0 0 0 1.5px rgba(11,92,255,.85), 0 0 30px rgba(11,92,255,.28), 0 22px 55px rgba(16,24,40,.20);
  --glow-pro:0 0 0 1.5px rgba(4,120,87,.85), 0 0 30px rgba(16,185,129,.30), 0 22px 55px rgba(16,24,40,.22);
  --glow-btn:0 10px 30px -8px rgba(11,92,255,.40);
  --glow-focus:0 0 0 3px rgba(11,92,255,.18);

  /* — datos: lo ÚNICO que se pinta aparte del acento — */
  --pos:#12833F;  --pos-weak:#E7F5EC;   /* apareces */
  --neg:#D6301C;  --neg-weak:#FDECEA;   /* no apareces */
  --warn:#9A6200; --warn-weak:#FDF3E0;

  /* compatibilidad con lo ya escrito en las 10 páginas */
  --bg:var(--paper); --text:var(--ink); --text-2:var(--ink-2); --mute:var(--ink-mute);
  --pro:var(--pos); --pro-weak:var(--pos-weak); --pro-line:#BFE0CB;

  /* — forma (radios de Apple, medidos: el CTA de apple.com es 8px) — */
  --radius:12px; --radius-sm:8px; --radius-lg:22px; --radius-pill:980px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --shadow-lift:0 2px 6px rgba(0,0,0,.05), 0 30px 60px -24px rgba(0,0,0,.28);
  --shadow-hero:0 40px 90px -30px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.14);
  --ease:cubic-bezier(.16,1,.3,1);

  /* — tipografía — */
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* El titular. Apple: 80px/600/-1.2px. Linear: 72px/510/-1.58px.
     ⚠️ Los ESPACIOS alrededor del `+` son obligatorios: dentro de clamp()/calc()
     CSS los exige. Sin ellos la declaración entera es inválida y el h1 cae a 16px
     heredados — y en silencio, porque la variable SÍ existe: lo que no se puede
     parsear es su contenido ya sustituido. Pasó justo aquí el 17 jul 2026. */
  --h1-size:clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem);
  --h1-weight:600;
  --h1-tracking:-0.03em;
  --h1-leading:1.05;
}

h1,h2.display,.brand-display{
  font-family:var(--font-display);
  font-weight:var(--h1-weight);
  letter-spacing:var(--h1-tracking);
}
h1{ font-size:var(--h1-size); line-height:var(--h1-leading); }

/* La frase que se pinta. Una por titular: si pintas dos, no has elegido. */
h1 em, .accent{ color:var(--accent); font-style:normal; }

/* Cifras SIEMPRE en mono y tabulares: alinean en columna y se leen como medición. */
.num,.kpi__value,.price,.stat{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}

.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ============================================================================
 * CABECERA CANÓNICA — mismo logo, mismo menú y misma tipografía/tamaño en TODAS
 * las páginas. Antes cada página maquetaba su header (icono, nombre y tamaños
 * distintos). Ahora el componente vive AQUÍ: cada página usa el MISMO markup
 * (.brand > .mark > svg.mark__svg  +  .brand__txt > strong + span, y .top/.navlink)
 * y hereda un logo y unos tamaños idénticos. Fuente única, como el resto de tokens.
 * ========================================================================== */
/* Cabecera pegajosa: el menú persiste al hacer scroll. Fondo translúcido + desenfoque
 * (estilo Apple) para que el contenido pase por debajo sin taparse. z-index por debajo
 * del lightbox (100) y del banner de cookies. */
.top{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .mark{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);display:grid;place-content:center;flex:none}
.brand .mark__svg{width:26px;height:26px}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__txt strong{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.brand__txt span{font-size:11.5px;color:var(--ink-mute);font-weight:600;letter-spacing:.01em}
.top-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.navlink{font-size:13px;color:var(--ink-2);text-decoration:none;font-weight:600;white-space:nowrap}
.navlink:hover{color:var(--accent)}
.navlink--cta{color:var(--accent)}
.lang{font-size:12px;font-weight:700;white-space:nowrap}
.lang a{color:var(--ink-mute);text-decoration:none;padding:2px}
.lang a:hover,.lang a.on{color:var(--accent)}
@media(max-width:560px){.top{padding:14px 0}.top-right{gap:10px}.navlink{font-size:12px}}

/* ============================================================================
 * ILUSTRACIÓN "RESPUESTA DE IA" (.aic) — el mismo golpe del hero de la home, como
 * componente reutilizable: la IA responde con la competencia y tu marca no aparece.
 * Datos de EJEMPLO. Se usa en varias páginas de marketing. Rojo = el dato, no adorno.
 * ========================================================================== */
.aic{max-width:440px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 20px 18px;text-align:left}
.aic__head{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.aic__logo{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-content:center;flex:none}
.aic__logo svg{width:15px;height:15px}
.aic__eng{font-size:13px;font-weight:600;color:var(--ink)}
.aic__q{margin-left:auto;font-size:12px;color:var(--ink-mute);font-family:var(--font-mono)}
.aic__lead{font-size:13px;color:var(--ink-2);margin:14px 0 10px}
.aic__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aic__list li{display:flex;align-items:center;gap:10px;font-size:13.5px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;color:var(--ink)}
.aic__n{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);flex:none}
.aic__list b{font-weight:600}
.aic__list .c{margin-left:auto;font-size:11.5px;color:var(--ink-mute)}
.aic__you{border-color:var(--neg)!important;background:var(--neg-weak)}
.aic__you b{color:var(--neg)}
.aic__verdict{display:flex;align-items:center;gap:6px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-mute)}
.aic__verdict .num{color:var(--neg);font-weight:600;font-family:var(--font-mono)}
.aic__cap{text-align:center;font-size:11.5px;color:var(--ink-mute);margin:12px 0 0}

/* ============================================================================
 * MINI-PANEL (.mockp) — ilustración del RESULTADO que se compra: tu marca presente
 * y subiendo en el ranking. Variedad frente a .aic (que muestra el problema). Verde =
 * tu marca (apareces). Datos de EJEMPLO.
 * ========================================================================== */
.mockp{max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;text-align:left}
.mockp__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.mockp__dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.mockp__url{margin-left:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}
.mockp__body{padding:16px}
.mockp__kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mockp__kpi{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mockp__kpi .l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute)}
.mockp__kpi .v{font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.mockp__kpi .d{font-size:11px;font-weight:700;color:var(--pos)}
.mockp__rank{display:grid;gap:9px}
.mockp__row{display:grid;grid-template-columns:82px 1fr 40px;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.mockp__row .track{height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.mockp__row .fill{display:block;height:100%;border-radius:5px;background:var(--line-2)}
.mockp__row .pc{text-align:right;font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mockp__row--you{font-weight:700;color:var(--accent)}
.mockp__row--you .fill{background:var(--pos)}

/* ============================================================================
 * SCORECARD DE AUDITORÍA (.auditc) — ilustración del concepto AUDITORÍA: las 4
 * palancas que decide la cita (autoridad, entidad, cobertura, web) con su estado.
 * Es lo que produce la auditoría real. Datos de EJEMPLO.
 * ========================================================================== */
.auditc{max-width:460px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 20px;text-align:left}
.auditc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.auditc__badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-weak);border-radius:999px;padding:4px 11px}
.auditc__score{font-size:13px;color:var(--ink-mute);font-weight:600}
.auditc__score b{font-family:var(--font-mono);font-size:16px;color:var(--neg);font-weight:500;margin-left:5px}
.auditc__rows{list-style:none;margin:12px 0;padding:0;display:grid;gap:11px}
.auditc__rows li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:11px;font-size:13px;color:var(--ink-2)}
.auditc__rows .ic{width:18px;height:18px;border-radius:50%;display:grid;place-content:center;font-size:11px;font-weight:800;flex:none}
.auditc__rows li.ok .ic{background:var(--pos-weak);color:var(--pos)}
.auditc__rows li.bad .ic{background:var(--neg-weak);color:var(--neg)}
.auditc__rows li.warn .ic{background:var(--warn-weak);color:var(--warn)}
.auditc__rows .v{font-family:var(--font-mono);font-size:12px;color:var(--ink);font-weight:500;white-space:nowrap}
.auditc__foot{padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-mute)}
.auditc__foot b{color:var(--ink-2);font-weight:600}

/* ── HERO PARTIDO (dos columnas): copy + ilustración, como el hero de la home.
 * Integra la ilustración sin empujar el CTA/precios hacia abajo. */
.hero--split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;text-align:left}
.hero--split .hero__copy{min-width:0}
.hero--split .hero__copy>*{margin-left:0;margin-right:0}
.hero--split .hero__copy p,.hero--split .hero__copy .sub{max-width:42ch}
.hero--split .hero__art{min-width:0;display:flex;flex-direction:column}
@media(max-width:860px){
  .hero--split{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero--split .hero__copy p,.hero--split .hero__copy .sub{max-width:none;margin-left:auto;margin-right:auto}
  .hero--split .hero__art{max-width:440px;margin:0 auto;width:100%}
}

/* Respeta a quien pide menos movimiento (el tilt 3D ya lo hace en su JS). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}