/* MARAYC · web3 (estilo Nomad: vídeo a pantalla completa que avanza con el scroll) */
@font-face { font-family: "Inter"; font-weight: 400 600; font-display: swap; src: url(../fuentes/inter.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fuentes/instrument-italic.woff2) format("woff2"); }

:root {
  --tinta: #141414; --tinta-2: #5d5d5d; --gris: #e9e9e8; --navy: #1f2a38; --naranja: #f5942a;
  --texto: "Inter", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --m: clamp(16px, 2.6vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--gris); color: var(--tinta); font: 400 1rem/1.5 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, p, dl, dd { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

.pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font-size: .84rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(20,20,20,.22); transition: background-color .25s, box-shadow .25s; }
.pill:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.pill--blanca { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pill--linea-clara { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* cabecera */
.cab { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--m); }
.cab-nav { display: flex; gap: 6px; }
.cab-nav a { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(20,20,20,.12); }
.cab-nav a.on { background: var(--tinta); color: #fff; box-shadow: none; }

/* portada */
/* alturas con svh: en el móvil es la pantalla visible con la barra del navegador puesta (con vh se cortaba abajo) */
.hero { position: relative; height: 100vh; height: 100svh; }
.hero-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #c9c3bb; }
.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; }
/* logo real, pequeño, en el cielo a la derecha (no tapa la casa) */
.marca { position: absolute; right: clamp(40px, 16vw, 300px); top: clamp(96px, 14vh, 170px); z-index: 2; margin: 0; width: clamp(150px, 15vw, 250px); will-change: transform, opacity; }
.marca img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 14px rgba(255,255,255,.55)); }
/* indicador de scroll: mano que «empuja» hacia abajo + 3 flechas que caen en cascada + «Desliza». Sin fondo: solo
   blanco con una sombra suave para leerse sobre la foto sin estropearla. */
.indicador { position: absolute; right: var(--m); top: 54%; 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; } }
/* la mano baja deslizando (2 s) y, debajo de su recorrido, las flechas continúan el movimiento en cascada */
.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; }      /* apoya el dedo */
  55% { transform: translateY(34px) scale(1); opacity: 1; }   /* desliza hacia abajo */
  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; } }   /* siguen a la mano cuando llega abajo */
.indicador-txt { margin-top: 6px; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

.hero-pie { position: absolute; left: var(--m); right: var(--m); bottom: 22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; font-size: .78rem; font-weight: 500; color: #fff; background: rgba(20,20,20,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.chips span.on { background: #fff; color: var(--tinta); }
.lugar { font-size: .8rem; font-weight: 500; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* sobre nosotros */
.sobre { position: relative; height: 100vh; height: 100svh; background: var(--gris); }
.sobre-pin { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 4vw; padding: 0 var(--m); overflow: hidden; }
.sobre-eti { position: absolute; right: var(--m); top: 22px; font-size: .78rem; font-weight: 600; }
.sobre-txt { max-width: 720px; }
.sobre h2 { font-weight: 500; font-size: clamp(1.7rem, 2.45vw, 3rem); line-height: 1.12; letter-spacing: -.02em; }
.sobre h2 em { font-size: 1.08em; }
.punto { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); }
.parrafo { max-width: 44ch; margin-bottom: 22px; font-size: .9rem; color: var(--tinta-2); }
.sobre hr { margin: 34px 0 26px; border: 0; height: 1px; background: rgba(20,20,20,.14); }
.cifras { display: flex; gap: clamp(22px, 3vw, 48px); }
.cifras dt { font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.cifras dd { margin-top: 8px; font-size: .74rem; color: var(--tinta-2); }
.sobre-vid { position: relative; aspect-ratio: 1; width: min(100%, 92vh); justify-self: end;
  /* el vídeo tiene un leve viñeteado: se funde con el fondo difuminando los bordes */
  -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.22); } /* la casa ocupa ~70 % del fotograma: se agranda para llenar la altura */

/* credenciales: tarjeta blanca con 4 datos reales, icono, número que cuenta y explicación */
.credenciales { padding: clamp(30px, 6vh, 70px) var(--m) clamp(60px, 10vh, 110px); background: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cred-tarjeta { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(20,20,20,.06); }
.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: 24%; bottom: 24%; width: 1px; background: rgba(20,20,20,.1); }
.cred-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(245,148,42,.12); margin-bottom: 8px; }
.cred-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--naranja); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cred-num { margin: 0; display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.cred-num b { font-size: clamp(2.4rem, 3.4vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cred-num small { font-size: .95rem; font-weight: 500; color: var(--tinta-2); }
.cred-estrellas { font-size: .95rem; letter-spacing: 2px; background: linear-gradient(90deg, var(--naranja) var(--nota), #d8d6d1 var(--nota)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cred-txt { margin: 2px 0 0; font-size: .86rem; color: var(--tinta-2); max-width: 22ch; }
.cred-link { font-size: .84rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20,20,20,.18); transition: background .2s; }
.cred-link:hover { background: #fff; }

/* obras entregadas: la pista de fotos avanza en horizontal mientras la sección está fijada */
.obras { position: relative; background: var(--gris); }
.obras-pin { position: relative; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 36px); padding: 0 0 0 var(--m); }
.obras-cab { max-width: 620px; }
.obras .sobre-eti { right: var(--m); top: 22px; }
.obras h2 { font-weight: 500; font-size: clamp(1.9rem, 3vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em; }
.obras h2 em { font-size: 1.08em; }
.obras .parrafo { margin: 14px 0 0; }
.obras-pista { display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; will-change: transform; }
.obra { margin: 0; width: clamp(240px, 24vw, 380px); }
.obra-img { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #d9d8d5; }
.obra-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); will-change: transform; }
.obra figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: .84rem; color: var(--tinta-2); }
.obra figcaption span { align-self: flex-start; height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(20,20,20,.2); }
.obras-pie { display: flex; align-items: center; gap: 16px; padding-right: var(--m); font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.obras-barra { position: relative; flex: 0 0 160px; height: 2px; background: rgba(20,20,20,.14); overflow: hidden; }
.obras-barra i { position: absolute; inset: 0; background: var(--tinta); transform-origin: left; transform: scaleX(0); }

/* bloques comunes (servicios, por qué, proceso, opiniones, zona, preguntas) */
h3 { margin: 0; }
.bloque { position: relative; padding: clamp(80px, 13vh, 150px) var(--m); background: var(--gris); }
.bloque-cab { max-width: 760px; margin-bottom: clamp(32px, 5vh, 60px); }
.bloque-cab--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.eti { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.eti::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--naranja); }
.bloque h2 { font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 3.6rem); line-height: 1.05; letter-spacing: -.025em; }
.bloque h2 em { font-size: 1.08em; }
.bloque .parrafo { margin: 16px 0 0; }

/* servicios: 3×2 con foto, número y texto */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 24px); }
.serv-img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #d9d8d5; margin-bottom: 16px; }
.serv-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.serv:hover .serv-img img { transform: scale(1.06); }
.serv-n, .razon-n, .paso-n { display: block; font-size: .72rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.serv h3, .razones h3, .paso h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.serv p, .paso p { margin: 6px 0 0; font-size: .9rem; color: var(--tinta-2); max-width: 38ch; }

/* por qué elegirnos: bloque oscuro con 4 razones y una frase real de cliente en cada una */
.bloque--oscuro { background: #111; color: #fff; }
.bloque--oscuro .eti::before { background: var(--naranja); }
.razones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.razones li { padding: 28px clamp(14px, 1.6vw, 26px) 10px 0; border-right: 1px solid rgba(255,255,255,.1); margin-right: clamp(14px, 1.6vw, 26px); }
.razones li:last-child { border-right: 0; margin-right: 0; }
.razones .razon-n { color: var(--naranja); }
.razones p { margin: 10px 0 18px; font-size: .9rem; color: rgba(255,255,255,.62); }
.razones blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.3; color: rgba(255,255,255,.9); }

/* cómo trabajamos: 4 pasos con foto y línea que avanza; tira de «ahora mismo en obra» */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); counter-reset: paso; }
.paso-img { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #d9d8d5; margin-bottom: 16px; }
.paso-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* presupuesto de ejemplo: todo en «em» y el tamaño de letra sale del ancho del hueco (cqw), así se ve igual en
   cualquier pantalla. 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; }
/* el presupuesto ocupa todo el recuadro: las partidas se reparten el alto y el total queda abajo */
.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(--naranja); }
.doc-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8em; border-bottom: .12em solid var(--naranja); }
.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); }   /* p: si no, le pisa el estilo de .paso p */
.doc-fila { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: .8em; padding: .42em 0; border-bottom: .06em dashed rgba(20,20,20,.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(20,20,20,.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: .4em; background: var(--gris); 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(--naranja); border-radius: .4em; color: var(--naranja); font-size: .95em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-14deg); opacity: .9; mix-blend-mode: multiply; }
/* animación al aparecer (la añade el JS con .ver) */
.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; }
.paso-n { font-size: .8rem; }
.en-obra { margin-top: clamp(50px, 8vh, 90px); }
.en-obra-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.en-obra figure { margin: 0; }
.en-obra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.en-obra figcaption { margin-top: 10px; font-size: .82rem; color: var(--tinta-2); }

/* opiniones: nota de Google y carrusel de reseñas */
.nota { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; padding: 14px 20px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.nota b { grid-row: span 2; font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.estrellas { color: var(--naranja); letter-spacing: 2px; }
.nota small { font-size: .74rem; color: var(--tinta-2); }
/* carrusel de reseñas: deslizable (scroll-snap) y con avance automático de una en una */
.resenas { margin: 0 calc(-1 * var(--m)); }
.resenas-pista { display: flex; gap: 18px; overflow-x: auto; padding: 6px var(--m) 10px;   /* sin «snap»: se desliza sola poco a poco */
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; outline: none; }
.resenas-pista::-webkit-scrollbar { display: none; }
.resena { flex: 0 0 min(440px, 84vw); margin: 0; padding: 30px 30px 24px; border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px rgba(20,20,20,.05); display: flex; flex-direction: column; gap: 16px; position: relative; transition: transform .5s, box-shadow .5s; }
.resena::before { content: "“"; position: absolute; right: 22px; top: 2px; font-family: var(--serif); font-size: 6rem; line-height: 1; color: rgba(245,148,42,.18); }
.resena-estrellas { color: var(--naranja); letter-spacing: 3px; font-size: 1rem; }
.resena p { margin: 0; flex: 1; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.32; }
.resena footer { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 500; color: var(--tinta-2); }
.resena-g { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gris); font-weight: 700; font-size: .78rem; color: var(--tinta); }
.resenas-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--m) 0; }
.resenas-puntos { display: flex; gap: 8px; }
.resenas-puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(20,20,20,.2); cursor: pointer; transition: width .35s, background .35s; }
.resenas-puntos button[aria-selected="true"] { width: 28px; background: var(--tinta); }
.resenas-flechas { display: flex; gap: 8px; }
.resenas-btn { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.resenas-btn:hover { background: var(--tinta); }
.resenas-btn:hover svg { stroke: #fff; }
.resenas-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 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: 18px; overflow: hidden; background: #dcdcd8; box-shadow: 0 1px 2px rgba(0,0,0,.06); z-index: 0; }
.mapa .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7); }
.mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.06); }
.pin-elda { position: relative; }
.pin-elda i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--naranja); 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(245,148,42,.35); animation: pulso 2.2s ease-out infinite; }
.pin-elda b { position: absolute; left: 18px; top: -16px; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 .9rem/1 var(--texto); 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(--navy); box-shadow: 0 0 0 2px #fff; }
.pin-pueblo.izq b { left: auto; right: 9px; }
.pin-pueblo b { position: absolute; left: 9px; top: -8px; font: 500 .72rem/1 var(--texto); color: var(--tinta); white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }

/* zona (pueblos) */
.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 18px; border-radius: 999px; font-size: .9rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(20,20,20,.18); }
.pueblos li.base { background: var(--navy); color: #fff; box-shadow: none; }
.pueblos li.base::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); margin-right: 9px; }
.pueblos li.todas { background: #fff; box-shadow: none; }

/* preguntas */
.faq { max-width: 860px; border-top: 1px solid rgba(20,20,20,.14); }
.faq details { border-bottom: 1px solid rgba(20,20,20,.14); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20,20,20,.2); font-size: 1.2rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 64ch; color: var(--tinta-2); }

/* cierre con formulario: titular con 3 palabras que se encienden con su foto (solar → boceto → casa) */
.cierre { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: start; padding: 15vh var(--m) 13vh; background: #111; color: #fff; }
.cierre .eti { color: rgba(255,255,255,.8); }
.cierre h2 { max-width: 15ch; font-weight: 500; font-size: clamp(2.3rem, 4.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.035em; }
.clave { color: rgba(255,255,255,.32); transition: color .5s; }
.clave.on { color: #fff; }
.clave.on em { color: var(--naranja); }
.ideas { position: relative; margin-top: clamp(26px, 4vh, 40px); aspect-ratio: 16 / 10; max-width: 640px; border-radius: 16px; overflow: hidden; background: #1c1c1c; }
.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: 32px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(17,17,17,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8rem; font-weight: 600; }
.idea figcaption b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--naranja); color: #111; font-size: .62rem; }
.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,.62); }
.confianza { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: rgba(255,255,255,.82); }
.confianza li { display: flex; align-items: center; gap: 8px; }
.confianza li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(245,148,42,.18) 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='%23f5942a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.confianza li:last-child::before { display: none; }
.cierre-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.form { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.4vw, 34px); border-radius: 20px; background: #1b1b1b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 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-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.form-cab span { font-size: .76rem; color: rgba(255,255,255,.5); }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.7); }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { font: inherit; font-size: .95rem; color: #fff; background: #111; border: 0; border-radius: 12px; 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(--naranja); }
.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: .78rem; font-weight: 500; color: rgba(255,255,255,.7); }
.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: 12px; font-size: .84rem; color: #fff; background: #111; 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: #fff; color: var(--tinta); box-shadow: none; }
.tipos input:checked + span svg { stroke: var(--naranja); opacity: 1; }
.tipos input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--naranja); }
.tipos--peq span { height: 34px; padding: 0 13px; border-radius: 999px; font-size: .8rem; }
.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: 52px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 600; 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); }

/* fotos que se abren a pantalla completa (PhotoSwipe) */
a.obra-img, .en-obra a { display: block; cursor: zoom-in; }

/* antes y después (img-comparison-slider) */
.antes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ad { margin: 0; }
.ad-slider { display: block; width: 100%; border-radius: 16px; 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: 60px var(--m) 30px; background: #0b0b0b; color: rgba(255,255,255,.62); font-size: .86rem; }
.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-weight: 600; font-size: 1.9rem; letter-spacing: -.04em; color: #fff; }
.pie-logo span { color: var(--naranja); }
.pie-marca p { max-width: 34ch; margin-top: 12px; }
.pie h3 { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; 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: 760px) {
  .cab-nav a:not(.on) { display: none; }
  .indicador { right: 14px; top: 56%; }
  .indicador-pista { transform: scale(.9); transform-origin: top center; margin-bottom: -8px; }
  .marca { width: 34vw; top: 78px; right: 8vw; }
  .zona { grid-template-columns: 1fr; }
  .mapa { height: 380px; }
  .hero-pie { flex-direction: column; align-items: flex-start; }
  .sobre-pin { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 58px; }
  .cred-tarjeta { grid-template-columns: 1fr 1fr; border-radius: 18px; }
  .cred { padding: 22px 18px; gap: 6px; }
  .cred + .cred::before { display: none; }
  .cred:nth-child(2n) { box-shadow: inset 1px 0 0 rgba(20,20,20,.08); }
  .cred:nth-child(n+3) { border-top: 1px solid rgba(20,20,20,.08); }
  .cred-ico { width: 38px; height: 38px; margin-bottom: 4px; }
  .cred-num b { font-size: 2.3rem; }
  .cred-txt { font-size: .8rem; }
  .sobre h2 { font-size: 1.55rem; }
  .sobre-vid { order: -1; width: 100%; max-width: 42svh; justify-self: center; }
  .sobre hr { margin: 22px 0 18px; }
  .parrafo { margin-bottom: 16px; }
  .obras-pin { gap: 18px; padding-top: 40px; }
  .obras h2 { font-size: 1.7rem; }
  .obra { flex: 0 0 74vw; width: 74vw; scroll-snap-align: start; }   /* sin encogerse: cada foto grande y se desliza */
  /* móvil: carrusel que se desliza con el dedo (sin fijar la sección) */
  .obras-pin { height: auto; overflow: visible; padding: 90px 0 70px; }
  .obras-cab, .obras-pie { padding: 0 var(--m); }
  .obras .sobre-eti { top: 30px; }
  .obras-pista { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--m);
    padding: 0 var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .obras-pista::-webkit-scrollbar { display: none; }
  .obras-pista::after { content: ""; flex: 0 0 1px; }   /* margen al final del carrusel */
  .obra-img img { transform: none !important; }
  .obras-pie::after { content: "Desliza →"; margin-left: auto; font-weight: 500; color: var(--tinta-2); animation: desliza 1.6s ease-in-out infinite; }
  @keyframes desliza { 50% { transform: translateX(6px); } }
  .bloque { padding: 72px var(--m); }
  .bloque h2 { font-size: 1.75rem; }
  .servicios { grid-template-columns: 1fr; gap: 26px; }
  .razones { grid-template-columns: 1fr; }
  .razones li { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-right: 0; }
  /* móvil: 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; }
  .paso-img { aspect-ratio: 4 / 5; }
  .serv-img { aspect-ratio: 16 / 10; }
  .en-obra-fotos { grid-template-columns: 1fr; }
  .cierre { grid-template-columns: 1fr; gap: 36px; padding: 80px var(--m); }
  .cierre h2 { font-size: 2.4rem; }
  .form { position: static; }
  .form .fila { grid-template-columns: 1fr; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}