/* =========================================================
LANARI · hoja de estilos del sitio
Kit de marca v1.0
Colores: crema #FBF7F1 · espresso #2B2320 · lino #7A6A55 · verde #2F3A31
Tipografías: Newsreader (títulos), Archivo Narrow (texto), IBM Plex Mono (números), definidas en fuentes.css
Sin build ni dependencias: se sirve tal cual.
========================================================= */
/* ---------- Variables de marca ---------- */
:root {
--crema: #FBF7F1;
--espresso: #2B2320;
--lino: #7A6A55;
--verde: #2F3A31;
--texto: #4E4238; /* texto corrido */
--linea: #E6DDD0; /* filetes sobre fondo crema */
--fondo-alt: #F3EDE3; /* secciones alternas */
--gris-calido: #9A8B79; /* etiquetas pequeñas */
--arena: #C9B99F; /* texto secundario sobre oscuro */
--arena-claro: #E4D9C9;
--linea-oscura: #4A4038;
--apagado: #A2937F; /* texto apagado sobre oscuro */
--serif: Newsreader, Georgia, serif;
--sans: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
--margen: 64px; /* margen lateral en escritorio */
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
margin: 0;
background: var(--crema);
color: var(--espresso);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
a { color: var(--espresso); text-decoration: none; }
a:hover { color: var(--lino); }
img { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--serif); }
.contenedor { max-width: 1440px; margin: 0 auto; }
/* Enlace para saltar al contenido (accesibilidad) */
.saltar {
position: absolute; left: -9999px; top: 0;
background: var(--espresso); color: var(--crema); padding: 10px 16px; z-index: 100;
}
.saltar:focus { left: 0; color: var(--crema); }
/* Foco visible para teclado */
:focus-visible { outline: 2px solid var(--lino); outline-offset: 3px; }
/* ---------- Marca (símbolo de dos barras + nombre) ---------- */
.marca { display: flex; align-items: center; gap: 14px; color: inherit; }
.marca:hover { color: inherit; }
.simbolo { display: flex; flex-direction: column; gap: 3px; }
.simbolo i { display: block; height: 5px; }
.simbolo i:first-child { width: 26px; background: var(--espresso); }
.simbolo i:last-child { width: 17px; background: var(--lino); }
.marca-nombre {
position: relative; display: inline-block; line-height: normal;
font-family: var(--serif); font-weight: 300; font-size: 25px; letter-spacing: 0.14em;
}
/* "ESTUDIO" en chico, apoyado sobre la palabra LANARI (lockup del logo v1.1) */
.marca-estudio {
position: absolute; left: 0.03em; bottom: calc(100% - 0.1em);
font-size: 0.43em; line-height: 1; letter-spacing: 0.31em; white-space: nowrap; opacity: .7;
}
/* Variante sobre fondo oscuro */
.sobre-oscuro .simbolo i:first-child { background: var(--crema); }
/* ---------- Botones ---------- */
.boton {
display: inline-block; cursor: pointer; border: 1px solid transparent;
font-family: var(--sans); font-weight: 600; text-transform: uppercase;
letter-spacing: 0.16em; font-size: 14px; transition: background .2s, color .2s, border-color .2s;
}
.boton-oscuro { background: var(--espresso); color: var(--crema); padding: 17px 32px; }
.boton-oscuro:hover { background: var(--lino); color: var(--crema); }
.boton-claro { background: var(--crema); color: var(--espresso); padding: 17px 30px; }
.boton-claro:hover { background: var(--arena-claro); color: var(--espresso); }
.boton-borde {
font-weight: 400; color: var(--crema); padding: 16px 30px;
border-color: rgba(251, 247, 241, 0.45);
}
.boton-borde:hover { border-color: var(--crema); color: var(--crema); }
/* ---------- Cabecera ---------- */
.cabecera {
position: sticky; top: 0; z-index: 50;
background: var(--crema); border-bottom: 1px solid var(--linea);
}
.cabecera-interior {
display: flex; align-items: center; justify-content: space-between;
padding: 30px var(--margen) 22px;
}
.menu { display: flex; align-items: center; gap: 36px; }
.menu a:not(.boton) {
font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto);
}
.menu a:not(.boton):hover { color: var(--lino); }
.menu .boton { font-size: 13px; padding: 13px 22px; }
.menu-boton {
display: none; background: none; border: 1px solid var(--linea); cursor: pointer;
width: 44px; height: 44px; padding: 0; position: relative;
}
.menu-boton span, .menu-boton span::before {
position: absolute; left: 12px; right: 12px; height: 2px; background: var(--espresso);
content: ""; top: 21px;
}
.menu-boton span::before { left: 0; right: 0; top: -6px; }
/* ---------- Portada ---------- */
.portada {
position: relative; min-height: 700px; background: var(--espresso);
display: flex; align-items: flex-end;
}
.portada img.fondo {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.portada::after { /* degradado para que el texto se lea sobre la foto */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(43,35,32,.92) 0%, rgba(43,35,32,.5) 52%, rgba(43,35,32,.2) 100%);
}
.portada-texto {
position: relative; z-index: 1; width: 100%;
padding: 0 var(--margen) 52px; display: flex; flex-direction: column; gap: 34px;
}
.portada-bloque { max-width: 960px; display: flex; flex-direction: column; gap: 20px; }
.sobretitulo { font-weight: 600; font-size: 12px; letter-spacing: 0.24em; color: var(--arena); }
.portada h1 { font-size: 84px; line-height: 1.03; color: var(--crema); }
.portada p { max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--arena-claro); }
.portada-botones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ---------- Cifras ---------- */
.cifras {
display: grid; grid-template-columns: repeat(4, 1fr);
background: var(--espresso); color: var(--crema);
}
.cifra {
padding: 30px 40px; border-right: 1px solid var(--linea-oscura);
display: flex; flex-direction: column; gap: 6px;
}
.cifra:last-child { border-right: 0; }
.cifra b { font-family: var(--mono); font-weight: 400; font-size: 30px; }
.cifra span { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); }
/* ---------- La promesa ---------- */
.promesa {
padding: 96px var(--margen); display: grid; grid-template-columns: 1fr 1.15fr;
gap: 80px; align-items: start;
}
.etiqueta { font-weight: 600; font-size: 11px; letter-spacing: 0.22em; color: var(--gris-calido); }
.promesa-titulo { display: flex; flex-direction: column; gap: 18px; }
.promesa-titulo p { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.22; }
.promesa-texto { display: flex; flex-direction: column; gap: 24px; }
.promesa-texto > p { font-size: 18px; line-height: 1.7; color: var(--texto); }
.pares {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
border-top: 1px solid var(--linea); padding-top: 24px;
}
.pares div { display: flex; flex-direction: column; gap: 5px; }
.pares b { font-weight: 600; font-size: 14px; letter-spacing: 0.06em; }
.pares span { font-size: 15px; line-height: 1.6; color: var(--texto); }
/* ---------- Encabezado de sección ---------- */
.seccion-cab {
display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
border-bottom: 1px solid var(--linea); padding-bottom: 18px;
}
.seccion-cab h2 { font-size: 40px; }
.seccion-cab .dato { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--gris-calido); }
.seccion-cab a { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lino); }
.seccion-cab a:hover { color: var(--espresso); }
/* ---------- Servicios ---------- */
.servicios {
background: var(--fondo-alt); padding: 88px var(--margen);
display: flex; flex-direction: column; gap: 44px;
}
.servicios .seccion-cab { border-color: #E1D7C8; }
.servicios-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.servicio {
background: var(--crema); border: 1px solid var(--linea); padding: 32px;
display: flex; flex-direction: column; gap: 16px;
}
.servicio .num { font-family: var(--mono); font-size: 12px; color: var(--lino); }
.servicio h3 { font-size: 27px; line-height: 1.2; }
.servicio p { font-size: 15px; line-height: 1.65; color: var(--texto); }
/* ---------- Obras ---------- */
.obras { padding: 88px var(--margen); display: flex; flex-direction: column; gap: 40px; }
.obras-principal { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
.obras-lateral { display: flex; flex-direction: column; gap: 24px; }
.obras-detalles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foto {
position: relative; background: var(--espresso); display: flex; align-items: flex-end;
overflow: hidden; margin: 0;
}
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption {
position: relative; width: 100%;
background: linear-gradient(to top, rgba(43,35,32,.86), rgba(43,35,32,0));
}
.foto-grande { height: 520px; }
.foto-grande figcaption {
padding: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.foto-grande strong { display: block; font-family: var(--serif); font-weight: 300; font-size: 32px; color: var(--crema); margin-bottom: 6px; }
.foto-grande small { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena); }
.foto-grande .medidas { font-family: var(--mono); font-size: 14px; color: var(--arena-claro); white-space: nowrap; }
.foto-media { flex: 1; min-height: 248px; }
.foto-media figcaption { padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.foto-media strong { font-family: var(--serif); font-weight: 300; font-size: 24px; color: var(--crema); }
.foto-media small { font-family: var(--mono); font-size: 12px; color: var(--arena); text-transform: uppercase; }
.foto-detalle { height: 300px; }
.foto-detalle figcaption {
padding: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
color: var(--arena-claro); text-transform: uppercase;
}
/* ---------- Cómo trabajamos ---------- */
.proceso {
background: var(--espresso); color: var(--crema); padding: 92px var(--margen);
display: flex; flex-direction: column; gap: 48px;
}
.proceso-cab {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
border-bottom: 1px solid var(--linea-oscura); padding-bottom: 24px;
}
.proceso-cab h2 { font-size: 40px; }
.proceso-cab p { font-size: 17px; line-height: 1.65; color: var(--apagado); }
.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso .num { font-family: var(--mono); font-size: 13px; color: var(--lino); }
.paso h3 {
font-family: var(--sans); font-weight: 600; font-size: 15px;
letter-spacing: 0.14em; text-transform: uppercase;
}
.paso p { font-size: 15px; line-height: 1.65; color: var(--arena); }
/* ---------- Antes de escribirnos ---------- */
.antes {
padding: 88px var(--margen); display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: start;
}
.antes-texto { display: flex; flex-direction: column; gap: 20px; }
.antes-texto h2 { font-size: 34px; line-height: 1.25; }
.antes-texto p { font-size: 17px; line-height: 1.7; color: var(--texto); }
.listas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.lista { display: flex; flex-direction: column; gap: 14px; }
.lista h3 { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; }
.lista.si h3 { color: var(--verde); }
.lista.no h3 { color: var(--gris-calido); }
.lista p { font-size: 15px; line-height: 1.6; border-bottom: 1px solid #EFE8DC; padding-bottom: 12px; }
.lista p:last-child { border-bottom: 0; padding-bottom: 0; }
.lista.no p { color: var(--lino); }
/* ---------- Contacto ---------- */
.contacto {
background: var(--fondo-alt); padding: 92px var(--margen);
display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start;
}
.contacto-texto { display: flex; flex-direction: column; gap: 24px; }
.contacto-texto h2 { font-size: 46px; line-height: 1.15; text-wrap: pretty; }
.contacto-texto > p { font-size: 17px; line-height: 1.7; color: var(--texto); }
.datos {
display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #E1D7C8;
padding-top: 24px; font-family: var(--mono); font-size: 15px; color: var(--texto);
}
.datos a { color: var(--texto); }
.datos a:hover { color: var(--lino); }
.datos .zona { color: var(--lino); }
.formulario {
background: var(--crema); border: 1px solid var(--linea); padding: 40px;
display: flex; flex-direction: column; gap: 26px;
}
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.campo { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > label, .campo > legend {
font-weight: 600; font-size: 11px; letter-spacing: 0.18em; color: var(--gris-calido);
text-transform: uppercase; padding: 0;
}
.formulario input[type="text"], .formulario input[type="tel"], .formulario select {
appearance: none; -webkit-appearance: none; width: 100%;
font-family: inherit; font-size: 16px; color: var(--espresso);
background: transparent; border: 0; border-bottom: 1px solid #C9BBA8;
border-radius: 0; height: 34px; padding: 0 0 4px;
}
.formulario input:focus, .formulario select:focus { outline: none; border-bottom-color: var(--espresso); }
.formulario select {
padding-right: 22px;
background: transparent url("data:image/svg+xml;utf8,") no-repeat right 2px center / 12px 8px;
}
/* Selector de tipo de obra: radios con aspecto de etiqueta */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
font-size: 14px; padding: 9px 16px; border: 1px solid #C9BBA8; color: var(--texto);
cursor: pointer; letter-spacing: 0; text-transform: none; font-weight: 400;
}
.chips input:checked + label { background: var(--espresso); border-color: var(--espresso); color: var(--crema); }
.chips input:focus-visible + label { outline: 2px solid var(--lino); outline-offset: 2px; }
.formulario .boton { align-self: flex-start; }
/* ---------- Pie ---------- */
.pie {
background: var(--espresso); color: var(--crema); padding: 48px var(--margen);
display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
.pie-marca { display: flex; flex-direction: column; gap: 14px; }
.pie-lema { font-weight: 500; font-size: 11px; letter-spacing: 0.24em; color: var(--apagado); }
.pie-datos {
display: flex; gap: 40px; flex-wrap: wrap; font-family: var(--mono);
font-size: 12px; letter-spacing: 0.1em; color: var(--apagado); text-transform: uppercase;
}
.pie-datos a { color: var(--apagado); }
.pie-datos a:hover { color: var(--crema); }
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1180px) {
:root { --margen: 40px; }
.portada h1 { font-size: 64px; }
.servicios-grilla { grid-template-columns: repeat(2, 1fr); }
.pasos { grid-template-columns: repeat(3, 1fr); }
.promesa, .contacto { gap: 48px; }
}
@media (max-width: 900px) {
/* Menú plegable en pantallas chicas */
.menu-boton { display: block; }
.menu {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--crema); border-bottom: 1px solid var(--linea);
flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margen) 24px;
}
.menu.abierto { display: flex; }
.menu a:not(.boton) { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.menu .boton { margin-top: 18px; text-align: center; }
.cifras { grid-template-columns: repeat(2, 1fr); }
.cifra:nth-child(2) { border-right: 0; }
.cifra:nth-child(-n+2) { border-bottom: 1px solid var(--linea-oscura); }
.promesa, .antes, .contacto, .proceso-cab { grid-template-columns: 1fr; }
.promesa, .servicios, .obras, .proceso, .antes, .contacto { padding-top: 64px; padding-bottom: 64px; }
.proceso-cab { gap: 16px; align-items: start; }
.obras-principal { grid-template-columns: 1fr; }
.obras-lateral { flex-direction: row; }
.obras-lateral .foto-media { height: 300px; }
}
@media (max-width: 640px) {
:root { --margen: 20px; }
.cabecera-interior { padding-top: 24px; padding-bottom: 14px; }
.marca-nombre { font-size: 22px; }
.portada { min-height: 620px; }
.portada h1 { font-size: 44px; }
.portada p { font-size: 17px; }
.portada-texto { padding-bottom: 36px; gap: 28px; }
.portada-botones .boton { flex: 1 1 100%; text-align: center; }
.cifra { padding: 22px 20px; }
.cifra b { font-size: 24px; }
.cifra span { font-size: 11px; }
.promesa-titulo p { font-size: 30px; }
.pares, .fila, .listas { grid-template-columns: 1fr; }
.seccion-cab { flex-direction: column; gap: 10px; align-items: flex-start; }
.seccion-cab h2, .proceso-cab h2 { font-size: 32px; }
.servicios-grilla, .pasos { grid-template-columns: 1fr; }
.obras-lateral { flex-direction: column; }
.foto-grande { height: 400px; }
.foto-grande figcaption { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
.foto-grande strong { font-size: 26px; }
.obras-detalles { grid-template-columns: 1fr; }
.foto-detalle { height: 260px; }
.contacto-texto h2 { font-size: 34px; }
.antes-texto h2 { font-size: 28px; }
.formulario { padding: 24px; }
.formulario .boton { align-self: stretch; text-align: center; }
.pie { flex-direction: column; align-items: flex-start; }
.pie-datos { gap: 16px 24px; }
}
/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.boton { transition: none; }
}
/* ---------- Ajustes de formulario ---------- */
/* En