/* ==========================================================================
sitio.css - Portafolio de Laura Naroa.
TODOS los valores de esta hoja estan MEDIDOS del sitio original con la
auditoria (estilos computados en el navegador, viewport de 1440 px), no
estimados a ojo desde una captura. La procedencia de cada uno va anotada.
Las tres reglas que ordenan el sistema, deducidas de las medidas:
1. INTERLINEADO 110 % en casi todo. Solo hay tres excepciones:
el menu al 145 %, y los epigrafes y las listas de la portada al 95 %.
2. ESPACIADO DE CARACTERES por peso de letra, no por elemento:
DM Mono Light -14 % (-0.14em)
DM Mono Regular/Medium -0,5 % (-0.005em)
Akshar -3 % (-0.03em)
marca, pie y paginacion normal
3. Los FILETES miden 1279 px sobre 1440, o sea el 88,82 % del ancho,
centrados. En el original son ![]()
de 1 px de alto; aqui son CSS.
========================================================================== */
/* -------------------------------------------------- tipografias propias
Autoalojadas: servirlas desde el CDN de Google transmite la IP de cada
visitante a un tercero sin base juridica. 168 KB en total. */
@font-face { font-family: 'Akshar'; font-style: normal; font-weight: 300 600;
font-display: swap; src: url('../fonts/akhar_Yq6V-LyHWTfz9rGCpR5lhOc.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: 'Akshar'; font-style: normal; font-weight: 300 600;
font-display: swap; src: url('../fonts/akhar_Yq6V-LyHWTfz9rGCpB5l.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300;
font-display: swap; src: url('../fonts/dmmono_aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400;
font-display: swap; src: url('../fonts/dmmono_aFTU7PB1QTsUX8KYthqQBA.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500;
font-display: swap; src: url('../fonts/dmmono_aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2') format('woff2'); }
/* -------------------------------------------------- fichas */
:root {
/* Medido: texto #928a8a (71 apariciones en la portada), fondo #000000. */
--negro: #000000;
--gris: #928a8a;
--blanco: #ffffff;
--filete: #3a3535;
--mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--display: 'Akshar', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
--margen: 30px; /* sangrado del contenido */
--ancho-filete: 88.82%; /* medido: 1279 de 1440 */
--inter: 1.1; /* medido: 110 % en casi todo */
--esp-light: -0.14em; /* medido: DM Mono Light */
--esp-mono: -0.005em; /* medido: DM Mono Regular y Medium */
--esp-display: -0.03em; /* medido: Akshar */
--hueco: clamp(2rem, 4vw, 3.75rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--negro);
color: var(--gris);
font-family: var(--mono);
font-size: 16px; /* medido: cuerpo de texto 16px */
line-height: var(--inter);
letter-spacing: var(--esp-mono);
-webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
/* Criterio 2.4.1 de las WCAG. El original no lo tenia. */
.saltar {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--blanco); color: var(--negro);
padding: 0.75rem 1.25rem; font-size: 15px; text-decoration: none;
}
.saltar:focus { left: var(--margen); top: 0.5rem; }
.oculto {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* -------------------------------------------------- filete
Medido: 1279x1 px sobre un viewport de 1440, centrado. */
.cabecera__filete {
height: 1px; background: var(--filete);
width: var(--ancho-filete); margin-inline: auto;
}
/* -------------------------------------------------- cabecera */
.cabecera { padding-top: 1.4rem; }
.cabecera__fila {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; padding: 0 var(--margen) 1.05rem;
}
/* Medido: DM Mono Medium 15px, interlineado 16,5px, espaciado NORMAL.
El aire entre LAURA y NAROA lo da el doble espacio del texto, no el CSS. */
.marca {
font-family: var(--mono); font-weight: 500; font-size: 15px;
line-height: 1.1; letter-spacing: normal;
text-decoration: none; white-space: pre; text-transform: uppercase;
}
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.7vw, 2.7rem); }
.menu ul {
display: flex; align-items: center; gap: clamp(1rem, 2.7vw, 2.7rem);
margin: 0; padding: 0; list-style: none;
}
/* Medido: DM Mono Medium 15px, interlineado 21,75px = 145 %. */
.menu a {
font-family: var(--mono); font-weight: 500; font-size: 15px;
line-height: 1.45; letter-spacing: var(--esp-mono);
text-decoration: underline; text-underline-offset: 4px;
text-decoration-thickness: 1px; white-space: nowrap; text-transform: uppercase;
}
.menu a:hover, .menu a:focus-visible { color: var(--blanco); }
.menu a[aria-current="page"] { color: var(--blanco); }
/* Medido: 35x35. */
.bandera { width: 35px; height: 35px; flex: 0 0 auto; }
/* -------------------------------------------------- marcador [01]
Medido: DM Mono Medium 15px. El corchete lleva -14 % y el numero -9,6 %;
se unifica en -0,096em, que es el valor del par visible. */
.marcador {
font-family: var(--mono); font-weight: 500; font-size: 15px;
line-height: 1.1; letter-spacing: -0.096em;
padding: 0.75rem var(--margen) 0; margin: 0; text-transform: uppercase;
}
/* -------------------------------------------------- titulares Akshar
Medido: interlineado 79 % y espaciado -3 % en los tres tamanos.
portada y archivo 200px / 158px / -6px
contacto 145px / 114,55px / -4,35px
pagina de coleccion 100px / 79px / -3px */
.titular, .titular-pagina {
font-family: var(--display); font-weight: 400; color: var(--gris);
text-transform: uppercase; letter-spacing: var(--esp-display);
line-height: 0.79; margin: 0;
}
.titular span { display: block; }
.titular-pagina {
font-size: clamp(2rem, 6.95vw, 100px);
padding: 0.5rem var(--margen) 0.6rem;
/* Laura pide centrarlos y mantenerlos siempre centrados. El original que
medi los tiene a la izquierda: es un cambio deliberado suyo. */
text-align: center;
}
/* Medido: titulo -> marcador -> panel, unos 48 px de aire en cada salto. */
.marcador--coleccion { padding: 3rem var(--margen) 1.2rem; } /* medido: 48 / 19 px */
/* -------------------------------------------------- portada */
.hero {
display: grid;
/* Medido: la foto se muestra a 629 px sobre 1440, el 43,7 %. */
grid-template-columns: 1fr 43.7%;
gap: var(--hueco); align-items: start;
padding: 0.4rem var(--margen) clamp(1.2rem, 2.6vw, 2rem);
}
/* Medido: Akshar Regular 200px / 158px (79 %) / -6px (-3 %). */
.hero__nombre { font-size: clamp(3.2rem, 13.89vw, 200px); }
.hero__pie { margin-top: clamp(1.5rem, 3.4vw, 2.9rem); max-width: 25rem; }
/* Medido: DM Mono Regular 18px / 19,8px. */
.rotulo {
font-family: var(--mono); font-weight: 400; font-size: 18px;
line-height: 1.1; letter-spacing: var(--esp-mono);
text-transform: uppercase; margin: 0 0 1.4rem;
}
/* Medido: DM Mono Regular 16px / 17,6px. El corte tras "concept," va con
en el HTML para que caiga siempre ahi. */
.hero__lema { margin: 0; font-size: 16px; text-transform: uppercase; }
/* Medido: proporcion mostrada 1,50. */
.hero__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* -------------------------------------------------- dos columnas */
.duo {
/* Medido en el original: texto 515 px, hueco 255, lamina 545, margenes 50 y 75.
En porcentaje de la caja (1315): 39,2 % | 19,4 % | 41,4 %. */
display: grid; grid-template-columns: 39.2% 41.4%; justify-content: space-between;
align-items: center; /* Laura: las imagenes centradas con el texto */
padding: clamp(1rem, 1.75vw, 1.55rem) 5.2vw clamp(1.4rem, 2.2vw, 2rem) 3.47vw; /* medido: 25 / 32 px */
}
/* Ficha a la izquierda: la imagen (545) va primero y el texto (515) despues. */
.duo--texto-izq { grid-template-columns: 41.4% 39.2%; padding-top: clamp(3rem, 6.5vw, 5.8rem); } /* medido: 120 px entre la lamina y la ficha */
.duo--texto-izq > .duo__texto { order: 1; }
/* Medido: los parrafos de coleccion van en DM Mono Regular 18px / 19,8px
y justificados; los de la ficha tecnica en 16px / 17,6px. */
.duo__texto p:not(.especificaciones):not(.duo__epigrafe) {
margin: 0 0 1.2rem; font-size: 18px; text-align: justify; hyphens: auto;
}
.duo__texto p:last-child { margin-bottom: 0; }
.duo--texto-izq .duo__texto p:not(.especificaciones):not(.duo__epigrafe) { font-size: 16px; }
.duo__epigrafe { margin: 0 0 1.35rem; text-align: left !important; }
/* Medido: nombre de coleccion DM Mono Medium 20px / 22px. */
.duo__epigrafe strong {
display: block; font-family: var(--mono); font-weight: 500; font-size: 20px;
line-height: 1.1; letter-spacing: var(--esp-mono);
text-transform: uppercase; color: var(--gris);
}
/* Medido: subtitulo DM Mono Medium 13px / 14,3px. */
.duo__epigrafe span {
display: block; font-family: var(--mono); font-weight: 500; font-size: 13px;
line-height: 1.1; letter-spacing: var(--esp-mono); text-transform: uppercase;
}
/* Medido: DM Mono Regular 10px / 11px, espaciado -11,5 %. */
.especificaciones {
margin: 1.4rem 0 0; font-size: 10px; line-height: 1.1;
letter-spacing: -0.115em; text-transform: uppercase; text-align: left !important;
}
/* Medido: DM Mono Medium 15px / 16,5px. */
.enlace-ficha {
display: inline-block; margin-top: 1.9rem;
font-family: var(--mono); font-weight: 400; font-size: 17px;
line-height: 1.1; letter-spacing: var(--esp-mono);
text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px;
}
.enlace-ficha:hover, .enlace-ficha:focus-visible { color: var(--blanco); }
.enlace-ficha small { font-weight: 400; font-size: 11px; letter-spacing: var(--esp-mono); text-transform: none; text-decoration: none; display: inline-block; margin-left: 0.4rem; }
/* Las laminas ya son 1,41 (A4 horizontal) de origen, asi que NO se les
fuerza proporcion: forzarla recortaba el retrato vertical del CV, que
vive en el mismo tipo de bloque. */
/* -------------------------------------------------- destacados de portada */
.destacados {
display: grid; grid-template-columns: 1fr 43.7%; gap: var(--hueco);
padding: 0 var(--margen) clamp(1.2rem, 2.4vw, 1.9rem); align-items: start;
}
.destacados .duo__texto p { font-size: 16px; text-align: left; }
/* Medido: las dos imagenes se muestran a 232x232, CUADRADAS, el 16,1 %. */
.destacados__lista { display: grid; grid-template-columns: 232fr 148fr 232fr; gap: 1.2rem; align-items: start; }
.destacados__lista > figure img { aspect-ratio: 1 / 1; object-fit: cover; }
.proyecto { text-align: right; }
/* Medido: II ACTO en DM Mono Medium 18px, ACQUA VITAE en 16px. Se unifica
en 18px, que es el del primero y el de mayor jerarquia. */
.proyecto h3 {
font-family: var(--mono); font-weight: 500; font-size: 18px;
line-height: 1.1; letter-spacing: var(--esp-mono);
text-transform: uppercase; color: var(--gris); margin: 0;
}
/* Medido: DM Mono Regular 14px. */
.proyecto p { margin: 0.2rem 0 0.7rem; font-size: 14px; }
/* Medido: DM Mono Regular 10px / 11px. */
.proyecto a {
display: inline-block; border: 1px solid var(--gris); padding: 0.3rem 0.55rem;
font-size: 10px; line-height: 1.1; letter-spacing: var(--esp-mono);
text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase;
}
.proyecto a:hover, .proyecto a:focus-visible { color: var(--blanco); border-color: var(--blanco); }
/* -------------------------------------------------- cifras
Medido: numero Akshar Light 60px / 66px, "+" Akshar Light 34px,
rotulo DM Mono Light 19px / 20,9px con espaciado -14 %. */
.cifras {
display: grid; grid-template-columns: repeat(5, 1fr);
margin: 0; padding: clamp(0.8rem, 1.6vw, 1.3rem) var(--margen);
}
.cifras > div { text-align: center; padding-inline: 1rem; border-left: 1px solid var(--filete); }
.cifras > div:first-child { border-left: 0; }
/* Ojo: las cifras NO llevan el -3 % de los titulares. Medido -0,21px sobre
60px, o sea -0,35 %. Generalizar la regla de Akshar aqui era un error. */
.cifras dd {
font-family: var(--display); font-weight: 300; color: var(--gris);
font-size: clamp(2.1rem, 4.2vw, 60px); line-height: 1.1;
letter-spacing: -0.0035em; margin: 0;
}
.cifras dt {
font-family: var(--mono); font-weight: 300; font-size: 19px;
line-height: 1.1; letter-spacing: var(--esp-light);
text-transform: uppercase; margin-top: 0.25rem;
}
/* -------------------------------------------------- formacion
Medido: la imagen se muestra a 285x190, el 19,8 %, proporcion 1,50.
Los epigrafes van en DM Mono Medium 16px con interlineado 95 %, y las
listas en DM Mono Regular 14px, tambien al 95 %. */
.formacion {
display: grid; grid-template-columns: 19.8% 1fr 1fr 1fr;
gap: var(--hueco);
padding: clamp(0.8rem, 1.6vw, 1.3rem) var(--margen) clamp(1.2rem, 2.4vw, 1.7rem);
align-items: start;
}
.formacion > figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.formacion > div { border-left: 1px solid var(--filete); padding-left: var(--hueco); }
.formacion > div:first-of-type { border-left: 0; padding-left: 0; }
.formacion h3 {
font-family: var(--mono); font-weight: 500; font-size: 16px;
line-height: 0.95; letter-spacing: var(--esp-mono);
text-transform: uppercase; color: var(--gris); margin: 0 0 1.2rem;
}
.formacion p { margin: 0 0 1rem; font-size: 14px; line-height: 0.95; }
.formacion p strong { font-weight: 400; text-transform: uppercase; display: block; }
ul.formacion, .formacion ul { margin: 0; padding: 0; list-style: none; }
.formacion li { font-size: 14px; line-height: 0.95; text-transform: uppercase; margin-bottom: 0.55rem; }
/* ==========================================================================
CV. Las tres correcciones que pidio Laura.
========================================================================== */
/* 1. Su nombre salia pequeno por una regla incompleta: .titular define
familia, color e interlineado pero NO font-size, asi que ese h1 caia
al 2em por omision del navegador. No era un ajuste estetico. */
.duo--cv .titular { font-size: clamp(2.6rem, 8.3vw, 120px); }
/* 2. Jerarquia de Experience: la empresa al tamano que tenian los puestos,
y los puestos por debajo, para que se lea el orden. */
.duo--cv .duo__epigrafe strong { font-size: 20px; }
.duo--cv .puesto strong { font-size: 15px; }
/* 3. Skills mas grandes: estaban a 14 px, el mismo cuerpo que las fechas. */
.duo--cv ul.formacion li { font-size: 17px; line-height: 1.15; margin-bottom: 0.4rem; }
/* -------------------------------------------------- panel a sangre
Medido: se muestra a 1440x369, el 100 % del ancho, proporcion 3,90.
Es la unica pieza que rompe la caja. */
.panel { margin: 0; }
.panel img { width: 100%; aspect-ratio: 3.9 / 1; object-fit: cover; }
.duo--cv { grid-template-columns: 1fr 1fr; justify-content: normal; gap: var(--hueco); padding-inline: var(--margen); }
/* -------------------------------------------------- paginas de declaracion
Archivo y contacto: partido 50/50 con filete vertical central.
Medido: alto de pagina 1080 px en las dos. */
/* Medido: la pagina entera mide 1080 px con una ventana de 1000. Restando
cabecera y pie, el bloque partido ocupa 983 px, el 98 % de la ventana. */
.partido {
display: grid; grid-template-columns: 1fr 1fr;
min-height: 98vh; align-items: center;
padding-inline: var(--margen);
}
.partido__izq { padding-right: var(--hueco); }
.partido__der {
padding-left: clamp(2.5rem, 6vw, 5rem);
border-left: 1px solid var(--filete); align-self: stretch;
display: flex; flex-direction: column; justify-content: center;
}
/* Medido: FASHION ARCHIVE a 200px, INTERESTED? a 145px. */
.partido__titulo { font-size: clamp(2.6rem, 13.89vw, 200px); }
.partido--contacto .partido__titulo { font-size: clamp(2.4rem, 10.07vw, 145px); }
.partido__subtitulo {
font-family: var(--display); font-weight: 400; color: var(--gris);
font-size: clamp(1.5rem, 4.4vw, 3.3rem); line-height: 0.79;
text-transform: uppercase; letter-spacing: var(--esp-display); margin: 0.4rem 0 0;
}
/* Indice del archivo y datos de contacto.
Medido en las dos paginas: DM Mono LIGHT 30px / 33px, espaciado -14 %.
No es Akshar, que era mi error. */
.indice { margin: 0; padding: 0; list-style: none; }
.indice li { margin-bottom: 1.55rem; }
.indice a, .datos dt, .datos dd {
font-family: var(--mono); font-weight: 300;
font-size: clamp(1.15rem, 2.1vw, 30px); line-height: 1.1;
letter-spacing: var(--esp-light); text-transform: uppercase;
}
.indice a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.indice a:hover, .indice a:focus-visible { color: var(--blanco); }
.datos { margin: 0; }
.datos dd { margin: 0 0 1.9rem; text-transform: none; }
.datos dd:last-child { margin-bottom: 0; }
.datos a { text-decoration: none; }
.datos a:hover, .datos a:focus-visible { color: var(--blanco); text-decoration: underline; text-underline-offset: 5px; }
/* -------------------------------------------------- paginacion
Medido: tres botones de 150x43 px, el 10,4 % del ancho cada uno, con el
rotulo en DM Mono Medium 20,6px y espaciado normal. */
.paginacion {
display: grid; grid-template-columns: repeat(3, 1fr);
justify-items: center; gap: 1rem;
padding: clamp(1.6rem, 3.5vw, 2.6rem) var(--margen);
}
.paginacion a {
display: flex; align-items: center; justify-content: center;
width: 150px; height: 43px;
background: var(--gris); color: var(--negro); border-radius: 10px;
font-family: var(--mono); font-weight: 500; font-size: 20px;
line-height: 1.1; letter-spacing: normal; text-transform: uppercase;
text-decoration: underline; text-underline-offset: 4px;
}
.paginacion a:hover, .paginacion a:focus-visible { background: var(--blanco); }
.paginacion span { visibility: hidden; }
/* -------------------------------------------------- pie
Medido: DM Mono Medium 12px / 13,2px, espaciado normal. Uno solo:
el original emitia entre cinco y diez elementos footer por pagina. */
.pie { padding: 0 0 1rem; }
.pie__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--margen) 0; }
.pie p {
margin: 0; font-family: var(--mono); font-weight: 500; font-size: 12px;
line-height: 1.1; letter-spacing: normal; text-transform: uppercase;
}
/* -------------------------------------------------- imagen que falta
Marcador visible, a peticion de Laura. Ocupa el hueco con la proporcion
de lo que deberia haber, para que la maquetacion no se mueva al poner
la imagen definitiva. */
.falta {
display: grid; place-items: center; text-align: center;
aspect-ratio: 1.41 / 1; border: 1px dashed var(--gris); background: #0a0909;
padding: 1rem;
}
.falta.panel { aspect-ratio: 3.9 / 1; border-inline: 0; }
.falta p { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.3; letter-spacing: var(--esp-mono); }
.falta strong { display: block; font-weight: 500; text-transform: uppercase; color: var(--blanco); margin-bottom: 0.35rem; }
.falta span { display: block; font-size: 11px; opacity: 0.8; }
/* -------------------------------------------------- filete a todo el ancho
Medido: cada bloque de coleccion cierra con una linea de 1439 px, de borde
a borde. Womenswear tiene 7 lineas y 7 colecciones; accessories 5 y 5. */
.filete-completo { height: 1px; background: var(--filete); width: 100%; }
/* MEDIDO: el cuerpo del texto NO es igual en todas las paginas del original.
Es 16px en el 100 % de los parrafos de eco y de print, 18px en el 100 % de
acqua-vitae, y esta MEZCLADO (16 y 18) en womenswear y accessories. Solo se
corrige donde la medida es unanime; donde el original se contradice, se
respeta el valor por omision y queda anotado para decidirlo con Laura. */
.cuerpo-16 .duo__texto p:not(.especificaciones):not(.duo__epigrafe) { font-size: 16px; }
/* -------------------------------------------------- piezas de las plantillas unicas */
.duo--ancho { grid-template-columns: 1fr; }
.duo--ancho .duo__texto p:not(.especificaciones):not(.duo__epigrafe) { font-size: 16px; }
.duo--dosimg { padding-top: clamp(1rem, 1.75vw, 1.55rem); }
.duo__texto p.corta { text-align: left; margin-bottom: 0.4rem; }
.pie-foto { margin: 0.45rem 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: var(--esp-mono); text-transform: uppercase; }
.pie-foto--der { text-align: right; }
/* Mosaico de fotografias: 4 columnas, las grandes ocupan dos. Aproximacion
regular a una retirula irregular del original; a refinar con Laura. */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14vw; gap: 0.9rem; padding: clamp(1.4rem, 2.8vw, 2.3rem) var(--margen); }
.mosaico > div { min-height: 0; }
.mosaico .grande { grid-column: span 2; grid-row: span 2; }
.mosaico figure, .mosaico picture { height: 100%; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico .falta { height: 100%; aspect-ratio: auto; }
.cita { margin: 0; display: grid; place-items: center; padding: 1rem 1.2rem; border: 1px solid var(--filete); }
.cita p { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.35; text-align: center; letter-spacing: var(--esp-mono); }
/* Acqua Vitae, MEDIDO: 801x534 las grandes, 409x273 las pequenas; dos
pequenas apiladas igualan una grande. Columnas 801:409, filas de 267 px. */
.mosaico--acqua { grid-template-columns: 801fr 409fr; grid-auto-rows: 18.5vw; }
/* II Acto: fotografias verticales de 438 a 1169 px de alto. Filas mas altas
y cada foto ocupa dos; la grande, dos columnas y tres filas. */
.mosaico--iiacto { grid-auto-rows: 24vw; }
.mosaico--iiacto > div { grid-row: span 2; }
.mosaico--iiacto .grande { grid-column: span 2; grid-row: span 3; }
.mosaico--iiacto .cita { grid-row: span 1; }
@media (max-width: 860px) { .mosaico--acqua { grid-template-columns: 1fr 1fr; grid-auto-rows: 30vw; } .mosaico--acqua > div { grid-column: auto !important; grid-row: auto !important; } .mosaico--iiacto { grid-auto-rows: 40vw; } }
@media (max-width: 860px) { .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; } .duo--dosimg { grid-template-columns: 1fr; } }
/* -------------------------------------------------- figuras */
figure { margin: 0; }
figcaption { margin-top: 0.55rem; font-size: 11px; letter-spacing: var(--esp-mono); text-transform: uppercase; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--hueco); }
.recorte img { width: 100%; object-fit: cover; }
/* ==========================================================================
Puntos de ruptura. El original tenia uno solo, en 600 px, y ni los
filetes ni el panel se adaptaban: en movil seguian midiendo 1279 y 1280
px, desbordando la pantalla. Eso si se corrige aqui.
========================================================================== */
@media (max-width: 1100px) {
.formacion { grid-template-columns: 1fr 1fr; }
.formacion > figure { grid-column: 1 / -1; max-width: 20rem; }
.formacion > div:nth-of-type(odd) { border-left: 0; padding-left: 0; }
.cifras { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; }
.cifras > div:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 860px) {
:root { --margen: 22px; --ancho-filete: 92%; }
.hero, .destacados { grid-template-columns: 1fr; }
.hero__foto { order: -1; }
.duo { grid-template-columns: 1fr; }
.duo--texto-izq > .duo__texto { order: 0; }
.partido { grid-template-columns: 1fr; min-height: 0; padding-block: clamp(2rem, 7vw, 3.5rem); row-gap: 2.2rem; }
.partido__izq { padding-right: 0; }
.partido__der {
padding-left: 0; border-left: 0;
border-top: 1px solid var(--filete); padding-top: 2.2rem;
}
}
@media (max-width: 600px) {
.cabecera__fila { flex-wrap: wrap; row-gap: 0.7rem; }
.menu { width: 100%; justify-content: space-between; }
.menu ul { gap: 0.9rem; flex-wrap: wrap; }
.cifras { grid-template-columns: repeat(2, 1fr); }
.cifras > div { border-left: 0; }
.cifras > div:nth-child(2n) { border-left: 1px solid var(--filete); }
.formacion { grid-template-columns: 1fr; }
.formacion > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--filete); padding-top: 1.4rem; }
.destacados__lista { grid-template-columns: 1fr; }
.proyecto { text-align: left; }
.paginacion { grid-template-columns: 1fr; }
.paginacion a { width: 100%; }
.duo__texto p { text-align: left; }
/* El panel es 3,9:1: a 390 px de ancho quedaria en una banda de 100 px,
asi que se desplaza a lo ancho en lugar de aplastarse. */
.panel { overflow-x: auto; overscroll-behavior-x: contain; }
.panel img { width: auto; height: 38vh; max-width: none; aspect-ratio: auto; }
}
@media print {
.cabecera, .paginacion, .saltar { display: none; }
body { background: #fff; color: #000; }
.titular, .titular-pagina, .partido__titulo, .partido__subtitulo, .cifras dd { color: #000; }
}