/* ============================================================
   duqe — sistema base compartido
   Blanco y negro editorial + un acento rojo de marca
   ============================================================ */

/* ------------------------------------------------------------
   EL COLOR DE duqe (leer antes de tocar nada de aquí abajo)

   Hasta agosto de 2026 la marca era estrictamente blanca y negra.
   Dejó de serlo por un motivo práctico, no estético: en la rejilla de
   resultados de Google Play, llena de apps de productividad monocromas, un
   icono negro más desaparece. Se probaron cinco rojos impresos sobre el
   propio Pixel —el monitor de un ordenador no vale para decidir color— y
   ganó el #E8382A.

   Aquí ese rojo entra como ACENTO QUIRÚRGICO. El armazón sigue siendo
   blanco y negro editorial; el rojo aparece solo donde marca jerarquía o
   señala un estado. Si algún día esta hoja tiene más de un puñado de
   apariciones de var(--red), algo se ha ido de las manos.

   POR QUÉ HAY DOS ROJOS Y NO UNO
   El de marca no llega para texto pequeño, y esto no es una opinión:

     #E8382A sobre el papel ............ 4,00:1
     papel sobre #E8382A ............... 4,00:1

   WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande y para
   elementos de interfaz. Así que el rojo de marca vale para filos, barras,
   anillos de foco, iconos y titulares grandes — y NO vale para una etiqueta
   de 13 px, ni para texto blanco encima de un botón rojo.

   Por eso el segundo. --red-ink es #C1271C (5,63:1 sobre el papel), y no es
   un color inventado para salir del paso: es uno de los cinco rojos de la
   carta que se probó en el Pixel el 18 de agosto de 2026. Se descartó para
   el icono porque a ese tamaño tiraba a granate, pero como color de letra
   sobre papel es exactamente lo que hacía falta, y es de la misma familia.

   REGLA PRÁCTICA
     ¿lleva letra pequeña encima o es letra pequeña?  -> --red-ink
     ¿es una forma, un filo, una barra o un anillo?   -> --red
   ------------------------------------------------------------ */

:root {
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  /* Tono neutro cálido (negro/blanco subtonados, sin saturación visible) */
  --ink: #0c0b0a;
  --ink-2: #2a2826;
  --muted: #6f6b66;        /* 5,07:1 sobre --paper — cumple AA */

  /* --faint era #a39e98, que sobre el papel da 2,55:1: por debajo incluso
     del umbral de texto grande, y se estaba usando justo en lo más pequeño
     (las etiquetas del pie, las metas de las tarjetas, las fuentes de las
     cifras). Ahora son dos tokens, porque el problema solo existía sobre
     claro: ese mismo gris sobre la tinta da 7,40:1 y ahí sí valía. */
  --faint: #736e68;        /* 4,84:1 sobre --paper — para texto tenue sobre claro */
  --faint-on-dark: #a39e98; /* 7,40:1 sobre --ink — el de siempre, sobre oscuro */

  --paper: #fbfaf8;
  --paper-2: #f1efea;
  --line: #e3e0da;
  --line-strong: #15130f;

  /* --- El acento de marca --- */
  --red: #E8382A;          /* formas, filos, barras, anillos, texto ≥24px */
  --red-ink: #C1271C;      /* cualquier cosa con letra: enlaces, avisos, texto */
  --red-wash: #fdf2f0;     /* fondo lavado, para resaltar sin gritar */
  --red-line: #f6c9c4;     /* filo suave del mismo tinte */

  --max: 1280px;
  --gut: clamp(20px, 5vw, 88px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  overflow-x: clip;
  max-width: 100%;
}

html { overflow-x: clip; max-width: 100%; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

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

::selection { background: var(--red); color: #fff; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: 1480px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: 100px;
  border: 1.5px solid var(--red-ink);
  background: var(--red-ink);
  color: #fff;
  cursor: pointer;
  transition: transform .35s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
/* El botón principal es rojo, y el rojo que usa es --red-ink y no el de marca.
   No es un capricho: la etiqueta va a 17 px con peso 500, o sea «texto normal»
   para WCAG, que pide 4,5:1. Blanco sobre el rojo de marca da 4,17 y suspende;
   sobre #C1271C da 5,88 y pasa con holgura. Mismo tinte, dos usos.
   Al pasar el ratón sube al rojo de marca: el color se aviva justo cuando el
   texto ya no tiene que sostener el contraste solo, porque el puntero está
   encima señalándolo. */
.btn:hover { background: var(--red); border-color: var(--red); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }

/* Secundario. Antes su :hover lo volvía negro sólido, o sea que al pasar el
   ratón se disfrazaba del primario y los dos botones del hero se volvían
   indistinguibles. Ahora se refuerza sin cambiar de rango. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

/* Terciario: el enlace con aire de botón. Aquí sí entra el rojo, pero como
   FILO, no como relleno.

   Y conviene dejar escrito por qué el primario NO es rojo, que es la pregunta
   que va a hacer todo el que abra este archivo: el texto de .btn es de 17 px
   con peso 500 — «texto normal» para WCAG, que pide 4,5:1. El papel sobre el
   rojo de marca da 4,00:1. Un botón rojo con la etiqueta en blanco suspende.
   Se podría oscurecer el rojo hasta que pasara, pero entonces el acento se
   convertiría en el color de todos los botones de la web y dejaría de ser un
   acento. El primario se queda negro. */
.btn--quiet {
  background: transparent; color: var(--red-ink);
  border-color: var(--red-line);
}
.btn--quiet:hover { border-color: var(--red); background: var(--red-wash); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none; transform: none;
}

/* Google Play pill */
/* La píldora de Play se queda NEGRA a propósito, aunque el resto de botones
   hayan pasado a rojo. Es la insignia de una tienda, no un botón nuestro: en
   la ficha de Google Play y en la propia tienda es oscura, y teñirla de rojo
   la haría menos reconocible justo donde tiene que reconocerse a la primera.
   El rojo entra en el filo al pasar el ratón, que es suficiente para que
   pertenezca al conjunto. */
.gplay {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px 26px 13px 22px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.gplay:hover { transform: translateY(-2px); border-color: var(--red); }
.gplay__ico { width: 26px; height: 26px; flex: none; }
.gplay__sm { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: .75; line-height: 1; }
.gplay__lg { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gut);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
/* ---------- la marca ----------
   Globo blanco sobre cuadrado rojo + wordmark, igual que el gráfico destacado
   de Play. El cuadrado usa el rojo de marca puro (--red) y no el de texto: aquí
   es una superficie de identidad, y lo que lleva encima no es letra sino una
   silueta maciza, que con 3:1 va sobrada. Es el único sitio de la web donde el
   rojo aparece como mancha grande, y es a propósito: es LA marca. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.brand__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--red);
  border-radius: 10px;
  flex: none;
}
.brand__mark img { width: 20px; height: auto; }
.brand__name { display: block; }

/* En el pie la marca es más grande: allí es firma, y es lo que llena la
   columna que antes estaba vacía. */
.brand--foot { font-size: 34px; gap: 14px; }
.brand--foot .brand__mark { width: 50px; height: 50px; border-radius: 13px; }
.brand--foot .brand__mark img { width: 27px; }

@media (max-width: 720px) {
  .brand { font-size: 23px; gap: 9px; }
  .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand__mark img { width: 18px; }
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
/* :not(.btn) importa. Sin él, esta regla (0-2-0) le gana a `.btn` (0-1-0) y le
   impone el color del enlace del nav al botón «Descargar»: con el primario ya
   en rojo, eso dejaba texto gris oscuro sobre rojo, que es ilegible (2,89:1).
   Es el mismo tipo de fallo que el de la regla de foco: una regla más
   específica que pisa a la del componente sin que nadie lo pretendiera. */
.nav__links a:not(.btn) { font-weight: 500; font-size: 16px; color: var(--ink-2); transition: color .2s; }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__cta { font-family: var(--font-display); }

/* Botón hamburguesa (solo visible en móvil) */
.nav__toggle {
  display: none; /* oculto en escritorio */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
  margin-left: auto;
}
.nav__toggle-bar {
  display: block; width: 24px; height: 2px; margin: 0 auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
/* Animación a "X" cuando el menú está abierto */
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- selector de idioma (WPML / Polylang) ----------
   Es un desplegable y no una fila de enlaces porque duqe va a 21 idiomas:
   «ES FR DE IT PT…» veintiuna veces no cabe en la cabecera. El botón resume
   con el código; el panel da el nombre de cada idioma en su propio idioma. */
.nav__lang { position: relative; display: inline-flex; }

.nav__lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  color: var(--ink-2);
  padding: 7px 12px; border-radius: 100px; line-height: 1;
  background: transparent; border: 1.5px solid var(--line); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav__lang-btn:hover { border-color: var(--muted); color: var(--ink); }
.nav__lang-globe { width: 17px; height: 17px; flex: none; opacity: .75; }
.nav__lang-code { letter-spacing: .04em; font-weight: 600; }
.nav__lang-caret { width: 10px; height: 7px; flex: none; opacity: .6; transition: transform .25s var(--ease); }
.nav__lang-btn[aria-expanded="true"] .nav__lang-caret { transform: rotate(180deg); }
.nav__lang-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }

.nav__lang-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 268px; max-height: min(60vh, 460px); overflow-y: auto;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.05);
}
.nav__lang-list { list-style: none; margin: 0; padding: 0; }
.nav__lang-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink-2); line-height: 1.3;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__lang-item:hover { background: var(--paper-2); color: var(--ink); }
.nav__lang-name { min-width: 0; }
.nav__lang-tag {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--faint);
}
/* El idioma en uso se marca con el rojo: es un ESTADO, que es exactamente
   para lo que el acento se ha reservado. La barra de 3 px hace el trabajo
   visual y el color del texto va en --red-ink, que a 15 px sí cumple AA. */
.nav__lang-item.is-active {
  color: var(--red-ink); font-weight: 700;
  background: var(--red-wash);
  box-shadow: inset 3px 0 0 var(--red);
}
.nav__lang-item.is-active .nav__lang-tag { color: var(--red-ink); opacity: .8; }

@media (max-width: 720px) {
  /* Mostrar el botón hamburguesa */
  .nav__toggle { display: flex; }

  /* El menú pasa a ser un panel desplegable que baja desde el nav */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    /* Oculto por defecto: colapsado */
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  /* Abierto */
  .nav.is-open .nav__links {
    max-height: 80vh; opacity: 1; visibility: visible;
    overflow-y: auto;
  }
  /* Enlaces a lo ancho, con separación cómoda para el dedo */
  .nav__links .lnk {
    display: block; padding: 14px 0; font-size: 18px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links .lnk:last-of-type { border-bottom: none; }
  /* El botón "Descargar" como botón de verdad, centrado */
  .nav__links .nav__cta {
    margin-top: 16px; text-align: center; border-bottom: none;
  }
  /* Selector de idioma centrado abajo. El panel deja de flotar y se
     despliega en el propio flujo: dentro de .nav__links, que es un contenedor
     con overflow oculto mientras está colapsado, un panel absoluto quedaría
     recortado y no se vería nada. */
  .nav__lang { margin-top: 16px; align-self: center; }
  .nav__lang-panel {
    position: fixed; left: 12px; right: 12px; top: auto; width: auto;
    max-height: 56vh;
  }
}

/* ---------- shared reveal ----------
   El contenido es VISIBLE por defecto. Solo se oculta para animar si el JS
   ha confirmado que está listo (clase reveal-ready en <html>). Si el JS falla
   o no carga, el contenido se ve igualmente — nunca queda invisible. */
.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-ready .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- footnote ---------- */
.sources { font-size: 12.5px; color: var(--faint); letter-spacing: 0.01em; line-height: 1.6; }

/* ---------- ajustes tipográficos Montserrat (antes inline en cada HTML) ---------- */
h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.0; }
.brand { font-weight: 800; letter-spacing: -0.04em; }
.nav__links a.is-active { color: var(--ink); }


/* ============================================================
   FOCO DE TECLADO
   ------------------------------------------------------------
   Hasta el 4 de septiembre de 2026 este tema no tenía ni una sola regla
   :focus-visible, y encima llevaba tres «outline: none» sueltos. Quien
   navegase con el tabulador no veía dónde estaba: ni en el menú, ni en los
   formularios, ni en los enlaces del texto.

   El anillo va en el rojo de marca a propósito. No es decoración: es el
   único color de la paleta que pasa el 3:1 que WCAG pide a un indicador de
   foco CONTRA LAS DOS superficies del sitio — 4,00:1 sobre el papel y
   4,71:1 sobre la franja de tinta. El negro no sirve sobre la franja negra
   y el blanco no sirve sobre el papel. El acento se gana aquí el sueldo.
   ============================================================ */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
}

/* Aquí había un `border-radius: 4px` y era un error. `:where()` no aporta
   especificidad, pero `:focus-visible` sí, así que la regla empataba con
   `.btn` (0-1-0) y ganaba por ir después: al llegar con el tabulador, TODOS
   los botones de cápsula del sitio —el CTA del nav, «Probar duqe», la píldora
   de Google Play— se volvían rectángulos de esquina redondeada. No hacía
   ninguna falta: `outline` ya sigue por su cuenta el `border-radius` del
   elemento en cualquier navegador actual. */

/* Sobre la tinta el anillo necesita separarse algo más para no fundirse. */
:where(.manifesto, .cta--dark, .footer--dark) :focus-visible { outline-offset: 4px; }

/* Quitamos el anillo del ratón, no el del teclado: :focus a secas todavía
   dispara en navegadores viejos al hacer clic. */
:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   ACCESIBILIDAD: texto solo para lectores de pantalla
   ------------------------------------------------------------
   El tema GENERA esta clase en home.php, index.php y comments.php, pero no
   la DEFINÍA en ninguna parte: venía prestada del CSS de wp-block-library.
   Eso es una bomba de relojería doble. Primero, porque en cuanto haya una
   segunda página de blog aparecerá un titular de 27 px que dice «Navegación
   de entradas» encima de la paginación. Y segundo, porque el día que alguien
   desencole wp-block-library para ganar velocidad, TODAS las etiquetas
   ocultas del sitio se harán visibles de golpe. Se define aquí y se acabó.
   ============================================================ */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
}

/* Salvo cuando recibe el foco: entonces sí se ve (es el patrón del enlace
   «saltar al contenido»). */
.screen-reader-text:focus-visible {
  clip-path: none;
  height: auto; width: auto;
  margin: 0; padding: 14px 22px;
  top: 10px; left: 10px;
  z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-radius: 100px;
}

/* ============================================================
   RITMO VERTICAL
   ------------------------------------------------------------
   La portada tenía 1.210 px de página vacía en escritorio (el 18 % del
   total). No era que un padding fuese grande: es que en cada frontera se
   sumaban dos —el de abajo de una sección y el de arriba de la siguiente—,
   así que un hueco de 130 y otro de 170 daban 300. Una escala única deja el
   respiro donde hace falta y quita el que solo era descuido.
   ============================================================ */

:root {
  --sec: clamp(64px, 8vw, 116px);   /* separación normal entre secciones */
  --sec-lg: clamp(88px, 11vw, 152px); /* la que abre o cierra una página */
}

/* ============================================================
   PIEZAS NUEVAS DEL ARMAZÓN (4 sep 2026)
   ------------------------------------------------------------
   El grueso del pie se estiliza en front-page.css por razones históricas,
   aunque el pie salga en todas las páginas. Aquí van solo las clases nuevas,
   para no duplicar ni pelear con aquel archivo.
   ============================================================ */

/* ---------- columna de marca del pie ---------- */
.foot__brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 300px; }
.foot__tagline { color: var(--muted); font-size: 15.5px; line-height: 1.5; max-width: 26ch; }
.foot__made { color: var(--faint); font-size: 14px; }

/* Píldora de Google Play en tamaño reducido, para el pie. */
.gplay--sm { padding: 10px 20px 10px 17px; }
.gplay--sm .gplay__ico { width: 21px; height: 21px; }
.gplay--sm .gplay__lg { font-size: 16px; }
.gplay--sm .gplay__sm { font-size: 10px; }

/* ---------- lupa del buscador en el nav ----------
   El buscador existía (searchform.php) pero no lo llamaba ninguna plantilla:
   a los resultados solo se llegaba escribiendo «?s=» a mano. */
.nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 100px;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__search svg { width: 19px; height: 19px; }
.nav__search:hover { background: var(--paper-2); color: var(--ink); }

@media (max-width: 720px) {
  /* En el panel desplegable la lupa sola no se entiende: se le pone al lado
     la palabra, aprovechando que ahí el menú es una lista vertical. */
  .nav__search { width: auto; padding: 14px 0; justify-content: flex-start; gap: 12px; border-radius: 0; }
  .nav__search::after { content: attr(aria-label); font-size: 18px; font-weight: 500; }
  .foot__brandcol { max-width: none; }
}

/* ---------- formulario de búsqueda ----------
   El input va a 16px como mínimo a propósito: por debajo de eso, iOS hace
   zoom automático al enfocar el campo y descoloca la página entera. */
.duqe-search { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; max-width: 560px; }
.duqe-search__field {
  position: relative; flex: 1 1 240px; display: flex; align-items: center;
}
.duqe-search__ico {
  position: absolute; left: 18px; width: 19px; height: 19px;
  color: var(--muted); pointer-events: none;
}
.duqe-search__input {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 14px 20px 14px 48px;
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 100px;
  transition: border-color .2s var(--ease);
}
.duqe-search__input::placeholder { color: var(--faint); }
.duqe-search__input:hover { border-color: var(--muted); }
/* Solo se oscurece el borde; el anillo lo pone la regla global. Aquí había un
   `outline: none` y era el mismo fallo que se acababa de arreglar en help.css:
   `:focus-visible` es un subconjunto de `:focus`, y `.duqe-search__input:focus`
   (0-2-0) pesa más que `:where(…):focus-visible` (0-1-0), así que lo mataba. */
.duqe-search__input:focus { border-color: var(--ink); }
.duqe-search__btn { flex: none; }

.error404__search { margin-top: 34px; max-width: 520px; }