/* ==========================================================================
   DS Sanitaire & Chauffage — feuille de style unique
   Site : dssanitairebroye.ch · Netlify « dssanitairebroye »
   --------------------------------------------------------------------------
   Los comentarios van en castellano: son notas de trabajo, no documentación
   del cliente. El sitio, todo en francés.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- marca --- */
  --navy:#0E3A52;
  --navy-deep:#0a2c3f;
  --navy-soft:#16475f;
  --water:#2BA8E0;
  --water-soft:#7fc4ea;
  --flame:#E8542F;          /* el naranja de la costura */
  --flame-deep:#cf4322;
  --flame-lite:#FF8355;     /* el mismo naranja, para fondo oscuro */
  --slate:#51616b;
  --ink:#11222c;

  /* --- fondos --- */
  --bg:#ffffff;
  --bg-alt:#eef3f6;
  --bg-soft:#f6f9fb;
  --line:#e1e9ee;
  --line-soft:#eef3f6;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 50px -28px rgba(14,58,82,.5);
  --shadow-sm:0 10px 26px -16px rgba(14,58,82,.42);

  --maxw:1180px;
  --pad:clamp(18px,5vw,44px);
  --sp:clamp(52px,7.5vw,96px);
  --entete-h:70px;          /* alto de la cabecera; lo relee el JS */
  --muelle:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  font-size:clamp(15.5px,1.35vw,16.5px);-webkit-font-smoothing:antialiased;
  overflow-x:hidden}

h1,h2,h3,h4{font-family:"Poppins",sans-serif;line-height:1.12;color:var(--navy);letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sp) 0}
.center{text-align:center}
.center .lead,.center .title{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--flame);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ==========================================================================
   LA COSTURA
   --------------------------------------------------------------------------
   No es una raya: es un huso. Un rectángulo de 3-4 px recortado en elipse
   queda grueso en el centro y se afila hacia los extremos; una máscara apaga
   las puntas para que no aparezca de golpe. Es la costura de roj-demenagement,
   traída aquí en el naranja de DS.

   La regla, la misma que allí: **la costura tiene que ser distinta de las DOS
   secciones que separa**. En esta paleta el naranja no es fondo de nada — ni
   del blanco, ni del gris azulado, ni del azul marino —, así que sirve
   siempre. Lo único que cambia sobre azul oscuro es que usa el naranja claro,
   porque el de marca se apaga contra el marino.

   Es genérica: TODA sección hija de <main> que siga a otra la lleva, y el pie
   también. Una sección nueva nace con su costura sin que haya que acordarse.
   ========================================================================== */
.costura,
.entete::after,
main > section + section::before,
main > section:first-child:not(.heros):not(.page-hero)::before,
.pie::before{
  background:var(--flame);
  clip-path:ellipse(50% 50% at 50% 50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
}

/* --- la costura de debajo de la cabecera --- */
.entete::after{
  content:"";position:absolute;bottom:0;
  left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);height:4px;
  transform-origin:50% 50%;
  transition:background .3s ease,transform .6s var(--muelle)}
/* Sobre la foto del héroe la cabecera es transparente: ahí la costura va en
   naranja claro, que es lo que aguanta contra el azul del velo. */
.entete:not(.pleine)::after{background:var(--flame-lite);transform:scaleX(.92)}

/* --- las costuras entre secciones --- */
main > section{position:relative}
main > section + section::before,
main > section:first-child:not(.heros):not(.page-hero)::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(680px,58%);height:3px;z-index:3;opacity:.85}
/* Después de una foto grande (héroe) la costura sí va, pero más fina: la foto
   ya separa por sí sola, esto sólo confirma dónde acaba. */
main > .heros + section::before,
main > .page-hero + section::before{
  width:min(420px,42%);height:2px;
  background:linear-gradient(90deg,transparent,var(--flame),transparent);
  clip-path:none}
/* Sobre las bandas oscuras, el naranja claro. La lista son las secciones de
   fondo azul que existen HOY; si nace otra, hay que añadirla aquí. */
main > .contacto::before,
main > .cta-banda::before,
main > .confianza::before{background:var(--flame-lite);opacity:1}

/* --- la costura del pie: más ancha, cierra la página --- */
.pie{position:relative}
.pie::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(940px,74%);height:4px;z-index:3;background:var(--flame-lite)}

/* ==========================================================================
   TIPOGRAFÍA DE SECCIÓN
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:"Poppins",sans-serif;
  font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame)}
.eyebrow .dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(90deg,var(--water) 0 50%,var(--flame) 50% 100%)}
.eyebrow--light{color:var(--water-soft)}
.title{font-size:clamp(1.75rem,3.7vw,2.7rem);font-weight:700;margin:.7rem 0 0;max-width:22ch}
.lead{color:var(--slate);font-size:clamp(1.02rem,1.7vw,1.18rem);margin-top:1rem;max-width:62ch}
.prose p{color:var(--slate);margin-top:1rem;max-width:72ch}
.prose h3{margin-top:2rem;font-size:1.2rem}
.prose ul{margin-top:.8rem;display:grid;gap:.5rem}
.prose li{color:var(--slate);padding-left:1.1rem;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--flame)}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.96rem;padding:.9rem 1.5rem;
  border-radius:999px;border:1.6px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .2s,background .2s,color .2s,border-color .2s;
  white-space:nowrap}
.btn svg{width:1.08em;height:1.08em;flex:0 0 auto}
.btn--flame{background:var(--flame);color:#fff;box-shadow:0 14px 30px -14px rgba(232,84,47,.75)}
.btn--flame:hover{background:var(--flame-deep);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn--lg{padding:1.02rem 1.8rem;font-size:1.04rem}
.btn--block{width:100%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ==========================================================================
   CABECERA
   --------------------------------------------------------------------------
   La banda de aviso que había encima desapareció el 28-08-2026: robaba 36 px
   al héroe y obligaba a descontárselos para que la portada midiera una
   pantalla justa. El teléfono sigue en la cabecera y en la barra de llamada
   del móvil, que es donde se pulsa.
   ========================================================================== */
.entete{position:sticky;top:0;z-index:80;
  background:transparent;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.entete.pleine{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px -18px rgba(14,58,82,.55)}
/* Las páginas interiores no tienen foto a pantalla completa detrás: la
   cabecera nace llena. */
body:not([data-page="home"]) .entete{background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--entete-h)}

.marca{display:flex;align-items:center;gap:.6rem;font-family:"Poppins",sans-serif;font-weight:700;
  color:var(--navy);font-size:1.2rem;letter-spacing:-.02em;transition:filter .3s}
.marca small{display:block;font-size:.55rem;font-weight:600;letter-spacing:.2em;color:var(--slate);
  text-transform:uppercase;margin-top:1px}
.logo-mark{width:31px;height:32px;flex:0 0 auto}
/* Sobre la foto del héroe el logotipo va en blanco con un halo corto: sin él,
   el azul marino de la marca se pierde contra el velo oscuro. */
body[data-page="home"] .entete:not(.pleine) .marca{color:#fff;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
body[data-page="home"] .entete:not(.pleine) .marca small{color:rgba(255,255,255,.8)}

/* --------------------------------------------------------------------------
   LAS PESTAÑAS Y SU DESTELLO
   Cada enlace es una pastilla recuadrada. Al pasar por encima —o al recibir
   el foco del teclado— la pastilla se invierte (marino lleno, texto blanco) y
   un destello blanco la recorre en diagonal. El destello va DENTRO de la
   pastilla (overflow:hidden) y por debajo del texto (z-index), para que no
   lave las letras.

   Con «reducir movimiento» activado el destello no viaja: se enciende. Es la
   misma señal, sin desplazamiento — Christopher navega con esa opción puesta,
   y un efecto que sólo existe moviéndose, para él, no existe.
   -------------------------------------------------------------------------- */
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;
  font-family:"Poppins",sans-serif;font-weight:500;font-size:.9rem;
  color:var(--navy);padding:.46rem .82rem;border-radius:10px;
  border:1px solid transparent;
  transition:color .25s ease,background .25s ease,border-color .25s ease}
.nav-links a > span{position:relative;z-index:2}
/* el recuadro */
.nav-links a::before{content:"";position:absolute;inset:0;z-index:0;border-radius:9px;
  background:var(--navy);opacity:0;transition:opacity .25s ease}
/* el destello */
/* El destello no debe borrar la palabra al pasar por encima: a 0,85 de blanco
   la tapaba durante un cuadro. A 0,58 y algo más estrecho sigue leyéndose
   como brillo y el texto no desaparece en ningún momento del recorrido. */
.nav-links a::after{content:"";position:absolute;top:-60%;bottom:-60%;width:38%;z-index:1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.1) 35%,rgba(255,255,255,.58) 50%,rgba(255,255,255,.1) 65%,transparent 100%);
  transform:translateX(-300%) skewX(-18deg);opacity:0;
  transition:transform .75s var(--muelle),opacity .2s ease}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff;border-color:var(--flame)}
.nav-links a:hover::before,.nav-links a:focus-visible::before{opacity:1}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:translateX(380%) skewX(-18deg);opacity:1}
/* la pestaña de la página en curso: recuadro naranja permanente */
.nav-links a[aria-current="page"]{border-color:var(--flame);color:var(--flame)}
.nav-links a[aria-current="page"]::before{background:rgba(232,84,47,.1);opacity:1}
.nav-links a[aria-current="page"]:hover,
.nav-links a[aria-current="page"]:focus-visible{color:#fff}
.nav-links a[aria-current="page"]:hover::before,
.nav-links a[aria-current="page"]:focus-visible::before{background:var(--flame);opacity:1}
/* sobre la foto del héroe */
body[data-page="home"] .entete:not(.pleine) .nav-links a{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
body[data-page="home"] .entete:not(.pleine) .nav-links a::before{background:rgba(255,255,255,.16)}
body[data-page="home"] .entete:not(.pleine) .nav-links a:hover,
body[data-page="home"] .entete:not(.pleine) .nav-links a:focus-visible{color:#fff}
/* Sobre la foto, la pestaña en curso no se rellena de naranja: el naranja al
   32 % sobre el velo azul daba un marrón sucio. Se queda el marco naranja y
   un relleno blanco muy tenue, que es lo que se lee sobre una foto. */
body[data-page="home"] .entete:not(.pleine) .nav-links a[aria-current="page"]{color:#fff;border-color:var(--flame-lite)}
body[data-page="home"] .entete:not(.pleine) .nav-links a[aria-current="page"]::before{background:rgba(255,255,255,.16)}

@media (prefers-reduced-motion:reduce){
  .nav-links a::after{
    inset:0;width:auto;transform:none;
    background:linear-gradient(115deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 55%,transparent);
    transition:opacity .18s ease}
  .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:none;opacity:1}
}

.nav-cta{display:flex;align-items:center;gap:.7rem}
.nav-tel{display:inline-flex;align-items:center;gap:.45rem;font-family:"Poppins",sans-serif;
  font-weight:600;color:var(--navy);font-size:.92rem;white-space:nowrap}
body[data-page="home"] .entete:not(.pleine) .nav-tel{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:9px}
.burger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.25s}
body[data-page="home"] .entete:not(.pleine) .burger span{background:#fff}

/* ==========================================================================
   HÉROE DE PORTADA — exactamente una pantalla
   --------------------------------------------------------------------------
   `100svh` es la «pantalla pequeña»: la altura del viewport CON las barras
   del navegador desplegadas. Es la única unidad que no salta cuando la barra
   de direcciones del móvil se recoge — 100vh se pasa de largo en iOS, 100dvh
   cambia de valor mientras se hace scroll. Se declara 100vh antes para los
   navegadores viejos, y el JS deja `--vh` de red de seguridad.

   La cabecera flota encima, así que el héroe ocupa la pantalla entera de
   verdad: foto de borde a borde, sin banda blanca arriba.
   ========================================================================== */
.heros{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  display:flex;align-items:center;
  min-height:520px;
  /* Una pantalla justa, sin nada por encima: la cabecera flota sobre la foto
     y se recupera con el margen negativo. `svh` es la única unidad que no
     salta cuando la barra del navegador móvil se recoge. */
  height:calc(var(--vh,1vh) * 100);
  height:100vh;
  height:100svh;
  margin-top:calc(var(--entete-h) * -1)}
/* El zoom, en dos capas para que no se pisen: la ENTRADA vive en el marco y
   la DERIVA en la foto. Son dos elementos distintos, así que las dos
   animaciones tocan `transform` sin competir, y el paralaje del JS usa
   `translate`, que es otra propiedad todavía. */
.heros__fondo{position:absolute;inset:-8% 0;z-index:-3;overflow:hidden;
  will-change:translate,transform;transform-origin:52% 45%;
  animation:heros-entrada 2.4s cubic-bezier(.16,.84,.32,1) both}
@keyframes heros-entrada{from{transform:scale(1.20)}to{transform:scale(1)}}
.heros__fondo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform-origin:52% 45%;
  animation:heros-zoom 30s ease-in-out infinite alternate}
@keyframes heros-zoom{from{transform:scale(1.03)}to{transform:scale(1.18)}}
/* Con «reducir movimiento» la entrada se conserva —es un gesto que ocurre una
   vez, no un movimiento continuo— pero con la mitad de recorrido; la deriva
   baja a un ritmo que se lee como respiración, no como movimiento. Quitarlo
   del todo dejaría la portada muerta para quien navega con esa opción. */
@media (prefers-reduced-motion:reduce){
  .heros__fondo{animation-duration:2.8s}
  .heros__fondo img{animation-duration:70s}
}
@media (prefers-reduced-motion:reduce){
  @keyframes heros-entrada{from{transform:scale(1.09)}to{transform:scale(1)}}
  @keyframes heros-zoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}
}
.heros__velo{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(102deg,rgba(8,38,55,.94) 0%,rgba(10,44,63,.84) 42%,rgba(14,58,82,.46) 100%)}
.heros__brillo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 110%,rgba(43,168,224,.22),transparent 55%)}
.heros .wrap{padding-top:calc(var(--entete-h) + clamp(18px,4vw,44px));
  padding-bottom:clamp(70px,10vw,110px);width:100%}
.heros h1{color:#fff;font-size:clamp(2.05rem,5.4vw,3.75rem);font-weight:800;max-width:17ch;
  margin-top:1rem;line-height:1.06}
.heros .lead{color:rgba(255,255,255,.92);max-width:52ch}
.heros-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:.42rem .85rem;border-radius:999px}
.chip svg{width:14px;height:14px;color:var(--water)}
.heros-baja{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.82);display:flex;flex-direction:column;align-items:center;gap:.3rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.heros-baja svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.heros-baja svg{animation:none}}

/* ==========================================================================
   HÉROE DE PÁGINA INTERIOR — una banda, no una pantalla
   ========================================================================== */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:clamp(96px,12vw,150px) 0 clamp(38px,5vw,58px)}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 88% -10%,rgba(43,168,224,.28),transparent 58%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(1.95rem,4.4vw,3rem);font-weight:800;max-width:20ch;margin-top:.8rem}
.page-hero .lead{color:rgba(255,255,255,.86);max-width:58ch}
.migas{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.76rem;color:rgba(255,255,255,.62);margin-bottom:.9rem}
.migas a:hover{color:#fff}
.migas span[aria-current]{color:var(--flame-lite)}

/* ==========================================================================
   BANDA DE CONFIANZA
   ========================================================================== */
.confianza{background:var(--navy);color:#fff}
.confianza .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding-top:1.5rem;padding-bottom:1.5rem}
.confianza-item{display:flex;align-items:center;gap:.7rem;justify-content:center;text-align:left}
.confianza-item svg{width:26px;height:26px;color:var(--water);flex:0 0 auto}
.confianza-item b{font-family:"Poppins",sans-serif;font-weight:600;font-size:.98rem;display:block;line-height:1.2}
.confianza-item span{font-size:.78rem;color:rgba(255,255,255,.7)}

/* ==========================================================================
   REJILLAS Y TARJETAS
   ========================================================================== */
.grid{display:grid;gap:1.15rem}
.servicios-grid{grid-template-columns:repeat(3,1fr);margin-top:2.6rem}
.tarjeta{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
@media (prefers-reduced-motion:reduce){.tarjeta:hover{transform:none}}
.tarjeta .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e6f5fc,#fdeee9);margin-bottom:1.05rem}
.tarjeta .ic svg{width:25px;height:25px}
.tarjeta h3{font-size:1.14rem;font-weight:600}
.tarjeta p{color:var(--slate);font-size:.93rem;margin-top:.45rem}
.tarjeta ul{margin-top:.8rem;display:grid;gap:.35rem}
.tarjeta ul li{font-size:.88rem;color:var(--slate);padding-left:1rem;position:relative}
.tarjeta ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--water)}

/* ==========================================================================
   L'ARTISAN
   ========================================================================== */
.sobre{background:var(--bg-alt)}
.sobre-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sobre-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.sobre-media img{width:100%;height:100%;object-fit:cover}
.sobre-chapa{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.95);border-radius:14px;
  padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;box-shadow:var(--shadow-sm)}
.sobre-chapa .logo-mark{width:30px;height:31px}
.sobre-chapa b{font-family:"Poppins",sans-serif;font-size:.92rem;color:var(--navy);display:block;line-height:1.1}
.sobre-chapa span{font-size:.74rem;color:var(--slate)}
.lista-check{margin-top:1.5rem;display:grid;gap:.7rem}
.lista-check li{display:flex;align-items:flex-start;gap:.65rem;font-size:.97rem}
.lista-check svg{width:21px;height:21px;color:var(--flame);flex:0 0 auto;margin-top:1px}

/* ==========================================================================
   GALERÍA — tres modos de visualización
   --------------------------------------------------------------------------
   Un solo HTML, tres presentaciones. La clase del contenedor manda:
     .galeria--defile   desplazamiento horizontal, con anclaje y flechas
     .galeria--mosaico  mosaico desordenado, alturas distintas (columnas CSS)
     .galeria--rejilla  rejilla regular, todas del mismo tamaño
   La elección se guarda en localStorage: quien vuelve, vuelve a lo suyo.
   ========================================================================== */
.galeria-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:2.2rem}
.galeria-modos{display:inline-flex;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:999px;padding:4px;gap:2px}
.galeria-modos button{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.45rem;border:0;cursor:pointer;background:none;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.82rem;color:var(--slate);
  padding:.5rem .95rem;border-radius:999px;transition:color .25s}
.galeria-modos button svg{width:16px;height:16px}
.galeria-modos button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:var(--navy);opacity:0;transition:opacity .25s}
.galeria-modos button:hover{color:var(--navy)}
.galeria-modos button[aria-pressed="true"]{color:#fff}
.galeria-modos button[aria-pressed="true"]::before{opacity:1}
.galeria-filtros{display:flex;flex-wrap:wrap;gap:.45rem}
.galeria-filtros button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.42rem .9rem;font-size:.84rem;font-weight:500;color:var(--navy);cursor:pointer;
  transition:background .22s,border-color .22s,color .22s}
.galeria-filtros button:hover{border-color:var(--flame)}
.galeria-filtros button[aria-pressed="true"]{background:var(--flame);border-color:var(--flame);color:#fff}

.galeria{margin-top:1.5rem}
.foto{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--navy);
  border:0;padding:0;cursor:pointer;display:block;width:100%}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.foto:hover img,.foto:focus-visible img{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){.foto:hover img,.foto:focus-visible img{transform:scale(1.03)}}
.foto__pie{position:absolute;left:0;right:0;bottom:0;color:#fff;font-size:.82rem;font-weight:500;
  text-align:left;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(8,32,46,.9));pointer-events:none}
.foto__lupa{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.85);transition:.22s}
.foto:hover .foto__lupa,.foto:focus-visible .foto__lupa{opacity:1;transform:scale(1)}
.foto__lupa svg{width:16px;height:16px;color:var(--navy)}
.foto[hidden]{display:none}

/* --- 1. desplazamiento horizontal --- */
.galeria--defile{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 1.1rem;scrollbar-width:thin;scrollbar-color:var(--water) var(--bg-alt)}
.galeria--defile::-webkit-scrollbar{height:8px}
.galeria--defile::-webkit-scrollbar-track{background:var(--bg-alt);border-radius:99px}
.galeria--defile::-webkit-scrollbar-thumb{background:var(--water);border-radius:99px}
.galeria--defile .foto{flex:0 0 clamp(240px,32vw,380px);height:clamp(300px,42vw,460px);
  scroll-snap-align:center}
.galeria-flechas{display:flex;gap:.5rem}
.galeria-flechas button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .22s,border-color .22s,color .22s}
.galeria-flechas button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.galeria-flechas svg{width:20px;height:20px}
.galeria-flechas[hidden]{display:none}

/* --- 2. mosaico desordenado --- */
/* Columnas CSS: cada foto conserva su proporción real, así que las alturas
   salen distintas solas y la retícula queda «desordenada» sin trucos. */
.galeria--mosaico{column-count:3;column-gap:1rem}
.galeria--mosaico .foto{break-inside:avoid;margin-bottom:1rem;width:100%;height:auto}
.galeria--mosaico .foto img{height:auto}

/* --- 3. rejilla regular --- */
.galeria--rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:1rem}
.galeria--rejilla .foto{aspect-ratio:4/3;height:auto}
/* El avance de la portada enseña tres, y tres exactas: con `auto-fill` la
   retícula reservaba una cuarta columna vacía a partir de 1100 px. */
.galeria--tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.galeria--tres{grid-template-columns:1fr}}

/* ==========================================================================
   VISOR
   ========================================================================== */
.visor{position:fixed;inset:0;z-index:120;background:rgba(8,24,34,.93);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);
  opacity:0;visibility:hidden;transition:opacity .25s}
.visor.abierto{opacity:1;visibility:visible}
.visor figure{max-width:1000px;max-height:100%;display:flex;flex-direction:column;gap:.7rem}
.visor img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.visor figcaption{color:#dceaf2;text-align:center;font-size:.9rem}
.visor-btn{position:absolute;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  color:#fff;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s}
.visor-btn:hover{background:rgba(255,255,255,.28)}
.visor-btn svg{width:22px;height:22px}
.visor-cerrar{top:18px;right:18px}
.visor-ant{left:max(14px,2vw);top:50%;transform:translateY(-50%)}
.visor-sig{right:max(14px,2vw);top:50%;transform:translateY(-50%)}

/* ==========================================================================
   PROCESO · ZONAS · FAQ
   ========================================================================== */
.proceso{background:var(--bg-soft)}
.pasos{grid-template-columns:repeat(3,1fr);margin-top:2.6rem;gap:1.5rem}
.paso{position:relative;padding-top:.5rem}
.paso .num{font-family:"Poppins",sans-serif;font-weight:800;font-size:2.7rem;color:transparent;
  -webkit-text-stroke:1.6px var(--water);line-height:1}
.paso h3{font-size:1.14rem;font-weight:600;margin-top:.5rem}
.paso p{color:var(--slate);font-size:.93rem;margin-top:.35rem}

.zona-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.pueblos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.pueblo{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.46rem .9rem;font-size:.9rem;font-weight:500;color:var(--navy)}
.pueblo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--flame)}
.zona-tarjeta{background:var(--navy);color:#fff;border-radius:var(--radius);padding:2.1rem;box-shadow:var(--shadow)}
.zona-tarjeta h3{color:#fff;font-size:1.32rem}
.zona-tarjeta p{color:rgba(255,255,255,.82);margin-top:.6rem;font-size:.95rem}
.zona-tarjeta .btn{margin-top:1.4rem}

.faq{margin-top:2.4rem;max-width:820px}
.qa{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin-bottom:.8rem;overflow:hidden}
.qa-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.15rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:1.02rem;color:var(--navy)}
.qa-q .pm{width:22px;height:22px;flex:0 0 auto;position:relative;transition:transform .25s}
.qa-q .pm::before,.qa-q .pm::after{content:"";position:absolute;background:var(--flame);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.qa-q .pm::before{width:14px;height:2px}
.qa-q .pm::after{width:2px;height:14px;transition:transform .25s}
.qa.abierta .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.qa.abierta .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
.qa-a p{color:var(--slate);padding:0 1.3rem 1.2rem;font-size:.95rem}
@media (prefers-reduced-motion:reduce){.qa-a{transition:none}}

/* ==========================================================================
   BANDA DE LLAMADA
   ========================================================================== */
.cta-banda{background:var(--navy);color:#fff;padding:clamp(38px,5vw,58px) 0}
.cta-banda .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.cta-banda h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);max-width:22ch}
.cta-banda p{color:rgba(255,255,255,.78);font-size:.95rem;margin-top:.4rem;max-width:48ch}
.cta-banda .acciones{display:flex;flex-wrap:wrap;gap:.7rem}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{background:var(--navy);color:#fff}
.contacto .title{color:#fff}
.contacto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2.6rem}
.contacto-info{display:flex;flex-direction:column;gap:1.2rem}
.cinfo{display:flex;gap:.95rem;align-items:flex-start}
.cinfo .cic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cinfo .cic svg{width:21px;height:21px;color:var(--water)}
.cinfo .lbl{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:var(--water-soft);font-weight:600}
.cinfo .val{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.1rem;color:#fff;margin-top:1px}
.cinfo .val a:hover{color:var(--water)}
.cinfo small{color:rgba(255,255,255,.72)}
.urgencia{display:inline-flex;align-items:center;gap:.5rem;background:var(--flame);color:#fff;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.9rem;padding:.6rem 1.05rem;
  border-radius:999px;align-self:flex-start}

.form{background:#fff;border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.1rem);color:var(--ink);
  box-shadow:var(--shadow)}
.campo{margin-bottom:1.05rem}
.campo label{display:block;font-weight:600;font-size:.85rem;color:var(--navy);margin-bottom:.35rem}
.campo input,.campo textarea,.campo select{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;font:inherit;color:var(--ink);background:#fbfdfe;
  transition:border-color .18s,box-shadow .18s}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--water);
  box-shadow:0 0 0 3px rgba(43,168,224,.2)}
.campo textarea{resize:vertical;min-height:118px}
.campo .err{display:none;color:#c0341c;font-size:.8rem;margin-top:.3rem;font-weight:500}
.campo.invalido input,.campo.invalido textarea,.campo.invalido select{border-color:#e0573a;background:#fff6f4}
.campo.invalido .err{display:block}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.form .nota{font-size:.84rem;color:var(--slate);margin-top:.65rem;text-align:center}
.form-estado{display:none;border-radius:12px;padding:1rem 1.1rem;font-weight:500;font-size:.92rem;margin-bottom:1rem}
.form-estado.ok{display:block;background:#e8f7ee;color:#1d6b3a;border:1px solid #b6e3c6}
.form-estado.ko{display:block;background:#fdeeea;color:#b23b22;border:1px solid #f3c6ba}
.form button[disabled]{opacity:.6;cursor:progress}

/* ==========================================================================
   PIE DE PÁGINA
   --------------------------------------------------------------------------
   Compacto, según el modelo de studiobroye.ch: cinco columnas, interlineado
   corto, cuerpo pequeño. Lo que costaba altura antes no eran los márgenes,
   era el interlineado de listas de seis enlaces heredado del cuerpo de texto
   (1,65). Aquí va a 1,15: son palabras sueltas, no frases, y las zonas de
   toque siguen por encima de los 32 px.
   ========================================================================== */
.pie{background:var(--navy-deep);color:rgba(255,255,255,.72);
  padding:clamp(22px,2vw,30px) 0 clamp(9px,.7vw,12px)}
.pie-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.3vw,22px);
  margin-bottom:clamp(11px,.9vw,15px)}
.pie h4{color:#fff;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:7px;font-weight:600}
.pie-grid a{position:relative;display:block;color:rgba(255,255,255,.75);font-size:.82rem;
  line-height:1.15;margin-bottom:6px;width:fit-content;
  transition:color .22s,padding-left .22s}
.pie-grid a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--flame);transition:width .22s}
.pie-grid a:hover{color:#fff;padding-left:13px}
.pie-grid a:hover::before{width:9px}
.pie-marca .marca{color:#fff;font-size:1.05rem}
.pie-marca .marca small{color:var(--water-soft)}
.pie-marca p{color:rgba(255,255,255,.6);font-size:.77rem;line-height:1.4;margin-top:6px;max-width:32ch}
.pie-redes{display:flex;gap:.5rem;margin-top:10px}
.pie-redes a{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.pie-redes a::before{content:none}
.pie-redes a:hover{background:var(--flame);border-color:var(--flame);padding-left:0}
.pie-redes svg{width:15px;height:15px;fill:currentColor}
.pie-dir{font-style:normal;font-size:.77rem;line-height:1.35;color:rgba(255,255,255,.6);margin-bottom:7px}
.pie-linea{display:block;font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.78);
  overflow-wrap:anywhere;margin-bottom:3px}
.pie-linea::before{content:none}
.pie-linea:hover{padding-left:0;color:var(--water)}
.pie-chapa{display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pie-chapa i{width:6px;height:6px;border-radius:50%;background:var(--flame);flex:none}
.pie-abajo{border-top:1px solid rgba(255,255,255,.12);padding-top:9px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 20px;
  font-size:.72rem;color:rgba(255,255,255,.5)}
@media (min-width:640px){.pie-grid{grid-template-columns:1.5fr 1fr 1fr}}
@media (min-width:980px){.pie-grid{grid-template-columns:1.35fr .85fr .9fr .95fr 1.1fr}}
/* En el teléfono el pie medía 769 px — casi una pantalla entera dedicada a
   la salida. Se recorta la frase de marca (la misma decisión de studiobroye),
   se aprieta el interlineado de las listas y se baja un punto el cuerpo. No
   se quita ni un enlace, y las zonas de toque siguen por encima de 32 px. */
@media (max-width:639px){
  .pie{padding:clamp(16px,4vw,22px) 0 clamp(7px,1.5vw,10px)}
  .pie-marca{grid-column:1/-1}
  .pie-marca p{display:none}
  .pie-marca .marca{font-size:.98rem}
  .pie-redes{margin-top:8px}
  .pie-grid{grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:10px}
  .pie h4{margin-bottom:5px}
  .pie-grid a{font-size:.8rem;margin-bottom:4px}
  .pie-dir{margin-bottom:5px}
  .pie-abajo{padding-top:8px;font-size:.7rem;gap:3px 16px}
}

/* ==========================================================================
   BARRA DE LLAMADA MÓVIL · REVELADO · FOCO
   ========================================================================== */
.barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;
  padding:.6rem .8rem;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line)}
.barra-movil .btn{flex:1}

/* ==========================================================================
   EL CONTENIDO APARECE AL BAJAR
   --------------------------------------------------------------------------
   El JS marca los bloques de todas las páginas y los va encendiendo según
   entran en pantalla, con un escalonado corto dentro de cada rejilla.

   El estado escondido depende de la clase `.js` que pone un script en el
   <head>: sin JavaScript no se esconde nada. Si dependiera solo del CSS, un
   navegador con el script bloqueado dejaría la web en blanco.

   Con «reducir movimiento» el bloque NO se desplaza: solo se funde. Un
   desvanecido no es movimiento vestibular, así que el efecto sigue viéndose
   —que es de lo que se trata— sin marear a quien pidió no ser mareado.
   ========================================================================== */
.js .rev{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--muelle),transform .7s var(--muelle)}
.js .rev.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rev{transform:none;transition:opacity .8s ease}
  .js .rev.dentro{transform:none}
}

/* El héroe no espera al scroll: entra solo, escalonado, nada más cargar. */
.js .heros__contenido > *{opacity:0;transform:translateY(18px);
  animation:heros-texto .85s cubic-bezier(.16,.84,.32,1) both}
.js .heros__contenido > *:nth-child(1){animation-delay:.30s}
.js .heros__contenido > *:nth-child(2){animation-delay:.40s}
.js .heros__contenido > *:nth-child(3){animation-delay:.50s}
.js .heros__contenido > *:nth-child(4){animation-delay:.60s}
.js .heros__contenido > *:nth-child(5){animation-delay:.70s}
@keyframes heros-texto{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .heros__contenido > *{transform:none}
  @keyframes heros-texto{to{opacity:1;transform:none}}
}

:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:5px}
.entete:not(.pleine) :focus-visible{outline-color:#fff}

/* ==========================================================================
   ADAPTACIÓN
   ========================================================================== */
@media (max-width:1080px){
  .nav-links{gap:.15rem}
  .nav-links a{padding:.44rem .62rem;font-size:.86rem}
}
@media (max-width:980px){
  .servicios-grid{grid-template-columns:repeat(2,1fr)}
  .confianza .wrap{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .sobre-grid,.zona-grid,.contacto-grid{grid-template-columns:1fr}
  .sobre-media{aspect-ratio:16/11;max-width:560px}
  .galeria--mosaico{column-count:2}
}
@media (max-width:860px){
  .nav-tel{display:none}
}
@media (max-width:760px){
  .nav-links{position:absolute;top:var(--entete-h);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:.3rem;background:#fff;border-bottom:1px solid var(--line);
    padding:.7rem var(--pad) 1rem;box-shadow:0 18px 30px -20px rgba(14,58,82,.4);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s}
  .nav-links.abierto{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.8rem .9rem;border:1px solid var(--line);color:var(--navy)}
  body[data-page="home"] .entete:not(.pleine) .nav-links a{color:var(--navy);text-shadow:none}
  body[data-page="home"] .entete:not(.pleine) .nav-links a::before{background:var(--navy)}
  .burger{display:flex}
  .burger.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.abierto span:nth-child(2){opacity:0}
  .burger.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .pasos{grid-template-columns:1fr;gap:1.2rem}
  .fila-2{grid-template-columns:1fr}
  .barra-movil{display:flex}
  body{padding-bottom:74px}
  .pie{padding-bottom:88px}
  .galeria--defile .foto{flex-basis:78vw}
  /* la barra de llamada mide 76 px: la señal de « descubrir » se sube por
     encima de ella, si no queda tapada justo en el primer pantallazo */
  .heros-baja{bottom:88px}
  .cta-banda .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:470px){
  /* A 360 px el rótulo « SANITAIRE · CHAUFFAGE » pasaba a dos líneas y
     desbordaba los 70 px de la cabecera. Se acorta el interletrado antes que
     el texto: sigue leyéndose y vuelve a caber en una línea. */
  .marca{font-size:1.08rem;gap:.5rem}
  .marca small{font-size:.5rem;letter-spacing:.12em}
  .logo-mark{width:27px;height:28px}
  .nav-cta{gap:.4rem}
  .nav-cta .btn{padding:.75rem 1rem;font-size:.88rem}
  .servicios-grid,.confianza .wrap{grid-template-columns:1fr}
  .confianza-item{justify-content:flex-start}
  .galeria--mosaico{column-count:1}
  .galeria--rejilla{grid-template-columns:1fr}
}