/* ElMike094 Stream Optimizer · sitio web · dirección «Señal de prueba» */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/archivo-latin-700-normal.woff2") format("woff2"); }

:root {
  --negro: #000000;
  --blanco: #ffffff;
  --gris: #bfbfbf;
  --gris-claro: #e6e6e6;
  --amarillo: #bfbf00;
  --cian: #00bfbf;
  --verde: #00bf00;
  --magenta: #bf00bf;
  --rojo: #bf0000;
  --azul: #0000bf;
  --naranja: #f26a0e;
  --titular: "Anton", Impact, "Arial Narrow", sans-serif;
  --texto: "Archivo", Arial, Helvetica, sans-serif;
  --margen: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--negro); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titular); font-weight: 400; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--blanco); color: var(--negro); padding: 12px 16px; z-index: 10; }
.saltar:focus { left: 8px; top: 8px; }

/* Botones: rectángulos planos, como los bloques de la carta */
.boton { display: inline-block; font-weight: 700; font-size: 1.1875rem; line-height: 1.2; text-decoration: none; color: var(--negro); background: var(--naranja); padding: 18px 30px; border: 0; }
.boton:hover { background: var(--blanco); }
.boton--oscuro { background: var(--negro); color: var(--blanco); }
.boton--oscuro:hover { background: var(--naranja); color: var(--negro); }
.boton--menor { font-size: 1rem; padding: 13px 22px; background: var(--blanco); }
.boton--menor:hover { background: var(--naranja); }

/* Cabecera */
.cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px var(--margen); background: var(--negro); color: var(--blanco); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.marca img { width: 44px; height: 44px; }
.marca span { font-family: var(--titular); font-size: 1.375rem; letter-spacing: 0.02em; }
.cab nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
.cab nav a:not(.boton) { font-weight: 500; text-decoration: none; padding: 11px 0; }
.cab nav a:not(.boton):hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Las siete barras: cada una es una función */
.barras { display: flex; flex-wrap: wrap; background: var(--negro); }
.barra { flex: 1 1 180px; min-height: clamp(260px, 34vw, 460px); padding: 24px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.barra h3 { font-size: clamp(1.5rem, 1.95vw, 1.8125rem); line-height: 1.05; }
.barra p { font-size: 0.9375rem; line-height: 1.4; }
.b1 { background: var(--gris); }
.b2 { background: var(--amarillo); }
.b3 { background: var(--cian); }
.b4 { background: var(--verde); }
.b5 { background: var(--magenta); color: var(--blanco); }
.b6 { background: var(--rojo); color: var(--blanco); }
.b7 { background: var(--azul); color: var(--blanco); }
.etiqueta { align-self: flex-start; font-size: 0.8125rem; font-weight: 700; background: var(--negro); color: var(--blanco); padding: 3px 9px; }
/* Franja inferior de la carta de ajuste */
.franja { display: flex; height: 26px; background: var(--negro); }
.franja i { flex: 1 1 0; }
.franja i:nth-child(1) { background: var(--azul); }
.franja i:nth-child(3) { background: var(--magenta); }
.franja i:nth-child(5) { background: var(--cian); }
.franja i:nth-child(7) { background: var(--gris); }

/* Titular */
.titular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 48px; padding: clamp(40px, 5vw, 64px) var(--margen) clamp(48px, 6vw, 72px); background: var(--negro); color: var(--blanco); }
.titular h1 { flex: 3 1 520px; font-size: clamp(3rem, 7.4vw, 6.75rem); line-height: 0.98; letter-spacing: 0.005em; }
.entrada { flex: 2 1 340px; max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.entrada p { font-size: 1.1875rem; line-height: 1.5; }
.entrada .nota, .nota { font-size: 0.9375rem; color: #c8c8c8; }

/* Secciones */
.seccion { padding: clamp(48px, 6vw, 88px) var(--margen); }
.seccion > h2, .columna > h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.02; max-width: 18ch; }
.seccion > .intro { max-width: 62ch; margin-top: 14px; }
.clara { background: var(--gris-claro); }
.blanca { background: var(--blanco); }
.oscura { background: var(--negro); color: var(--blanco); }

/* Capturas */
.capturas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.capturas figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.capturas figure:nth-child(1) { grid-column: span 12; }
.capturas figure:nth-child(2), .capturas figure:nth-child(3) { grid-column: span 6; }
.capturas a { display: block; }
.capturas a:hover img { border-color: var(--naranja); }
.capturas img { border: 8px solid var(--negro); width: 100%; }
.capturas figcaption { max-width: 60ch; }
.capturas figcaption strong { display: block; font-family: var(--titular); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }

/* Tablas */
.caja-tabla { overflow-x: auto; margin-top: 32px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 2px solid var(--negro); }
thead th { font-family: var(--titular); font-weight: 400; font-size: 1.375rem; background: var(--negro); color: var(--blanco); border-bottom: 0; }
tbody th { font-weight: 500; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95em; background: var(--negro); color: var(--blanco); padding: 3px 8px; white-space: nowrap; }
.si { font-weight: 700; }
.no { color: #5c5c5c; }
td.pro, th.pro { background: #fff1e6; }
thead th.pro { background: var(--naranja); color: var(--negro); }
/* Compra de la licencia: tres pasos (es una secuencia) y el código de Bre-B */
.compra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 64px; margin-top: 56px; padding-top: 44px; border-top: 4px solid var(--negro); }
.compra .columna { flex: 0 1 640px; }
.compra h3 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.05; }
.compra h3 span { display: block; color: #8a3c00; }
.pasos { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
.pasos li::marker { font-family: var(--titular); font-size: 1.3em; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton--borde { background: transparent; color: var(--negro); box-shadow: inset 0 0 0 3px var(--negro); }
.boton--borde:hover { background: var(--negro); color: var(--blanco); }
.aclaracion { font-size: 0.9375rem; max-width: 60ch; }
.qr--breb { flex: 0 1 340px; padding: 0; }
.qr--breb img { image-rendering: auto; }
.qr--breb figcaption { margin: 0; padding: 10px 12px 12px; font-size: 0.9375rem; }

/* Descarga */
.descarga { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.columna { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.datos { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; }
.datos dt { color: #c8c8c8; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.huella { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875rem; }
.oscura h3 { font-size: 1.625rem; line-height: 1.1; }
.oscura ul { margin: 0; padding-left: 20px; }
.oscura a:not(.boton) { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Donaciones */
.donar { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 64px; }
.donar .columna { flex: 0 1 640px; }
.donar .columna p { max-width: 60ch; }
.qr { flex: 0 1 260px; margin: 0; background: var(--blanco); border: 8px solid var(--negro); padding: 14px; }
.qr img { width: 100%; image-rendering: pixelated; }
.qr figcaption { font-size: 0.875rem; text-align: center; margin-top: 8px; }

/* Pie */
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding: 28px var(--margen); background: var(--negro); color: #c8c8c8; font-size: 0.875rem; line-height: 1.5; border-top: 2px solid #333333; }
.pie p { max-width: 64ch; }
.pie a { color: var(--blanco); }

/* Páginas de texto (licencia y privacidad) */
.legal { background: var(--blanco); padding: clamp(40px, 5vw, 72px) var(--margen); }
.legal h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; margin-bottom: 24px; }
.legal pre { font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; white-space: pre-wrap; margin: 0; max-width: 78ch; }

/* Un único momento de movimiento: la carta «sintoniza» al cargar */
@media (prefers-reduced-motion: no-preference) {
  .barra { animation: sintonizar 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .barra:nth-child(2) { animation-delay: 0.06s; }
  .barra:nth-child(3) { animation-delay: 0.12s; }
  .barra:nth-child(4) { animation-delay: 0.18s; }
  .barra:nth-child(5) { animation-delay: 0.24s; }
  .barra:nth-child(6) { animation-delay: 0.30s; }
  .barra:nth-child(7) { animation-delay: 0.36s; }
  @keyframes sintonizar { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Móvil: las barras pasan a franjas horizontales */
@media (max-width: 640px) {
  .barra { flex-basis: 100%; min-height: 0; padding: 20px var(--margen); }
  .cab nav a.secundario { display: none; }
  .capturas figure:nth-child(n) { grid-column: span 12; }
  .capturas img { border-width: 5px; }
  .boton { width: 100%; text-align: center; }
  table { min-width: 0; }
  th, td { padding: 12px 10px; }
  thead th { font-size: 1.125rem; }
  code { white-space: normal; }
  /* La tabla de comandos pasa a fichas: comando arriba, explicación debajo */
  .apilar thead { position: absolute; left: -9999px; }
  .apilar tr { display: block; padding: 14px 0; border-bottom: 2px solid var(--negro); }
  .apilar th, .apilar td { display: block; padding: 4px 0; border: 0; }
  .cab nav .boton { width: auto; }
}