/* ═══════════════════════════════════════════════════════════════════════
* base.css — lo que comparten TODAS las páginas de Tozal de Matías
*
* Colores, las dos tipografías, la escala de tamaños, la retícula de
* sección, los botones y el pie. Nada de aquí pertenece a una página
* concreta: si una regla solo la usa la portada, va en inicio.css.
*
* Para una página nueva basta con enlazar esta hoja y añadirle la suya:
*
*
*
*
* Da por hechas las dos familias de Google Fonts (Bodoni Moda y Manrope),
* que se piden desde el de cada página.
* ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
* SISTEMA VISUAL — notas de estilo de Tozal de Matías
*
* Tres decisiones mandan sobre todo lo demás:
*
* 1. AIRE. La jerarquía la ponen el tamaño, el espacio y la posición,
* no el grosor. Por eso casi no hay negritas en toda la hoja.
* 2. POCOS TAMAÑOS. Cinco: h2, h3, lead, body y label. El del hero
* desapareció con la frase de efecto de escritura; ahora ese papel
* lo hace el logotipo, que es una imagen.
* Están todos en --t-* y no se escribe ningún font-size suelto que
* no salga de ahí.
* 3. NADA DE NEGRO NI DE BLANCO PUROS. El logotipo es una tinta oliva
* sobre nada; la página tiene que sonar a lo mismo.
*
* Referencia mental: una publicación de arquitectura, no una web de
* turismo. De ahí la alineación a la izquierda por defecto (ver la regla
* de section) y el centrado reservado a dos momentos contados.
* ═══════════════════════════════════════════════════════════════════ */
:root {
/* ─── Papel y tinta ──────────────────────────────────────────────
* Los dos papeles se alternan entre secciones: la costura entre
* bloques la marca un salto mínimo de tono, no una línea. --hondo
* es para el pie y para lo que tiene que hundirse un punto. */
--papel: #F1EEE5;
--papel-claro: #F5F2E9;
--papel-hondo: #E7E2D3;
/* Cajas que se levantan sobre el papel: fichas, avisos, campos */
--superficie: #FAF8F2;
--tinta: #292A20; /* oliva-negro: el color del logotipo */
--tinta-suave: #55584A; /* texto secundario */
--sobre-foto: #F7F5EF; /* lo que va encima de una fotografía */
--linea: #DCD6C6;
--linea-fuerte: #C4BDA9;
/* El dorado vale para trazos, bordes y superficies teñidas, pero a
tamaño de texto sobre papel se queda en 3,2:1. Para texto está
--acento-texto, que llega a 5,4:1. */
--acento: #A67D33;
--acento-texto: #7A5A1E;
--acento-velo: rgba(166, 125, 51, 0.10);
/* ─── Tipografía ─────────────────────────────────────────────────
* Bodoni Moda es pariente tipográfico del logotipo, no una copia:
* el nombre "Tozal de Matías" NUNCA se compone con ella, para eso
* está el logotipo. Bodoni es para las frases, no para la marca. */
--tipo-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
--tipo-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--t-h2: clamp(1.8rem, 3.4vw, 2.7rem);
--t-h3: clamp(1.35rem, 1.9vw, 1.6rem);
--t-lead: clamp(1.1rem, 1.5vw, 1.3rem);
--t-body: 1.0625rem;
--t-label: 0.78rem;
/* Tracking de las etiquetas. Muy abierto a propósito. Ojo al subirlo
más: letter-spacing añade el espacio también DESPUÉS de la última
letra, así que cuanto mayor sea, más se descentra el texto dentro
de cualquier caja con padding simétrico (ver .fase-etiqueta). */
--tracking-label: 0.75em;
/* ─── Ritmo vertical ─────────────────────────────────────────────
* Un solo valor manda en TODAS las secciones. Si hay que apretar o
* soltar la página se toca aquí y en ningún sitio más.
* --seccion-y respiración entre secciones
* --bloque separación entre piezas dentro de una sección
* --aire-titulo hueco entre un titular y lo que viene debajo */
--seccion-y: clamp(104px, 11vw, 176px);
--seccion-x: 24px;
--bloque: clamp(28px, 3.2vw, 46px);
--aire-titulo: clamp(24px, 2.8vw, 40px);
/* ─── Retícula ───────────────────────────────────────────────────
* Una única columna de contenido centrada en la ventana, y dentro
* de ella todo alineado al mismo margen izquierdo. Se aplica como
* padding de la sección en vez de con un
envolvente: así el
* texto, el mapa, las fotos y las fichas comparten borde izquierdo
* sin añadir una capa de marcado a cada sección.
*
* --medida es el ancho máximo de una LÍNEA de texto (unos 62
* caracteres). Nada de prosa lo sobrepasa, aunque la columna sea
* más ancha. */
--columna: 1080px;
--medida: 62ch;
--pad-columna: max(var(--seccion-x), calc((100% - var(--columna)) / 2));
}
/* ─── Motivos de marca ───────────────────────────────────────────────
* SVG en línea (data URI): no son peticiones extra ni archivos que
* mantener, y al ser vectores valen igual en móvil que en 4K. Los dos
* salen del isotipo: la cordillera y el anillo que la rodea.
* Sobre papel van en oliva y no en dorado: el dorado a esta opacidad
* sobre un fondo claro no se ve, se ensucia.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* Dos cordilleras superpuestas, planas y sin degradado. Se ancla
abajo y se estira al ancho de la sección (preserveAspectRatio none). */
--motivo-cumbres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%235E6052' fill-opacity='.045' d='M0 200 L0 132 L96 96 L168 124 L268 52 L340 104 L432 72 L520 120 L616 64 L700 110 L800 44 L900 108 L1000 78 L1104 122 L1200 68 L1300 116 L1380 90 L1440 124 L1440 200 Z'/%3E%3Cpath fill='%235E6052' fill-opacity='.075' d='M0 200 L0 158 L110 120 L210 152 L330 104 L430 150 L560 116 L690 156 L820 110 L960 150 L1080 124 L1200 158 L1320 128 L1440 152 L1440 200 Z'/%3E%3C/svg%3E");
/* Silueta del isotipo para teñirla del dorado de marca (ver más abajo) */
--isotipo-alfa: url("data:image/png;base64,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");
/* Anillo graduado: dos círculos y una corona de 48 marcas hechas con
stroke-dasharray, que es lo que evita dibujar 48 trazos a mano. */
--motivo-anillo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23A67D33'%3E%3Ccircle cx='100' cy='100' r='94' stroke-width='.6' stroke-opacity='.34'/%3E%3Ccircle cx='100' cy='100' r='68' stroke-width='.5' stroke-opacity='.20'/%3E%3Ccircle cx='100' cy='100' r='84' stroke-width='6' stroke-opacity='.14' stroke-dasharray='1 9.9956'/%3E%3C/g%3E%3C/svg%3E");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* El tamaño de texto va en body y NUNCA en html: puesto en la raíz
redefine cuánto vale 1rem, y como toda la escala --t-* está en rem se
inflaba entera un 6% sin que se note dónde. */
html {
scroll-behavior: smooth;
background-color: var(--papel);
}
body {
font-family: var(--tipo-texto);
font-size: var(--t-body);
font-weight: 400;
line-height: 1.7;
color: var(--tinta);
background-color: var(--papel);
/* SIN -webkit-font-smoothing: antialiased. Adelgaza el trazo: sobre el
fondo oscuro de antes compensaba el engorde óptico del texto claro,
pero sobre papel se come los finos de la Bodoni, que ya son finos de
por sí. Se deja el suavizado por defecto del sistema. */
/* Bodoni Moda es variable y trae eje óptico (opsz 6..96). Con el valor
por defecto ('auto') el navegador escoge el corte según el tamaño, y
a partir de unos 30px se va al corte de DISPLAY: el más estrecho y
contrastado, dibujado para imprenta, donde un trazo fino se imprime
fino. En pantalla ese trazo cae por debajo del píxel y desaparecen
partes de la letra.
Con 'none' la fuente se queda en su corte de TEXTO a cualquier
tamaño: 20% más ancho, los finos más gruesos y el contraste menor.
Medido sobre "En qué punto estamos" a 43px: un 9% más de tinta.
Se hereda, así que esta única declaración cubre toda la página; a
Manrope, que no tiene eje óptico, no le afecta. */
font-optical-sizing: none;
}
/* ─── Los seis tamaños ───────────────────────────────────────────────
* Bodoni tiene un contraste de trazo altísimo: a cuerpo grande hay que
* cerrarle la interlínea y meterle tracking negativo o se deshilacha.
*
* Peso: 400 en lo grande (hero y h2), 500 en lo pequeño. No es una
* negrita disfrazada, es compensación óptica: cuanto menor es el cuerpo,
* más trazo hace falta para que la letra aguante. El grueso del arreglo
* de legibilidad lo hace el eje óptico (ver font-optical-sizing en body);
* el 500 solo remata los cuerpos pequeños, que son los que peor iban.
* ─────────────────────────────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--tipo-display);
font-weight: 400;
}
/* Todo lo que va en Bodoni por debajo del tamaño de h2 */
h3,
.firma p,
.footer-cta p,
.mirador-text p:first-of-type,
.hero-sub {
font-weight: 500;
}
h2 {
font-size: var(--t-h2);
line-height: 1.14;
letter-spacing: -0.012em;
margin-bottom: var(--aire-titulo);
}
h3 {
font-size: var(--t-h3);
line-height: 1.3;
}
/* Entradilla: un escalón por encima del cuerpo, nunca en negrita */
.seccion-intro {
font-size: var(--t-lead);
line-height: 1.6;
color: var(--tinta-suave);
max-width: var(--medida);
}
/* Etiqueta: el ÚNICO sitio donde se permiten mayúsculas y peso 600.
Navegación, botones, ubicaciones y datos técnicos. Nunca un titular. */
.hero-marca,
.hero-apertura,
.mapa-nota,
.progreso-texto,
.fase-etiqueta,
.pioneros .kicker,
.cielo-marco figcaption,
.mapa-rotulo,
.dilema-opcion h3 {
font-family: var(--tipo-texto);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
line-height: 1.5;
}
/* Muy poco bold: se apoya en el color, no en el grosor */
strong, b {
font-weight: 500;
}
a {
color: var(--acento-texto);
}
/* ─── La retícula de sección ─────────────────────────────────────────
* Alineación a la izquierda por defecto. Una web entera centrada pierde
* el carácter arquitectónico del logotipo; el centrado se pide a mano
* (.es-manifiesto) y solo aparece dos veces en toda la página.
* ─────────────────────────────────────────────────────────────────── */
section {
padding: var(--seccion-y) var(--pad-columna);
text-align: left;
}
/* Ninguna línea de prosa pasa de la medida, aunque la columna sea más
ancha. margin-left: 0 y no auto: el texto arranca en el mismo borde
izquierdo que las fotos y las fichas. */
section > h2,
section > p,
section > figure figcaption {
max-width: var(--medida);
margin-left: 0;
}
.seccion-intro {
margin-bottom: var(--bloque) !important;
}
/* Los dos momentos centrados de toda la página: la frase manifiesto que
abre el argumento y la rúbrica que lo cierra. */
.es-manifiesto {
text-align: center;
}
.es-manifiesto > h2,
.es-manifiesto > p {
margin-left: auto;
margin-right: auto;
}
/* ─── Botones ────────────────────────────────────────────────────────
* Manrope 600 en mayúsculas con tracking amplio, y esquina viva en vez
* de píldora: la píldora suaviza justo el carácter que da el logotipo.
* La flecha va por CSS para no repetirla en cada enlace del HTML.
* ─────────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.7em;
padding: 17px calc(30px - var(--tracking-label)) 17px 30px;
font-family: var(--tipo-texto);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
line-height: 1;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease,
border-color 0.25s ease;
}
.btn::after {
content: "→";
font-size: 1.05em;
letter-spacing: normal; /* si no, el tracking del botón lo empuja fuera */
transition: transform 0.25s ease;
}
.btn:hover::after {
transform: translateX(3px);
}
/* Tinta maciza y no dorado: el dorado a este tamaño de letra no llega al
contraste mínimo con texto claro encima, y el logotipo tampoco tiene
una gota de dorado. */
.btn-primario {
background-color: var(--tinta);
color: var(--sobre-foto);
}
.btn-primario:hover {
background-color: #3a3c2e;
}
.btn-secundario {
background-color: transparent;
color: var(--tinta);
border-color: var(--linea-fuerte);
}
.btn-secundario:hover {
border-color: var(--tinta);
background-color: rgba(41, 42, 32, 0.04);
}
:focus-visible {
outline: 2px solid var(--acento-texto);
outline-offset: 3px;
}
/* ═══ PIE ════════════════════════════════════════════════════════════ */
footer {
background: var(--papel-hondo);
padding: var(--seccion-y) var(--pad-columna) calc(var(--seccion-y) / 2);
text-align: center;
border-top: 1px solid var(--linea-fuerte);
}
footer p {
color: var(--tinta-suave);
}
.footer-cta {
margin-bottom: var(--bloque);
}
.footer-cta p {
font-family: var(--tipo-display);
font-size: var(--t-h3);
color: var(--tinta);
margin: 0 auto var(--aire-titulo);
max-width: 24ch;
}
.social-icons a {
color: var(--tinta);
margin: 0 15px;
font-size: 1.6rem;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: var(--acento-texto);
}
.footer-rights {
/* Hairline por encima del copyright: cierra el pie sin cargarlo */
max-width: 760px;
margin: var(--bloque) auto 0;
padding-top: var(--bloque);
border-top: 1px solid var(--linea-fuerte);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--tinta-suave);
font-size: 0.85rem;
}
/* Aquí el logotipo va en su tinta original: el pie es papel, no foto */
.footer-logo {
width: 190px;
height: auto;
}
/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}