/* =============================================================================
   PORTFOLIO COPILOT — SISTEMA VISUAL v3

   QUÉ ESTABA MAL EN LA VERSIÓN ANTERIOR, PORQUE LA CRÍTICA ERA CORRECTA.

   Elegí una estética de informe impreso: todo pequeño, todo en versalitas
   monoespaciadas, filetes de un píxel y cero movimiento. Es coherente y es
   AUSTERA — y austero no es lo mismo que serio. Un producto que quiere que
   alguien se quede necesita presencia, y presencia significa tres cosas
   concretas que aquí faltaban:

   1. ESCALA. El texto era de 13-15px en todas partes y los titulares de 13px en
      monoespaciada. Eso no se lee, se descifra. Un titular grande no es
      decoración: es lo que permite entender una pantalla de un vistazo antes de
      decidir si merece la pena leerla.

   2. TIPOGRAFÍA CON CARÁCTER. Usar monoespaciada para los TÍTULOS la hace
      parecer una terminal, que es justo lo "robótico" de la crítica. La
      monoespaciada es perfecta para CIFRAS —alinea decimales— y mala para
      prosa. Aquí se separa: Geist para todo lo que se lee, Geist Mono solo
      para lo que se compara.

   3. MOVIMIENTO. No animaciones por animar: transiciones cortas al pasar el
      ratón y una aparición suave al bajar. Su función es confirmar que algo
      responde y guiar la mirada, no entretener. Todo se apaga solo si el
      sistema del usuario pide menos movimiento.

   LO QUE SE CONSERVA, porque era lo bueno: las secciones numeradas, las cifras
   en monoespaciada con anchura fija, un único acento, y que el verde y el rojo
   signifiquen solo el signo de un número.

   Geist es la tipografía de la referencia que Sergio puso como ejemplo, y está
   en Google Fonts. Es una grotesca humanista: geométrica sin ser fría, que es
   exactamente el punto medio que faltaba.
   ============================================================================= */

:root {
  /* --- NEUTROS ---------------------------------------------------------
     Una escala de grises con nombre, no hexadecimales sueltos repartidos por la
     hoja: los gráficos, los bordes y los fondos beben de LA MISMA escala, así
     que el modo oscuro no puede quedarse a medias en un sitio.

     El matiz es AZULADO y muy desaturado. Un gris neutro puro se ve muerto al
     lado de un acento saturado, y uno cálido tira a sepia. El frío es lo que
     hace que esto se lea como un instrumento y no como un folleto. */
  --g-0:  #ffffff;
  --g-5:  #fafafc;
  --g-10: #f2f3f7;
  --g-20: #e4e6ee;
  --g-30: #ced2e0;
  --g-50: #7f849b;
  --g-70: #464b62;
  --g-85: #22253a;
  --g-95: #101124;

  --fondo: var(--g-5);
  --fondo-alt: var(--g-10);
  --superficie: var(--g-0);
  --superficie-tenue: var(--g-10);
  --linea: var(--g-20);
  --linea-fuerte: var(--g-30);
  --texto: var(--g-95);
  --texto-medio: var(--g-70);
  --texto-tenue: var(--g-50);

  /* --- EL ACENTO -------------------------------------------------------
     ÍNDIGO ELÉCTRICO, y el verde azulado anterior se ha ido por dos motivos,
     uno de gusto y otro estructural.

     El estructural manda: el verde y el rojo ya están ocupados por el SIGNO de
     un número, que es la señal más leída de toda la aplicación. Un acento de
     marca verdoso compite con ella todo el rato — un botón verde al lado de una
     cifra verde obliga a decidir, cada vez, cuál de los dos verdes significa
     "ha subido". Un acento que no puede confundirse con un signo deja esa señal
     limpia.

     Y el índigo no es azul corporativo de banco: está lo bastante hacia el
     violeta para tener carácter sin irse a lo fantasioso. */
  --acento: #4438ca;
  --acento-claro: #6c5ce7;
  --acento-tenue: #eeecfd;
  --sobre-acento: #ffffff;

  /* La capa de IA va en el mismo índigo pero más claro y siempre sobre
     superficie tenue. Se probó con un segundo tono y era ruido: dos acentos
     saturados en la misma pantalla se pelean y ninguno significa ya nada. */
  --ia: #6c5ce7;
  --ia-tenue: #f1effe;

  /* La marca tiene sus propios tokens porque NO sigue al tema: el cuadrado es
     oscuro en claro y en oscuro, igual que un logotipo impreso. Un logo que
     cambia de color de fondo con el tema deja de ser un logo. */
  --marca-fondo: #101124;
  --marca-tinta: #f2f3ff;

  --positivo: #067a4e;
  --negativo: #c0311f;
  --aviso: #8a5a00;
  --aviso-fondo: #fdf8ec;

  --radio: 8px;
  --radio-s: 5px;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Una sola curva y dos duraciones para todo el sistema. Que cada elemento invente su propio tiempo es lo que hace que una interfaz se sienta descoordinada sin que nadie sepa decir por qué. */
  --curva: cubic-bezier(.4, 0, .2, 1);
  --rapido: 140ms;
  --medio: 320ms;
}

/* =============================================================================
   MODO OSCURO, Y POR QUÉ ESTÁ ESCRITO DOS VECES

   La misma lista de colores aparece en dos selectores, y la repetición es
   deliberada porque CSS no tiene forma de reutilizar un bloque de variables.

   El primer selector atiende a quien no ha elegido: sigue la preferencia del
   sistema. Lleva `:not([data-theme="light"])` para que elegir "claro" a mano
   GANE sobre un sistema en oscuro — sin esa negación, el interruptor no
   funcionaría de noche, que es justo cuando alguien lo busca.

   El segundo atiende a quien sí ha elegido oscuro, tenga el sistema que tenga.

   El orden importa: va después del bloque claro, así que en un sistema en claro
   con el tema en oscuro, este bloque es el que manda.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-0:  #0b0c17;
    --g-5:  #0e0f1c;
    --g-10: #171a2b;
    --g-20: #232742;
    --g-30: #363c5e;
    --g-50: #7b81a0;
    --g-70: #a9aec8;
    --g-85: #dfe2f0;
    --g-95: #f4f5fb;

    --fondo: #080913;
    --fondo-alt: var(--g-5);
    --superficie: #101224;
    --superficie-tenue: var(--g-10);
    --linea: var(--g-20);
    --linea-fuerte: var(--g-30);
    --texto: var(--g-95);
    --texto-medio: var(--g-70);
    --texto-tenue: var(--g-50);

    --acento: #8d7dff;
    --acento-claro: #a99dff;
    --acento-tenue: #1c1940;
    --sobre-acento: #0a0818;

    --ia: #a99dff;
    --ia-tenue: #1a1738;

    /* El cuadrado de la marca se aclara lo justo para separarse de un fondo casi negro, sin dejar de ser el mismo signo. */
    --marca-fondo: #1b1d38;
    --marca-tinta: #f2f3ff;

    --positivo: #35d18b;
    --negativo: #ff7a6b;
    --aviso: #e3b44e;
    --aviso-fondo: #1f1a10;
  }
}

:root[data-theme="dark"] {
    --g-0:  #0b0c17;
    --g-5:  #0e0f1c;
    --g-10: #171a2b;
    --g-20: #232742;
    --g-30: #363c5e;
    --g-50: #7b81a0;
    --g-70: #a9aec8;
    --g-85: #dfe2f0;
    --g-95: #f4f5fb;

    --fondo: #080913;
    --fondo-alt: var(--g-5);
    --superficie: #101224;
    --superficie-tenue: var(--g-10);
    --linea: var(--g-20);
    --linea-fuerte: var(--g-30);
    --texto: var(--g-95);
    --texto-medio: var(--g-70);
    --texto-tenue: var(--g-50);

    --acento: #8d7dff;
    --acento-claro: #a99dff;
    --acento-tenue: #1c1940;
    --sobre-acento: #0a0818;

    --ia: #a99dff;
    --ia-tenue: #1a1738;

    /* El cuadrado de la marca se aclara lo justo para separarse de un fondo casi negro, sin dejar de ser el mismo signo. */
    --marca-fondo: #1b1d38;
    --marca-tinta: #f2f3ff;

    --positivo: #35d18b;
    --negativo: #ff7a6b;
    --aviso: #e3b44e;
    --aviso-fondo: #1f1a10;
}

/* El navegador pinta las barras de scroll y los controles nativos según esto. Sin ello, un tema oscuro elegido a mano sobre un sistema claro deja barras de scroll blancas que delatan el truco. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  /* 16.5px de base frente a los 15 de antes. Parece poco y cambia por completo la sensación: por debajo de 16 el texto se lee "apretado" y encima iOS amplía al enfocar un campo. */
  font: 16.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Los titulares llevan tracking NEGATIVO y se aprieta más cuanto mayor es el tamaño. Es la regla tipográfica que más se ignora y la que más se nota: una letra grande con espaciado normal parece desparramada, y una pequeña con espaciado apretado se vuelve ilegible. */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -0.04em; }
h2 { font-size: clamp(22px, 3.2vw, 30px); }
h3 { font-size: 19px; letter-spacing: -0.02em; }

p { margin: 0 0 18px; }
a { color: inherit; }

/* Solo las CIFRAS van en monoespaciada, no los títulos. `tabular-nums` fija la anchura del dígito: sin él, una columna de números no alinea sus decimales y comparar de un vistazo deja de ser posible. */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.pos { color: var(--positivo); }
.neg { color: var(--negativo); }
.tenue { color: var(--texto-tenue); }

/* La etiqueta pequeña en versalitas monoespaciadas SOBREVIVE, pero reducida a su sitio: encima de un titular, nunca como titular. Ahí funciona —da contexto sin competir— y como título hacía que todo pareciera una terminal. */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-tenue);
  display: block; margin-bottom: 14px;
}

/* =============================================================================
   CABECERA
   ============================================================================= */
header {
  display: flex; align-items: center; gap: 30px;
  padding: 16px 28px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  /* El desenfoque del fondo hace que el contenido se intuya al pasar por debajo en lugar de desaparecer bajo una barra opaca. Es sutil y es la diferencia entre una cabecera pegada y una que flota. */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20;
}
/* =============================================================================
   LA MARCA

   Un signo y un nombre, y el nombre en dos pesos en lugar de dos colores: más
   sobrio, y sobrevive a cualquier fondo — que es justo lo que un color de marca
   no hace.

   El signo dibuja una caída y su recuperación, no una línea subiendo. Una línea
   subiendo es el logo de todo el sector y promete exactamente lo que esta
   herramienta se niega a prometer; una caída dice de qué habla el producto.
   ============================================================================= */
header .marca {
  display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.032em;
  margin: 0; text-decoration: none; color: var(--texto);
}
header .marca svg { border-radius: 7px; flex: none; transition: transform var(--medio) var(--curva); }
header .marca:hover svg { transform: rotate(-4deg) scale(1.05); }
header .marca-b { color: var(--texto-tenue); font-weight: 450; margin-left: 1px; }

/* El enlace de "crear cuenta" no puede pesar lo mismo que los demás: es la única acción que la página quiere que hagas. */
header nav a.cta { color: var(--sobre-acento); background: var(--acento); font-weight: 550; }
header nav a.cta:hover { background: var(--acento-claro); color: var(--sobre-acento); }
header nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
header nav a {
  color: var(--texto-medio); text-decoration: none; font-size: 14.5px; font-weight: 450;
  padding: 7px 11px; border-radius: var(--radio-s);
  transition: color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
header nav a:hover { color: var(--texto); background: var(--superficie-tenue); }
header nav a.activo { color: var(--texto); font-weight: 550; }

/* =============================================================================
   LA CUENTA EN LA BARRA

   Las iniciales del correo en un círculo, no una foto ni un muñeco genérico:
   identifica la cuenta de un vistazo y no obliga a subir ni a guardar la imagen
   de nadie — que en un producto que presume de no almacenar de más, cuenta.
   ============================================================================= */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--acento-tenue); color: var(--acento);
  font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); flex: none;
}
.avatar-s { width: 24px; height: 24px; font-size: 10.5px; }

header nav a.cuenta { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px; }
.cuenta-correo { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) { .cuenta-correo { display: none; } }

/* Un botón que destruye algo no puede parecerse a uno que guarda. Va en el color del signo negativo, que en este producto ya significa "esto resta". */
button.peligro { background: var(--negativo); border-color: var(--negativo); color: #fff; }
button.peligro:hover { background: var(--negativo); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--negativo) 70%, transparent); }

/* El interruptor de tema es un icono, no una etiqueta: ocupa lo que un enlace y no roba atención a la navegación de verdad. */
button.tema {
  background: transparent; border: 1px solid transparent; color: var(--texto-tenue);
  font-size: 15px; line-height: 1; padding: 7px 9px; margin-left: 4px; min-width: 32px;
}
button.tema:hover { background: var(--superficie-tenue); color: var(--texto); border-color: var(--linea); box-shadow: none; }

main { max-width: 1120px; margin: 0 auto; padding: 56px 28px 140px; }

/* =============================================================================
   MOVIMIENTO

   Dos gestos y nada más. El de aparición guía la mirada hacia abajo al bajar; el
   de elevación confirma que algo responde al ratón. Ambos cortos: por encima de
   unos 350ms una transición deja de sentirse como respuesta y empieza a
   sentirse como espera.
   ============================================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); }
.reveal.visible { opacity: 1; transform: none; }

/* Quien pide menos movimiento lo ha hecho por accesibilidad, no por gusto: a algunas personas las animaciones les provocan mareo. Se apaga todo Y se deja el contenido visible, que es la parte que se olvida — desactivar la animación sin mostrar el elemento lo deja invisible para siempre. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   PORTADA
   ============================================================================= */
.hero { padding: 80px 0 64px; position: relative; }
.hero h1 { max-width: 16ch; margin-bottom: 26px; }
.hero .entradilla { font-size: clamp(17px, 2.2vw, 20.5px); line-height: 1.55; color: var(--texto-medio); max-width: 54ch; margin-bottom: 36px; }

/* Un resplandor muy tenue detrás del titular. No se percibe como un objeto —y no debe—, solo evita que la parte superior de la página sea un rectángulo plano. */
.hero::before {
  content: ""; position: absolute; top: -60px; left: -10%; width: 60%; height: 340px;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 70%);
  filter: blur(46px); pointer-events: none; z-index: -1;
}

/* La afirmación grande y suelta. Va sola en su línea porque su trabajo es que se lea aunque nadie lea el resto. */
.claim {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 600; letter-spacing: -0.032em;
  line-height: 1.25; max-width: 24ch; margin: 0 0 16px;
}
.claim em { font-style: normal; color: var(--acento); }

/* =============================================================================
   LA COMPARATIVA DE LA PORTADA

   Dos paneles con la MISMA cartera. El izquierdo se queda corto a propósito y
   ese vacío es el argumento, así que se le deja respirar en lugar de rellenarlo.

   Las filas nuevas del panel derecho entran escalonadas. Es el único sitio de
   todo el sistema donde una animación repite un gesto muchas veces, y se
   justifica porque el escalonado ES el mensaje: la mirada cuenta cuántas cosas
   aparecen que en el otro lado no estaban.
   ============================================================================= */
.comparativa { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .comparativa { grid-template-columns: 1fr; } }

.comparativa .panel {
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px 26px;
  background: var(--superficie);
}
.panel-pobre { background: var(--superficie-tenue); }
.panel-rico { border-color: var(--acento); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -34px color-mix(in srgb, var(--acento) 55%, transparent); }

.linea-dato {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 15px;
}
.linea-dato:last-of-type { border-bottom: 0; }
.linea-dato span { color: var(--texto-medio); }
.linea-dato b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.02em; }

/* Las filas que el otro panel NO tiene se marcan con un filete de acento a la izquierda. Sin esa marca hay que comparar las dos listas a mano, y entonces la comparación deja de hacerse. */
.linea-dato.nuevo { border-left: 2px solid var(--acento); padding-left: 12px; margin-left: -14px; }
.linea-dato.nuevo span { color: var(--texto); }

.panel .vacio { font-size: 13.5px; color: var(--texto-tenue); margin: 20px 0 0; line-height: 1.65; }

.reveal.visible .linea-dato.nuevo { animation: entra-fila 420ms var(--curva) both; }
.reveal.visible .linea-dato.nuevo:nth-of-type(n+5) { animation-delay: calc((var(--i, 0) * 0ms)); }
@keyframes entra-fila { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.visible .linea-dato.nuevo { animation: none; } }

/* =============================================================================
   PRECIOS
   ============================================================================= */
/* TRES COLUMNAS FIJAS, no `auto-fit`. Con auto-fit el navegador decide cuántas caben, y en cuanto una no cabía se iba a una segunda fila sola — que es exactamente lo que le pasaba al pago único. Aquí el número de columnas es parte del diseño, no una consecuencia del ancho. */
.precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 880px) { .precios { grid-template-columns: 1fr; } }

/* `align-items: stretch` iguala la altura de las tres tarjetas y el flex interior empuja los botones abajo: sin esto quedan a tres alturas distintas, que es lo que hace que una comparativa parezca descuidada aunque cada tarjeta esté bien. */
.plan { display: flex; flex-direction: column; }
.plan ul { flex: 1; }
.precio-pie { font-size: 13px; color: var(--texto-tenue); margin: -12px 0 18px; }
.precio-pie strong { color: var(--texto); font-weight: 550; }
.par-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.plan {
  position: relative; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px 24px; background: var(--superficie);
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.plan:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); }
.plan-destacado { border-color: var(--acento); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--acento) 60%, transparent); }
.plan .cinta {
  position: absolute; top: -10px; right: 18px; background: var(--acento); color: var(--sobre-acento);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px;
}
.plan .precio { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; margin: 0 0 18px; }
.plan ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.plan li { padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--linea); color: var(--texto-medio); }
.plan li::before { content: "+"; position: absolute; left: 0; color: var(--acento); font-family: var(--mono); }
/* Lo que NO incluye se marca, no se omite. Una lista que solo enumera lo bueno obliga a comparar tres listas a la vez para descubrir qué falta. */
.plan li.no { color: var(--texto-tenue); }
.plan li.no::before { content: "\2013"; color: var(--texto-tenue); }
.plan li:last-child { border-bottom: 0; }

/* =============================================================================
   TARJETAS Y SECCIONES
   ============================================================================= */
.seccion { margin-bottom: 76px; }
.seccion > .rotulo { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.seccion > .rotulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.seccion .indice { font-family: var(--mono); font-size: 12.5px; color: var(--acento); font-weight: 500; }
.seccion h2 { font-size: clamp(21px, 2.6vw, 26px); }
.seccion .subtitulo { font-size: 16px; color: var(--texto-medio); margin: 0 0 26px; max-width: 68ch; line-height: 1.6; }

.seccion .cuerpo {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 26px 28px;
  transition: border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.seccion .cuerpo:hover { border-color: var(--linea-fuerte); box-shadow: 0 1px 3px rgba(0,0,0,.035), 0 12px 32px -18px rgba(0,0,0,.18); }

/* Dos gráficos en paralelo cuando contestan preguntas distintas sobre el mismo dato. Por debajo de 860px se apilan: dos anillos de 300px no se comparan, se entrecierran los ojos. */
/* Un contenedor con ALTURA FIJA alrededor de cada lienzo. Chart.js con maintainAspectRatio:false llena a su padre, y sin un padre con altura el gráfico colapsa a cero o crece sin parar al redimensionar. */
.lienzo { position: relative; height: 230px; }
.lienzo-alto { height: 300px; }
@media (max-width: 760px) { .lienzo { height: 190px; } .lienzo-alto { height: 220px; } }

.par { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .par { grid-template-columns: 1fr; gap: 34px; } }

.nota {
  font-size: 13.5px; color: var(--texto-tenue); margin-top: 22px; line-height: 1.65;
  border-left: 2px solid var(--linea-fuerte); padding-left: 14px; max-width: 86ch;
}

/* =============================================================================
   CIFRAS DESTACADAS
   ============================================================================= */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); margin-bottom: 56px; overflow: hidden;
}
.cifra { padding: 22px 24px; border-right: 1px solid var(--linea); transition: background var(--rapido) var(--curva); }
.cifra:last-child { border-right: 0; }
.cifra:hover { background: var(--superficie-tenue); }
.cifra .etiqueta { font-size: 12.5px; color: var(--texto-tenue); font-weight: 450; }
/* La cifra sube a 30px. Es el dato que la gente viene a ver; competía en tamaño con su propia etiqueta. */
.cifra .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; margin-top: 8px; letter-spacing: -0.035em; line-height: 1.1; }
/* La cifra usa anchura tabular SIEMPRE, y con la animación pasa de detalle a requisito: sin ella los dígitos cambian de ancho mientras cuentan y la cifra entera tiembla. */
.cifra .valor { font-variant-numeric: tabular-nums; }
.cuenta { font-variant-numeric: tabular-nums; }

.cifra .pie { font-size: 12.5px; color: var(--texto-tenue); margin-top: 7px; }

/* =============================================================================
   TABLAS
   ============================================================================= */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: right; font-weight: 500; color: var(--texto-tenue); font-size: 13px;
  padding: 0 14px 12px; border-bottom: 1px solid var(--linea-fuerte);
}
th:first-child, td:first-child { text-align: left; }
td { padding: 13px 14px; border-bottom: 1px solid var(--linea); text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--rapido) var(--curva); }
tbody tr:hover { background: var(--superficie-tenue); }

/* =============================================================================
   FORMULARIOS
   ============================================================================= */
form.fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--texto-medio); font-weight: 450; }
input, select {
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s);
  padding: 11px 13px; font: 16px var(--sans);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
input:hover, select:hover { border-color: var(--texto-tenue); }
input:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); }

button {
  background: var(--acento); color: var(--sobre-acento); border: 1px solid var(--acento);
  border-radius: var(--radio-s); padding: 12px 22px;
  font: 550 15px var(--sans); letter-spacing: -0.01em; cursor: pointer;
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
button:hover { background: var(--acento-claro); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--acento) 60%, transparent); }
/* Un desplazamiento de UN píxel al pulsar. Es casi imperceptible y es lo que hace que un botón se sienta físico en lugar de una zona clicable. */
button:active { transform: translateY(1px); }
button.secundario { background: transparent; color: var(--texto-medio); border-color: var(--linea-fuerte); }
button.secundario:hover { background: var(--superficie-tenue); color: var(--texto); border-color: var(--texto-tenue); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; }

a.enlace { color: var(--acento); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--rapido) var(--curva); }
a.enlace:hover { border-bottom-color: var(--acento); }

/* Un botón dentro de un enlace no debe heredar el subrayado ni el color del enlace. */
a > button { text-decoration: none; }

.aviso {
  background: var(--aviso-fondo); border: 1px solid var(--linea); border-left: 3px solid var(--aviso);
  color: var(--texto-medio); padding: 16px 20px; border-radius: var(--radio-s);
  font-size: 15px; line-height: 1.6; margin-bottom: 24px;
}
.aviso.error { border-left-color: var(--negativo); background: var(--superficie-tenue); color: var(--negativo); }
.aviso strong { color: var(--texto); }

/* =============================================================================
   COPILOTO
   ============================================================================= */
.chat { display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.msg { max-width: 78%; padding: 15px 18px; border-radius: var(--radio); font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; }
.msg.usuario { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); }
.msg.copiloto { align-self: flex-start; background: var(--superficie-tenue); border: 1px solid var(--linea); }
.traza {
  font-family: var(--mono); font-size: 12px; color: var(--texto-tenue);
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); word-break: break-all;
}

/* =============================================================================
   PIE Y BADGE
   ============================================================================= */
footer {
  max-width: 1120px; margin: 0 auto; padding: 32px 28px 100px;
  border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--texto-tenue); line-height: 1.75;
}

/* La nota de "construido con IA" es ahora un bloque del pie, no un recuadro flotante. Un elemento fijo siempre acaba tapando algo en alguna pantalla, y buscar esas pantallas una a una es trabajo sin final. */
#badge-ia {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linea);
  max-width: 74ch; font-size: 13px; line-height: 1.7;
}
#badge-ia strong { color: var(--texto); display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }

/* =============================================================================
   MÓVIL

   Tres cosas se rompen al estrechar y ninguna es obvia hasta probarlo:
   las tablas de cifras no se pueden apilar porque su sentido está en comparar
   columnas; un objetivo táctil por debajo de 44px se falla con el dedo (y el de
   borrar una operación es irreversible); y Safari en iOS AMPLÍA la página al
   enfocar un campo con letra menor de 16px, y no vuelve.
   ============================================================================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 32px 18px 100px; }

  header { padding: 12px 18px; gap: 14px; flex-wrap: wrap; }
  header nav { gap: 2px; width: 100%; margin-left: 0; overflow-x: auto; }
  header nav a { white-space: nowrap; padding: 6px 9px; font-size: 14px; }

  .hero { padding: 48px 0 40px; }
  .hero::before { display: none; }

  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 18px; }
  .cifra:nth-child(2n) { border-right: 0; }
  .cifra .valor { font-size: 23px; }

  .seccion { margin-bottom: 52px; }
  .seccion .cuerpo { padding: 20px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }
  th, td { padding: 11px 10px; }

  form.fila label { flex: 1 1 150px; }
  button { min-height: 46px; width: auto; }
  .msg { max-width: 92%; }
}

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }