/* ==========================================================
BIERZO CALOR — hoja de estilos única
Convención iris-web-estructura: bloques numerados en el mismo
orden en que aparecen en el HTML. Todos los colores, letras y
tamaños base viven en el bloque 1.
Idea de conjunto: la web es la tienda de noche. Cabecera y pie son
el marco (marrón, dos tonos); dentro, las secciones alternan carbón
y arena. Una sección se vuelve oscura añadiéndole la clase "oscuro".
Toda foto, caja de logos, panel, ficha y campo es la misma pieza,
la "ventana": marco de 1px y fondo un paso más cerca del polo
opuesto que su sección (var(--caja)).
Dos voces de letra, las del logo: RÓTULO (pequeño, 500, mayúsculas
espaciadas) y TÍTULO (700, mayúsculas). El resto va en caja normal.
========================================================== */
/* ==========================================================
1. VARIABLES (colores, tipografías, espaciados)
Regla de la casa: ningún color, tamaño de letra ni medida base
fuera de este bloque. El resto de la hoja solo usa var(--...).
========================================================== */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/archivo-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nota: los dos woff2 llevan el eje de peso completo (100-900). Si algún día se
quiere el rótulo fino del logo (300), basta cambiar "400 700" por "300 700"
en los dos @font-face; no hace falta descargar nada. Hoy no se usa. */
:root {
/* ---------- Paleta: claros ---------- */
--arena: #ECE7DF; /* fondo de toda sección clara y del body */
--arena-oscura: #E2DBD0; /* caja sobre arena: ventanas, barras de pie de foto, campos, aviso */
/* ---------- Paleta: oscuros (cuanto más cerca del lector, más claro) ---------- */
--carbon-profundo: #1A1512; /* los dos extremos del marco: barra superior y franja legal del pie */
--carbon: #221C19; /* fondo de toda sección oscura (.oscuro) y de la portada */
--carbon-caja: #2D2521; /* caja sobre carbón: ventanas, barras de pie de foto, campos, aviso */
--carbon-medio: #332A26; /* el marco: menú principal y cuerpo del pie. Es también el valor del
de las 9 páginas: si cambia aquí, cámbialo allí */
/* ---------- Paleta: acentos (los del logo) ---------- */
--naranja: #F0912D; /* ÚNICO acento. Solo como relleno o línea, nunca como texto */
--brasa: #D4731C; /* solo hover/active del relleno naranja */
--ambar: #E2A857; /* SIN USO en ningún selector. Se conserva declarado hasta decidir
si se retira o se le da un oficio único. No añadir usos. */
/* ---------- Texto sobre fondo claro ---------- */
--tinta: #1F1A16; /* títulos, cuerpo, enlaces */
--tinta-media: #4A403A; /* entradillas, párrafos, pies de foto, etiquetas */
--tinta-suave: #6B5F56; /* rótulos secundarios: dt, títulos del pie, PENDIENTE */
/* ---------- Texto sobre fondo oscuro ---------- */
--crema: #F3EDE4; /* títulos, cuerpo, enlaces, menú */
--crema-media: #D9CFC3; /* entradillas (portada incluida), párrafos, barra superior, enlaces del pie */
--crema-suave: #A89D91; /* rótulos secundarios: dt, títulos del pie, legal, PENDIENTE */
/* ---------- Error ---------- */
--rojo-error: #B5472F; /* mensajes y bordes de error sobre arena */
--rojo-error-suave: #E8896F; /* mensajes y bordes de error sobre carbón */
/* ---------- Transparencias (los únicos rgba de la hoja) ---------- */
--velo-portada: linear-gradient(to top, rgba(34,28,25,.78) 0%, rgba(34,28,25,.25) 55%, rgba(34,28,25,.10) 100%);
--velo-denso: rgba(34,28,25,.82); /* sobre fotos claras con texto encima: cabeceras de servicio y bloque destacado */
/* SOLO sobre el vídeo de portada: protege el texto abajo y deja arder el fuego arriba */
--velo-visor: rgba(26,21,18,.92); /* fondo del visor de fotos */
--linea-clara: rgba(255,255,255,.18); /* la línea de 1px sobre oscuro */
--linea-oscura: rgba(31,26,22,.18); /* la línea de 1px sobre claro */
/* ---------- Colores de contexto ----------
Valen para una sección clara. Un solo selector del bloque 3
(.oscuro, .cabecera, .portada, .pie, .visor) los cambia al modo oscuro
y todo lo de dentro se adapta sin más reglas. */
--fondo: var(--arena);
--caja: var(--arena-oscura); /* superficie de ventanas, barras y avisos */
--texto: var(--tinta);
--texto-2: var(--tinta-media);
--texto-3: var(--tinta-suave);
--linea: var(--linea-oscura);
--campo-fondo: var(--arena-oscura);
--campo-borde: var(--linea-oscura);
--error: var(--rojo-error);
/* ---------- Tipografía: una sola familia, dos voces (rótulo 500 / título 700) ---------- */
--fuente: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
/* Escala ×1,2 sobre la base. El rem ya crece con la pantalla (bloque 2), así que
aquí no hay clamps. Ningún font-size fuera de estas ocho variables. */
--t-rotulo: 0.885rem; /* RÓTULO: barra superior, botones, filtros, VER MÁS, dt, etiquetas,
pies de foto, títulos del pie, legal, ayudas y errores */
--t-base: 1.0625rem; /* cuerpo, párrafos, campos, texto del pie, número de paso, menú principal */
--t-destacado: 1.275rem; /* entradillas (portada incluida), dd de contacto, h3 de pasos */
--t-subtitulo: 1.53rem; /* nombre de panel, teléfono grande, h2 de textos legales */
--t-titulo-corto: 1.836rem; /* h2 de dos columnas en una línea: DISTRIBUIDOR OFICIAL DE, TRABAJOS RECIENTES,
QUIÉNES SOMOS, DÓNDE TRABAJAMOS, QUÉ INCLUYE / VENTAJAS, cierre */
--t-titulo: 2.203rem; /* h2 de sección a todo el ancho: LO QUE INSTALAMOS, CÓMO TRABAJAMOS,
CONTACTO, TRABAJOS DE */
--t-pagina: 2.644rem; /* h1 de portadilla interior y de contacto.html */
--t-portada: 3.807rem; /* solo el h1 sobre el vídeo (dos peldaños por encima de la portadilla) */
/* ---------- Medidas: unidad 0,5rem, todo es múltiplo ---------- */
--ancho-maximo: min(90vw, 100rem); /* el MARCO: barra superior, menú, pie y el mosaico de cuatro paneles */
--ancho-estrecho: min(76vw, 84rem); /* la RETÍCULA: todo lo demás dentro de (.contenedor) */
--margen-lateral: clamp(1.25rem, 5vw, 3rem);
--espacio-bloque: 5rem; /* aire vertical de .bloque, .portadilla y contenido de portada; parte alta del pie */
--espacio-franja: 2.5rem; /* aire vertical de .franja (DÓNDE TRABAJAMOS, cierre); parte baja del pie */
--espacio-titulo: 3rem; /* de la cabecera de un bloque (título/entradilla) a su contenido */
--espacio-columna: 4rem; /* calle entre columnas de cualquier rejilla de 2, 3 o 4 columnas de texto */
--espacio-rejilla: 1.5rem; /* calle entre paneles de servicio y entre fichas de galería */
--espacio-texto: 1rem; /* entre título, entradilla, párrafos y enlace dentro de una pila */
--espacio-control: 0.5rem; /* etiqueta→campo, icono→texto, entre puntos de la presentación */
--alto-panel: clamp(20rem, 28vw, 28rem); /* alto EXTERIOR de las tres cajas espejo: logos, presentación, foto de la tienda */
--alto-control: 3rem; /* altura única de botón, campo, filtro, flecha, botón de menú, cerrar visor, pausa, tesela de paso */
--alto-cabecera: 4.75rem; /* menú principal */
--alto-barra: 2.25rem; /* barra fina de enlaces y redes, encima del menú */
--alto-logo: 1.625rem; /* mismo alto del logo en cabecera y pie */
}
/* ==========================================================
2. RESET Y BASE
========================================================== */
* { box-sizing: border-box; }
/* La unidad base crece con el ancho de la pantalla: en un monitor grande todo
(letras, botones, huecos, cajas) se ve proporcionalmente más grande, como en
la web de Stûv. Va de 15px en pantallas pequeñas a 22px en las muy anchas. */
html { font-size: clamp(15px, 0.45vw + 9px, 22px); scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-barra) + 1rem); }
body {
margin: 0;
background: var(--arena);
color: var(--texto);
font-family: var(--fuente);
font-size: var(--t-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img, video, svg { max-width: 100%; display: block; }
/* Toques en móvil sin retardo ni resaltado azul */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Enlaces: el texto nunca se vuelve naranja; la línea es el acento */
a { color: var(--texto); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--naranja); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--texto); }
/* Todo título es TÍTULO por defecto (700, mayúsculas). Las excepciones se declaran en su bloque. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; color: var(--texto); }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
/* Único anillo de foco de la web, también para los campos del formulario */
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.salto-contenido {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--naranja); color: var(--carbon);
padding: 0.75rem 1.25rem; font-weight: 500; text-decoration: none;
}
.salto-contenido:focus { left: 0; }
/* ==========================================================
3. UTILIDADES (contenedor, secciones, botones, títulos)
========================================================== */
/* La retícula: todo lo que hay dentro de va a este ancho. El marco
(barra, menú, pie) y el mosaico de paneles se ensanchan en sus propios bloques. */
.contenedor {
max-width: var(--ancho-estrecho);
margin: 0 auto;
padding-left: max(var(--margen-lateral), env(safe-area-inset-left));
padding-right: max(var(--margen-lateral), env(safe-area-inset-right));
}
.bloque { padding-top: var(--espacio-bloque); padding-bottom: var(--espacio-bloque); background: var(--fondo); color: var(--texto); }
.franja { padding-top: var(--espacio-franja); padding-bottom: var(--espacio-franja); background: var(--fondo); color: var(--texto); }
/* Contexto oscuro: cambia los colores de contexto y todo lo de dentro se adapta */
.oscuro, .cabecera, .portada, .pie, .visor {
--fondo: var(--carbon);
--caja: var(--carbon-caja);
--texto: var(--crema);
--texto-2: var(--crema-media);
--texto-3: var(--crema-suave);
--linea: var(--linea-clara);
--campo-fondo: var(--carbon-caja);
--campo-borde: var(--linea-clara);
--error: var(--rojo-error-suave);
}
/* El marco (cabecera y pie) es un punto más claro que las secciones oscuras */
.cabecera, .pie { --fondo: var(--carbon-medio); }
/* Títulos: mayúsculas, 700 y tracking vienen del bloque 2; aquí solo el tamaño */
.titulo { font-size: var(--t-titulo); }
/* Título corto de los bloques de dos columnas: siempre en una sola línea */
.titulo-linea { font-size: var(--t-titulo-corto); white-space: nowrap; }
/* Título con raya naranja debajo: portada (marcas, trabajos, cómo trabajamos, quiénes somos) */
.titulo-raya { display: flex; flex-direction: column; gap: 0.875rem; }
.titulo-raya::after { content: ''; width: 3.5rem; height: 3px; background: var(--naranja); }
.titulo-centrado.titulo-raya { align-items: center; }
/* Título centrado con una línea fina a cada lado (LO QUE INSTALAMOS, CÓMO TRABAJAMOS) */
.titulo-centrado { display: flex; align-items: center; gap: 1.5rem; text-align: center; white-space: nowrap; }
.titulo-centrado::before, .titulo-centrado::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.texto-bloque { color: var(--texto-2); max-width: 58ch; line-height: 1.65; }
.entradilla { font-size: var(--t-destacado); color: var(--texto-2); max-width: 58ch; }
.cabecera-bloque { display: flex; flex-direction: column; gap: var(--espacio-texto); margin-bottom: var(--espacio-titulo); }
.cabecera-doble { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-texto) var(--espacio-columna); flex-wrap: wrap; margin-bottom: var(--espacio-titulo); }
/* EL BOTÓN: un solo molde para todos los controles de la web (botones, filtros,
flechas de la presentación, botón del menú, cerrar visor, pausa del vídeo).
Rótulo en mayúsculas, 3rem de alto, borde de 1px, sin redondeo. */
.boton, .filtro, .presentacion-boton, .boton-menu, .visor-cerrar, .portada-pausa {
display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-control);
height: var(--alto-control); padding: 0 1rem;
font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; line-height: 1;
white-space: nowrap; text-decoration: none;
background: transparent; color: var(--texto);
border: 1px solid currentColor; border-radius: 0; cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
/* Botón principal: relleno naranja del logo, igual sobre claro y sobre oscuro */
.boton { background: var(--naranja); color: var(--carbon); border-color: var(--naranja); }
.acciones-cabecera .boton { white-space: nowrap; }
.boton:hover { background: var(--brasa); border-color: var(--brasa); color: var(--carbon); }
/* Botón que ocupa todo el ancho de su columna */
.boton-ancho { width: 100%; }
/* Botón oscuro: para usar sobre fondo naranja */
.boton-oscuro { background: var(--carbon); border-color: var(--carbon); color: var(--crema); }
.boton-oscuro:hover { background: var(--carbon-medio); border-color: var(--carbon-medio); color: var(--crema); }
/* Botón secundario: solo borde, toma el color del texto de la sección */
.boton-borde { background: transparent; color: var(--texto); border-color: currentColor; }
.boton-borde:hover, .filtro:hover, .presentacion-boton:hover, .boton-menu:hover, .visor-cerrar:hover, .portada-pausa:hover {
background: var(--texto); color: var(--fondo); border-color: var(--texto);
}
/* Controles de icono: cuadrados */
.presentacion-boton, .boton-menu, .visor-cerrar { width: var(--alto-control); padding: 0; }
.boton svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
/* EL ENLACE DE IR-A: rótulo con una línea naranja que crece al pasar el ratón
(VER MÁS de los paneles, dominios de las marcas, Ver todos los trabajos...) */
.enlace-mas {
display: inline-flex; align-items: center; gap: 0.75rem;
font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
color: var(--texto); text-decoration: none; white-space: nowrap;
}
.enlace-mas::after { content: ''; width: 1.5rem; height: 1px; background: var(--naranja); transition: width .15s; }
.enlace-mas:hover::after { width: 2.5rem; }
.telefono-grande { font-size: var(--t-subtitulo); font-weight: 700; letter-spacing: 0; text-decoration: none; color: var(--texto); }
.telefono-grande:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--naranja); text-underline-offset: 4px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ==========================================================
4. CABECERA Y MENÚ (siempre oscura)
Dos tonos: barra fina en carbón profundo y menú en el marrón del marco.
El cambio de tono ya separa; no lleva filetes.
========================================================== */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--carbon-medio); color: var(--texto); }
/* Barra superior fina: enlaces secundarios a la izquierda, redes a la derecha */
.barra-superior { background: var(--carbon-profundo); }
.barra-superior-interior, .cabecera-interior { max-width: var(--ancho-maximo); }
.barra-superior-interior { display: flex; align-items: center; justify-content: space-between; height: var(--alto-barra); }
.barra-enlaces { display: flex; align-items: center; gap: 1.5rem; list-style: none; padding: 0; }
.barra-enlaces a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texto-2); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .04em; text-decoration: none; }
.barra-enlaces svg { width: 0.875rem; height: 0.875rem; color: var(--naranja); }
.barra-enlaces a:hover { color: var(--texto); }
/* Logo, menú y botones repartidos con el mismo hueco entre ellos: el menú queda centrado
a la misma distancia del logo que de los botones */
.cabecera-interior { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; height: var(--alto-cabecera); }
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: var(--alto-logo); width: auto; }
.logo-isotipo { display: none; }
/* Menú: la única voz 500 en caja normal. Va a tamaño de cuerpo (un escalón por encima del
rótulo de la barra superior) y sigue cabiendo en una fila hasta que se pliega a 1280px */
.menu { display: flex; align-items: center; gap: 1rem; list-style: none; padding: 0; }
/* Desplegable de Servicios: franja horizontal con los cuatro servicios en fila */
.menu-servicios { position: static; }
.menu-boton { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
.menu-chevron { width: 1rem; height: 1rem; transition: transform .15s; }
.menu-abierto-servicios .menu-chevron { transform: rotate(180deg); }
.megamenu {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--carbon-medio); border-top: 1px solid var(--linea); box-shadow: var(--sombra);
}
.megamenu-lista {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem; list-style: none; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.megamenu-enlace { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--texto); }
.megamenu-foto { width: 3.5rem; aspect-ratio: 1; height: auto; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--linea); transition: opacity .15s; }
.megamenu-enlace:hover .megamenu-foto { opacity: .75; }
.megamenu-texto { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.megamenu-nombre { font-size: var(--t-base); font-weight: 500; line-height: 1.2; }
.megamenu-pie { color: var(--texto-2); font-size: var(--t-rotulo); }
.megamenu-enlace:hover .megamenu-nombre { color: var(--naranja); }
.enlace-menu { color: var(--texto); font-weight: 500; font-size: var(--t-base); text-decoration: none; white-space: nowrap; padding: 0.375rem 0; border-bottom: 2px solid transparent; transition: border-color .15s; }
.enlace-menu:hover, .menu-activo { border-bottom-color: var(--naranja); }
.acciones-cabecera { display: flex; align-items: center; gap: 1rem; }
.boton-localizar svg { width: 1.125rem; height: 1.125rem; }
/* Botón de menú para móvil: tres rayas dibujadas en CSS (mismo trazo que los iconos SVG).
Tamaño, borde y hover vienen del molde del bloque 3; aquí solo se oculta en escritorio. */
.boton-menu { display: none; position: relative; }
.boton-menu span, .boton-menu span::before, .boton-menu span::after {
content: ''; position: absolute; left: 0.875rem; width: 1.25rem; height: 2px; background: currentColor;
}
.boton-menu span { top: calc(50% - 1px); }
.boton-menu span::before { top: -0.375rem; left: 0; }
.boton-menu span::after { top: 0.375rem; left: 0; }
/* ==========================================================
5. PORTADA
========================================================== */
.portada {
position: relative; min-height: calc(100vh - var(--alto-cabecera) - var(--alto-barra)); min-height: calc(100svh - var(--alto-cabecera) - var(--alto-barra));
display: flex; align-items: center;
background: var(--carbon); color: var(--texto); overflow: hidden;
}
.portada-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.portada-imagen { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* El único velo de la web: protege el texto abajo y deja arder el fuego arriba */
.portada-velo { position: absolute; inset: 0; background: var(--velo-portada); }
/* Botón para parar el vídeo (accesibilidad: el bucle dura más de 5 segundos).
Tamaño, letra, borde y hover vienen del molde del bloque 3. */
/* Pausa del vídeo: no se ve, pero aparece al llegar con el teclado (el vídeo se mueve solo) */
.portada-pausa { position: absolute; left: -9999px; bottom: 1.5rem; z-index: 3; color: var(--texto); background: var(--carbon); }
.portada-pausa:focus-visible { left: max(var(--margen-lateral), env(safe-area-inset-left)); }
/* Tres datos bajo los botones, separados por una barra fina */
.portada-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; list-style: none; padding: 0; margin-top: var(--espacio-texto); }
.portada-datos li { display: flex; align-items: center; gap: 1.75rem; color: var(--texto); font-size: var(--t-base); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.portada-datos li + li::before { content: ''; width: 1px; height: 1.375rem; background: var(--linea); }
/* Enlace de bajar, anclado al fondo de la portada. Lleva flecha hacia abajo en
lugar de la raya del resto de enlaces: no va a otra página, baja en esta. */
.portada-bajar { position: absolute; left: max(var(--margen-lateral), env(safe-area-inset-left)); bottom: 2rem; }
.portada-bajar { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.5rem; }
.portada-bajar::after { display: none; }
.flecha-abajo { width: 1.125rem; height: 1.125rem; color: var(--naranja); transition: transform .15s; }
.portada-bajar:hover .flecha-abajo { transform: translateY(0.25rem); }
.portada-contenido { position: relative; width: 100%; padding-top: var(--espacio-bloque); padding-bottom: calc(var(--espacio-bloque) + 3rem); }
.portada h1 { font-size: var(--t-portada); letter-spacing: .02em; max-width: 30ch; color: var(--texto); }
.portada-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-texto); min-width: 0; }
.portada-parrafo { font-size: var(--t-destacado); color: var(--texto-2); max-width: 58ch; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: var(--espacio-texto); }
/* ==========================================================
6. SERVICIOS (cuatro paneles al ancho del marco)
ÚNICA excepción a la retícula: el mosaico es fotografía y va al
ancho del marco (90vw), con su título centrado y sus líneas al
mismo ancho.
========================================================== */
.servicios-interior { max-width: var(--ancho-maximo); display: flex; flex-direction: column; gap: var(--espacio-titulo); }
.servicios-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-rejilla); list-style: none; padding: 0; }
.servicio { min-width: 0; aspect-ratio: 1 / 1; }
/* Cada panel es una VENTANA: marco de 1px, fondo caja, foto limpia */
.servicio-enlace {
position: relative; display: flex; flex-direction: column;
width: 100%; height: 100%; overflow: hidden;
background: var(--caja); border: 1px solid var(--linea);
color: var(--texto); text-decoration: none;
transition: border-color .15s;
}
.servicio-enlace:hover { border-color: var(--texto); }
/* La foto ocupa la parte de arriba del panel; antes iba detrás del texto y el
recorte se comía justo lo que había que ver */
.servicio-foto { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
/* Fotos verticales: se baja el encuadre para que se vea el equipo y no el techo */
.servicio-foto-baja { object-position: center 68%; }
/* Barra de pie sólida superpuesta abajo: nombre grande y VER MÁS */
.servicio-texto {
position: relative; flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--espacio-control);
padding: 1rem 1.25rem; background: var(--caja); border-top: 1px solid var(--linea);
}
.servicio-nombre { font-size: var(--t-subtitulo); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
/* La línea del VER MÁS crece al pasar por cualquier punto del panel */
.servicio-enlace:hover .enlace-mas::after { width: 2.5rem; }
/* ==========================================================
7. MARCAS (sección oscura: logos a la izquierda, título a la derecha)
========================================================== */
.marcas-interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-columna); align-items: center; }
.marcas-texto { display: flex; flex-direction: column; gap: var(--espacio-texto); }
/* Caja de logos: misma altura exterior que la presentación y la foto de la tienda; tres filas iguales */
.marcas-lista { display: flex; flex-direction: column; height: var(--alto-panel); list-style: none; padding: 0; background: var(--caja); border: 1px solid var(--linea); }
.marcas-lista li { flex: 1; display: flex; min-height: 0; }
.marcas-lista li + li { border-top: 1px solid var(--linea); }
.marca-enlace {
flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: 0 1.5rem;
color: var(--texto); text-decoration: none;
}
/* Los tres logos a la misma altura: el ancho máximo permite que Rocal (el más apaisado) llegue a 2.25rem */
.marca-logo { width: 9rem; height: 3.25rem; object-fit: contain; object-position: left center; }
.marca-enlace:hover .enlace-mas::after { width: 2.5rem; }
/* ==========================================================
8. TRABAJOS (portada: presentación · resto: fichas foto + pie)
========================================================== */
/* Portada: texto a la izquierda, presentación de fotos a la derecha */
.trabajos-interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-columna); align-items: center; }
.trabajos-texto { display: flex; flex-direction: column; gap: var(--espacio-texto); align-items: stretch; }
.trabajos-texto .enlace-mas { margin-top: var(--espacio-texto); }
/* La caja mide exactamente --alto-panel por fuera; los controles van debajo, fuera de la caja */
.presentacion { display: flex; flex-direction: column; gap: var(--espacio-texto); min-width: 0; }
.presentacion-lista { position: relative; height: var(--alto-panel); list-style: none; padding: 0; overflow: hidden; background: var(--caja); border: 1px solid var(--linea); }
.diapositiva { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.diapositiva-activa { opacity: 1; }
.diapositiva-interior { position: relative; width: 100%; height: 100%; }
.diapositiva img { width: 100%; height: 100%; object-fit: cover; }
/* Barra de pie sólida, mismo dibujo que la de los paneles */
.diapositiva figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 0.75rem 1rem; background: var(--caja); border-top: 1px solid var(--linea);
color: var(--texto-2); font-size: var(--t-rotulo);
}
/* Flechas y puntos para pasar a mano (las flechas vienen del molde del bloque 3) */
.presentacion-controles { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-texto); }
.presentacion-boton { color: var(--texto); }
.presentacion-boton svg { width: 1.125rem; height: 1.125rem; }
.presentacion-puntos { display: flex; gap: var(--espacio-control); list-style: none; padding: 0; }
.punto { width: 0.625rem; height: 0.625rem; padding: 0; border: 0; border-radius: 0; background: var(--texto-3); cursor: pointer; transition: background .15s; }
.punto:hover { background: var(--texto); }
.punto[aria-current="true"] { background: var(--naranja); }
/* Galería y páginas de servicio: fichas en rejilla. Cada ficha es una VENTANA
con la barra de pie debajo de la foto (la ficha crece con el texto). */
.trabajos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-rejilla); list-style: none; padding: 0; }
.trabajo { display: flex; flex-direction: column; min-width: 0; background: var(--caja); border: 1px solid var(--linea); transition: border-color .15s; }
.trabajo:hover { border-color: var(--texto); }
.trabajo-enlace { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--caja); }
.trabajo-enlace img { width: 100%; height: 100%; object-fit: cover; }
.trabajo figcaption { padding: 0.75rem 1rem; border-top: 1px solid var(--linea); font-size: var(--t-rotulo); color: var(--texto-2); }
/* ==========================================================
9. CÓMO TRABAJAMOS (sección oscura, tres pasos numerados)
========================================================== */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-rejilla); list-style: none; padding: 0; counter-reset: paso; }
.paso { display: flex; flex-direction: column; gap: var(--espacio-control); padding: 1.75rem; background: var(--caja); border-top: 3px solid var(--naranja); counter-increment: paso; }
/* Numeral 01/02/03 en una tesela cuadrada: el naranja es línea, el número va en el color del texto */
.paso::before {
content: counter(paso, decimal-leading-zero);
display: inline-flex; align-items: center; justify-content: center;
width: var(--alto-control); height: var(--alto-control);
border: 1px solid var(--naranja);
font-size: var(--t-base); font-weight: 500; color: var(--texto); line-height: 1; letter-spacing: 0;
}
/* Los h3 no son títulos de sección: caja normal, un escalón por debajo del h2 */
.paso h3 { font-size: var(--t-destacado); text-transform: none; letter-spacing: 0; line-height: 1.2; }
.paso p { color: var(--texto-2); line-height: 1.65; }
/* ==========================================================
10. QUIÉNES SOMOS
========================================================== */
/* Texto a la izquierda con botón, foto de la tienda a la derecha (misma caja que marcas y trabajos) */
.quienes-interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-columna); align-items: center; }
.quienes-texto { display: flex; flex-direction: column; gap: var(--espacio-texto); }
.quienes-foto { height: var(--alto-panel); overflow: hidden; background: var(--caja); border: 1px solid var(--linea); }
.quienes-foto img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================
11. ZONA DE TRABAJO
========================================================== */
/* Franja clara separada de QUIÉNES SOMOS por una línea a la anchura de la retícula.
La línea se dibuja con ::before, DENTRO del margen lateral del contenedor, para que
empiece y acabe donde el texto, la caja de logos y la foto de la tienda. */
/* ==========================================================
12. CONTACTO Y FORMULARIO (sección oscura)
========================================================== */
.contacto-interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-columna); align-items: center; }
/* Sin gap: el aire entre la cabecera del bloque y los datos ya lo pone .cabecera-bloque */
.contacto-datos { display: flex; flex-direction: column; }
.datos-lista { display: flex; flex-direction: column; gap: 1.75rem; }
.datos-lista dt { font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); margin-bottom: var(--espacio-control); }
.datos-lista dd { margin: 0; font-size: var(--t-destacado); line-height: 1.5; overflow-wrap: anywhere; }
.datos-lista a { text-decoration: none; }
.datos-lista a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--naranja); text-underline-offset: 3px; }
/* Marcador temporal para los textos que faltan */
.pendiente { color: var(--texto-3); font-style: italic; }
/* Portada: bloque de contacto compacto y centrado: título, tres tarjetas y botón */
.contacto-compacto { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-titulo); }
.cabecera-centrada { align-items: center; text-align: center; margin-bottom: 0; }
.contacto-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-rejilla); width: 100%; list-style: none; padding: 0; }
.contacto-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.75rem 1.25rem; text-align: center; background: var(--caja); border-top: 3px solid var(--naranja); }
.contacto-tarjeta .icono { display: inline-flex; color: var(--naranja); margin-bottom: 0.25rem; }
.contacto-tarjeta .icono svg { width: 1.75rem; height: 1.75rem; }
.contacto-etiqueta { font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.contacto-dato { font-size: var(--t-destacado); font-weight: 600; color: var(--texto); line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
a.contacto-dato:hover { color: var(--naranja); }
.contacto-mapa { font-size: var(--t-pequeno); color: var(--texto-2); }
/* Portada: en vez del formulario, la llamada a la página de Contacto.
El formulario vive solo en contacto.html, para no tener dos que mantener. */
.contacto-llamada { display: flex; flex-direction: column; gap: 0; }
.contacto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.formulario { display: flex; flex-direction: column; gap: 1.5rem; }
.formulario-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
/* La etiqueta va en rótulo, misma voz que los dt de la izquierda */
.campo { display: flex; flex-direction: column; gap: var(--espacio-control); font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2); }
/* Los campos son VENTANAS de 3rem. Imprescindible devolver caja normal y sin tracking:
la etiqueta contiene al campo y, si no, lo que teclea el visitante saldría en mayúsculas espaciadas. */
.campo input, .campo textarea, .campo select {
height: var(--alto-control); padding: 0 1rem;
border-radius: 0; border: 1px solid var(--campo-borde);
background: var(--campo-fondo); color: var(--texto);
font-size: var(--t-base); font-weight: 400; text-transform: none; letter-spacing: 0;
transition: border-color .15s;
}
.campo textarea { height: auto; padding: 0.75rem 1rem; line-height: 1.5; resize: vertical; }
.campo select { cursor: pointer; }
.campo option { background: var(--fondo); color: var(--texto); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo-ayuda { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto-3); }
.campo-error { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-rotulo); color: var(--error); }
.consentimiento { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--t-base); color: var(--texto-2); line-height: 1.5; }
.consentimiento input { width: 1.25rem; height: 1.25rem; margin-top: 2px; flex: 0 0 auto; accent-color: var(--naranja); }
/* Información básica de protección de datos, en letra pequeña bajo la casilla */
.formulario-nota { font-size: var(--t-pequeno); color: var(--texto-3); line-height: 1.5; }
.formulario-nota a { color: inherit; }
.boton-enviar { align-self: flex-start; }
/* Tres estados del botón, marcados por el JS en data-estado: sin él (listo), "enviando" y "enviado".
Bloqueado no cambia de color al pasar el ratón, y la marca de visto solo aparece al terminar. */
.boton-enviar:disabled, .boton-enviar:disabled:hover { background: var(--naranja); border-color: var(--naranja); color: var(--carbon); cursor: default; }
.boton-enviar[data-estado="enviando"] { opacity: .7; }
.boton-enviar svg { display: none; }
.boton-enviar[data-estado="enviado"] svg { display: block; }
/* Formulario ya enviado: los campos se apagan para que se vea que quedó hecho */
.campo :disabled, .consentimiento :disabled { opacity: .5; cursor: not-allowed; }
/* Aviso de enviado o de error: una VENTANA con barra de color a la izquierda, icono y título en rótulo.
Naranja = enviado (el acento de la web); rojo = error. Entra con un fundido corto. */
.aviso { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; background: var(--caja); border: 1px solid var(--linea); border-left: 4px solid var(--naranja); border-radius: 0; line-height: 1.5; animation: aviso-entra .25s ease-out; }
.aviso-error { border-left-color: var(--error); }
.aviso-icono { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; margin-top: .125rem; color: var(--naranja); }
.aviso-error .aviso-icono { color: var(--error); }
.aviso-texto { display: flex; flex-direction: column; gap: var(--espacio-control); }
.aviso-titulo { font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--texto); }
.aviso p { margin: 0; color: var(--texto-2); }
.aviso a { color: var(--texto); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
/* El atributo hidden pierde contra display:flex; sin estas dos líneas ni el aviso ni el formulario se ocultarían */
.aviso[hidden], .formulario[hidden] { display: none; }
/* ==========================================================
13. PÁGINAS DE SERVICIO (portadilla clara y cierre)
========================================================== */
/* Texto de las páginas de servicio: título, entradilla y lista de puntos */
.texto-servicio { display: flex; flex-direction: column; gap: var(--espacio-texto); }
.lista-ventajas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; max-width: 70ch; }
.lista-ventajas li { padding-left: 1.5rem; position: relative; color: var(--texto-2); line-height: 1.6; }
.lista-ventajas li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 1px; background: var(--naranja); }
.lista-ventajas strong { color: var(--texto); font-weight: 600; }
/* Tarjetas de tres en fila: servicio completo y motivos para elegirnos */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-rejilla); list-style: none; padding: 0; }
.tarjeta { display: flex; flex-direction: column; gap: var(--espacio-control); padding-top: 1.25rem; border-top: 2px solid var(--naranja); }
.tarjeta h3 { font-size: var(--t-subtitulo); }
.tarjeta p { color: var(--texto-2); line-height: 1.6; }
/* Preguntas frecuentes: se abren y cierran sin JavaScript */
.lista-preguntas { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: 1.25rem 0; cursor: pointer; list-style: none;
font-size: var(--t-destacado); font-weight: 600; color: var(--texto);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ''; flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-right: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(45deg); transition: transform .15s; }
.pregunta[open] summary::after { transform: rotate(225deg); }
.pregunta summary:hover { color: var(--naranja); }
.pregunta p { padding-bottom: 1.25rem; color: var(--texto-2); line-height: 1.6; max-width: 70ch; }
.portadilla { background: var(--fondo); color: var(--texto); }
/* Cabecera de página con foto detrás y velo oscuro, como la portada */
.portadilla-con-foto { position: relative; overflow: hidden; background: var(--carbon); color: var(--crema); }
.portadilla-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Foto vertical de fondo: se sube el encuadre para que se vea la persona, no el suelo */
.portadilla-foto-alta { object-position: center 30%; }
.portadilla-velo { position: absolute; inset: 0; background: var(--velo-denso); }
.portadilla-con-foto .portadilla-interior { position: relative; padding-top: calc(var(--espacio-bloque) * 1.4); padding-bottom: calc(var(--espacio-bloque) * 1.4); }
/* Cuerpo de la página de servicio: contenido a la izquierda, barra lateral a la derecha */
.servicio-cuerpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--espacio-columna); align-items: start; }
.servicio-principal { display: flex; flex-direction: column; gap: calc(var(--espacio-bloque) * .8); min-width: 0; }
.parrafo { color: var(--texto-2); line-height: 1.7; max-width: 70ch; }
.parrafo strong { color: var(--texto); font-weight: 600; }
.servicio-principal .titulo-linea { white-space: normal; }
.accion-centrada { display: flex; justify-content: center; }
/* Bloque destacado: foto con el título encima, y el texto debajo */
.destacado { display: flex; flex-direction: column; gap: var(--espacio-texto); }
.destacado-foto { position: relative; min-height: 18rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--carbon); border: 1px solid var(--linea); }
.destacado-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destacado-velo { position: absolute; inset: 0; background: var(--velo-denso); }
.destacado-foto h2 { position: relative; color: var(--crema); font-size: var(--t-titulo-corto); text-align: center; padding: 2rem; max-width: 26ch; }
/* Tarjetas con foto: una por fila, foto a la izquierda y texto a la derecha.
Tres tarjetas en dos columnas dejaban siempre una suelta con un hueco al lado. */
.rejilla-dos { grid-template-columns: minmax(0, 1fr); }
.tarjeta-foto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: center; padding: 1rem; background: var(--caja); border: 1px solid var(--linea); }
.tarjeta-imagen { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; grid-row: span 2; }
.tarjeta-foto h3 { align-self: end; }
.tarjeta-foto p { align-self: start; }
.tarjeta-foto h3 { font-size: var(--t-destacado); text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.35rem; }
.tarjeta-foto p { color: var(--texto-2); line-height: 1.6; font-size: var(--t-pequeno); }
/* Puntos en cajas: título y texto sobre superficie, con filete naranja arriba */
/* Puntos en cajas: una fila por punto (en tres columnas quedaban torres estrechas
dentro de la columna principal). Título a la izquierda, texto a la derecha. */
.puntos-cajas { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; }
.punto-caja { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; padding: 1.25rem 1.5rem; background: var(--caja); border-left: 3px solid var(--naranja); }
.punto-caja h3 { font-size: var(--t-base); line-height: 1.25; }
.punto-caja p { color: var(--texto-2); line-height: 1.6; }
/* Bloque resaltado dentro de la columna: fondo oscuro con su propio aire */
.bloque-resaltado { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--fondo); color: var(--texto); }
.bloque-resaltado .parrafo { color: var(--texto-2); }
/* Franja de llamada en mitad del contenido */
.franja-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 2rem; background: var(--naranja); color: var(--carbon); }
.franja-cta p { font-size: var(--t-destacado); font-weight: 500; line-height: 1.4; max-width: 40ch; }
/* Tarjetas con icono de línea, mismo trazo que el resto de iconos de la web */
.tarjeta-icono .icono { display: inline-flex; color: var(--naranja); }
.tarjeta-icono .icono svg { width: 2rem; height: 2rem; }
/* Sobre nosotros: texto a la izquierda y una caja a la derecha, a todo el ancho */
.sobre-interior { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--espacio-columna); align-items: center; }
.sobre-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-rejilla); list-style: none; padding: 0; }
.sobre-datos li { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; background: var(--caja); border-top: 3px solid var(--naranja); }
.sobre-cifra { font-size: var(--t-titulo); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.sobre-etiqueta { color: var(--texto-2); font-size: var(--t-pequeno); line-height: 1.4; }
.puntos-cajas-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-rejilla); }
.puntos-cajas-doble .punto-caja { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.sobre-marcas { display: flex; flex-direction: column; list-style: none; padding: 0; background: var(--carbon); border: 1px solid var(--linea); }
.sobre-marcas li { display: flex; align-items: center; justify-content: center; padding: 1.75rem; }
.sobre-marcas li + li { border-top: 1px solid var(--linea-clara); }
.sobre-marcas img { width: 9rem; height: 3.25rem; object-fit: contain; }
/* Barra lateral: se queda fija al hacer scroll */
.lateral { position: sticky; top: calc(var(--alto-cabecera) + var(--alto-barra) + 1.5rem); display: flex; flex-direction: column; gap: var(--espacio-rejilla); }
.caja-preguntas { background: var(--carbon); color: var(--crema); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.caja-preguntas h2 { color: var(--crema); font-size: var(--t-destacado); }
.caja-preguntas ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.caja-preguntas li { padding: 0.75rem 0 0.75rem 1.25rem; position: relative; border-bottom: 1px solid var(--linea-clara); }
.caja-preguntas li:last-child { border-bottom: 0; }
.caja-preguntas li::before { content: ''; position: absolute; left: 0; top: 1.25rem; width: 0.5rem; height: 0.5rem; background: var(--naranja); }
.caja-preguntas a { color: var(--crema-media); font-size: var(--t-pequeno); line-height: 1.45; text-decoration: none; }
.caja-preguntas a:hover { color: var(--naranja); }
.caja-ayuda { background: var(--naranja); color: var(--carbon); padding: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.caja-ayuda h2 { color: var(--carbon); font-size: var(--t-destacado); }
.caja-ayuda p { line-height: 1.5; }
.caja-ayuda-telefono { color: var(--carbon); font-size: var(--t-subtitulo); font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.caja-ayuda-telefono:hover { text-decoration: underline; }
.portadilla-interior { padding-top: var(--espacio-bloque); padding-bottom: var(--espacio-bloque); display: flex; flex-direction: column; gap: var(--espacio-texto); }
.portadilla h1 { font-size: var(--t-pagina); letter-spacing: .03em; max-width: 20ch; }
.portadilla p { color: var(--texto-2); font-size: var(--t-destacado); max-width: 58ch; }
/* Con foto detrás, título y frase van en crema (estas dos reglas deben ir después de las de arriba) */
.portadilla-con-foto h1 { color: var(--crema); }
.portadilla-con-foto p { color: var(--crema); }
.texto-doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-columna); }
.texto-columna { display: flex; flex-direction: column; gap: var(--espacio-texto); }
.texto-columna h2 { font-size: var(--t-titulo-corto); }
.texto-columna p { color: var(--texto-2); max-width: 58ch; }
/* Cierre: título a la izquierda, botón y teléfono a la derecha */
.cierre-interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem var(--espacio-columna); }
.cierre-interior h2 { font-size: var(--t-titulo-corto); max-width: 28ch; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
/* Bloque claro que sigue a una portadilla clara (textos legales): sin duplicar el aire */
.bloque-seguido { padding-top: 0; }
/* ==========================================================
14. GALERÍA Y FILTROS (página de trabajos)
========================================================== */
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin-bottom: var(--espacio-titulo); }
/* Los filtros vienen del molde del bloque 3; el activo se rellena de naranja y no cambia al pasar el ratón */
.filtro { color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); color: var(--carbon); }
.sin-resultados { color: var(--texto-2); padding: var(--espacio-titulo) 0; }
/* ==========================================================
15. VISOR DE FOTOS (se abre al pulsar una foto de trabajo)
========================================================== */
.visor { border: 0; padding: 0; background: transparent; max-width: min(96vw, 87.5rem); max-height: 96vh; overscroll-behavior: contain; }
.visor::backdrop { background: var(--velo-visor); }
.visor-interior { display: flex; flex-direction: column; gap: var(--espacio-texto); }
.visor img { max-height: 84vh; width: auto; max-width: 100%; margin: 0 auto; }
.visor figcaption { color: var(--texto); font-size: var(--t-rotulo); text-align: center; }
/* Botón de cerrar: cuadrado del molde del bloque 3, arriba a la derecha */
.visor-cerrar { position: absolute; top: 0; right: 0; color: var(--texto); }
.visor-cerrar svg { width: 1.125rem; height: 1.125rem; }
/* ==========================================================
16. TEXTOS LEGALES
========================================================== */
/* Documento largo: una línea a la anchura del texto lo separa de la portadilla clara.
El margen izquierdo lo alinea con el título de la portadilla (el borde de la retícula).
El ancho suma el margen lateral del contenedor para que el texto mida 60ch de verdad,
y la línea se dibuja con ::before, dentro de ese margen, alineada con el texto. */
.contenido { max-width: calc(60ch + 2 * var(--margen-lateral)); margin-left: calc((100% - var(--ancho-estrecho)) / 2); }
.contenido::before { content: ''; display: block; height: 1px; background: var(--linea); margin-bottom: var(--espacio-franja); }
.contenido h2 { font-size: var(--t-subtitulo); margin: var(--espacio-titulo) 0 var(--espacio-texto); }
.contenido h2:first-child { margin-top: 0; }
.contenido p { color: var(--texto-2); margin-bottom: var(--espacio-texto); }
.contenido ul { padding-left: 1.375rem; margin-bottom: var(--espacio-texto); color: var(--texto-2); }
.contenido li { margin-bottom: var(--espacio-control); }
.contenido table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; font-size: var(--t-base); }
.contenido th, .contenido td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--linea); vertical-align: top; color: var(--texto-2); }
.contenido th { font-weight: 500; color: var(--texto); width: 34%; }
.fecha-actualizacion { color: var(--texto-3); font-size: var(--t-rotulo); margin-bottom: var(--espacio-titulo); }
/* ==========================================================
17. PIE DE PÁGINA (siempre oscuro)
Es la cabecera en espejo: cuerpo en el tono del menú y franja
legal en el tono de la barra superior. Sin filetes: el salto de
tono desde la sección anterior ya separa.
========================================================== */
.pie { background: var(--carbon-medio); color: var(--texto-2); }
.pie-interior { max-width: var(--ancho-maximo); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--espacio-columna); align-items: start; padding-top: var(--espacio-franja); padding-bottom: var(--espacio-franja); }
.pie-columna { display: flex; flex-direction: column; gap: var(--espacio-texto); font-size: var(--t-base); line-height: 1.5; }
.pie-titulo { font-size: var(--t-rotulo); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.pie-columna a { text-decoration: none; color: var(--texto-2); }
.pie-columna a:hover { color: var(--texto); }
.pie-logo img { height: var(--alto-logo); width: auto; }
.pie-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-control); }
/* Siete apartados en una columna hacían una torre; en dos, el pie queda a la misma altura */
.pie-lista-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-control) 1.5rem; }
/* Franja legal: el tono de la barra superior de la cabecera */
.pie-legal-banda { background: var(--carbon-profundo); }
.pie-legal { max-width: var(--ancho-maximo); padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: var(--t-rotulo); color: var(--texto-3); }
.pie-legal a { text-decoration: none; color: var(--texto-3); }
.pie-legal a + a { margin-left: 1.5rem; }
.pie-legal a:hover { color: var(--texto); }
/* ==========================================================
18. RESPONSIVE (de mayor a menor pantalla)
Solo variables y reglas de disposición: ningún color ni tamaño
nuevo fuera de las redefiniciones de variables.
========================================================== */
@media (max-width: 1600px) {
/* Hasta 1600px "Dónde estamos" va solo con el icono: con texto, el menú de 7 apartados
y los dos botones no caben en una fila */
.boton-localizar span { display: none; }
.boton-localizar { width: var(--alto-control); padding: 0; }
}
@media (max-width: 1280px) {
/* El menú se pliega; "Pida presupuesto" sigue visible fuera del menú */
.menu {
display: none; position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--carbon-medio);
padding: 0.5rem var(--margen-lateral) 1.25rem;
}
.enlace-menu { display: block; padding: 0.875rem 0; font-size: var(--t-base); border-bottom: 1px solid var(--linea); }
.enlace-menu:hover, .menu-activo { border-bottom-color: var(--naranja); }
.menu-abierto .menu { display: flex; }
/* En el menú plegado "Servicios" es una fila más con flecha; al tocarla se abren los cuatro servicios debajo, con sangría */
.menu-servicios { display: block; }
.menu-boton { display: flex; width: 100%; justify-content: space-between; text-align: left; }
.menu-abierto-servicios .menu-boton { border-bottom-color: var(--naranja); }
.megamenu { display: block; position: static; width: auto; max-width: none; background: transparent; border: 0; box-shadow: none; }
.megamenu[hidden] { display: none; }
.megamenu-lista { display: flex; flex-direction: column; gap: 0; padding: 0; }
.megamenu-foto, .megamenu-pie { display: none; }
.megamenu-lista li + li { border-top: 0; }
.megamenu-enlace { padding: 0.75rem 0 0.75rem 1.25rem; border-bottom: 1px solid var(--linea); }
.megamenu-enlace:hover { background: transparent; }
.megamenu-nombre { font-weight: 400; font-size: var(--t-base); text-transform: none; letter-spacing: normal; }
.boton-menu { display: inline-flex; }
}
@media (max-width: 1080px) {
.megamenu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.servicios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-interior { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
:root { --espacio-columna: 2.5rem; }
/* Con el menú plegado y menos ancho, "Dónde estamos" deja sitio a "Pida presupuesto" */
.boton-localizar { display: none; }
.titulo-centrado, .titulo-linea { white-space: normal; }
/* Las tres cajas espejo pasan a alto automático */
.marcas-lista, .presentacion-lista, .quienes-foto { height: auto; }
.marcas-lista li { min-height: 4.5rem; }
.presentacion-lista { aspect-ratio: 4 / 3; }
.marcas-texto { order: -1; }
.trabajos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pasos { grid-template-columns: minmax(0, 1fr); }
.marcas-interior, .trabajos-interior, .quienes-interior, .sobre-interior, .contacto-interior, .texto-doble { grid-template-columns: minmax(0, 1fr); }
.puntos-cajas-doble, .sobre-datos { grid-template-columns: minmax(0, 1fr); }
.rejilla-tarjetas, .rejilla-dos, .contacto-tarjetas { grid-template-columns: minmax(0, 1fr); }
.punto-caja { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.tarjeta-foto { grid-template-columns: minmax(0, 1fr); }
.tarjeta-imagen { grid-row: auto; }
.servicio-cuerpo { grid-template-columns: minmax(0, 1fr); }
.lateral { position: static; }
.cierre-interior, .cabecera-doble { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
/* En teléfono la retícula y el marco ocupan todo el ancho (queda solo el margen lateral);
el h1 de portada baja a --t-titulo porque "INSTALACIONES" no cabe a --t-pagina en 360px */
:root { --ancho-estrecho: 100%; --ancho-maximo: 100%; --espacio-bloque: 3rem; --espacio-franja: 2rem; --espacio-titulo: 2rem; --t-portada: var(--t-titulo); }
/* Los h2 de sección bajan también un peldaño, para que el h1 siga un escalón por encima */
.titulo { font-size: var(--t-titulo-corto); }
.barra-superior { display: none; }
/* En teléfono la cabecera es solo el logo completo, centrado, y el botón de menú a la derecha.
"Pida presupuesto" y "Dónde estamos" se ocultan aquí: el naranja de la portada queda justo debajo. */
:root { --alto-logo: 1.25rem; }
.cabecera-interior { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: 1rem; }
.cabecera-interior nav { display: contents; }
.logo { grid-column: 2; justify-self: center; }
.acciones-cabecera { grid-column: 3; justify-self: end; }
.acciones-cabecera .boton, .boton-localizar { display: none; }
.servicios-lista { grid-template-columns: minmax(0, 1fr); }
.servicio { aspect-ratio: 16 / 10; }
/* Cada fila de marcas apila logo y dominio: en fila no caben en 360px */
.marca-enlace { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--espacio-control); padding: 1rem 1.5rem; }
.trabajos-lista { grid-template-columns: minmax(0, 1fr); }
.formulario-fila { grid-template-columns: minmax(0, 1fr); }
.pie-interior { grid-template-columns: minmax(0, 1fr); }
.portada-acciones .boton, .cierre-acciones .boton, .boton-enviar { width: 100%; }
/* En teléfono los datos se apilan sin barras y el enlace de bajar vuelve al flujo */
/* Portada centrada; los tres datos se quitan en teléfono (quedan en escritorio) */
.portada-datos { display: none; }
.portada-texto { align-items: center; text-align: center; }
.portada h1 { max-width: none; }
.portada-acciones { justify-content: center; width: 100%; }
.portada-contenido { display: flex; flex-direction: column; align-items: center; }
.portada-bajar { position: static; margin-top: var(--espacio-texto); }
.portada-contenido { padding-bottom: var(--espacio-bloque); }
/* En teléfono todo lo corto va centrado: títulos, entradillas, tarjetas, franjas y pie.
Se quedan a la izquierda los párrafos largos de servicios y legales, las listas de puntos,
las preguntas frecuentes y el formulario: centrados se leen peor porque el ojo pierde el inicio de cada línea. */
.titulo, .entradilla, .cabecera-doble, .portadilla-interior, .marcas-texto, .trabajos-texto, .quienes-texto, .texto-servicio, .servicio-texto, .paso, .tarjeta, .tarjeta-foto, .sobre-datos li, .datos-lista, .caja-ayuda, .cierre-interior, .franja-cta, .pie-columna, .pie-legal { text-align: center; align-items: center; justify-content: center; }
.titulo-raya { align-items: center; }
.entradilla, .cierre-interior h2, .franja-cta p { margin-inline: auto; }
.marca-enlace { align-items: center; }
.enlace-mas { align-self: center; }
.pie-lista-doble { justify-items: center; }
.texto-servicio { align-items: stretch; }
/* En teléfono la barra lateral queda justo debajo de las preguntas y del cierre: la caja de enlaces
a las preguntas y el cierre de las páginas de servicio se quitan, y se queda "¿Necesita ayuda?" */
.caja-preguntas, .cierre-servicio { display: none; }
/* En la página de contacto, en teléfono, solo queda el formulario: teléfono, correo y tienda ya van en el pie */
.contacto-datos { display: none; }
.parrafo, .puntos-cajas, .lista-preguntas, .campo, .contenido { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.boton, .boton-borde, .filtro, .presentacion-boton, .boton-menu, .visor-cerrar, .portada-pausa, .enlace-menu, .enlace-mas::after, .flecha-abajo, .menu-chevron, .megamenu-foto, .campo input, .campo textarea, .campo select, .servicio-enlace, .trabajo, .diapositiva, .punto { transition: none; }
.aviso { animation: none; }
/* Sin movimiento: se sustituye el vídeo de portada por su imagen fija */
.portada-video, .portada-pausa { display: none; }
.portada-imagen { display: block; }
}