/* ============================================================
CREMA · Creative Studio · web prototipo v2
Lenguaje: editorial mediterráneo retro con cuerpo.
Color blocking con TODA la paleta · tipografía monumental con
fotos dentro · capas collage (sello, postal, sticker, rayas).
Regla de formas: interacción = píldora · foto protagonista = arco
· foto de grid = esquina viva con borde · sello = círculo
· postal = marco blanco. Documentada en DESIGN.md.
============================================================ */
/* ---------- Tokens ---------- */
:root {
/* Paleta de marca (brand book 2026) */
--crema: #FDE5B0;
--hueso: #F7F3EC;
--marron: #513229;
--salvia: #8E9775;
--celeste: #D8EBF9;
--azul: #4E83A4;
/* Derivados (contraste AA y jerarquía) */
--tinta: #3A241D;
--azul-profundo:#3D6987;
--marron-suave: #6E4A3F;
--salvia-clara: #E9ECDC;
--celeste-suave:#E3F0FA;
--crema-viva: #F8D98C;
--blanco-postal:#FFFDF8;
--linea: rgba(81, 50, 41, .16);
--linea-clara: rgba(247, 243, 236, .22);
/* Tema de capítulo por página (se sobreescribe en body.tema-*) */
--acento: var(--crema);
--acento-texto: var(--tinta);
/* Tipografía */
--serif: "DM Serif Display", Georgia, "Times New Roman", serif;
--sans: "Raleway", -apple-system, "Segoe UI", sans-serif;
--mano: "Caveat", "Comic Sans MS", cursive;
--texto-xs: .8125rem;
--texto-s: .9375rem;
--texto-m: 1.0625rem;
--texto-l: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
--titulo-s: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
--titulo-m: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
--titulo-l: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
--titulo-xl: clamp(2.8rem, 1.6rem + 5vw, 6rem);
/* Ritmo vertical — escala ÚNICA. Todo padding de sección sale de aquí y se
aplica en el bloque «Ritmo vertical unificado» del final del archivo. */
--esp-seccion: clamp(5rem, 5vw + 2.5rem, 8rem); /* aire estándar entre secciones */
--esp-seccion-s: clamp(3.25rem, 3vw + 1.75rem, 5rem); /* secciones encadenadas y cierres */
--esp-bloque: clamp(2.5rem, 2rem + 2vw, 4rem); /* cabecera → contenido dentro de sección */
--esp-bloque-s: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); /* separaciones cortas internas */
--ancho-max: 1280px;
--margen: clamp(1.25rem, 4vw, 3.5rem);
--z-nav: 100;
--curva: cubic-bezier(.16, 1, .3, 1);
}
/* Temas de capítulo por página */
.tema-branding { --acento: var(--crema); --acento-texto: var(--tinta); }
.tema-marketing { --acento: var(--salvia); --acento-texto: var(--tinta); }
.tema-contenido { --acento: var(--celeste); --acento-texto: var(--tinta); }
.tema-digitalizacion{ --acento: var(--tinta); --acento-texto: var(--crema); }
.tema-azul { --acento: var(--azul-profundo); --acento-texto: var(--hueso); }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--sans);
font-weight: 500;
font-size: var(--texto-m);
line-height: 1.7;
color: var(--marron);
background-color: var(--hueso);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
::selection { background: var(--crema); color: var(--tinta); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2.5px solid var(--marron);
outline-offset: 3px;
border-radius: 2px;
}
.fondo-oscuro :focus-visible, .pie :focus-visible { outline-color: var(--crema); }
.contenedor {
max-width: var(--ancho-max);
margin-inline: auto;
padding-inline: var(--margen);
}
.salto-contenido {
position: absolute;
top: -100%;
left: 1rem;
z-index: 200;
padding: .75rem 1.25rem;
background: var(--marron);
color: var(--hueso);
border-radius: 999px;
font-size: var(--texto-s);
}
.salto-contenido:focus-visible { top: 1rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; }
h1 em, h2 em, h3 em { font-style: italic; }
.etiqueta {
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--marron-suave);
}
.titulo-seccion { font-size: var(--titulo-m); max-width: 21ch; text-wrap: balance; }
/* Retrabajo V.4 (3): el aire entre la etiqueta de sección y su titular se
unifica tomando «El concepto» como referencia (`.concepto__titulo`, 1.1rem).
En el resto de capítulos la etiqueta quedaba pegada al titular. */
.etiqueta + .titulo-seccion,
.etiqueta + .agenda__titulo,
.etiqueta + h1,
.etiqueta + h2 { margin-top: 1.1rem; }
/* Retrabajo V.3 (5): un título con dos frases se lee mal partido por la mitad.
Cada frase va en su propio bloque `.frase-titulo`, no separadas por un
:
así `text-wrap: balance` reparte líneas DENTRO de cada frase en vez de sobre
el titular entero (con
dejaba viudas como «boutique.» sola). */
.frase-titulo { display: block; text-wrap: balance; }
.titulo-seccion--frases { max-width: none; }
/* Red de seguridad tipográfica: los titulares reparten líneas parejas y la
prosa evita dejar una palabra sola en la última línea. */
h1, h2, h3, .heroe-servicio__frase, .tarjeta-sector__frase, .porque__destacado,
.paso-resumen, .principio__lema, .realidad__lead, .realidad__sub { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.titulo-seccion__apoyo { max-width: 52ch; margin-top: 1.1rem; color: var(--marron-suave); }
.titulo-pagina { font-size: var(--titulo-l); margin-top: 1rem; }
.bloque--cabecera { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.cierre-centrado { padding-block: clamp(3rem, 5vw, 5rem); text-align: center; }
/* ---------- Botones ---------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 48px;
padding: .8rem 1.7rem;
border: 0;
border-radius: 999px;
font-family: var(--sans);
font-size: var(--texto-s);
font-weight: 600;
letter-spacing: .02em;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color .25s var(--curva), color .25s var(--curva),
transform .2s var(--curva), border-color .25s var(--curva);
}
.boton:active { transform: scale(.97); }
.boton--primario { background: var(--marron); color: var(--crema); }
.boton--primario:hover { background: var(--tinta); transform: translateY(-2px); }
.boton--fantasma { border: 1.5px solid var(--marron); color: var(--marron); background: transparent; }
.boton--fantasma:hover { background: var(--marron); color: var(--crema); transform: translateY(-2px); }
.boton--claro { background: var(--crema); color: var(--tinta); }
.boton--claro:hover { background: var(--crema-viva); transform: translateY(-2px); }
.boton--grande { min-height: 56px; padding: 1rem 2.4rem; font-size: var(--texto-m); }
.enlace-subrayado {
display: inline-block;
font-weight: 600;
border-bottom: 1.5px solid currentColor;
padding-bottom: .15rem;
transition: color .2s;
}
.enlace-subrayado:hover { color: var(--marron-suave); }
/* ---------- Navegación ---------- */
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: color-mix(in srgb, var(--hueso) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: border-color .3s;
}
.nav.con-borde { border-bottom-color: var(--linea); }
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 68px;
}
/* Retrabajo slide 3: logo un 25-30% más grande */
.nav__marca { font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.nav__enlaces { display: none; }
.nav__acciones { display: flex; align-items: center; gap: .75rem; }
.nav__acciones .nav__idiomas { display: none; }
.nav__cta { min-height: 44px; padding: .5rem 1.1rem; font-size: var(--texto-xs); }
.nav__idiomas { display: flex; align-items: center; gap: .15rem; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .08em; }
.idioma { background: none; border: 0; font: inherit; color: var(--marron-suave); cursor: pointer; padding: .5rem .35rem; min-height: 44px; }
.idioma.activo { color: var(--marron); text-decoration: underline; text-underline-offset: 4px; }
.idioma__sep { color: var(--linea); }
.nav__burger { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; width: 26px; height: 2px; background: var(--marron); transition: transform .3s var(--curva); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__movil { border-top: 1px solid var(--linea); background: var(--hueso); padding: 1.25rem var(--margen) 2rem; }
.nav__movil ul { display: grid; gap: .1rem; }
.nav__movil a:not(.boton) { display: block; padding: .65rem 0; font-family: var(--serif); font-size: 1.5rem; }
.nav__movil-sub { display: grid; grid-template-columns: 1fr 1fr; padding-left: 1rem; }
.nav__movil-sub a:not(.boton) { font-family: var(--sans); font-size: var(--texto-s); font-weight: 600; padding: .5rem 0; color: var(--marron-suave); }
.nav__idiomas--movil { padding-top: .75rem; }
@media (min-width: 900px) {
.nav__burger, .nav__movil { display: none; }
.nav__enlaces { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); font-size: var(--texto-s); font-weight: 600; }
.nav__enlaces > li > a { display: inline-block; padding: 1.35rem 0; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.nav__enlaces > li > a:hover, .nav__enlaces > li > a[aria-current="page"] { border-bottom-color: var(--marron); }
.nav__acciones { gap: 1.25rem; }
.nav__acciones .nav__idiomas { display: flex; }
.nav__cta { padding: .6rem 1.4rem; font-size: var(--texto-s); }
/* Desplegables al pasar el cursor (y por teclado con :focus-within) */
.nav__item--desplegable { position: relative; }
.nav__item--desplegable > a::after {
content: "";
display: inline-block;
width: .45em;
height: .45em;
margin-left: .45em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-.15em) rotate(45deg);
transition: transform .2s var(--curva);
}
.nav__item--desplegable:hover > a::after,
.nav__item--desplegable:focus-within > a::after { transform: translateY(.05em) rotate(225deg); }
.desplegable {
position: absolute;
top: 100%;
left: -1.25rem;
min-width: 250px;
background: var(--hueso);
border: 1.5px solid var(--marron);
padding: .5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .22s var(--curva), transform .22s var(--curva), visibility 0s .22s;
box-shadow: 8px 8px 0 0 var(--crema);
}
.nav__item--desplegable:hover .desplegable,
.nav__item--desplegable:focus-within .desplegable {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .22s var(--curva), transform .22s var(--curva), visibility 0s 0s;
}
.desplegable a {
display: block;
padding: .65rem 1.25rem;
border-bottom: 0;
transition: background-color .15s;
}
.desplegable a:hover { background: var(--crema); }
}
/* ---------- Componentes retro / collage ---------- */
/* Foto protagonista en arco mediterráneo */
.arco { border-radius: 999px 999px 0 0; border: 1.5px solid var(--marron); object-fit: cover; }
/* Chip de foto dentro de un titular.
El guarda el hueco en la línea y NUNCA cambia de tamaño: así el
titular no se recompone al abrir la foto. La foto vive dentro, en absoluto,
y al ampliarse crece hasta su proporción real (retrabajo V.4 · punto 1:
antes escalaba en bloque una ventana de 2,3:1 sobre una foto vertical, así
que ampliada solo se veía una tira recortada). */
.chip-foto {
position: relative;
display: inline-block;
width: 1.7em;
height: .74em;
vertical-align: -.06em;
margin-inline: .04em;
}
.chip-foto img {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--chip-foco, 50% 50%);
border-radius: 999px;
border: max(1.5px, .022em) solid var(--marron);
}
/* Alto abierto = 1,7em × (alto natural / ancho natural), en % de la píldora.
El ancho no se toca: la foto se abre en vertical y no invade las letras. */
/* Encuadre cerrado: la píldora enseña todo el ancho de la foto y solo una franja
de alto; `--chip-foco` decide a qué altura cae (13/09). Flotadores: la franja
baja a los dos flotadores (79 %). Ostras: el archivo va recortado con la ostra
que sujetan en el centro exacto, así que le basta el 50 % por defecto. */
.chip-foto--flotadores { --chip-abierto: 306%; --chip-foco: 50% 79%; } /* 700 × 933 */
.chip-foto--ostras { --chip-abierto: 306%; } /* 600 × 800 */
h1 .chip-foto--flotadores { rotate: -3deg; }
h1 .chip-foto--ostras { rotate: 2.5deg; }
/* Palabra gigante decorativa con fotos solapadas */
.palabra-gigante {
position: relative;
display: block;
font-family: var(--serif);
font-size: clamp(3.4rem, 15vw, 13.5rem);
line-height: .92;
text-transform: uppercase;
letter-spacing: -.015em;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.palabra-gigante--outline { color: transparent; -webkit-text-stroke: 2px var(--marron); }
/* Sello circular giratorio */
.sello {
position: absolute;
left: -.75rem;
bottom: -1.75rem;
width: clamp(104px, 12vw, 136px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--marron);
display: grid;
place-items: center;
padding: 6px;
z-index: 2;
}
.sello svg { width: 100%; height: 100%; overflow: visible; animation: girar 22s linear infinite; }
.sello__texto { font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .22em; fill: var(--crema); text-transform: uppercase; }
.sello__c { font-family: var(--serif); font-size: 44px; fill: var(--crema); animation: contragirar 22s linear infinite; transform-origin: 60px 60px; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes contragirar { to { transform: rotate(-360deg); } }
/* Postal (bloque oscuro) */
.postal {
position: relative;
background: var(--blanco-postal);
padding: 14px 14px 3.4rem;
transform: rotate(-2deg);
box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
transition: transform .45s var(--curva);
}
.postal:hover { transform: rotate(0deg); }
.postal img { border: 1px solid var(--linea); }
.postal__sello {
position: absolute;
top: 22px;
right: 22px;
width: 64px;
aspect-ratio: 4 / 5;
background: var(--crema);
border: 3px dotted var(--blanco-postal);
outline: 1px solid var(--linea);
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 2rem;
color: var(--marron);
transform: rotate(4deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.postal__matasellos {
position: absolute;
left: 18px;
bottom: .9rem;
font-family: var(--mano);
font-size: 1.45rem;
font-weight: 600;
color: var(--marron);
transform: rotate(-2deg);
white-space: nowrap;
}
/* Cinta adhesiva */
.cinta {
position: absolute;
width: 92px;
height: 26px;
background: rgba(253, 229, 176, .8);
box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
z-index: 3;
}
/* Stickers recortados: RETIRADOS todos (Juli, 13/09). Primero lenguado, helado
y tomate; después crema, flan y gambas. Recortes, factores k = √(alto/ancho) y
reglas de colocación en plantillas/reserva/ (y en el README, «Fotografía y
stickers») por si vuelven. Los `img:not(.sticker)` de más abajo se quedan:
sin stickers no cambian nada y evitan romper fotos si alguno regresa. */
.concepto__manifiesto { position: relative; }
/* Rayas de toldo */
.banda-rayas {
background: repeating-linear-gradient(
90deg,
var(--salvia-clara) 0 44px,
var(--hueso) 44px 88px
);
}
/* Nota manuscrita */
.nota-manuscrita {
font-family: var(--mano);
font-size: 1.5rem;
font-weight: 600;
color: var(--marron-suave);
white-space: nowrap;
}
/* Pastillas (listas > 5 ítems) */
.pastillas { display: flex; flex-wrap: wrap; gap: .6rem; }
.pastillas li {
padding: .5rem 1.1rem;
border: 1.5px solid var(--marron);
border-radius: 999px;
font-size: var(--texto-s);
font-weight: 600;
background: var(--hueso);
color: var(--tinta);
}
/* ---------- Marquesina (temable) ---------- */
.marquesina {
--mq-bg: var(--tinta);
--mq-texto: var(--crema);
background: var(--mq-bg);
overflow: hidden;
padding-block: 1rem;
}
.marquesina--acento { --mq-bg: var(--acento); --mq-texto: var(--acento-texto); }
.marquesina__pista { display: flex; width: max-content; animation: desfilar 26s linear infinite; }
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
.marquesina__grupo { display: flex; align-items: center; gap: 2.75rem; padding-right: 2.75rem; }
.marquesina__grupo li {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
color: var(--mq-texto);
white-space: nowrap;
}
.marquesina__grupo a { transition: opacity .2s; }
.marquesina__grupo a:hover { opacity: .72; }
@keyframes desfilar { to { transform: translateX(-50%); } }
/* ---------- Hero tipográfico (home) ---------- */
.heroe-tipo {
background: var(--crema);
border-bottom: 1.5px solid var(--marron);
padding-block: clamp(3rem, 6vh, 5rem) clamp(3.5rem, 7vh, 5.5rem);
position: relative;
overflow: clip;
}
.heroe-tipo__etiqueta { color: var(--marron); margin-bottom: 1.6rem; }
/* Retrabajo V.2 (9): el héroe pasa a dos columnas — texto a la izquierda y
una foto grande a la derecha con la MISMA forma de píldora que los chips
del titular (mismo radio y mismo borde, solo que en vertical y en grande). */
.heroe-tipo__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.heroe-tipo__figura {
position: relative;
width: min(78vw, 340px);
justify-self: center;
}
.heroe-tipo__figura img:not(.sticker) {
width: 100%;
aspect-ratio: 3 / 4.15;
object-fit: cover;
border-radius: 999px;
border: 1.5px solid var(--marron);
}
.heroe-tipo__figura .nota-manuscrita {
position: absolute;
left: 50%;
bottom: -2.1rem;
transform: translateX(-50%) rotate(-4deg);
white-space: nowrap;
}
.heroe-tipo__titulo {
font-size: var(--titulo-xl);
line-height: 1.04;
color: var(--tinta);
letter-spacing: -.01em;
max-width: 14ch;
}
/* La máscara solo existe mientras dura el revelado (retrabajo V.4 · punto 1):
con `overflow: hidden` permanente, el chip abierto se cortaba por arriba y
por abajo contra el borde de su propia línea. Sin JS ni con movimiento
reducido no hay nada que enmascarar, así que ni se aplica. */
.heroe-tipo__titulo .linea-mascara { display: block; padding-bottom: .07em; margin-bottom: -.07em; }
html.con-animacion .heroe-tipo__titulo .linea-mascara { overflow: hidden; }
html.con-animacion .heroe-tipo__titulo .linea-mascara--abierta { overflow: visible; }
.heroe-tipo__titulo .linea-mascara > span { display: block; }
.heroe-tipo__sub {
max-width: 46ch;
margin-top: 1.6rem;
font-size: var(--texto-l);
line-height: 1.55;
color: var(--marron);
}
.heroe-tipo__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.25rem; }
@media (min-width: 900px) {
.heroe-tipo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: clamp(2rem, 3.5vw, 3.5rem); }
.heroe-tipo__figura { width: clamp(260px, 26vw, 360px); justify-self: end; }
/* La línea más larga del titular mide 9,52em. Atando la fuente al ancho REAL
de su columna (10cqw ⇒ ~5% de aire), cada línea cabe entera a cualquier
ancho de pantalla y la máscara de revelado no se parte. */
.heroe-tipo__texto { container-type: inline-size; }
.heroe-tipo__titulo { max-width: none; font-size: min(5.5rem, 10cqw); }
}
@media (max-width: 719px) {
.heroe-tipo__figura { width: min(72vw, 300px); }
}
/* ---------- Banda fotográfica full-bleed (espacio banner del briefing) ---------- */
.banda-foto {
position: relative;
height: clamp(320px, 56vh, 560px);
overflow: clip;
}
.banda-foto img {
position: absolute;
inset: -14% 0 auto 0;
width: 100%;
height: 128%;
object-fit: cover;
object-position: center 42%;
}
/* Velo inferior: la nota manuscrita caía sobre las rocas claras de la foto y
la sombra de texto no bastaba. El degradado le da suelo sin tapar la imagen.
Con las fotos reales del cliente el velo plano se quedó justo: medido sobre el
fondo real (ocultando el texto y fotografiando solo lo que hay detrás), la nota
de la home daba 3,05:1 en su punto más claro —pasa el 3:1 de texto grande por
los pelos, y Caveat, al ser manuscrita, pide más margen del que dice su tamaño—.
En vez de oscurecer toda la banda, se añade una viñeta en la esquina donde vive
la nota: la lleva a 5,12:1 (9,16:1 de media) y se lee como encuadre, no como caja.
La banda de «Sobre nosotros» sube de 4,42:1 a 6,78:1 con el mismo cambio.
Ojo al medir: el «clip» de page.screenshot() va en coordenadas de página, no de
viewport; si le pasas un getBoundingClientRect() sin sumar scrollX/scrollY
fotografías otra zona y salen cifras planas de la paleta que no significan nada. */
.banda-foto::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(118% 88% at 100% 100%, rgba(58, 36, 29, .5), rgba(58, 36, 29, 0) 62%),
linear-gradient(to top, rgba(58, 36, 29, .5), rgba(58, 36, 29, 0) 42%);
pointer-events: none;
}
/* La banda de Sobre nosotros usa una foto de textura: se encuadra al centro. */
.sobre-nosotros-banda img { object-position: center 55%; }
/* Banda de la home: la foto se ve ENTERA hasta el suelo en cuanto llega, sin tener
que seguir bajando (petición de Juli, 13/09). Por eso sin paralaje (el 128 % de
sobredimensión escondía la parte de abajo) y con la proporción de la foto,
topada a lo que queda de pantalla bajo la cabecera fija (69 px) y la
marquesina (84 px): 9,75rem. La foto (mesa-piedra-32, 3:2) sale del original
IMG_4521 con suelo bajo las sillas y el eje de la puerta en el 50 % exacto: la
versión 1820×857 cortaba las sillas de delante en el propio archivo (Juli, 13/09:
«que se vea la mesa, que no se corte; que se corte por arriba»). Anclada abajo,
el tope recorta siempre por arriba y nunca la mesa; en móvil manda el mínimo y
recorta los lados, simétricos respecto a la puerta.
Encuadre 2:1 (Juli, 13/09 tarde: la foto entera en 3:2 pesaba demasiado): se
come el tercio de muro de arriba y corta justo bajo el alféizar de la ventana;
la mesa, las sillas y el perro quedan enteros. El archivo sigue en 3:2 porque
en móvil el mínimo de altura recorta los lados y necesita esa altura de foto. */
/* width explícito: con aspect-ratio y ancho auto, el tope y el mínimo de altura se
«transfieren» al ancho y la banda encoge (pantallas bajas) o desborda (móvil). */
.banda-foto--entera {
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
max-height: calc(100svh - 9.75rem);
min-height: min(26rem, calc(100svh - 9.75rem));
}
.banda-foto--entera img {
inset: 0;
height: 100%;
object-position: center bottom;
}
.banda-foto__nota {
z-index: 1;
position: absolute;
right: clamp(1rem, 4vw, 3.5rem);
bottom: 1.4rem;
font-family: var(--mano);
font-size: 1.5rem;
font-weight: 600;
color: var(--hueso);
text-shadow: 0 2px 10px rgba(58, 36, 29, .55);
transform: rotate(-3deg);
}
/* ---------- Valores de marca (Por qué, home) ---------- */
.valores {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1rem;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid var(--linea-clara);
font-family: var(--serif);
font-style: italic;
font-size: var(--texto-l);
color: var(--crema);
}
.valores span[aria-hidden] { font-size: .65em; color: rgba(253, 229, 176, .6); }
/* ---------- Capítulos de color ---------- */
.bloque { padding-block: var(--esp-seccion); }
.bloque--crema { background: var(--crema); color: var(--tinta); }
.bloque--celeste { background: var(--celeste); color: var(--tinta); }
.bloque--salvia { background: var(--salvia); color: var(--tinta); }
.bloque--azul { background: var(--azul-profundo);color: var(--hueso); }
.bloque--tinta { background: var(--tinta); color: var(--hueso); }
.bloque--azul .titulo-seccion__apoyo,
.bloque--tinta .titulo-seccion__apoyo { color: rgba(247, 243, 236, .85); }
.bloque--azul h2, .bloque--tinta h2,
.bloque--azul .titulo-pagina, .bloque--tinta .titulo-pagina { color: var(--crema); }
.etiqueta--clara { color: rgba(253, 229, 176, .85); }
/* ---------- Concepto (home) ---------- */
.concepto { position: relative; padding-block: var(--esp-seccion); overflow: clip; }
.concepto__marca-agua {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--serif);
font-size: clamp(11rem, 24vw, 24rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(81, 50, 41, .09);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
@media (max-width: 719px) { .concepto__marca-agua { display: none; } }
.concepto__inner { position: relative; }
.concepto__titulo { font-size: var(--titulo-s); max-width: 40ch; margin-top: 1.1rem; text-wrap: balance; color: var(--marron-suave); }
.concepto__manifiesto { margin-top: var(--esp-bloque); }
.manifiesto__linea { font-family: var(--serif); font-size: var(--titulo-l); line-height: 1.14; }
/* Escalera: se cuenta por tipo (p) y no por hijo, porque el sticker (img) va
delante en el DOM y con nth-child descuadraba la segunda y la tercera línea. */
@media (min-width: 720px) {
.manifiesto__linea:nth-of-type(2) { margin-left: clamp(1.5rem, 4vw, 3.5rem); }
.manifiesto__linea:nth-of-type(3) { margin-left: clamp(3rem, 8vw, 7rem); }
.manifiesto__linea--clave { margin-left: clamp(4.5rem, 12vw, 11rem); }
}
.manifiesto__linea--clave { margin-top: .35em; }
.manifiesto__linea--clave em { background: linear-gradient(transparent 62%, var(--crema) 62%); padding-inline: .08em; }
.concepto__cierre { display: grid; gap: 2rem; margin-top: var(--esp-bloque); align-items: start; }
.concepto__foto { position: relative; width: min(52vw, 250px); }
.concepto__foto img:not(.sticker) { aspect-ratio: 3 / 4.4; }
.concepto__foto .nota-manuscrita { position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%) rotate(-4deg); }
.concepto__texto { max-width: 56ch; font-size: var(--texto-l); line-height: 1.6; }
/* Retrabajo slide 6: texto arriba + botones bajo el párrafo del concepto */
.concepto__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2rem; }
@media (min-width: 900px) {
.concepto__cierre { grid-template-columns: auto 1fr; gap: clamp(2.5rem, 5vw, 5rem); margin-left: clamp(0rem, 6vw, 5rem); }
}
/* ---------- Qué hacemos (capítulo azul, home y landing de servicios) ----------
Cuatro tarjetas de color con la inicial en contorno (Juli, 13/09: «como
estaba antes, pero sin la foto»). Contenido, que era la tarjeta con la foto
de La Raspa, pasa a marrón liso. */
.hacemos__bento { display: grid; gap: 1.1rem; margin-top: var(--esp-bloque); }
.pilar {
position: relative;
display: flex;
flex-direction: column;
gap: .8rem;
justify-content: flex-end;
padding: clamp(1.5rem, 3vw, 2.4rem);
transition: transform .3s var(--curva);
overflow: hidden;
}
.pilar:hover { transform: translateY(-5px) rotate(-.4deg); }
.pilar h2, .pilar h3 { font-size: var(--titulo-s); color: inherit; }
.pilar p { max-width: 34ch; font-size: var(--texto-s); line-height: 1.6; }
.pilar__mas {
margin-top: .4rem;
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
border-bottom: 1.5px solid currentColor;
align-self: flex-start;
padding-bottom: .2rem;
}
.pilar__mas::after {
content: "→";
display: inline-block;
margin-left: .45em;
transition: transform .25s var(--curva);
}
.pilar:hover .pilar__mas::after,
.tarjeta-sector:hover .pilar__mas::after,
a.proyecto:hover .pilar__mas::after { transform: translateX(5px); }
.pilar__inicial {
position: absolute;
top: -2.6rem;
right: -1.2rem;
font-family: var(--serif);
font-size: clamp(9rem, 14vw, 13rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(58, 36, 29, .22);
pointer-events: none;
}
.pilar--crema { background: var(--crema); color: var(--tinta); }
.pilar--salvia { background: var(--salvia); color: var(--tinta); }
.pilar--celeste { background: var(--celeste-suave); color: var(--tinta); }
/* Contenido: mismo gesto que la foto que tenía (fondo oscuro, texto hueso), en marrón de marca */
.pilar--marron { background: var(--marron); color: var(--hueso); }
.pilar--marron .pilar__inicial { -webkit-text-stroke-color: color-mix(in srgb, var(--crema) 26%, transparent); }
.pilar--marron:focus-visible { outline-color: var(--crema); }
/* Retrabajo slide 7: Marketing y Branding intercambian posición (Marketing primero, ancho) */
@media (min-width: 720px) {
.hacemos__bento { grid-template-columns: repeat(12, 1fr); }
.pilar--salvia { grid-column: span 7; min-height: 320px; }
.pilar--crema { grid-column: span 5; }
.pilar--marron { grid-column: span 5; min-height: 320px; }
.pilar--celeste{ grid-column: span 7; }
}
@media (max-width: 719px) { .pilar { min-height: 0; } }
/* ---------- Tríptico de sectores (solo home: resumen, no capítulos) ---------- */
.sectores-resumen { padding-block: var(--esp-seccion); }
.sectores-resumen .sectores__cta { padding-bottom: 0; }
.bloque--crema .titulo-seccion__apoyo { color: var(--tinta); }
.bloque--crema .tarjeta-sector__frase, .bloque--crema .nota-manuscrita { color: var(--marron); }
.triptico { display: grid; gap: 2.25rem; margin-top: var(--esp-bloque); }
.tarjeta-sector { display: block; text-align: center; transition: transform .3s var(--curva); }
.tarjeta-sector:hover { transform: translateY(-6px); }
.tarjeta-sector img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; transition: transform .5s var(--curva); }
.tarjeta-sector:hover img { transform: scale(1.025); }
/* Retrabajo slide 48: más aire entre imagen y título del sector */
.tarjeta-sector h2, .tarjeta-sector h3 { font-size: var(--titulo-s); margin-top: 1.75rem; }
.tarjeta-sector__frase { margin-top: .35rem; font-family: var(--serif); font-style: italic; font-size: var(--texto-l); line-height: 1.3; color: var(--marron-suave); }
.tarjeta-sector .pilar__mas { margin-top: .9rem; align-self: auto; display: inline-block; }
/* Retrabajos slides 9 y 47: las 3 imágenes de sector alineadas a la misma altura */
/* Retrabajo V.2 (3): además, foto · título · frase · enlace comparten FILA entre
las tres tarjetas, así el «Ver el sector» queda a la misma altura aunque un
título ocupe dos líneas. Subgrid = alineación real, sin alturas fijas. */
@media (min-width: 900px) {
.triptico {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto auto;
/* row-gap 0 a propósito: las filas son las FILAS INTERNAS de la tarjeta
(subgrid), no separación entre tarjetas. El aire interno lo siguen
poniendo los márgenes de cada elemento. */
column-gap: clamp(1.5rem, 3vw, 3rem);
row-gap: 0;
align-items: start;
}
.tarjeta-sector {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
align-content: start;
}
.tarjeta-sector .pilar__mas { justify-self: center; align-self: start; }
/* Retrabajo V.4 (9): dentro de su fila del subgrid, título y frase se centran
en vertical. Antes se apoyaban arriba, así que junto a un título de dos
líneas («Comercio local y cultura») los de una sola quedaban colgados de la
parte alta de la fila en vez de compartir eje óptico con él.
Se centra el CONTENIDO, no la caja: la caja sigue estirada de fila a fila,
así el margen superior de cada elemento se descuenta igual en las tres
tarjetas y el eje coincide de verdad. */
.tarjeta-sector h2,
.tarjeta-sector h3,
.tarjeta-sector__frase {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* Lista con ✦ (detalle de sectores y landings) */
.lista-esencia { display: grid; gap: .55rem; font-size: var(--texto-s); }
.lista-esencia--destacada { margin-top: var(--esp-bloque); max-width: 62ch; gap: 1rem; font-size: var(--texto-m); }
.lista-esencia li { padding-left: 1.3rem; position: relative; line-height: 1.55; }
.lista-esencia li::before { content: "✦"; position: absolute; left: 0; top: .12em; font-size: .7em; color: var(--marron-suave); }
/* Detalle dentro de cada capítulo de sector */
.sector-detalle { margin-top: 1.75rem; border-top: 1.5px solid var(--linea); padding-top: 1.4rem; max-width: 46ch; }
.sector-detalle h4 {
font-family: var(--sans);
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .9rem;
}
.sector-detalle__servicios { margin-top: 1.1rem; font-size: var(--texto-s); }
.sector-detalle__servicios a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sector-detalle__servicios a:hover { color: var(--marron-suave); }
/* La realidad del sector (manifiesto editorial de páginas de sector) */
.realidad { padding-block: var(--esp-seccion); }
.realidad__lead {
font-family: var(--serif);
font-style: italic;
font-size: var(--titulo-m);
line-height: 1.25;
max-width: 26ch;
text-wrap: balance;
}
/* Subtítulo bajo el lead (retrabajo slide 52) */
.realidad__sub { margin-top: 1.1rem; font-size: var(--texto-l); color: var(--marron-suave); max-width: 46ch; }
.realidad__prosa { display: grid; gap: 1.75rem; margin-top: var(--esp-bloque); }
.realidad__prosa p { max-width: 58ch; line-height: 1.8; }
.sobre-prosa { display: grid; gap: 1.75rem; align-content: start; }
@media (min-width: 900px) {
.realidad__prosa { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.realidad__prosa > p:only-child { grid-column: 1 / -1; max-width: 60ch; }
}
/* Manifiesto de landing de servicio: imagen izquierda + texto que se
desplaza hacia la derecha (retrabajos slides 17/24/31/38) */
.realidad--split { overflow: clip; }
.realidad__grid { display: grid; gap: 2.5rem; align-items: center; }
.realidad__foto { position: relative; width: min(70vw, 320px); }
.realidad__foto img:not(.sticker) { width: 100%; aspect-ratio: 3 / 3.9; }
.realidad--split .realidad__prosa { margin-top: 1.75rem; }
@media (min-width: 900px) {
.realidad__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
.realidad__foto { width: min(100%, 380px); }
}
/* Bloque pegado al anterior: 50% del aire habitual (retrabajos «reducir el aire») */
.seccion--pegada { padding-top: calc(var(--esp-seccion) / 2); }
/* Título de sección forzado a una línea (retrabajos «poner el texto en 1 sola línea») */
.titulo-una-linea { max-width: none; }
/* «Trabajamos con:» separado del párrafo del héroe (retrabajo slide 51) */
.heroe-servicio__trabajamos { margin-top: 1.5rem; font-weight: 600; }
/* Bloques titulados «Qué resolvemos» (páginas de sector) */
.resolvemos { padding-block: var(--esp-seccion); }
.resolvemos__grid { display: grid; gap: 2.5rem; margin-top: var(--esp-bloque); }
.resolvemos__item { border-top: 1.5px solid var(--marron); padding-top: 1.3rem; }
.resolvemos__item h3 { font-size: var(--titulo-s); max-width: 18ch; }
.resolvemos__item p { margin-top: .7rem; font-size: var(--texto-s); line-height: 1.7; max-width: 44ch; }
@media (min-width: 900px) {
/* Retrabajo V.3 (1): sin desfase; los filetes superiores hacen de pauta. */
.resolvemos__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2rem, 4vw, 4rem); align-items: start; }
}
/* Por qué Crema para este sector (bloque oscuro breve) */
.porque-sector { padding-block: var(--esp-seccion); }
.porque-sector__cita {
font-family: var(--serif);
font-style: italic;
font-size: var(--titulo-m);
color: var(--crema);
max-width: 20ch;
text-wrap: balance;
}
.porque-sector__texto { margin-top: 1.5rem; max-width: 58ch; line-height: 1.8; color: rgba(247, 243, 236, .92); }
.porque-sector .boton { margin-top: 2rem; }
/* «Según tu negocio» en landings de servicio */
.segun-negocio { padding-block: var(--esp-seccion); }
.segun-negocio__grid { display: grid; gap: 1.1rem; margin-top: var(--esp-bloque); }
/* Retrabajo V.2 (2): la tarjeta es una columna flex y el enlace se ancla abajo,
así los «Ver el servicio» quedan a la misma altura aunque las listas midan
distinto (las tarjetas ya tienen la misma altura por el grid). */
.negocio-carta {
display: flex;
flex-direction: column;
background: var(--hueso);
border: 1.5px solid var(--marron);
padding: 1.6rem 1.5rem;
}
.negocio-carta h3 { font-size: var(--titulo-s); }
.negocio-carta .lista-esencia { margin-top: 1rem; }
.negocio-carta__enlace { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 1.1rem; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; padding-bottom: .2rem; }
/* Retrabajo V.3 (1): las tarjetas de igual fondo se alinean a la misma línea.
El desfase decorativo de la tarjeta central se retira: sobre un fondo común
se leía como un descuadre, no como una decisión. */
@media (min-width: 900px) {
/* Con una sola fila de tarjetas sí cabe subgrid: título, lista y enlace
comparten fila entre columnas, así un título de dos líneas no baja la
lista de su tarjeta respecto a las vecinas. */
.segun-negocio__grid:not(.segun-negocio__grid--cuatro) {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(1.25rem, 2.5vw, 2rem);
row-gap: 0;
align-items: stretch;
}
.segun-negocio__grid:not(.segun-negocio__grid--cuatro) > .negocio-carta {
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 3; align-content: start;
}
.segun-negocio__grid:not(.segun-negocio__grid--cuatro) > .negocio-carta > .negocio-carta__enlace {
margin-top: 0; align-self: end; justify-self: start;
}
/* Variante de 4 tarjetas (páginas de sector): 2×2, sin subgrid (dos filas) */
.segun-negocio__grid--cuatro { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
}
@media (min-width: 1200px) {
.segun-negocio__grid--cuatro { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- Sectores como capítulos (solo página de sectores) ---------- */
.capitulo-sector { position: relative; overflow: clip; padding-block: clamp(4rem, 7vw, 6.5rem); }
.capitulo-sector .palabra-gigante {
position: absolute;
top: .35em;
left: 50%;
transform: translateX(-50%);
opacity: .16;
}
.capitulo-sector__grid {
position: relative;
display: grid;
gap: 2.25rem;
align-items: end;
}
.capitulo-sector__foto { position: relative; width: min(100%, 400px); justify-self: center; }
.capitulo-sector__foto img:not(.sticker) { width: 100%; aspect-ratio: 3 / 3.8; }
.capitulo-sector__texto h3 { font-size: var(--titulo-l); }
.capitulo-sector__frase { margin-top: .9rem; font-family: var(--serif); font-style: italic; font-size: var(--texto-l); line-height: 1.3; }
.capitulo-sector__lista { margin-top: 1.1rem; max-width: 46ch; font-size: var(--texto-s); line-height: 1.65; }
@media (min-width: 900px) {
.capitulo-sector__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
.capitulo-sector--invertido .capitulo-sector__foto { order: 2; }
}
.sectores__cta { padding-block: clamp(3.5rem, 5vw, 5rem); text-align: center; }
/* Retrabajos slides 9 y 48: el cierre respira en 2 líneas exactas (el
manda) */
.sectores__cierre { font-family: var(--serif); font-size: var(--titulo-s); line-height: 1.2; max-width: none; margin-inline: auto; }
.sectores__accion { position: relative; display: inline-flex; margin-top: 2rem; }
.sectores__accion .nota-manuscrita { position: absolute; left: calc(100% + 1rem); top: 50%; transform: translateY(-50%) rotate(-6deg); }
@media (max-width: 719px) {
.sectores__accion { flex-direction: column; align-items: center; }
.sectores__accion .nota-manuscrita { position: static; transform: rotate(-4deg); margin-top: .75rem; }
}
/* ---------- Metodología (rayas de toldo) ---------- */
.metodo { padding-block: var(--esp-seccion); }
.metodo .titulo-seccion { max-width: 24ch; }
.metodo__pasos { display: grid; gap: 1.1rem; margin-top: var(--esp-bloque); }
.paso {
position: relative;
background: var(--hueso);
border: 1.5px solid var(--marron);
padding: 1.6rem 1.5rem 1.5rem;
}
.paso__numero {
position: absolute;
top: -1.1rem;
right: 1rem;
font-family: var(--serif);
font-style: italic;
font-size: 2.4rem;
line-height: 1;
color: var(--marron);
background: var(--crema);
padding: .15rem .7rem .05rem;
border: 1.5px solid var(--marron);
border-radius: 999px;
}
.paso h3 { font-size: var(--titulo-s); }
.paso p { margin-top: .7rem; font-size: var(--texto-s); line-height: 1.65; max-width: 30ch; }
@media (min-width: 900px) {
/* Retrabajo V.3 (1): los cuatro pasos comparten línea de base. */
.metodo__pasos { grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
}
/* ---------- Proyectos (palabra gigante + grid) ---------- */
.proyectos { position: relative; padding-block: var(--esp-seccion); overflow: clip; }
.proyectos__cabecera { text-align: center; }
.proyectos__cabecera .titulo-seccion, .proyectos__cabecera .titulo-seccion__apoyo { margin-inline: auto; }
/* Retrabajo slide 11: título en 2 líneas exactas (el
manda) */
.proyectos__cabecera .titulo-seccion { max-width: none; }
.proyectos__escena { position: relative; margin-top: var(--esp-bloque); }
.proyectos__escena .palabra-gigante--outline { text-align: center; -webkit-text-stroke-color: rgba(81, 50, 41, .35); }
/* 13/09 (Juli): las fotos pisan la mitad baja de la palabra y pasan por
delante. Se probó a continuar las letras dentro de cada foto con una copia en
contorno crema y Juli la quitó («quita el amarillento»): la palabra es solo
el contorno marrón. --pg-x la mueve el scroll. */
.proyectos__escena .palabra-gigante { transform: translateX(var(--pg-x, 0%)); }
.proyectos__grid { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: calc(clamp(3.4rem, 15vw, 13.5rem) * -.5); }
.proyecto figure { position: relative; overflow: hidden; border: 1.5px solid var(--marron); background: var(--hueso); }
.proyecto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--curva); }
.proyecto:hover img { transform: scale(1.035); }
.proyecto__info { padding-top: 1.1rem; }
.proyecto__info h3, .proyecto__info h2 { font-size: var(--titulo-s); }
.proyecto .pilar__mas { margin-top: .9rem; }
.proyecto__meta--heroe { margin-top: .8rem; }
.proyectos__grid--fluido { margin-top: var(--esp-bloque); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.proyectos__ver { text-align: center; margin-top: 3rem; }
.destacado__enlace { margin-top: 1.5rem; }
.proyecto__meta { margin-top: .4rem; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--marron-suave); }
.proyecto__resultado { margin-top: .7rem; font-size: var(--texto-s); line-height: 1.6; max-width: 34ch; }
/* Retrabajo slide 11: las 3 imágenes de proyecto alineadas a la misma altura */
/* Retrabajo V.2 (6): simetría real. Las cinco filas de la tarjeta (foto, título,
meta, resultado, enlace) se comparten entre las tres columnas vía subgrid,
así una meta de dos líneas no descuadra a sus vecinas. */
@media (min-width: 900px) {
.proyectos__grid:not(.proyectos__grid--fluido) {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto auto auto;
column-gap: clamp(2rem, 4vw, 3rem);
row-gap: 0; /* ver nota del tríptico: las filas son internas a la tarjeta */
align-items: start;
}
.proyectos__grid:not(.proyectos__grid--fluido) .proyecto {
display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start;
}
.proyectos__grid:not(.proyectos__grid--fluido) .proyecto__info {
display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start;
}
.proyectos__grid:not(.proyectos__grid--fluido) .pilar__mas { justify-self: start; align-self: start; }
}
@media (max-width: 899px) { .proyectos__grid { margin-top: 1.5rem; } .proyectos__escena .palabra-gigante { display: none; } }
/* Retrabajo V.4: «Otros proyectos» de las fichas son siempre dos tarjetas. Con
`auto-fit` el salto a dos columnas caía en un ancho que no controlábamos, y ahí
un título de dos líneas («Porky’s Uptown Barcelona») dejaba la meta de su
vecina 32px más arriba. Se fija el salto y se cosen las tres filas por subgrid,
igual que la rejilla de tres de la home. */
@media (min-width: 660px) {
.proyectos__grid--fluido {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
row-gap: 0; /* las filas son internas a la tarjeta, como en la rejilla de tres */
align-items: start;
}
.proyectos__grid--fluido .proyecto {
display: grid;
grid-template-columns: minmax(0, 1fr); /* sin esto la tarjeta crece a max-content */
grid-template-rows: subgrid; grid-row: span 3; align-content: start;
}
.proyectos__grid--fluido .proyecto__info {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid; grid-row: span 2; align-content: start;
}
}
/* ---------- Por qué Crema (postal sobre tinta) ---------- */
.porque { padding-block: var(--esp-seccion); }
.porque__grid { display: grid; gap: var(--esp-bloque); align-items: center; }
.porque__texto h2 { font-size: var(--titulo-m); color: var(--crema); max-width: 26ch; text-wrap: balance; }
.porque__texto p { margin-top: 1.4rem; max-width: 54ch; line-height: 1.75; color: rgba(247, 243, 236, .92); }
.porque__destacado { font-family: var(--serif); font-style: italic; font-size: var(--texto-l); color: var(--crema); }
.porque__texto .boton { margin-top: 2.25rem; }
.porque__postal { justify-self: center; width: min(100%, 360px); }
.porque__postal .cinta { top: -12px; left: 34%; transform: rotate(-4deg); }
@media (min-width: 900px) {
.porque__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.porque__postal { justify-self: end; margin-right: clamp(0rem, 3vw, 2.5rem); }
}
/* ---------- Journal ---------- */
.journal { padding-block: var(--esp-seccion); }
.journal__lista { margin-top: var(--esp-bloque); border-top: 1.5px solid var(--marron); }
.articulo {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: .4rem 1.5rem;
padding-block: 1.6rem;
padding-inline: 1rem;
margin-inline: -1rem;
border-bottom: 1.5px solid var(--linea);
transition: background-color .25s;
}
/* Retrabajo V.2 (8): variante con miniatura a la izquierda para dar vida al
listado. Doble clase a propósito: las reglas base de .articulo__categoria /
h3 van más abajo en el archivo y con un solo nivel empatarían y ganarían. */
/* Las filas explícitas son obligatorias: sin `grid-template-rows`, un
`grid-row: 1 / -1` se resuelve contra la rejilla EXPLÍCITA (que aquí no
existía) y colapsaba a una sola fila — por eso la miniatura no ocupaba la
altura de la entrada por más `stretch` que se le pusiera. */
.articulo.articulo--foto { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
/* Retrabajo V.3 (2): la miniatura dejaba de estar alineada con nada — cuadrada
y centrada en la fila, se leía como una foto colgada encima del titular.
Ahora ocupa toda la altura de la entrada (`stretch`), así que su borde
superior casa con la categoría y el inferior con el final del sumario: foto y
titular comparten caja, que es lo que pide una lista editorial. */
.articulo.articulo--foto > .articulo__thumb { grid-column: 1; grid-row: 1 / -1; align-self: stretch; }
.articulo.articulo--foto > .articulo__categoria,
.articulo.articulo--foto > h3,
.articulo.articulo--foto > .articulo__dek { grid-column: 2; }
.articulo.articulo--foto > .articulo__flecha,
.articulo.articulo--foto > .articulo__pronto { grid-column: 3; }
.articulo__thumb {
width: clamp(84px, 10vw, 124px);
min-height: clamp(76px, 9vw, 108px);
overflow: hidden;
border: 1.5px solid var(--marron);
}
.articulo__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva); }
a.articulo:hover .articulo__thumb img { transform: scale(1.06); }
@media (max-width: 719px) {
.articulo__thumb { display: none; }
.articulo.articulo--foto { grid-template-columns: minmax(0, 1fr) auto; }
.articulo.articulo--foto > .articulo__categoria,
.articulo.articulo--foto > h3,
.articulo.articulo--foto > .articulo__dek { grid-column: 1; }
.articulo.articulo--foto > .articulo__flecha,
.articulo.articulo--foto > .articulo__pronto { grid-column: 2; }
}
a.articulo:hover { background: rgba(253, 229, 176, .35); }
.articulo h3 { grid-column: 1; font-size: var(--titulo-s); max-width: 30ch; transition: transform .25s var(--curva); }
a.articulo:hover h3 { transform: translateX(.75rem); }
.articulo__categoria { grid-column: 1; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--marron-suave); }
.articulo__dek { grid-column: 1; margin-top: .35rem; font-size: var(--texto-s); color: var(--marron-suave); max-width: 52ch; line-height: 1.6; }
.articulo__flecha { grid-row: 1 / -1; grid-column: -1; font-size: 1.6rem; transition: transform .25s var(--curva); }
a.articulo:hover .articulo__flecha { transform: translateX(6px); }
.articulo__pronto {
grid-row: 1 / -1;
grid-column: -1;
font-family: var(--mano);
font-size: 1.3rem;
color: var(--marron-suave);
transform: rotate(-3deg);
}
.journal .enlace-subrayado { margin-top: 2.5rem; }
.journal--pagina { padding-top: var(--esp-bloque); }
.journal__estreno { margin-top: 2.5rem; }
/* ---------- CTA banda + formulario ----------
Retrabajo slides 22/29/…: texto y botón entran desde fuera y se
encuentran en el centro, para no dejar el pie vacío. */
.cta-banda { position: relative; background: var(--crema); border-block: 1.5px solid var(--marron); padding-block: clamp(3.5rem, 6vw, 6rem); overflow: clip; }
.cta-banda__inner { display: grid; gap: 2rem; justify-items: center; text-align: center; }
.cta-banda__titulo { font-size: var(--titulo-m); color: var(--tinta); max-width: 30ch; text-wrap: balance; }
.cta-banda__titulo span, .cta-banda__titulo em { display: block; }
.cta-banda__micro { margin-top: .9rem; font-size: var(--texto-s); color: var(--marron-suave); max-width: 34ch; margin-inline: auto; }
.agenda { background: var(--crema); border-top: 1.5px solid var(--marron); padding-block: var(--esp-seccion); }
.agenda--pagina { border-top: 0; }
.agenda__inner .etiqueta { margin-bottom: 1.25rem; }
.agenda__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.agenda__titulo { font-size: var(--titulo-l); color: var(--tinta); max-width: 30ch; text-wrap: balance; }
.agenda__titulo span, .agenda__titulo em { display: block; }
.agenda__texto { margin-top: 1.5rem; max-width: 52ch; font-size: var(--texto-l); line-height: 1.6; color: var(--tinta); }
/* --- Calendario en vivo (embed de Cal.com) --------------------------------
El widget es de un tercero: no podemos maquetar su interior, así que lo
enmarcamos con el lenguaje de la casa (borde marrón + papel hueso) para que
no parezca un parche pegado sobre el crema. Alto mínimo reservado para que
no salte el layout al llegar el iframe (CLS). */
.calendario { width: min(100%, 940px); margin-top: var(--esp-bloque); }
.calendario__marco {
border: 1.5px solid var(--marron);
border-radius: 22px;
background: var(--blanco-postal);
overflow: hidden;
min-height: 560px;
}
.calendario__marco[hidden] { display: none; }
.calendario__marco--listo { min-height: 0; }
/* El embed inyecta su propio iframe: que ocupe el marco y nunca desborde. */
.calendario__marco iframe { display: block; width: 100% !important; border: 0; }
.calendario__estados { margin-top: 1.25rem; display: grid; gap: .75rem; justify-items: center; }
.calendario__estados[hidden] { display: none; }
.calendario__estado {
margin: 0;
max-width: 46ch;
font-size: var(--texto-s);
line-height: 1.6;
color: var(--marron-suave);
}
.calendario__estado[hidden], .calendario__aparte[hidden] { display: none; }
.calendario__aparte { font-size: var(--texto-s); }
/* Móvil: el mes de Cal necesita más alto y menos radio para no comerse aire. */
@media (max-width: 719px) {
.calendario__marco { min-height: 680px; border-radius: 16px; }
}
.agenda__boton { margin-top: var(--esp-bloque); }
.agenda__micro { margin-top: 1.1rem; font-size: var(--texto-s); color: var(--marron-suave); }
/* ---------- Páginas de servicio ---------- */
.heroe-servicio {
background: var(--acento);
color: var(--acento-texto);
border-bottom: 1.5px solid var(--marron);
padding-block: clamp(3rem, 6vh, 5rem) clamp(3.5rem, 7vh, 6rem);
position: relative;
overflow: clip;
}
.heroe-servicio__letra {
position: absolute;
right: clamp(2rem, 26vw, 24rem);
top: 50%;
transform: translateY(-52%);
font-family: var(--serif);
font-size: clamp(16rem, 42vh, 30rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 2px color-mix(in srgb, currentColor 26%, transparent);
pointer-events: none;
user-select: none;
}
.heroe-servicio__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.heroe-servicio h1 { font-size: var(--titulo-xl); line-height: 1.02; }
.heroe-servicio__frase { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: var(--titulo-s); line-height: 1.2; }
.heroe-servicio__sub { margin-top: 1.25rem; max-width: 46ch; font-size: var(--texto-l); line-height: 1.55; }
.heroe-servicio .boton { margin-top: 2rem; }
.heroe-servicio__foto { position: relative; width: min(100%, 380px); justify-self: center; }
.heroe-servicio__foto img:not(.sticker) { width: 100%; aspect-ratio: 3 / 3.9; }
.heroe-servicio .pastillas { margin-top: 1.25rem; }
.heroe-servicio .pastillas li { background: color-mix(in srgb, var(--hueso) 72%, transparent); }
@media (max-width: 899px) { .heroe-servicio__letra { display: none; } }
@media (min-width: 900px) {
.heroe-servicio__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.heroe-servicio__foto { justify-self: end; }
}
/* Héroes sobre fondo oscuro (tinta de digitalización y azul de la ficha 01):
el borde, la etiqueta, el arco de la foto y el botón se pasan a crema, que es
lo único que contrasta ahí. Retrabajo V.4: el azul se suma al mismo trato. */
.tema-digitalizacion .heroe-servicio,
.tema-azul .heroe-servicio { border-bottom-color: var(--crema); }
.tema-digitalizacion .heroe-servicio .etiqueta,
.tema-azul .heroe-servicio .etiqueta { color: rgba(253, 229, 176, .85); }
.bloque--tinta .arco,
.tema-digitalizacion .heroe-servicio .arco,
.tema-azul .heroe-servicio .arco { border-color: var(--crema); }
.bloque--tinta .nota-manuscrita { color: rgba(253, 229, 176, .9); }
.tema-digitalizacion .heroe-servicio .boton--primario,
.tema-azul .heroe-servicio .boton--primario { background: var(--crema); color: var(--tinta); }
.tema-digitalizacion .heroe-servicio .boton--primario:hover,
.tema-azul .heroe-servicio .boton--primario:hover { background: var(--crema-viva); }
.tema-digitalizacion .heroe-servicio :focus-visible,
.tema-azul .heroe-servicio :focus-visible { outline-color: var(--crema); }
/* El meta del héroe hereda `--marron-suave`, que sobre azul no se lee */
.tema-azul .heroe-servicio { --marron-suave: rgba(247, 243, 236, .82); }
.tema-marketing .heroe-servicio, .tema-marketing .heroe-servicio__frase { color: var(--tinta); }
/* ---------- Relato del proyecto (fichas · 13/09, Juli) ----------
Encabeza la ficha; debajo van la cinta de fotos y el tríptico. Tres párrafos
en serif, con punto y aparte (Juli), que se entintan con el scroll como los
manifiestos (ver SEL_TINTA en main.js). Va a todo el ancho del contenedor
(con 36ch quedaba un hueco a la derecha); por eso sube a tamaño display,
para que la línea siga rondando los 55 caracteres.
13/09 (Juli: «quedan demasiado formales, sosos»): cada párrafo es un paso
numerado (01 —), la acción va en cursiva con el subrayado crema del
manifiesto de la home (se vierte al terminar de entintarse) y en escritorio
bajan en escalera, para que se lean como una secuencia y no como un bloque. */
.relato .contenedor { counter-reset: relato; }
.relato__texto {
counter-increment: relato;
margin-top: 1.4rem;
font-family: var(--serif);
font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
line-height: 1.18;
letter-spacing: -.012em;
color: var(--tinta);
text-wrap: pretty;
}
/* El número no se parte en palabras (es un pseudo): queda entero desde el
principio y hace de guía mientras la frase se entinta. */
.relato__texto::before {
content: counter(relato, decimal-leading-zero);
display: block;
width: fit-content;
margin-bottom: .55rem;
padding-right: 3.1rem;
font-size: 1.05rem;
font-style: italic;
line-height: 1;
letter-spacing: .02em;
color: var(--marron-suave);
background: linear-gradient(currentColor, currentColor) right 60% / 2.3rem 1px no-repeat;
}
.relato__texto em {
background: linear-gradient(transparent 62%, var(--crema) 62%);
padding-inline: .06em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.relato__texto + .relato__texto { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 900px) {
.relato__texto { max-width: 32ch; }
.relato__texto + .relato__texto { margin-left: 14%; }
.relato__texto + .relato__texto + .relato__texto { margin-left: 28%; }
}
/* ---------- Tríptico del proyecto (fichas · vuelve el 13/09) ----------
«El negocio · Qué hicimos · El resultado», debajo de la cinta de fotos. */
.entregables__grid { display: grid; gap: 2.5rem; }
.grupo-entrega { border-top: 1.5px solid var(--marron); padding-top: 1.4rem; }
.grupo-entrega h3 { font-size: var(--titulo-s); }
.grupo-entrega > p { margin-top: 1rem; font-size: var(--texto-s); line-height: 1.65; }
.grupo-entrega .lista-esencia { margin-top: 1rem; }
.grupo-entrega > .cita-resultado { font-family: var(--serif); font-style: italic; font-size: var(--texto-l); line-height: 1.4; }
@media (min-width: 900px) {
.entregables__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
}
/* ---------- Galería del proyecto: cinta continua (fichas · 13/09, Juli) ----------
Juli: que las fotos «pasen más fluidas». Ya no hay pase foto a foto: la tira
corre sola, a velocidad constante y sin fin, de borde a borde de la pantalla.
Misma altura para todas y ancho natural: cada foto conserva su encuadre y
nada se recorta. Con el ratón encima frena suave hasta pararse; se puede
arrastrar (con inercia) y el botón la para del todo. Sin JS, o con
reduced-motion, es un scroll lateral nativo con snap (ver main.js). */
.galeria__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.galeria__cabecera .nota-manuscrita { display: inline-block; transform: rotate(-3deg); }
.galeria__boton {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border: 1.5px solid var(--marron);
border-radius: 50%;
background: transparent;
color: var(--marron);
cursor: pointer;
transition: background-color .25s var(--curva), color .25s var(--curva), opacity .25s var(--curva),
translate .25s var(--curva-elevar), box-shadow .25s var(--curva-elevar);
}
/* El gesto «elevar» de los botones, a escala de control */
.galeria__boton:hover:not(:disabled) { background: var(--marron); color: var(--crema); translate: -2px -3px; box-shadow: 4px 5px 0 -1px var(--tinta); }
.galeria__boton:active { translate: 0 0; box-shadow: none; }
.galeria__boton:disabled { opacity: .3; cursor: default; }
/* El botón de pausa va relleno: es el control que manda sobre el pase */
.galeria__boton--pausa { background: var(--marron); color: var(--crema); }
.galeria__icono-seguir { display: none; }
.galeria__boton--pausa[aria-pressed="true"] .galeria__icono-pausa { display: none; }
.galeria__boton--pausa[aria-pressed="true"] .galeria__icono-seguir { display: block; }
.galeria__boton[hidden] { display: none; }
/* La ventana recorta; la pista es lo que se mueve. Separadas para que el
revelado por scroll (data-reveal, en la ventana) no pise el transform de la
cinta. Sin cinta: scroll nativo alineado con el borde del contenedor. */
.galeria__ventana {
margin-top: 2.25rem;
padding-left: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
padding-right: var(--margen);
scroll-padding-inline: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen))) var(--margen);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.galeria__ventana::-webkit-scrollbar { display: none; }
.galeria__ventana:focus-visible { outline-offset: -4px; }
.galeria__pista { display: flex; gap: var(--galeria-hueco); width: max-content; }
.galeria { --galeria-hueco: clamp(.75rem, 1.4vw, 1.25rem); --galeria-alto: clamp(16rem, 46svh, 27rem); }
.galeria__foto { flex: 0 0 auto; scroll-snap-align: start; }
/* width:auto + altura común: el ancho sale de width/height del HTML, así que la
cinta mide lo mismo antes y después de cargar las fotos (sin CLS). */
.galeria__foto img,
.galeria__foto video {
display: block;
width: auto;
height: var(--galeria-alto);
object-fit: cover;
border: 1.5px solid var(--marron);
background: var(--hueso);
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.galeria__foto video { aspect-ratio: 9 / 16; }
/* Cinta en marcha: de borde a borde, con los extremos fundidos en el crema */
.galeria.con-cinta .galeria__ventana {
padding-inline: 0;
overflow: hidden;
scroll-snap-type: none;
cursor: grab;
touch-action: pan-y; /* el gesto vertical sigue siendo de la página */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.galeria.con-cinta.is-arrastrando .galeria__ventana { cursor: grabbing; }
.galeria.con-cinta .galeria__pista { will-change: transform; }
@media (max-width: 599px) {
.galeria { --galeria-alto: clamp(14rem, 68vw, 21rem); }
}
@media (prefers-reduced-motion: reduce) {
.galeria__boton:hover:not(:disabled) { translate: none; }
}
/* Proyecto destacado en landing */
.destacado { padding-block: var(--esp-seccion); }
.destacado__tarjeta {
display: grid;
gap: 1.5rem;
background: var(--hueso);
border: 1.5px solid var(--marron);
padding: clamp(1.25rem, 3vw, 2.5rem);
margin-top: var(--esp-bloque);
}
.destacado__tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1.5px solid var(--marron); }
.destacado__tarjeta h3 { font-size: var(--titulo-s); }
.destacado__tarjeta .proyecto__resultado { max-width: 46ch; }
@media (min-width: 900px) {
/* 6/5 en vez de 5/7: con 7fr el texto usaba 400 de sus 660px y dejaba un
hueco muerto a la derecha. Ahora la foto manda (579px en vez de 443) y el
texto llena su columna. El aspect-ratio 4/3 se mantiene: sin él la imagen
caía a su proporción vertical nativa y la tarjeta se disparaba a 800px. */
.destacado__tarjeta { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
/* FAQ (agenda) */
.faq { padding-block: var(--esp-seccion); }
.faq__lista {
margin-top: var(--esp-bloque);
max-width: 760px;
background: var(--hueso);
border: 1.5px solid var(--marron);
padding: .4rem 1.5rem;
}
.faq details { border-bottom: 1.5px solid var(--linea); }
.faq summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-block: 1.3rem;
font-family: var(--serif);
font-size: var(--texto-l);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform .25s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.4rem; max-width: 60ch; color: var(--marron-suave); }
/* Pasos post-envío (agenda) */
.despues { padding-block: var(--esp-seccion); }
.despues__pasos { display: grid; gap: 1.1rem; margin-top: var(--esp-bloque); counter-reset: dp; }
/* Solo los hijos directos cuentan como paso (dentro puede haber lista-esencia) */
.despues__pasos > li {
counter-increment: dp;
border-top: 1.5px solid var(--marron);
padding-top: 1.2rem;
font-size: var(--texto-s);
line-height: 1.65;
}
.despues__pasos > li::before {
content: counter(dp);
display: block;
font-family: var(--serif);
font-style: italic;
font-size: 2rem;
color: var(--marron-suave);
margin-bottom: .4rem;
}
.despues__pasos strong { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--titulo-s); margin-bottom: .35rem; }
@media (min-width: 900px) { .despues__pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
/* Variante «¿Cómo lo hacemos?» de las landings de servicio (retrabajos 18/25/32/39).
Retrabajo V.3 (3): eran cuatro filetes dentro de una rejilla de TRES columnas
—la regla de `.despues__pasos` va más abajo en el archivo y ganaba por orden—,
así que el paso 04 caía siempre solo en una segunda fila. Ahora son cuatro
tarjetas con el mismo lenguaje que la metodología de la home (píldora de
número + papel + borde), 4 columnas en escritorio y 2×2 en tablet: nunca
queda una descolgada. La doble clase gana a la regla de 3 columnas. */
.despues__pasos.despues__pasos--cuatro { position: relative; gap: 1.6rem 1.1rem; }
.despues__pasos.despues__pasos--cuatro > li {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
background: var(--blanco-postal);
border: 1.5px solid var(--marron);
padding: 1.9rem 1.4rem 1.5rem;
}
/* El número es un `.paso__numero` real en el HTML, no un contador CSS: nació
así para que el hilo pudiera medir su centro y se queda porque además es
contenido, no decoración. */
.despues__pasos.despues__pasos--cuatro > li::before { content: none; }
@media (min-width: 720px) {
.despues__pasos.despues__pasos--cuatro { grid-template-columns: repeat(2, 1fr); gap: 1.9rem clamp(1.1rem, 2.2vw, 1.75rem); }
}
/* En escritorio, las tres filas internas (título · resumen · entregables) se
comparten entre las cuatro tarjetas vía subgrid: un resumen de dos líneas ya
no baja la lista de su tarjeta respecto a las vecinas. Mismo recurso que en
el grid de proyectos; row-gap 0 porque las filas son internas a la tarjeta. */
@media (min-width: 1180px) {
.despues__pasos.despues__pasos--cuatro {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(1.1rem, 2.2vw, 1.75rem);
row-gap: 0;
align-items: stretch;
}
.despues__pasos.despues__pasos--cuatro > li {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: span 3;
align-content: start;
}
}
.paso-resumen { display: block; font-family: var(--serif); font-style: italic; font-size: var(--texto-l); line-height: 1.35; margin-bottom: .75rem; }
.despues__pasos .lista-esencia { margin-top: .35rem; }
.despues__pasos.despues__pasos--cuatro .lista-esencia { margin-top: .35rem; align-self: start; }
.despues__pasos--cuatro .paso__numero {
position: absolute;
top: -1.1rem;
right: 1rem;
font-family: var(--serif);
font-style: italic;
font-size: 1.9rem;
line-height: 1;
color: var(--acento-texto, var(--marron));
background: var(--acento, var(--crema));
padding: .1rem .65rem .05rem;
border: 1.5px solid var(--marron);
border-radius: 999px;
}
.despues__pasos--cuatro strong { font-size: var(--titulo-s); margin-bottom: .5rem; max-width: 12ch; }
.resolvemos__item .paso-resumen { margin-top: .6rem; margin-bottom: .35rem; }
/* ---------- Footer ---------- */
.pie { background: var(--tinta); color: var(--hueso); padding-block: var(--esp-seccion) 2.5rem; }
.pie__cabecera { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 720px) { .pie__cabecera { grid-template-columns: 1fr auto; } }
.sello--pie { position: static; background: transparent; border: 1.5px solid var(--linea-clara); width: 128px; }
.sello--pie svg, .sello--pie .sello__c { animation-duration: 30s; }
.pie__ciudad { display: inline-block; padding-block: .55rem; color: rgba(247, 243, 236, .75); }
.pie__lema { font-family: var(--serif); font-size: var(--titulo-m); color: var(--crema); line-height: 1.2; max-width: 24ch; text-wrap: balance; }
.pie__lema-sub { display: block; margin-top: 1rem; font-family: var(--sans); font-size: var(--texto-m); font-weight: 500; color: rgba(247, 243, 236, .85); max-width: 44ch; }
.pie__columnas { display: grid; gap: 2.5rem; margin-top: var(--esp-bloque); padding-top: var(--esp-bloque); border-top: 1px solid var(--linea-clara); }
.pie__col h4 { font-family: var(--sans); font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 243, 236, .6); margin-bottom: 1rem; }
.pie__col ul { display: grid; gap: .15rem; }
.pie__col a { display: inline-block; padding-block: .55rem; border-bottom: 1px solid transparent; transition: border-color .2s; }
.pie__col a:hover { border-bottom-color: var(--crema); }
.pie__firma { margin-top: var(--esp-bloque); font-size: var(--texto-xs); color: rgba(247, 243, 236, .55); }
@media (min-width: 720px) { .pie__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- Revelado (solo con JS y sin reduced-motion) ---------- */
html.con-animacion [data-reveal] { opacity: 0; transform: translateY(26px); }
html.con-animacion .linea-mascara > span { transform: translateY(115%); }
/* Titulares partidos en palabras por main.js (solo existen con GSAP y sin
reduced-motion; el estado inicial lo pone el JS). La máscara es un clip-path
y no overflow:hidden, que en un inline-block baja la línea base y descuadra
el titular. Se abre un poco por arriba, los lados y abajo para no morder
tildes, cursivas ni descendentes. `span.` gana a `.agenda__titulo span`,
que pone en bloque cada span de ese titular. */
span.palabra { display: inline-block; clip-path: inset(-.2em -.15em -.28em -.15em); }
span.palabra__in { display: inline-block; }
/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.marquesina__pista { animation: none; }
.marquesina__grupo[aria-hidden="true"] { display: none; }
.sello svg, .sello__c { animation: none; }
}
.bloque--legal { min-height: 52vh; }
/* ---------- Sobre nosotros ---------- */
.sobre-presentacion .porque__texto h1 { font-size: var(--titulo-m); color: var(--crema); max-width: 26ch; text-wrap: balance; margin-top: 1.1rem; }
.sobre-presentacion .porque__destacado { margin-top: 1.4rem; }
.sobre-quien__prosa { margin-top: var(--esp-bloque); }
.sobre-quien__cierre { margin-top: var(--esp-bloque); font-family: var(--serif); font-size: var(--titulo-s); max-width: 34ch; line-height: 1.3; }
.resolvemos__item h3 + .paso-resumen { color: var(--marron-suave); }
/* ============================================================
RETRABAJOS V.2 (feedback 21/08) · componentes nuevos
============================================================ */
/* ---------- Marco de imagen pendiente (placeholder honesto de marca) ----------
El cliente aportará las fotos del Journal; mientras tanto, un marco de marca
con rayas de toldo que se lee como «hueco reservado», no como imagen final.
DE RESERVA desde el 11/09: con las fotos reales ya no queda ninguna instancia
en las páginas. No es deriva ni código muerto a borrar: el Journal sigue sin
CMS y la primera entrada que llegue sin foto lo necesita. Si se decide el CMS
y las imágenes pasan a ser obligatorias, entonces sí se puede retirar. */
.marco-placeholder {
display: grid;
place-content: center;
gap: .35rem;
width: 100%;
aspect-ratio: 3 / 2;
background-color: var(--crema);
background-image: repeating-linear-gradient(135deg, rgba(81, 50, 41, .07) 0 14px, transparent 14px 28px);
text-align: center;
user-select: none;
}
.marco-placeholder--salvia { background-color: var(--salvia-clara); }
.marco-placeholder--celeste { background-color: var(--celeste-suave); }
.marco-placeholder--hueso { background-color: var(--hueso); }
.marco-placeholder__c { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--marron); }
.marco-placeholder__txt {
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--marron-suave);
}
.articulo__thumb .marco-placeholder { aspect-ratio: auto; height: 100%; }
.articulo__thumb .marco-placeholder__txt { display: none; }
/* ---------- Journal · rejilla de entradas con imagen (punto 8) ---------- */
.journal-grid { display: grid; gap: clamp(2.25rem, 3.5vw, 3rem); margin-top: var(--esp-bloque); }
.entrada { display: flex; flex-direction: column; }
.entrada__figura {
position: relative;
overflow: hidden;
border: 1.5px solid var(--marron);
background: var(--crema);
}
.entrada__figura > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .55s var(--curva); }
a.entrada:hover .entrada__figura > img { transform: scale(1.04); }
.entrada__cinta {
position: absolute;
top: .9rem;
left: .9rem;
padding: .3rem .8rem;
background: var(--marron);
color: var(--crema);
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.entrada__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-top: 1.1rem;
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--marron-suave);
}
.entrada__meta span[aria-hidden] { opacity: .5; }
/* Reserva de 3 líneas: a ≥1280px todos los títulos ocupan 3, así que a 768 y
1024 (donde alguno baja a 2) el extracto y el pie siguen alineados entre
tarjetas sin recortar ningún titular. */
.entrada__titulo { margin-top: .6rem; font-size: var(--titulo-s); line-height: 1.12; min-height: 3.36em; transition: color .2s; }
.entrada--destacada .entrada__titulo { min-height: 0; }
a.entrada:hover .entrada__titulo { color: var(--marron-suave); }
.entrada__dek { margin-top: .8rem; font-size: var(--texto-s); line-height: 1.7; color: var(--marron-suave); max-width: 46ch; }
.entrada__pie { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.2rem; }
.entrada__pie .pilar__mas { margin-top: 0; align-self: center; }
.entrada__estado {
font-family: var(--mano);
font-size: 1.25rem;
color: var(--marron-suave);
transform: rotate(-3deg);
}
@media (min-width: 720px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }
/* Entrada destacada: ocupa el ancho y cambia a dos columnas */
.entrada--destacada { grid-column: 1 / -1; }
@media (min-width: 900px) {
.entrada--destacada {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
.entrada--destacada .entrada__figura > img,
.entrada--destacada .marco-placeholder { aspect-ratio: 4 / 3; }
.entrada--destacada .entrada__cuerpo { display: flex; flex-direction: column; }
.entrada--destacada .entrada__meta { margin-top: 0; }
.entrada--destacada .entrada__titulo { font-size: var(--titulo-m); }
.entrada--destacada .entrada__dek { font-size: var(--texto-m); max-width: 52ch; }
}
/* ---------- Sobre nosotros · dos mundos (tarjetas unidas por una línea) ---------- */
/* Retrabajo V.3 (6): las dos tarjetas se igualan (misma caja, misma línea de
base) y se invierte el orden — primero el mostrador, después el método —,
así que el bloque se lee como una trayectoria y no como dos fichas sueltas. */
.dos-mundos { display: grid; gap: 1.75rem; margin-top: var(--esp-bloque); align-items: stretch; }
.mundo {
position: relative;
/* Columna flex: con las dos tarjetas ya a la misma altura, anclar las
pastillas abajo hace que las dos filas de chips caigan en la misma línea. */
display: flex;
flex-direction: column;
background: var(--blanco-postal);
border: 1.5px solid var(--marron);
padding: clamp(1.5rem, 3vw, 2.3rem);
}
.mundo__etiqueta {
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--marron-suave);
}
.mundo h3 { margin-top: .5rem; font-size: var(--titulo-s); }
.mundo p { margin-top: .8rem; font-size: var(--texto-s); line-height: 1.7; }
.mundo__marcas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.1rem; }
.mundo__marcas li {
padding: .3rem .8rem;
border: 1.5px solid var(--marron);
border-radius: 999px;
font-size: var(--texto-xs);
font-weight: 600;
letter-spacing: .06em;
}
/* Nudo de unión entre los dos mundos */
.dos-mundos__union {
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 1.6rem;
color: var(--marron);
}
.dos-mundos__union::before,
.dos-mundos__union::after { content: ""; display: block; background: var(--marron); }
.dos-mundos__union::before { width: 1.5px; height: clamp(1.5rem, 4vw, 2.5rem); }
.dos-mundos__union::after { width: 1.5px; height: clamp(1.5rem, 4vw, 2.5rem); }
.dos-mundos__nudo {
display: grid;
place-content: center;
width: 46px;
height: 46px;
border: 1.5px solid var(--marron);
border-radius: 999px;
background: var(--crema);
line-height: 1;
}
@media (min-width: 900px) {
.dos-mundos {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
align-items: stretch;
column-gap: clamp(1.25rem, 3vw, 2.5rem);
row-gap: 0;
}
/* Las cuatro filas internas (etiqueta · título · texto · pastillas) se
comparten: las dos tarjetas quedan gemelas aunque un título ocupe dos
líneas. Mismo recurso que en proyectos y en «Según tu negocio». */
/* Colocación explícita: con tres hijos que abarcan las cuatro filas, el
autoposicionamiento creaba columnas implícitas y descuadraba el bloque. */
.dos-mundos > .mundo {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: 1 / -1;
align-content: start;
}
.dos-mundos > .mundo:first-child { grid-column: 1; }
.dos-mundos > .mundo:last-child { grid-column: 3; }
.dos-mundos > .mundo > .mundo__marcas { align-self: end; }
.dos-mundos__union { grid-auto-flow: column; grid-column: 2; grid-row: 1 / -1; align-self: center; }
.dos-mundos__union::before,
.dos-mundos__union::after { width: clamp(1rem, 3vw, 2rem); height: 1.5px; }
}
/* ---------- Hilo de hitos (Sobre nosotros · línea con nudos) ---------- */
/* ---------- Sobre nosotros · «Por qué nace Crema» (V.3 · 7) ----------
El capítulo era un muro de texto entre dos capítulos también de texto.
Titular a la izquierda y foto en arco a la derecha; el hilo, debajo y a
todo el ancho, sigue leyéndose como una secuencia. */
.sobre-nace__cabecera { display: grid; gap: 2.25rem; }
.sobre-nace__foto { position: relative; width: min(70vw, 300px); }
.sobre-nace__foto img:not(.sticker) { width: 100%; aspect-ratio: 3 / 3.9; }
.sobre-nace__foto .nota-manuscrita {
position: absolute;
left: -.5rem;
bottom: -1.9rem;
transform: rotate(-4deg);
}
/* Juli, 13/09: con 7fr/4fr y la foto al borde derecho quedaba un hueco de
~270 px entre titular y arco. Columnas con tope y la pareja centrada:
texto y foto se leen como una sola composición. */
@media (min-width: 900px) {
.sobre-nace__cabecera {
grid-template-columns: minmax(0, 38rem) minmax(0, 320px);
justify-content: center;
align-items: center;
gap: clamp(2.5rem, 5vw, 5rem);
}
.sobre-nace__foto { width: min(100%, 320px); }
}
.hilo {
position: relative;
display: grid;
gap: clamp(1.75rem, 3vw, 2.5rem);
margin-top: var(--esp-bloque);
padding-left: 2.75rem;
counter-reset: hilo;
}
.hilo::before {
content: "";
position: absolute;
left: .5rem;
top: .7rem;
bottom: .7rem;
width: 1.5px;
background: var(--linea);
}
.hilo__item { position: relative; counter-increment: hilo; }
.hilo__item::before {
content: "";
position: absolute;
left: -2.4rem;
top: .5em;
width: 13px;
height: 13px;
border-radius: 999px;
background: var(--crema);
border: 1.5px solid var(--marron);
}
.hilo__item h3 { font-size: var(--titulo-s); }
.hilo__item p { margin-top: .55rem; font-size: var(--texto-s); line-height: 1.7; max-width: 56ch; color: var(--marron-suave); }
@media (min-width: 900px) {
.hilo { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); padding-left: 0; padding-top: 2.6rem; }
.hilo::before { left: 0; right: 0; top: .4rem; bottom: auto; width: auto; height: 1.5px; }
.hilo__item::before { left: 0; top: -2.6rem; }
}
/* ---------- Carrusel horizontal 3D (punto 7 · experiencia tipo Calita) ----------
Sin JS: scroll lateral nativo con snap (usable y accesible).
Con GSAP ≥900px: la sección se fija y el scroll vertical mueve la pista,
con las tarjetas girando en perspectiva al pasar por el centro. */
.carrusel-h { position: relative; overflow: clip; }
/* Palabra gigante del capítulo (V.3 · 7): apertura tipográfica que da escala al
bloque de principios, igual que en Proyectos y en los capítulos de sector.
Se coloca tras la cabecera y por debajo de todo (aria-hidden). */
.carrusel-h__palabra {
position: absolute;
top: .06em;
left: 50%;
transform: translateX(-50%);
/* «Principios» tiene diez letras: con la escala general (15vw) se salía del
encuadre por los dos lados y se leía cortada. */
font-size: clamp(2.6rem, 10.5vw, 9rem);
opacity: .13;
z-index: 0;
}
.carrusel-h__cabecera, .carrusel-h__viewport { position: relative; z-index: 1; }
/* En modo fijado la palabra viajaría con el pin y estorbaría: se retira. */
.carrusel-h--pin .carrusel-h__palabra { display: none; }
.carrusel-h__viewport { margin-top: var(--esp-bloque); }
.carrusel-h__pista {
display: flex;
gap: clamp(1.25rem, 2.5vw, 2rem);
/* La primera tarjeta arranca justo bajo el título (borde del .contenedor);
por la derecha sangra hasta el borde para que se vea que hay más. */
padding-left: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
padding-right: var(--margen);
padding-block: 1.25rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
perspective: 1400px;
}
.principio {
flex: 0 0 min(78vw, 360px);
scroll-snap-align: center;
display: flex;
flex-direction: column;
background: var(--blanco-postal);
border: 1.5px solid var(--marron);
padding: clamp(1.5rem, 3vw, 2.2rem);
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 10px 10px 0 0 rgba(81, 50, 41, .1);
}
/* Indicador de posición del carrusel (01/05), no numeración decorativa */
.principio__num {
font-family: var(--serif);
font-style: italic;
font-size: 2.1rem;
line-height: 1;
color: var(--marron-suave);
}
.principio__total { font-size: .5em; opacity: .55; letter-spacing: .02em; }
.principio h3 { margin-top: .9rem; font-size: var(--titulo-s); }
.principio__lema {
margin-top: .7rem;
font-family: var(--serif);
font-style: italic;
font-size: var(--texto-l);
line-height: 1.3;
color: var(--marron);
}
.principio p:not(.principio__lema) { margin-top: .9rem; font-size: var(--texto-s); line-height: 1.7; color: var(--marron-suave); }
.principio__regla { margin-top: auto; padding-top: 1.4rem; }
.principio__regla::before { content: ""; display: block; width: 2.5rem; height: 1.5px; background: var(--marron); }
.carrusel-h__pista::-webkit-scrollbar { height: 6px; }
.carrusel-h__pista::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 999px; }
.carrusel-h__pista::-webkit-scrollbar-track { background: transparent; }
.carrusel-h__ayuda {
margin-top: 1.25rem;
font-family: var(--mano);
font-size: 1.3rem;
color: var(--marron-suave);
transform: rotate(-2deg);
}
/* Modo fijado (lo activa el JS solo si GSAP está disponible y hay ancho) */
/* minmax(0,1fr) es imprescindible: con una columna `auto` la rejilla crecía
hasta el ancho de la pista (2040px), el overflow no recortaba nada y el
cálculo del recorrido daba negativo. */
.carrusel-h--pin { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.carrusel-h__viewport { min-width: 0; }
/* En una rejilla, un hijo con margin-inline:auto pasa a fit-content y se
encoge. width:100% le devuelve el ancho del .contenedor normal. */
.carrusel-h--pin > .contenedor { width: 100%; }
.carrusel-h--pin .carrusel-h__pista {
overflow: visible;
width: max-content; /* la pista mide su contenido, no la del viewport */
scroll-snap-type: none;
will-change: transform;
}
.carrusel-h--pin .carrusel-h__viewport { overflow: clip; }
.carrusel-h--pin .carrusel-h__ayuda { display: none; }
/* Juli, 13/09: «que las tarjetas no se vean cortadas».
1) Por los lados cortaban en seco contra el borde de la pantalla. Se funden
en el margen de página (el mismo que usa la pista de padding), así que la
01 al empezar y la 05 al acabar se ven enteras, sin velo.
2) Por abajo, en un portátil con zoom (1336×755) el pie de las tarjetas caía
32 px bajo la pantalla, y fijado no hay forma de verlo. La cabecera pasa a
dos columnas (apoyo a la derecha) y recupera ~75 px; si aun así no cabe,
el JS no fija la sección y queda el carrusel nativo. */
.carrusel-h--pin .carrusel-h__viewport {
--fundido: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fundido), #000 calc(100% - var(--margen)), transparent);
mask-image: linear-gradient(to right, transparent, #000 var(--fundido), #000 calc(100% - var(--margen)), transparent);
}
@media (min-width: 1100px) {
.carrusel-h--pin .carrusel-h__cabecera {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
column-gap: clamp(2rem, 5vw, 5rem);
align-items: end;
}
.carrusel-h--pin .carrusel-h__cabecera > * { grid-column: 1; }
.carrusel-h--pin .carrusel-h__cabecera > .titulo-seccion__apoyo { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* ---------- Accesibilidad de color sobre salvia ----------
#6E4A3F sobre #8E9775 se queda en 2.52:1 (AA pide 4.5). En superficies salvia
el texto secundario sube a --tinta, que da 4.74:1. */
.bloque--salvia,
.pilar--salvia,
.tema-marketing .heroe-servicio { --marron-suave: var(--tinta); }
/* ---------- Cierre en banda (unifica los finales de página) ---------- */
.cierre-banda {
background: var(--crema);
border-block: 1.5px solid var(--marron);
text-align: center;
}
.cierre-banda .sectores__cierre { margin-inline: auto; color: var(--tinta); }
.cierre-banda .nota-manuscrita { color: var(--marron); }
/* ============================================================
RITMO VERTICAL UNIFICADO · auditoría de espacios (punto 2)
Regla: TODO el aire vertical de sección se decide aquí, y solo con la
escala de tokens. Este bloque va el último a propósito para que gane
siempre y para poder revisar el ritmo de la web entera de un vistazo.
============================================================ */
.bloque,
.concepto,
.sectores-resumen,
.metodo,
.proyectos,
.porque,
.journal,
.agenda,
.realidad,
.resolvemos,
.segun-negocio,
.relato,
.destacado,
.despues,
.faq,
.carrusel-h,
.cta-banda,
.cierre-banda { padding-block: var(--esp-seccion); }
/* Ritmo corto: capítulos encadenados, intermedios y cierres */
.capitulo-sector,
.galeria,
.cierre-centrado,
.bloque.cierre-centrado { padding-block: var(--esp-seccion-s); }
/* Dos secciones seguidas del mismo color: el aire se sumaría (2 unidades) y se
lee como un agujero. La de abajo no pone aire propio → queda 1 unidad justa. */
.seccion--pegada { padding-top: 0; }
/* Sobre nosotros (Juli, 13/09: «demasiado espacio entre las 2 secciones»): la
frase de cierre de «Dos mundos» y «Cómo trabajamos» se leen seguidas. Son de
color distinto, así que cada una conserva aire propio, pero corto. Fijado, el
carrusel tiene que librar la cabecera pegajosa (69 px): de ahí el mínimo, y
va arriba y no centrado, porque centrado en pantallas altas devolvía el hueco.
Clases y no selector de hermano: GSAP envuelve el carrusel fijado en un
.pin-spacer y el «+» deja de casar. */
.bloque.bloque--encadenado { padding-bottom: var(--esp-seccion-s); }
.carrusel-h.carrusel-h--encadenado { padding-top: var(--esp-bloque); }
.carrusel-h--encadenado.carrusel-h--pin { padding-top: max(var(--esp-bloque), 5.5rem); align-content: start; }
/* Tríptico de las fichas: le sigue «Otros proyectos» en el mismo hueso, que ya
trae su aire arriba. Abajo no pone nada propio para no sumar dos unidades. */
.entregables { padding-block: var(--esp-seccion) 0; }
/* Cabecera de página: abajo manda la sección siguiente, no se duplica el aire */
.bloque.bloque--cabecera { padding-bottom: var(--esp-bloque); }
/* Journal (Juli, 13/09: «reducir aire»): cabecera y listado comparten fondo y
se sumaban tres unidades (cabecera 61 + sección 61 + rejilla 61 = 183 px).
Queda solo la de la cabecera: cabecera → contenido, una unidad. */
.journal.journal--pagina { padding-top: 0; }
.journal--pagina .journal-grid { margin-top: 0; }
.agenda.agenda--pagina { padding-top: var(--esp-bloque); }
/* Cierres internos (viven DENTRO de una sección: nunca aire de sección) */
.sectores-resumen .sectores__cta { padding-block: var(--esp-bloque) 0; }
.sectores__cta { padding-block: var(--esp-bloque) 0; }
.proyectos__ver { margin-top: var(--esp-bloque); }
.journal .enlace-subrayado { margin-top: var(--esp-bloque); }
/* ============================================================
RETRABAJOS V.3 · «ELEVAR» COMO GRAMÁTICA DE INTERACCIÓN
El tagline es «Elevamos marcas con esencia». Hasta ahora los 17 hover de
la web hacían translateY(-2px): el default de cualquier sitio. La sombra
sólida desplazada ya existía en el desplegable del nav, pero solo ahí.
Aquí se convierte en EL gesto: todo lo que se puede tocar se despega del
papel y proyecta su sombra sólida, como una pegatina que se levanta.
============================================================ */
:root {
/* Color de la sombra sólida según el papel sobre el que cae */
--sombra-marca: var(--marron);
--elevar: -3px -5px; /* ojo: `translate` separa ejes por espacio, no por coma */
--curva-elevar: cubic-bezier(.34, 1.4, .5, 1);
}
/* Sobre capítulos oscuros la sombra sólida se hace en crema */
.fondo-oscuro, .bloque--azul, .bloque--tinta,
.tema-digitalizacion .heroe-servicio, .tema-azul .heroe-servicio {
--sombra-marca: var(--crema);
}
/* Retrabajo V.4 (2): salvo las tarjetas del bento, que son claras aunque el
capítulo sea azul. Ahí el reborde va en marrón corporativo: sobre la tarjeta
se lee como un borde de marca y no como un halo pegado al fondo. */
.bloque--azul .pilar { --sombra-marca: var(--marron); }
/* La tarjeta marrón: sombra marrón sobre marrón se fundiría con ella; baja a tinta */
.bloque--azul .pilar--marron { --sombra-marca: var(--tinta); }
/* Gesto base: subir y proyectar sombra sólida. `translate` (propiedad
independiente) en vez de `transform`, para no pisar las rotaciones
decorativas ni pelearse con los reveals de GSAP. */
.pilar,
.paso,
.despues__pasos--cuatro > li,
.negocio-carta,
.mundo,
.destacado__tarjeta,
.tarjeta-sector .arco,
.proyecto figure,
.entrada__figura,
.faq__lista {
transition: translate .35s var(--curva-elevar), box-shadow .35s var(--curva-elevar);
}
.pilar:hover,
.paso:hover,
.despues__pasos--cuatro > li:hover,
.negocio-carta:hover,
.mundo:hover,
.destacado__tarjeta:hover,
.tarjeta-sector:hover .arco,
.proyecto:hover figure,
a.entrada:hover .entrada__figura {
/* !important a propósito: GSAP escribe `translate: none` EN LÍNEA al revelar
estos bloques, y un estilo en línea gana a cualquier hoja externa. Es el
único caso del proyecto donde está justificado. */
translate: var(--elevar) !important;
box-shadow: 8px 10px 0 -1px var(--sombra-marca);
}
/* El bento ya rotaba al hover: se conserva y se le suma la elevación */
.pilar:hover { transform: rotate(-.4deg); }
.tarjeta-sector:hover { transform: none; }
/* Botones: mismo gesto, a escala de control */
.boton--primario:hover,
.boton--fantasma:hover,
.boton--claro:hover {
transform: none;
translate: -2px -3px;
box-shadow: 5px 6px 0 -1px var(--sombra-marca);
}
.boton { transition: background-color .25s var(--curva), color .25s var(--curva),
translate .25s var(--curva-elevar), box-shadow .25s var(--curva-elevar),
border-color .25s var(--curva); }
/* Al pulsar, la pegatina vuelve al papel */
.boton:active { transform: none; translate: 0 0; box-shadow: 0 0 0 0 var(--sombra-marca); }
/* El botón primario es marrón: su sombra necesita contraste propio */
.boton--primario:hover { --sombra-marca: var(--crema-viva); }
.fondo-oscuro .boton--primario:hover,
.bloque--tinta .boton--primario:hover { --sombra-marca: var(--marron-suave); }
@media (prefers-reduced-motion: reduce) {
.pilar:hover, .paso:hover, .despues__pasos--cuatro > li:hover, .negocio-carta:hover, .mundo:hover,
.destacado__tarjeta:hover, .tarjeta-sector:hover .arco, .proyecto:hover figure,
a.entrada:hover .entrada__figura, .boton:hover { translate: none; }
}
/* ---------- Sello de progreso (V.3 · B) ----------
El sello ya vivía en el pie de las 20 páginas girando en bucle, decorativo.
Aquí pasa a hacer un trabajo: marca cuánto llevas leído y te sube al inicio.
La rotación la fija el JS en --giro; sin JS el botón queda oculto. */
.sello-progreso {
position: fixed;
right: clamp(1rem, 2.5vw, 2rem);
bottom: clamp(1rem, 2.5vw, 2rem);
z-index: 90;
display: grid;
place-items: center;
width: clamp(54px, 6vw, 70px);
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--marron);
color: var(--crema);
cursor: pointer;
opacity: 0;
translate: 0 16px;
transition: opacity .4s var(--curva), translate .4s var(--curva), scale .25s var(--curva-elevar);
}
.sello-progreso[hidden] { display: none; }
.sello-progreso.visible { opacity: 1; translate: 0 0; }
.sello-progreso:hover { scale: 1.06; }
.sello-progreso:active { scale: .97; }
.sello-progreso__disco { display: block; width: 100%; height: 100%; padding: 5px; rotate: var(--giro, 0deg); }
.sello-progreso__disco svg { width: 100%; height: 100%; overflow: visible; }
.sello-progreso .sello__texto { font-size: 12.5px; letter-spacing: .2em; }
.sello-progreso__flecha {
position: absolute;
font-size: 1.15rem;
line-height: 1;
transition: translate .25s var(--curva-elevar);
}
.sello-progreso:hover .sello-progreso__flecha { translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) {
.sello-progreso { transition: opacity .2s; translate: none; }
.sello-progreso__disco { rotate: none; }
}
/* ---------- C · Chips de foto vivos (V.3, corregido en V.4) ----------
La píldora se abre en vertical hasta la proporción real de la foto: `cover`
deja de tener nada que recortar y se ve la imagen entera. El ancho se queda
como está, que es lo que protegía a las letras del titular. */
.chip-foto { transition: translate .5s var(--curva); }
.chip-foto img {
transition: height .45s var(--curva-elevar), border-radius .45s var(--curva-elevar),
box-shadow .45s var(--curva-elevar), border-color .45s var(--curva-elevar);
}
h1 .chip-foto:hover { z-index: 3; }
h1 .chip-foto:hover img {
height: var(--chip-abierto, 300%);
border-radius: .26em;
box-shadow: 0 .12em .5em rgba(58, 36, 29, .32);
}
@media (prefers-reduced-motion: reduce) {
h1 .chip-foto:hover img { height: 100%; border-radius: 999px; box-shadow: none; }
.chip-foto { translate: none !important; }
}
/* ---------- D · Marquesina con motor GSAP ----------
Cuando el JS toma el control, se apaga la animación CSS para no sumar dos
movimientos. Sin JS o con movimiento reducido, manda el CSS de siempre. */
.marquesina--motor .marquesina__pista { animation: none; }
/* ---------- E · (retirado en V.4) · el hilo entre tarjetas ya no existe ----------
Retrabajo V.4 (4): «Eliminar hilo conductor entre tarjetas». Se va el SVG y
con él su capa de apilado; las tarjetas quedan como piezas de una serie
numerada, que es lo que ya eran. */
/* ============================================================
MÓVIL (13/09) · pasada de paridad con el escritorio y tacto
Plan completo en docs/plan-movil.md. Va al final para ganar a los hover
del bloque «elevar»; no toca el aire de sección (eso sigue en el bloque de
ritmo vertical). Decisión de Juli «mixta»: las secuencias de tarjetas pasan
a carrusel con scroll-snap y los trípticos de sectores siguen apilados,
pero compactos.
============================================================ */
/* ---------- Transversal ---------- */
/* Etiqueta → titular: el aire del token también cuando el titular es un lead
en cursiva (Sobre nosotros, «Por qué nace Crema»: iban pegados). */
.etiqueta + .realidad__lead { margin-top: 1.1rem; }
/* Muescas y esquinas redondeadas (viewport-fit=cover en base.html). En
escritorio env() vale 0 y el max() devuelve el margen de siempre. */
.contenedor,
.nav__inner {
padding-left: max(var(--margen), env(safe-area-inset-left));
padding-right: max(var(--margen), env(safe-area-inset-right));
}
.sello-progreso {
right: max(clamp(1rem, 2.5vw, 2rem), calc(env(safe-area-inset-right) + .75rem));
bottom: max(clamp(1rem, 2.5vw, 2rem), calc(env(safe-area-inset-bottom) + .75rem));
}
/* ---------- Menú: panel a toda la altura ----------
`position: absolute` y no `fixed`: la nav lleva backdrop-filter, que crea
bloque contenedor para los fixed de dentro. La nav es sticky arriba, así que
el panel cae siempre justo bajo ella. El JS pone `menu-abierto` en
para que el fondo no se desplace y atrapa el foco. */
@media (max-width: 899px) {
html.menu-abierto { overflow: hidden; }
/* La hamburguesa no cede ancho: a 360 px se quedaba en 26 px */
.nav__burger { flex-shrink: 0; }
.nav__movil {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100dvh - 68px);
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.25rem max(var(--margen), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--margen), env(safe-area-inset-left));
}
.nav__movil[hidden] { display: none; }
.nav__movil ul { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.nav__idiomas--movil .idioma { min-width: 44px; }
/* El CTA único, abajo y a todo el ancho: al alcance del pulgar */
.nav__movil-cta { margin-top: auto; padding-top: 1.5rem; }
.nav__movil-cta .boton { width: 100%; }
}
/* Móviles estrechos: logo, CTA y hamburguesa suman más de lo que cabe.
Se ajustan un punto por debajo de 390 y, por debajo de 360, el CTA de la
barra se retira: sigue en el menú y en el héroe de cada página. */
@media (max-width: 389px) {
.nav__inner { gap: .75rem; }
.nav__marca { font-size: 1.85rem; }
.nav__acciones { gap: .5rem; }
.nav__cta { padding-inline: .85rem; }
.nav__burger { width: 44px; }
}
@media (max-width: 359px) {
.nav__cta { display: none; }
}
/* ---------- Tacto: objetivos de 44 px sin mover el diseño ----------
Los enlaces subrayados miden ~32 px. Se amplía la zona de toque con un
pseudo invisible (el ::after de .pilar__mas ya es la flecha, por eso
::before); la caja visible y el subrayado se quedan donde estaban. */
@media (pointer: coarse) {
.nav__marca { display: inline-flex; align-items: center; min-height: 44px; }
/* La marquesina de servicios lleva 1rem de aire arriba y abajo: el pseudo
cabe dentro y su overflow no lo recorta. */
.enlace-subrayado,
.negocio-carta__enlace,
.marquesina__grupo a { position: relative; }
.enlace-subrayado::before,
.negocio-carta__enlace::before,
.marquesina__grupo a::before {
content: "";
position: absolute;
inset: -.75rem -.5rem -.5rem;
}
}
/* Sin ratón, el hover se queda «pegado» tras tocar: la tarjeta se quedaba
levantada con su sombra. En táctil el gesto «elevar» no aplica. */
@media (hover: none) {
.pilar:hover,
.paso:hover,
.despues__pasos--cuatro > li:hover,
.negocio-carta:hover,
.mundo:hover,
.destacado__tarjeta:hover,
.tarjeta-sector:hover .arco,
.proyecto:hover figure,
a.entrada:hover .entrada__figura,
.boton--primario:hover,
.boton--fantasma:hover,
.boton--claro:hover { translate: none !important; box-shadow: none; }
.pilar:hover,
.tarjeta-sector:hover,
.tarjeta-sector:hover img,
.proyecto:hover img,
a.entrada:hover .entrada__figura > img { transform: none; }
}
/* ---------- Titulares ---------- */
@media (max-width: 719px) {
h1, h2, h3, .faq summary { text-wrap: balance; }
/* «Digitalización» a 44,8 px rozaba el borde a 360 */
.heroe-servicio h1 { font-size: min(var(--titulo-xl), 11.6vw); }
.realidad__lead { max-width: none; }
}
/* ---------- Héroe de la home ----------
Compacto para que la píldora asome en la primera pantalla (entra con el
héroe al cargar, ver main.js). */
@media (max-width: 719px) {
.heroe-tipo { padding-block: 2rem 3.5rem; }
.heroe-tipo__etiqueta { margin-bottom: 1.1rem; }
.heroe-tipo__grid { gap: 2.25rem; }
.heroe-tipo__figura { width: min(60vw, 250px); }
.heroe-tipo__sub { margin-top: 1.2rem; }
.heroe-tipo__ctas { margin-top: 1.6rem; }
}
/* ---------- Palabras gigantes y marca de agua: vuelven a escala ---------- */
@media (max-width: 899px) {
.proyectos__escena .palabra-gigante { display: block; font-size: 16vw; }
/* Las fotos cruzan la palabra como en escritorio, pero solo el último cuarto:
con más solape se leía como un rótulo cortado. */
.proyectos__escena .proyectos__grid { margin-top: -3.5vw; }
/* «Principios» arrancaba centrada (x≈95) bajo una cabecera alineada a la
izquierda: se ancla al margen, como el título, y la cabecera baja lo justo
para que la etiqueta no quede montada sobre la palabra. */
.carrusel-h__palabra { left: var(--margen); transform: none; font-size: 12.5vw; }
.carrusel-h__cabecera { padding-top: 1rem; }
}
@media (max-width: 719px) {
.concepto__marca-agua { display: block; font-size: 42vw; }
}
/* ---------- «¿Qué hacemos?»: la inicial ya no pisa el texto ----------
Sin la altura mínima del escritorio el texto subía hasta la letra. La
inicial vive en su propia banda arriba y el texto empieza debajo. */
@media (max-width: 719px) {
.pilar { padding-top: 4.75rem; }
.pilar__inicial { font-size: 7.25rem; top: -1.5rem; right: -.4rem; }
}
/* ---------- Carruseles (decisión «mixta») ----------
Una fila que se ve de un vistazo, como en escritorio: la tarjeta siguiente
asoma por la derecha. Sangran a los bordes y encajan al margen. Solo por
debajo de los saltos donde empiezan sus rejillas y subgrids. */
@media (max-width: 719px) {
.despues__pasos.despues__pasos--cuatro,
.segun-negocio__grid {
display: flex;
gap: 1rem;
margin-inline: calc(var(--margen) * -1);
padding: 0 var(--margen) .75rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--margen);
scrollbar-width: none;
}
/* La píldora del número sobresale 1,1rem por arriba: el overflow la
recortaría, así que la pista le reserva sitio y se come ese aire del margen. */
.despues__pasos.despues__pasos--cuatro {
margin-top: calc(var(--esp-bloque) - 1.4rem);
padding-top: 1.4rem;
}
.despues__pasos.despues__pasos--cuatro::-webkit-scrollbar,
.segun-negocio__grid::-webkit-scrollbar { display: none; }
.despues__pasos.despues__pasos--cuatro > li,
.segun-negocio__grid > .negocio-carta {
flex: 0 0 min(82vw, 330px);
scroll-snap-align: start;
}
}
@media (max-width: 659px) {
.proyectos__grid.proyectos__grid--fluido {
display: flex;
gap: 1rem;
margin-inline: calc(var(--margen) * -1);
padding: 0 var(--margen) .75rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--margen);
scrollbar-width: none;
}
.proyectos__grid--fluido::-webkit-scrollbar { display: none; }
.proyectos__grid--fluido > .proyecto { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }
}
/* ---------- Trípticos de sectores: apilados, pero compactos ---------- */
@media (max-width: 899px) {
.triptico { gap: 3rem; }
.tarjeta-sector img { display: block; width: min(74vw, 290px); margin-inline: auto; }
.tarjeta-sector h2, .tarjeta-sector h3 { margin-top: 1.25rem; }
.capitulo-sector__foto { width: min(72vw, 300px); }
}
/* ---------- Landings: arcos que no se comen la pantalla ---------- */
@media (max-width: 899px) {
.heroe-servicio__foto { width: min(76vw, 320px); }
.heroe-servicio__foto img:not(.sticker) { max-height: 56svh; }
/* Foto de la intro a la derecha y más estrecha: deja de ser un segundo
arco a todo el ancho justo después del del héroe. */
.realidad__grid .realidad__foto { width: min(56%, 260px); justify-self: end; }
.sobre-nace__foto .nota-manuscrita { left: .5rem; }
}
@media (max-width: 719px) {
.pastillas { gap: .45rem; }
.pastillas li { padding: .38rem .85rem; font-size: var(--texto-xs); }
}
/* ---------- Fichas: la escalera del relato, a escala ---------- */
@media (max-width: 899px) {
.relato__texto + .relato__texto { margin-left: 1.25rem; }
.relato__texto + .relato__texto + .relato__texto { margin-left: 2.5rem; }
/* Meta en versalitas: se corta en el «·» y no a media frase (el texto
suelto del punto pasa a ser un ítem flexible propio). */
.proyecto__meta { display: flex; flex-wrap: wrap; column-gap: .45em; }
}
/* ---------- FAQ: el «+» tiene que parecer pulsable ---------- */
/* El «+» de la DM Serif es un trazo finísimo: en móvil se enmarca en un
círculo de 36 px, el mismo lenguaje de píldora que los botones. */
.faq summary::after { flex-shrink: 0; color: var(--marron); }
@media (max-width: 719px) {
.faq summary::after {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--marron);
border-radius: 50%;
font-family: var(--sans);
font-size: 1.25rem;
font-weight: 500;
}
}
/* ---------- Journal: el destacado grande y el resto en fila ---------- */
@media (max-width: 719px) {
.journal-grid { gap: 1.5rem; }
.entrada:not(.entrada--destacada) {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
column-gap: 1rem;
align-content: start;
padding-top: 1.5rem;
border-top: 1px solid var(--linea);
}
.entrada:not(.entrada--destacada) > .entrada__figura { grid-row: 1 / span 4; align-self: start; }
.entrada:not(.entrada--destacada) > :not(.entrada__figura) { grid-column: 2; }
.entrada:not(.entrada--destacada) .entrada__figura > img { aspect-ratio: 4 / 5; }
.entrada:not(.entrada--destacada) .entrada__meta { margin-top: 0; gap: .25rem .45rem; }
.entrada:not(.entrada--destacada) .entrada__titulo { min-height: 0; margin-top: .4rem; font-size: 1.2rem; line-height: 1.2; }
.entrada:not(.entrada--destacada) .entrada__dek {
margin-top: .45rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* «Leer el artículo» en una línea; «próximamente» baja si no cabe */
.entrada:not(.entrada--destacada) .entrada__pie { flex-wrap: wrap; row-gap: .35rem; padding-top: .6rem; }
.entrada:not(.entrada--destacada) .entrada__pie .pilar__mas { white-space: nowrap; }
}
/* ---------- Pie: 2 × 2 y el sello junto al lema, como en escritorio ---------- */
@media (max-width: 719px) {
.pie__cabecera { grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
.sello--pie { width: 84px; }
.pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
}
/* ---------- Legal: aviso legal, privacidad y cookies ----------
Prosa larga con jerarquía simple (h2 + párrafos + alguna lista o tabla),
contenida a un ancho de lectura cómodo dentro del .contenedor general. */
.legal { padding-block: var(--esp-seccion-s); }
.legal__cuerpo { max-width: 68ch; }
.legal__cuerpo h2 {
font-size: var(--titulo-s);
margin-top: var(--esp-bloque-s);
}
.legal__cuerpo h2:first-child { margin-top: 0; }
.legal__cuerpo p { margin-top: 1rem; line-height: 1.8; color: var(--marron-suave); }
.legal__cuerpo a.enlace-subrayado { color: inherit; }
.legal__lista {
display: grid;
gap: .5rem;
margin-top: 1.25rem;
font-size: var(--texto-s);
}
.legal__lista span { font-weight: 600; color: var(--marron); margin-right: .35em; }
.legal__tabla-envoltura { margin-top: 1.25rem; overflow-x: auto; }
.legal__tabla {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: var(--texto-s);
}
.legal__tabla th, .legal__tabla td {
text-align: left;
padding: .65rem .85rem;
border-bottom: 1px solid var(--linea);
vertical-align: top;
}
.legal__tabla th { font-family: var(--sans); font-weight: 700; color: var(--marron); }
.legal__tabla td { color: var(--marron-suave); }
/* ---------- Aviso de cookies ----------
Barra fija al pie. Rechazar y aceptar con el mismo peso visual y tamaño
(ninguno escondido ni más difícil de encontrar). Va un punto por debajo de
la nav: con el menú móvil abierto, el panel la tapa y su CTA queda libre. */
.aviso-cookies {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: calc(var(--z-nav) - 1);
padding: 1.1rem max(var(--margen), env(safe-area-inset-left)) max(1.1rem, env(safe-area-inset-bottom)) max(var(--margen), env(safe-area-inset-right));
background: var(--blanco-postal);
border-top: 1px solid var(--linea);
box-shadow: 0 -8px 24px rgba(58, 36, 29, .08);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__caja {
max-width: var(--ancho-max);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
}
.aviso-cookies__texto { flex: 1 1 42ch; font-size: var(--texto-s); color: var(--marron-suave); }
.aviso-cookies__botones { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 719px) {
.aviso-cookies__botones { width: 100%; }
.aviso-cookies__botones .boton { flex: 1 1 auto; }
}