/* ------------------------------------------------------------------ *
 * Las paginas de autor: /catalogo/ y /somos/.
 *
 * Salio de `style.css` el 2026-09-02. **No es un archivo nuevo: es un corte.**
 *
 * El motivo NO es el tamano, aunque asi empezo. `scripts/ci/sloc.py` daba 1029
 * para `style.css` contra un limite duro de 800, y sobre ese numero se decidio
 * partirlo. El numero estaba mal: sloc.py no conoce la extension `.css` y cae
 * a contar lineas no vacias, comentarios incluidos -- y este tema comenta
 * mucho. El SLOC real era 495. Nunca estuvo sobre el limite.
 *
 * El corte se mantiene por la razon que si se sostiene, y que salio del cotejo
 * con el original: la copia servia el CSS de la tienda y el de /catalogo/ y
 * /somos/ en CADA entrada, y el original no lo hace. Ahora se encolan donde
 * hacen falta (ver `functions.php`).
 *
 * Nota para quien mida CSS en este repositorio: sloc.py infla los archivos muy
 * comentados. Hasta que sepa leer comentarios de CSS, un `.css` se mide aparte.
 * ------------------------------------------------------------------ */

/* ---- /catalogo/: la cabecera en dos columnas y el índice de formas -------
 *
 * TODO medido sobre https://tsonamiediciones.cl/catalogo/ el 2026-08-31 con
 * getComputedStyle, ventana de 1600 px (contenedor 1089 px):
 *
 *   título       70px / 70px, peso 500, versalitas, tracking -0.36px
 *   índice       19px / 22px de separación, peso 500, versalitas
 *   rótulo       19px / 25px, peso 500, versalitas
 *
 * Y el reparto: el título arranca en x 413 y acaba en 1137; el índice arranca
 * en 1136. La columna del título termina EXACTAMENTE donde empieza la otra, en
 * dos tercios contra uno. De ahí el `2fr 1fr`.
 *
 * Seis formas geométricas hacen de índice, y la misma forma reaparece en el
 * encabezado de cada sección: es lo que amarra una cosa con la otra. Van en
 * `currentColor` (ver `tsed_catalogo_forma()`), así que heredan el color del
 * enlace y el `:hover` las pinta sin una regla aparte.
 */
.entrada__cabeza--indice {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.5rem 2.5rem;
	align-items: start;
	/* La regla va por DEBAJO de las dos columnas, no bajo el índice: en el
	   original cruza todo el ancho del contenido. */
	border-bottom: 1px solid var(--linea);
	padding-bottom: 1.7rem;
	margin-bottom: 2.6rem;
}
.entrada__cabeza--indice h1 {
	/* El original agranda el título en esta página --70px, contra los 37 de
	   una página cualquiera--: es media cabecera, no un rótulo. */
	font-size: clamp(2.3rem, 5vw, 4.375rem);
	line-height: 1;
	margin: 0;
}

.catalogo__menu {
	display: flex;
	flex-direction: column;
	/* Sin hueco entre líneas: en el original van a 22px una de otra, que es
	   la interlínea del propio texto. Es una lista compacta, no seis bloques. */
	gap: 0;
	padding-top: .35em;
}
.catalogo__menu a,
.catalogo__seccion {
	display: flex;
	align-items: center;
	gap: .5em;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.2vw, 1.1875rem);   /* 19px arriba */
	font-weight: 500;
	line-height: 1.18;
}
.catalogo__menu a {
	/* Sin subrayado: la forma ya dice que es un enlace, y seis subrayados
	   seguidos leen como una lista de errores. */
	text-decoration: none;
	color: var(--tinta);
	width: fit-content;
	padding: .12em 0;
}
.catalogo__menu a:hover span,
.catalogo__menu a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: .22em;
}

.catalogo__forma { flex: 0 0 auto; }

.prosa .catalogo__seccion {
	/* El tamaño se repite aquí a propósito: `.prosa h2` --que fija
	   `var(--t-seccion)`, 15px-- gana por especificidad a `.catalogo__seccion`
	   a secas, y el rótulo salía más chico que su propia entrada del índice.
	   En el original los dos miden 19px, que es lo que deja leer la forma como
	   la marca que une a las dos. */
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	line-height: 1.32;
	margin-top: 2.6em;
	/* El salto desde el índice deja el encabezado bajo la cabecera fija si
	   no se reserva su alto. */
	scroll-margin-top: 7.5rem;
}

/* En angosto no hay dos columnas que repartir: el índice baja bajo el
   título, que es lo que hace el original en móvil. */
@media (max-width: 52rem) {
	.entrada__cabeza--indice { grid-template-columns: 1fr; }
}

/* La cabecera de dos columnas necesita el ancho del contenedor: `.entrada__cabeza`
   trae `max-width: 704px` --la medida de lectura-- y ahí dentro la columna del
   índice quedaba en 221 px, con «CATÁLOGOS FESTIVAL TSONAMI» partido en dos
   líneas. El original la da a 1089 px, que es todo el contenido. */
.entrada__cabeza--indice { max-width: none; }
.prosa--ancha { max-width: none; }

/* Y con el cuerpo ancho, la parrilla vuelve a TRES columnas. `.parrilla--fichas`
   usa `auto-fill minmax(210px)`, que dentro de la medida de lectura daba tres y
   a 1100 px da cuatro. El original mantiene tres incluso a 1920 --medido: tres
   portadas de 287 px con paso de 366--, que es el mismo argumento que ya está
   escrito arriba en `.parrilla`. Los cortes son los de esa regla. */
.prosa--ancha .parrilla--fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .prosa--ancha .parrilla--fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prosa--ancha .parrilla--fichas { grid-template-columns: 1fr; } }

/* El primer rótulo no repite la separación: la cabecera ya puso la suya bajo
   la regla, y sumadas dejaban 112 px de vacío donde el original tiene 50. */
.prosa .catalogo__seccion:first-of-type { margin-top: .4em; }

/* Los pies de una fila, a la misma altura.
 *
 * Las portadas vienen con proporciones distintas --480 px de alto una y 521 la
 * de al lado en LIBROS-- y cada pie caía donde lo dejaba su imagen.
 *
 * El primer intento fue una caja de proporción fija (287x376, la de la mayoría)
 * con `object-fit: contain`. Alineaba, pero rompía TSONAMI RECORDS: esas fotos
 * de CD son casi cuadradas, y metidas en una caja apaisada quedaban flotando
 * con 108 px de blanco encima. Forzar una proporción única sobre un catálogo
 * que tiene libros verticales Y fotos cuadradas es inventar un formato que el
 * contenido no tiene.
 *
 * Esto en cambio no fuerza nada: la ficha ya ocupa el alto de su fila
 * (`height: 100%`), así que basta con que la imagen empuje hacia abajo. Cada
 * portada conserva su tamaño, se apoyan todas en la misma línea --como en un
 * estante-- y el texto arranca ahí. La holgura es la diferencia real dentro de
 * esa fila y no una proporción impuesta. */
.prosa--ancha .ficha--recuperada > :first-child { margin-top: auto; }
.prosa--ancha .ficha--recuperada > figure { margin-inline: 0; margin-bottom: 0; }
.prosa--ancha .ficha--recuperada figcaption:empty { display: none; }

/* ---- /somos/: dos filas de dos columnas y el formulario ------------------
 *
 * Medido sobre https://tsonamiediciones.cl/somos/ el 2026-08-31: el texto de
 * presentación ocupa la izquierda y el collage la derecha; abajo, los datos
 * contra «ESCRÍBENOS» con el formulario. El reparto es mitad y mitad, no el
 * 2fr/1fr de /catalogo/ --ahí la columna derecha es un índice de seis líneas y
 * aquí es un formulario con tres campos, que necesita el mismo ancho que el
 * texto de al lado--. */
.somos__dos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 3.5rem;
	align-items: start;
	margin-block: 2.4em;
}
.somos__col > :first-child { margin-top: 0; }
.somos__col--figura img { width: 100%; height: auto; }

.prosa .somos__rotulo {
	display: flex;
	align-items: center;
	gap: .62em;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.32;
	margin-top: 1.8em;
	scroll-margin-top: 7.5rem;
}
.somos__col > .somos__rotulo:first-child { margin-top: 0; }

/* El formulario: sólo la línea de abajo, como el original. Nada de recuadros
   ni de fondos grises — el único recuadro de la página es el del botón. */
.formulario .campo { display: flex; flex-direction: column; gap: .15em; margin-top: 1.6em; }
.formulario label { font-size: var(--t-meta); color: var(--tinta); }
.formulario input,
.formulario textarea {
	font: inherit;
	color: var(--tinta);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--tinta);
	border-radius: 0;
	padding: .35em 0;
	width: 100%;
}
.formulario textarea { resize: vertical; min-height: 5.5em; }
.formulario input:focus-visible,
.formulario textarea:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}
.formulario .boton {
	font: inherit;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: transparent;
	color: var(--tinta);
	border: 1px solid var(--tinta);
	padding: .75em 2.2em;
	margin-top: 1.6em;
	cursor: pointer;
}
.formulario .boton:hover,
.formulario .boton:focus-visible { background: var(--acento); }

/* La trampa para robots. `display:none` la delataría --un robot que lee el CSS
   la salta--, así que se saca de la vista sin sacarla del documento. */
.formulario .trampa {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.aviso { border-left: 3px solid var(--linea); padding: .6em 0 .6em 1em; margin-top: 1.4em; }
.aviso--bien { border-left-color: var(--tinta); }
.aviso--mal  { border-left-color: #c0392b; }

@media (max-width: 52rem) {
	.somos__dos { grid-template-columns: 1fr; }
}

/* Los títulos de cada ficha: al tamaño de la casa y centrados.
 *
 * DIVERGENCIA DELIBERADA, y conviene que quede escrita. Medido en el original
 * el 2026-08-31: sus títulos de ficha van a 19px peso 500 y ALINEADOS A LA
 * IZQUIERDA, a ras del borde de la portada. Lo de centrarlos es una decisión
 * nuestra, pedida expresamente; el tamaño sí vuelve al del original --estaban
 * en 14px, que era más chico que cualquier otro texto de la página--.
 *
 * Se centra el bloque entero, título y disponibilidad: centrar sólo el título
 * y dejar el pie a la izquierda se lee como un descuadre, no como una
 * decisión. */
.prosa--ancha .ficha--recuperada h1,
.prosa--ancha .ficha--recuperada h2,
.prosa--ancha .ficha--recuperada h3,
.prosa--ancha .ficha--recuperada h4,
.prosa--ancha .ficha--recuperada h5,
.prosa--ancha .ficha--recuperada h6 {
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.32;
	text-align: center;
	margin: .7em 0 0;
}
.prosa--ancha .ficha--recuperada p { text-align: center; font-size: var(--t-meta); }