` llevaba `height:100%` para ocupar toda la
* fila de la rejilla y, con sólo el título dentro, se inflaba hasta esa altura completa antes del
* `` — el «hueco de 400 px en medio» (Antonio, 21/09/2026). Ahora título, miniatura e
* introducción van dentro del mismo enlace, en columna, y la tarjeta crece con su contenido.
*/
.guide-index ul {
list-style: none;
padding: 0;
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 1px;
background: var(--line);
border-block: 1px solid var(--line);
}
.guide-index li {
background: var(--ji);
}
.guide-index li a {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem;
text-decoration: none;
color: inherit;
height: 100%;
}
.guide-index li a:hover {
background: var(--hamon);
}
.guide-index li a img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r);
margin-bottom: 0.25rem;
}
.guide-index li a strong,
.guide-index li a b {
display: block;
font-family: var(--mincho);
font-size: 1.25rem;
}
.guide-index li a span,
.guide-index li a p {
font-size: 0.875rem;
color: var(--ink2);
}
/*
* Prosa a lo ancho de un renglón legible, se envuelva en secciones o no. Las páginas fijas vienen
* de una plantilla y ponen sus párrafos directamente bajo la página, así que el tope se pone a
* todo hijo y no sólo a `section`, que era por donde se escapaban. `.guide-section` queda fuera a
* propósito: es el tema con figuras, y necesita todo el ancho para su carril (ver más abajo).
*/
.guide-topic > *,
.static-page > * {
max-width: var(--prose);
}
.guide-topic > .guide-index,
.guide-index > ul,
.guide-topic > .guide-section {
max-width: none;
}
.guide-topic section,
.static-page section {
margin-top: 2.5rem;
}
.guide-topic h2,
.static-page h2 {
font-size: 1.5rem;
margin: 2.5rem 0 0.75rem;
}
.guide-topic h3,
.static-page h3 {
font-size: 1.125rem;
margin: 1.5rem 0 0.5rem;
}
.guide-topic p,
.static-page p {
margin-bottom: 1rem;
line-height: 1.7;
text-wrap: pretty;
}
.guide-topic ul,
.guide-topic ol,
.static-page ul,
.static-page ol {
margin: 0 0 1rem 1.25rem;
padding: 0;
}
.guide-topic li,
.static-page li {
margin-bottom: 0.4rem;
}
.guide-topic table,
.static-page table {
border-collapse: collapse;
width: 100%;
font-size: 0.9375rem;
margin-bottom: 1rem;
}
.guide-topic th,
.guide-topic td,
.static-page th,
.static-page td {
border-bottom: 1px solid var(--line2);
padding: 0.4rem 0.6rem;
text-align: left;
}
/*
* Sección de un tema con figuras: prosa a la izquierda, carril de figuras a la derecha, pegajoso
* mientras se lee esa sección (Diseño de partida, 21/09/2026 — «desaprovechamos la mitad de la
* pantalla siempre»).
*
* `.guide-prose` no lleva tope de ancho: ocupa lo que le deja el `flex` (todo el tema si no hay
* carril, el tema menos el carril si lo hay), y son los párrafos y las listas los que se quedan en
* `--prose` para seguir siendo legibles. Las tablas SÍ se quedan sin tope — «tablas a ancho
* completo» — porque una comparativa de escuelas con muchas columnas necesita más sitio que un
* párrafo.
*
* El carril es `position: sticky` dentro de `.guide-section` (no de la página): se ancla mientras
* se recorre esa sección y suelta en cuanto se entra en la siguiente, con CSS solo, sin JavaScript
* vigilando el scroll.
*/
.guide-section {
margin-top: 2.5rem;
}
.guide-prose p,
.guide-prose ul,
.guide-prose ol {
max-width: var(--prose);
}
.guide-prose table {
max-width: none;
}
@media (min-width: 68.75rem) {
/* 1.100 px */
.guide-section:has(.guide-figures) {
display: flex;
align-items: flex-start;
gap: 2.5rem;
}
.guide-section:has(.guide-figures) .guide-prose {
flex: 1 1 auto;
min-width: 0;
}
.guide-figures {
flex: 0 0 18rem;
position: sticky;
top: 5.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
}
/*
* Una figura de sección: foto de Wikimedia Commons o diagrama propio, con su pie y su crédito
* (Regla 1 — sin crédito visible no se publica). En móvil, entre el párrafo de su sección y el
* encabezado de la siguiente, no incrustada a mitad de un párrafo.
*/
.figure {
margin: 0 0 1.5rem;
}
.guide-figures .figure:last-child {
margin-bottom: 0;
}
.figure img {
display: block;
width: 100%;
border-radius: var(--r);
border: 1px solid var(--line2);
}
.figure figcaption {
margin-top: 0.5rem;
font-size: 0.8125rem;
line-height: 1.5;
}
.figure-caption {
display: block;
color: var(--ink);
}
.figure-credit {
display: block;
margin-top: 0.15rem;
color: var(--ink2);
}
.figure-credit a {
color: inherit;
}
.guide-links {
list-style: none;
margin-left: 0;
}
.guide-links li {
padding: 0.6rem 0;
border-top: 1px solid var(--line2);
}
.guide-links .note,
.note {
display: block;
font-size: 0.8125rem;
color: var(--ink2);
}
/*
* El diagrama de anatomía y su carril.
*
* El dibujo mide 1.160 unidades de ancho y rotula las piezas con números de 14 px, así que sólo se
* lee si se dibuja ancho: en la columna de texto (38rem) los números caen a 7 px y en un teléfono,
* a 4. De modo que el diagrama se salta la columna —como ya hace el índice de la guía— y, cuando
* ni así cabe, se recorre de lado en vez de encogerse. `site-css.test.ts` ata el ancho mínimo de
* aquí abajo con el `viewBox` y el cuerpo de los números del SVG.
*/
.diagram {
margin: 1.5rem 0;
max-width: none;
}
.diagram-scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
border: 1px solid var(--line2);
border-radius: var(--r);
padding: 0.5rem;
/*
* La pista de que hay más a los lados: dos sombras pegadas al contenido que sólo se ven mientras
* queda diagrama por ese lado. Las dos primeras capas son el «tapón» del color del papel, y van
* con `local` para viajar con el desplazamiento; las dos sombras se quedan quietas. La sombra se
* mezcla desde la tinta, no de un negro fijo: en tema oscuro un negro sobre negro no se ve.
*/
background:
linear-gradient(to right, var(--ji) 40%, transparent) left center / 2rem 100% no-repeat local,
linear-gradient(to left, var(--ji) 40%, transparent) right center / 2rem 100% no-repeat local,
radial-gradient(
farthest-side at 0 50%,
color-mix(in srgb, var(--ink) 30%, transparent),
transparent
)
left center / 0.8rem 100% no-repeat scroll,
radial-gradient(
farthest-side at 100% 50%,
color-mix(in srgb, var(--ink) 30%, transparent),
transparent
)
right center / 0.8rem 100% no-repeat scroll;
}
.diagram-scroll:focus-visible {
outline: 2px solid var(--ai);
outline-offset: 3px;
}
.diagram-scroll svg {
display: block;
width: 100%;
min-width: 920px;
height: auto;
}
.diagram-hint {
display: none;
margin-top: 0.5rem;
font-size: 0.8125rem;
color: var(--ink2);
}
/* 60,5rem es el ancho de ventana a partir del cual el diagrama ya cabe entero. */
@media (max-width: 60.5rem) {
.diagram-hint {
display: block;
}
}
.steps {
list-style: none;
counter-reset: paso;
margin-left: 0;
}
/* Aquí la numeración sí dice algo: las compras ocurren en este orden. */
.steps > li {
counter-increment: paso;
position: relative;
padding-left: 2.75rem;
margin-bottom: 1.5rem;
}
.steps > li::before {
content: counter(paso);
position: absolute;
left: 0;
top: -0.15rem;
font: 700 1.5rem/1 var(--mincho);
color: var(--kin);
}
.provisional {
border-left: 3px solid var(--kin);
padding-left: 1rem;
color: var(--ink2);
font-size: 0.9375rem;
}
.contact {
margin-top: 2rem;
}
.eml {
border: 1px solid var(--ai);
background: transparent;
color: var(--ai);
border-radius: var(--pill);
padding: 0.4rem 1.1rem;
font-size: 0.9375rem;
font-weight: 600;
}
.eml:hover {
background: var(--ai);
color: #fff;
}
.eml.cta {
border-color: transparent;
background: var(--ai);
color: #fff;
}
.not-found {
text-align: center;
padding-block: 7rem 6rem;
}
/* El tope de renglón legible sigue puesto; para centrar hay que centrar también la caja. */
.not-found > * {
margin-inline: auto;
}
.not-found p {
margin-top: 1rem;
}
.not-found h1 {
max-width: none;
}
/* ---------------------------------------------------- aviso del botón de correo */
.eml-aviso {
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translateX(-50%);
z-index: 2147483647;
max-width: calc(100vw - 2rem);
padding: 0.75rem 1.15rem;
border-radius: 10px;
background: var(--ink);
color: var(--ji);
text-align: center;
opacity: 0;
transition: opacity 0.18s ease;
}
.eml-aviso.visible {
opacity: 1;
}
/* La dirección va invertida en el DOM y se endereza aquí: quien lea el texto se la lleva al revés. */
.eml-aviso .addr {
unicode-bidi: bidi-override;
direction: rtl;
user-select: all;
font-weight: 700;
}
/* -------------------------------------------------------------------- pantallas */
@media (max-width: 78rem) {
:root {
--px-cm: 2.1px;
--rail: 12.5rem;
--machi-x: 2.75rem;
--numbers: 8.5rem;
--machi-right: calc(var(--numbers) + 1.125rem + var(--rail) - var(--machi-x));
}
.row {
grid-template-columns:
[rank] 3rem
[photo] 11rem
[body] minmax(0, 1fr)
[mei] 2.5rem
[rail] var(--rail)
[numbers] var(--numbers);
gap: 0 1.125rem;
}
}
/*
* Por debajo de 62 rem el carril no cabe. La hoja no se tira: baja a su propia línea, a lo ancho
* de la fila y a una escala mayor, con la vertical del machi encima. Se sigue comparando, sólo que
* fila a fila en vez de de un vistazo.
*/
@media (max-width: 62rem) {
:root {
--px-cm: 2.4px;
--machi-x: 2.2rem;
}
.row {
grid-template-columns: [photo] 10rem [body] minmax(0, 1fr) [mei] 2.5rem [numbers] 8rem;
grid-template-rows: auto auto auto auto auto auto;
gap: 0 1.25rem;
padding: 1.5rem 0;
}
.row::before {
display: none;
}
.row .rank {
grid-column: body;
grid-row: 1;
text-align: left;
}
.row .rank b {
font-size: 1.0625rem;
}
.row .row-title {
grid-row: 2;
font-size: 1.1875rem;
}
.row .mei {
grid-row: 1 / 5;
max-height: 7rem;
}
.row .meta {
grid-row: 3;
}
.row .summary {
grid-row: 4;
-webkit-line-clamp: 2;
}
.row .score {
grid-row: 1;
}
.row .price {
grid-row: 2 / 4;
margin-top: 0.75rem;
}
/* La hoja baja a su propia línea, a lo ancho de la fila y con la espiga alineada a la izquierda. */
.row-blade {
grid-column: photo / mei;
grid-row: 5;
position: static;
transform: none;
width: calc(var(--blade-cm) * var(--px-cm));
max-width: 100%;
align-self: center;
margin-top: 1.25rem;
}
.compare-toggle {
grid-column: numbers;
grid-row: 5;
align-self: center;
opacity: 1;
margin-top: 1.25rem;
}
.rail-key {
display: none;
}
.piece-columns {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
.piece-aside {
position: static;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/*
* La cabecera se pliega antes que la lista: cuatro secciones, seis idiomas y el botón de tema no
* caben en una línea mucho antes de que la fila deje de funcionar.
*
* El corte estaba en 56rem (896 px), y entre eso y el ancho del sitio (`--wrap`, 1240 px) quedaba
* una tierra de nadie: ni cabecera de una línea —«Cómo comprar» y «Deutsch» se partían a una
* segunda línea dentro de su propia lista, sin que la cabecera llegara a plegarse— ni menú
* plegado (Antonio, 21/09/2026). El corte sube a un pelo por debajo de `--wrap`: a partir de
* 1240 px cabe entera en una línea, y por debajo se pliega limpio, sin ese hueco intermedio.
*/
@media (max-width: 77.4375rem) {
/* 1.239 px: un píxel menos que --wrap (1.240 px), para que a 1.240 px exacto ya sea la fila. */
.site-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.nav-toggle {
display: block;
margin-left: auto;
order: 1;
}
.theme-toggle {
order: 2;
}
/*
* Los seis idiomas escritos con todas sus letras no caben en 360 px —«Portugiesisch» solo ya
* ocupa media línea—, así que bajan al menú plegable con el resto. Cambiar de idioma pasa a
* costar dos toques; se hace una vez por visita.
*/
.main-nav,
.lang-nav {
order: 3;
flex: 1 1 100%;
margin-left: 0;
}
.lang-nav {
order: 4;
}
/*
* Se pliegan **sólo si hay JavaScript**. El botón que los despliega tampoco se enseña sin él, de
* modo que plegarlos siempre dejaría el menú y los seis idiomas fuera de alcance: la página se
* podría leer y no se podría recorrer.
*/
:root.js .main-nav,
:root.js .lang-nav {
display: none;
}
:root.js.nav-open .main-nav,
:root.js.nav-open .lang-nav {
display: block;
}
:root.nav-open .lang-nav {
padding-bottom: 0.75rem;
}
.lang-nav ul {
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--line);
}
.lang-nav a {
padding: 0.25rem 0;
}
.main-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.main-nav a {
padding: 0.6rem 0;
font-size: 1rem;
border-radius: 0;
}
.nav-access {
margin-left: 0;
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--line);
margin-top: 0.25rem;
padding-top: 0.25rem;
}
/*
* Con la cabecera en dos líneas, una barra de filtros pegada debajo se come un tercio de la
* pantalla y tapa la primera fila. En vertical el espacio vale más que la comodidad: la barra se
* queda donde está y se vuelve a ella subiendo.
*/
.filters {
position: static;
}
}
@media (max-width: 40rem) {
:root {
--px-cm: 2.2px;
}
.wrap,
.site-header,
.site-footer,
main > * {
padding-inline: 1rem;
}
.page-head {
padding-block: 2.5rem 1.5rem;
}
.filters-bar {
flex-wrap: wrap;
}
.result-count {
flex: 1 1 100%;
margin-right: 0;
}
.search input {
width: 100%;
}
.field.search {
flex: 1 1 10rem;
}
.field.sort label {
display: none;
}
.filters-panel {
grid-template-columns: minmax(0, 1fr);
}
/*
* A 360 px la fila se vuelve una ficha: la foto arriba, a lo ancho, y debajo todo lo demás en
* una sola columna. Es la única disposición en que caben un nombre largo en alemán y un precio.
*/
.row {
grid-template-columns: [photo] minmax(0, 1fr) [body] 0 [mei] 0 [numbers] auto;
grid-template-rows: auto auto auto auto auto auto auto;
gap: 0 1rem;
}
.row .thumb {
grid-column: 1 / -1;
grid-row: 1;
aspect-ratio: 16 / 9;
margin-bottom: 0.9rem;
}
/* El cuadro de la raya sigue al de las demás filas también aquí: nunca es más alto. */
.row .thumb.is-sliver {
aspect-ratio: 16 / 9;
}
.row .rank {
grid-column: 1;
grid-row: 2;
}
.row .row-title {
grid-column: 1 / -1;
grid-row: 3;
font-size: 1.25rem;
}
.row .mei {
grid-column: 1 / -1;
grid-row: 4;
writing-mode: horizontal-tb;
justify-self: start;
align-self: start;
max-height: none;
margin-top: 0.3rem;
font-size: 0.9375rem;
letter-spacing: 0.02em;
}
.row .meta {
grid-column: 1 / -1;
grid-row: 5;
}
.row .summary {
grid-column: 1 / -1;
grid-row: 6;
-webkit-line-clamp: 3;
}
.row-blade {
grid-column: 1 / -1;
grid-row: 7;
}
.row .score {
grid-column: numbers;
grid-row: 2;
align-self: center;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.row .score .meter {
display: none;
}
.row .price {
grid-column: 1 / -1;
grid-row: 8;
text-align: left;
margin-top: 1rem;
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.row .price b {
display: inline;
font-size: 1.25rem;
}
.badge {
margin-top: 0;
}
.compare-toggle {
grid-column: 1 / -1;
grid-row: 9;
justify-self: start;
margin-top: 0.75rem;
}
/* A 360 px la firma va delante del nombre: si va detrás, el nombre se queda sin ancho. */
.piece-title {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 1rem;
}
.piece-title .mei {
max-height: 8rem;
border-left: 0;
border-right: 1px solid var(--line);
padding-left: 0;
padding-right: 1rem;
}
.piece-blade {
width: 100%;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid .cover button {
aspect-ratio: 3 / 2;
}
.score-lines li {
grid-template-columns: minmax(0, 1fr) 3.5rem;
}
.score-lines .component {
grid-column: 1;
}
.score-lines .bar {
grid-column: 1 / -1;
grid-row: 2;
}
.score-lines .points {
grid-column: 2;
grid-row: 1;
}
.score-lines .reason {
grid-column: 1 / -1;
grid-row: 3;
}
.compare-tray {
left: 1rem;
right: 1rem;
transform: none;
max-width: none;
border-radius: 10px;
}
.pager {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.pager .next {
text-align: left;
}
}
/* ----------------------------------------------------------------- preferencias */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-contrast: more) {
:root {
--line: var(--ink2);
--line2: var(--ink2);
--ink2: var(--ink);
}
}
@media print {
.site-header,
.filters,
.compare-tray,
.pager,
.theme-toggle,
.compare-toggle {
display: none !important;
}
body {
background: #fff;
color: #000;
}
}