/*
 * SISTEMA · la hoja compartida del sitio público.
 *
 * QUÉ ES. Los valores del ManualIdentidadVisual_PPET v2.0 convertidos en
 * variables CSS, más las escalas que el manual no fija (espacio, tamaños,
 * movimiento) y la doctrina de material 05.6, que hasta hoy existía escrita
 * pero nunca en código.
 *
 * DE DÓNDE SALEN LOS COLORES. De `apps/api/src/marca/marca.service.ts`,
 * TOKENS_BASE. No se copian a ojo: `sitio/tools/comprobar-sistema.ts` compara
 * los dos archivos y falla si divergen. Un color aquí que no exista allá es un
 * color inventado, y el manual MANDA.
 *
 * POR QUÉ NO REUSA `blog/blog.css`. El blog quedó explícitamente fuera del
 * rediseño. Duplicar sus tokens sería crear una segunda verdad; por eso el
 * comprobador ata AMBOS archivos al servicio y no uno al otro.
 *
 * DOS CORRECCIONES DE CONTRASTE respecto de lo que el blog sirve hoy, medidas
 * y no heredadas (`comprobar-sistema.ts` las vuelve a medir en cada CI):
 *
 *   1. Texto BLANCO sobre el verde primario da 2.73:1 y reprueba WCAG AA. Es
 *      el botón principal del sitio. Aquí encima del verde va la TINTA, que da
 *      6.08:1 y además es lo que pide 02.4 ("una tinta").
 *   2. El #02857E del blog pasa sobre papel blanco (4.51:1) pero el cuerpo de
 *      la página NO es blanco, es --fondo #F4F5F7, donde cae a 4.13:1 y
 *      reprueba. Aquí el verde de texto es #017E78: el mínimo oscurecimiento
 *      del primario que pasa sobre las DOS superficies claras (4.93 y 4.52).
 *
 * La regla del manual `textoVerdeSobrePapel` dice que el verde sobre claro es
 * fondo o cifra, nunca texto corrido. Se respeta: --acento solo viste enlaces
 * y microtitulares, jamás un párrafo.
 */

/* ═══ 1 · COLOR — del manual, sin invención ═══════════════════════════════ */

:root {
  /* 02.1 Corporativos. Son tres. */
  --verde: #02AFA6;            /* Pantone 3560 C */
  --tinta: #1C1E26;            /* Pantone 4280 C */
  --papel: #FFFFFF;

  /* 02.4/02.5 · sobre gris u oscuro el verde nunca va al 100%: 85% */
  --verde-oscuro: #28BBB3;
  /* Derivado y medido · el único verde legible sobre las dos superficies claras */
  --verde-texto: #017E78;

  /* 02.2 Neutros. Rampa propia del manual, no matices del gris. */
  --n900: #343D51;
  --n700: #404A64;
  --n500: #6D7A9D;
  --n300: #99A3C2;
  --n100: #EAEAF2;

  /* 02.3 Áreas de servicio · una por raíz del catálogo */
  --area-marketing: #FF835C;
  --area-multimedia: #FFDA55;
  --area-diseno: #7EAAFF;
  --area-uxui: #5EF5FF;
  --area-desarrollo: #D274FF;
  --area-btl: #FF66B8;         /* extensión aprobada 2026-07-26 */
}

/* ─── Tema claro (por defecto) ───
   El fondo y el borde NO son grises elegidos a ojo: son matices del neutro 900
   por el mismo método que el manual usa para su rampa (02.2, `matiz()` en
   marca.service.ts) — al 5% y al 12%. Así heredan el sesgo azul de los neutros
   del manual en vez de ser un gris cualquiera, y `comprobar-sistema.ts`
   rehace la cuenta en cada CI. */
:root {
  --fondo: #F5F5F6;                  /* matiz(--n900, 5%) */
  --superficie: var(--papel);
  --superficie-alta: var(--papel);
  --texto: var(--tinta);
  --texto-suave: var(--n700);        /* 8.08:1 sobre --fondo */
  --borde: #E7E8EA;                  /* matiz(--n900, 12%) */
  --acento: var(--verde-texto);
  --acento-fondo: var(--verde);
  --acento-texto-sobre-fondo: var(--tinta);   /* 6.08:1 · ver corrección 1 */
  --sombra-1: 0 1px 2px rgba(28, 30, 38, .06);
  --sombra-2: 0 6px 18px rgba(28, 30, 38, .10);
  --sombra-3: 0 24px 60px rgba(28, 30, 38, .18);
  --velo: rgba(244, 245, 247, .72);
  --filo: rgba(255, 255, 255, .9);
  --vidrio: rgba(255, 255, 255, .62);

  /* CIELO (05.3) · los MISMOS valores que `apps/web/src/styles.css`, para que
     el sitio y el OS+ se vean de la misma casa. Las figuras desenfocadas van
     en los dos temas; las estrellas SOLO sobre oscuro, que es lo que manda el
     manual. En claro la capa queda vacía a propósito. */
  --nebulosa:
    radial-gradient(42% 34% at 18% 20%, rgba(2, 175, 166, .08), transparent 70%),
    radial-gradient(34% 30% at 84% 82%, rgba(255, 102, 184, .05), transparent 70%);
  --cielo: none;
  /* Las ilustraciones se dibujaron para fondo oscuro y llevan trazos blancos
     que sobre papel desaparecen. Este halo les devuelve el suelo sin meter una
     caja: se disuelve, no tiene borde. Sobre oscuro no hace falta. */
  --dibujo-halo: radial-gradient(closest-side, rgba(28, 30, 38, .07), transparent 76%);
}

/* ─── Tema oscuro ───
   VA ESCRITO DOS VECES A PROPÓSITO, y no es un descuido. Un solo selector
   `:root[data-tema="oscuro"], :root:not([data-tema="claro"])` aplicaría el
   tema oscuro a quien no ha elegido nada Y prefiere el claro. La preferencia
   del sistema tiene que ir dentro de su consulta de medios, y una consulta de
   medios no se puede meter en una lista de selectores.

   El riesgo real es que una copia se quede atrás: `comprobar-sistema.ts`
   compara las dos listas y falla si dejan de ser idénticas. */
:root[data-tema="oscuro"] {
  --fondo: #1C1E26;                  /* la TINTA del manual, sin oscurecer */
  --superficie: #232631;             /* mezcla(tinta, n500, 9%) */
  --superficie-alta: #2B2F3B;        /* mezcla(tinta, n500, 18%) */
  --texto: #F2F3F7;                  /* mezcla(papel, n300, 13%) */
  --texto-suave: var(--n300);        /* 6.63:1 sobre la superficie */
  --borde: #333847;                  /* mezcla(tinta, n500, 28%) */
  --acento: var(--verde-oscuro);     /* 7.01:1 sobre la tinta */
  --acento-fondo: var(--verde-oscuro);
  --acento-texto-sobre-fondo: var(--tinta);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, .45);
  --sombra-3: 0 24px 60px rgba(0, 0, 0, .5);
  --velo: rgba(10, 12, 16, .72);
  --filo: rgba(255, 255, 255, .12);
  --vidrio: rgba(28, 30, 38, .62);
  --nebulosa:
    radial-gradient(42% 34% at 18% 20%, rgba(40, 187, 179, .14), transparent 70%),
    radial-gradient(34% 30% at 84% 82%, rgba(255, 102, 184, .09), transparent 70%);
  --cielo: url("/marca/cielo/estrellas-cerca.svg"), url("/marca/cielo/estrellas-lejos.svg");
  --dibujo-halo: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #1C1E26;                  /* la TINTA del manual, sin oscurecer */
    --superficie: #232631;             /* mezcla(tinta, n500, 9%) */
    --superficie-alta: #2B2F3B;        /* mezcla(tinta, n500, 18%) */
    --texto: #F2F3F7;                  /* mezcla(papel, n300, 13%) */
    --texto-suave: var(--n300);
    --borde: #333847;                  /* mezcla(tinta, n500, 28%) */
    --acento: var(--verde-oscuro);
    --acento-fondo: var(--verde-oscuro);
    --acento-texto-sobre-fondo: var(--tinta);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 6px 18px rgba(0, 0, 0, .45);
    --sombra-3: 0 24px 60px rgba(0, 0, 0, .5);
    --velo: rgba(10, 12, 16, .72);
    --filo: rgba(255, 255, 255, .12);
    --vidrio: rgba(28, 30, 38, .62);
    --nebulosa:
      radial-gradient(42% 34% at 18% 20%, rgba(40, 187, 179, .14), transparent 70%),
      radial-gradient(34% 30% at 84% 82%, rgba(255, 102, 184, .09), transparent 70%);
    --cielo: url("/marca/cielo/estrellas-cerca.svg"), url("/marca/cielo/estrellas-lejos.svg");
    --dibujo-halo: none;
  }
}

/* ═══ 2 · TIPOGRAFÍA ══════════════════════════════════════════════════════
 * 03.1 · Chakra Petch para títulos, Inter para cuerpo. El manual manda
 * Proxima Nova de cuerpo y declara Inter como alternativa de sistema; en web
 * usamos Inter porque una tipografía que a veces no carga es peor que la
 * alternativa que el propio manual autoriza.
 *
 * 05.1 · «interlineado mínimo +2 unidades sobre el puntaje». En proporción eso
 * es (tamaño+2)/tamaño, así que cuanto más grande el titular, más ajustado
 * puede ir. --renglon-titular 1.08 lo cumple hasta 25px; por debajo de eso ya
 * no es un titular.
 */

:root {
  --fuente-titulo: "Chakra Petch", "Inter", system-ui, sans-serif;
  --fuente-cuerpo: "Inter", system-ui, -apple-system, sans-serif;
  --fuente-datos: ui-monospace, "SF Mono", Menlo, monospace;

  --renglon-titular: 1.08;
  --renglon-medio: 1.3;
  --renglon-cuerpo: 1.7;

  /* Escala fluida. El mínimo es el móvil a 360px y el máximo el escritorio;
     clamp() evita el salto de una consulta de medios en mitad de un titular. */
  /* 14px es el suelo. A .78rem daba 12,5px, que en un teléfono al sol y con el
     brazo estirado ya no se lee: el tamaño mínimo de un sistema no lo fija el
     diseño, lo fija la peor condición de lectura. */
  --t-micro: .875rem;
  --t-pie: .85rem;
  --t-base: 1rem;
  --t-lede: clamp(1.15rem, .95rem + .9vw, 1.5rem);
  --t-h3: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  --t-h2: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --t-h1: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  --t-display: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);

  /* 05.2 · el antetítulo numerado va en versalitas espaciadas */
  --letra-antetitulo: .14em;
}

/* ═══ 3 · ESPACIO, RADIO Y MOVIMIENTO ═════════════════════════════════════
 * El manual fija el radio (6px) y nada más. La escala de espacio es nuestra:
 * base 4px, y el salto crece para que dos pasos contiguos se distingan a
 * simple vista — una escala lineal obliga a elegir entre valores que nadie
 * puede diferenciar.
 */

:root {
  --e0: .25rem; --e1: .5rem;  --e2: .75rem; --e3: 1rem;
  --e4: 1.5rem; --e5: 2rem;   --e6: 3rem;   --e7: 4.5rem; --e8: 7rem;

  --radio: 6px;                /* manual · reglas.radio */
  --radio-caja: 12px;
  --radio-tarjeta: 16px;
  --radio-pastilla: 999px;

  /* DOS ANCHOS, Y NO SE MEZCLAN.
     El de LECTURA se queda fijo: un párrafo a 1800px obliga a barrer la
     cabeza de lado a lado y a buscar dónde empieza el renglón siguiente.
     ~72 caracteres es la medida cómoda y no depende del monitor.
     El de PÁGINA sí crece con la pantalla: la rejilla de casos, los servicios
     y la tira aprovechan el sitio y ganan columnas. Antes estaba clavado en
     72rem y en un monitor de 1920 el sitio usaba el 60%, con 384px vacíos a
     cada lado. El tope de 132rem existe para que en una pantalla ultra ancha
     no acabe siendo una fila de doce tarjetas diminutas. */
  --ancho-texto: 46rem;
  --ancho-pagina: min(94vw, 132rem);
  /* El aire lateral también crece: en una pantalla grande, un margen de 1.4rem
     deja el contenido pegado al canto. */
  --margen-lateral: clamp(1.4rem, 1rem + 1.4vw, 3rem);

  /* ── Capas ──
     UNA escala, con hueco entre escalones para poder meter algo en medio sin
     renumerar. Antes había números sueltos —40 en la barra, 100 en el salto al
     contenido— y ese es el camino que acaba en `z-index: 9999` porque nadie
     sabe contra qué está compitiendo. Regla: si algo necesita un valor que no
     esté aquí, es que falta un escalón, no que haga falta un número más alto. */
  --z-fondo: -1;         /* el cielo, detrás de todo */
  --z-base: 1;           /* el contenido */
  --z-elevado: 10;       /* tarjetas que se levantan al señalarlas */
  --z-barra: 40;         /* la cabecera pegajosa */
  --z-flotante: 60;      /* menús desplegables, globos de ayuda */
  --z-velo: 80;          /* el velo que oscurece detrás de una capa */
  --z-modal: 90;         /* la capa flotante en sí */
  --z-saltar: 100;       /* el salto al contenido, SIEMPRE por encima */

  /* ── Puntos de corte ──
     Las consultas de medios NO admiten variables, así que estos valores hay
     que escribirlos a mano en cada `@media`. Se declaran aquí igualmente para
     que exista UNA lista que consultar y nadie invente un 780px suelto:
       movil     hasta 559
       tableta   560 – 899
       escritorio 900 – 1279
       ancho     1280 en adelante
     El corte de 900 no es redondo por gusto: es donde el menú de seis
     entradas deja de caber junto al logotipo. */
  --corte-tableta: 560px;
  --corte-escritorio: 900px;
  --corte-ancho: 1280px;

  /* UNA sola curva para todo lo que entra y sale, y otra para lo que solo
     aparece. Antes había `ease` en la rápida y `cubic-bezier` en las otras dos:
     la misma interfaz aceleraba de dos formas distintas según el componente,
     que es el tipo de incoherencia que nadie sabe nombrar pero todo el mundo
     nota. La curva es la estándar de salida —arranca rápido y frena— porque
     una interfaz debe responder de inmediato y detenerse con calma. */
  --curva: cubic-bezier(.4, 0, .2, 1);
  --curva-entrada: cubic-bezier(0, 0, .2, 1);   /* solo para lo que aparece */

  --transicion-rapida: .15s var(--curva);
  --transicion: .25s var(--curva);
  --transicion-lenta: .45s var(--curva);
}

/* Suelo de calidad: quien pide menos movimiento, recibe menos movimiento.
   Se anula aquí, en el sistema, y no en cada componente — donde se olvida. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicion-rapida: .01ms linear;
    --transicion: .01ms linear;
    --transicion-lenta: .01ms linear;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ 4 · MATERIAL · doctrina 05.6 ════════════════════════════════════════
 * Tres reglas, y la tercera es la que se salta todo el mundo:
 *
 *   VIDRIO solo en capas FLOTANTES —menú, barra, modal—. Un dato sobre vidrio
 *   se lee sobre lo que haya detrás, que cambia al desplazar: ilegible por
 *   construcción. Los datos van siempre en superficie sólida.
 *
 *   FILO es luz atrapada en el canto: 1px blanco por arriba, no un borde de
 *   color. El color en el canto se reserva al estado ACTIVO, y por eso
 *   significa algo cuando aparece.
 *
 *   CIELO es la nebulosa de 05.3 (figuras desenfocadas) en los dos temas; las
 *   estrellas SOLO sobre fondo oscuro, porque sobre papel no hay estrellas.
 */

.vidrio {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--borde);
}
/* Sin soporte de desenfoque el vidrio queda transparente y el texto encima se
   vuelve ilegible. Se cae a superficie sólida, que es peor de ver y mejor de
   leer. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: var(--superficie); }
}

.filo { box-shadow: inset 0 1px 0 var(--filo); }
.filo-activo { box-shadow: inset 0 1px 0 var(--filo), inset 0 -2px 0 var(--acento-fondo); }

/* La nebulosa se pinta con dos manchas radiales, no con una imagen: pesa cero
   y se adapta al tema. `fixed` la deja quieta mientras el contenido pasa. */
.cielo {
  position: relative;
  background-color: var(--fondo);
  background-image:
    radial-gradient(42rem 30rem at 12% -8%, color-mix(in srgb, var(--verde) 14%, transparent), transparent 70%),
    radial-gradient(34rem 26rem at 92% 8%, color-mix(in srgb, var(--area-desarrollo) 10%, transparent), transparent 70%);
  background-attachment: fixed;
}
/* Estrellas: solo sobre oscuro. Se genera con sombras de una caja de 1px, así
   que no hay petición de red ni un solo nodo extra en el árbol. */
:root[data-tema="oscuro"] .cielo::before,
:root:not([data-tema="claro"]) .cielo.cielo-auto::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 18% 24%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 63% 12%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 81% 47%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 34% 71%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.45), transparent);
}

/* 05.1 · el icono general nunca es protagonista */
.icono-fondo { opacity: .15; pointer-events: none; }

/* ═══ 5 · BASE ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

/* `color-scheme` no es cosmético: gobierna lo que pinta el NAVEGADOR y no la
   hoja — el lienzo antes de que llegue el CSS, las barras de desplazamiento y
   los controles de formulario. Sin esto, en un equipo con el sistema en oscuro
   la página en tema claro arranca con un fogonazo negro y se queda con barras
   oscuras alrededor de un contenido blanco. Se declara junto al tema para que
   las dos cosas no puedan separarse. */
/* EL TEXTO CRECE CON EL MONITOR, y hasta ahora no lo hacía.
   Los titulares ya escalaban con `clamp(... vw ...)`, pero el CUERPO era
   `--t-base: 1rem` fijo: 16px en un teléfono y 16px en una pantalla de 27",
   con los titulares al doble alrededor. De ahí que en escritorio se leyera
   pequeño y la página pareciera medio vacía.

   Se escala la RAÍZ y no cada tamaño uno a uno: así crecen a la vez el texto,
   los espacios (`--e0`…`--e8`), los radios y el margen lateral, que están en
   rem. Subir solo la letra habría dejado los aires de móvil en un monitor.

   EL MÍNIMO VA EN REM, NO EN PX, y eso no es cosmético: dentro de `font-size`
   de la raíz, `rem` vale el tamaño que la PERSONA tiene puesto en su navegador.
   Con `16px` habríamos pisado a quien agranda la letra por necesidad; con
   `1rem` su ajuste sigue mandando y esto solo añade el crecimiento por ancho.

   16px hasta 400px de ventana · 18.2px a 1280 · tope de 19px desde 1600. */
html {
  font-size: clamp(1rem, .9375rem + .25vw, 1.1875rem);
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  line-height: var(--renglon-cuerpo);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  /* Enumerada y nunca `transition: all`: con `all`, cualquier propiedad que
     alguien añada mañana se anima sin querer, incluidas las que provocan
     recálculo de maquetación. */
  transition: background-color var(--transicion), color var(--transicion);
  /* Un nombre de marca largo o una URL pegada no pueden desbordar la columna
     y sacar una barra horizontal a toda la página. */
  overflow-wrap: break-word;
}

h1, h2, h3, .titular {
  font-family: var(--fuente-titulo);
  line-height: var(--renglon-titular);
  font-weight: 700;
  /* Reparte las líneas de un titular en vez de dejar una palabra sola abajo. */
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-family: var(--fuente-cuerpo); font-weight: 700; line-height: var(--renglon-medio); }
p { margin-bottom: var(--e3); text-wrap: pretty; }

a { color: var(--acento); }
a:hover { text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* Toque: quita el retardo de 300ms que algunos navegadores móviles guardan
   por si el toque era un doble toque para acercar, y hace deliberado el
   destello del toque en vez de dejar el gris del sistema. */
:where(a, button, summary, [role="button"]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* El foco visible no es opcional y no se quita: es la única pista de dónde
   está quien navega con teclado. `:focus-visible` lo reserva al teclado para
   no dejar un anillo tras cada clic de ratón. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento-fondo);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* ═══ 6 · PIEZAS COMPARTIDAS ══════════════════════════════════════════════ */

/* `env(safe-area-inset-*)` mantiene el contenido fuera de la muesca y del
   redondeo en un teléfono apaisado; en pantallas sin muesca vale 0 y el
   `max()` deja el margen de siempre. */
.contenedor, .contenedor-texto {
  margin-inline: auto;
  padding-inline: max(var(--margen-lateral), env(safe-area-inset-left)) max(var(--margen-lateral), env(safe-area-inset-right));
}
.contenedor { max-width: var(--ancho-pagina); }
.contenedor-texto { max-width: var(--ancho-texto); }

/* Capa flotante: el desplazamiento no se escapa a la página de detrás cuando
   se llega al final de la capa. */
.capa-flotante { overscroll-behavior: contain; }

/* 05.2 · antetítulo numerado. Solo donde el orden dice algo de verdad: un
   proceso, una cronología. Numerar una lista que no es secuencia es decorar. */
.antetitulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--letra-antetitulo);
  text-transform: uppercase;
  color: var(--acento);
  display: block;
  margin-bottom: var(--e1);
}
.antetitulo::before { content: attr(data-n) "_"; opacity: .55; }

/* 05.1 · título decorado `//texto_`. Uno por formato, o deja de ser un gesto. */
.titular-decorado::before { content: "//"; color: var(--acento); margin-right: .15em; }
.titular-decorado::after { content: "_"; color: var(--acento); }

/* ── BOTONES · vidrio y volumen, según la doctrina de material 05.6 ──
   El manual autoriza «transparencia con desenfoque» y define el FILO como luz
   atrapada en el canto. Un botón es una capa que flota sobre el contenido, así
   que le corresponde vidrio; y el volumen sale de tres capas superpuestas, no
   de un degradado pintado:

     · el filo de arriba  → luz que cae desde arriba, como en un objeto real
     · el filo de abajo   → la sombra propia del canto inferior
     · la sombra exterior → separación del fondo

   Antes solo tenían color plano y una sombra al señalarlos. */
.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: var(--t-base);
  text-decoration: none; cursor: pointer;
  padding: .8rem 1.7rem; border-radius: var(--radio-pastilla);
  border: 1px solid color-mix(in srgb, var(--acento-texto-sobre-fondo) 18%, transparent);
  background: var(--acento-fondo);
  color: var(--acento-texto-sobre-fondo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 1px 2px rgba(0, 0, 0, .18),
    0 8px 20px -6px color-mix(in srgb, var(--acento-fondo) 55%, transparent);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), filter var(--transicion-rapida);
  /* 44px es el mínimo cómodo para un dedo; el relleno ya lo alcanza, pero un
     texto corto podría quedarse por debajo. */
  min-height: 44px;
}
.boton:hover {
  transform: translateY(-2px);
  filter: saturate(1.06) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 2px 4px rgba(0, 0, 0, .2),
    0 16px 32px -10px color-mix(in srgb, var(--acento-fondo) 65%, transparent);
}
/* Al pulsar se HUNDE: la luz de arriba se apaga y la sombra exterior se
   recoge. Sin esto un botón elevado no responde al dedo y se siente muerto. */
.boton:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .22),
    0 1px 2px rgba(0, 0, 0, .16);
}

/* El secundario es VIDRIO de verdad: deja ver el cielo detrás. */
.boton-linea {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 42%, transparent);
  box-shadow:
    inset 0 1px 0 var(--filo),
    0 1px 2px rgba(0, 0, 0, .12),
    0 8px 20px -10px rgba(0, 0, 0, .3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .boton-linea { background: var(--superficie); }
}
.boton-linea:hover {
  background: color-mix(in srgb, var(--acento-fondo) 14%, var(--vidrio));
  border-color: var(--acento);
}

/* ── LA LLAMADA PRINCIPAL ──
   «Conversemos» es la única acción que de verdad importa en toda la página, y
   competía de tú a tú con «Ver el trabajo». Aquí es más grande, pesa más y
   respira: por Von Restorff, lo que destaca debe ser lo que importa. */
.boton-principal {
  font-size: var(--t-lede);
  font-weight: 700;
  padding: 1rem 2.2rem;
  min-height: 54px;
  letter-spacing: .01em;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

/* Logo · DOS ARCHIVOS, NO UN FILTRO CSS. El manual prohíbe alterar el logo
   (02.5), y teñirlo con `filter` es exactamente eso. Se enseña el que toque. */
.logo-claro { display: block; }
.logo-oscuro { display: none; }
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-oscuro { display: block; }
}

/* Salto al contenido · primera parada del teclado en toda página */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-saltar);
  padding: var(--e2) var(--e3);
  background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo);
  border-radius: 0 0 var(--radio) 0; font-weight: 600; text-decoration: none;
}
.saltar:focus { left: 0; }