/* ==========================================================================
Terrella Arquitectura — hoja única, escrita a mano.
Sin framework, sin build. Orden: fuentes, tokens, base, layout, componentes.
========================================================================== */
/* --- Fuentes -------------------------------------------------------------
Sansation (Bernd Montag, 2011), auto-hospedada. Los .woff2 salen de Google
Fonts vía tools/fetch-fonts.js; la OFL viaja con ellos en assets/fonts/.
Auto-hospedada y no a fonts.googleapis.com para no abrir el CSP ni
meter dos conexiones externas antes de pintar la primera letra. Ver README.
La familia tiene TRES pesos y no más: 300 / 400 / 700. No hay 500 ni 600.
El unicode-range no es adorno: parte la descarga por subset, así que una
página en español baja `latin` y nada más. Las cursivas se declaran aunque
el sitio no tenga ninguna — el navegador no descarga lo que no usa.
------------------------------------------------------------------------ */
/* latin */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/sansation-300-normal-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/sansation-300-normal-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/sansation-400-normal-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/sansation-400-normal-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/sansation-700-normal-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/sansation-700-normal-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/sansation-300-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/sansation-300-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/sansation-400-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/sansation-400-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/sansation-700-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Sansation";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/sansation-700-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Tokens --------------------------------------------------------------
La paleta sale del SVG de marca. Los ratios de contraste están medidos
(WCAG 2.1), no estimados, y mandan sobre el gusto:
oliva #9ca12a sobre crema 2.64:1 -> NO puede llevar texto ni bordes
mostaza #d0c527 sobre crema 1.70:1 -> invisible en claro
gris #3b3a3c sobre crema 10.74:1 -> el único que lee bien en claro
mostaza #d0c527 sobre gris 6.30:1 -> sí lee, sobre oscuro
oliva #9ca12a sobre gris 4.06:1 -> solo texto grande
De ahí la regla de la casa: el verde y el mostaza son RELLENO y ADORNO.
Cuando el oliva tiene que *decir* algo sobre fondo claro se usa
--oliva-texto (#6d711d, 4.95:1), que es el mismo tono oscurecido al 70%
hasta pasar AA. Ver tools/ y el README.
------------------------------------------------------------------------ */
:root {
--crema: #faf9f5;
--crema-hundida: #f2f0e9;
--gris: #3b3a3c;
--gris-suave: #6b6a6d;
--oliva: #9ca12a;
--oliva-texto: #6d711d;
--mostaza: #d0c527;
--blanco: #fff;
--borde: #e3e0d6;
--sombra: 0 1px 2px rgb(59 58 60 / 0.04), 0 8px 24px -12px rgb(59 58 60 / 0.18);
--sombra-alta: 0 2px 4px rgb(59 58 60 / 0.06), 0 24px 48px -20px rgb(59 58 60 / 0.28);
/* La pila del sistema se queda detrás: es lo que se ve durante el swap y si
el .woff2 no llega. Sansation es una humanista de ancho normal, así que
degrada sin reflow escandaloso. */
--fuente: "Sansation", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Ritmo vertical: una sola escala, para que el aire sea deliberado. */
--e1: 0.5rem;
--e2: 1rem;
--e3: 1.5rem;
--e4: 2.5rem;
--e5: 4rem;
--e6: 6rem;
--e7: 9rem;
--ancho: 1180px;
--medida: 62ch; /* largo de línea legible */
--radio: 3px;
--transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Reset y base -------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem; /* que el header fijo no tape el ancla */
}
@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;
}
}
body {
margin: 0;
background: var(--crema);
color: var(--gris);
font-family: var(--fuente);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
margin: 0;
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 700;
text-wrap: balance;
}
h1 {
font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem);
}
h2 {
font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
}
h3 {
font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
letter-spacing: -0.01em;
}
p {
margin: 0 0 var(--e2);
max-width: var(--medida);
text-wrap: pretty;
}
img,
svg,
picture {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
}
/* Foco visible siempre. El oliva no llega ni a 3:1 sobre claro, así que el
anillo es gris; se ve, y no depende del color de la marca para leerse. */
:focus-visible {
outline: 2px solid var(--gris);
outline-offset: 3px;
border-radius: 2px;
}
.salta-al-contenido {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: var(--e2) var(--e3);
background: var(--gris);
color: var(--blanco);
text-decoration: none;
}
.salta-al-contenido:focus {
left: var(--e2);
top: var(--e2);
}
.visualmente-oculto {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --- Layout -------------------------------------------------------------- */
.contenedor {
width: 100%;
max-width: var(--ancho);
margin-inline: auto;
padding-inline: var(--e3);
}
.seccion {
padding-block: clamp(var(--e5), 8vw, var(--e7));
}
.seccion--oscura {
background: var(--gris);
color: var(--crema);
position: relative;
overflow: hidden;
}
.seccion--hundida {
background: var(--crema-hundida);
}
/* Para encadenar dos secciones sin que sumen su aire vertical. */
.seccion--sin-tope {
padding-top: 0;
}
.seccion__intro {
margin-bottom: var(--e5);
}
/* Los h1-h3 no llevan margen inferior (lo pone quien los usa), así que el aire
entre el título y su párrafo se pone aquí y no en la escala tipográfica. */
.seccion__intro > h2 + p {
margin-top: var(--e2);
}
/* Bajada de sección: UN párrafo bajo el h2, más corto de medida que el cuerpo.
No todas las secciones la llevan — el brief pide que el hueco también
componga. */
.seccion__entrada {
max-width: 52ch;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
color: var(--gris-suave);
}
.seccion--oscura .seccion__entrada {
color: rgb(250 249 245 / 0.72); /* 6.3:1 sobre el gris */
}
.seccion__etiqueta {
display: flex;
align-items: center;
gap: var(--e2);
margin: 0 0 var(--e2);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--oliva-texto);
}
.seccion__etiqueta::before {
content: "";
width: 1.75rem;
height: 2px;
background: var(--oliva);
flex: none;
}
.seccion--oscura .seccion__etiqueta {
color: var(--mostaza); /* 6.30:1 sobre el gris: aquí sí lee */
}
.seccion--oscura .seccion__etiqueta::before {
background: var(--mostaza);
}
/* --- Header -------------------------------------------------------------- */
.encabezado {
position: sticky;
top: 0;
z-index: 50;
background: rgb(250 249 245 / 0.88);
backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.encabezado[data-desplazado="si"] {
border-bottom-color: var(--borde);
box-shadow: var(--sombra);
}
.encabezado__fila {
display: flex;
align-items: center;
gap: var(--e3);
min-height: 4.75rem;
}
.encabezado__logo {
flex: none;
display: block;
line-height: 0;
}
.encabezado__logo img {
width: auto;
height: 2.5rem;
}
.nav {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--e1);
}
.nav__enlace {
padding: var(--e1) var(--e2);
border-radius: var(--radio);
font-size: 0.9375rem;
font-weight: 400;
text-decoration: none;
color: var(--gris);
white-space: nowrap;
transition: background var(--transicion);
}
.nav__enlace:hover {
background: var(--crema-hundida);
}
.nav__enlace[aria-current="page"] {
color: var(--oliva-texto);
font-weight: 700;
}
.encabezado__contacto {
display: flex;
align-items: center;
gap: var(--e1);
padding-left: var(--e2);
margin-left: var(--e1);
border-left: 1px solid var(--borde);
}
/* --- Botones ------------------------------------------------------------- */
/* El CTA es gris, no oliva: blanco sobre oliva da 2.78:1 y es ilegible.
El gris con blanco da 11.31:1 y además es color de marca. */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e1);
padding: 0.8rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--radio);
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--transicion), border-color var(--transicion), transform var(--transicion),
box-shadow var(--transicion);
}
.boton:active {
transform: translateY(1px);
}
.boton--principal {
background: var(--gris);
color: var(--blanco);
box-shadow: var(--sombra);
}
.boton--principal:hover {
background: #2c2b2d;
box-shadow: var(--sombra-alta);
}
.boton--fantasma {
background: transparent;
border-color: var(--gris);
color: var(--gris);
}
.boton--fantasma:hover {
background: var(--gris);
color: var(--blanco);
}
.seccion--oscura .boton--principal {
background: var(--crema);
color: var(--gris);
}
.seccion--oscura .boton--principal:hover {
background: var(--blanco);
}
.seccion--oscura .boton--fantasma {
border-color: rgb(250 249 245 / 0.45);
color: var(--crema);
}
.seccion--oscura .boton--fantasma:hover {
background: var(--crema);
color: var(--gris);
}
.boton--icono {
padding: var(--e1);
border-radius: var(--radio);
color: var(--gris-suave);
background: transparent;
border: 0;
}
.boton--icono:hover {
color: var(--gris);
background: var(--crema-hundida);
}
.boton--icono svg {
width: 1.15rem;
height: 1.15rem;
}
/* --- Hero ---------------------------------------------------------------- */
.hero {
padding-block: clamp(var(--e4), 6vw, var(--e6));
}
.hero__rejilla {
display: grid;
gap: clamp(var(--e4), 5vw, var(--e5));
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
.hero__rejilla {
grid-template-columns: 1.05fr 0.95fr;
}
}
.hero__titulo {
margin-bottom: var(--e3);
}
.hero__entrada {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
color: var(--gris-suave);
margin-bottom: var(--e4);
}
.hero__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
}
/* La foto va en hexágono: es el gesto del isotipo, hecho en CSS.
El sitio viejo lo traía horneado dentro de un PNG de 699 KB. */
.hero__figura {
position: relative;
margin: 0;
}
.hero__figura img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}
@supports not (clip-path: polygon(0 0)) {
.hero__figura img {
border-radius: var(--radio);
}
}
.hero__adorno {
position: absolute;
width: 1.5rem;
height: 1.75rem;
background: var(--oliva);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
.hero__adorno--1 {
top: 4%;
left: -2%;
background: var(--mostaza);
}
.hero__adorno--2 {
bottom: 12%;
left: 4%;
width: 1rem;
height: 1.15rem;
}
.hero__adorno--3 {
top: 16%;
right: 2%;
width: 2.25rem;
height: 2.6rem;
background: none;
border: 2px solid var(--oliva);
clip-path: none;
transform: rotate(15deg);
border-radius: 2px;
}
/* --- Tarjetas de proyecto ------------------------------------------------ */
.proyectos {
display: grid;
gap: var(--e3);
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.proyectos {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 62rem) {
.proyectos {
grid-template-columns: repeat(3, 1fr);
}
}
.proyecto {
position: relative;
display: flex;
flex-direction: column;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.proyecto:hover {
transform: translateY(-3px);
border-color: #d6d2c4;
box-shadow: var(--sombra-alta);
}
.proyecto:has(.proyecto__enlace:focus-visible) {
outline: 2px solid var(--gris);
outline-offset: 3px;
}
.proyecto__figura {
margin: 0;
overflow: hidden;
background: var(--crema-hundida);
}
.proyecto__figura img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.proyecto:hover .proyecto__figura img {
transform: scale(1.04);
}
.proyecto__cuerpo {
padding: var(--e3);
display: flex;
flex-direction: column;
gap: var(--e1);
flex: 1;
}
.proyecto__tipo {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--oliva-texto);
}
/* El enlace cubre la tarjeta entera, pero el nombre accesible sale del h3. */
.proyecto__enlace {
text-decoration: none;
}
.proyecto__enlace::after {
content: "";
position: absolute;
inset: 0;
}
/* --- Página de proyecto -------------------------------------------------- */
.miga {
margin-bottom: var(--e4);
font-size: 0.875rem;
color: var(--gris-suave);
}
.miga a {
color: var(--gris-suave);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transicion), border-color var(--transicion);
}
.miga a:hover {
color: var(--gris);
border-bottom-color: var(--borde);
}
.miga span[aria-hidden] {
margin-inline: 0.35em;
opacity: 0.5;
}
.miga [aria-current] {
color: var(--gris);
font-weight: 400;
}
.proyecto__portada h1 {
margin-bottom: var(--e3);
}
/* Ficha del proyecto. Vacía hasta Fase 2: no tenemos los datos y no se
inventan. Ver el comentario en cada página de proyecto. */
.ficha {
display: grid;
gap: var(--e3);
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
margin: var(--e4) 0 0;
padding-top: var(--e3);
border-top: 1px solid var(--borde);
max-width: 46rem;
}
.ficha__dato dt {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--oliva-texto);
margin-bottom: 0.35rem;
}
.ficha__dato dd {
margin: 0;
font-size: 0.9375rem;
}
.proyecto__descripcion {
margin-top: var(--e3);
}
.proyecto__cierre {
display: flex;
flex-wrap: wrap;
gap: var(--e4);
align-items: center;
justify-content: space-between;
}
.proyecto__cierre h2 {
margin-bottom: var(--e2);
}
.proyecto__cierre p:last-child {
margin-bottom: 0;
color: rgb(250 249 245 / 0.72);
}
/* --- Navegación entre proyectos ------------------------------------------
Tres celdas: anterior / índice / siguiente. En los extremos de la serie la
celda que sobra se queda vacía pero ocupa su sitio, para que "Todos los
proyectos" no se mueva de en medio entre una página y otra. */
.proyecto__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e2);
padding-top: var(--e4);
border-top: 1px solid var(--borde);
}
.proyecto__nav a {
display: inline-flex;
align-items: center;
gap: var(--e1);
font-size: 0.9375rem;
color: var(--gris);
text-decoration: none;
transition: color var(--transicion);
}
.proyecto__nav a:hover {
color: var(--oliva-texto);
}
.proyecto__nav svg {
width: 1rem;
height: 1rem;
flex: none;
}
.proyecto__nav__siguiente {
justify-content: flex-end;
text-align: right;
}
.proyecto__nav__indice {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 40rem) {
.proyecto__nav {
grid-template-columns: 1fr 1fr;
row-gap: var(--e3);
}
/* En móvil el índice pasa abajo y cruza las dos columnas. */
.proyecto__nav__indice {
grid-row: 2;
grid-column: 1 / -1;
justify-self: center;
}
.proyecto__nav__siguiente {
grid-row: 1;
grid-column: 2;
}
}
.proyecto__cierre-acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
}
/* --- Galería ------------------------------------------------------------- */
.galeria {
display: grid;
gap: var(--e2);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.galeria__pieza {
margin: 0;
position: relative;
background: var(--crema-hundida);
border-radius: var(--radio);
overflow: hidden;
}
.galeria__boton {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.galeria__boton img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), filter var(--transicion);
}
.galeria__boton:hover img {
transform: scale(1.03);
filter: brightness(1.04);
}
/* --- Franja de clientes --------------------------------------------------
Los logos van chicos a la fuerza: el más pequeño que rescatamos mide
64x70 px nativos y no hay de dónde sacar más. A ~2.5rem de alto se ven
dignos; más grandes, se deshacen. Ver README > Logos de cliente.
------------------------------------------------------------------------ */
.clientes {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(var(--e3), 5vw, var(--e5));
}
.clientes__logo {
height: 2.5rem;
width: auto;
opacity: 0.55;
filter: grayscale(1);
transition: opacity var(--transicion), filter var(--transicion);
}
.clientes__logo:hover {
opacity: 1;
filter: grayscale(0);
}
/* --- Servicios ----------------------------------------------------------- */
/* --- Servicios -----------------------------------------------------------
Eran tres tarjetas iguales con una barra oliva arriba: el patrón que sale
por defecto, y se notaba. Ahora es una composición asimétrica — imagen a un
lado, lista al otro — y el peso lo lleva la tipografía, no las cajas.
Cuatro niveles y se distinguen sin mirar dos veces:
1. el h2, la declaración clamp 1.75-2.6rem / 700
2. el nombre del servicio 1.25rem / 700
3. la etiqueta de sección 0.8125rem / 700 / versalitas
4. el texto descriptivo 0.875rem / 400 / gris suave
El salto del nombre al texto es de 1.25rem a 0.875rem: casi el doble. Esa
distancia es la que hace que se lea editorial y no un folleto.
------------------------------------------------------------------------ */
.servicios__intro {
margin-bottom: var(--e4);
}
/* La declaración se estrecha para romper en dos o tres líneas. A una sola
línea larga deja de leerse como declaración y pasa a ser un banner. */
.servicios__intro h2 {
max-width: 16ch;
}
.servicios__rejilla {
display: grid;
gap: clamp(var(--e4), 5vw, var(--e6));
grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
.servicios__rejilla {
/* Asimétrica a propósito: el texto manda y la imagen acompaña. */
grid-template-columns: 1.15fr 0.85fr;
}
}
/* La imagen iguala el alto de la columna de texto en vez de imponer el suyo:
con tres servicios cortos, un retrato a 3/4 sacaba 336px de hueco muerto al
lado, y eso no se lee como aire sino como error.
Va en absoluto por dos motivos, los dos necesarios:
1. El es inline: un height:100% en el ![]()
no se resolvería.
`display: contents` lo saca de en medio y deja al ![]()
colgando de la
figura.
2. Fuera del flujo, el ![]()
NO puede inflar la fila con su alto propio.
En flujo, el navegador tiene que resolver a la vez "el alto de la fila
depende del contenido" y "el alto del contenido es el 100% de la fila",
y rompe el empate usando el intrínseco — que es justo lo que sobra. */
.servicios__figura {
margin: 0;
position: relative;
overflow: hidden;
border-radius: var(--radio);
}
.servicios__figura picture {
display: contents;
}
.servicios__figura img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* En móvil la columna ya no tiene con quién igualarse, así que la figura
recupera un alto propio. El aspecto NO pasa a apaisado: recortar 3/4 a 4/3
se come el 44% del alto — el travertino y los cuencos — y un tablero de
materiales cortado a tira deja de ser un tablero. */
@media (max-width: 61.999rem) {
.servicios__figura {
position: static;
aspect-ratio: 3 / 4;
}
.servicios__figura img {
position: static;
}
}
.servicios {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.servicio {
padding-block: var(--e3);
border-top: 1px solid var(--borde);
}
.servicio:first-child {
padding-top: 0;
border-top: 0;
}
.servicio:last-child {
padding-bottom: 0;
}
.servicio__nombre {
margin: 0 0 var(--e1);
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.servicio__texto {
margin: 0;
max-width: 44ch;
font-size: 0.875rem;
color: var(--gris-suave);
}
/* --- Proceso (sección oscura) -------------------------------------------- */
/* --- Pasos del proceso — SIN CONSUMIDOR ---------------------------------
La sección de Proceso salió del sitio con el brief de copy (su idea vive
ahora en #estudio). Esto se queda escrito porque la salida es provisional:
el proceso vuelve en cuanto haya pasos reales que contar. Ver README >
Pendientes. Si en la próxima revisión sigue sin volver, bórrese. */
.pasos {
display: grid;
gap: var(--e3);
grid-template-columns: 1fr;
counter-reset: paso;
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 48rem) {
.pasos {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
}
.paso {
position: relative;
padding-top: var(--e3);
border-top: 1px solid rgb(250 249 245 / 0.18);
counter-increment: paso;
}
.paso::before {
content: counter(paso, decimal-leading-zero);
display: block;
margin-bottom: var(--e1);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--mostaza);
}
.paso h3 {
margin-bottom: var(--e1);
font-size: 1.0625rem;
}
.paso p {
margin: 0;
font-size: 0.9375rem;
color: rgb(250 249 245 / 0.72);
}
/* --- Nota de cobertura --------------------------------------------------- */
.cobertura {
display: flex;
gap: var(--e3);
align-items: flex-start;
padding: var(--e4);
background: var(--blanco);
border: 1px solid var(--borde);
border-left: 3px solid var(--oliva);
border-radius: var(--radio);
}
.cobertura svg {
flex: none;
width: 1.5rem;
height: 1.5rem;
color: var(--oliva-texto);
margin-top: 0.15rem;
}
.cobertura p:last-child {
margin-bottom: 0;
}
/* Datos de contacto dentro del bloque de cobertura. */
.datos p {
margin-bottom: var(--e1);
}
.datos p:last-child {
margin-bottom: 0;
}
.datos a {
color: var(--gris);
text-decoration: none;
border-bottom: 1px solid var(--borde);
transition: border-color var(--transicion);
}
.datos a:hover {
border-bottom-color: var(--gris);
}
/* --- Formulario ---------------------------------------------------------- */
.contacto__rejilla {
display: grid;
gap: clamp(var(--e4), 5vw, var(--e5));
grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
.contacto__rejilla {
grid-template-columns: 0.85fr 1.15fr;
}
}
.formulario {
display: grid;
gap: var(--e3);
}
@media (min-width: 34rem) {
.formulario {
grid-template-columns: 1fr 1fr;
}
.campo--ancho,
.formulario__pie {
grid-column: 1 / -1;
}
}
.campo {
display: flex;
flex-direction: column;
gap: var(--e1);
}
.campo__etiqueta {
font-size: 0.875rem;
font-weight: 700;
}
.campo__opcional {
font-weight: 400;
color: var(--gris-suave);
}
.campo__control {
width: 100%;
padding: 0.75rem 0.9rem;
font: inherit;
font-size: 1rem; /* 16px: por debajo, iOS hace zoom al enfocar */
color: var(--gris);
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio);
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__control:hover {
border-color: #cfcabb;
}
.campo__control:focus {
outline: none;
border-color: var(--gris);
box-shadow: 0 0 0 3px rgb(59 58 60 / 0.12);
}
.campo__control[aria-invalid="true"] {
border-color: #b3261e;
}
textarea.campo__control {
min-height: 8rem;
resize: vertical;
}
/* El