/*
 * La web usa la paleta de la aplicación (`src/lib/styles/tokens.css` en el
 * repositorio de Mosaic): neutros cálidos de matiz 75 y acento turquesa. Si la
 * paleta cambia allí, se cambia aquí con los mismos valores.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
}

:root {
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 16px;

  --rapido: 140ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --ancho: 1160px;
  --margen: clamp(20px, 4vw, 40px);
}

:root[data-theme='light'] {
  color-scheme: light;
  --fondo: oklch(98.5% 0.003 75);
  --elevado: oklch(96% 0.004 75);
  --hundido: oklch(93% 0.005 75);
  --capa: oklch(100% 0 0);
  --borde-suave: oklch(89% 0.005 75);
  --borde: oklch(84% 0.006 75);
  --borde-fuerte: oklch(72% 0.008 75);
  --texto: oklch(24% 0.008 75);
  --texto-2: oklch(42% 0.008 75);
  --texto-3: oklch(54% 0.008 75);
  --acento: oklch(50% 0.15 195);
  --acento-hover: oklch(44% 0.15 195);
  --acento-suave: oklch(50% 0.15 195 / 0.1);
  --acento-borde: oklch(50% 0.15 195 / 0.38);
  --sobre-acento: oklch(99% 0.002 195);
  --aviso: oklch(62% 0.15 70);
  --sombra: 0 24px 60px oklch(24% 0.008 75 / 0.16), 0 4px 12px oklch(24% 0.008 75 / 0.06);
  --brillo: oklch(85% 0.09 195 / 0.55);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --fondo: oklch(15% 0.006 75);
  --elevado: oklch(20% 0.007 75);
  --hundido: oklch(25.5% 0.008 75);
  --capa: oklch(23% 0.008 75);
  --borde-suave: oklch(29% 0.008 75);
  --borde: oklch(35% 0.009 75);
  --borde-fuerte: oklch(48% 0.01 75);
  --texto: oklch(96% 0.004 75);
  --texto-2: oklch(80% 0.006 75);
  --texto-3: oklch(66% 0.008 75);
  --acento: oklch(72% 0.16 195);
  --acento-hover: oklch(78% 0.15 195);
  --acento-suave: oklch(72% 0.16 195 / 0.14);
  --acento-borde: oklch(72% 0.16 195 / 0.42);
  --sobre-acento: oklch(16% 0.02 195);
  --aviso: oklch(80% 0.14 70);
  --sombra: 0 30px 80px oklch(0% 0 0 / 0.55), 0 4px 14px oklch(0% 0 0 / 0.35);
  --brillo: oklch(55% 0.12 195 / 0.38);
}

/* Cada idioma y cada tema enseñan solo lo suyo. Lo decide `init.js` antes de pintar. */
html[data-lang='es'] [data-l='en'],
html[data-lang='en'] [data-l='es'],
html[data-theme='dark'] .solo-claro,
html[data-theme='light'] .solo-oscuro {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` tiene que ganar a cualquier `display` de los componentes: la demo
   oculta tarjetas con él. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
svg.relleno {
  fill: currentColor;
  stroke: none;
}

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--acento-hover);
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--texto);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radio-s);
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus {
  top: 12px;
}

/* --- Botones --------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio-m);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}
.boton-primario {
  background: var(--acento);
  color: var(--sobre-acento);
}
.boton-primario:hover {
  background: var(--acento-hover);
  color: var(--sobre-acento);
}
.boton-borde {
  border-color: var(--borde);
  background: transparent;
  color: var(--texto);
}
.boton-borde:hover {
  border-color: var(--borde-fuerte);
  background: var(--hundido);
  color: var(--texto);
}
.boton-pequeno {
  padding: 7px 12px;
  font-size: 0.875rem;
}

.icono {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radio-m);
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}
.icono:hover {
  background: var(--hundido);
  color: var(--texto);
}

/* --- Cabecera -------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--borde-suave);
  background: color-mix(in oklab, var(--fondo) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

.barra-dentro {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.marca:hover {
  color: var(--texto);
}
.marca img {
  border-radius: 7px;
}

.menu {
  display: flex;
  gap: 4px;
}
.menu a {
  padding: 6px 10px;
  border-radius: var(--radio-s);
  color: var(--texto-2);
  font-size: 0.925rem;
  text-decoration: none;
  transition: color var(--rapido) var(--curva);
}
.menu a:hover {
  color: var(--texto);
}

.herramientas {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.herramientas .boton {
  margin-left: 8px;
}

/* --- Portada --------------------------------------------------------- */

.portada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px);
}

/* El brillo turquesa es el mismo de la portada del README. */
.portada::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto;
  height: 90%;
  background: radial-gradient(closest-side, var(--brillo), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.portada-rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.portada h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -0.038em;
}

.entradilla {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.nota {
  margin-top: 18px;
  color: var(--texto-3);
  font-size: 0.9rem;
}

/* --- Demo del tablero ------------------------------------------------ */

.demo {
  margin: 0;
}

.demo-ventana {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--fondo);
  box-shadow: var(--sombra);
}

.demo-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--borde-suave);
  background: var(--elevado);
}

.demo-buscar {
  position: relative;
  flex: 1;
  min-width: 0;
}
.demo-buscar svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--texto-3);
  transform: translateY(-50%);
  pointer-events: none;
}
.demo-buscar input {
  width: 100%;
  padding: 8px 10px 8px 34px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 0.9rem;
}
.demo-buscar input::placeholder {
  color: var(--texto-3);
}
.demo-buscar input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento-borde);
}
.demo-buscar input::-webkit-search-cancel-button {
  filter: grayscale(1);
}

.demo-cuenta {
  flex: none;
  color: var(--texto-3);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde-suave);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid color-mix(in oklab, var(--color) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color) 12%, transparent);
  color: var(--color);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva);
}
.chip:hover {
  background: color-mix(in oklab, var(--color) 20%, transparent);
}
.chip[aria-pressed='true'] {
  border-color: var(--color);
  background: color-mix(in oklab, var(--color) 26%, transparent);
}
.chip[aria-pressed='true']::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.demo-tablero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  height: 380px;
  margin: 0;
  padding: 12px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  align-content: start;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  background: var(--elevado);
  animation: aparecer 220ms var(--curva);
}
.tarjeta.fijada {
  border-color: var(--acento-borde);
  box-shadow: inset 2px 0 0 var(--acento);
}

.tarjeta-nombre {
  overflow: hidden;
  color: var(--texto);
  font-size: 0.84rem;
  font-weight: 580;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarjeta-estado {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--texto-3);
  font-size: 0.72rem;
}
.tarjeta-estado code {
  color: var(--texto-2);
  font-size: 0.68rem;
}

.punto-sucio {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aviso);
}

.tarjeta-etiquetas {
  display: flex;
  gap: 4px;
  min-height: 8px;
  margin-top: 2px;
}
.tarjeta-etiquetas span {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--color);
  opacity: 0.85;
}

.demo-vacio {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 16px;
  color: var(--texto-2);
  text-align: center;
}
/* La rejilla vacía deja su sitio al aviso sin que la ventana cambie de alto. */
.demo-vacio:not([hidden]) {
  height: 380px;
  align-content: center;
}

.demo figcaption {
  margin-top: 14px;
  color: var(--texto-3);
  font-size: 0.85rem;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* --- Capturas -------------------------------------------------------- */

.ventana {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
}

.captura-principal {
  padding-bottom: clamp(56px, 8vw, 112px);
}

/* --- Secciones ------------------------------------------------------- */

.seccion {
  padding-block: clamp(56px, 8vw, 112px);
  border-top: 1px solid var(--borde-suave);
}

.titulo-seccion {
  max-width: 18em;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -0.032em;
}

.cabeza-con-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 40px;
}
.cabeza-con-texto p {
  max-width: 30em;
}

/* Principios: cuatro afirmaciones, sin tarjetas. */
.principios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 48px 0 0;
}
.principios div {
  padding-top: 18px;
  border-top: 2px solid var(--texto);
}
.principios dt {
  color: var(--texto);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.principios dd {
  margin: 8px 0 0;
  font-size: 0.98rem;
}

/* Tres funciones con su muestra en HTML. */
.tres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: 48px;
}
.pieza h3 {
  margin-top: 22px;
  font-size: 1.2rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}
.pieza p {
  margin-top: 8px;
  font-size: 0.98rem;
}

.muestra {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  padding: 20px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-l);
  background: var(--elevado);
}

.muestra-ficheros {
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
}
.muestra-ficheros code {
  padding: 3px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--fondo);
  color: var(--texto-2);
  font-size: 0.74rem;
}
.muestra-ficheros code:first-child {
  border-color: var(--acento-borde);
  color: var(--acento);
}

.mini-tarjeta {
  display: grid;
  gap: 4px;
  width: min(100%, 250px);
  padding: 14px 16px;
  border: 1px solid var(--acento-borde);
  border-radius: 10px;
  background: var(--fondo);
  box-shadow: inset 2px 0 0 var(--acento);
}
.mini-tarjeta strong {
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
}
.mini-ruta {
  color: var(--texto-3);
  font-family: var(--mono);
  font-size: 0.72rem;
}
.mini-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.8rem;
}
.mini-estado i {
  color: var(--texto-3);
  font-style: normal;
}
.mini-estado code {
  color: var(--texto-2);
  font-size: 0.74rem;
}

.muestra-abrir {
  gap: 12px;
}
.tecla {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--fondo);
  color: var(--texto-2);
  box-shadow: 0 2px 0 var(--borde);
}
.tecla:first-child {
  border-color: var(--acento-borde);
  color: var(--acento);
  box-shadow: 0 2px 0 var(--acento-borde);
}
.tecla svg {
  width: 22px;
  height: 22px;
}

/* Filas de texto e imagen, alternando lados. */
.fila {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(72px, 9vw, 128px);
}
.fila-invertida {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.fila-invertida .fila-texto {
  order: 2;
}
.fila-texto h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.fila-texto p {
  margin-top: 16px;
}

.collage {
  position: relative;
  padding: 0 8% 18% 0;
}
.collage-fondo,
.collage-frente {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra);
}
.collage-frente {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
}

/* --- Comparador de temas --------------------------------------------- */

.comparador {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  aspect-ratio: 1280 / 800;
  user-select: none;
}
.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comparador-encima {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.comparador-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--acento);
  pointer-events: none;
}
.comparador-asa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  background: var(--capa);
  box-shadow: var(--sombra);
  transform: translate(-50%, -50%);
}
.comparador-asa::before,
.comparador-asa::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  transform: translateY(-50%);
}
.comparador-asa::before {
  left: 9px;
  border-right: 7px solid var(--acento);
}
.comparador-asa::after {
  right: 9px;
  border-left: 7px solid var(--acento);
}
/* El control de verdad es un input de rango invisible encima de todo: así se
   maneja con el ratón, el dedo y el teclado sin código de arrastre. */
.comparador-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.comparador:has(.comparador-control:focus-visible) .comparador-asa {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
}

/* --- Privacidad ------------------------------------------------------ */

.dos-listas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 64px;
  margin-top: 48px;
}
.dos-listas h3 {
  font-size: 1.1rem;
  font-weight: 620;
}
.lista {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.lista li {
  position: relative;
  padding-left: 30px;
}
.lista li::before {
  position: absolute;
  top: 0.1em;
  left: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.lista-si li::before {
  content: '✓';
  background: var(--acento-suave);
  color: var(--acento);
}
.lista-no li::before {
  content: '✕';
  background: var(--hundido);
  color: var(--texto-2);
}
.privacidad .nota {
  margin-top: 48px;
}

/* --- Fases ----------------------------------------------------------- */

.fases {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fase;
}
.fases li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 30px 12px 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  counter-increment: fase;
}
/* La línea que une las fases, y el punto de cada una encima. */
.fases li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--borde);
}
.fases li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--fondo);
}
.fases strong {
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 620;
}
.fases strong::before {
  content: counter(fase) '. ';
  color: var(--texto-3);
  font-weight: 500;
}
.fases .hecha::before {
  background: var(--acento);
}
.fases .hecha::after {
  border-color: var(--acento);
  background: var(--acento);
}
.fases .siguiente::after {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px var(--acento-suave);
}
.fases .a-medias::after {
  border-color: var(--acento);
  background: linear-gradient(90deg, var(--acento) 50%, var(--fondo) 50%);
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 40px;
  color: var(--texto-3);
  font-size: 0.82rem;
}
.clave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clave::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 50%;
}
.clave.hecha::before {
  border-color: var(--acento);
  background: var(--acento);
}
.clave.siguiente::before {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.clave.a-medias::before {
  border-color: var(--acento);
  background: linear-gradient(90deg, var(--acento) 50%, transparent 50%);
}

/* --- Instalar -------------------------------------------------------- */

.instalar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 72px;
  align-items: start;
}
.instalar > div > p {
  margin-top: 20px;
  max-width: 32em;
}
.plataformas {
  display: grid;
  gap: 10px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
}
.plataformas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m);
}
.plataformas strong {
  min-width: 5.5em;
  color: var(--texto);
  font-weight: 600;
}
.ficheros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.fichero {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--elevado);
  color: var(--texto);
  text-decoration: none;
  transition:
    border-color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}
.fichero:hover {
  border-color: var(--acento-borde);
  background: var(--acento-suave);
  color: var(--texto);
}
.fichero code {
  font-size: 0.85rem;
  color: var(--texto);
}
.fichero-tam {
  color: var(--texto-3);
  font-size: 0.8rem;
}

/* La fila del sistema de quien visita, si se reconoce, se destaca. */
.tu-sistema {
  display: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 0.75rem;
  font-weight: 600;
}
.plataformas li.es-tu-sistema {
  border-color: var(--acento-borde);
  background: color-mix(in oklab, var(--acento) 5%, transparent);
}
.plataformas li.es-tu-sistema .tu-sistema {
  display: inline-block;
}
.plataformas li.es-tu-sistema .fichero:first-child {
  border-color: var(--acento);
}
.instalar .nota {
  margin: 0 0 24px;
  max-width: 34em;
}

.compilar {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-l);
  background: var(--elevado);
}
.compilar h3 {
  font-size: 1.2rem;
  font-weight: 620;
}
.compilar > p {
  margin-top: 8px;
  font-size: 0.95rem;
}

.codigo {
  position: relative;
  margin-top: 20px;
}
.codigo pre {
  margin: 0;
  /* Arriba queda sitio para el botón de copiar, que así no tapa ninguna orden. */
  padding: 52px 20px 18px;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.75;
}
.codigo pre code {
  font-size: inherit;
}

.copiar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--elevado);
  color: var(--texto-2);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.copiar:hover {
  color: var(--texto);
}
.copiar svg {
  width: 14px;
  height: 14px;
}
.copiado-texto,
.copiar.hecho .copiar-texto {
  display: none;
}
.copiar.hecho .copiado-texto {
  display: inline;
  color: var(--acento);
}

/* --- Pie ------------------------------------------------------------- */

.pie {
  padding-block: 40px;
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-3);
  font-size: 0.9rem;
}
.pie-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.pie-dentro p {
  flex: 1;
  min-width: 260px;
}
.pie-dentro > a:last-child {
  color: var(--texto-2);
}

/* --- Pantallas estrechas --------------------------------------------- */

@media (max-width: 1020px) {
  .portada-rejilla,
  .fila,
  .fila-invertida,
  .instalar {
    grid-template-columns: minmax(0, 1fr);
  }
  .fila-invertida .fila-texto {
    order: 0;
  }
  .principios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fases {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 32px;
  }
}

@media (max-width: 760px) {
  .menu {
    display: none;
  }
  .tres,
  .dos-listas {
    grid-template-columns: minmax(0, 1fr);
  }
  .fases {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  /* En vertical la línea baja por la izquierda. */
  .fases li {
    padding: 0 0 24px 32px;
  }
  .fases li::before {
    top: 16px;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .fases li:last-child::before {
    display: none;
  }
  .demo-tablero,
  .demo-vacio:not([hidden]) {
    height: 320px;
  }
}

@media (max-width: 480px) {
  .principios {
    grid-template-columns: minmax(0, 1fr);
  }
  .herramientas .boton {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}