/* ==========================================================================
   Daniel Reformas — hoja de estilos principal
   Paleta derivada del logotipo: grafito, oro, crema + verde oliva de contraste
   ========================================================================== */

/* ---------- Tipografías autoalojadas ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --tinta:      #1b1b18;
  --tinta-2:    #2e2e29;
  --tinta-3:    #43433b;
  --oro:        #c49a64;   /* solo sobre fondo oscuro o como elemento gráfico */
  --oro-osc:    #8d5c2c;   /* oro legible sobre crema: 5,1:1 */
  --oro-num:    #ab7433;   /* cifras grandes sobre crema: 3,6:1 */
  --oro-claro:  #ecd1a8;
  --crema:      #f7f3ec;
  --crema-2:    #efe8db;
  --linea:      #e2d9c9;
  --linea-osc:  #3c3c34;
  --texto:      #26261f;
  --texto-2:    #55554a;
  --oliva:      #6c7a5c;
  --blanco:     #fff;

  /* Títulos en Plus Jakarta Sans, texto en Manrope. */
  --fuente-t: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --fuente-c: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec: clamp(52px, 6vw, 88px);
  --r: 2px;
}

/* ---------- Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fuente-c);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

/* Plus Jakarta Sans es algo más ancha que Manrope, y los títulos de sección
   piden la letra junta: el tracking va más cerrado cuanto mayor es el cuerpo,
   que es como se compone un titular. */
h1, h2, h3, h4 {
  font-family: var(--fuente-t);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--tinta);
  margin: 0 0 .6em;
}
/* Acerca la coma y los dos puntos a la letra anterior: el ancho de esos signos
   en Plus Jakarta Sans deja un hueco que parece un espacio de más. Lo pone el
   generador (juntarPuntuacion en build.js). */
h1 .sg, h2 .sg, h3 .sg { margin-left: -0.075em; }

/* Solo en los titulares grandes: equilibrar cada línea cuesta cálculo de layout */
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); letter-spacing: -0.042em; }
h2 { font-size: clamp(1.72rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); letter-spacing: -0.022em; line-height: 1.2; }
h4 { font-size: 1.03rem; letter-spacing: -0.014em; line-height: 1.3; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--oro-osc); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--oro-osc);
  outline-offset: 3px;
  border-radius: 1px;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 2rem 0; }

::selection { background: var(--oro-claro); color: var(--tinta); }

/* ---------- Utilidades ---------- */
.wrap { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--ancho { max-width: 1320px; }
.sec { padding-block: var(--sec); }
.sec--oscuro { background: var(--tinta); color: #ddd8cd; }
.sec--oscuro h2, .sec--oscuro h3 { color: var(--crema); }
.sec--crema2 { background: var(--crema-2); }
/* Dos secciones seguidas del mismo color se leen como una sola: sin el doble
   relleno en el encuentro no queda ese hueco enorme en mitad de la página. */
.sec--crema2 + .sec--crema2,
.sec--oscuro + .sec--oscuro { padding-top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--oro-claro);
  padding: 14px 20px; text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fuente-c); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-osc); margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--oro); flex: none; }
.sec--oscuro .eyebrow { color: var(--oro); }
.sec--oscuro .eyebrow::before { background: var(--oro); }

.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--texto-2); max-width: 62ch; }
.sec--oscuro .lede { color: #cdc7ba; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 26px;
  font-family: var(--fuente-c); font-size: .94rem; font-weight: 700;
  letter-spacing: .01em; text-decoration: none; border: 2px solid transparent;
  border-radius: var(--r); cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn--oro { background: var(--oro); color: var(--tinta); border-color: var(--oro); }
.btn--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--tinta); }
.btn--tinta { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.btn--tinta:hover { background: var(--tinta-2); color: var(--oro-claro); border-color: var(--tinta-2); }
.btn--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: var(--crema); }
/* Contextos de fondo oscuro: el botón de línea tiene que invertirse */
.sec--oscuro .btn--linea,
.cta-banda .btn--linea,
.cookies .btn--linea,
.menu-movil .btn--linea { color: var(--crema); border-color: #6a6a5e; }
.sec--oscuro .btn--linea:hover,
.cta-banda .btn--linea:hover,
.cookies .btn--linea:hover,
.menu-movil .btn--linea:hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
/* Verde de marca de WhatsApp con texto oscuro: en blanco no llega a 4.5:1 */
.btn--wa { background: #25d366; border-color: #25d366; color: var(--tinta); }
.btn--wa:hover { background: #1fbb5a; border-color: #1fbb5a; color: var(--tinta); }
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

.btn-fila { display: flex; flex-wrap: wrap; gap: 12px; }
/* En móvil los botones a media pantalla quedan de anchos distintos y desordenados */
@media (max-width: 559px) {
  .hero .btn-fila .btn,
  .cta-banda .btn-fila .btn,
  .form .btn-fila .btn,
  .duo .btn-fila .btn,
  .err .btn-fila .btn { flex: 1 1 100%; }
}

/* ---------- Cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: 90;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .2s;
}
.cab.is-fijo { box-shadow: 0 1px 16px rgba(27, 27, 24, .09); }
.cab__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 8px;
}
.cab__logo { display: block; flex: none; line-height: 0; margin-right: auto; }
.cab__logo img { height: 62px; width: auto; }
@media (min-width: 640px)  { .cab__logo img { height: 76px; } }
@media (min-width: 1000px) { .cab__logo img { height: 92px; } }

/* Llamar tiene que estar a un toque en móvil, sin abrir el menú */
.cab__llamar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--tinta); color: var(--oro-claro); text-decoration: none;
}
.cab__llamar svg { width: 20px; height: 20px; fill: currentColor; }
.cab__llamar:hover { background: var(--tinta-2); color: var(--oro-claro); }
@media (min-width: 1000px) { .cab__llamar { display: none; } }

.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__lista li { margin: 0; }
.nav__lista a {
  font-size: .82rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; padding: 8px 0; display: block;
  border-bottom: 2px solid transparent;
}
.nav__lista a:hover, .nav__lista a[aria-current="page"] { border-bottom-color: var(--oro); color: var(--oro-osc); }

.cab__cta { display: none; align-items: center; gap: 20px; margin-left: 30px; }
.cab__tel {
  font-family: var(--fuente-t); font-weight: 800; font-size: 1.02rem;
  color: var(--tinta); text-decoration: none; letter-spacing: -.01em; white-space: nowrap;
}
.cab__tel span { display: block; font-family: var(--fuente-c); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--oro-osc); }
.cab__tel:hover { color: var(--oro-osc); }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: none; border: 1px solid var(--linea); border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--tinta); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil {
  display: none; background: var(--tinta); color: var(--crema);
  padding: 8px var(--gutter) 30px;
}
.menu-movil.is-abierto { display: block; }
.menu-movil ul { list-style: none; margin: 0 0 22px; padding: 0; }
.menu-movil li { margin: 0; border-bottom: 1px solid var(--linea-osc); }
.menu-movil a {
  display: block; padding: 15px 2px; color: var(--crema); text-decoration: none;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
}
.menu-movil a:hover { color: var(--oro); }
.menu-movil .btn-fila { flex-direction: column; }
.menu-movil .btn { width: 100%; }

@media (min-width: 1000px) {
  .nav, .cab__cta { display: flex; }
  .burger { display: none; }
  .menu-movil { display: none !important; }
}

/* ---------- Hero ----------
   El vídeo ocupa la sección entera y el texto va encima, sobre un velo oscuro
   que garantiza el contraste sin tapar la imagen. */
.hero {
  position: relative; overflow: hidden; background: var(--tinta);
  min-height: clamp(500px, 86vh, 620px);
  display: flex; align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; z-index: 0; line-height: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo calibrado contra el píxel más claro de los dos clips (el agua de la
   piscina): al 78 % el texto crema queda por encima de 8:1 y el vídeo sigue
   viéndose. Se abre en la parte donde no hay texto. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(16, 16, 14, .86) 0%, rgba(16, 16, 14, .78) 62%,
    rgba(16, 16, 14, .42) 86%, rgba(16, 16, 14, .24) 100%);
}
.hero__contenido {
  position: relative; z-index: 2;
  padding-block: clamp(38px, 7vw, 76px);
}
.hero__texto {
  border-left: 4px solid var(--oro);
  padding-left: clamp(18px, 2.4vw, 32px);
  max-width: 38rem;
}
.hero__texto p { max-width: 44ch; }
.hero__texto h1 { color: var(--crema); margin-bottom: .5em; }
.hero__texto .eyebrow { color: var(--oro-claro); }
.hero__texto .eyebrow::before { background: var(--oro-claro); }
.hero__texto p { color: #d8d3c7; max-width: 52ch; }
.hero .btn-fila { margin-top: 26px; }

/* En pantalla de móvil el hero se queda con lo imprescindible: el titular, una
   frase y los dos botones. La lista de ocho gremios ocupaba cinco líneas justo
   encima de "Pedir presupuesto" y empujaba los botones fuera de la vista.
   El texto sigue en el HTML —solo se oculta—, así que no se pierde para SEO. */
@media (max-width: 640px) {
  .solo-ancho { display: none; }
  .hero { min-height: clamp(430px, 72vh, 540px); }
  .hero__texto h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); margin-bottom: .42em; }
  .hero__texto p { font-size: .97rem; line-height: 1.55; }
  .hero__contenido { padding-block: 30px 34px; }
  .hero .btn-fila { margin-top: 20px; gap: 10px; }
}

@media (min-width: 900px) {
  .hero { min-height: clamp(560px, 84vh, 760px); align-items: center; }
  .hero::after {
    background: linear-gradient(100deg,
      rgba(16, 16, 14, .82) 0%, rgba(16, 16, 14, .74) 48%,
      rgba(16, 16, 14, .36) 76%, rgba(16, 16, 14, .18) 100%);
  }
}

/* ---------- Vídeo del hero: dos clips que se alternan en bucle ---------- */
/* Imagen fija de fondo: es lo que se ve al entrar y lo que mide el LCP.
   Los clips se funden por encima cuando arrancan. */
.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__clip {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: cover; opacity: 0; transition: opacity .9s ease;
}
.hero__clip.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__clip { transition: none; } }

/* Control de pausa: obligatorio en contenido en movimiento que no para solo.
   Arriba en móvil, donde no choca con los botones de llamada a la acción. */
.hero__pausa {
  position: absolute; right: 16px; top: 16px; bottom: auto; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(27, 27, 24, .62); border: 1px solid rgba(247, 243, 236, .4);
  color: var(--crema); display: none; align-items: center; justify-content: center;
  padding: 0;
}
.hero__pausa.is-disponible { display: flex; }
.hero__pausa:hover { background: rgba(27, 27, 24, .85); }
.hero__pausa svg { width: 15px; height: 15px; fill: currentColor; }
.hero__pausa .icono-play { display: none; }
.hero__pausa[aria-pressed="true"] .icono-play { display: block; }
.hero__pausa[aria-pressed="true"] .icono-pausa { display: none; }
@media (min-width: 900px) { .hero__pausa { top: auto; bottom: 24px; right: 24px; } }

/* ---------- Sellos bajo el hero ---------- */
.sellos { background: var(--crema-2); border-block: 1px solid var(--linea); }
.sellos__inner {
  display: grid; gap: 22px 34px; padding-block: clamp(24px, 3vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .sellos__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .sellos__inner { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.sello { display: flex; align-items: center; gap: 16px; }
.sello img { width: 84px; height: auto; flex: none; }
@media (min-width: 980px) { .sello img { width: 96px; } }
/* El de los gremios lleva mucho más dentro —el anillo de ocho oficios y el
   rótulo con el texto—, así que a la misma caja se veía más pequeño que los
   otros dos y su letra no llegaba a leerse. Un punto más grande iguala el peso
   óptico de los tres y deja el "8 GREMIOS" legible. */
.sello--gremios img { width: 104px; }
@media (min-width: 980px) { .sello--gremios img { width: 120px; } }
.sello b {
  display: block; font-family: var(--fuente-t); font-weight: 800;
  font-size: 1.04rem; letter-spacing: -.015em; color: var(--tinta); line-height: 1.2;
}
.sello span { display: block; font-size: .88rem; color: var(--texto-2); line-height: 1.45; margin-top: 3px; }

/* ---------- Cintas de vídeo a lo ancho ---------- */
.cinta {
  position: relative; overflow: hidden; background: var(--tinta);
  min-height: clamp(300px, 46vw, 520px); display: flex; align-items: flex-end;
}
/* Caja de vídeo: la imagen marca el tamaño y el vídeo se funde encima al arrancar.
   SIN border-radius y SIN overflow:hidden, a propósito. Un <video> recortado con
   esquinas redondeadas no se puede promocionar a plano de superposición del
   hardware, y con ciertos drivers (Intel/AMD integradas, portátiles corrientes)
   la superficie del vídeo acaba sin pintarse: el clip decodifica, currentTime
   avanza, el DOM dice que todo va bien, y el visitante ve una imagen quieta.
   Los dos clips que fallaban eran exactamente los dos que llevaban este recorte
   —los de los bloques duo—; los de las cintas, que ya tenían border-radius: 0,
   se veían bien. El radio era de 2 px: no se pierde nada quitándolo. */
.vid { position: relative; line-height: 0; }
.vid__poster { width: 100%; height: auto; display: block; }
.vid__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease;
}
.vid.is-activo .vid__media { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vid__media { transition: none; } }

.vid--cinta { position: absolute; inset: 0; overflow: hidden; }
.vid--cinta .vid__poster,
.vid--cinta .vid__media { width: 100%; height: 100%; object-fit: cover; }

/* Los cuatro clips de contenido ya no llevan botón de play/pausa: van solos y
   en bucle. El del hero sigue estando (.hero__pausa). */
/* Velo en diagonal: oscurece el lado del texto y deja ver el vídeo en el otro.
   Sin él, el blanco sobre el agua de la piscina o sobre una pared clara no llega
   al contraste mínimo. */
.cinta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(18, 18, 16, .93) 0%, rgba(18, 18, 16, .74) 44%, rgba(18, 18, 16, .28) 100%);
}
@media (max-width: 699px) {
  .cinta::before { background: linear-gradient(to top, rgba(18, 18, 16, .94) 34%, rgba(18, 18, 16, .55) 100%); }
}
.cinta__txt {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(30px, 5vw, 54px);
}
.cinta__txt h2 { color: var(--crema); margin-bottom: .3em; max-width: 18ch; }
.cinta__txt p { color: #d3cec2; max-width: 54ch; margin: 0; }
.cinta .eyebrow { color: var(--oro); }
.cinta .eyebrow::before { background: var(--oro); }

/* Vídeo dentro de un bloque duo, con el mismo marco desplazado que las fotos */
.duo__foto .vid { position: relative; z-index: 1; }

/* ---------- Cabecera de página interior ---------- */
.pagehead { background: var(--tinta); color: #cbc5b8; padding-block: clamp(36px, 6vw, 68px); }
.pagehead h1 { color: var(--crema); margin-bottom: .35em; max-width: 20ch; }
.pagehead p { color: #bdb7aa; max-width: 60ch; }
.pagehead--foto { position: relative; overflow: hidden; }
.pagehead--foto .pagehead__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .26; filter: grayscale(.25);
}
.pagehead--foto .wrap { position: relative; z-index: 1; }

.migas { font-size: .78rem; color: #9d9789; margin-bottom: 20px; letter-spacing: .02em; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.migas li { margin: 0; display: flex; gap: 8px; align-items: center; }
.migas li + li::before { content: "/"; color: var(--oro-osc); }
.migas a { color: #bdb7aa; text-decoration: none; }
.migas a:hover { color: var(--oro); text-decoration: underline; }
.migas [aria-current] { color: var(--oro); }

/* ---------- Índice de servicios (home) ---------- */
/* Fotografía grande arriba y el texto debajo: la obra se ve, que es de lo que
   se trata. Sin caja ni borde alrededor, para que no parezca una rejilla de
   tarjetas genérica. */
.indice { display: grid; gap: 30px 24px; grid-template-columns: 1fr; }
@media (min-width: 520px)  { .indice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .indice { grid-template-columns: repeat(3, 1fr); } }
/* En pantalla ancha la rejilla deja de ser ocho casillas del mismo tamaño.
   Los dos primeros oficios van a doble ancho y con la foto más panorámica: da
   una entrada a la sección y un punto donde descansar la vista, en vez de ocho
   tarjetas idénticas que se leen todas a la vez y ninguna de verdad. */
@media (min-width: 1080px) {
  .indice { grid-template-columns: repeat(12, 1fr); gap: 42px 26px; }
  .indice__fila { grid-column: span 4; }
  .indice__fila:nth-child(-n+2) { grid-column: span 6; }
  .indice__fila:nth-child(-n+2) .indice__foto img { aspect-ratio: 16 / 10; }
  .indice__fila:nth-child(-n+2) .indice__t { font-size: 1.36rem; }
  .indice__fila:nth-child(-n+2) .indice__d { font-size: .97rem; max-width: 46ch; }
}

.indice__fila { display: block; text-decoration: none; color: var(--texto); }
.indice__foto {
  display: block; position: relative; line-height: 0;
  overflow: hidden; border-radius: var(--r); background: var(--crema-2);
  margin-bottom: 14px;
}
.indice__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .4s ease;
}
.indice__fila:hover .indice__foto img { transform: scale(1.05); }
.indice__n {
  position: absolute; left: 0; top: 0; z-index: 1;
  font-family: var(--fuente-t); font-weight: 800; font-size: .82rem;
  letter-spacing: .06em; color: var(--oro-claro);
  background: var(--tinta); padding: 7px 11px;
}
/* El título llevaba un subrayado grueso y fijo en los ocho: mucha tinta y
   ningún movimiento. Ahora la regla arranca corta en oro y se extiende al pasar
   por encima, que es lo que convierte una lista plana en algo con vida. */
.indice__t {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--fuente-t); font-weight: 800; font-size: 1.14rem;
  color: var(--tinta); letter-spacing: -.025em; margin-bottom: 10px;
  border-bottom: 1px solid var(--linea); padding-bottom: 10px;
}
.indice__t::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 32px; background: var(--oro-osc);
  transition: width .32s cubic-bezier(.22, .61, .36, 1);
}
.indice__fila:hover .indice__t::after,
.indice__fila:focus-visible .indice__t::after { width: 100%; }
.indice__f { font-size: 1rem; color: var(--oro-osc); flex: none; transition: transform .2s; }
.indice__fila:hover .indice__f { transform: translateX(4px); }
.indice__d { font-size: .92rem; color: var(--texto-2); margin: 0; }

/* La foto gana algo de profundidad al pasar por encima: sin esto, ocho
   rectángulos planos seguidos se leen como una hoja de contactos. */
.indice__foto { transition: box-shadow .25s ease; }
.indice__fila:hover .indice__foto { box-shadow: 0 12px 26px rgba(27, 27, 24, .13); }
/* El número deja de ir pegado a la esquina: separado se lee como una etiqueta
   puesta encima de la foto, no como parte del recorte. */
.indice__n { left: 12px; top: 12px; padding: 6px 10px; font-size: .78rem; }
@media (prefers-reduced-motion: reduce) {
  .indice__t::after, .indice__f, .indice__foto, .indice__foto img { transition: none; }
}

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; gap: 24px; }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .rejilla--2, .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: border-color .18s, transform .18s;
}
.tarjeta:hover { border-color: var(--oro); }
.tarjeta h3 { margin-bottom: .45em; }
.tarjeta p { font-size: .95rem; color: var(--texto-2); }
.tarjeta__mas { margin-top: auto; padding-top: 16px; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-osc); text-decoration: none; }
.tarjeta__mas:hover { color: var(--tinta); }
.tarjeta--enlace { text-decoration: none; color: inherit; }

/* Proyectos destacados de la portada.
   Eran tres cajas blancas con la foto arriba y el texto debajo: el mismo objeto
   repetido tres veces, que es lo que hace que una fila parezca de plantilla.
   Ahora el titular va sobre la propia fotografía, con un degradado que asegura
   el contraste. La foto pasa a vertical, que es como se enseña una obra, y la
   fila deja de ser tres rectángulos idénticos apilando texto debajo. */
.destacado {
  padding: 0; overflow: hidden; position: relative;
  border: 0; background: var(--tinta);
  transition: transform .25s ease, box-shadow .25s ease;
}
.destacado img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s ease;
}
@media (min-width: 700px) { .destacado img { aspect-ratio: 4 / 5; } }
.destacado:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27, 27, 24, .2); }
.destacado:hover img { transform: scale(1.05); }
.destacado__txt {
  display: block; position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 60px 22px 20px;
  background: linear-gradient(to top,
    rgba(16, 16, 14, .93) 0%, rgba(16, 16, 14, .74) 46%,
    rgba(16, 16, 14, .28) 78%, rgba(16, 16, 14, 0) 100%);
}
.destacado__t {
  display: block; font-family: var(--fuente-t); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.03em; color: var(--crema); line-height: 1.22; margin-bottom: 7px;
}
.destacado .proyecto__meta { color: var(--oro-claro); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .destacado, .destacado img { transition: none; }
  .destacado:hover { transform: none; }
  .destacado:hover img { transform: none; }
}

/* Tarjeta de servicio con fotografía de una obra real */
.tarjeta--foto { padding: 0; overflow: hidden; }
.tarjeta--foto > img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .4s ease;
}
.tarjeta--foto:hover > img { transform: scale(1.04); }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }

/* ---------- Bloque bicolumna asimétrico ---------- */
.duo { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.08fr 0.92fr; }
  .duo--invertido > *:first-child { order: 2; }
}
/* Marco dorado desplazado detrás de la foto. Va con z-index 0 y la imagen con 1:
   con z-index negativo se colaba por debajo del fondo de la sección y no se veía.
   Ya no lleva isolation: isolate. Bastan position:relative y los z-index de los
   hijos para que el marco quede detrás, y aislar aquí metía el <video> del
   bloque en su propio contexto de composición, que es media avería de las dos
   que dejaban el clip sin pintarse (la otra era el recorte redondeado). */
.duo__foto { position: relative; }
.duo__foto img { width: 100%; border-radius: var(--r); position: relative; z-index: 1; }
/* Marco del mismo tamaño que la foto, desplazado en diagonal: así el trazo
   dorado recorre el lado entero y se lee como un marco, no como un resto suelto. */
.duo__foto::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--oro);
  border-radius: var(--r); z-index: 0; pointer-events: none;
}
@media (max-width: 899px) { .duo__foto::after { inset: 11px -11px -11px 11px; } }

/* ---------- Lista de comprobación ---------- */
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.check li {
  position: relative; padding-left: 30px; margin: 0; font-size: .97rem;
}
.check li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 13px; height: 8px; border-left: 2px solid var(--oro-osc); border-bottom: 2px solid var(--oro-osc);
  transform: rotate(-45deg);
}
/* Dos columnas: hay que salir de grid para que funcione el multicolumna */
.check--2col { display: block; max-width: 58rem; }
.check--2col li { margin-bottom: 11px; break-inside: avoid; }
@media (min-width: 780px) { .check--2col { columns: 2; column-gap: 52px; } }
.sec--oscuro .check li::before { border-color: var(--oro); }

/* ---------- Proceso: línea de tiempo ----------
   Antes eran cuatro cajas iguales dentro de un marco grueso: la rejilla
   simétrica de número + título + párrafo que trae cualquier plantilla. Ahora es
   una línea de tiempo de verdad, con un hilo que atraviesa los cuatro números,
   de manera que se lee que un paso lleva al siguiente en vez de ser cuatro
   cosas sueltas puestas en fila. */
.proceso { display: grid; gap: 28px; position: relative; }
.proceso__item { position: relative; padding-left: 62px; }
/* Hilo vertical que baja de un paso al siguiente (móvil y tableta) */
.proceso__item::before {
  content: ""; position: absolute; left: 21px; top: 52px; bottom: -28px;
  width: 2px; background: var(--linea);
}
.proceso__item:last-child::before { display: none; }
.proceso__n {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-t); font-weight: 800; font-size: 1rem; line-height: 1;
  color: var(--oro-claro); background: var(--tinta); margin: 0;
}
.proceso__item h3 { font-size: 1.08rem; margin-bottom: .38em; padding-top: 10px; }
.proceso__item p { font-size: .93rem; color: var(--texto-2); margin: 0; }

@media (min-width: 900px) {
  .proceso { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
  /* Un solo hilo continuo por detrás; los números lo tapan donde van ellos */
  .proceso::before {
    content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px;
    background: var(--linea);
  }
  .proceso__item { padding-left: 0; padding-top: 68px; }
  .proceso__item::before { display: none; }
  .proceso__item h3 { padding-top: 0; }
}

/* ---------- Galería de proyectos ---------- */
.proyecto { margin-bottom: clamp(44px, 6vw, 80px); }
.proyecto:last-child { margin-bottom: 0; }
.proyecto__cab {
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--tinta);
}
.proyecto__cab h2, .proyecto__cab h3 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.proyecto__meta {
  display: block; margin-bottom: 9px;
  font-size: .77rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--oro-osc);
}
.proyecto__desc { margin: 0 0 22px; max-width: 68ch; color: var(--texto-2); font-size: .97rem; }

/* Galería en columnas (tipo mampostería): las fotos conservan su proporción real
   —nada de recortes forzados a 4:5— y no quedan huecos al final de la fila
   cuando una obra tiene 5 o 7 fotos. */
.galeria { columns: 2; column-gap: 10px; }
@media (min-width: 720px) { .galeria { columns: 3; column-gap: 14px; } }
@media (min-width: 1050px) { .galeria { columns: 4; } }
.galeria__item {
  display: block; position: relative; line-height: 0; overflow: hidden;
  border-radius: var(--r); background: var(--crema-2); border: 0; padding: 0; cursor: zoom-in;
  width: 100%; break-inside: avoid; margin-bottom: 10px;
}
@media (min-width: 720px) { .galeria__item { margin-bottom: 14px; } }
.galeria__item img {
  width: 100%; height: auto;
  transition: transform .4s ease;
}
.galeria__item:hover img { transform: scale(1.045); }
.galeria__item::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(27,27,24,.12);
  border-radius: var(--r);
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(15, 15, 13, .93);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.lb.is-abierto { display: flex; }
.lb__img { max-width: min(1100px, 94vw); max-height: 84vh; width: auto; object-fit: contain; border-radius: var(--r); }
.lb__pie { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #cfc9bc; font-size: .86rem; padding-inline: 60px; }
.lb__btn {
  position: absolute; background: rgba(247, 243, 236, .1); border: 1px solid rgba(247,243,236,.28);
  color: var(--crema); width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lb__btn:hover { background: rgba(247, 243, 236, .22); }
.lb__cerrar { top: 16px; right: 16px; }
.lb__ant { left: 12px; top: 50%; transform: translateY(-50%); }
.lb__sig { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Zonas ---------- */
/* Las líneas van en los enlaces, no en las celdas de la rejilla: con 19
   municipios la última fila queda incompleta y los subrayados de las celdas
   vacías dejaban el bloque cortado a media anchura. */
.zonas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .zonas-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .zonas-lista { grid-template-columns: repeat(4, 1fr); } }
.zonas-lista li { margin: 0; }
.zonas-lista a {
  display: block; padding: 13px 4px; color: #d5d0c4; text-decoration: none;
  font-size: .95rem; font-weight: 500;
  border-bottom: 1px solid var(--linea-osc);
  transition: color .15s, border-color .15s;
}
.zonas-lista a:hover { color: var(--oro); border-bottom-color: var(--oro); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chips li { margin: 0; }
.chips a {
  display: inline-block; padding: 8px 15px; border: 1px solid var(--linea);
  background: var(--blanco); border-radius: 100px; font-size: .87rem;
  color: var(--texto); text-decoration: none; font-weight: 500;
}
.chips a:hover { border-color: var(--oro); background: var(--crema-2); }
.sec--oscuro .chips a { background: transparent; border-color: var(--linea-osc); color: #d5d0c4; }
.sec--oscuro .chips a:hover { border-color: var(--oro); color: var(--oro); }

/* ---------- Banda CTA ---------- */
/* El filete dorado la separa del pie, que es de un gris casi idéntico:
   sin él, las dos franjas oscuras se leían como un único bloque. */
.cta-banda { background: var(--tinta-2); color: var(--crema); border-top: 3px solid var(--oro); }
.cta-banda__inner { display: grid; gap: 26px; align-items: center; }
@media (min-width: 880px) {
  .cta-banda__inner { grid-template-columns: 1.25fr .75fr; gap: 48px; }
  /* En columna: en fila los tres botones quedan de anchos distintos y a saltos */
  .cta-banda .btn-fila { flex-direction: column; align-items: stretch; }
}
.cta-banda h2 { color: var(--crema); margin-bottom: .4em; }
.cta-banda p { color: #c6c0b3; margin: 0; }

/* ---------- FAQ ---------- */
/* En escritorio, encabezado a la izquierda y acordeón a la derecha: si no,
   las preguntas ocupan media pantalla y la otra media queda vacía. */
.faq-bloque { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .faq-bloque { grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
  .faq-bloque__cab { position: sticky; top: 130px; }
}
.faq-bloque h2 { margin-bottom: .35em; }
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--fuente-t); font-weight: 800; font-size: 1.03rem; color: var(--tinta);
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--fuente-c); font-weight: 400; font-size: 1.5rem; color: var(--oro-osc); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 40px 22px 0; color: var(--texto-2); font-size: .97rem; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo label { font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente-c); font-size: 1rem; color: var(--texto);
  padding: 13px 14px; border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--blanco); width: 100%; min-height: 50px;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--oro-osc); }
.campo small { font-size: .8rem; color: var(--texto-2); }
@media (min-width: 640px) { .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }

.rgpd { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--texto-2); }
.rgpd input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex: none; accent-color: var(--oro-osc); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.aviso { padding: 15px 18px; border-radius: var(--r); font-size: .93rem; margin-bottom: 22px; }
.aviso--error { background: #fbeae6; border: 1px solid #e4a294; color: #8a2c17; }
.aviso--ok { background: #eaf3ea; border: 1px solid #9dc19d; color: #26592a; }

/* ---------- Datos de contacto ---------- */
.datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.datos li { margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.datos li:last-child { border-bottom: 0; padding-bottom: 0; }
.datos strong { display: block; font-size: .77rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--oro-osc); margin-bottom: 5px; }
.datos a, .datos span { font-family: var(--fuente-t); font-weight: 800; font-size: 1.12rem; color: var(--tinta); text-decoration: none; letter-spacing: -.015em; }
.datos a:hover { color: var(--oro-osc); }
.sec--oscuro .datos li { border-color: var(--linea-osc); }
.sec--oscuro .datos a, .sec--oscuro .datos span { color: var(--crema); }
.sec--oscuro .datos a:hover { color: var(--oro); }

/* ---------- Texto legal ---------- */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.22rem, 2.2vw, 1.5rem); margin-top: 2.4em; }
.legal h3 { font-size: 1.06rem; margin-top: 1.8em; }
.legal h2:first-of-type { margin-top: 1em; }
.legal p, .legal li { font-size: .97rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1.4em; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border: 1px solid var(--linea); vertical-align: top; }
.legal th { background: var(--crema-2); font-weight: 700; }
.legal .pendiente { background: var(--oro-claro); padding: 1px 7px; border-radius: 2px; font-weight: 700; color: #6d4413; }
.legal__scroll { overflow-x: auto; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #a9a396; padding-block: clamp(44px, 6vw, 68px) 0; font-size: .92rem; }
.pie a { color: #c9c3b6; text-decoration: none; }
.pie a:hover { color: var(--oro); text-decoration: underline; }
.pie__grid { display: grid; gap: 34px; }
@media (min-width: 760px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1050px) { .pie__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.pie h2, .pie h3 {
  font-family: var(--fuente-c); font-size: .77rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro); margin-bottom: 16px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
/* El logotipo del pie es una variante con la palabra DANIEL en crema: el
   original la lleva en negro y sobre el grafito del pie no se leía. */
.pie__logo { display: block; line-height: 0; margin-bottom: 20px; }
.pie__logo img { width: auto; height: 96px; }
@media (min-width: 760px) { .pie__logo img { height: 112px; } }
.pie__legal {
  margin-top: 42px; border-top: 1px solid var(--linea-osc); padding-block: 22px 26px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .82rem; color: #8b8578;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pie__legal li { margin: 0; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(20, 20, 18, .28);
  transition: transform .18s, background .18s;
}
.wa-flotante:hover { background: #1faa53; transform: translateY(-2px); }
.wa-flotante svg { width: 32px; height: 32px; fill: #fff; }
@media (min-width: 1000px) { .wa-flotante { right: 24px; bottom: 24px; } }
/* Mientras el aviso de cookies está visible, el botón quedaría tapado por él */
.cookies:not([hidden]) ~ .wa-flotante { display: none; }

/* ---------- Cookies ---------- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--tinta); color: #cbc5b8; border-top: 3px solid var(--oro);
  padding: 18px var(--gutter);
}
.cookies__inner { max-width: var(--ancho); margin-inline: auto; display: grid; gap: 14px; align-items: center; }
@media (min-width: 820px) { .cookies__inner { grid-template-columns: 1fr auto; gap: 26px; } }
.cookies p { margin: 0; font-size: .89rem; line-height: 1.55; }
.cookies a { color: var(--oro); }
.cookies .btn-fila { flex-wrap: nowrap; }
.cookies .btn { min-height: 44px; padding: 10px 18px; font-size: .85rem; }
@media (max-width: 480px) { .cookies .btn { flex: 1; } }

/* Sin animaciones de aparición al hacer scroll: durante el fundido el texto
   queda semitransparente y baja del contraste mínimo, además de retrasar el
   pintado. El contenido se muestra tal cual, desde el primer momento. */
@media (prefers-reduced-motion: reduce) {
  .galeria__item img, .btn, .indice__fila, .destacado img { transition: none; }
}

/* ---------- Paginación de enlaces internos ---------- */
.enlaces-rel { border-top: 1px solid var(--linea); padding-top: 28px; margin-top: 34px; }
.enlaces-rel h2 { font-size: 1.12rem; margin-bottom: 14px; }

/* ---------- 404 ---------- */
.err { text-align: left; padding-block: clamp(60px, 12vw, 130px); }
.err__cod { font-family: var(--fuente-t); font-weight: 800; font-size: clamp(4rem, 16vw, 8.5rem); line-height: .9; color: var(--oro-num); letter-spacing: -.04em; margin: 0 0 .12em; }