@charset "UTF-8";
/* ============================================================================
   letrascursivas — assets/css/site.css

   DIRECCION VISUAL
   ----------------
   El material de partida no es "web de generador" (todas iguales: tarjetas
   blancas, degradado morado, botón redondeado). Es el CUADERNO DE CALIGRAFIA
   hispano: la doble raya, la pauta azul clarita, el margen rojo, las guías a
   lápiz. De ahí sale todo lo de abajo.

   Por qué esto y no un tema neutro: dos de las diecisiete herramientas
   (la hoja de caligrafía y la referencia de trazos) SON papel pautado. Si la
   pauta es el producto en dos páginas, tiene que ser el idioma de todas: así el
   sitio se reconoce y la herramienta no parece un injerto.

   El elemento de firma es la PAUTA sobre la que se apoya cada muestra de texto.
   No es adorno: da una línea base con la que juzgar un tatuaje o un molde, y
   hace que unos glifos Unicode se lean como escritura a mano y no como
   caracteres sueltos.

   TIPOGRAFIA
   ----------
   Cero fuentes web, por decisión y no por falta: el sitio muestra caracteres
   Unicode, no tipografías, y cargar una fuente decorativa añadiría una petición
   bloqueante para adornar títulos. La personalidad se construye con el
   emparejamiento y el ajuste:
     · interfaz  → pila del sistema, tracking cerrado en los títulos grandes
     · lectura   → Georgia (o Times / Noto Serif), que está en Windows, macOS,
                   Android e iOS; distingue el texto de leer del de pulsar
     · datos     → monoespaciada del sistema para contadores y etiquetas de letra

   ORDEN DEL FICHERO
   -----------------
    1. Tokens
    2. Reinicio y base
    3. Tipografía y prosa
    4. Utilidades de maquetación
    5. La pauta (elemento de firma)
    6. Cabecera y menú
    7. Migas
    8. Botones y controles
    9. La hoja (panel de herramienta)
   10. Galería de estilos
   11. Bloques de contenido
   12. FAQ
   13. Enlazado interno
   14. Portada y categorías
   15. Error
   16. Pie
   17. Herramientas concretas
   18. Impresión
   19. Preferencias del usuario (movimiento, contraste)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
/*
   AVISO ANTES DE TOCAR LOS COLORES
   --------------------------------
   Cinco de estos valores estan dibujados a pixeles dentro de assets/images/:
   --pluma (#2f4b8f), --pauta (#9fc3d8), --margen (#d9534a), --papel (#fbfaf7) y
   --linea (#e3dfd6). Los usa bin/gen_images.py para el favicon y las 34 tarjetas
   sociales. Cambiar el tono aqui no cambia las imagenes: deja el sitio y sus
   miniaturas de dos colores distintos hasta que alguien vuelve a ejecutar
   gen_images.py y gen_seed.py. Anadir tonos nuevos es libre; retocar esos cinco,
   no.
*/
:root {
  color-scheme: light;

  /* Papel y tinta.
     --papel sigue definido con su valor EXACTO porque esta dibujado en las
     imagenes (ver el aviso de arriba). Pero el fondo VISIBLE de la pagina ya no
     es ese crema calido: es --fondo, un blanco muy frio con un punto de lavanda,
     que es la direccion del rediseño. Los cinco protegidos no se tocan; esto es
     una capa nueva de superficies encima. */
  --papel:        #fbfaf7;   /* PROTEGIDO: papel de las tarjetas sociales */
  --fondo:        #f4f7fd;   /* fondo de pagina: blanco frio, lavanda apenas */
  --superficie:   #e9eff9;   /* lavanda clara: tiras de beneficios y realces */
  --papel-hueco:  #eef2fb;   /* fondo de zonas hundidas, ahora frio */
  --hoja:         #ffffff;   /* tarjetas y paneles, mas blancos que el fondo */
  --tinta:        #0f1a2e;   /* navy profundo; nunca #000 */
  --tinta-suave:  #3c4a63;
  --lapiz:        #5b6780;   /* texto secundario */
  --lapiz-claro:  #9aa5bb;

  /* La superficie oscura. Ahora solo la usa el pie: es el unico bloque oscuro del
     sitio y cierra la pagina. La cabecera ya no se oscurece al hacer scroll —es
     estatica y clara— asi que estos tonos ya no se comparten con ella.
     Deriva del mismo navy de la tinta, mas denso. */
  --tinta-honda:   #101623;
  --tinta-borde:   #24314a;   /* separadores dentro de la superficie oscura */
  --sobre-tinta:   #eef2f8;   /* texto principal sobre oscuro: 16:1 */
  --sobre-tinta-2: #a9b3c6;   /* secundario sobre oscuro: 8.5:1 */
  --lapiz-tinta:   #8b95ab;   /* letra pequeña sobre oscuro: 6:1 */
  --pluma-clara:   #a8c0f0;   /* enlaces sobre oscuro: 9.9:1 */

  /* Los tres colores del cuaderno. --pauta, --margen y --pluma estan PROTEGIDOS
     (dibujados en las imagenes): valores exactos, no se retocan. --pluma es
     ademas el azul de accion principal del rediseño, asi que encaja sin cambio. */
  --pauta:        #9fc3d8;   /* PROTEGIDO: la raya azul del cuaderno */
  --pauta-tenue:  #dceaf2;
  --margen:       #d9534a;   /* PROTEGIDO: el margen rojo. Se usa poquísimo */
  --pluma:        #2f4b8f;   /* PROTEGIDO: azul de acción, enlaces y botón principal */
  --pluma-oscura: #24396d;
  --pluma-tenue:  #eaeff8;

  /* Estados */
  --ok:           #2c7a5b;
  --ok-tenue:     #e7f4ee;
  --aviso-tenue:  #fdf3e6;
  --aviso-borde:  #d98324;

  /* Trazo y sombra.
     Las sombras son de tinta y no de negro puro: una sombra gris sobre papel
     cálido se ve sucia. Y son casi planas a propósito —el papel se apoya, no
     flota— salvo la del menú, que sí tiene que despegarse del contenido. */
  /* Trazo y sombra.
     --linea sigue con su valor EXACTO (protegido, dibujado en las imagenes) pero
     ya casi no se usa como borde visible: el borde de interfaz del rediseño es
     --borde, un gris azulado frio que combina con --fondo y --superficie. Las
     sombras son de navy y no de negro puro, y mas suaves que antes: el rediseño
     pide sombras discretas, nada de glassmorphism ni cajas flotando. */
  --linea:        #e3dfd6;   /* PROTEGIDO: líneas de las imágenes */
  --borde:        #e4e9f3;   /* borde de interfaz, frío y suave */
  --borde-fuerte: #cdd7e7;   /* borde de controles y estados de foco */
  --sombra-hoja:  0 1px 2px rgba(15, 26, 46, .04), 0 8px 24px -16px rgba(15, 26, 46, .22);
  --sombra-alta:  0 1px 2px rgba(15, 26, 46, .05), 0 20px 40px -24px rgba(15, 26, 46, .3);
  --sombra-menu:  0 16px 42px -20px rgba(15, 26, 46, .32), 0 2px 6px -2px rgba(15, 26, 46, .1);
  --radio:        12px;
  --radio-chico:  8px;
  --radio-grande: 16px;

  /* Un solo tiempo y una sola curva para todo lo que se mueve. Dos duraciones
     distintas en la misma pantalla se notan aunque nadie sepa decir por qué. */
  --tiempo:  .18s;
  --curva:   cubic-bezier(.2, .7, .3, 1);

  /* Tipografía */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica. Los saltos son grandes a propósito: en un móvil hay que
     distinguir el h1 del h2 de un vistazo, sin leer. El --t-4xl es solo para la
     portada; un titular de portada compite con el resto de internet, no con el
     h2 de su propia página. */
  --t-xs:  .78rem;
  --t-s:   .875rem;
  --t-m:   1rem;
  --t-l:   1.125rem;
  --t-xl:  1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: clamp(1.9rem, 1.35rem + 2.4vw, 2.85rem);
  --t-4xl: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);

  /* Medidas. El rediseño pide un contenedor de 1180px y una columna de lectura
     de 780px, con 24px de aire a los lados. */
  --medida-prosa: 48.75rem;   /* 780px */
  --medida-ancha: 73.75rem;   /* 1180px */
  --sangria:      clamp(1.15rem, .8rem + 1.4vw, 1.5rem);   /* hasta 24px */
  --hueco:        clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* --------------------------------------------------- 2. Reinicio y base */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 100% respeta el tamaño de letra que el usuario haya configurado. Fijar 62.5%
     lo pisa, y en un sitio que la mitad de las visitas abre en el móvil eso es
     un problema de accesibilidad real, no teórico. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es estatica (no sticky), asi que un salto a un ancla cae justo
     donde debe y no hace falta reservar hueco por delante. Un pequeño respiro
     para que el destino no quede pegado al borde de arriba. */
  scroll-padding-top: 1rem;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.6;
  /* La coma decimal y el punto de millar no dependen de esto, pero las cifras
     tabulares alinean las columnas de las tablas de datos. */
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100%;
}

main { flex: 1 0 auto; padding-block: var(--hueco) calc(var(--hueco) * 1.5); }

img, svg, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible siempre, y con el azul de bolígrafo para que se lea como parte
   del sistema y no como el anillo por defecto del navegador. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pluma);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 var(--radio-chico) 0;
  text-decoration: none;
}
.salto-contenido:focus { left: 0; }

.aviso-borrador {
  margin: 0;
  padding: .55rem var(--sangria);
  background: var(--aviso-tenue);
  border-bottom: 1px solid var(--aviso-borde);
  font-size: var(--t-s);
  text-align: center;
}

/* -------------------------------------------- 3. Tipografía y prosa */
h1, h2, h3, h4 {
  font-family: var(--sans);
  line-height: 1.18;
  /* Tracking cerrado: en la pila del sistema es lo que separa un título
     compuesto de un párrafo en negrita. */
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--t-2xl); font-weight: 650; }
h3 { font-size: var(--t-xl);  font-weight: 650; }
h4 { font-size: var(--t-l);   font-weight: 650; }

a { color: var(--pluma); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--pluma-oscura); }

/* La prosa va en serif y con medida corta. Es la única parte del sitio pensada
   para leerse seguido; el resto se usa, no se lee. */
.prosa {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: var(--medida-prosa);
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.prosa > * + * { margin-top: 1.05em; }
.prosa p { margin: 0; }
.prosa h2, .prosa h3, .prosa h4 { font-family: var(--sans); color: var(--tinta); margin-top: 1.8em; }
.prosa strong { color: var(--tinta); font-weight: 700; }
.prosa ul, .prosa ol { margin: 0; padding-left: 1.4em; }
.prosa li + li { margin-top: .5em; }
.prosa code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--papel-hueco);
  padding: .12em .4em;
  border-radius: 4px;
}
.prosa blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--pauta);
  color: var(--lapiz);
  font-style: italic;
}

/* Etiqueta pequeña en versalitas espaciadas. Es el recurso estructural del
   sitio: dice de qué tipo es lo que sigue sin gastar un título. */
.rotulo {
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lapiz);
}

/* ------------------------------------- 4. Utilidades de maquetación */
.contenedor {
  width: 100%;
  max-width: var(--medida-ancha);
  margin-inline: auto;
  padding-inline: var(--sangria);
}

/* El margen rojo del cuaderno. Solo desde tableta: en un móvil de 360 px cada
   píxel de ancho cuenta más que el guiño.

   El contenedor del héroe entra en la misma regla a propósito. Dibujar su raya
   con un pseudoelemento y un cálculo aparte parecía más limpio, pero cualquier
   cambio de --medida-ancha o de --sangria desalinearía las dos rayas por unos
   píxeles, que es justo lo que se nota. Una sola regla, una sola raya. */
@media (min-width: 56rem) {
  main > .contenedor,
  main > .portada > .contenedor,
  main > .portada > .heroe > .contenedor {
    border-left: 2px solid color-mix(in srgb, var(--margen) 55%, transparent);
    padding-left: calc(var(--sangria) + 1.25rem);
  }
}

/* --------------------------------------- 5. La pauta (elemento de firma) */
/*
   Tres rayas dibujadas con un degradado, sin una sola imagen:
     · la línea base, sólida, donde se apoyan las letras
     · la de altura de x, tenue
     · la de ascendentes, más tenue todavía
   Alto fijo por línea (--pauta-alto) para que el texto caiga encima y no entre
   dos rayas. Cuando el texto ocupa varias líneas, el patrón se repite.
*/
.pauta {
  --pauta-alto: 3.4rem;
  --pauta-base: 78%;    /* dónde cae la línea base dentro de cada renglón */
  background-image:
    linear-gradient(to bottom,
      transparent calc(var(--pauta-base) - 1.5px),
      var(--pauta) calc(var(--pauta-base) - 1.5px),
      var(--pauta) var(--pauta-base),
      transparent var(--pauta-base)),
    linear-gradient(to bottom,
      transparent calc(38% - 1px),
      var(--pauta-tenue) calc(38% - 1px),
      var(--pauta-tenue) 38%,
      transparent 38%);
  background-size: 100% var(--pauta-alto);
  background-repeat: repeat-y;
  background-position: 0 0;
}

/* La muestra se sienta sobre la pauta. line-height igual al alto del renglón:
   es lo que hace que la línea base del texto y la raya coincidan. */
.pauta--texto {
  line-height: var(--pauta-alto);
  padding-inline: .75rem;
  min-height: var(--pauta-alto);
}

/* -------------------------------------------------- 6. Cabecera y menú */
/*
   LA CABECERA DEL SITIO ES INTENCIONADAMENTE NO STICKY.
   ----------------------------------------------------
   Es `position: relative` y se queda arriba, en el flujo: al bajar sale de
   pantalla como cualquier otro bloque. Esto es una decision de diseño, no un
   descuido ni una regresion pendiente de arreglar.

   Antes SI era sticky y cambiaba a tinta al hacer scroll. Se retiro entero:
     · la regla `position: sticky` y su `top`/`z-index`
     · el `backdrop-filter` y la transicion de superficie
     · la clase `.cabecera--separada` y sus ocho reglas descendientes
     · el `scroll-padding-top: 4.75rem` del <html>, que solo existia para que las
       anclas no cayeran detras de ella
     · la funcion `bindCabecera()` de assets/js/ui.js y su llamada en `init()`,
       que era la que ponia y quitaba esa clase al hacer scroll

   NO volver a añadir `position: sticky` ni `position: fixed` aqui, y no volver a
   introducir un listener de scroll que le ponga clases: lo que si permanece
   visible mientras se navega es el CAMPO DE TEXTO del generador, que es sticky
   dentro de su propia seccion (ver la seccion 9). Dos elementos pegados arriba a
   la vez se pelean por el mismo borde y el campo pierde.

   La cabecera es clara y plana: fondo blanco, un borde inferior de un pixel y
   nada mas. La raya de pauta azul se cambio por el borde frio del rediseño.
*/
.site-header,
.cabecera {
  position: relative;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(159, 195, 216, .45);
}

.site-header__inner,
.cabecera__fila {
  max-width: 1440px;
  min-height: 72px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-logo,
.marca {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta, #0f1a2e);
  font-weight: 650;
  letter-spacing: -.02em;
}

.site-logo__glyph,
.marca__glifo {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--pluma, #2f4b8f);
}

.site-logo__text,
.marca__texto {
  font-size: var(--t-m, 1rem);
  font-weight: 700;
}

/* --- el envoltorio móvil --- */
.menu-movil { position: relative; }
.menu-movil__boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .55rem .8rem;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  font-size: var(--t-s);
  font-weight: 550;
  color: var(--tinta);
  min-height: 2.5rem;
  transition: background var(--tiempo) var(--curva), border-color var(--tiempo) var(--curva);
}
.menu-movil__boton:hover { background: var(--papel-hueco); border-color: var(--lapiz-claro); }
.menu-movil__texto { line-height: 1; }

.menu-movil__barras {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--tinta);
  transition: background var(--tiempo) var(--curva);
}
.menu-movil__barras::before,
.menu-movil__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--tinta);
  transition: transform var(--tiempo) var(--curva);
}
.menu-movil__barras::before { top: -5px; }
.menu-movil__barras::after  { top:  5px; }
.menu-movil[data-abierto="1"] .menu-movil__barras { background: transparent; }
.menu-movil[data-abierto="1"] .menu-movil__barras::before { transform: translateY(5px) rotate(45deg); }
.menu-movil[data-abierto="1"] .menu-movil__barras::after  { transform: translateY(-5px) rotate(-45deg); }

.main-nav,
.menu__lista {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item--dropdown {
  position: relative;
  list-style: none;
}

/* Invisible hover bridge */
.nav-item--dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  pointer-events: auto;
}

.nav-dropdown-trigger {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--tinta, #0f1a2e);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 9px;
  font: inherit;
  font-size: var(--t-s, .875rem);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color .14s ease, background .14s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-item--dropdown.is-open > .nav-dropdown-trigger {
  color: var(--pluma, #2f4b8f);
  background: rgba(47, 75, 143, .07);
}

.nav-chevron {
  display: inline-block;
  width: .38em;
  height: .38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .14s ease;
}

.nav-item--dropdown:hover .nav-chevron,
.nav-item--dropdown:focus-within .nav-chevron,
.nav-item--dropdown.is-open .nav-chevron {
  transform: rotate(225deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  min-width: 230px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px;
  margin: 0;

  background: #ffffff;
  border: 1px solid rgba(159, 195, 216, .55);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 26, 46, .13);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;

  z-index: 1100;
}

@media (min-width: 48rem) {
  .nav-item--dropdown:last-child .nav-dropdown,
  .nav-item--dropdown:nth-last-child(2) .nav-dropdown {
    left: auto;
    right: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-item--dropdown:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.nav-item--dropdown.is-open > .nav-dropdown,
.nav-item--dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown a,
.menu__sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--tinta, #0f1a2e);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--t-s, .875rem);
  transition: color .14s ease, background .14s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.menu__sub a:hover,
.menu__sub a:focus-visible {
  color: var(--pluma, #2f4b8f);
  background: rgba(47, 75, 143, .07);
}

.nav-dropdown a[aria-current="page"],
.menu__sub a[aria-current="page"] {
  color: var(--tinta, #0f1a2e);
  background: rgba(47, 75, 143, .11);
  font-weight: 650;
}

.menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__todas {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  border-top: 1px solid rgba(159, 195, 216, .35);
  font-size: var(--t-xs, .8125rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--pluma, #2f4b8f);
}

.menu__todas:hover,
.menu__todas:focus-visible {
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .menu-movil__boton { display: none; }
}

@media (max-width: 47.99rem) {
  .cabecera__fila,
  .site-header__inner {
    min-height: 4rem;
    padding: 0 16px;
  }

  .main-nav,
  .menu__lista {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .menu__item + .menu__item {
    border-top: 1px solid var(--borde);
  }

  .nav-item--dropdown::after {
    display: none;
  }

  .nav-dropdown-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    font-size: var(--t-m);
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0 0 .5rem .75rem;
    margin-left: .55rem;
    border-left: 2px solid var(--pauta);
    display: none;
  }

  .nav-item--dropdown.is-open > .nav-dropdown {
    display: block;
  }

  html.js .menu-movil[data-abierto="0"] > .menu { display: none; }
  html.js .menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(20rem, calc(100vw - var(--sangria) * 2));
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    background: var(--hoja);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-menu);
    padding: .5rem;
    z-index: 1200;
  }

  html:not(.js) .cabecera__fila { flex-wrap: wrap; }
  html:not(.js) .menu-movil { width: 100%; }
  html:not(.js) .menu { padding-bottom: .5rem; }
}

/* ------------------------------------------------------- 7. Migas */
.migas { margin-bottom: 1.25rem; }
.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-xs);
  letter-spacing: .02em;
  color: var(--lapiz);
}
.migas__item { display: inline-flex; align-items: center; gap: .3rem; }
.migas__sep { color: var(--lapiz-claro); }
.migas a {
  color: var(--lapiz);
  text-decoration: none;
  transition: color var(--tiempo) var(--curva);
}
.migas a:hover { color: var(--pluma); text-decoration: underline; }
/* La miga final no es un enlace: se marca en tinta para que se vea dónde
   termina la ruta sin tener que pasar el ratón por encima. */
.migas__item[aria-current="page"],
.migas__item:last-child { color: var(--tinta-suave); font-weight: 550; }

/* --------------------------------------------- 8. Botones y controles */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  /* 44 px de alto mínimo: es el objetivo táctil que hace que un botón se pueda
     pulsar con el pulgar sin apuntar. */
  min-height: 2.75rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--hoja);
  color: var(--tinta);
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tiempo) var(--curva),
              border-color var(--tiempo) var(--curva),
              color var(--tiempo) var(--curva),
              box-shadow var(--tiempo) var(--curva),
              transform var(--tiempo) var(--curva);
}
.boton:hover { background: var(--papel-hueco); border-color: var(--lapiz-claro); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.boton[disabled]:hover { background: var(--hoja); border-color: var(--borde-fuerte); }

/* El botón principal lleva una sombra del color del propio botón, no gris: una
   sombra neutra bajo un azul saturado se ve como suciedad debajo del borde. */
.boton--principal {
  background: var(--pluma);
  border-color: var(--pluma);
  color: #fff;
  box-shadow: 0 1px 2px rgba(36, 57, 109, .3), 0 6px 16px -8px rgba(36, 57, 109, .55);
}
.boton--principal:hover {
  background: var(--pluma-oscura);
  border-color: var(--pluma-oscura);
  color: #fff;
  box-shadow: 0 1px 2px rgba(36, 57, 109, .35), 0 10px 22px -8px rgba(36, 57, 109, .6);
  transform: translateY(-1px);
}
.boton--principal:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(36, 57, 109, .3); }

.boton--pequeno { min-height: 2.1rem; padding: .25rem .6rem; font-size: var(--t-xs); }

/* Confirmación de copiado. El cambio es de color y de texto, no un aviso
   flotante: el usuario está mirando la tarjeta que acaba de pulsar, no una
   esquina de la pantalla. */
.boton--copiar[data-estado="ok"] {
  background: var(--ok-tenue);
  border-color: var(--ok);
  color: var(--ok);
}
.boton--copiar[data-estado="error"] {
  background: var(--aviso-tenue);
  border-color: var(--aviso-borde);
  color: #8a4b06;
}

/* Sin JavaScript el botón de copiar no hace nada, así que no se muestra. La
   clase js la pone ui.js en el <html> en cuanto arranca. */
html:not(.js) .boton--copiar,
html:not(.js) [data-solo-js] { display: none; }

.chip {
  min-height: 2.25rem;
  padding: .3rem .85rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--hoja);
  font-size: var(--t-s);
  cursor: pointer;
  transition: background var(--tiempo) var(--curva),
              border-color var(--tiempo) var(--curva),
              color var(--tiempo) var(--curva);
}
.chip:hover { border-color: var(--pluma); color: var(--pluma); background: var(--pluma-tenue); }
.chip--activo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.chip--activo:hover { color: #fff; background: var(--tinta); border-color: var(--tinta); }

.campo { display: block; margin-bottom: .9rem; }
.campo__etiqueta {
  display: block;
  margin-bottom: .35rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
}
.campo__pista { display: block; margin-top: .3rem; font-size: var(--t-xs); color: var(--lapiz); }

.entrada,
textarea.entrada,
select.entrada {
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .75rem;
  background: var(--hoja);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  /* 16 px reales: por debajo de eso Safari en iOS hace zoom al enfocar y saca
     el resto de la herramienta de la pantalla. */
  font-size: 1rem;
  transition: border-color var(--tiempo) var(--curva), box-shadow var(--tiempo) var(--curva);
}
/* Al escribir, el campo se subraya en azul de bolígrafo por dentro: es la
   misma señal que da el papel cuando se apoya la pluma. */
.entrada:focus {
  border-color: var(--pluma);
  box-shadow: inset 0 -2px 0 var(--pluma);
}
textarea.entrada { min-height: 5.5rem; resize: vertical; line-height: 1.5; }

.contador {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--lapiz);
  font-variant-numeric: tabular-nums;
}
.contador[data-lleno="1"] { color: var(--margen); font-weight: 700; }

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  align-items: center;
  margin-block: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--borde);
}
.opcion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-s);
  color: var(--tinta-suave);
  cursor: pointer;
}
.opcion input { width: 1.05rem; height: 1.05rem; accent-color: var(--pluma); }

/* ------------------------------------- 9. La hoja (panel de herramienta) */
/*
   La hoja es lo que la gente ha venido a usar, así que se comporta como la pieza
   principal de la página: apoyada en el papel, con la esquina redondeada mayor y
   una raya de pauta cruzándola por arriba de lado a lado. Ese detalle la ancla
   al cuaderno y evita que parezca una tarjeta genérica pegada encima.
*/
.herramienta {
  /* El relleno se nombra porque hay que restarlo: la barra fija del generador se
     desborda a los lados justo esta cantidad para tapar la hoja de borde a borde.
     Ver .generador__fijo, más abajo. */
  --hoja-sangria: clamp(1.15rem, .7rem + 1.8vw, 1.85rem);
  /* Esta sección es la que delimita el pegado del campo de texto. Ya era
     `relative` antes de que existiera la barra fija, y tiene que seguir
     siéndolo. */
  position: relative;
  margin-block: var(--hueco);
  padding: var(--hoja-sangria);
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-hoja);
  /* La hoja puede ser más ancha que la prosa: es una herramienta, no lectura. */
  max-width: none;
}
.herramienta::before {
  content: "";
  position: absolute;
  inset: 0 var(--hoja-sangria) auto;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(to right, var(--pluma) 0 2.5rem, var(--pauta) 2.5rem);
}
.herramienta__titulo {
  font-size: var(--t-l);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}
.herramienta__pista {
  margin: 0 0 1.15rem;
  font-size: var(--t-s);
  color: var(--lapiz);
  max-width: var(--medida-prosa);
}

/* ---------------------------------------------------------------------------
   EL CAMPO DE TEXTO SE QUEDA A LA VISTA — `position: sticky` INTENCIONADO.

   El campo de texto del generador usa a propósito `position: sticky` DENTRO de la
   sección del generador. Su sección padre define el límite del pegado, de modo
   que el campo permanece visible mientras se recorren los resultados de estilos y
   se suelta cuando la sección del generador termina. NO convertir esto en un
   elemento fijo de forma global.

   En árbol: .herramienta (la sección, `position: relative`) > .ambito > este
   .generador__fijo, y las tarjetas de estilos son sus HERMANAS, más abajo. Por
   eso el límite sale gratis: el bloque contenedor de un elemento sticky es la
   caja de contenido de su padre, así que la barra viaja hacia abajo mientras haya
   galería y se detiene sola al acabarse. No hay que medir nada.

   Tres cosas que NO se deben hacer aquí:
     · `position: fixed` (ni aquí ni desde JavaScript): rompe el límite y deja la
       barra flotando sobre el pie de página y el resto del sitio.
     · un oyente de scroll que calcule desplazamientos a mano: ui.js no registra
       ninguno, y eso es deliberado.
     · `overflow` vertical, `transform`, `contain` o una altura fija en cualquier
       ancestro (.ambito, .herramienta, .contenedor, .portada, main, body): cada
       una de esas propiedades anula el pegado en silencio. Está comprobado que la
       cadena está limpia; el `overflow: hidden` de .heroe es HERMANO, no ancestro.

   La cabecera del sitio, al contrario, es INTENCIONADAMENTE NO STICKY (sección 6).
   Lo que sigue a la vista al bajar es esto, el campo de texto, no la cabecera.
   Las tarjetas de estilos NO son sticky.

   `top` vale 0 porque no hay nada fijo por encima que esquivar; en móvil se
   respeta el recorte de la pantalla con env(safe-area-inset-top).
   --------------------------------------------------------------------------- */
.generador__fijo {
  position: sticky;
  top: max(0.5rem, env(safe-area-inset-top, 0px));
  z-index: 90;
  margin-inline: 0;
  padding: 1.15rem var(--hoja-sangria);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: box-shadow .2s var(--curva), border-color .2s var(--curva);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .generador__fijo {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Campo estilo Buscador con icono de Lápiz */
.font-search-bar {
  position: relative;
  margin-bottom: .85rem;
}

.campo__label-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.campo__icono-lapiz {
  position: absolute;
  left: 1.15rem;
  color: #64748b;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

/* Home Page Generator Input & Toolbar */
.home-generator-input-wrap {
  position: relative;
  width: 100%;
}

.home-generator-input {
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  padding: 0 110px 0 58px;
  color: var(--tinta, #0F1A2E);
  background: var(--hoja, #FFFFFF);
  border: 1.5px solid rgba(159, 195, 216, .7);
  border-radius: 14px;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-family: inherit;
  font-weight: 500;
  transition: border-color .18s var(--curva), box-shadow .18s var(--curva);
}

.home-generator-input:focus-visible,
.home-generator-input:focus {
  outline: 2px solid var(--pluma, #2F4B8F);
  outline-offset: 2px;
  border-color: var(--pluma, #2F4B8F);
  box-shadow: 0 0 0 4px rgba(47, 75, 143, 0.14);
}

.home-generator-input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--pluma, #2F4B8F);
}

.home-generator-character-count {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-slate, #5B6780);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 600;
}

.home-generator-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
}

.home-generator-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.home-generator-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}

.home-generator-filters .filter-button,
.home-generator-filters .chip {
  min-height: 48px;
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-generator-options select,
.home-generator-select {
  min-height: 48px;
  padding: 0.5rem 2rem 0.5rem 0.85rem;
  font-size: 0.95rem;
  border-radius: 10px;
}

.home-generator-checkbox-label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta, #0F1A2E);
}

@media (max-width: 900px) {
  .home-generator-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .home-generator-options {
    justify-content: flex-start;
  }
}

.entrada--hero {
  width: 100%;
  min-height: 3.5rem;
  padding: .85rem 1rem .85rem 3.4rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: border-color .18s var(--curva), box-shadow .18s var(--curva);
}

.entrada--hero:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* Sub-barra de controles / chips */
.generador__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.25rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--curva);
}

.chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.chip--activo {
  background: var(--pluma, #2F4B8F);
  color: #ffffff;
  border-color: var(--pluma, #2F4B8F);
  box-shadow: 0 4px 12px rgba(47, 75, 143, 0.25);
}

.chip--activo:hover {
  background: #243c73;
  color: #ffffff;
}

.generador__controles .opciones {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  font-size: var(--t-s);
  color: #475569;
}

@media (max-width: 40em) {
  .generador__fijo { padding-block: .8rem; }
  .entrada--hero { min-height: 3rem; font-size: 1rem; padding-left: 3rem; }
  .generador__controles { justify-content: center; }
}

/* La salida principal de una herramienta: pautada, grande y seleccionable. */
.salida {
  margin: 0;
  padding-block: .35rem;
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem);
  line-height: 1.45;
  color: var(--tinta);
  overflow-wrap: anywhere;
  /* Los glifos matemáticos de Unicode no están en todas las fuentes; esta pila
     nombra las que sí los traen en cada sistema antes de caer en la genérica. */
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.salida:empty::before {
  content: attr(data-vacio);
  color: var(--lapiz-claro);
}

.salida-fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .25rem;
}
.salida-fila > .salida { flex: 1 1 auto; min-width: 0; }
.salida-fila > .boton { flex: 0 0 auto; width: auto; max-width: max-content; margin-bottom: 0; white-space: nowrap; }

/* ------------------------------------------- 10. Galería de estilos */
.galeria { margin-block: var(--hueco); }
.galeria__titulo { font-size: var(--t-xl); }
.galeria__filtro { display: flex; flex-wrap: wrap; gap: .4rem; }

/* En un móvil estrecho los chips no se parten en tres filas: se deslizan en una
   sola. Ocupar tres líneas con el filtro empuja las tarjetas fuera de la pantalla,
   que es justo lo que se ha venido a ver.

   Este `overflow-x` es seguro para el panel pegado de la sección 9: .galeria__filtro
   es HERMANO de .generador__fijo, no ancestro suyo, así que no crea un contenedor
   de scroll que anule el sticky. Si algún día el filtro se mueve DENTRO del panel,
   hay que quitar esto. */
@media (max-width: 30em) {
  .galeria__filtro {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sitio para la barra de deslizamiento sin recortar el anillo de foco. */
    padding-bottom: .3rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .galeria__filtro .chip { flex: 0 0 auto; }
}

.galeria__lista {
  list-style: none;
  margin: 1.5rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18.5rem, 100%), 1fr));
  gap: 1.25rem;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .85rem;
  padding: 1.35rem;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  transition: transform .2s var(--curva), border-color .2s var(--curva), box-shadow .2s var(--curva);
}

.tarjeta:hover {
  border-color: #2563eb;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-4px);
}

.tarjeta:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tarjeta[hidden] { display: none; }

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tarjeta__nombre {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.tarjeta__badges {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tarjeta__badge {
  font-size: var(--t-xs);
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: .2rem .55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.tarjeta__aviso {
  font-size: var(--t-xs);
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: .2rem .55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Contenedor de la muestra traducida */
.tarjeta__muestra-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  transition: background .18s var(--curva), border-color .18s var(--curva);
}

.tarjeta:hover .tarjeta__muestra-box {
  background: #f0f7ff;
  border-color: #dbeafe;
}

.tarjeta__muestra {
  margin: 0;
  width: 100%;
  font-size: 1.55rem;
  line-height: 1.45;
  color: #0f172a;
  overflow-wrap: anywhere;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}

.tarjeta__abecedario { display: grid; gap: .15rem; }
.tarjeta__fila {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  color: var(--tinta-suave);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.tarjeta__nota { margin: 0; font-size: var(--t-xs); color: var(--lapiz); }

.tarjeta__acciones {
  margin-top: .4rem;
  display: flex;
  justify-content: flex-end;
}

.tarjeta__acciones .boton--copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .65rem 1.25rem;
  font-size: .95rem;
  font-weight: 700;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
  transition: background .18s var(--curva), transform .18s var(--curva), box-shadow .18s var(--curva);
}

.tarjeta__acciones .boton--copiar:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.tarjeta__acciones .boton--copiar[data-estado="ok"] {
  background: #16a34a;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.galeria__vacio { color: var(--lapiz); font-size: var(--t-s); }

/* -------------------------------------- 11. Bloques de contenido */
.bloque { margin-block: var(--hueco); }
/* El título de bloque lleva un guion de pauta delante, colgado en el margen.
   Es el mismo gesto en toda la página: lo que se lee empieza en la raya. */
.bloque__titulo {
  position: relative;
  font-size: var(--t-2xl);
  max-width: var(--medida-prosa);
  letter-spacing: -.02em;
}
.bloque__titulo::before {
  content: "";
  position: absolute;
  top: .62em;
  left: -1.35rem;
  width: .85rem;
  height: 2px;
  border-radius: 2px;
  background: var(--pauta);
}
/* En pantallas estrechas no hay margen del que colgarlo: se esconde en lugar de
   empujar el título o salirse del contenedor. */
@media (max-width: 60rem) { .bloque__titulo::before { display: none; } }
.bloque--callout { margin-block: 1.5rem; }

.destacado {
  padding: .95rem 1.15rem;
  border-radius: var(--radio);
  border-left: 3px solid var(--pauta);
  background: var(--papel-hueco);
  max-width: var(--medida-prosa);
}
.destacado .prosa { max-width: none; font-size: 1rem; color: var(--tinta-suave); }
.destacado--aviso { border-left-color: var(--aviso-borde); background: var(--aviso-tenue); }
.destacado--ojo   { border-left-color: var(--margen); background: #fdeeec; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .75rem;
  padding-block: .9rem;
  border-top: 1px solid var(--borde);
}
.pasos__item:first-child { border-top: 0; }
/* El número aquí sí codifica algo: son pasos que hay que dar en orden. */
.pasos__numero {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--pluma);
  color: var(--pluma);
  font: 700 var(--t-s)/1 var(--mono);
}
.pasos__nombre { margin: 0 0 .25rem; }
.pasos__cuerpo .prosa { max-width: none; }

.lista-detalle { max-width: var(--medida-prosa); padding-left: 1.3em; }
.lista-detalle li { margin-bottom: .55em; font-family: var(--serif); color: var(--tinta-suave); }
.lista-detalle strong { font-family: var(--sans); color: var(--tinta); }

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--hoja);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th, .tabla td { padding: .6rem .8rem; text-align: left; vertical-align: top; }
.tabla thead th {
  background: var(--papel-hueco);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lapiz);
  white-space: nowrap;
}
.tabla tbody tr + tr th, .tabla tbody tr + tr td { border-top: 1px solid var(--borde); }
.tabla tbody th { font-weight: 650; }
/* Una tabla de comparación se lee cruzando la fila. Resaltarla al pasar por
   encima es la única ayuda que hace falta y no cuesta nada. */
.tabla tbody tr { transition: background var(--tiempo) var(--curva); }
.tabla tbody tr:hover { background: var(--pluma-tenue); }

.ejemplos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: .75rem;
}
.ejemplos__item {
  padding: .8rem .9rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--tiempo) var(--curva), box-shadow var(--tiempo) var(--curva);
}
.ejemplos__item:hover { border-color: var(--pauta); box-shadow: var(--sombra-hoja); }
.ejemplos__texto {
  margin: 0 0 .35rem;
  font-size: 1.3rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.ejemplos__contexto { margin: 0 0 .5rem; font-size: var(--t-xs); color: var(--lapiz); }

/* ------------------------------------------------------- 12. FAQ */
.faq { margin-block: var(--hueco); max-width: var(--medida-prosa); }
.faq__titulo { font-size: var(--t-2xl); letter-spacing: -.02em; }
.faq__item { border-top: 1px solid var(--borde); }
.faq__item:last-child { border-bottom: 1px solid var(--borde); }
.faq__pregunta {
  cursor: pointer;
  list-style: none;
  padding: .95rem 2rem .95rem 0;
  font-weight: 650;
  position: relative;
  transition: color var(--tiempo) var(--curva);
}
.faq__pregunta:hover { color: var(--pluma); }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "";
  position: absolute;
  right: .35rem; top: 1.3rem;
  width: .5em; height: .5em;
  border-right: 1.5px solid var(--lapiz);
  border-bottom: 1.5px solid var(--lapiz);
  transform: rotate(45deg);
  transition: transform var(--tiempo) var(--curva), border-color var(--tiempo) var(--curva);
}
.faq__pregunta:hover::after { border-color: var(--pluma); }
.faq__item[open] > .faq__pregunta { color: var(--pluma-oscura); }
.faq__item[open] > .faq__pregunta::after { transform: rotate(225deg); border-color: var(--pluma); }
.faq__respuesta {
  padding-bottom: 1.15rem;
  font-family: var(--serif);
  color: var(--tinta-suave);
  line-height: 1.7;
}
.faq__respuesta > * + * { margin-top: .8em; }

/* --------------------------------------------- 13. Enlazado interno */
.relacionados, .hermanas { margin-block: var(--hueco); }
.relacionados__titulo, .hermanas__titulo { font-size: var(--t-xl); letter-spacing: -.01em; }

.relacionados__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: .3rem 1.5rem;
}
.relacionados__item {
  padding: .7rem 0;
  border-top: 1px solid var(--borde);
  transition: border-top-color var(--tiempo) var(--curva);
}
.relacionados__item:hover { border-top-color: var(--pluma); }
.relacionados__enlace { font-weight: 600; text-decoration: none; }
.relacionados__enlace:hover { text-decoration: underline; }
.relacionados__nota { display: block; font-size: var(--t-xs); color: var(--lapiz); margin-top: .15rem; }

.hermanas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.hermanas__lista a {
  display: inline-block;
  padding: .4rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--hoja);
  font-size: var(--t-s);
  text-decoration: none;
  color: var(--tinta-suave);
  transition: border-color var(--tiempo) var(--curva),
              color var(--tiempo) var(--curva),
              background var(--tiempo) var(--curva);
}
.hermanas__lista a:hover { border-color: var(--pluma); color: var(--pluma); background: var(--pluma-tenue); }
.hermanas__lista a[aria-current="page"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

/* ------------------------------------- 14. Portada y categorías */
/*
   El héroe es la hoja del cuaderno, no una franja de color. La pauta se dibuja
   de verdad —un gradiente repetido cada 2.4rem— y se desvanece hacia abajo con
   una máscara, para que el texto se apoye en las rayas de arriba y respire en
   las de abajo. Es el mismo recurso de .pauta, aplicado a la primera pantalla.

   Antes aquí había un `linear-gradient(to bottom, transparent, transparent)`
   con un comentario que prometía una raya. No dibujaba nada.

   El margen rojo lo pone la regla de la sección 4, que ya cubre el contenedor
   del héroe: así la raya del héroe y la del cuerpo de la página caen en la misma
   columna sin tener que repetir el cálculo.
*/
.heroe {
  position: relative;
  overflow: visible;
  background: var(--hoja);
  border-bottom: 1px solid var(--borde);
  /* Mas corto que antes: el generador tiene que asomar pronto. El titular, la
     entradilla y la fila de garantias caben en poca altura y el resto es aire. */
  padding-block: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.heroe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--pauta-tenue) 0 1px,
    transparent 1px 2.4rem
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}
.heroe > .contenedor { position: relative; }
.heroe__titulo {
  /* max-width: 15ch; */
  margin-bottom: .7rem;
  font-size: var(--t-4xl);
  line-height: 1.03;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.heroe__entradilla {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
  line-height: 1.6;
  /* La columna de texto del heroe: ~800px, dentro del rango 700-850 que pide el
     diseño. No hay imagen a la derecha, asi que el texto manda su propio ancho. */
  max-width: 50rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* Fila de garantias: tres apoyos cortos, en linea, con una marca de verificacion
   en el azul de accion. Nada de tarjetas ni iconos pesados: es una nota de
   confianza, no una seccion. */
.heroe__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.heroe__garantia {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
}
.heroe__garantia-icono {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--pluma-tenue);
  color: var(--pluma);
  font-size: .7rem;
  font-weight: 700;
}
.portada > .contenedor > .herramienta:first-child { margin-top: calc(var(--hueco) * -0.5); }

/* Tira de ventajas: cuatro apoyos cortos DESPUES del generador, no antes. Quien
   llega ya ha escrito su texto y lo ha copiado; esto responde a la pregunta que
   viene justo despues ("¿y esto funciona donde lo voy a pegar?"), y por eso no
   se pone por delante de la herramienta.

   Se apoya en la superficie lavanda, sin tarjetas ni sombras: es una franja de
   apoyo, y si cada ventaja fuera una caja competiria con la galeria de estilos,
   que es lo que de verdad hay que mirar en esta pagina. */
.ventajas {
  margin-block: var(--hueco);
  padding: clamp(1.25rem, .9rem + 1.4vw, 1.75rem) clamp(1.1rem, .8rem + 1.2vw, 1.6rem);
  background: var(--superficie);
  border-radius: var(--radio-grande);
}
.ventajas__titulo {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lapiz);
  margin-bottom: 1rem;
}
.ventajas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Cuatro en escritorio, dos en tableta, una en movil, sin consultas de medios. */
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.1rem 1.5rem;
}
.ventaja {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .25rem .75rem;
  align-items: start;
}
.ventaja__icono {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--hoja);
  color: var(--pluma);
}
.ventaja__icono svg { width: 1.15rem; height: 1.15rem; }
.ventaja__nombre { font-size: var(--t-s); font-weight: 650; color: var(--tinta); }
.ventaja__texto { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--tinta-suave); }

.secciones { margin-block: var(--hueco); }
.secciones__titulo { font-size: var(--t-2xl); }
.secciones__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1.25rem;
}
/* Cada sección es una ficha con la raya de pauta arriba: repite el gesto de la
   cabecera del panel del menú, así que el sitio se lee con una sola idea. */
.seccion {
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--pauta);
  border-radius: var(--radio);
  transition: box-shadow var(--tiempo) var(--curva),
              border-color var(--tiempo) var(--curva),
              transform var(--tiempo) var(--curva);
}
.seccion:hover {
  box-shadow: var(--sombra-hoja);
  border-top-color: var(--pluma);
  transform: translateY(-2px);
}
.seccion__titulo { font-size: var(--t-m); margin-bottom: .5rem; }
.seccion__titulo a { text-decoration: none; }
.seccion__titulo a:hover { text-decoration: underline; }
.seccion__lista { list-style: none; margin: 0; padding: 0; }
.seccion__lista li { padding: .18rem 0; }
.seccion__lista a { font-size: var(--t-s); color: var(--tinta-suave); text-decoration: none; }
.seccion__lista a:hover { color: var(--pluma); text-decoration: underline; }

/* El índice de categoría es una lista de decisiones, no una rejilla de tarjetas:
   quien llega aquí está eligiendo entre páginas parecidas y necesita comparar
   títulos completos en vertical, no leerlos en cajas separadas. */
.indice { list-style: none; margin: 0; padding: 0; }
.indice__item {
  position: relative;
  padding: 1.15rem 0 1.15rem 1.15rem;
  border-top: 1px solid var(--borde);
  transition: background var(--tiempo) var(--curva);
}
.indice__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  bottom: 1.35rem;
  width: 2px;
  border-radius: 2px;
  background: var(--pauta);
  transition: background var(--tiempo) var(--curva), top var(--tiempo) var(--curva), bottom var(--tiempo) var(--curva);
}
.indice__item:hover { background: var(--papel-hueco); }
.indice__item:hover::before { background: var(--pluma); top: .9rem; bottom: .9rem; }
.indice__item:first-child { border-top: 0; }
.indice__titulo { font-size: var(--t-l); margin-bottom: .25rem; text-wrap: balance; }
.indice__titulo a { text-decoration: none; }
.indice__titulo a:hover { text-decoration: underline; }
.indice__resumen {
  margin: 0;
  max-width: var(--medida-prosa);
  font-family: var(--serif);
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.indice__herramienta {
  margin: .35rem 0 0;
  font: 600 var(--t-xs)/1.4 var(--mono);
  color: var(--pluma);
}

/* ---------------------------------------------------- 15. Error */
.error { max-width: var(--medida-prosa); }
.error__codigo {
  margin: 0;
  font: 700 4rem/1 var(--mono);
  color: var(--pauta);
  letter-spacing: -.04em;
}
.error__titulo { margin-top: .25rem; }
.error__mensaje { font-family: var(--serif); font-size: 1.06rem; color: var(--tinta-suave); }
.error__acciones { margin-block: 1.5rem; }
.error__subtitulo { font-size: var(--t-l); }
.error__lista { list-style: none; margin: 0; padding: 0; }
.error__lista li { padding: .55rem 0; border-top: 1px solid var(--borde); }
.error__nota { display: block; font-size: var(--t-xs); color: var(--lapiz); }
.error__detalle { margin-top: 2rem; font-size: var(--t-s); }
.error__detalle pre {
  overflow: auto;
  padding: .9rem;
  background: var(--papel-hueco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font-family: var(--mono);
  font-size: var(--t-xs);
  white-space: pre-wrap;
}

/* ------------------------------------------------------ 16. Pie */
/*
   El pie es tinta. Es el único bloque oscuro del sitio y ahí está su trabajo:
   cierra la hoja. Encima, papel de cuaderno de principio a fin; al llegar abajo,
   el color de lo que se ha escrito.

   Contraste comprobado sobre --tinta-honda #161a24:
     --sobre-tinta   #eef0f4 → 15.4:1   (texto normal)
     --sobre-tinta-2 #a9b0c0 →  7.1:1   (secundario, enlaces en reposo)
     --pluma-clara   #a8c0f0 →  8.3:1   (enlaces al pasar y foco)
   Todos por encima de 4.5:1, incluidos los de 12 px.
*/
.pie {
  margin-top: var(--hueco);
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) 0;
  background: var(--tinta-honda);
  color: var(--sobre-tinta-2);
  font-size: var(--t-s);
}
/* La raya superior es la última línea de la pauta, ya en negativo: dice que el
   cuaderno se acaba aquí y no que empieza otro sitio. */
.pie::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: linear-gradient(to right, var(--pluma) 0 6rem, var(--tinta-borde) 6rem);
}

.pie__cima {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
}
/* min-width: 0 en las celdas: por defecto un elemento de rejilla no baja de su
   contenido mínimo, y una etiqueta larga («Letras cursivas para copiar y pegar»
   si alguien deja el nav_label vacío) ensancharía la columna y descuadraría las
   otras tres en lugar de partirse. */
.pie__marca,
.pie__col { min-width: 0; }
.pie__marca { max-width: 34rem; }
/* La marca ocupa el doble que una columna de enlaces, y la nota larga se pone
   debajo a lo ancho: leerla en una columna de 15rem son doce líneas de tres
   palabras. */
@media (min-width: 44rem) {
  .pie__cima { grid-template-columns: 1.6fr 1fr 1fr; }
  .pie__col--nota { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  .pie__cima { grid-template-columns: 1.5fr 1fr 1fr 1.7fr; }
  .pie__col--nota { grid-column: auto; }
}
/* En una sola columna la marca se separa del resto con una raya: sin ella, el
   lema y el primer título de columna se leen como un mismo bloque. */
@media (max-width: 43.99rem) {
  .pie__marca { padding-bottom: 1.5rem; border-bottom: 1px solid var(--tinta-borde); }
}

.pie__logotipo {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .7rem;
  color: var(--sobre-tinta);
  font-weight: 650;
  letter-spacing: -.02em;
}
.pie__glifo { font-size: 1.7rem; line-height: 1; color: var(--pauta); }
.pie__nombre { font-size: var(--t-m); }
.pie__lema {
  margin: 0;
  max-width: 30rem;
  font-family: var(--serif);
  line-height: 1.65;
}

/* --- redes ---------------------------------------------------------------
   Seis casillas del mismo tamaño, en una fila. El icono es un trazo de 1.7 en
   una retícula de 24, igual en los seis, para que se lean como un juego y no
   como seis logotipos recortados de sitios distintos. */
.redes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
}
.redes__enlace {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-chico);
  color: var(--sobre-tinta-2);
  transition: color var(--tiempo) var(--curva),
              border-color var(--tiempo) var(--curva),
              background var(--tiempo) var(--curva),
              transform var(--tiempo) var(--curva);
}
.redes__enlace:hover,
.redes__enlace:focus-visible {
  color: var(--tinta-honda);
  background: var(--pauta);
  border-color: var(--pauta);
  transform: translateY(-2px);
}
.redes__icono { display: block; }

.pie__correo { margin: 1.15rem 0 0; }
.pie__correo a {
  color: var(--pluma-clara);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pie__titulo {
  margin: 0 0 .7rem;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sobre-tinta);
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { padding: .22rem 0; }
.pie__lista a {
  color: var(--sobre-tinta-2);
  text-decoration: none;
  transition: color var(--tiempo) var(--curva);
}
.pie__lista a:hover { color: var(--sobre-tinta); text-decoration: underline; }
.pie__lista a[aria-current="page"] { color: var(--pluma-clara); font-weight: 650; }

.pie__col--nota p {
  margin: 0 0 .7rem;
  max-width: 34rem;
  font-family: var(--serif);
  line-height: 1.65;
}
.pie__col--nota strong { color: var(--sobre-tinta); }
/* La mención de marcas ajenas es letra pequeña de verdad: tiene que estar, no
   tiene que competir. */
.pie__marcas { font-size: var(--t-xs); color: var(--lapiz-tinta); line-height: 1.55; }

/* --- la barra de cierre ---------------------------------------------------
   Una sola línea: el aviso corto a la izquierda y las páginas legales a la
   derecha. Antes esto eran seis renglones de texto legal que nadie leía. */
.pie__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-block: 1.1rem;
  border-top: 1px solid var(--tinta-borde);
  font-size: var(--t-xs);
}
.pie__copyright { margin: 0; color: var(--sobre-tinta-2); }
.pie__legales ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__legales a {
  color: var(--lapiz-tinta);
  text-decoration: none;
  transition: color var(--tiempo) var(--curva);
}
.pie__legales a:hover { color: var(--sobre-tinta); text-decoration: underline; }
.pie__legales a[aria-current="page"] { color: var(--pluma-clara); }

/* --- la firma -------------------------------------------------------------
   El producto enseñándose a sí mismo, a tamaño de rótulo y recortado por abajo:
   se ve lo suficiente para reconocer la letra y no tanto como para pedir su
   turno. Es el único sitio del diseño donde algo es grande por gusto. */
.pie__firma {
  margin: 0;
  overflow: hidden;
  max-height: .62em;
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--tinta-borde);
  user-select: none;
}
/* Sin -webkit-text-stroke (Firefox antiguo) la firma quedaría invisible: el
   color transparente se sustituye por un gris muy apagado. */
@supports not (-webkit-text-stroke: 1px red) {
  .pie__firma { color: #21283a; -webkit-text-stroke: 0; }
}

/* --------------------------------------- 17. Herramientas concretas */
/* Cada herramienta añade lo suyo aquí. Lo común (hoja, salida, pauta, botones)
   ya está arriba y no se repite. */

/* Rejilla de resultados de las herramientas que producen muchas variantes. */
.variantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: .6rem;
}
.variantes__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem;
  background: var(--papel-hueco);
  border-radius: var(--radio-chico);
}
.variantes__texto {
  margin: 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}

/* Abecedario letra a letra. */
.abecedario {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: .4rem;
}
.abecedario__celda {
  text-align: center;
  padding: .5rem .25rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.abecedario__celda:hover { border-color: var(--pluma); }
.abecedario__glifo {
  display: block;
  font-size: 1.75rem;
  line-height: 1.25;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.abecedario__letra { display: block; font: 600 var(--t-xs)/1 var(--mono); color: var(--lapiz); }

/* La celda confirma el copiado cambiando de color. No reutiliza .boton--copiar
   porque esa clase se esconde sin JavaScript, y aquí eso dejaría la página del
   abecedario literalmente sin abecedario. */
.abecedario__celda[data-estado="ok"] { background: var(--ok-tenue); border-color: var(--ok); }
.abecedario__celda[data-estado="error"] { background: var(--aviso-tenue); border-color: var(--aviso-borde); }
html:not(.js) .abecedario__celda { cursor: default; }

/* Texto solo para lectores de pantalla, o etiqueta que el JavaScript reescribe
   sin que se vea. No se usa display:none: eso lo saca también del árbol de
   accesibilidad, que es justo lo contrario de lo que hace falta. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Previsualización sobre piel (tatuajes) y dentro de la caja de una red social:
   las dos son "escenarios", y comparten el marco. */
.escenario {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--papel-hueco);
}
.escenario__lienzo {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.escenario__texto {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.escenario__pie {
  padding: .5rem .75rem;
  border-top: 1px solid var(--borde);
  background: var(--hoja);
  font-size: var(--t-xs);
  color: var(--lapiz);
}

/* Burbuja de mensaje. Es una aproximación deliberadamente genérica: la forma de
   un globo de chat, sin colores ni tipografías de marca de nadie. Lo que el
   visitante necesita comprobar es si su texto cabe y se lee, no ver una réplica. */
.escenario--burbuja .escenario__lienzo {
  place-items: start;
  padding: 1.25rem;
  background: var(--papel-hueco);
}
.escenario--burbuja .escenario__texto {
  position: relative;
  max-width: 22rem;
  padding: .6rem .85rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: 12px 12px 12px 2px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, .08);
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Caja de biografía de perfil: ancho estrecho y fijo, que es lo que aprieta. */
.escenario--bio .escenario__lienzo { place-items: center; }
.escenario--bio .escenario__texto {
  width: min(20rem, 100%);
  padding: .6rem .75rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
}

.aviso-limite {
  margin: .6rem 0 0;
  padding: .55rem .75rem;
  background: var(--aviso-tenue);
  border-left: 3px solid var(--aviso-borde);
  border-radius: var(--radio-chico);
  font-size: var(--t-s);
  color: #8a4b06;
}
.aviso-limite[hidden] { display: none; }

/* -------- Previsualización sobre piel (tatuajes) -------- */
.escenario--piel .escenario__lienzo {
  background: var(--piel, #e6c3a5);
  min-height: 12rem;
  /* Un degradado muy suave da volumen sin necesidad de una fotografía. */
  background-image: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.22), transparent 60%);
}
.tatuaje__texto {
  /* La altura pedida en cm se convierte a tamaño de fuente con el mismo factor
     que los moldes. En pantalla el cm de CSS es aproximado, y la herramienta lo
     dice: es lo que separa una previsualización útil de una promesa falsa. */
  font-size: calc(var(--tat-alto, 2.5cm) * 1.4);
  line-height: 1.15;
  color: #24201d;
  text-shadow: 0 .5px .5px rgba(255, 255, 255, .25);
}

/* Regla de centímetros: lo único que da escala real a la vista sobre piel. */
.regla {
  display: flex;
  align-items: flex-end;
  height: 1.5rem;
  padding-inline: .5rem;
  background: var(--hoja);
  border-top: 1px solid var(--borde);
  font: 600 var(--t-xs)/1 var(--mono);
  color: var(--lapiz);
  overflow: hidden;
}
.regla__marca {
  flex: 0 0 1cm;
  border-left: 1px solid var(--lapiz-claro);
  padding-left: 2px;
}

.tonos { border: 0; padding: 0; margin-block: .75rem; }
.tono__muestra {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(31, 36, 48, .25);
}

/* -------- Exportar a PNG -------- */
.exportador__lienzo {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  /* Cuadros grises para que se vea que el fondo es transparente y no blanco.
     Sin esto, un PNG transparente y otro con fondo blanco se ven idénticos aquí
     y el visitante descubre la diferencia al pegarlo. */
  background-image:
    linear-gradient(45deg, var(--papel-hueco) 25%, transparent 25%, transparent 75%, var(--papel-hueco) 75%),
    linear-gradient(45deg, var(--papel-hueco) 25%, transparent 25%, transparent 75%, var(--papel-hueco) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  background-color: var(--hoja);
}

/* Contornos huecos para moldes y plantillas: relleno transparente y trazo. */
.contorno {
  color: transparent;
  -webkit-text-stroke: 1.25px var(--tinta);
  /* Reserva para navegadores sin -webkit-text-stroke: se ve gris claro en lugar
     de invisible, que es un fallo tolerable y no una página vacía. */
  text-shadow: 0 0 0 var(--lapiz-claro);
}

/* Papel pautado a tamaño de hoja, para la hoja de caligrafía. */
.renglones {
  --pauta-alto: 3.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background-color: var(--hoja);
}
.renglones__linea {
  margin: 0;
  padding-inline: 1rem;
  line-height: var(--pauta-alto);
  min-height: var(--pauta-alto);
  font-size: 1.6rem;
  color: var(--lapiz-claro);
  overflow: hidden;
  white-space: nowrap;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
  background-image:
    linear-gradient(to bottom,
      transparent calc(78% - 1.5px), var(--pauta) calc(78% - 1.5px),
      var(--pauta) 78%, transparent 78%),
    linear-gradient(to bottom,
      transparent calc(40% - 1px), var(--pauta-tenue) calc(40% - 1px),
      var(--pauta-tenue) 40%, transparent 40%);
  background-size: 100% var(--pauta-alto);
  background-repeat: repeat-y;
}
.renglones__linea--modelo { color: var(--tinta); }

/* Practice Sheet Controls Specific Layout */
.practice-text-field {
  margin-bottom: 22px;
}

.practice-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 32px;
  width: 100%;
}

.practice-style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.practice-style-options .chip {
  min-height: 46px;
  padding: 0.5rem 1.15rem;
  font-size: 0.95rem;
}

.practice-number-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  white-space: nowrap;
}

.practice-number-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.practice-number-field .field__label {
  margin: 0;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta);
}

.practice-number-field input[type="number"],
.practice-number-field .number-control {
  width: 72px;
  min-width: 72px;
  height: 46px;
  min-height: 46px;
  padding: 0 10px;
  color: var(--tinta);
  background: var(--hoja);
  border: 1px solid var(--pauta);
  border-radius: 8px;
  font: inherit;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 900px) {
  .practice-controls-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .practice-number-options {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .practice-style-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-style-options .chip {
    justify-content: center;
    width: 100%;
  }

  .practice-number-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 12px;
  }

  .practice-number-field {
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
  }

  .practice-number-field input[type="number"],
  .practice-number-field .number-control {
    width: 100%;
  }
}

/* Moldes: una letra por casilla, a la altura en centímetros que pida el visitante.
   La altura viene en --molde-alto desde el atributo style, porque es un valor
   continuo que el usuario elige y ninguna clase puede cubrir doce tamaños. */
.moldes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.moldes__celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .5rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--hoja);
  break-inside: avoid;
}
.moldes__glifo {
  display: block;
  /* 1cm de altura de caja ≈ 1.4cm de tamaño de fuente para una cursiva con astas
     y colas; el factor sale de que el ojo medio de estos glifos es bajo. */
  font-size: calc(var(--molde-alto, 4cm) * 1.4);
  line-height: 1.05;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}
.moldes__pie { font: 600 var(--t-xs)/1 var(--mono); color: var(--lapiz); }

/* En papel el trazo tiene que ser negro y fino: es por donde se recorta. */
@media print {
  .moldes__celda { border-color: #bbb; }
  .moldes__pie { display: none; }
}

/* Comparativa de estilos lado a lado. */
.comparador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .75rem;
}
.comparador__panel {
  padding: .8rem;
  background: var(--papel-hueco);
  border-radius: var(--radio);
}
.comparador__nombre { font: 600 var(--t-xs)/1 var(--mono); color: var(--lapiz); text-transform: uppercase; letter-spacing: .1em; }

/* Aviso de resultado vacío, común a varias herramientas. */
.sin-resultado { font-size: var(--t-s); color: var(--lapiz); margin: .5rem 0 0; }

/* ------------------------------------------------ 18. Impresión */
#practice-print-root {
  display: none;
}

.practice-sheet-print-area {
  background: #ffffff;
  padding: 1.5rem;
  overflow-x: auto;
  margin-top: 1.5rem;
  border-radius: 12px;
}

.practice-sheet-header-print {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Si se está imprimiendo la hoja de práctica, ocultar todo lo que no sea el print root */
  body.printing-practice-sheet > *:not(#practice-print-root) {
    display: none !important;
  }

  body.printing-practice-sheet #practice-print-root {
    display: block !important;
    width: 190mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.printing-practice-sheet .practice-sheet--print-copy {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 190mm !important;
    max-width: 190mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  body.printing-practice-sheet .practice-sheet--print-copy .practice-sheet-header-print {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #0f1a2e;
    padding-bottom: 6px;
    margin-bottom: 14px;
    width: 100%;
  }

  body.printing-practice-sheet .practice-sheet--print-copy .practice-sheet-print-title {
    font-size: 18pt;
    font-weight: 700;
    color: #0f1a2e;
  }

  body.printing-practice-sheet .practice-sheet--print-copy .practice-sheet-print-meta {
    font-size: 10pt;
    color: #5b6780;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }

  body.printing-practice-sheet .practice-sheet--print-copy .renglones {
    border: 1.5px solid #9fc3d8 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  .practice-row,
  .worksheet-row,
  .practice-line,
  .renglones__linea {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .contorno {
    -webkit-text-stroke-color: #475569 !important;
  }

  a[href]::after { content: ""; }   /* no imprimir las URLs entre paréntesis */
}

/* ------------------------- 19. Preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Anular la duración no basta: un translateY sin transición sigue siendo un
     salto brusco, que es exactamente lo que esta preferencia pide evitar. Los
     desplazamientos al pasar por encima se retiran; el cambio de color y de
     borde se queda, porque sigue haciendo falta saber qué está señalado. */
  .boton:hover, .boton:active, .boton--principal:hover, .boton--principal:active,
  .tarjeta:hover, .seccion:hover, .redes__enlace:hover, .redes__enlace:focus-visible,
  .ejemplos__item:hover { transform: none; }
  .indice__item:hover::before { top: 1.35rem; bottom: 1.35rem; }
}

/* Con contraste alto la pauta estorba más de lo que aporta: se retira y se
   sustituye por una línea base sólida y oscura. */
@media (prefers-contrast: more) {
  :root { --pauta: var(--lapiz); --pauta-tenue: transparent; --lapiz: #4a5163; }
  .tarjeta, .herramienta, .tabla-envoltorio { border-color: var(--tinta-suave); }
  /* En la superficie oscura hay que ir al revés: --pauta acaba de volverse un
     gris medio, y un gris medio sobre navy no se ve. El pie usa blanco puro y
     separadores claros. (La cabecera ya no tiene estado oscuro: es estatica.) */
  .pie { --pauta: #ffffff; --lapiz-tinta: var(--sobre-tinta); --tinta-borde: #5b6478; }
  .pie__lista a, .pie__legales a, .pie__lema, .pie__col--nota p { color: var(--sobre-tinta); }
  .redes__enlace { border-color: #6f7a90; color: var(--sobre-tinta); }
  .pie__firma { display: none; }   /* decorativa y de bajísimo contraste por diseño */
  /* El héroe pierde la pauta de fondo, que con este ajuste quedaría en gris
     medio detrás del titular en lugar de en azul clarito detrás. */
  .heroe::before { display: none; }
}

/* ============================================================================
   20. Rediseño Moderno - Componentes Visuales (Figma Alignment)
   ========================================================================== */

/* Portada */
.portada {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Badges y Píldoras */
.pildora-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .95rem;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 9999px;
  color: #1d4ed8;
  font-size: var(--t-s);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.heroe {
  padding-block: 2.5rem 1.5rem;
  text-align: center;
}

.heroe__herramienta-wrapper {
  margin-block: 1.75rem 2.25rem;
  text-align: left;
}

.heroe__titulo {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(2.1rem, 4.5vw, 3.25rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.heroe__entradilla {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.6;
  margin-block: 2.5rem 2rem;
}

.heroe__garantias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.heroe__garantia {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  padding: .4rem .9rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.heroe__garantia-icono {
  color: #16a34a;
  font-weight: 700;
}

/* Herramienta / Contenedor Fijo Elevado */
.herramienta {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  padding: 1.75rem;
  margin-bottom: 3rem;
}

/* Tira de Acceso Rápido / Categorías */
.acceso-rapido {
  margin-block: 2.5rem;
}

.acceso-rapido__titulo {
  text-align: center;
  font-size: var(--t-s);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.acceso-rapido__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.acceso-rapido__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem .75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  color: #1e293b;
  font-weight: 600;
  font-size: var(--t-s);
  text-align: center;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), border-color .18s var(--curva);
}

.acceso-rapido__tarjeta:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.acceso-rapido__icono {
  font-size: 1.6rem;
  margin-bottom: .4rem;
}

/* Sección 2 Columnas / Explicación & Mockup */
.bloque-dos-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-block: 3.5rem;
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

@media (max-width: 860px) {
  .bloque-dos-col {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
}

.bloque-dos-col__texto h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.bloque-dos-col__texto p {
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Chat & Social Mockup Card */
.mockup-chat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.mockup-chat__cabecera {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #cbd5e1;
}

.mockup-chat__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}

.mockup-chat__burbuja {
  background: #dcf8c6;
  color: #111827;
  padding: .75rem 1rem;
  border-radius: 14px 14px 2px 14px;
  max-width: 85%;
  margin-left: auto;
  font-size: 1.05rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin-bottom: .75rem;
}

.mockup-chat__burbuja--recibida {
  background: #ffffff;
  border-radius: 14px 14px 14px 2px;
  margin-left: 0;
  margin-right: auto;
  border: 1px solid #e2e8f0;
}

/* Pasos Guiados 1-2-3-4 */
.pasos-guiados {
  margin-block: 4rem;
  text-align: center;
}

.pasos-guiados__titulo {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: .5rem;
}

.pasos-guiados__subtitulo {
  color: #64748b;
  margin-bottom: 2.5rem;
}

.pasos-guiados__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.paso-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.75rem 1.25rem;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}

.paso-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(37, 99, 235, 0.08);
}

.paso-card__num {
  position: absolute;
  top: -.5rem;
  right: .5rem;
  font-size: 3.5rem;
  font-weight: 900;
  color: #f1f5f9;
  z-index: 1;
  user-select: none;
}

.paso-card__icono {
  position: relative;
  z-index: 2;
  font-size: 2rem;
  margin-bottom: .85rem;
  display: inline-block;
}

.paso-card__titulo {
  position: relative;
  z-index: 2;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .4rem;
}

.paso-card__desc {
  position: relative;
  z-index: 2;
  font-size: var(--t-s);
  color: #64748b;
  line-height: 1.5;
}

/* Escaparate de Estilos Destacados */
.escaparate-estilos {
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  border-radius: 24px;
  padding: 2.5rem;
  margin-block: 4rem;
  border: 1px solid #dbeafe;
}

.escaparate-estilos__header {
  text-align: center;
  margin-bottom: 2rem;
}

.escaparate-estilos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.escaparate-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.escaparate-card__muestra {
  font-size: 2.25rem;
  color: #1e293b;
  margin-block: .5rem;
}

.escaparate-card__nombre {
  font-size: var(--t-s);
  font-weight: 600;
  color: #64748b;
}

/* FAQ Mejoradas */
.faq {
  margin-block: 4.5rem;
  text-align: center;
}

.faq__titulo {
  font-size: 2.15rem;
  font-weight: 800;
  text-align: center;
  color: #0f172a;
  margin-bottom: .4rem;
}

.faq__subtitulo {
  color: #64748b;
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}

.faq__lista {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 52rem;
  margin-inline: auto;
  text-align: left;
}

.faq__item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}

.faq__item[open] {
  border-color: #2563eb;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08);
}

.faq__pregunta {
  padding: 1.35rem 1.65rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq__pregunta-texto {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.faq__pregunta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: .95rem;
  flex-shrink: 0;
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 600;
  color: #2563eb;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s var(--curva), background .2s var(--curva);
}

.faq__item[open] .faq__pregunta::after {
  content: "−";
  background: #eff6ff;
  transform: rotate(180deg);
}

.faq__respuesta {
  padding: 0 1.65rem 1.5rem 4.15rem;
  color: #475569;
  line-height: 1.7;
  font-size: 1.025rem;
}

@media (max-width: 640px) {
  .faq__respuesta {
    padding-left: 1.65rem;
  }
}

/* Por Dónde Empezar Cards */
.relacionados__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}

.relacionados__item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: transform .18s var(--curva), border-color .18s var(--curva);
}

.relacionados__item:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
}

.relacionados__enlace {
  font-weight: 700;
  font-size: 1.1rem;
  color: #0f172a;
  text-decoration: none;
  margin-bottom: .5rem;
}

.relacionados__enlace:hover {
  color: #2563eb;
}

.relacionados__nota {
  font-size: var(--t-s);
  color: #64748b;
  line-height: 1.5;
}

/* ============================================================================
   Master Image Plan: Asset Figure Component & Responsive Container System
   ========================================================================== */
.asset-figure {
  margin: 2.5rem 0;
  display: block;
  width: 100%;
  clear: both;
}

.asset-figure picture {
  display: block;
  width: 100%;
}

.asset-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--linea-fria, #e2e8f0);
  background: var(--hoja, #ffffff);
  box-shadow: 0 4px 16px rgba(15, 26, 46, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asset-figure__img:hover {
  box-shadow: 0 8px 24px rgba(47, 75, 143, 0.08);
}

.asset-figure--ui .asset-figure__img {
  border: 1px solid rgba(159, 195, 216, 0.6);
  box-shadow: 0 6px 20px rgba(15, 26, 46, 0.06);
}

.asset-figure--specimen .asset-figure__img,
.asset-figure--diagram .asset-figure__img,
.asset-figure--preview .asset-figure__img {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 0.25rem;
}

.asset-figure__caption {
  margin-top: 0.65rem;
  font-size: var(--t-s, 0.875rem);
  color: var(--lapiz, #5b6780);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .asset-figure {
    margin: 1.5rem 0;
  }
  .asset-figure__img {
    border-radius: 8px;
  }
}

/* ============================================================================
   21. Unified Professional Tool Design System & Components
   ========================================================================== */

/* Focus Ring Accessibility */
:focus-visible {
  outline: 2px solid var(--pluma);
  outline-offset: 2px;
}

/* Base Form Control Normalization */
.entrada,
textarea.entrada,
select.entrada,
input[type="text"].entrada,
input[type="number"].entrada {
  display: block;
  width: 100%;
  min-height: 2.875rem; /* ~46px */
  /* padding: 0.65rem 0.85rem; */
  background: var(--hoja, #ffffff);
  color: var(--tinta, #0f1a2e);
  border: 1px solid var(--borde-fuerte, #cbd5e1);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.18s var(--curva), box-shadow 0.18s var(--curva);
}

.entrada:focus,
textarea.entrada:focus,
select.entrada:focus {
  outline: none;
  border-color: var(--pluma);
  box-shadow: 0 0 0 3px rgba(47, 75, 143, 0.18);
}

/* Select Control Enhancement with Clean Vector Chevron */
select.entrada {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232F4B8F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Number Input Control */
.number-control,
input[type="number"].number-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.875rem;
  padding: 0.5rem 0.65rem;
  background: var(--hoja, #ffffff);
  color: var(--tinta, #0f1a2e);
  border: 1.5px solid var(--borde-fuerte, #cbd5e1);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  transition: border-color 0.18s var(--curva), box-shadow 0.18s var(--curva);
}

.number-control:focus {
  outline: none;
  border-color: var(--pluma);
  box-shadow: 0 0 0 3px rgba(47, 75, 143, 0.18);
}

/* Range Slider Control (Native CSS Pseudo-elements, Touch-friendly) */
.range-control {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 2.875rem;
}

.range-control__slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.range-control__slider:focus-visible {
  outline: 2px solid var(--pluma);
  outline-offset: 4px;
}

/* WebKit Range Track & Thumb */
.range-control__slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--pauta, #9fc3d8);
  border: none;
}

.range-control__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pluma, #2f4b8f);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(15, 26, 46, 0.25);
  cursor: pointer;
  margin-top: -7px;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.range-control__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #243c73;
}

.range-control__slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
  background: #1a2c54;
}

/* Mozilla Firefox Range Track & Thumb */
.range-control__slider::-moz-range-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--pauta, #9fc3d8);
  border: none;
}

.range-control__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pluma, #2f4b8f);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(15, 26, 46, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.range-control__slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: #243c73;
}

.range-control__value {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tinta, #0f1a2e);
  min-width: 4.5rem;
  text-align: right;
}

/* Standardized Field Wrapper */
.field {
  display: block;
  margin-bottom: 1rem;
}

.field__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta, #0f1a2e);
  margin-bottom: 0.4rem;
}

.field__hint {
  display: block;
  font-size: var(--t-xs, 0.8125rem);
  color: var(--lapiz, #5b6780);
  margin-top: 0.35rem;
  line-height: 1.4;
}

.field--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* Standardized Tool Shell Architecture (.tool-shell) */
.tool-shell {
  background: var(--hoja, #ffffff);
  border: 1px solid rgba(159, 195, 216, 0.65);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 26, 46, 0.06);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2rem 3rem;
  position: relative;
}

/* ============================================================================
   Sticky Font Tool Workspace Architecture (.font-tool-workspace)
   ========================================================================== */
:root {
  --site-header-height: 0px;
  --sticky-tool-offset: 12px;
}

.font-tool-workspace {
  position: relative;
  min-width: 0;
  width: 100%;
}

.font-tool-controls-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--sticky-tool-offset, 12px);
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(159, 195, 216, 0.55);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: 0 8px 26px rgba(15, 26, 46, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow .18s ease, padding .18s ease, top .18s ease;
}

.font-tool-controls-sticky.is-stuck {
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 12px 32px rgba(15, 26, 46, 0.13);
}

.font-tool-results {
  display: grid;
  gap: 24px;
  min-width: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .font-tool-controls-sticky {
    top: 6px;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 18px;
  }
}

.tool-shell__header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 1rem;
}

.tool-shell__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--tinta, #0f1a2e);
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}

.tool-shell__instruction {
  font-size: 0.95rem;
  color: var(--lapiz, #5b6780);
  line-height: 1.5;
  margin: 0;
}

.tool-shell__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .tool-shell__layout--split {
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
  }
}

.tool-shell__controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-shell__preview {
  min-width: 0;
  background: var(--fondo, #f4f7fd);
  border: 1px solid rgba(159, 195, 216, 0.5);
  border-radius: 14px;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tool-shell__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Tool Results & Result Cards (Anti-Clipping Cursive Geometry) */
.tool-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18.5rem, 100%), 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.tool-result-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--hoja, #ffffff);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(15, 26, 46, 0.03);
  transition: transform 0.18s var(--curva), border-color 0.18s var(--curva), box-shadow 0.18s var(--curva);
  min-width: 0;
}

.tool-result-card:hover {
  transform: translateY(-2px);
  border-color: var(--pluma);
  box-shadow: 0 8px 24px rgba(47, 75, 143, 0.08);
}

.tool-result-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.tool-result-card__style-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pluma, #2f4b8f);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tool-result-card__family {
  font-size: var(--t-xs, 0.8125rem);
  color: var(--lapiz, #5b6780);
}

.tool-result-card__content {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.6; /* Ample line-height protects tall ascenders & descenders */
  color: var(--tinta, #0f1a2e);
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0.25rem 0;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math",
               "Noto Sans Symbols 2", "DejaVu Sans", var(--sans);
}

.tool-result-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

/* ============================================================================
   22. Media Content Component (.media-content)
   ========================================================================== */
.media-content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: clamp(32px, 6vw, 64px) 0;
  clear: both;
}

.media-content--reverse .media-content__media {
  order: 2;
}

.media-content__media {
  min-width: 0;
  padding: 10px;
  background: var(--hoja, #ffffff);
  border: 1px solid rgba(159, 195, 216, 0.65);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 26, 46, 0.07);
}

.media-content__media picture,
.media-content__media img,
.media-content__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.media-content__body {
  min-width: 0;
}

.media-content__title {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: var(--tinta, #0f1a2e);
  line-height: 1.25;
  margin: 0 0 1rem;
}

.media-content__text {
  font-size: 1.05rem;
  color: var(--lapiz, #5b6780);
  line-height: 1.65;
  margin: 0 0 1rem;
}

.media-content__text:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .media-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .media-content--reverse .media-content__media {
    order: 0;
  }
}