/* Klaito — hoja de estilos única, sin build ni dependencias.
Orden de capas: lo de abajo gana sin necesidad de subir especificidad. */
@layer reset, base, layout, components, utilities;
/* ─────────────────────────────── Tokens ─────────────────────────────── */
:root {
/* Por defecto manda el sistema. */
color-scheme: light dark;
/* Tier 1 — valores literales, uno por modo */
--gris-98: oklch(98.5% 0.003 265);
--gris-95: oklch(95% 0.004 265);
--gris-90: oklch(90.5% 0.005 265);
--gris-50: oklch(50% 0.012 265);
--gris-32: oklch(32% 0.012 265);
--gris-24: oklch(24% 0.012 265);
--gris-18: oklch(17.5% 0.011 265);
--gris-13: oklch(12.5% 0.01 265);
--rojo-claro: oklch(53% 0.2 26);
--rojo-oscuro: oklch(70% 0.17 26);
/* Tier 2 — semánticos */
--fondo: light-dark(var(--gris-98), var(--gris-13));
--superficie: light-dark(white, var(--gris-18));
--superficie-alt: light-dark(var(--gris-95), var(--gris-24));
--texto: light-dark(var(--gris-24), var(--gris-95));
--texto-suave: light-dark(var(--gris-50), oklch(72% 0.012 265));
--borde: light-dark(var(--gris-90), var(--gris-32));
--acento: light-dark(var(--rojo-claro), var(--rojo-oscuro));
--sobre-acento: light-dark(white, var(--gris-13));
--sombra: light-dark(oklch(50% 0.02 265 / 0.16), oklch(0% 0 0 / 0.5));
/* Tier 3 — medidas */
--ancho: 68rem;
--ancho-texto: 44rem;
--radio: 0.75rem;
--radio-s: 0.4rem;
--paso: clamp(3.5rem, 2rem + 6vw, 6rem);
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
accent-color: var(--acento);
scrollbar-color: var(--texto-suave) transparent;
}
/* Tema fijado por el visitante (js/main.js pone la clase en ).
Tiene que estar en CSS: el por sí solo NO basta,
porque el `color-scheme` de :root de aquí arriba lo pisa. Comprobado en
Chrome: con meta="light" y `:root { color-scheme: light dark }` la página
seguía saliendo oscura. El meta sirve para pintar el lienzo antes del CSS. */
:root.tema-claro {
color-scheme: light;
}
:root.tema-oscuro {
color-scheme: dark;
}
/* Sin light-dark(): el color cae al del modo claro y la media query lo corrige.
En esos navegadores (Chrome < 123, Safari < 17.5) el botón de tema solo cambia
la UI nativa: los colores de la página siguen al sistema. Se asume a propósito
antes que duplicar la paleta entera por una minoría que va de salida. */
@supports not (color: light-dark(white, black)) {
:root {
--fondo: var(--gris-98);
--superficie: white;
--superficie-alt: var(--gris-95);
--texto: var(--gris-24);
--texto-suave: var(--gris-50);
--borde: var(--gris-90);
--acento: var(--rojo-claro);
--sobre-acento: white;
@media (prefers-color-scheme: dark) {
--fondo: var(--gris-13);
--superficie: var(--gris-18);
--superficie-alt: var(--gris-24);
--texto: var(--gris-95);
--texto-suave: oklch(72% 0.012 265);
--borde: var(--gris-32);
--acento: var(--rojo-oscuro);
--sobre-acento: var(--gris-13);
}
}
}
/* ─────────────────────────────── Reset ──────────────────────────────── */
@layer reset {
/* Nada de resets globales con `*`: solo lo que de verdad estorba. */
:where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre) {
margin: 0;
}
:where(ul, ol):where(.limpia) {
padding: 0;
list-style: none;
}
:where(img, svg, video) {
display: block;
max-inline-size: 100%;
height: auto;
}
:where(button, input, select, textarea) {
font: inherit;
color: inherit;
}
}
/* ──────────────────────────────── Base ──────────────────────────────── */
@layer base {
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-block-start: 5rem;
@media (prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
body {
background: var(--fondo);
color: var(--texto);
font-family: var(--sans);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
line-height: 1.15;
letter-spacing: -0.022em;
text-wrap: balance;
font-weight: 650;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { text-wrap: pretty; }
a {
color: inherit;
text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
text-underline-offset: 0.2em;
&:hover {
text-decoration-color: currentColor;
}
}
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 3px;
border-radius: var(--radio-s);
}
::selection {
background: color-mix(in oklab, var(--acento) 30%, transparent);
}
code, kbd, samp, pre {
font-family: var(--mono);
font-size: 0.9em;
}
code:not(pre code) {
background: var(--superficie-alt);
border-radius: var(--radio-s);
padding: 0.1em 0.35em;
}
pre {
background: var(--superficie-alt);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: 1rem 1.1rem;
overflow-x: auto;
line-height: 1.6;
}
}
/* ─────────────────────────────── Layout ─────────────────────────────── */
@layer layout {
.contenedor {
inline-size: min(100% - 2.5rem, var(--ancho));
margin-inline: auto;
}
/* Sin `content-visibility: auto` a propósito: con seis secciones de texto no
ahorra nada medible, y a cambio hay que mantener un `contain-intrinsic-size`
a ojo que, si se queda corto, mueve la barra de scroll. */
.seccion {
padding-block: var(--paso);
}
.seccion + .seccion {
border-block-start: 1px solid var(--borde);
}
.rejilla {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.prosa {
max-inline-size: var(--ancho-texto);
& > * + * {
margin-block-start: 1em;
}
& h2 {
margin-block-start: 2.2em;
}
& h3 {
margin-block-start: 1.8em;
}
& ul {
padding-inline-start: 1.2em;
}
& li + li {
margin-block-start: 0.4em;
}
}
}
/* ───────────────────────────── Componentes ──────────────────────────── */
@layer components {
/* Cabecera ---------------------------------------------------------- */
.cabecera {
position: sticky;
inset-block-start: 0;
z-index: 10;
background: color-mix(in oklab, var(--fondo) 82%, transparent);
backdrop-filter: blur(14px) saturate(1.6);
border-block-end: 1px solid var(--borde);
& > .contenedor {
display: flex;
align-items: center;
gap: 1rem;
min-block-size: 3.75rem;
}
}
.marca {
display: flex;
align-items: center;
gap: 0.55rem;
font-weight: 650;
letter-spacing: -0.02em;
text-decoration: none;
margin-inline-end: auto;
& img {
inline-size: 1.75rem;
border-radius: 0.45rem;
}
}
.nav {
display: flex;
align-items: center;
gap: 1.25rem;
font-size: 0.925rem;
& a {
color: var(--texto-suave);
text-decoration: none;
&:hover, &[aria-current="page"] {
color: var(--texto);
}
}
/* En móvil los enlaces de sección estorban: se queda el CTA. */
& .solo-ancho {
@media (width < 46rem) {
display: none;
}
}
}
/* Botones ----------------------------------------------------------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-block-size: 2.75rem;
padding-inline: 1.15rem;
border: 1px solid var(--borde);
border-radius: 999px;
background: var(--superficie);
color: inherit;
font-size: 0.95rem;
font-weight: 550;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
&:hover:not(:disabled, [aria-disabled="true"]) {
background: var(--superficie-alt);
border-color: color-mix(in oklab, var(--texto) 25%, var(--borde));
}
&:active:not(:disabled, [aria-disabled="true"]) {
transform: translateY(1px);
}
&.primario {
background: var(--acento);
border-color: transparent;
color: var(--sobre-acento);
&:hover:not([aria-disabled="true"]) {
background: color-mix(in oklab, var(--acento) 88%, var(--texto));
}
}
&.pequeno {
min-block-size: 2.25rem;
padding-inline: 0.85rem;
font-size: 0.875rem;
}
&[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
}
.acciones {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
align-items: center;
}
/* Toggle de tema ---------------------------------------------------- */
.tema {
display: grid;
place-items: center;
inline-size: 2.25rem;
block-size: 2.25rem;
padding: 0;
border: 1px solid var(--borde);
border-radius: 999px;
background: transparent;
cursor: pointer;
&:hover {
background: var(--superficie-alt);
}
& svg {
inline-size: 1.05rem;
fill: currentColor;
}
/* Sol o luna según el esquema realmente aplicado. */
& .luna { display: none; }
@media (prefers-color-scheme: dark) {
:root:not(.tema-claro) & {
& .sol { display: none; }
& .luna { display: block; }
}
}
:root.tema-oscuro & {
& .sol { display: none; }
& .luna { display: block; }
}
:root.tema-claro & {
& .sol { display: block; }
& .luna { display: none; }
}
}
/* Hero -------------------------------------------------------------- */
.hero {
padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) var(--paso);
& > .contenedor {
display: grid;
gap: clamp(2.5rem, 1rem + 5vw, 4rem);
align-items: center;
@media (width >= 60rem) {
grid-template-columns: 1.05fr 1fr;
}
}
}
.hero p.entradilla {
max-inline-size: 34ch;
margin-block: 1.1rem 1.8rem;
font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
color: var(--texto-suave);
}
.etiqueta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-block-end: 1.4rem;
padding: 0.3rem 0.75rem 0.3rem 0.6rem;
border: 1px solid var(--borde);
border-radius: 999px;
background: var(--superficie);
font-size: 0.8rem;
color: var(--texto-suave);
}
.punto {
inline-size: 0.5rem;
aspect-ratio: 1;
border-radius: 50%;
background: var(--acento);
@media (prefers-reduced-motion: no-preference) {
animation: latido 2.4s ease-in-out infinite;
}
}
@keyframes latido {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--acento) 55%, transparent); }
70% { opacity: 0.85; box-shadow: 0 0 0 0.4rem transparent; }
}
.nota-hero {
margin-block-start: 1.1rem;
font-size: 0.85rem;
color: var(--texto-suave);
}
/* Maqueta de ventana ------------------------------------------------ */
.ventana {
border: 1px solid var(--borde);
border-radius: var(--radio);
background: var(--superficie);
box-shadow: 0 1px 2px var(--sombra), 0 16px 40px -18px var(--sombra);
overflow: clip;
}
.barra-titulo {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 0.8rem;
border-block-end: 1px solid var(--borde);
background: var(--superficie-alt);
& span {
inline-size: 0.65rem;
aspect-ratio: 1;
border-radius: 50%;
background: color-mix(in oklab, var(--texto) 22%, transparent);
}
& b {
margin-inline-start: 0.5rem;
font-size: 0.78rem;
font-weight: 550;
color: var(--texto-suave);
}
}
.cuerpo-ventana {
display: grid;
gap: 1rem;
padding: 1.1rem;
font-size: 0.85rem;
}
.fila-estado {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--texto-suave);
}
/* Tira de segmentos del buffer: cada barra es un .ts en disco. */
.tira {
display: flex;
gap: 3px;
block-size: 3.25rem;
align-items: end;
padding: 0.6rem;
border: 1px solid var(--borde);
border-radius: var(--radio-s);
background: var(--fondo);
}
.tira i {
flex: 1;
block-size: var(--alto, 60%);
border-radius: 2px;
background: color-mix(in oklab, var(--texto) 22%, transparent);
&.viva {
background: var(--acento);
}
@media (prefers-reduced-motion: no-preference) {
animation: ola 3s ease-in-out infinite;
animation-delay: calc(var(--i) * -0.15s);
}
}
@keyframes ola {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.62); }
}
.leyenda {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
font-size: 0.78rem;
color: var(--texto-suave);
}
/* Tarjetas ---------------------------------------------------------- */
.tarjeta {
padding: 1.4rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: var(--superficie);
& h3 {
margin-block-end: 0.5rem;
}
& p {
color: var(--texto-suave);
font-size: 0.95rem;
}
&.destacada {
border-color: color-mix(in oklab, var(--acento) 45%, var(--borde));
}
}
.icono {
display: grid;
place-items: center;
inline-size: 2.4rem;
block-size: 2.4rem;
margin-block-end: 0.9rem;
border-radius: var(--radio-s);
background: var(--superficie-alt);
color: var(--acento);
& svg {
inline-size: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
}
/* Encabezado de sección --------------------------------------------- */
.cabecera-seccion {
max-inline-size: var(--ancho-texto);
margin-block-end: 2.5rem;
& p {
margin-block-start: 0.8rem;
color: var(--texto-suave);
}
}
.antetitulo {
display: block;
margin-block-end: 0.6rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--acento);
}
/* Teclas ------------------------------------------------------------ */
kbd {
display: inline-block;
min-inline-size: 1.6em;
padding: 0.15em 0.45em;
border: 1px solid var(--borde);
border-block-end-width: 2px;
border-radius: var(--radio-s);
background: var(--superficie);
font-size: 0.8rem;
text-align: center;
white-space: nowrap;
}
.lista-teclas {
display: grid;
gap: 0.75rem;
& li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
padding-block-end: 0.75rem;
border-block-end: 1px dashed var(--borde);
}
& b {
font-weight: 550;
}
& small {
display: block;
color: var(--texto-suave);
}
}
/* Tabla de especificaciones ----------------------------------------- */
.tabla-envoltorio {
overflow-x: auto;
border: 1px solid var(--borde);
border-radius: var(--radio);
}
table {
inline-size: 100%;
border-collapse: collapse;
font-size: 0.925rem;
}
th, td {
padding: 0.8rem 1rem;
text-align: start;
vertical-align: top;
}
th {
inline-size: 14rem;
font-weight: 550;
background: var(--superficie);
}
td {
color: var(--texto-suave);
}
tbody tr:not(:last-child) :is(th, td) {
border-block-end: 1px solid var(--borde);
}
/* Selector de idioma ------------------------------------------------ */
/* Es un y no un