/*
* editorial.css — todo el diseño del sitio salvo las tarjetas de entradas
* (esas están en portada.css). Los colores, tipografías y medidas salen de
* variables.css: acá casi no hay números sueltos.
*
* Está escrito "de celular para arriba": cada regla vale para pantallas
* angostas, y los @media (min-width: ...) la ajustan para las anchas.
*
* ÍNDICE
* 1. Base: cajas, página, texto, títulos, enlaces
* 2. Estructura: la tira, el contenedor, el pie siempre abajo
* 3. Encabezado
* 4. Piezas que se repiten: antetítulo, nombre de la revista, citas...
* 5. Una entrada (single.php)
* 6. Notas al pie y al margen
* 7. Páginas de pestañas (Políticas, Sobre nosotros, Temas)
* 8. Convocatoria y Guía para colaborar
* 9. Páginas comunes, listados y 404
* 10. Pie de página
*
* OJO AL MOVER REGLAS DE LUGAR: cuando dos reglas igual de específicas
* apuntan al mismo elemento, gana la que viene después. El orden de las
* secciones no es solo de lectura.
*/
/* ==========================================================================
1. Base
========================================================================== */
/* Que el relleno y el borde de una caja se cuenten DENTRO de su ancho, y no
sumados: sin esto, cualquier caja con relleno mide más de lo pedido. */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Todo el sitio mide en rem, o sea en proporción a este número: subirlo o
bajarlo agranda o achica todo el texto de una vez. 106.25% = 17 px. */
html {
font-size: 106.25%;
-webkit-text-size-adjust: 100%;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
/* El papel del sitio. Además es una columna flexible: así el pie queda
siempre abajo de todo aunque la página sea corta (ver #page, más abajo).
Sin "overflow-x: hidden" a propósito: rompería el encabezado fijo. */
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-fondo);
color: var(--color-texto);
font-family: var(--fuente-cuerpo);
font-size: var(--tamano-cuerpo);
line-height: 1.75;
}
/* Todo el texto justificado, sin partir palabras con guiones. Medido en
escritorio, el espacio más ancho que abre queda en 1.2 veces uno normal. */
p,
blockquote,
li {
text-align: justify;
hyphens: manual;
}
/* Salvo en el teléfono: con seis palabras por renglón, justificar abría
huecos de hasta cuatro espacios. Ahí el margen derecho queda suelto. */
@media (max-width: 640px) {
p,
blockquote,
li {
text-align: left;
}
}
h1,
h2,
h3,
h4 {
font-family: var(--fuente-titulos);
font-weight: 800;
text-transform: uppercase;
line-height: 1.15;
color: var(--color-texto);
/* Una sola palabra muy larga ("CONVOCATORIA" en un teléfono) se parte
en vez de salirse de la pantalla. */
overflow-wrap: break-word;
}
h1 { font-size: var(--tamano-h1); }
h2 { font-size: var(--tamano-h2); }
h3 { font-size: var(--tamano-h3); }
/* Sin color de acento, un enlace dentro de un texto se distingue por el
subrayado. Los componentes que no lo quieren lo apagan por su cuenta. */
a {
color: var(--color-texto);
text-decoration: underline;
text-underline-offset: 0.16em;
text-decoration-thickness: 1px;
}
a:hover,
a:focus-visible {
color: var(--color-realce);
}
/* ==========================================================================
2. Estructura
========================================================================== */
/* La tira: la caja central donde vive todo -- encabezado, portada, pie.
Una sola medida (--ancho-tira) gobierna el ancho de todo el sitio. */
.revista-tira {
width: 100%;
max-width: var(--ancho-tira);
margin-left: auto;
margin-right: auto;
padding-left: var(--aire-lateral);
padding-right: var(--aire-lateral);
}
/* El aire entre la última cosa de la página y el pie negro, para que se
note dónde termina la revista. */
.revista-contenedor {
width: 100%;
padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
/* Todo lo que no es el pie crece hasta llenar la pantalla: así el pie queda
abajo de todo aunque la página sea corta (ver "body", más arriba). */
#page {
flex: 1 0 auto;
}
/* Un enlace que solo aparece al llegar con el teclado: permite saltarse el
encabezado e ir directo al contenido. */
.revista-saltar-al-contenido {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 0.75rem 1.25rem;
background-color: var(--color-texto);
color: var(--color-fondo);
text-decoration: none;
}
.revista-saltar-al-contenido:focus {
left: 0;
}
/* Texto que no se ve pero los lectores de pantalla sí leen. */
.revista-oculto-visualmente {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
3. Encabezado (header.php)
========================================================================== */
/* Una franja negra fija arriba de la pantalla. Los colores se dan vuelta
redefiniendo las variables acá adentro: todas las reglas que piden
var(--color-texto) o var(--color-gris) se repintan solas. Los valores son
los mismos del pie, el otro bloque negro del sitio. */
#masthead {
--color-fondo: #131313;
--color-texto: #e7e4dc;
--color-gris: rgba(231, 228, 220, 0.72);
--color-realce: #fff;
--color-borde: rgba(231, 228, 220, 0.22);
border-top: 3px solid var(--color-texto);
border-bottom: 1px solid var(--color-borde);
background-color: var(--color-fondo);
background-image: var(--textura-grano);
position: sticky;
top: 0;
z-index: 999;
}
/* Con la barra de administración de WordPress (solo la ve quien tiene la
sesión abierta), el encabezado se pega debajo de ella. */
body.admin-bar #masthead {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar #masthead {
top: 46px;
}
}
/* Sin el id (#masthead) a propósito: un id le gana a cualquier clase, y así
cada pieza del encabezado puede cambiar su propia letra y color. */
.site-header {
font-family: var(--fuente-cuerpo);
color: var(--color-texto);
}
.site-header a {
color: var(--color-texto);
}
/* Tres columnas en retícula: "1fr auto 1fr" deja la del medio centrada de
verdad en la página, midan lo que midan las de los costados. */
.revista-header__cuadro {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
min-height: 2.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.revista-header__lado {
display: flex;
align-items: center;
min-width: 0;
}
.revista-header__lado--fin {
justify-content: flex-end;
}
.revista-header__izquierda {
display: flex;
align-self: center;
}
/* "simulacro", a la izquierda, enlazado a la portada. */
.revista-header__marca {
display: inline-block;
font-family: var(--fuente-titulos);
font-weight: 800;
font-size: clamp(1.125rem, 2.4vw, 1.5rem);
letter-spacing: 0.01em;
color: var(--color-texto);
text-decoration: none;
}
/* El centro: Convocatoria, Inicio y Sorpréndeme en una fila. */
.revista-header__centro {
display: flex;
align-items: center;
gap: 1.25rem;
min-width: 0;
}
.revista-header__opciones {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.revista-header__opcion {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--fuente-titulos);
font-weight: 800;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-texto);
text-decoration: none;
text-align: center;
}
/* Subrayado al pasar el cursor, y fijo en la página donde se está (Inicio o
Convocatoria). Sorpréndeme nunca queda marcado: es una acción, no un
lugar. */
.revista-header__opcion:hover,
.revista-header__opcion:focus-visible,
.revista-header__opcion.revista-header__opcion--activa {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* La derecha: "sobre nosotros". */
.revista-header__acciones {
display: flex;
align-items: center;
align-self: center;
justify-content: flex-end;
gap: 0.85rem;
}
.revista-header__sobre-nosotros {
font-family: var(--fuente-titulos);
font-weight: 800;
font-size: 0.875rem;
color: var(--color-texto);
text-decoration: none;
}
.revista-header__sobre-nosotros:hover,
.revista-header__sobre-nosotros:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Hasta 1279 px las tres columnas no entran en una fila: la navegación
pasa arriba, sola y centrada, y "simulacro" y "sobre nosotros" abajo,
cada uno con media página. */
@media (max-width: 1279px) {
.revista-header__cuadro {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"centro centro"
"izquierda acciones";
row-gap: 0.4rem;
column-gap: 0.6rem;
}
.revista-header__centro {
grid-area: centro;
justify-content: center;
flex-wrap: wrap;
row-gap: 0.3rem;
}
.revista-header__lado {
grid-area: izquierda;
}
.revista-header__lado--fin {
grid-area: acciones;
}
}
/* ==========================================================================
4. Piezas que se repiten
========================================================================== */
/* Antetítulo: el rótulo chico que va encima de un título y dice qué se
está mirando ("Sección", "Legal", "Error 404", la sección de una nota). */
.revista-antetitulo {
display: inline-block;
margin: 0 0 0.5rem;
font-family: var(--fuente-titulos);
font-weight: 800;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.16em;
line-height: 1;
color: var(--color-gris);
text-align: left;
}
.revista-antetitulo a {
color: inherit;
text-decoration: none;
}
.revista-antetitulo a:hover,
.revista-antetitulo a:focus-visible {
text-decoration: underline;
}
/* El nombre de la revista escrito dentro de un texto
(simulacro): en la letra de los
títulos, en mayúsculas y en negrita. Las mayúsculas las pone el CSS y no
el texto, para que un lector de pantalla lo lea como palabra y no lo
deletree. */
.revista-marca {
font-family: var(--fuente-titulos);
text-transform: uppercase;
font-weight: 800;
}
/* Un título con una línea a cada lado ("También te puede interesar"). */
.revista-titulo-seccion {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
}
.revista-titulo-seccion::before,
.revista-titulo-seccion::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-borde);
}
/* Una cita destacada dentro de un texto (