/* ============================================================
   duqe — contenido largo, índice lateral, Ayuda y formularios
   ============================================================ */

/* ------------------------------------------------------------
   QUIÉN MANDA SOBRE .prose (leer antes de tocar nada)

   .prose es el motor tipográfico de todo el texto largo del sitio: las
   entradas del blog, las cuatro páginas legales, «¿Qué es duqe?» y la
   página de Ayuda. Hasta septiembre de 2026 estaba declarado TRES veces
   en dos archivos distintos, y ninguna de las tres ganaba del todo:

     blog.css (base)     .prose                     (0,1,0)  la declaración madre
     blog.css (ajustes)  .prose                     (0,1,0)  se pisaba a sí mismo
     front-page.css:141  .page-body .prose          (0,2,0)  ganaba el ancho
     help.css:168        .legal-prose {max-width}   (0,1,0)  código muerto

   El resultado medido era una columna de 760 px (≈87 caracteres por
   línea) con letra de 16,5 px: la línea un 20 % demasiado larga y la
   letra un 12 % por debajo del resto del sitio (body va a 18 px).

   Desde ahora la escala vive AQUÍ y solo aquí. La regla de front-page.css
   ya está borrada; las de blog.css se borran en cuanto se cumpla el aviso
   de abajo. Este archivo se encola después de blog.css y front-page.css,
   así que a igualdad de especificidad gana por orden, y no hace falta
   inventarse selectores más específicos para pelear con nadie.

   AVISO DE ENCOLADO — IMPRESCINDIBLE ANTES DE LIMPIAR blog.css:
   functions.php solo carga este archivo en is_page(). Mientras siga así,
   las ENTRADAS del blog (single.php) no reciben esta escala. Hay que
   ampliarlo a is_singular() ANTES de borrar el bloque .prose de blog.css;
   si se borra primero, las entradas se quedan sin tipografía de golpe.
   ------------------------------------------------------------ */

:root {
  /* Cuerpo: 17 px en móvil, 18,5 px en escritorio. Sube desde los 16,5 px
     de antes; el objetivo es que el texto largo no vaya por debajo del
     resto del sitio, no que grite. */
  --prose-size: clamp(17px, 0.28vw + 15.6px, 18.5px);
  --prose-lh: 1.68;

  /* La medida. 68 caracteres es el centro del rango cómodo (60-75); con
     Hanken a 18,5 px salen ~670 px, noventa menos que los 760 de antes. */
  --prose-measure: 68ch;

  /* Escala de encabezados. En escritorio 34 / 23 / 18,5 (saltos de 1,48×
     y 1,24×); en móvil 26 / 20 / 17. En 390 px el salto numérico nunca va
     a ser generoso: lo que hace legible la jerarquía ahí es la PROXIMIDAD
     (mucho aire arriba del encabezado, casi ninguno debajo), no el tamaño. */
  --h2-size: clamp(26px, 1.75vw + 9.2px, 34px);
  --h3-size: clamp(20px, 0.65vw + 14.8px, 23px);
  --h4-size: clamp(17px, 0.20vw + 15.9px, 18.5px);

  /* Alto real de la barra de navegación pegajosa. Antes era un 90 mágico
     repetido en tres sitios de este archivo y un 80 suelto en el JS. Vive
     aquí porque solo lo usan las plantillas de página; el día que haga
     falta en el blog, que se mude a base.css. */
  --nav-h: 90px;
}

/* ============================================================
   1. EL MOTOR TIPOGRÁFICO — .prose
   ============================================================ */

.prose {
  font-size: var(--prose-size);
  line-height: var(--prose-lh);
  color: var(--ink-2);
  max-width: var(--prose-measure);
  margin: 0 auto;
}

/* NO añadir aquí un `.page-body .prose { max-width: … }`. Esa regla existía
   en front-page.css con (0,2,0) y era la que dejaba muerto el ancho de las
   páginas legales; se borró de allí el 4 de septiembre de 2026 justo para
   que la medida se decida en un solo sitio. Si alguna vez reaparece un
   selector más específico en otro archivo, lo que hay que hacer es borrarlo
   allí, no ganarle desde aquí con una segunda declaración. */

/* ---------- ritmo vertical ----------
   Un solo hueco por defecto entre hermanos (el "búho"), y luego el
   encabezado rompe ese ritmo a propósito: mucho aire arriba, casi nada
   abajo. Antes había 20,8 px debajo de un H2 y 20,8 px entre párrafos —el
   mismo hueco para "sigo hablando de lo mismo" que para "cambio de tema"—,
   y por eso privacidad se leía como una pared gris de 8.184 px. */
.prose > * + * { margin-top: 1.5em; }
.prose > *:first-child { margin-top: 0; }

/* Los bloques traen márgenes del navegador (ul, figure, blockquote, pre…) y
   algunos de core. Se anulan SOLO por abajo y por los lados: el hueco de
   arriba lo pone el búho de la línea anterior, así que aquí no se toca
   margin-top ni por descuido — poner `margin: 0` en estas reglas, que van a
   (0,1,1), se comería el ritmo entero. */
.prose ul, .prose ol, .prose figure, .prose pre, .prose dl,
.prose .wp-block-table { margin-inline: 0; margin-bottom: 0; }

.prose h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--h2-size);
  line-height: 1.15;                 /* base.css:280 pone 1.0 a todos los
                                        encabezados: un H2 de dos líneas se
                                        toca consigo mismo. Aquí se recupera. */
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-top: 2.4em;                 /* ≈ 82 px sobre 34 px */
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--h3-size);
  line-height: 1.25;                 /* el bug visible: los H3 de dos líneas
                                        de cookies y «¿Qué es duqe?» */
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 2em;                   /* ≈ 46 px sobre 23 px */
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
/* El H4 no tenía estilo NINGUNO: caía a base.css y salía del tamaño del
   cuerpo, en Montserrat 600 y con line-height 1.0. Se distingue por caja
   alta y espaciado, no por tamaño. */
.prose h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--h4-size);
  line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  margin-top: 1.8em;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
/* Red de seguridad: H5 y H6 tampoco tenían estilo y heredaban el 1.0. */
.prose h5, .prose h6 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1em; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink); margin-top: 1.6em;
}

/* Proximidad 5:1 — el encabezado manda sobre lo que viene detrás, así que
   debajo casi no hay hueco. El "em" resuelve contra el elemento SIGUIENTE
   (el párrafo), no contra el encabezado: 0,5em ≈ 9 px. */
.prose h2 + *, .prose h3 + *, .prose h4 + *,
.prose h5 + *, .prose h6 + * { margin-top: 0.5em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* ---------- énfasis ----------
   La negrita saltaba DOS señales a la vez: +300 de peso y un escalón de
   luminancia (blog.css:95 la pintaba --ink sobre un cuerpo --ink-2). En
   privacidad hay 92 <strong> y en «¿Qué es duqe?» 36: el párrafo se leía
   moteado. Una sola señal, el peso. */
.prose strong, .prose b { font-weight: 600; color: inherit; }

/* Excepción: la entradilla de un ítem de lista sí se gana las dos señales,
   porque ahí la negrita es estructura, no énfasis. Es el mejor tramo de la
   política de privacidad. */
.prose li > strong:first-child { font-weight: 700; color: var(--ink); }

/* ---------- enlaces del cuerpo ----------
   El uso de más valor del rojo en todo el sitio. Hasta ahora los enlaces
   del texto iban en --ink subrayado: el MISMO negro que la negrita, así
   que dentro de un párrafo lleno de <strong> un enlace era literalmente
   indistinguible de un énfasis.

   --red-ink da 5,63:1 sobre el papel, de sobra para AA en texto normal.
   El de marca (--red, 4,00:1) NO valdría aquí, y por eso hay dos.

   El :not() triple deja fuera lo que es un botón disfrazado de enlace; si
   no, ganaría a los chips del manual por especificidad, que es justo el
   lío que había con .prose a de blog.css. */
.prose a:not(.btn):not(.duqe-manual__btn):not(.wp-block-button__link) {
  color: var(--red-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--red-line);
  text-underline-offset: 3px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.prose a:not(.btn):not(.duqe-manual__btn):not(.wp-block-button__link):hover {
  text-decoration-color: currentColor;
}

/* ---------- listas ----------
   .legal-prose usaba padding-left en px fijos, que no escala con el
   cuerpo, y el bullet iba al color del texto. */
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: 0.45em; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--faint); }
.prose li > ul, .prose li > ol { margin-top: 0.45em; }

/* ---------- cita destacada ----------
   Aquí entra la segunda dosis de rojo: una barra, no letra. */
.prose blockquote {
  margin: 2.2em 0 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 1.4vw + 14px, 27px);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--ink);
}
.prose blockquote p { font-size: inherit; line-height: inherit; color: inherit; }
.prose blockquote p + p { margin-top: 0.5em; }
.prose blockquote cite {
  display: block; margin-top: 12px;
  font-family: var(--font-body); font-style: normal; font-weight: 500;
  font-size: 15px; letter-spacing: 0; color: var(--muted);
}

/* ---------- separadores ----------
   Privacidad usa tres <hr class="wp-block-separator"> que salían como un
   guion corto centrado de 100 px: parecía un error de maquetación. El
   selector largo es para ganarle al de core, que va a (0,3,0). */
.prose hr,
.prose hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: 0; height: 1px; background: var(--line);
  width: 100%; max-width: none; margin: 3em 0 0;
}
/* El mismo aire por debajo, para que el filete quede centrado en su hueco. */
.prose hr + * { margin-top: 3em; }

/* ---------- código ----------
   La tabla de cookies lleva <code>_ga</code> y <code>_ga_*</code>: sin
   estilo caían a la monoespaciada del navegador a otro tamaño. */
.prose :not(pre) > code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.86em; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; white-space: nowrap;
}
.prose pre {
  padding: 18px 20px; overflow-x: auto;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.86em; line-height: 1.6;
}

/* ---------- tablas ----------
   Lo más roto que había en móvil: las dos tablas de /cookies/ partían
   palabras por la mitad («consentimien / to», «Proveedo / r»). No era el
   ancho: es que core pone overflow-wrap: break-word en las celdas y
   table-layout: fixed en .has-fixed-layout, así que la columna estrecha
   parte la palabra en vez de dejar que la tabla se desplace. Aquí se
   invierte: las palabras no se rompen y la tabla scrollea. */
.prose figure.wp-block-table {
  overflow-x: auto; overscroll-behavior-x: contain;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.prose .wp-block-table table.has-fixed-layout { table-layout: auto; }
.prose table th, .prose table td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 20px 12px 0; text-align: left; vertical-align: top;
  word-break: normal; overflow-wrap: normal; hyphens: none;
}
.prose .wp-block-table thead { border-bottom: 0; }
.prose table thead th {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.82em; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1.5px solid var(--ink); white-space: nowrap;
}
@media (max-width: 700px) {
  /* Antes que romper la palabra, que la tabla se deslice. */
  .prose table { min-width: 480px; }
}

/* ---------- figuras e imágenes ---------- */
.prose figcaption {
  margin-top: 10px; font-size: 0.82em; line-height: 1.5; color: var(--muted);
}
.prose img { border-radius: var(--r-sm); }

/* ---------- párrafos vacíos ----------
   Red de seguridad: en Ayuda hay una docena de <p></p> dentro de los
   bloques Detalles, y cada uno suma ~45 px de nada. Se borran en el
   editor; esto es por si vuelven a colarse. */
.prose > p:empty, .prose .wp-block-details > p:empty { display: none; }

/* ============================================================
   2. ESQUELETO DE CONTENIDO LARGO — índice + texto
   Lo comparten template-legal.php (4 páginas legales),
   template-indice.php («¿Qué es duqe?») y template-help.php.
   ============================================================ */

.legal-updated {
  display: inline-block; margin-top: 18px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 100px;
}

/* ------------------------------------------------------------
   POR QUÉ ESTO ES FLEX Y NO GRID

   Era `grid-template-columns: 240px 1fr`. Con dos hijos funciona, pero el
   JS del índice OCULTA el <aside> cuando la página no tiene ningún H2
   (interactions.js: `toc.style.display = "none"`). Con grid, el texto
   pasaba entonces a ocupar la PRIMERA pista y se pintaba en una columna
   de 240 px. Es un fallo latente que no se había visto porque hasta hoy
   solo usaban este esqueleto páginas que sí tienen apartados — y la de
   Ayuda, que se incorpora ahora, no tiene ni un H2 en la base de datos.

   Con flex el problema desaparece solo: si el índice no está, el texto es
   el único elemento y se queda donde estaba, alineado con la cabecera.

   Y no lleva justify-content: center a propósito. Centrar el par dejaba
   el bloque a ~143 px del borde mientras la cabecera de la página sigue
   pegada al canalón, que es exactamente la desalineación que estamos
   arreglando. Un solo eje izquierdo para cabecera, índice y texto.
   ------------------------------------------------------------ */
.legal-layout {
  display: flex;
  align-items: flex-start;   /* imprescindible: un item estirado a toda la
                                altura no puede quedarse pegado (sticky) */
  gap: clamp(32px, 4vw, 64px);
}
.legal-toc { flex: 0 0 260px; min-width: 0; }
.legal-prose {
  flex: 1 1 auto; min-width: 0;
  margin-inline: 0;          /* mata el `margin: 0 auto` de .prose, que en
                                flex se comería el espacio libre */
  /* La medida NO se repite aquí: .legal-prose va en el mismo elemento que
     .prose, así que el max-width del apartado 1 ya la está aplicando. */
}

/* Los dos ganchos que deja el JS cuando la página no tiene apartados que
   indexar (hoy, la de Ayuda: no hay ni un H2 en la base de datos).

   `hidden` lo pone el navegador a display:none, pero se declara aquí a
   propósito: si algún día alguien le da un `display` a .legal-toc, el
   atributo dejaría de funcionar sin que nadie se entere.

   Y .legal-layout--solo NO pone el texto a todo el ancho, aunque el
   comentario del JS lo sugiera: 1.296 px de línea serían 165 caracteres,
   el triple de lo legible. Lo único que sobra al quitar el índice es el
   hueco entre columnas; la medida se queda donde está y el texto se
   alinea con la cabecera, que es lo que se buscaba. */
.legal-toc[hidden] { display: none; }
.legal-layout--solo { gap: 0; }

/* ---------- el índice ---------- */
.legal-toc {
  --toc-top: var(--nav-h);
  position: sticky; top: var(--toc-top);
  /* Con los H3 dentro, privacidad pasa de 12 a 23 entradas (~780 px). En un
     portátil de 800 px de alto el final quedaría inalcanzable para siempre. */
  max-height: calc(100vh - var(--toc-top) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Cuando el usuario está logueado, WordPress muestra la barra de admin
   (32 px en escritorio, 46 px en móvil) y añade .admin-bar al body. */
.admin-bar .legal-toc { --toc-top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .legal-toc { --toc-top: calc(var(--nav-h) + 46px); }
}

.legal-toc__title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}

/* El raíl estaba ROTO EN SEGMENTOS: cada <a> llevaba su propio border-left
   y el <nav> tenía gap: 2px, así que la línea salía a trozos. Ahora la
   línea continua es del <nav> y cada enlace la tapa con su propia marca. */
.legal-toc__nav {
  display: flex; flex-direction: column; gap: 0;
  border-left: 1px solid var(--line);
  position: relative;
}
.legal-toc__nav a {
  font-size: 14.5px; line-height: 1.4; color: var(--muted);
  padding: 8px 10px 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.legal-toc__nav a:hover { color: var(--ink); border-left-color: var(--line-strong); }

/* Tercera dosis de rojo: el apartado activo. La MARCA va en --red (es un
   filo, 4,00:1 sobre el 3:1 que pide un elemento gráfico); el TEXTO se
   queda en --ink con peso 600, porque a 14,5 px el rojo de marca no
   cumpliría. */
.legal-toc__nav a.is-current {
  color: var(--ink); font-weight: 600; border-left-color: var(--red);
}

/* Subapartados (H3). El JS los marca con .toc-link--h3 en cuanto la
   plantilla pide data-toc-levels="h2,h3". Sin esto, privacidad dejaba
   fuera del índice sus once apartados 4.1-4.3 y 5.1-5.8: «5.6 Informes de
   errores» está a unos 5.000 px del inicio y no había forma de llegar. */
.legal-toc__nav .toc-link--h3 {
  padding-left: 30px; font-size: 13.5px;
}

/* Cuando lo que se lee es un subapartado, el JS deja encendido también su
   apartado padre. Se marca con menos fuerza que el activo: el filo se
   insinúa y la letra se oscurece, pero sin rojo y sin negrita, para que a
   simple vista siga habiendo un solo "estás aquí". */
.legal-toc__nav a.is-parent {
  color: var(--ink-2); border-left-color: var(--line-strong);
}

/* ---------- móvil ----------
   El índice pasa arriba y deja de ser pegajoso. Va DESPUÉS de las reglas
   de .admin-bar a propósito: aquí tiene que ganar el position: static. */
@media (max-width: 860px) {
  /* align-items vuelve a stretch: en columna, el eje transversal es el ancho,
     y con flex-start cada bloque se encogería a su contenido en vez de ocupar
     la pantalla. Es el único sitio donde ese valor estorba. */
  .legal-layout { flex-direction: column; align-items: stretch; gap: 28px; }
  .legal-toc {
    flex: none; width: 100%;
    position: static; max-height: none; overflow: visible;
  }
  /* Sin índice al lado, la medida la marca el ancho de la pantalla: capar a
     68ch aquí dejaría un hueco muerto a la derecha en tabletas. */
  .legal-prose { max-width: none; }
  .legal-toc__inner {
    background: var(--paper-2); border-radius: 14px; padding: 18px 20px;
  }
  /* En privacidad el índice ocupaba ~520 px antes del primer párrafo. Con
     un tope y scroll propio, el texto empieza donde tiene que empezar. */
  .legal-toc__nav {
    max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .legal-toc__nav a { padding: 6px 10px 6px 16px; }
}

/* ============================================================
   3. COLUMNA LATERAL ENRIQUECIDA (plantilla «Página con índice»)
   Frase de filosofía + entradas del blog bajo el índice
   ============================================================ */
.toc-quote {
  margin: 28px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
  /* Sin cursiva: en assets/fonts/ no hay ni un archivo itálico, así que el
     navegador estaba inclinando la geométrica a mano. En Montserrat 600 se
     nota mucho. Una cita no necesita cursiva para leerse como cita. */
  font-style: normal;
}
.toc-posts { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.toc-posts__title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.toc-post { display: block; margin-bottom: 16px; }
.toc-post:last-child { margin-bottom: 0; }
.toc-post__cat {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin-bottom: 3px;
}
.toc-post__title {
  display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2);
  font-weight: 500; transition: color .2s;
}
.toc-post:hover .toc-post__title { color: var(--ink); }

/* En móvil la caja lateral ya está arriba del todo. La cita y las entradas
   del blog no son navegación: en «¿Qué es duqe?» empujaban el primer
   párrafo a ~480 px de scroll. En una página comercial, lo primero que ve
   un móvil no puede ser una lista de enlaces y una entrada aleatoria. */
@media (max-width: 860px) {
  .legal-toc--rich .toc-quote,
  .legal-toc--rich .toc-posts { display: none; }
}

/* ============================================================
   4. ACORDEÓN DE FAQ (bloque "Detalles" de Gutenberg)
   ============================================================ */
.prose .wp-block-details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
/* Solo tenía borde abajo: era una lista "abierta por arriba" pegada al
   texto anterior. Un bloque cerrado se lee como un bloque. */
.prose .wp-block-details:first-of-type { border-top: 1px solid var(--line); }

/* El divisor no estaba centrado entre preguntas: 24 px por arriba y
   24 + 27 por abajo, porque el hueco del "búho" se sumaba al padding del
   summary. Con siete filas el ojo lo nota aunque no sepa por qué. */
.prose > .wp-block-details + .wp-block-details { margin-top: 0; }

.prose .wp-block-details summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2vw, 24px) 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px); color: var(--ink);
  transition: color .2s var(--ease);
  /* Sin esto, un doble clic sobre la pregunta selecciona el texto Y abre y
     cierra el panel a la vez. */
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.prose .wp-block-details summary::-webkit-details-marker { display: none; }
.prose .wp-block-details summary:hover { color: var(--muted); }

/* El "+" era el carácter tipográfico de Montserrat: trazo fino, asimétrico
   respecto a su caja, y al girarlo 45° no salía una × centrada. Dos barras
   dibujadas con gradientes giran limpias y admiten color. */
.prose .wp-block-details summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--ease);
}
/* Cuarta y última dosis de rojo: el aspa de la pregunta abierta. Es el
   único cambio de estado de la página y hasta ahora no se señalaba con
   color. 14 px de grafismo: umbral 3:1, cumple con holgura. */
.prose .wp-block-details[open] summary::after {
  transform: rotate(45deg);
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
}

.prose .wp-block-details > *:not(summary) {
  padding-bottom: clamp(18px, 2vw, 24px);
  color: var(--ink-2); line-height: 1.65;
}

/* Apertura suave donde el navegador la soporta. En Firefox y Safari
   antiguo el @supports no entra y el panel salta abierto: exactamente
   como hasta ahora. Cero riesgo. La propiedad se pone en el propio
   <details> (se hereda a ::details-content) para no tocar :root. */
@supports (interpolate-size: allow-keywords) {
  .prose .wp-block-details { interpolate-size: allow-keywords; }
  .prose .wp-block-details::details-content {
    block-size: 0; overflow: clip; content-visibility: hidden;
    transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
  }
  .prose .wp-block-details[open]::details-content {
    block-size: auto; content-visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prose .wp-block-details::details-content { transition: none; }
}

/* ============================================================
   5. REJILLA DE MANUALES (bloque HTML del contenido de Ayuda)
   ============================================================ */

/* ------------------------------------------------------------
   El bloque del manual redefine --ink y --line con neutros PUROS
   (#0A0A0A, #E5E5E5) mientras el sistema usa neutros cálidos. En la misma
   pantalla, los filos de los chips salían perceptiblemente más fríos que
   las líneas del acordeón. `inherit` en una custom property devuelve el
   valor del padre, o sea el de :root: deshace el eclipse sin redefinir la
   paleta. Cuando se limpie el <style> del contenido, esto sobra.
   ------------------------------------------------------------ */
.prose .duqe-manual { --ink: inherit; --line: inherit; }

/* El bloque va en un <style> dentro del contenido, o sea DESPUÉS de este
   archivo en el documento: a igualdad de especificidad gana él. Por eso el
   hueco del búho se repite aquí con más peso, y por eso hace falta repetir
   también la excepción de "pegado a su encabezado". */
.prose > .duqe-manual { margin-top: 1.5em; }
.prose h2 + .duqe-manual, .prose h3 + .duqe-manual { margin-top: 0.5em; }

/* El centrado no aportaba jerarquía, aportaba ruido: la página cambiaba de
   eje cinco veces en cuatro pantallas. En un sistema minimalista el eje
   izquierdo constante ES el diseño. */
.prose .duqe-manual__intro,
.prose .duqe-manual__title,
.prose .duqe-manual__sub { text-align: left; }
.prose .duqe-manual__sub { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; }

/* ------------------------------------------------------------
   De rejilla rígida a chips fluidos.

   `repeat(4, 1fr)` con 21 elementos deja 5 filas de 4 y 简体中文 solo en la
   sexta; en móvil, 10 filas de 2 y un huérfano: once filas para llegar a
   las preguntas frecuentes. Y el problema de fondo es que son etiquetas de
   longitud muy dispar («Español» frente a «Bahasa Indonesia»): metidas en
   celdas iguales parecen una tabla de precios. En flujo no hay huérfano —
   la última fila corta es lo natural— y baja a 4 filas en escritorio y ~7
   en móvil.
   ------------------------------------------------------------ */
.prose .duqe-manual__grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* (0,2,1). Tiene que ganarle a .prose a de blog.css (0,1,1), que era quien
   subrayaba los nombres de idioma DENTRO de los botones: el bloque sí pedía
   text-decoration: none, pero desde el contenido va a (0,1,0) y perdía.
   Peor todavía: .duqe-manual__btn:hover (0,2,0) sí ganaba el fondo y el
   color, así que al pasar el ratón salía un botón negro con el texto blanco
   subrayado. */
.prose a.duqe-manual__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 100px;
  font-family: var(--font-body); font-weight: 500; font-size: 15.5px;
  line-height: 1.2; color: var(--ink);
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
/* Nada indicaba que son descargas de PDF: parecían enlaces a versiones
   traducidas de la web. */
.prose a.duqe-manual__btn::after { content: "\2193"; font-size: 13px; opacity: .45; }
/* Español e inglés van a ser el 90 % de las descargas: jerarquía sin añadir
   una sola palabra. */
.prose a.duqe-manual__btn--primary { border-color: var(--ink); font-weight: 600; }
.prose a.duqe-manual__btn:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.prose a.duqe-manual__btn:hover::after { opacity: .8; }

/* Plegado opcional de los 19 idiomas restantes. */
.prose .duqe-manual__more { margin-top: 14px; }
.prose .duqe-manual__more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  color: var(--muted); padding: 8px 0;
  user-select: none;
}
.prose .duqe-manual__more > summary::-webkit-details-marker { display: none; }
.prose .duqe-manual__more > summary::before {
  content: "\203A"; transition: transform .25s var(--ease);
}
.prose .duqe-manual__more[open] > summary::before { transform: rotate(90deg); }
.prose .duqe-manual__more > summary:hover { color: var(--ink); }
.prose .duqe-manual__more .duqe-manual__grid { margin-top: 12px; }

/* ============================================================
   6. CONTACT FORM 7 — con el estilo de duqe
   ============================================================ */
.wpcf7 { margin-top: 8px; }
/* Un campo de texto de 760 px para escribir un nombre propio es feo y deja
   la etiqueta perdida a la izquierda. */
.prose .wpcf7 { max-width: 620px; }
.wpcf7-form p { margin: 0 0 20px; }

/* Etiquetas */
.wpcf7-form label {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; color: var(--ink); margin-bottom: 8px;
}

/* Campos de texto, email y textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 18px;
  transition: border-color .2s var(--ease);
}
/* Diez filas daban un campo de ~330 px de alto que dominaba la página. */
.wpcf7-form textarea { min-height: 130px; resize: vertical; border-radius: 18px; }

/* ------------------------------------------------------------
   AQUÍ ESTABA EL FALLO DE ACCESIBILIDAD

   Estas tres reglas llevaban `outline: none`. El selector
   `.wpcf7-form input:focus` (0,2,1) alcanza TAMBIÉN al input[type=submit],
   le quitaba el anillo del navegador y lo sustituía por un border-color…
   sobre un elemento que tiene `border: none`. Quien navegaba con teclado
   llegaba al botón «Enviar» y no veía absolutamente nada: WCAG 2.4.7 en el
   único botón real de la página.

   base.css ya define el anillo rojo global con :focus-visible, y va a
   (0,1,0): cualquier `outline: none` con más peso lo mata. La solución no
   es añadir un anillo más, es dejar de estorbar al que ya hay. El
   border-color sí se queda: es una pista útil en los campos de texto.
   ------------------------------------------------------------ */
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus { border-color: var(--ink); }

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--faint); }

/* Botón de envío: igual que .btn del tema. Se queda NEGRO a propósito —
   blanco sobre --red da 4,17:1 y a 16 px en negrita no cumple; y si el
   rojo pasa a ser el color de los botones deja de ser un acento. */
.wpcf7-form input[type="submit"] {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 100px;
  padding: 15px 32px; cursor: pointer; margin-top: 8px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.wpcf7-form input[type="submit"]:hover { opacity: 0.88; transform: translateY(-1px); }

/* Casilla de consentimiento RGPD (hay que añadirla en el editor de CF7:
   [acceptance acepto-privacidad] … [/acceptance]). Sin esto sale con el
   estilo por defecto del plugin. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-weight: 400; font-size: 14.5px;
  color: var(--ink-2); line-height: 1.5; margin-bottom: 0;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--red);
}
.wpcf7-form .wpcf7-acceptance a { text-decoration: underline; text-underline-offset: 2px; }

/* Mensajes de respuesta de CF7. Los rojos sueltos (#c0392b, #fbf0ef) se van
   a los tokens: el filo en --red y la letra en --red-ink, que a 13,5 px es
   el único de los dos que cumple. */
.wpcf7-response-output {
  border-radius: 12px !important; padding: 14px 18px !important;
  font-size: 15px; margin: 8px 0 0 !important;
  border-width: 1.5px !important;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #2f7d4f !important; color: #2f7d4f; background: #f0f7f2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--red) !important; color: var(--red-ink); background: var(--red-wash);
}
.wpcf7-form .wpcf7-not-valid { border-color: var(--red) !important; }
.wpcf7-not-valid-tip { color: var(--red-ink); font-size: 13.5px; font-weight: 600; margin-top: 7px; }
.wpcf7-spinner { margin: 0 0 0 12px; }

/* ============================================================
   7. CSS SIN USAR — pendiente de confirmar con Luis antes de borrar

   Verificado por grep sobre todo el tema y sobre el HTML servido: ninguna
   de estas clases aparece en ninguna plantilla, en ningún JS ni en el
   contenido de WordPress. Son ~70 líneas de una versión anterior de la
   página de Ayuda, cuando las FAQ y las guías se maquetaban a mano en vez
   de escribirse con bloques.

   Ojo con .faq__item: es un duplicado casi idéntico del acordeón del
   apartado 4. Dos copias del mismo componente es exactamente cómo se
   acaba depurando la equivocada durante media hora.

   No se borran aquí porque la regla 5 del CLAUDE.md dice que no se borra
   nada sin confirmarlo. Están al final del archivo para que el día que
   Luis dé el visto bueno sea un solo corte.
   ============================================================ */
.help-section { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.help-section:first-of-type { border-top: none; }
.help-section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.help-section__eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 14px;
}
.help-section__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink);
}
.help-section__lead { color: var(--ink-2); font-size: clamp(16px, 1.1vw, 18px); margin-top: 16px; max-width: 60ch; }

.faq { display: flex; flex-direction: column; gap: 0; max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2vw, 26px) 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px); color: var(--ink);
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--muted); }
.faq__item summary::after {
  content: "+"; font-weight: 400; font-size: 26px; line-height: 1;
  color: var(--muted); flex: none; transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .faq__body {
  padding: 0 0 clamp(20px, 2vw, 26px);
  color: var(--ink-2); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65;
  max-width: 70ch;
}
.faq__item .faq__body p { margin: 0 0 1em; }
.faq__item .faq__body p:last-child { margin-bottom: 0; }

.guides {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.guide {
  background: var(--paper); padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 180px; transition: background .2s var(--ease);
}
.guide:hover { background: var(--paper-2); }
.guide__num {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; color: var(--faint);
}
.guide__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; color: var(--ink);
}
.guide__text { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

.duqe-form-wrap { max-width: 640px; }


/* ============================================================
   MÁS PRESENCIA DE MARCA EN LAS PÁGINAS INTERIORES (4 sep 2026)
   ------------------------------------------------------------
   El rojo entró primero solo en la portada y las páginas interiores se
   quedaron en blanco y negro, así que el sitio parecía dos sitios. Estas
   reglas repiten aquí los mismos gestos que usa el material de Google Play:
   el filete corto bajo la etiqueta de sección (el que va bajo el logotipo en
   el gráfico destacado) y la marca del apartado activo del índice.
   ============================================================ */

/* Filete rojo sobre la etiqueta de sección de cada cabecera de página. */
.pagehead .eyebrow { position: relative; display: inline-block; padding-top: 16px; }
.pagehead .eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; background: var(--red); border-radius: 2px;
}