/***** Reset *****/
* {box-sizing: border-box; margin: 0; padding: 0;}

/***** Variables *****/
:root {
	/* Tamaños de dispositivos */
	--ancho-escritorio: 1000px;
	/* Colores (basados en el añil de los zócalos de las casas) */
    --tono: 184;
    --saturacion: 28%;
    --luminosidad: 38%;
	--color-base: hsl(var(--tono), var(--saturacion), var(--luminosidad));
	--color-claro: hsl(var(--tono), calc(var(--saturacion) * 0.35), 94%);
	--color-oscuro: hsl(var(--tono), calc(var(--saturacion) * 1.2), 18%);
	--color-complementario: hsl(calc(var(--tono) + 180), calc(var(--saturacion) * 3), 38%);
	--color-adyacente1: hsl(calc(var(--tono) + 28), calc(var(--saturacion) * 1.4), calc(var(--luminosidad) - 4%));
	--color-adyacente2: hsl(calc(var(--tono) + 160), calc(var(--saturacion) * 2.2), 46%);
	/* Tipografías */
	--tipo-cabecera: "EB Garamond", serif; /* Es variable y admite cursiva y un peso entre 100 y 900 */
	--tipo-normal: "Encode Sans", sans-serif; /* Es variable pero no tiene el estilo cursiva aunque tiene ancho variable (75, 87.5, 100, 112.5 y 125) y un peso entre 100 y 900 */
	/* Tamaños de letra */
	--tamano-gigante: 2.75rem;
	--tamano-grande: 1.5rem;
	--tamano-normal: 1rem;
	--tamano-pequeno: 0.9rem;
	--tamano-minusculo: 0.75rem;
	/* Interlineados */
	--interlineado-ancho: 170%;
	--interlineado-normal: 145%;
	--interlineado-estrecho: 119%;
}

/***** Layout *****/
html {font-size: clamp(20px, calc(21.5px - 0.20vw), 21.5px); scroll-behavior: smooth; scroll-padding-top: 2rem;}
body {font-family: var(--tipo-normal); line-height: var(--interlineado-normal); color: var(--color-claro); background-color: var(--color-oscuro);}
body::before {content: ""; position: fixed; inset: 0; background-image: url("images/fondo.png"); background-size: cover; background-position: center; opacity: .1; mix-blend-mode: color-burn; pointer-events: none; z-index: 0;}
header {display: flex; align-items: flex-end; min-height: 80vh; padding: 3rem 1rem 3rem 3rem; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-oscuro) 0%, transparent), color-mix(in srgb, var(--color-oscuro) 100%, transparent)), url("images/portada.jpg"); background-size: cover; background-position: center 55%; background-repeat: no-repeat;}
main {padding: 1rem; background-color: var(--color-base);}
footer {max-width: var(--ancho-escritorio); margin: 0 auto; padding: 1rem 1rem 2rem 1rem; text-align: center; color: var(--color-claro); background-color: var(--color-oscuro);}

/***** Comunes *****/
h1, h2, h3, h4 {font-family: var(--tipo-cabecera); line-height: var(--interlineado-estrecho); display: flex; align-items: center; gap: 0.25rem;}
h1 {width: 15ch; font-size: var(--tamano-gigante); font-style: italic;}
h2 {font-size: var(--tamano-grande);}
h3 {font-size: calc(var(--tamano-normal) + 0.3rem); font-weight: bold;}
h4 {font-size: calc(var(--tamano-normal) + 0.15rem);; font-style: italic;}
a {color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; transition: text-decoration-thickness .1s ease, color .1s ease;}
a:hover {text-decoration-thickness: 3px;}
.persona {font-weight: bold; font-style: italic;}
.titulo, .latinajo {font-style: italic;}
.escuchar {display: block; width: 2rem; height: 2rem; margin: 0.5rem auto; font-size: var(--tamano-normal); border: none; border-radius: 999px; color: var(--color-claro); background-color: var(--color-complementario); cursor: pointer;}

/***** Nav *****/
nav {position: fixed; top: 1rem; right: 3rem; max-width: min(90vw, 500px); padding: 0.5rem 1rem; z-index: 9999; font-size: var(--tamano-pequeno); background: color-mix(in srgb, var(--color-complementario) 85%, transparent); border-radius: 1rem;}
nav ul {list-style: none; padding-left: 1rem;}
nav ul ul {padding-left: 1rem;}
nav a {display: inline-block; max-width: 100%; text-decoration: none; font-weight: bold; font-style: normal; white-space: normal; word-break: break-word;}
nav a:hover {text-decoration: underline;}
nav summary {font-style: italic; cursor: pointer;}
nav summary::marker {font-weight: normal;}
#indice {display: block; width: 100%; font-size: 0.85em;}
.idioma {display: block; margin: 0; padding: 0; text-align: center;}
.banderita {padding-right: .4em;}
.idioma a {font-size: 0.7em; font-weight: normal; transition: transform .1s ease;}
.idioma a:hover {text-decoration: none; transform: scale(1.1);}

/***** Main *****/
main section {max-width: var(--ancho-escritorio); margin: 2.5rem auto 1rem auto;}
section h2 {text-align: center;}
section p {max-width: 66ch; margin: 0.5rem auto; line-height: var(--interlineado-ancho); text-align: justify; hyphens: auto; text-indent: 1rem; word-spacing: 0.1em;}
section p:first-of-type {margin-top: 1.5rem;}
section p:first-of-type::first-letter {font-family: var(--tipo-cabecera); font-size: var(--tamano-gigante); font-weight: bold; font-style: italic;}

audio {display: block; margin: 1rem auto;}

section figure {display: block; margin: 1rem auto;}
section figure img {display: block; width: 100%; height: auto; clip-path: inset(2px round 0.5rem 0.5rem 0 0);}
.vertical {max-width: 560px;}
.ilustracion img {mix-blend-mode: color-burn;}
section figure figcaption {width: 100%; margin: -2px 0 1rem 0; padding: 0.5rem; background-color: var(--color-adyacente2); color: var(--color-claro); font-size: var(--tamano-minusculo); line-height: var(--interlineado-estrecho); font-style: italic; border-radius: 0 0 0.5rem 0.5rem;}
.pie {display: block; margin-bottom: 0.25rem; text-align: center; font-weight: bold;}
.autor {display: block; text-align: right; margin-right: 3rem;}

/***** Footer *****/
.libro {margin: 2rem auto; text-align: center; font-size: var(--tamano-pequeno); filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .35));}
.libro img {display: inline-block;}
.disponible {font-size: .8em; font-style: italic; opacity: .75;}
.logos {margin: 2rem auto; display: flex; justify-content: center; align-items: center; gap: 1.5rem; isolation: isolate;}
.creditos {font-size: var(--tamano-minusculo);}

/***** Mapa *****/
#mi-mapa {width: 100%; max-width: 1000px; height: clamp(400px, 80dvh, 900px); margin: 1rem auto; font-size: 12px; border-radius: 1rem; overflow: hidden;}
.leaflet-container {font-size: 12px;}
.leaflet-popup-content a {pointer-events: auto;}
.leaflet-control-layers-list {margin: 0;}
.marcador {width: 32px; height: 32px; background: url('images/icono_parada.png') no-repeat center; background-size: contain; position: relative;}
.parada {display: block; text-align: center; line-height: 1.5em; font-size: 0.9em;}
.numero {position: absolute; top: -3px; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: bold; color: var(--color-complementario); pointer-events: none;}

/***** Polvo *****/
#polvo {position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen;}

@media (max-width: 1000px) {
	header {background-position: center 70%;}
	nav {top: auto; bottom: 5rem; right: 1rem; max-width: calc(100vw - 2rem); overflow-x: auto;}
}