/* Multiservicios Pareja · web. Diseño propio con su marca: Oswald (títulos, en mayúsculas) + Work Sans (texto),
   crema, tinta cálida y rojo ladrillo; esquinas casi rectas y botones rectangulares con flecha.
   Efectos de scroll: la cámara entra en la casa (portada) y la casa se construye por fases (sobre nosotros). */

:root {
  --crema: #f3eee5; --piedra: #e8e0d3; --tinta: #1c1815; --tinta-2: #6b6159; --rojo: #a01f23; --rojo-2: #c23a3e; --oscuro: #1c1815;
  --titulo: "Oswald", "Arial Narrow", sans-serif; --texto: "Work Sans", system-ui, sans-serif;
  --m: clamp(16px, 3vw, 56px); --cab: 68px; --r: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--crema); color: var(--tinta); font: 400 1rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .005em; }
em { font-style: normal; color: var(--rojo); }

/* botones rectangulares con flecha */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--r); font: 500 .95rem/1 var(--titulo); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; }
.btn::after { content: "→"; font-family: var(--texto); transition: transform .25s; }
.btn:hover::after { transform: translateX(4px); }
.btn--rojo { background: var(--rojo); color: #fff; }
.btn--rojo:hover { background: var(--rojo-2); }
.btn--linea { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--linea:hover { background: #fff; color: var(--tinta); }
.btn--linea-osc { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn--linea-osc:hover { background: var(--tinta); color: #fff; }

/* etiquetas con la rayita roja (como su web) */
.eti { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); }
.eti::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.eti--clara { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.eti--clara::before { background: var(--rojo-2); }

/* barra superior fija: logo, menú, teléfono y «Pedir visita» */
.cab { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--cab); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--m);
  background: rgba(243,238,229,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(28,24,21,.1); }
.cab-marca { display: flex; align-items: center; gap: 10px; }
.cab-marca img { width: 46px; height: auto; }
.cab-marca span { font: 700 1.18rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .01em; }
.cab-marca b { font-weight: 600; color: var(--rojo); }
.cab-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.cab-nav a { position: relative; font-size: .88rem; font-weight: 500; padding: 6px 0; }
.cab-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.cab-nav a:hover::after { transform: scaleX(1); }
.cab-acc { display: flex; align-items: center; gap: 18px; }
.cab-tel { display: flex; align-items: center; gap: 8px; font: 500 1.02rem/1 var(--titulo); letter-spacing: .03em; }
.cab-tel svg { width: 18px; height: 18px; fill: none; stroke: var(--rojo); stroke-width: 1.8; stroke-linejoin: round; }
.cab .btn { height: 42px; padding: 0 18px; font-size: .88rem; }

/* portada: la cámara entra en la casa con el scroll (secuencia de fotogramas en un canvas) */
/* alturas con svh: en el móvil es la pantalla visible con la barra del navegador puesta */
.hero { position: relative; height: 100vh; height: 100svh; }
.hero-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #c9b9a3; }
.seq, .seq-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.seq-poster { object-fit: cover; transition: opacity .4s; }
.seq-poster.oculto { opacity: 0; }
.hero-sombra { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,16,13,.82) 0%, rgba(20,16,13,.5) 28%, rgba(20,16,13,.1) 52%, rgba(20,16,13,0) 64%), linear-gradient(90deg, rgba(20,16,13,.38) 0%, rgba(20,16,13,0) 48%); }
.hero-txt { position: absolute; left: var(--m); bottom: clamp(36px, 8vh, 90px); z-index: 2; max-width: min(1000px, 92vw); color: #fff; will-change: transform, opacity; }
.hero h1 { font-weight: 700; font-size: clamp(3rem, 6vw, 6.4rem); line-height: 1; letter-spacing: 0; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
/* subrayado rojo con text-decoration: si la frase salta de línea, cada línea lleva el suyo */
.hero h1 span, .hero-final span { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: .09em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.hero-sub { margin-top: 20px; max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.15rem); color: rgba(255,255,255,.88); }
.hero-acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-final { position: absolute; left: 0; right: 0; bottom: clamp(50px, 11vh, 120px); z-index: 2; text-align: center; color: #fff; opacity: 0; pointer-events: none;
  font: 600 clamp(2.2rem, 5.2vw, 5.4rem)/1 var(--titulo); text-transform: uppercase; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
/* indicador de scroll: mano que «empuja» hacia abajo + 3 flechas en cascada + «Desliza» */
.indicador { position: absolute; right: var(--m); top: 46%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff;
  pointer-events: none; opacity: 0; animation: indicadorEntra .8s ease 1.4s forwards; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
@keyframes indicadorEntra { to { opacity: 1; } }
.indicador-pista { position: relative; width: 40px; height: 128px; }
.indicador-mano { position: absolute; left: 0; top: 0; width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  animation: manoDesliza 2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes manoDesliza {
  0% { transform: translateY(0) scale(1.06); opacity: 0; }
  12% { transform: translateY(0) scale(1); opacity: 1; }
  55% { transform: translateY(34px) scale(1); opacity: 1; }
  72%, 100% { transform: translateY(38px) scale(.96); opacity: 0; }
}
.indicador-flechas { position: absolute; left: 50%; top: 80px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.indicador-flechas svg { width: 22px; height: 22px; margin-top: -8px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .12; animation: estela 2s linear infinite; }
.indicador-flechas svg:first-child { margin-top: 0; }
.indicador-flechas svg:nth-child(2) { animation-delay: .18s; }
.indicador-flechas svg:nth-child(3) { animation-delay: .36s; }
@keyframes estela { 0%, 40% { opacity: .12; } 52% { opacity: 1; } 78%, 100% { opacity: .12; } }
.indicador-txt { margin-top: 6px; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

/* sobre nosotros: la casa (izquierda) se construye y se encienden sus 4 fases (derecha) */
.sobre { position: relative; height: 100vh; height: 100svh; background: #e9e9e8; }
.sobre-pin { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: var(--cab) var(--m) 0; overflow: hidden; }
.sobre-vid { position: relative; aspect-ratio: 1; width: min(100%, 84vh); justify-self: start;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.sobre-vid .seq, .sobre-vid .seq-poster { object-fit: contain; transform: scale(1.2); }
.sobre-txt { max-width: 620px; }
.sobre h2 { font-size: clamp(1.9rem, 2.9vw, 3.3rem); line-height: 1.05; }
.parrafo { max-width: 46ch; color: var(--tinta-2); font-size: .98rem; }
.sobre .parrafo { margin-top: 20px; }
.fases { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fases li { position: relative; padding-top: 14px; font: 500 .95rem/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .03em; color: rgba(28,24,21,.35); transition: color .4s; }
.fases li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(28,24,21,.12); }
.fases li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.fases li b { display: block; margin-bottom: 4px; font-weight: 700; font-size: .78rem; letter-spacing: .1em; }
.fases li.on, .fases li.hecha { color: var(--tinta); }
.fases li.on::after, .fases li.hecha::after { transform: scaleX(1); }
.fases li.on b { color: var(--rojo); }

/* credenciales: 4 datos reales en una franja con borde rojo */
.credenciales { padding: clamp(40px, 8vh, 90px) var(--m); background: var(--crema); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cred-tarjeta { width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: var(--r); border-top: 4px solid var(--rojo); box-shadow: 0 20px 50px rgba(28,24,21,.07); }
.cred { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.2vw, 34px); }
.cred + .cred::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(28,24,21,.1); }
.cred-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: rgba(160,31,35,.09); margin-bottom: 6px; }
.cred-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--rojo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cred-num { margin: 0; display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.cred-num b { font: 700 clamp(2.3rem, 3.2vw, 3.4rem)/1 var(--titulo); text-transform: uppercase; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cred-num small { font: 500 1rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .05em; color: var(--rojo); }
.cred-txt { margin: 2px 0 0; font-size: .88rem; color: var(--tinta-2); max-width: 24ch; }
.cred-link { display: inline-flex; gap: 8px; align-items: center; font: 500 .9rem/1 var(--titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--rojo); padding: 8px 0; border-bottom: 2px solid currentColor; }

/* vídeo de presentación */
.video-pres { padding-top: clamp(40px, 7vh, 80px); }
.video-marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--oscuro); box-shadow: 0 30px 80px rgba(28,24,21,.18); }
.video-marco video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* bloques comunes */
.bloque { position: relative; padding: clamp(80px, 13vh, 150px) var(--m); background: var(--crema); }
.bloque-cab { max-width: 820px; margin-bottom: clamp(36px, 6vh, 64px); }
.bloque-cab--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; }
.bloque-cab--fila .parrafo { margin: 0; }
.bloque h2 { font-size: clamp(2.1rem, 3.8vw, 4.2rem); line-height: 1; }
.bloque .bloque-cab > .parrafo { margin-top: 18px; }

/* servicios: lista con números grandes y la foto del que está encendido a la derecha */
.serv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(28,24,21,.16); }
.serv { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(28,24,21,.16); cursor: default; outline: none; }
.serv::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.serv.on::before { transform: scaleX(1); }
.serv-n { font: 700 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--titulo); color: transparent; -webkit-text-stroke: 1.3px rgba(28,24,21,.35); transition: color .35s, -webkit-text-stroke-color .35s; }
.serv.on .serv-n { color: var(--rojo); -webkit-text-stroke-color: var(--rojo); }
.serv h3 { font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.1; }
.serv p { margin-top: 6px; font-size: .92rem; color: var(--tinta-2); max-width: 52ch; }
.serv-mini { display: none; }
.serv-foto { position: sticky; top: calc(var(--cab) + 30px); margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--piedra); }
.serv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.serv-foto img.on { opacity: 1; transform: scale(1); }

/* el problema que resolvemos: bloque oscuro con 4 razones en tarjetas con borde rojo */
.bloque--oscuro { background: var(--oscuro); color: #fff; }
.bloque--oscuro .eti { color: var(--rojo-2); }
.razones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.razones li { padding: 30px 26px 32px; background: rgba(255,255,255,.04); border-left: 3px solid var(--rojo); border-radius: 0 var(--r) var(--r) 0; }
.razon-n { display: block; margin-bottom: 18px; font: 700 2.6rem/1 var(--titulo); color: var(--rojo-2); }
.razones h3 { font-size: 1.35rem; }
.razones p { margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.66); }

/* cómo trabajamos: 4 pasos con foto, número en una placa roja y título */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.paso-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--piedra); margin-bottom: 18px; }
.paso-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paso-n { display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: var(--r); background: var(--rojo); color: #fff; font: 600 .8rem/1 var(--titulo); letter-spacing: .1em; }
.paso h3 { font-size: 1.3rem; line-height: 1.1; }
.paso p { margin: 8px 0 0; font-size: .92rem; color: var(--tinta-2); max-width: 38ch; }
/* presupuesto de ejemplo: todo en «em» y el tamaño de letra sale del ancho del hueco (cqw). Importes difuminados
   (es un formato, no precios). Las líneas entran una a una y cae el sello. */
.paso-img--doc { container-type: size; background: #fff; overflow: hidden; }
.doc { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 3.6cqw; padding: 8% 7% 7%; background: #fff; color: var(--tinta); }
.doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .45em; background: var(--rojo); }
.doc-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8em; border-bottom: .12em solid var(--rojo); }
.doc-cab img { width: 5.4em; height: auto; }
.doc-cab span { display: flex; flex-direction: column; align-items: flex-end; font-size: .78em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.doc-cab b { font-size: 1.15em; letter-spacing: 0; color: var(--tinta); }
.doc p.doc-obra { margin: .8em 0 .6em; max-width: none; font-size: .86em; font-weight: 600; color: var(--tinta); }
.doc-fila { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: .8em; padding: .42em 0; border-bottom: .06em dashed rgba(28,24,21,.14); font-size: .8em; color: var(--tinta-2); }
.doc-fila--tit { flex: none; padding-top: 0; font-size: .66em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(28,24,21,.45); border-bottom-style: solid; }
.doc-fila i, .doc-total i { font-style: normal; font-variant-numeric: tabular-nums; filter: blur(.22em); user-select: none; }
.doc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1em; padding: .6em .7em; border-radius: .2em; background: var(--crema); font-size: .95em; font-weight: 700; }
.doc-firma { display: block; width: 6.5em; margin: .9em 0 0 auto; fill: none; stroke: #2c3e66; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.doc-sello { position: absolute; left: 2em; bottom: 1.7em; padding: .35em .8em; border: .16em solid var(--rojo); border-radius: .3em; color: var(--rojo); font-size: .95em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-14deg); opacity: .9; mix-blend-mode: multiply; }
.doc .doc-fila:not(.doc-fila--tit), .doc .doc-total, .doc .doc-firma { opacity: 0; transform: translateY(.5em); transition: opacity .45s, transform .45s; }
.doc .doc-sello { opacity: 0; transform: rotate(-14deg) scale(2.2); transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.doc.ver .doc-fila, .doc.ver .doc-total, .doc.ver .doc-firma { opacity: 1; transform: none; }
.doc.ver .doc-sello { opacity: .9; transform: rotate(-14deg) scale(1); transition-delay: 1.5s; }

/* trabajos: mosaico (la primera grande, las dos últimas anchas); el texto sube al pasar por encima */
.obras { background: var(--piedra); }
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 19vw, 300px); gap: clamp(10px, 1.2vw, 18px); }
.mos { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: #d6ccbd; cursor: zoom-in; }
.mos--grande { grid-column: span 2; grid-row: span 2; }
.mos--ancha { grid-column: span 2; }
.mos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mos:hover img { transform: scale(1.05); }
.mos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,13,.75) 0%, rgba(20,16,13,0) 50%); }
.mos-txt { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: rgba(255,255,255,.85); font-size: .86rem; }
.mos-txt b { font: 600 1.15rem/1.1 var(--titulo); text-transform: uppercase; color: #fff; }
.mos--grande .mos-txt b { font-size: 1.6rem; }

/* botón a la página con todos los trabajos */
.obras-mas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(26px, 4vh, 40px); }
.obras-mas p { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.obras-cab-der { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 46ch; }

/* zona: texto y pueblos a la izquierda, mapa a la derecha */
.zona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.zona .bloque-cab { margin-bottom: 30px; }
.mapa { height: clamp(420px, 62vh, 620px); border-radius: var(--r); overflow: hidden; background: #ddd6ca; z-index: 0; box-shadow: 0 20px 50px rgba(28,24,21,.08); }
.mapa .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7); }
.mapa .leaflet-tile-pane { filter: grayscale(1) sepia(.18) contrast(.9) brightness(1.04); }
.pin-elda { position: relative; }
.pin-elda i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(0,0,0,.3); }
.pin-elda::before { content: ""; position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: rgba(160,31,35,.3); animation: pulso 2.2s ease-out infinite; }
.pin-elda b { position: absolute; left: 18px; top: -16px; padding: 7px 12px; border-radius: var(--r); background: var(--oscuro); color: #fff; font: 500 .92rem/1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
@keyframes pulso { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.pin-pueblo i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oscuro); box-shadow: 0 0 0 2px #fff; }
.pueblos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 980px; }
.pueblos li { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--r); font-size: .9rem; font-weight: 500; background: #fff; box-shadow: inset 0 0 0 1px rgba(28,24,21,.1); }
.pueblos li.base { background: var(--rojo); color: #fff; box-shadow: none; }
.pueblos li.base::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 9px; }
.pueblos li.todas { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinta); font-weight: 600; }

/* preguntas */
.faq { max-width: 900px; border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid rgba(28,24,21,.16); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r); background: var(--rojo); color: #fff; font-size: 1.3rem; font-weight: 400; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; max-width: 64ch; color: var(--tinta-2); }

/* contacto con formulario: titular con 3 palabras que se encienden con su foto */
.cierre { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: start; padding: 15vh var(--m) 13vh; background: var(--oscuro); color: #fff; }
.cierre .eti { color: var(--rojo-2); }
.cierre h2 { max-width: 14ch; font-weight: 700; font-size: clamp(2.5rem, 5vw, 5.6rem); line-height: .98; }
.clave { color: rgba(255,255,255,.28); transition: color .5s; }
.clave.on { color: #fff; }
.clave em { color: inherit; }
.clave.on em { color: var(--rojo-2); }
.ideas { position: relative; margin-top: clamp(26px, 4vh, 40px); aspect-ratio: 16 / 10; max-width: 640px; border-radius: var(--r); overflow: hidden; background: #2a241f; }
.idea { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.idea.on { opacity: 1; }
.idea img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 3.4s ease-out; }
.idea.on img { transform: scale(1); }
.idea figcaption { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 6px; border-radius: var(--r); background: rgba(28,24,21,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 500 .86rem/1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; }
.idea figcaption b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: var(--rojo); color: #fff; font-size: .7rem; }
.ideas-barras { position: absolute; left: 16px; right: 16px; top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ideas-barras i { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.ideas-barras i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.ideas-barras i.hecha::after { transform: scaleX(1); }
.ideas-barras i.va::after { animation: barra 2.8s linear forwards; }
@keyframes barra { to { transform: scaleX(1); } }
.cierre-sub { max-width: 44ch; margin: 22px 0 0; color: rgba(255,255,255,.66); }
.confianza { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: rgba(255,255,255,.85); }
.confianza li { display: flex; align-items: center; gap: 8px; }
.confianza li::before { content: ""; width: 16px; height: 16px; border-radius: 3px; background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cierre-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.form { position: sticky; top: calc(var(--cab) + 24px); display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r); background: #262019; border-top: 4px solid var(--rojo); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.form-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 4px; }
.form-cab b { font: 600 1.45rem/1.1 var(--titulo); text-transform: uppercase; }
.form-cab span { font-size: .76rem; color: rgba(255,255,255,.5); }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.72); }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { font: inherit; font-size: .95rem; color: #fff; background: #1c1815; border: 0; border-radius: var(--r); padding: 13px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); resize: vertical; transition: box-shadow .2s; }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.3); }
.form input:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--rojo-2); }
.form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tipos legend { width: 100%; margin-bottom: 10px; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.72); }
.tipos label { flex-direction: row; }
.tipos input { position: absolute; opacity: 0; pointer-events: none; }
.tipos span { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px 0 12px; border-radius: var(--r); font-size: .86rem; color: #fff; background: #1c1815; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tipos span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.tipos input:checked + span { background: var(--rojo); color: #fff; box-shadow: none; }
.tipos input:checked + span svg { opacity: 1; }
.tipos input:focus-visible + span { box-shadow: inset 0 0 0 2px #fff; }
.tipos--peq span { height: 34px; padding: 0 13px; font-size: .82rem; }
.form .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.form .check a { text-decoration: underline; }
.enviar { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 0; border-radius: var(--r); cursor: pointer; font: 500 1.02rem/1 var(--titulo); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #25d366; transition: transform .2s, filter .2s; }
.enviar:hover { filter: brightness(1.06); transform: translateY(-1px); }
.enviar svg { width: 22px; height: 22px; }
.aviso { margin: -4px 0 0; text-align: center; font-size: .74rem; color: rgba(255,255,255,.45); }

/* antes y después (img-comparison-slider) */
.antes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ad--ancha { grid-column: 1 / -1; }
.ad { margin: 0; }
.ad-slider { display: block; width: 100%; border-radius: var(--r); overflow: hidden; --divider-width: 2px; --divider-color: #fff; --default-handle-color: #fff; --default-handle-width: 44px; outline: none; }
.ad-slider img { display: block; width: 100%; height: auto; }
.ad figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .86rem; font-weight: 500; }
.ad figcaption span { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }

/* pie */
.pie { padding: 64px var(--m) 30px; background: #141110; color: rgba(255,255,255,.62); font-size: .88rem; border-top: 4px solid var(--rojo); }
.pie-cols { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pie-logo { font: 700 1.9rem/1 var(--titulo); text-transform: uppercase; color: #fff; }
.pie-logo span { color: var(--rojo-2); }
.pie-marca p { max-width: 34ch; margin-top: 14px; }
.pie h3 { font-size: .9rem; letter-spacing: .1em; color: #fff; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pie a:hover { color: #fff; }
.pie-copy { margin: 24px 0 0; font-size: .76rem; }

/* WhatsApp flotante (aparece tras la portada) */
.wa-flota { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .35s, transform .35s; pointer-events: none; }
.wa-flota.ver { opacity: 1; transform: none; pointer-events: auto; }
.wa-flota svg { width: 30px; height: 30px; }

@media (max-width: 1100px) {
  .cab-nav { display: none; }
}
@media (max-width: 760px) {
  :root { --cab: 60px; }
  .cab-marca img { width: 38px; }
  .cab-marca span { font-size: 1rem; }
  .cab-tel span { display: none; }
  .cab-tel { width: 40px; height: 40px; justify-content: center; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(28,24,21,.18); }
  .cab-acc { gap: 8px; }
  .cab .btn { height: 40px; padding: 0 14px; font-size: .82rem; }
  .cab .btn::after { display: none; }
  .hero-txt { bottom: 30px; }
  .hero h1 { font-size: 2.55rem; }
  .hero .eti { font-size: .66rem; letter-spacing: .12em; }
  .hero-sub { font-size: .95rem; margin-top: 14px; }
  .hero-acc { margin-top: 20px; }
  .hero-acc .btn { height: 46px; padding: 0 18px; }
  .indicador { right: 14px; top: 26%; }
  .indicador-pista { transform: scale(.9); transform-origin: top center; margin-bottom: -8px; }
  .hero-final { bottom: 96px; padding: 0 var(--m); font-size: 2.3rem; text-wrap: balance; }
  .sobre-pin { grid-template-columns: 1fr; align-content: start; gap: 6px; padding-top: calc(var(--cab) + 4px); }
  .sobre-vid { width: 100%; max-width: 36svh; justify-self: center; }
  .sobre h2 { font-size: 1.5rem; }
  .sobre .parrafo { margin-top: 10px; font-size: .86rem; }
  .fases { margin: 16px 0 18px; gap: 6px; }
  .fases li { font-size: .72rem; padding-top: 10px; }
  .fases li b { font-size: .66rem; }
  .sobre .btn { height: 42px; }
  .cred-tarjeta { grid-template-columns: 1fr 1fr; }
  .cred { padding: 22px 18px; gap: 6px; }
  .cred + .cred::before { display: none; }
  .cred:nth-child(2n) { box-shadow: inset 1px 0 0 rgba(28,24,21,.08); }
  .cred:nth-child(n+3) { border-top: 1px solid rgba(28,24,21,.08); }
  .cred-ico { width: 38px; height: 38px; margin-bottom: 2px; }
  .cred-num b { font-size: 2.2rem; }
  .cred-txt { font-size: .8rem; }
  .bloque { padding: 76px var(--m); }
  .bloque h2 { font-size: 2rem; }
  .serv-grid { grid-template-columns: 1fr; }
  .serv-foto { display: none; }
  .serv { grid-template-columns: 52px minmax(0, 1fr) 84px; gap: 14px; padding: 18px 0; }
  .serv-n { font-size: 2rem; color: var(--rojo); -webkit-text-stroke-color: var(--rojo); }
  .serv h3 { font-size: 1.12rem; }
  .serv p { font-size: .84rem; }
  .serv-mini { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--r); }
  .serv::before { display: none; }
  .razones { grid-template-columns: 1fr; }
  .razones li { padding: 24px 20px; }
  .razon-n { font-size: 2rem; margin-bottom: 10px; }
  /* los 4 pasos en carrusel deslizable (en 2 columnas la tarjeta del presupuesto no se leía) */
  .pasos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--m);
    margin: 0 calc(-1 * var(--m)); padding: 0 var(--m) 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pasos::-webkit-scrollbar { display: none; }
  .pasos::after { content: ""; flex: 0 0 1px; }
  .paso { flex: 0 0 78vw; scroll-snap-align: start; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; gap: 8px; }
  .mos--grande { grid-column: span 2; grid-row: span 2; }
  .mos-txt { left: 12px; right: 12px; bottom: 10px; font-size: .74rem; }
  .mos-txt b { font-size: .95rem; }
  .mos--grande .mos-txt b { font-size: 1.3rem; }
  .antes-grid { grid-template-columns: 1fr; }
  .obras-mas .btn { width: 100%; justify-content: center; }
  .video-marco { aspect-ratio: 9 / 16; max-height: 82svh; margin: 0 auto; }
  .zona { grid-template-columns: 1fr; }
  .mapa { height: 380px; }
  .cierre { grid-template-columns: 1fr; gap: 36px; padding: 80px var(--m); }
  .cierre h2 { font-size: 2.6rem; }
  .form { position: static; }
  .form .fila { grid-template-columns: 1fr; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

/* página «Todos los trabajos» */
.pag-trabajos { background: var(--crema); }
.pag-trabajos .cab-nav a.on::after { transform: scaleX(1); }
.trab-intro { padding: calc(var(--cab) + clamp(50px, 9vh, 100px)) var(--m) clamp(26px, 4vh, 40px); }
.trab-intro h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: .98; }
.trab-intro .parrafo { margin-top: 16px; }
.filtros { position: sticky; top: var(--cab); z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; margin: 28px calc(-1 * var(--m)) 0; padding: 14px var(--m); background: rgba(243,238,229,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.filtro { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px rgba(28,24,21,.12); font: 500 .86rem/1 var(--texto); color: var(--tinta); cursor: pointer; transition: background .2s, color .2s; }
.filtro span { font: 600 .74rem/1 var(--titulo); color: var(--tinta-2); }
.filtro:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.filtro.on { background: var(--rojo); color: #fff; box-shadow: none; }
.filtro.on span { color: rgba(255,255,255,.8); }
.trab-lista { padding: 10px var(--m) clamp(60px, 10vh, 110px); scroll-margin-top: calc(var(--cab) + 70px); }
.trab-cat { padding-top: clamp(40px, 7vh, 70px); scroll-margin-top: calc(var(--cab) + 70px); }
.trab-cat-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 2px solid var(--tinta); }
.trab-cat-cab h2 { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; }
.trab-cat-cab h2 span { margin-left: 10px; font: 500 .9rem/1 var(--texto); text-transform: none; color: var(--rojo); }
.trab-cat-cab p { margin: 0; max-width: 60ch; color: var(--tinta-2); font-size: .94rem; }
/* fotos en columnas (cada una con su forma, sin recortar) */
.galeria { columns: 4 260px; column-gap: 12px; }
.tf { display: block; margin: 0 0 12px; break-inside: avoid; border-radius: var(--r); overflow: hidden; background: var(--piedra); cursor: zoom-in; }
.tf img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tf:hover img { transform: scale(1.04); }
.trab-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: clamp(60px, 10vh, 110px) var(--m); background: var(--oscuro); color: #fff; }
.trab-cta h2 { font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1; max-width: 16ch; }
.trab-cta .eti { color: var(--rojo-2); }
.trab-cta-acc { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
  .galeria { columns: 2; column-gap: 8px; }
  .tf { margin-bottom: 8px; }
}