@charset "utf-8";
/* Diseñada por Filipo Becerra específicamente para este sitio,
* adaptando las "Pautas de formato CSS" del proyecto Drupal https://www.drupal.org/docs/develop/standards/css/css-formatting-guidelines
*
* Actualizado: 01-05-2025
*/
/* ============================================= Fuentes */
@font-face {
font-family: atkinson-regular;
src: url(../fuentes/atkinson-regular.woff2) format("woff2");
font-display: swap;
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: atkinson-bold;
src: url(../fuentes/atkinson-bold.woff2) format("woff2");
font-display: swap;
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: ibmplexmono-regular;
src: url(../fuentes/ibmplexmono-regular.woff2) format("woff2");
font-display: swap;
font-style: normal;
font-weight: normal;
}
/* ============================================= Restablecimiento */
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
}
q {
quotes: none;
}
/* ============================================= Variables */
:root {
/* Colores */
--claro: hsl(40, 20%, 85%); /* #e0dbd1 */
--oscuro: hsl(0, 0%, 9%); /* #171717 */
--acento-claro: hsl(210, 100%, 72%); /* #70b8ff */
--acento-oscuro: hsl(210, 100%, 23%); /* #003b75 */
/* Tipos de letra */
--regular: atkinson-regular, sans-serif;
--negrita: atkinson-bold, sans-serif;
--mono: ibmplexmono-regular, monospace;
/* Tamaños de letra */
--super-grande: 3.5rem;
--historiada: 2.9rem;
--muy-grande: 2rem;
--grande: 1.3rem;
--algo-grande: 1.1rem;
--algo-chico: 0.8rem;
--chico: 0.7rem;
--muy-chico: 0.5rem;
}
/* ============================================= Lienzo */
html {
font-family: var(--regular);
/* Referencia valor rem */
font-size: 20px;
scroll-behavior: smooth;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
place-items: center;
height: 100vh;
padding-top: 1.5em;
padding-bottom: 1.5em;
background-color: var(--claro);
color: var(--oscuro);
}
/* ============================================= Filas principales */
body > header,
body > main,
body > footer {
width: 100%;
/* 36.364em = 800px aprox. */
max-width: 36.364em;
padding: 1.5em;
}
body > header {
border-radius: 0.6em;
/* background-image: url(../imagenes/silueta-oscura_min.svg);*/
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 3.05em;
background-position: 93.65% 1.55em;
background-color: var(--oscuro);
color: var(--claro);
}
.logo-img {
filter: invert(1);
}
body > main {
margin-top: 1.5em;
border: 0.2em solid var(--oscuro);
border-radius: 0.6em;
}
/* ============================================= Saltar índice */
.saltar-indice {
position: absolute;
transform: translateY(-360%);
}
.saltar-indice:focus {
top: 0.2em;
margin-left: -1.5em;
padding: 0.4em 1em 1em 1em;
border-radius: 0.6em 0.6em 0 0;
background-color: var(--oscuro);
color: var(--claro);
transform: translateY(0);
}
/* ============================================= Menú de migas */
.menu-migas {
font-size: var(--algo-chico);
}
.menu-migas a {
background-color: var(--oscuro);
}
/* ============================================= Título principal */
h1 {
margin-top: 0.1em;
font-family: var(--negrita);
font-size: var(--super-grande);
text-shadow: 0 0 10px var(--oscuro);
}
/* ============================================= Menú de navegación */
header nav ul {
overflow: hidden;
}
header nav ul li {
/* Efecto no deseado: pérdida de espacios entre LI */
float: left;
display: inline;
font-size: var(--algo-chico);
/* Devuelve espacio entre LI */
white-space: pre-wrap;
}
header nav ul li:nth-child(5) {
clear: left;
}
header nav ul li a {
background-color: var(--oscuro);
}
/* ============================================= Info. sección */
.info {
margin-bottom: 2em;
}
.info > p {
padding-bottom: 1.17em;
border-bottom: 0.1em dashed var(--oscuro);
}
/* ============================================= Índice */
details {
display: block;
padding-bottom: 2em;
margin-left: 0.5em;
}
details summary {
margin: 0 0.5em;
cursor: pointer;
text-align: left;
}
/* Para OL principal y anidados */
details ol {
margin: 0.5em 0;
list-style-type: none;
counter-reset: list;
}
details ol li {
margin: 0.2em 1.55em 0.2em 1.1em;
font-size: var(--chico);
line-height: 1.4em;
}
details ol li:before {
counter-increment: list;
content: counters(list, ".") ". ";
}
details ol li ol li {
margin-left: 1em;
}
/* ============================================= Secciones */
main section {
margin-bottom: 3em;
}
/* ============================================= Rótulos */
.rotulo2,
.rotulo3 {
display: grid;
grid-template: 100% / auto 1fr auto;
}
.rotulo2 {
margin-bottom: 1em;
padding: 0.15em 0.36em 0 0.48em;
border-radius: 0.2em;
font-size: var(--muy-grande);
background-color: var(--oscuro);
color: var(--claro);
}
.rotulo2 h2 {
margin: 0 0.2em;
}
.rotulo2 .seccion,
.rotulo2 .subir {
padding: 0 0.1em 0 0.1em;
font-family: var(--regular);
line-height: 2.5rem;
text-decoration: none;
}
.seccion:before {
content: "#";
}
.subir:before {
font-family: var(--mono);
content: "↑";
font-size: 100%;
}
.rotulo3 h3,
h4 {
font-family: var(--negrita);
}
.rotulo3 {
margin: 1em 0.93em 1em -0.15em;
/* padding: 0.15em 0 1em 1em;*/
padding-left: 1em;
font-size: var(--grande);
}
.rotulo3 h3 {
margin: 0 0.4em;
text-transform: uppercase;
}
.rotulo3 .seccion,
.rotulo3 .subir {
padding: 0.1em;
line-height: 1.3rem;
text-decoration: none;
}
h4 {
margin: 1.25em;
}
/* ============================================= Figuras */
figure {
margin: 0 1.3em 2em 1.3em;
}
figcaption {
margin: 0 0.4em;
font-size: var(--chico);
}
/* ============================================= Imágenes */
main img {
width: 100%;
height: auto;
border-radius: 0.4em;
}
/* ============================================= Párrafos */
main p {
margin-bottom: 1.3em;
/* Alinea verticalmente P con FIGURE */
padding: 0 1.25em;
line-height: 1.3rem;
}
.historiada {
float: left;
margin: 0.15em 0.1em 0 -0.06em;
font-size: var(--historiada);
line-height: 2rem;
}
/* ============================================= Listas */
/* Alinea verticalmente con P */
section > ol,
section > ul {
margin: 1em 1em 1em 2.75em;
}
main li,
main table {
font-size: var(--algo-chico);
line-height: 1.3rem;
}
main ul li {
list-style-type: disc;
}
main table {
margin: 0 1.5em;
}
main td {
vertical-align: text-top;
}
main table tr td.fechas {
padding-right: 0.8em;
}
/* ============================================= Ficha técnica (TABLE) */
.ficha {
margin: 0 1.8em 2em 1.3em;
padding: 0.3em;
border-right: 0.1em solid var(--oscuro);
border-bottom: 0.1em solid var(--oscuro);
border-left: 0.1em solid var(--oscuro);
}
.ficha caption {
padding: 0.4em 0 0.3em 0;
border: 0.1em solid var(--oscuro);
font-family: var(--negrita);
}
.ficha tbody {
font-size: var(--algo-chico);
}
.ficha th {
font-family: var(--negrita);
text-align: left;
vertical-align: top;
}
.ficha th,
.ficha td {
padding: 0.3em;
}
/* ============================================= Antecedentes (TABLE) */
.antecedentes {
margin: 0 1.65em 3.5em 1.65em;
padding: 0.3em;
border: 0.1em solid var(--oscuro);
font-size: var(--algo-chico);
}
.antecedentes caption {
padding: 0.4em 0 0.3em 0;
border: 0.1em solid var(--oscuro);
font-family: var(--negrita);
}
.antecedentes th {
font-family: var(--negrita);
text-align: left;
vertical-align: top;
}
.antecedentes th,
.antecedentes td {
padding: 0.3em;
}
/* ============================================= Checksums (DISPLAY y TABLE) */
/* ---------- Desplegable */
.checksums {
display: inline;
margin: 0 1.5em 0 1.5em;
padding: 0.3em;
border-radius: 0.4em;
background-color: var(--oscuro);
color: var(--oscuro);
}
.checksums summary {
padding: 0.2em;
cursor: pointer;
font-size: var(--algo-chico);
}
/* ---------- Tabla */
.checksums-datos {
margin: 0.5em 0;
}
.checksums-datos th {
font-family: var(--negrita);
text-align: left;
vertical-align: top;
}
.checksums-datos th,
.checksums-datos td {
font-size: var(--algo-chico);
padding: 0.3em;
}
.checksums-datos td {
word-break: break-all;
}
/* ============================================= Otros elementos */
.separacion {
display: grid;
place-items: center;
margin: 1.5em 0 0.94em 0;
}
.tachadura {
text-decoration: line-through;
}
sup,
sub {
font-size: var(--muy-chico);
}
strong,
em {
font-family: var(--negrita);
}
cite {
font-style: normal;
}
u {
text-decoration: none;
}
pre {
font-family: var(--mono);
}
.codigo {
margin: 1em 1.65em 3em 1.65em;
padding: 1em;
border: 0.1em solid var(--oscuro);
border-radius: 0.4em;
font-family: var(--mono);
font-size: var(--algo-chico);
}
/* Mapa del sitio */
div.pre {
margin-left: 1.05em;
margin-top: -2em;
font-family: var(--mono);
white-space: pre-wrap;
overflow-x: auto;
}
div.pre a,
div.pre span {
font-family: var(--regular);
}
/* ============================================= Redes sociales */
/* Regla adaptada de ".galeria" */
.botonera {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));
grid-gap: 0.5rem;
place-items: center;
height: auto;
}
.red {
display: grid;
place-items: center;
}
.red a img {
width: 80px;
height: 80px;
border-radius: 0;
}
.red p {
margin: 0;
font-size: var(--algo-chico);
}
/* ============================================= Citas */
/* ---------- Epígrafe */
div.epigrafe {
margin-right: 2.13em;
font-size: var(--chico);
text-align: right;
}
/* ---------- Fuente */
p.autor {
margin-bottom: 1.5em;
/* Ajusta margen derecho de número ref. a margen de cita */
margin-right: -0.1em;
/* Reinicia padding de P en MAIN */
padding-right: 0;
font-size: var(--chico);
font-variant: small-caps;
line-height: 0.5rem;
text-align: right;
}
/* ---------- Referencias */
aside.ref {
margin: 0 1.3em 2em 1.3em;
padding: 0.5em 0.5em 0.1em 0.5em;
border: 0.13em solid var(--acento-oscuro);
}
aside.ref li {
/* Margen izq. reajusta LI a sangría de P */
margin: 0 0 0.4em 0;
font-size: var(--chico);
line-height: 0.9rem;
list-style-type: none;
}
/* ============================================= Detalles tipográficos */
/* ---------- Firma */
p.firma {
margin-top: -0.5em;
margin-bottom: 2em;
text-align: right;
}
/* ---------- Ofusca direcciones */
.ofu-dir {
display: none;
}
/* ---------- Emoji de flecha (↗) en enlaces externos */
.fuera:before {
content: " ";
white-space: nowrap;
}
.fuera:after {
content: "↗";
font-family: var(--mono);
line-height: 1em;
}
/* ---------- Párrafo destacado */
.p-destacado {
margin: 2em 2.5em;
padding: 1em;
border: 0.3em solid var(--acento-oscuro);
border-radius: 1em;
background-color: var(--oscuro);
color: var(--claro);
}
/* ---------- Teclas */
.tecla {
padding: 0.1em;
border-radius: 0.2em;
white-space: nowrap;
}
.tecla-oscura {
background-color: var(--claro);
color: var(--oscuro);
}
.tecla-clara {
background-color: var(--oscuro);
color: var(--claro);
}
/* ---------- Texto en letra monoespaciada */
.mono {
font-family: var(--mono);
}
/* ---------- Espacios en número telefónico */
.espacio-simple:after {
content: "\0020";
}
/* ============================================= Galería de miniaturas */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
grid-gap: 1rem;
height: auto;
margin-top: 1em;
margin-bottom: 2.3em;
padding: 0 1.22em;
margin-bottom: 3em;
place-items: start legacy;
}
.obra {
display: grid;
}
.obra a:hover,
.obra a:focus {
background-color: transparent;
}
.obra a:hover > img,
.obra a:focus > img {
background-color: transparent;
filter: brightness(50%);
}
.obra h4 {
margin: 0.3em 0.3em;
font-family: var(--regular);
}
.obra h4 > a:hover,
.obra h4 > a:focus {
background-color: var(--oscuro);
color: var(--claro);
}
/* ============================================= Actualización */
.actualizacion {
display: block;
margin: 0 1.85em;
padding: 0.5em 1em 0.5em 0.5em;
border-radius: 1em;
font-size: var(--chico);
text-align: right;
background-color: var(--oscuro);
color: var(--claro);
}
/* ============================================= Pie de página */
body > footer p {
margin-bottom: 0.5em;
font-size: var(--algo-chico);
text-align: center;
}
/* ============================================= Selección */
*::selection {
color: var(--claro);
background-color: var(--acento-oscuro);
}
a::selection {
text-decoration: underline solid var(--claro);
}
/* ============================================= Enlaces */
/* ---------- De cabecera */
header a:link {
color: var(--acento-claro);
padding: 0 0.1em;
}
header a:visited {
text-decoration: none;
color: var(--claro);
}
header a:hover,
header a:focus,
header a:active {
border-radius: 0.08em;
text-decoration: none;
background-color: var(--claro);
color: var(--oscuro);
}
header a:focus {
outline: none;
}
header a:active {
text-decoration: underline solid var(--oscuro);
}
/* ---------- De cuerpo y pie de página */
main a:link,
footer a:link {
text-underline-offset: 0.15em;
color: var(--acento-oscuro);
padding: 0 0.1em;
}
main a:visited,
footer a:visited {
text-decoration: none;
color: var(--oscuro);
}
main a:hover,
main a:focus,
main a:active,
footer a:hover,
footer a:focus,
footer a:active {
border-radius: 0.08em;
text-decoration: none;
background-color: var(--oscuro);
color: var(--claro);
}
main a:focus,
footer a:focus {
outline: none;
}
main a:active,
footer a:active {
text-decoration: underline solid var(--claro);
}
/* ---------- De índice */
details summary,
details summary {
padding: 0.3em 0.3em 0.2em 0.3em;
border-radius: 0.3em;
}
details summary:hover,
details summary:focus {
border-radius: 0.3em;
background-color: var(--claro);
color: var(--oscuro);
}
details ol li a:link,
details ol li a:visited {
color: var(--oscuro);
}
details ol li a:hover,
details ol li a:focus,
details ol li a:active {
background-color: var(--oscuro);
color: var(--claro);
}
details ol li a:active {
text-decoration: underline solid var(--claro);
}
/* ---------- De rótulo 2 */
.rotulo2 div a:link,
.rotulo2 div a:visited {
color: var(--claro);
}
.rotulo2 div a:hover,
.rotulo2 div a:focus,
.rotulo2 div a:active {
background-color: var(--claro);
color: var(--oscuro);
}
/* ---------- De redes sociales */
.red a:hover,
.red a:focus {
background-color: transparent;
}
.red a:hover > img,
.red a:focus > img {
background-color: transparent;
filter: brightness(50%);
}
.red p > a:hover,
.red p > a:focus {
background-color: var(--oscuro);
color: var(--claro);
}
/* ---------- Enlaces de sumas de comprobación */
.checksums {
margin-left: 1.3em;
}
.checksums .descarga a:link {
color: var(--acento-claro);
padding: 0 0.1em;
}
.checksums .descarga a:visited {
text-decoration: none;
color: var(--claro);
}
.checksums .descarga a:hover,
.checksums .descarga a:focus,
.checksums .descarga a:active {
border-radius: 0.08em;
text-decoration: none;
background-color: var(--claro);
color: var(--oscuro);
}
.checksums .descarga a:active {
text-decoration: underline;
}
/* ---------- Enlaces de ejemplo (Accesibilidad) */
.caja-ejemplo {
display: flex;
align-items: center;
justify-content: center;
}
.enlace-ejemplo-fcto {
max-width: 20em;
margin-bottom: 0;
padding: 0.8em;
background-color: var(--oscuro);
color: var(--claro);
}
.enlace-ejemplo-fotc {
max-width: 20em;
padding: 0.8em;
background-color: var(--claro);
color: var(--oscuro);
border: 0.05em solid var(--oscuro);
}
.enlace-ejemplo-fcto br,
.enlace-ejemplo-fotc br {
margin-bottom: 0.3em;
}
.fcto2 {
margin-bottom: 0.4em;
}
.ejem-sv,
.ejem-en,
.ejem-ac,
.ejem-vi {
text-decoration: underline;
cursor: pointer;
}
.enlace-ejemplo-fcto .ejem-sv {
color: var(--acento-claro);
}
.enlace-ejemplo-fcto .ejem-en {
border-radius: 0.08em;
text-decoration: none;
background-color: var(--claro);
color: var(--oscuro);
}
.enlace-ejemplo-fcto .ejem-ac {
border-radius: 0.08em;
background-color: var(--claro);
color: var(--oscuro);
}
.enlace-ejemplo-fcto .ejem-vi {
color: var(--claro);
}
.enlace-ejemplo-fotc .ejem-sv {
color: var(--acento-oscuro);
}
.enlace-ejemplo-fotc .ejem-en {
border-radius: 0.08em;
text-decoration: none;
background-color: var(--oscuro);
color: var(--claro);
}
.enlace-ejemplo-fotc .ejem-ac {
border-radius: 0.08em;
background-color: var(--oscuro);
color: var(--claro);
}
.enlace-ejemplo-fotc .ejem-vi {
color: var(--oscuro);
}
/* ============================================= Landing page */
.landing > header,
.landing > main,
.landing > footer {
width: auto;
}
.landing > header {
display: grid;
place-items: center;
min-width: 16.51em;
padding-top: 1em;
padding-bottom: 0.5em;
background-image: none;
}
.landing > header h1 {
font-family: var(--negrita);
}
.landing > main {
padding: 1.4em;
border-radius: 1em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 5.05em;
background-position: 92% 6em;
}
.landing div {
margin-bottom: 0;
}
.landing div p {
margin-bottom: 0.6em;
padding: 0;
line-height: 1.5rem;
text-indent: 0;
}
/* ---------- Efecto cursor */
.landing .cursor {
width: 4.94em;
margin-bottom: 0;
border-right: 0.1em solid;
line-height: 1.1em;
white-space: nowrap;
animation: cursor .6s step-end infinite alternate;
overflow: hidden;
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
/* ---------- Enlace H1 */
.landing h1 a:hover,
.landing h1 a:focus {
padding: 0.1em 0.1em 0 0.1em ;
}