/* ==========================================================================
   Premium Reglazing — estilos
   Móvil primero. Sin animaciones de entrada: el contenido está desde el
   primer pintado.
   ========================================================================== */

:root{
  /* NEUTROS: salen del logo.
     El logo es gris puro — todos sus tonos tienen R=G=B, medidos uno a uno —
     y su masa principal está en #545454. Así que los grises de la web son
     neutros de verdad, no los azulados de antes (#16191d, #4d545c): eso es lo
     que hace que el conjunto se vea "del logo" y no de una plantilla. */
  --tinta:      #1d1d1d;   /* 16,86:1 sobre blanco */
  --tinta-70:   #545454;   /* el tono exacto del logo · 7,57:1 */
  --tinta-45:   #6b6b6b;   /* 5,33:1 sobre blanco y 4,85 sobre crema */
  --linea:      #dcdcdc;
  --linea-suave:#ebebeb;
  --papel:      #ffffff;

  /* PLATA. Es el tono que el cliente reconoce como suyo, y el que hace de
     tercer plano entre el papel y el grafito: blanco → plata → negro.
     Sobre plata el texto secundario tiene que bajar a --sobre-plata-45,
     porque --tinta-45 se queda en 4,19:1 y no pasa AA. */
  --plata:      #e4e4e4;
  --plata-luz:  #f1f1f1;   /* las franjas de sección */
  --plata-osc:  #cfcfcf;   /* filetes y bordes sobre plata */
  --sobre-plata-70: #4a4a4a;   /* 6,97:1 */
  --sobre-plata-45: #5c5c5c;   /* 5,26:1 */

  /* Alias: media hoja sigue llamándolo "crema" de cuando era cálido. */
  --crema:      var(--plata-luz);

  /* GRAFITO: el extremo oscuro del logo. Es el negro de la web — la tira de
     datos de la cabecera, el bloque de contacto y la página de
     administradoras. NO lleva el logo encima: el logo es gris oscuro y sobre
     grafito pierde fuerza, así que vive sobre papel y sobre plata. */
  --grafito:      #262626;
  --grafito-linea:#3a3a3a;
  --sobre-grafito:     #ffffff;
  --sobre-grafito-70:  #c4c4c4;  /* 8,68:1 */
  --sobre-grafito-45:  #a3a3a3;  /* 6,00:1 */

  /* COLOR DE MARCA.
     El logo no tiene color que aportar: es gris de punta a punta. El dorado
     sale del otro sitio donde José firma su trabajo — la marca de agua de
     sus fotos — muestreado en #e6b43c.
     Sobre blanco da 1,92:1 (ilegible). Se usa SIEMPRE como relleno con texto
     carbón encima (8,80:1), nunca como color de texto sobre claro. Para texto
     dorado sobre claro está --marca-texto (6,29:1). Sobre el grafito sí vale
     como texto: 7,90:1. */
  --marca:       #e6b43c;
  --marca-osc:   #d4a32c;
  --marca-texto: #7d5a0d;
  --marca-luz:   #fdf6e4;

  /* Alias: el resto de la hoja sigue hablando de "acento". */
  --acento:     var(--marca-texto);
  --acento-osc: var(--marca-osc);
  --acento-luz: var(--marca-luz);

  --aviso:      #b4472a;

  --radio:      10px;
  --radio-g:    16px;
  --ancho:      1180px;
  --barra-alto: 64px;
}

*{ box-sizing:border-box; }

/* El atributo hidden manda. Sin esto, cualquier display:flex lo anula y
   aparecen bloques que config.js había apagado. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ overflow-x:clip; }
/* Sin esto, con cabecera pegajosa, cada ancla aterriza debajo de la cabecera
   — incluido "Skip to contact", que es la vía de escape hacia la conversión. */
:where(section,figure,h2,div)[id]{ scroll-margin-top:122px; }  /* la cabecera móvil mide 113 con el menú */
@media (min-width:900px){ :where(section,figure,h2,div)[id]{ scroll-margin-top:124px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta);
  background:var(--papel);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* hueco para la barra fija del móvil */
  padding-bottom:calc(var(--barra-alto) + env(safe-area-inset-bottom));
}

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

h1,h2,h3{ line-height:1.15; letter-spacing:-.021em; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(1.95rem, 6.2vw, 3.1rem); }
h2{ font-size:clamp(1.55rem, 4.4vw, 2.3rem); }
h3{ font-size:1.25rem; font-weight:600; }
p{ margin:0 0 1em; }

a{ color:inherit; }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 16px; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:12px 18px;
}
.saltar:focus{ left:8px; top:8px; }

.iconos{ display:none; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--acento);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- BOTONES ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; min-height:52px;
  border-radius:var(--radio); border:1.5px solid transparent;
  font-size:1rem; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.boton svg{ width:19px; height:19px; flex:none; }
.boton--principal{ background:var(--marca); color:var(--tinta); }
.boton--principal:hover{ background:var(--marca-osc); }
.boton--linea{ border-color:var(--linea); color:var(--tinta); background:var(--papel); }
.boton--linea:hover{ border-color:var(--tinta); }
.boton--ancho{ width:100%; }

/* ---------- CABECERA ----------------------------------------------------
   Fondo claro, y no es una decisión estética: el logo es gris oscuro sobre
   transparente, así que el único sitio donde recorta de verdad es el blanco.
   Se probó en grafito con una versión clara del logo y perdía fuerza.
   Lo que sí se queda de aquella prueba son las dos cosas que no tocan al
   logo: la tira de datos en grafito (que además mete el negro de la marca en
   lo primero que se ve) y el teléfono relleno en dorado. */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linea);
}

/* Tira superior: dónde está, cuándo abre y hasta dónde llega. Son las tres
   cosas que mira quien acaba de aterrizar. Solo en escritorio: en móvil cada
   píxel de alto es scroll que se le quita al contenido. */
.cabecera__tira{ display:none; }
@media (min-width:900px){
  .cabecera__tira{
    display:block; background:var(--grafito);
    font-size:.8rem; color:var(--sobre-grafito-45);
  }
  .cabecera__tira .contenedor{
    display:flex; align-items:center; gap:9px;
    min-height:34px; flex-wrap:wrap;
  }
  .cabecera__tira svg{ width:14px; height:14px; color:var(--sobre-grafito-45); flex:none; }
  .cabecera__tira b{ color:var(--sobre-grafito-70); font-weight:600; }
  .cabecera__tira span{ display:inline-flex; align-items:center; gap:6px; }
  .cabecera__tira i{ color:#5a5a5a; font-style:normal; }
  .cabecera__tira em{ margin-left:auto; font-style:normal; color:var(--marca); font-weight:600; }
}

.cabecera__fila{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-height:62px;
}
.cabecera__logo{ flex:none; display:block; }
.cabecera__logo img{ width:128px; height:auto; display:block; }

/* Móvil: el menú pasa a una segunda fila deslizable. Antes estaba oculto y
   desde el teléfono no había manera de llegar a las páginas de servicio. */
.cabecera__nav{
  order:3; flex-basis:100%;
  display:flex; gap:7px;
  margin:0 -16px; padding:0 16px 9px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cabecera__nav::-webkit-scrollbar{ display:none; }
.cabecera__nav a{
  flex:none; text-decoration:none;
  font-size:.86rem; font-weight:600; color:var(--tinta-70);
  padding:7px 13px; border-radius:100px;
  border:1px solid var(--linea); background:var(--papel);
  white-space:nowrap;
}
.cabecera__nav a[aria-current]{
  color:var(--tinta); border-color:var(--marca); background:var(--marca-luz);
}

/* El teléfono vive SIEMPRE en la cabecera, también en móvil, y relleno en
   dorado: es el único elemento con color de la barra y por tanto donde se va
   el ojo. Carbón sobre dorado: 8,80:1. */
.cabecera__tel{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  color:var(--tinta); background:var(--marca);
  padding:9px 15px; border-radius:100px;
  white-space:nowrap;
}
.cabecera__tel svg{ width:17px; height:17px; }
.cabecera__tel:hover{ background:var(--marca-osc); }

@media (min-width:900px){
  .cabecera__fila{ min-height:74px; flex-wrap:nowrap; gap:20px; }
  .cabecera__logo img{ width:150px; }
  .cabecera__nav{
    order:0; flex-basis:auto;
    display:flex; gap:28px; margin:0 0 0 24px; padding:0;
    overflow:visible;
  }
  .cabecera__nav a{
    color:var(--tinta-70); padding:8px 0;
    border:0; background:none; border-radius:0;
    font-size:.95rem; font-weight:500;
  }
  .cabecera__nav a:hover{ color:var(--tinta); }
  .cabecera__nav a[aria-current]{
    color:var(--tinta); background:none;
    box-shadow:inset 0 -2px 0 var(--marca);
  }
  .cabecera__tel{ padding:12px 20px; font-size:1rem; }
}

/* ---------- HERO ---------- */
.hero{ padding:26px 0 30px; }
.hero__rejilla{ display:grid; gap:26px; }

.hero__lugar{
  font-size:.83rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--acento); margin:0 0 12px;
}
.hero h1{ margin-bottom:.45em; }
.hero__entrada{ font-size:1.06rem; color:var(--tinta-70); max-width:35em; }

.prueba{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--acento-luz); border-radius:var(--radio);
  padding:9px 14px; margin-bottom:18px;
  font-size:.92rem; font-weight:600;
}
.prueba__estrellas{ color:var(--marca); letter-spacing:1px; }

.hero__botones{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:20px; }
.hero__botones .boton{ flex:1 1 auto; min-width:185px; }

.hero__puntos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:.9rem; color:var(--tinta-70);
}
.hero__puntos li{ display:flex; align-items:center; gap:7px; }
.hero__puntos li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--acento); flex:none;
}
.hero__puntos li:empty{ display:none; }

/* En móvil el antes/después sube justo debajo del titular: es el argumento
   de venta y tiene que verse sin scroll. */
@media (max-width:899px){
  .hero__rejilla{ display:flex; flex-direction:column; gap:20px; }
  .hero__texto{ display:contents; }
  .hero__lugar   { order:1; }
  .hero__texto h1{ order:2; margin-bottom:0; }
  .comparador    { order:3; }
  .hero__entrada { order:4; margin-bottom:0; }
  .prueba        { order:5; margin-bottom:0; }
  .hero__botones { order:6; margin-bottom:0; }
  .hero__puntos  { order:7; }
}

@media (min-width:900px){
  .hero{ padding:46px 0 54px; }
  /* La columna de la foto es la ancha: el comparador es el mejor argumento
     que tiene el negocio y a 1fr/1fr se quedaba en un rectángulo mediano
     rodeado de blanco. */
  .hero__rejilla{ grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center; }
}

/* ---------- COMPARADOR ANTES / DESPUÉS ---------- */
.comparador{ margin:0; }
@media (min-width:900px){ .comparador__marco{ aspect-ratio:16/10; } }
.comparador__marco{
  position:relative; overflow:hidden;
  border-radius:var(--radio-g);
  background:var(--crema);
  /* En móvil va apaisado, debajo del titular, para no comerse el scroll.
     En escritorio pasa a 16:10: la foto es de 1400x653 y recortada por los
     lados a esa proporción la tina sigue entrando entera — comprobado — y
     el óxido, que es el argumento, se ve al doble de tamaño. */
  aspect-ratio:1536/716;
  touch-action:pan-y;
  user-select:none;
}
.comparador__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
/* La capa de "antes" se recorta por la izquierda con clip-path. */
.comparador__recorte{
  position:absolute; inset:0;
  clip-path:inset(0 50% 0 0);
  will-change:clip-path;
}

.comparador__etiqueta{
  position:absolute; top:12px; z-index:3;
  padding:5px 11px; border-radius:99px;
  font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(29,29,29,.74);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.comparador__etiqueta--antes{ left:12px; }
.comparador__etiqueta--despues{ right:12px; }

.comparador__tirador{
  position:absolute; top:0; bottom:0; left:50%; z-index:4;
  width:3px; margin-left:-1.5px; background:#fff;
  box-shadow:0 0 0 1px rgba(29,29,29,.14);
  pointer-events:none;
}
.comparador__asa{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--tinta);
  display:grid; place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.26);
}
.comparador__asa svg{ width:24px; height:24px; }

/* El input range es el control real: invisible pero encima de todo. */
.comparador__rango{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.comparador__rango::-webkit-slider-thumb{
  -webkit-appearance:none; width:54px; height:100vh; cursor:ew-resize;
}
.comparador__rango::-moz-range-thumb{
  width:54px; height:100vh; border:0; background:transparent; cursor:ew-resize;
}
.comparador__oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.comparador__rango:focus-visible ~ .comparador__tirador,
.comparador__marco:has(.comparador__rango:focus-visible){ outline:2.5px solid var(--acento); outline-offset:2px; }

.comparador figcaption{
  margin-top:9px; font-size:.84rem; color:var(--tinta-45); text-align:center;
}

/* ---------- BARRA DE DATOS ---------- */
.datos{ border-block:1px solid var(--linea-suave); background:var(--crema); }
.datos__fila{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--linea-suave);
}
.dato{
  background:var(--crema); padding:18px 14px; text-align:center;
}
.dato b{
  display:block; font-size:1.45rem; font-weight:700; color:var(--acento);
  line-height:1.1;
}
.dato span{ display:block; font-size:.79rem; color:var(--tinta-70); margin-top:5px; }
@media (min-width:760px){
  .datos__fila{ grid-template-columns:repeat(var(--n,4),1fr); }
  .dato{ padding:24px 16px; }
  .dato b{ font-size:1.8rem; }
}

/* ---------- SECCIONES ---------- */
.seccion__cab{ margin-bottom:26px; max-width:38em; }
.seccion__cab p{ color:var(--tinta-70); margin:0; font-size:1.02rem; }

.ahorro{ padding:44px 0; }
.ahorro__caja{ display:grid; gap:26px; }
.ahorro h2{ max-width:16em; }
.ahorro p{ color:var(--tinta-70); max-width:38em; }
.ahorro__comparacion{
  font-weight:600; color:var(--tinta);
  border-left:3px solid var(--acento); padding-left:14px;
}
/* Eran cuatro textos sueltos separados por rayitas de 1px: lo menos
   diseñado de la portada. Ahora cada una es una celda de plata con su
   filete dorado arriba — el único sitio donde el dorado hace de marca
   sin robarle protagonismo al botón de llamar. */
.ahorro__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.ahorro__lista li{
  background:var(--plata-luz); border-radius:var(--radio);
  padding:18px 20px 20px; position:relative; overflow:hidden;
}
.ahorro__lista li::before{
  content:""; position:absolute; top:0; left:0; width:38px; height:3px;
  background:var(--marca);
}
.ahorro__lista strong{
  display:block; font-family:'Archivo','Inter',sans-serif;
  font-size:1.02rem; letter-spacing:-.01em; margin-bottom:3px;
}
.ahorro__lista span{ font-size:.9rem; color:var(--tinta-70); }
@media (min-width:900px){
  .ahorro{ padding:66px 0; }
  .ahorro__caja{ grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
  .ahorro__lista{ grid-template-columns:1fr 1fr; }
}

/* ---------- PAREJAS ANTES/DESPUÉS ---------- */
.trabajo{ padding:44px 0; background:var(--crema); }
@media (min-width:900px){ .trabajo{ padding:66px 0; } }

.parejas{ display:grid; gap:26px; }
@media (min-width:860px){ .parejas{ grid-template-columns:repeat(3,1fr); } }

.pareja{ margin:0; }
.pareja__fotos{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border-radius:var(--radio-g); overflow:hidden; background:var(--linea);
}
.pareja__foto{ position:relative; }
.pareja__foto img,
.pareja__foto video{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.marca{
  position:absolute; left:8px; bottom:8px;
  padding:4px 9px; border-radius:99px;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
}
.marca{ pointer-events:none; }
.marca--antes{ background:rgba(29,29,29,.78); }
.marca--despues{ background:var(--marca); color:var(--tinta); }
.pareja figcaption{ margin-top:10px; font-size:.86rem; color:var(--tinta-70); }

.trabajo__mas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px;
}
.trabajo__mas img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radio);
}


/* ---------- SERVICIOS ---------- */
.servicios{ padding:44px 0; }
@media (min-width:900px){ .servicios{ padding:66px 0; } }
.servicios__rejilla{ display:grid; gap:1px; background:var(--linea); border-radius:var(--radio-g); overflow:hidden; }
@media (min-width:700px){ .servicios__rejilla{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .servicios__rejilla{ grid-template-columns:repeat(4,1fr); } }
.servicio{ background:var(--papel); padding:22px 20px; }
.servicio h3{ margin-bottom:.4em; }
.servicio p{ margin:0; font-size:.93rem; color:var(--tinta-70); }

/* ---------- PASOS ---------- */
.pasos{ padding:44px 0; background:var(--crema); }
@media (min-width:900px){ .pasos{ padding:66px 0; } }
.pasos__lista{
  list-style:none; counter-reset:paso; margin:0; padding:0;
  display:grid; gap:26px;
}
@media (min-width:820px){ .pasos__lista{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.pasos__lista li{ counter-increment:paso; position:relative; }

/* La foto de cada paso. Son cuatro trabajos distintos, no uno seguido: cada
   pie se sostiene solo y ninguno dice que sea la misma tina. */
.pasos__foto{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  object-position:center 58%;
  border-radius:var(--radio); background:var(--linea-suave);
  margin-bottom:14px;
}
.pasos__lista li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute; top:10px; left:10px;
  display:grid; place-items:center;
  min-width:30px; height:30px; padding:0 8px;
  border-radius:100px; background:var(--marca); color:var(--tinta);
  font-family:'Archivo','Inter',sans-serif;
  font-weight:700; font-size:.82rem; letter-spacing:.02em;
}
.pasos__lista h3{ margin:0 0 4px; }
.pasos__lista p{ margin:0; font-size:.93rem; color:var(--tinta-70); }


/* ---------- SEGURIDAD ---------- */
.seguridad{ padding:44px 0; }
@media (min-width:900px){ .seguridad{ padding:66px 0; } }
.seguridad__caja{
  background:var(--acento-luz); border-radius:var(--radio-g); padding:26px 22px;
}
@media (min-width:900px){ .seguridad__caja{ padding:40px 44px; } }
.seguridad__intro{ color:var(--tinta-70); max-width:34em; }
.seguridad__lista{ margin:0; display:grid; gap:16px; }
@media (min-width:760px){ .seguridad__lista{ grid-template-columns:1fr 1fr; gap:20px 40px; } }
.seguridad__lista dt{ font-weight:600; margin-bottom:2px; }
.seguridad__lista dd{ margin:0; color:var(--tinta-70); font-size:.94rem; }

/* ---------- RESEÑAS ---------- */
.resenas{ padding:44px 0; background:var(--crema); }
@media (min-width:900px){ .resenas{ padding:66px 0; } }
/* Esto era una pastilla pequeña perdida bajo un titular grande: prometía
   prueba social y entregaba una etiqueta. El 5,0 con 17 reseñas está
   verificado, así que lo que había que hacer es darle el tamaño que merece.
   Las reseñas escritas, cuando José las mande, entran debajo sin tocar nada. */
.valoracion{ display:grid; gap:20px; align-items:stretch; }
@media (min-width:820px){ .valoracion{ grid-template-columns:1fr 1fr; gap:40px; } }

.resenas__nota{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio-g); padding:28px 26px;
}
.resenas__cabeza{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.resenas__cifra{
  font-family:'Archivo','Inter',sans-serif;
  font-size:clamp(3.2rem,9vw,4.4rem); font-weight:800; line-height:.86;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.resenas__estrellas{
  color:var(--marca); letter-spacing:3px; font-size:1.3rem; line-height:1;
}
.resenas__total{ display:block; color:var(--tinta); font-weight:600; font-size:1rem; margin-top:7px; }
.resenas__nota a{
  display:inline-block; margin-top:14px; font-weight:600; font-size:.93rem;
  color:var(--marca-texto);
}
.resenas__fuente{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--linea-suave);
  font-size:.87rem; color:var(--tinta-45);
}
.valoracion__foto{ margin:0; }
.valoracion__foto img{
  display:block; width:100%; aspect-ratio:16/11; object-fit:cover;
  object-position:center 58%; border-radius:var(--radio-g);
  background:var(--linea-suave);
}
.valoracion__foto figcaption{ margin-top:10px; font-size:.87rem; color:var(--tinta-45); }

.resenas__lista{ display:grid; gap:16px; margin-top:24px; }
@media (min-width:820px){ .resenas__lista{ grid-template-columns:repeat(3,1fr); } }
.resena{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:20px;
}
.resena__estrellas{ color:var(--marca); letter-spacing:2px; font-size:.92rem; }
.resena__texto{ margin:10px 0 14px; }
.resena__autor{ font-size:.87rem; color:var(--tinta-70); margin:0; }
.resena__autor strong{ color:var(--tinta); }

/* ---------- PRECIOS ---------- */
/* Tres cifras y poco más: si el precio es el dato que faltaba, lo peor que se
   puede hacer es enterrarlo en un párrafo. */

.precios{ padding:44px 0; }

/* La tabla va partida en grupos ("bañeras" / "lavamanos y encimeras"): con
   las siete tarifas en una sola rejilla de tres columnas quedaba una fila
   coja, y además mezclaba dos servicios distintos en la misma lista. */
.precios__grupos > * + *{ margin-top:32px; }
.precios__grupo h3{
  margin:0; font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-45);
}
.precios__lista{ display:grid; gap:10px; margin-top:14px; }
.precios__grupos{ margin-top:24px; }
@media (min-width:760px){
  .precios__lista{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
}

.precio{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  background:var(--plata-luz); border-radius:var(--radio);
  padding:20px 22px; position:relative; overflow:hidden;
}
.precio::before{
  content:""; position:absolute; top:0; left:0;
  width:38px; height:3px; background:var(--marca);
}
@media (min-width:760px){
  .precio{ flex-direction:column; align-items:flex-start; gap:10px; padding:22px; }
}
.precio__que{
  font-family:'Archivo','Inter',sans-serif;
  font-size:1.02rem; letter-spacing:-.01em; color:var(--tinta);
}
.precio__cifra em{
  font-style:normal; font-size:.62em; font-weight:600;
  color:var(--tinta-45); letter-spacing:0; margin-right:.12em;
}
.precio__cifra{
  font-family:'Archivo','Inter',sans-serif;
  font-size:clamp(1.5rem,4.5vw,1.9rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--tinta);
}

.precios__nota{
  margin:18px 0 0; max-width:46em;
  font-size:.92rem; color:var(--tinta-45);
}

/* La garantía comercial, en la página de administradoras: es el dato que
   decide una firma, así que no va suelto dentro de un párrafo. */
.pm__garantia{
  background:var(--plata-luz); border-radius:var(--radio);
  padding:16px 18px; margin:0 0 1em;
  font-weight:600; color:var(--tinta);
  border-left:3px solid var(--marca);
}

/* El precio de partida en la cabecera de una página de servicio. */
.servicio__precio{
  display:inline-block; margin:14px 0 0;
  font-size:.92rem; font-weight:600; color:var(--marca-texto);
}

/* ---------- VÍDEO ---------- */
/* Los clips vienen del móvil de José: 576 px de ancho. No se escalan hacia
   arriba más de la cuenta —subir 576 a 1200 no inventa detalle, solo lo
   emborrona— y no se descarga ni un byte hasta que entran en pantalla. */

.clips{ display:grid; gap:18px; }
@media (min-width:760px){ .clips{ grid-template-columns:repeat(2,1fr); gap:22px; } }

.clip{ margin:0; }
.clip__marco{
  position:relative; border-radius:var(--radio-g); overflow:hidden;
  background:var(--linea-suave);
}
.clip__marco video{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
}
.clip--alto .clip__marco video{ aspect-ratio:9/16; }
.clip figcaption{ margin-top:10px; font-size:.86rem; color:var(--tinta-70); }

/* El botón solo aparece cuando el navegador NO va a reproducir solo:
   con "reducir movimiento" puesto, o si el autoplay falla. */
.clip__play{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(29,29,29,.28); border:0; cursor:pointer;
  color:#fff; width:100%; padding:0;
}
.clip__play[data-visible]{ display:flex; }
.clip__play span{
  display:grid; place-items:center; width:58px; height:58px;
  border-radius:50%; background:var(--marca); color:var(--tinta);
}
.clip__play svg{ width:22px; height:22px; margin-left:3px; fill:currentColor; }

/* En el par de vídeos se reutiliza .pareja, así que hereda las chapas
   Before/After y el redondeo sin duplicar nada. */
.pareja__foto .clip__play{ display:none; }
.pareja__foto .clip__play[data-visible]{ display:flex; }

@media (prefers-reduced-motion:reduce){
  .clip__marco video{ /* se queda en el cartel hasta que lo pidan */ }
}

/* ---------- ZONAS ---------- */
.zonas{ padding:44px 0; }
@media (min-width:900px){ .zonas{ padding:66px 0; } }
.zonas__lista{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.zonas__lista li{
  border:1px solid var(--linea); border-radius:99px;
  padding:7px 15px; font-size:.9rem; color:var(--tinta-70);
}
/* El enlace ocupa la pastilla entera: el margen negativo anula justo el
   padding del li, así se puede pulsar en todo el óvalo y no solo en el texto. */
.zonas__lista a{
  display:block; margin:-7px -15px; padding:7px 15px;
  text-decoration:none; color:inherit;
}
.zonas__nota{ color:var(--tinta-45); font-size:.92rem; margin:0; }

/* ---------- CONTACTO ---------- */
.contacto{ padding:44px 0; background:var(--grafito); color:#fff; }
@media (min-width:900px){ .contacto{ padding:66px 0; } }
.contacto__rejilla{ display:grid; gap:28px; }
@media (min-width:880px){
  .contacto__rejilla{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
}
.contacto__texto p{ color:#c4c4c4; max-width:32em; }
.contacto__directo{ font-size:.97rem; }
.contacto__tel{
  font-weight:700; color:#fff; text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.35);
}
.contacto__horario{ display:block; color:#a3a3a3; font-size:.87rem; margin-top:4px; }

.formulario{
  background:var(--papel); color:var(--tinta);
  border-radius:var(--radio-g); padding:22px;
}
@media (min-width:900px){ .formulario{ padding:28px; } }
.campo{ margin-bottom:15px; }
.campo label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:6px; }
.opcional{ font-weight:400; color:var(--tinta-45); }
.campo input, .campo textarea{
  width:100%; padding:13px 14px; min-height:50px;
  border:1.5px solid var(--linea); border-radius:var(--radio);
  font:inherit; font-size:1rem; color:var(--tinta); background:var(--papel);
}
.campo textarea{ resize:vertical; }
.campo input, .campo textarea{ transition:border-color .18s ease, box-shadow .18s ease; }
.campo input:focus, .campo textarea:focus{
  border-color:var(--acento); outline:none;
  box-shadow:0 0 0 3px var(--marca-luz);
}
.campo input[aria-invalid="true"]{ border-color:var(--aviso); }
.campo__error{ display:block; color:var(--aviso); font-size:.84rem; margin-top:5px; }
.formulario__nota{ font-size:.82rem; color:var(--tinta-45); margin:10px 0 0; text-align:center; }
.formulario__aviso{ margin:12px 0 0; font-size:.93rem; font-weight:600; }
.formulario__aviso:empty{ display:none; }

/* ---------- PIE ---------- */
/* El pie va en plata. Se probó en grafito con la versión clara del logo y el
   logo perdía fuerza: es gris oscuro, y donde recorta es sobre claro.
   Encima del pie está el bloque de contacto, que sí es negro, así que la
   página termina en los tres planos seguidos: papel, negro, plata. */
.pie{
  padding:38px 0 22px;
  background:var(--plata); color:var(--sobre-plata-70);
}
.pie__rejilla{ display:grid; gap:20px; }
@media (min-width:760px){ .pie__rejilla{ grid-template-columns:1fr auto; align-items:start; } }
.pie__logo{ width:150px; margin-bottom:12px; }
.pie__linea{ color:var(--sobre-plata-45); font-size:.9rem; margin:0; max-width:26em; }
.pie__contacto{ display:grid; gap:5px; font-size:.93rem; }
.pie__contacto a{ text-decoration:none; font-weight:600; color:var(--marca-texto); }
.pie__contacto a:hover{ text-decoration:underline; }
.pie__contacto span{ color:var(--sobre-plata-45); }
.pie__legal{
  max-width:var(--ancho); margin:22px auto 0; padding:14px 16px 0;
  border-top:1px solid var(--plata-osc);
  font-size:.82rem; color:var(--sobre-plata-45);
}
.pie__legal a{ color:var(--sobre-plata-70); }

/* El crédito de Integlis. En pantalla ancha se va a la derecha, separado del
   copyright del cliente: son dos cosas distintas y no deben leerse como una.
   En móvil cae debajo, que es donde no estorba. */
.pie__legal{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.pie__autor{ margin-left:auto; }
@media (max-width:560px){ .pie__autor{ margin-left:0; width:100%; } }
.pie__autor a{ font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
.pie__autor a:hover{ color:var(--tinta); border-bottom-color:currentColor; }

/* ---------- BARRA FIJA MÓVIL ---------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(var(--n,2),1fr);
  gap:1px; background:var(--linea);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra__accion{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--barra-alto); padding:10px 8px;
  background:var(--papel); color:var(--tinta);
  font-size:.94rem; font-weight:600; text-decoration:none;
}
.barra__accion svg{ width:19px; height:19px; }
.barra__accion--tel{ color:var(--tinta); }
.barra__accion--wa{ color:#1a8a4d; }
.barra__accion--presu{ background:var(--marca); color:var(--tinta); }

@media (min-width:900px){
  body{ padding-bottom:0; }
  .barra{ display:none; }
}

@media print{
  .barra, .cabecera, .saltar{ display:none; }
}


/* ==========================================================================
   CAPA DE OFICIO
   --------------------------------------------------------------------------
   Todo lo de aquí abajo existe para que la web no parezca salida de una
   plantilla. Dos reglas que me impuse:

   1. Ningún efecto que no comunique algo. Si solo "queda bonito", fuera.
   2. Nada que dependa de JavaScript para que el contenido se lea. Todo lo
      que se mueve va dentro de @supports y arranca desde el estado visible.
   ========================================================================== */

/* ---------- TIPOGRAFÍA CON CARÁCTER --------------------------------------
   Inter en los titulares es la firma de lo generado por defecto. Archivo es
   una grotesca robusta, algo industrial: pega con un oficio y con el logo,
   que ya es una condensada pesada. Inter se queda para el texto corrido,
   que ahí sí es buena. */
h1, h2, h3,
.cifra b, .resenas__cifra, .dato b{
  font-family:'Archivo','Inter',-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:-.033em;
}
h1{ line-height:1.04; }
h2{ line-height:1.07; }
h3{ font-weight:700; letter-spacing:-.018em; }

/* Evita la viuda suelta en los titulares. Detalle pequeño, muy visible. */
h1, h2, .seccion__cab p, .hero__entrada{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---------- TEXTURA ------------------------------------------------------
   Un grano finísimo sobre todo. No se "ve": se nota. Quita la planitud de
   los fondos lisos, que es parte de lo que hace que algo parezca plantilla. */
/* Ruido sutil SOLO en los fondos crema. Nunca sobre las fotos. */
.trabajo, .pasos, .resenas{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* ---------- RITMO DESIGUAL ------------------------------------------------
   El espaciado idéntico en cada sección es lo que delata una plantilla. Aquí
   la densidad cambia a propósito: el trabajo respira, los servicios aprietan. */
@media (min-width:900px){
  .ahorro   { padding:82px 0 70px; }
  .trabajo  { padding:74px 0 88px; }
  .servicios{ padding:58px 0; }
  .pasos    { padding:70px 0 78px; }
  .resenas  { padding:62px 0 70px; }
  .zonas    { padding:66px 0 58px; }
}

/* ---------- ETIQUETAS DE SECCIÓN -----------------------------------------
   Una marca pequeña encima de cada titular. Da jerarquía y orienta, que es
   justo lo que le falta a una página donde todo pesa igual. */
.seccion__cab{ position:relative; }
.seccion__cab::before{
  content:attr(data-etiqueta);
  display:block; margin-bottom:10px;
  font-family:'Inter',sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.075em; text-transform:uppercase;
  color:var(--acento);
}
.seccion__cab:not([data-etiqueta])::before{ display:none; }

/* Una línea corta bajo la etiqueta, del ancho del texto. Detalle de imprenta. */
.seccion__cab[data-etiqueta] h2{ position:relative; }

/* ---------- MICROINTERACCIONES -------------------------------------------
   Respuesta al dedo y al ratón. Nada que se mueva solo. */
.boton{ transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; }

.boton--principal:hover{ background:var(--marca-osc); }
.boton:active{ transform:translateY(1px); }

/* El icono del teléfono se inclina al pasar por encima: señal de que llama. */
.boton svg, .cabecera__tel svg{ transition:transform .22s cubic-bezier(.2,.72,.28,1); }
.boton:hover svg, .cabecera__tel:hover svg{ transform:rotate(-14deg) scale(1.08); }

.servicio{ transition:background .2s ease; }
.servicio:hover{ background:var(--crema); }

.zonas__lista li{ transition:border-color .18s ease, color .18s ease; }
.zonas__lista li:hover{ border-color:var(--acento); color:var(--tinta); }

/* Las fotos sueltas ganan un poco de vida al acercarse el ratón */
.trabajo__mas img{ transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease; }
.trabajo__mas img:hover{ transform:scale(1.035); }

/* ---------- COMPARADOR: PISTA DE ARRASTRE --------------------------------
   El tirador se presenta solo al cargar (lo hace main.js) y esta pista
   desaparece en cuanto el usuario toca. */
.comparador__marco{ cursor:ew-resize; }
.comparador__asa{
  transition:transform .18s cubic-bezier(.2,.72,.28,1), box-shadow .18s ease;
}
.comparador__marco:hover .comparador__asa{
  transform:translate(-50%,-50%) scale(1.09);
  box-shadow:0 5px 20px rgba(0,0,0,.32);
}
.comparador__tirador{ transition:opacity .3s ease; }

.comparador__pista{
  position:absolute; left:50%; bottom:14px; z-index:6;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:99px;
  background:rgba(29,29,29,.78); backdrop-filter:blur(6px);
  color:#fff; font-size:.78rem; font-weight:600; white-space:nowrap;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.comparador__pista[data-oculta]{ opacity:0; transform:translateX(-50%) translateY(6px); }

/* ---------- ENTRADAS AL HACER SCROLL --------------------------------------
   Gated tras @supports: si el navegador no lleva animaciones de scroll, este
   bloque entero se ignora y todo se ve desde el primer pintado. Sin parpadeos
   ni contenido invisible por un JS que no cargó.

   Y solo entran los titulares y las fotos, NO cada bloque de la página: que
   todo aparezca con un fundido es precisamente el tic de las webs generadas. */
/* La única animación ligada al scroll que sobrevive: la cabecera se asienta
   al bajar. No entra nada con fundido — que cada bloque aparezca al scrollear
   es justo lo que hace que una web parezca generada. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes compactar{
      to{ box-shadow:0 1px 0 rgba(29,29,29,.08), 0 10px 26px -22px rgba(29,29,29,.5); }
    }
    .cabecera{
      animation:compactar linear both;
      animation-timeline:scroll();
      animation-range:0 90px;
    }
  }
}

/* Las transiciones entre páginas se quedan fuera: en una navegación entre
   documentos la página que sale se congela hasta que la nueva pinta, y en 4G
   sobre hosting compartido eso es un toque que no responde. Justo en la ruta
   que lleva al teléfono. Se revisará con el TTFB real medido.
   .cabecera { view-transition-name: cabecera; }
   .barra    { view-transition-name: barra; }  */


}


/* ---------- BLOQUE DE LLAMADA --------------------------------------------
   Sustituye al formulario mientras no haya destino configurado. */
.llamada{
  background:var(--papel); color:var(--tinta);
  border-radius:var(--radio-g); padding:30px 24px; text-align:center;
}
.llamada__intro{ color:var(--tinta-70); margin:0 0 10px; }
.llamada__tel{ /* carbón: el dorado sobre blanco no se lee */
  display:inline-block;
  font-family:'Archivo','Inter',sans-serif; font-weight:800;
  font-size:clamp(1.9rem,7vw,2.7rem); letter-spacing:-.03em;
  color:var(--tinta); text-decoration:none; line-height:1.1;
}
.llamada__horario{ color:var(--tinta-45); font-size:.88rem; margin:10px 0 0; }
.formulario__aviso[data-error]{ color:var(--aviso); }


/* ==========================================================================
   MOVIMIENTO
   --------------------------------------------------------------------------
   Un solo gesto para toda la web: la superficie nueva BARRE sobre la vieja.
   Es literalmente lo que hace José, y es lo que ya hace el comparador del
   hero. Repetirlo en todo lo demás es lo que convierte un puñado de
   animaciones sueltas en un sistema.

   Nada de fundido hacia arriba en cada bloque: ahí es donde una web empieza
   a oler a plantilla. Cada tipo de contenido se revela a su manera y con su
   ritmo.

   Todo va ligado al scroll, no disparado por él: el movimiento sigue al dedo
   en vez de reproducir una animación enlatada. Y todo dentro de @supports,
   arrancando desde el estado visible: sin soporte o sin JS no falta nada.
   ========================================================================== */

/* ---------- 1. AL CARGAR: el titular se descubre --------------------------
   Lo primero que se ve. Las tres líneas se descubren de izquierda a derecha,
   escalonadas, como cuando pasa la pistola. */
@media (prefers-reduced-motion: no-preference){
  @supports (clip-path: inset(0 100% 0 0)){
    .hero__texto h1{
      clip-path:inset(0 0 0 0);
      animation:barrer-texto .85s cubic-bezier(.22,.68,.3,1) both;
    }
    .hero__lugar{ animation:barrer-texto .6s cubic-bezier(.22,.68,.3,1) both; }

    /* Mismo arranque en las páginas de servicio: el titular se descubre. */
    .cabeza h1{
      clip-path:inset(0 0 0 0);
      animation:barrer-texto .85s cubic-bezier(.22,.68,.3,1) both;
    }
    .cabeza__rotulo  { animation:barrer-texto .6s cubic-bezier(.22,.68,.3,1) both; }
    .cabeza__entrada { animation:asentar .7s cubic-bezier(.22,.68,.3,1) .28s both; }
    .cabeza__botones { animation:asentar .7s cubic-bezier(.22,.68,.3,1) .42s both; }
    .migas           { animation:asentar .6s cubic-bezier(.22,.68,.3,1) both; }
    .hero__entrada{ animation:asentar .7s cubic-bezier(.22,.68,.3,1) .28s both; }
    .prueba       { animation:asentar .7s cubic-bezier(.22,.68,.3,1) .4s both; }
    .hero__botones{ animation:asentar .7s cubic-bezier(.22,.68,.3,1) .5s both; }
    .hero__puntos { animation:asentar .7s cubic-bezier(.22,.68,.3,1) .58s both; }
  }
}
@keyframes barrer-texto{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 -2% 0 0); }
}
@keyframes asentar-libre{
  from{ opacity:0; translate:0 26px; }
  to  { opacity:1; translate:0 0; }
}

@keyframes asentar{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}

/* Regla que no se rompe: nada de esto toca la barra fija, el teléfono de la
   cabecera ni los botones de llamada. Si un efecto roza la llamada, se cae
   el efecto. */
.barra, .barra *, .cabecera__tel, .cabecera__tel *{ animation:none !important; }


/* ==========================================================================
   FORMULARIO EMERGENTE
   Se abre desde cualquier "Get a free estimate". Usa <dialog> nativo: trae
   gratis el foco atrapado, el cierre con Escape y el fondo inerte.
   Los botones conservan su href al ancla, así que sin JS siguen llevando a
   la sección de contacto.
   ========================================================================== */
.modal{
  width:min(440px, calc(100vw - 32px));
  max-height:min(88vh, 720px);
  padding:0; border:0; border-radius:var(--radio-g);
  background:var(--papel); color:var(--tinta);
  box-shadow:0 24px 70px -20px rgba(0,0,0,.45);
  overflow:visible;
}
.modal::backdrop{ background:rgba(20,20,20,.62); backdrop-filter:blur(2px); }
.modal[open]{ animation:modal-entra .26s cubic-bezier(.2,.72,.28,1) both; }
.modal[open]::backdrop{ animation:modal-fondo .26s ease both; }
@keyframes modal-entra{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
@keyframes modal-fondo{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .modal[open], .modal[open]::backdrop{ animation:none; }
}

.modal__cerrar-form{ position:absolute; top:0; right:0; margin:0; }
.modal__cerrar{
  width:42px; height:42px; margin:6px;
  border:0; border-radius:50%; background:transparent;
  font-size:1.7rem; line-height:1; color:var(--tinta-45);
  cursor:pointer;
}
.modal__cerrar:hover{ background:var(--crema); color:var(--tinta); }

.modal__cuerpo{ padding:26px 22px 22px; overflow-y:auto; max-height:inherit; }
@media (min-width:460px){ .modal__cuerpo{ padding:30px 28px 26px; } }
.modal__cuerpo h2{ font-size:1.55rem; margin:0 0 8px; }
.modal__intro{ color:var(--tinta-70); font-size:.95rem; margin-bottom:18px; }
.modal .formulario{ padding:0; border-radius:0; background:none; }

.rotulo{
  font-size:.72rem; font-weight:700; letter-spacing:.075em;
  text-transform:uppercase; color:var(--marca-texto); margin:0 0 6px;
}

.modal__o{
  margin:16px 0 0; padding-top:15px;
  border-top:1px solid var(--linea);
  text-align:center; font-size:.93rem; color:var(--tinta-70);
}
.modal__tel{ font-weight:700; color:var(--tinta); text-decoration:none; border-bottom:2px solid var(--marca); }
.modal__horario{ display:block; font-size:.83rem; color:var(--tinta-45); margin-top:3px; }

/* En móvil el diálogo se pega abajo: más cerca del pulgar. */
@media (max-width:520px){
  .modal{
    margin:0 auto auto; position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:none;
    border-radius:var(--radio-g) var(--radio-g) 0 0;
    max-height:92vh;
  }
  .modal__cuerpo{ padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
  @keyframes modal-entra{ from{ opacity:.6; transform:translateY(100%); } }
}

/* Cierre de la sección de contacto: un solo camino, el diálogo. */
.cierre{
  background:var(--papel); color:var(--tinta);
  border-radius:var(--radio-g); padding:28px 24px; text-align:center;
}
.cierre .boton{ margin-bottom:16px; }
.cierre__o{ color:var(--tinta-45); font-size:.88rem; margin:0 0 4px; }
.cierre__tel{
  display:inline-block;
  font-family:'Archivo','Inter',sans-serif; font-weight:800;
  font-size:clamp(1.7rem,6vw,2.3rem); letter-spacing:-.03em;
  color:var(--tinta); text-decoration:none; line-height:1.1;
  border-bottom:3px solid var(--marca);
}
.cierre__horario{ color:var(--tinta-45); font-size:.86rem; margin:10px 0 0; }


/* ==========================================================================
   PÁGINAS DE SERVICIO
   --------------------------------------------------------------------------
   Cada página tiene una FORMA distinta, no la misma plantilla con otro texto.
   La tina se explica con material y comparación; el azulejo con una tira de
   fotos del arreglo; lavamanos y encimeras a base de bloques cortos.
   Lo que comparten: cabecera, pie, barra fija y el mismo diálogo.
   ========================================================================== */

/* ---------- MIGAS --------------------------------------------------------- */
.migas{
  font-size:.86rem; color:var(--tinta-45);
  padding:14px 0 0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.migas a{ color:var(--tinta-70); text-decoration:none; }
.migas a:hover{ color:var(--tinta); text-decoration:underline; }
.migas span[aria-current]{ color:var(--tinta); font-weight:600; }
.migas__sep{ opacity:.55; }

/* ---------- CABEZA DE PÁGINA ---------------------------------------------- */
.cabeza{ padding:18px 0 34px; }
@media (min-width:900px){ .cabeza{ padding:26px 0 52px; } }
.cabeza__rotulo{
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--marca-texto); margin:22px 0 10px;
  display:flex; align-items:center; gap:9px;
}
.cabeza__rotulo::after{
  content:""; height:2px; width:34px; background:var(--marca); border-radius:2px;
}
.cabeza h1{ font-size:clamp(1.85rem, 5.6vw, 2.95rem); margin-bottom:.38em; max-width:15em; }
.cabeza__entrada{ font-size:1.07rem; color:var(--tinta-70); max-width:38em; margin:0 0 22px; }
.cabeza__botones{ display:flex; flex-wrap:wrap; gap:11px; }
.cabeza__botones .boton{ flex:1 1 auto; min-width:185px; }
@media (min-width:900px){
  .cabeza__rejilla{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
  .cabeza__botones .boton{ flex:0 0 auto; }
}

/* ---------- RAÍL DE MATERIALES -------------------------------------------- */
/* Numerado a mano. Responde a "¿sirve para la mía?", que es la duda real. */
.materiales{ padding:40px 0; background:var(--crema); }
@media (min-width:900px){ .materiales{ padding:62px 0; } }
.materiales__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--linea);
  border-radius:var(--radio-g); overflow:hidden;
}
@media (min-width:820px){ .materiales__lista{ grid-template-columns:repeat(3,1fr); } }
.materiales__lista li{ background:var(--papel); padding:24px 22px; counter-increment:mat; }
.materiales__lista li::before{
  content:"0" counter(mat);
  display:block; margin-bottom:12px;
  font-family:'Archivo','Inter',sans-serif; font-weight:800; font-size:1.06rem;
  color:var(--tinta); letter-spacing:-.02em;
  width:38px; height:38px; border-radius:50%;
  background:var(--marca); display:grid; place-items:center;
}
.materiales__lista{ counter-reset:mat; }
.materiales__lista h3{ margin-bottom:.35em; }
.materiales__lista p{ margin:0; font-size:.94rem; color:var(--tinta-70); }

/* ---------- PROSA --------------------------------------------------------- */
/* Texto seguido de verdad. Una web de oficio se explica escribiendo, no
   repartiendo iconos. */
.prosa{ padding:40px 0; }
@media (min-width:900px){ .prosa{ padding:60px 0; } }
.prosa__rejilla{ display:grid; gap:24px; }
@media (min-width:900px){
  .prosa__rejilla{ grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start; }
  .prosa__rejilla h2{ position:sticky; top:96px; margin:0; }
}
.prosa__cuerpo p{ color:var(--tinta-70); max-width:40em; }
.prosa__cuerpo p:first-child{
  font-size:1.1rem; color:var(--tinta); /* entradilla */
}
.prosa__cuerpo strong{ color:var(--tinta); }
.prosa__cuerpo ul{ margin:0 0 1em; padding:0; list-style:none; display:grid; gap:9px; max-width:40em; }
.prosa__cuerpo ul li{ position:relative; padding-left:24px; color:var(--tinta-70); }
.prosa__cuerpo ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:2px; background:var(--marca); border-radius:2px;
}

/* ---------- FRENTE A FRENTE ----------------------------------------------- */
.frente{ padding:40px 0; background:var(--crema); }
@media (min-width:900px){ .frente{ padding:62px 0; } }
.frente__par{ display:grid; gap:16px; }
@media (min-width:760px){ .frente__par{ grid-template-columns:1fr 1fr; gap:22px; } }
.frente__caja{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio-g); padding:24px 22px;
}
.frente__caja--nuestra{ border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-luz); }
.frente__caja h3{ margin-bottom:.5em; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.frente__sello{
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--marca); color:var(--tinta);
  padding:4px 9px; border-radius:100px;
}
.frente__lista{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.frente__lista li{ display:flex; gap:10px; font-size:.95rem; color:var(--tinta-70); }
.frente__lista li b{ color:var(--tinta); font-weight:600; flex:none; min-width:86px; }
.frente__pie{ margin:18px 0 0; font-size:.92rem; color:var(--tinta-45); }

/* ---------- LÍMITES ------------------------------------------------------- */
/* Decir qué NO se puede hacer es lo que más confianza da, y lo que ninguna
   web de la competencia hace. Sin dorado: esto no es un reclamo. */
.limites{ padding:40px 0; }
@media (min-width:900px){ .limites{ padding:58px 0; } }
.limites__caja{
  border:1px solid var(--linea); border-left:4px solid var(--tinta);
  border-radius:var(--radio); padding:26px 24px; background:var(--papel);
}
@media (min-width:900px){ .limites__caja{ padding:34px 38px; } }
.limites__caja h2{ font-size:clamp(1.35rem,3.4vw,1.85rem); }
.limites__caja > p{ color:var(--tinta-70); max-width:40em; }
.limites__lista{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px; }
@media (min-width:760px){ .limites__lista{ grid-template-columns:1fr 1fr; gap:16px 36px; } }
.limites__lista li{ padding-left:26px; position:relative; }
.limites__lista li::before{
  content:""; position:absolute; left:0; top:.36em;
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--tinta-45);
}
.limites__lista b{ display:block; font-size:.98rem; }
.limites__lista span{ font-size:.91rem; color:var(--tinta-70); }

/* ---------- TIRA DE PROCESO ----------------------------------------------- */
/* A sangre y en scroll horizontal en móvil: son cuatro momentos del MISMO
   arreglo, y verlos en fila es lo que cuenta la historia. */
.tira{ padding:40px 0; background:var(--crema); overflow:hidden; }
@media (min-width:900px){ .tira{ padding:62px 0 66px; } }
.tira__carril{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:12px; margin:0; padding:0 16px 14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
@media (min-width:760px){
  .tira__carril{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr);
    overflow:visible; padding:0; gap:14px;
    width:100%; max-width:var(--ancho); margin:0 auto;
  }
}
.tira__paso{ margin:0; scroll-snap-align:start; counter-increment:tira; }
.tira__carril{ counter-reset:tira; }
.tira__foto{ position:relative; border-radius:var(--radio); overflow:hidden; background:var(--linea-suave); }
.tira__foto img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.tira__num{
  position:absolute; left:10px; top:10px;
  width:30px; height:30px; border-radius:50%;
  background:var(--marca); color:var(--tinta);
  display:grid; place-items:center;
  font-family:'Archivo','Inter',sans-serif; font-weight:800; font-size:.88rem;
}
.tira__paso figcaption{ margin-top:10px; font-size:.9rem; color:var(--tinta-70); }
.tira__paso b{ display:block; color:var(--tinta); font-size:.95rem; margin-bottom:2px; }
.tira__nota{ margin:18px auto 0; max-width:var(--ancho); padding:0 16px; color:var(--tinta-45); font-size:.92rem; }

/* ---------- DÚO (foto + texto alternando) --------------------------------- */
.duo{ padding:40px 0; }
@media (min-width:900px){ .duo{ padding:56px 0; } }
.duo__rejilla{ display:grid; gap:22px; align-items:center; }
@media (min-width:860px){
  .duo__rejilla{ grid-template-columns:1fr 1fr; gap:52px; }
  .duo--girado .duo__foto{ order:2; }
}
.duo__foto{ margin:0; }
.duo__foto img{
  display:block; width:100%; height:auto;
  border-radius:var(--radio-g); aspect-ratio:4/5; object-fit:cover;
}
/* Sin tope, en pantalla grande la foto pasa de 700 px de alto y se come el
   texto que va al lado. La foto acompaña, no manda. */
@media (min-width:860px){
  .duo__foto img{ max-height:min(62vh, 520px); }
}
.duo__foto figcaption{ margin-top:10px; font-size:.86rem; color:var(--tinta-45); }
.duo__texto h2{ font-size:clamp(1.4rem,3.6vw,2rem); }
.duo__texto p{ color:var(--tinta-70); max-width:36em; }

/* ---------- FAQ ----------------------------------------------------------- */
.faq{ padding:40px 0; background:var(--crema); }
@media (min-width:900px){ .faq{ padding:62px 0; } }
.faq__lista{ max-width:46em; border-top:1px solid var(--linea); }
.faq__item{ border-bottom:1px solid var(--linea); }
.faq__item summary{
  list-style:none; cursor:pointer;
  padding:17px 34px 17px 0; position:relative;
  font-weight:600; font-size:1.01rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--tinta-45); border-bottom:2px solid var(--tinta-45);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__item summary:hover{ color:var(--marca-texto); }
.faq__item p{ margin:0 0 17px; color:var(--tinta-70); max-width:40em; }

/* ---------- OTROS SERVICIOS ----------------------------------------------- */
/* Una sola pareja: se queda a su ancho, no ocupa un tercio con dos huecos. */
@media (min-width:860px){
  .parejas--una{ grid-template-columns:minmax(0,540px); }
  /* El par de vídeo se deja algo más ancho, pero no tanto como para escalar
     los 576 px de origen hasta que se noten: 640 deja cada clip en 318. */
  .parejas--video{ grid-template-columns:minmax(0,640px); }
}

.otros{ padding:38px 0 46px; }
.otros h2{ font-size:1.25rem; margin-bottom:16px; }
.otros__lista{ display:grid; gap:1px; background:var(--linea); border-radius:var(--radio-g); overflow:hidden; }
@media (min-width:700px){ .otros__lista{ grid-template-columns:repeat(3,1fr); } }
.otros__lista a{
  background:var(--papel); padding:20px; text-decoration:none; color:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:background .2s ease;
}
.otros__lista a:hover{ background:var(--crema); }
.otros__lista b{ font-weight:600; }
.otros__lista span{ color:var(--marca-texto); font-size:1.1rem; line-height:1; }

/* ---------- TARJETAS DE SERVICIO ENLAZADAS (portada) ---------------------- */
a.servicio{ display:block; text-decoration:none; color:inherit; }
a.servicio h3{ display:flex; align-items:baseline; gap:8px; }
a.servicio h3::after{
  content:"→"; color:var(--marca-texto); font-size:.92em;
  transition:transform .22s cubic-bezier(.2,.72,.28,1);
}
a.servicio:hover h3::after{ transform:translateX(4px); }
.servicio--sin-pagina{ background:var(--crema); }

/* ---------- MOVIMIENTO DE LAS PÁGINAS DE SERVICIO -------------------------- */



/* ==========================================================================
   RESTO DEL SITIO
   Índices, ciudades, galería, blog, sobre nosotros y administradoras.
   ========================================================================== */

/* ---------- MAPA DEL PIE -------------------------------------------------- */
.pie__mapa{ border-top:1px solid var(--plata-osc); margin-top:28px; padding-top:26px; }
.pie__mapa-rejilla{ display:grid; gap:22px; }
@media (min-width:640px){ .pie__mapa-rejilla{ grid-template-columns:repeat(3,1fr); gap:28px; } }
.pie__mapa h2{
  font-family:'Inter',sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sobre-plata-45); margin:0 0 10px;
}
.pie__mapa div{ display:grid; gap:7px; }
.pie__mapa a{ text-decoration:none; color:var(--sobre-plata-70); font-size:.92rem; }
.pie__mapa a:hover{ color:var(--tinta); text-decoration:underline; }

/* ---------- ÍNDICES (servicios, ciudades) --------------------------------- */
.hub{ padding:34px 0 46px; }
@media (min-width:900px){ .hub{ padding:40px 0 62px; } }
.hub__rejilla{ display:grid; gap:14px; }
@media (min-width:760px){ .hub__rejilla{ grid-template-columns:1fr 1fr; gap:16px; } }
.hub__tarjeta{
  display:grid; grid-template-columns:1fr; text-decoration:none; color:inherit;
  border:1px solid var(--linea); border-radius:var(--radio-g); overflow:hidden;
  background:var(--papel); transition:border-color .2s ease, transform .2s ease;
}
.hub__tarjeta:hover{ border-color:var(--marca); transform:translateY(-2px); }
.hub__tarjeta img{
  display:block; width:100%; height:180px;
  object-fit:cover; object-position:center 68%;
  background:var(--linea-suave);
}
.hub__texto{ padding:20px 20px 22px; }
.hub__texto h3{ margin-bottom:.35em; display:flex; align-items:baseline; gap:8px; }
.hub__texto h3::after{ content:"→"; color:var(--marca-texto); font-size:.9em; }
.hub__texto p{ margin:0; font-size:.94rem; color:var(--tinta-70); }

/* Rejilla compacta para las 15 ciudades. */
.ciudades{ display:grid; gap:1px; background:var(--linea); border-radius:var(--radio-g); overflow:hidden; }
@media (min-width:600px){ .ciudades{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .ciudades{ grid-template-columns:repeat(3,1fr); } }
.ciudades a{
  background:var(--papel); padding:18px 20px; text-decoration:none; color:inherit;
  display:block; transition:background .2s ease;
}
.ciudades a:hover{ background:var(--crema); }
.ciudades b{ display:block; font-weight:600; margin-bottom:3px; }
.ciudades span{ font-size:.87rem; color:var(--tinta-45); }

/* ---------- FICHA DE CIUDAD ----------------------------------------------- */
.ficha{ border-block:1px solid var(--linea-suave); background:var(--crema); }
.ficha__fila{ display:grid; gap:1px; background:var(--linea-suave); }
@media (min-width:640px){ .ficha__fila{ grid-template-columns:repeat(3,1fr); } }
.ficha__dato{ background:var(--crema); padding:18px 16px; }
.ficha__dato b{
  display:block; font-family:'Archivo','Inter',sans-serif; font-weight:800;
  font-size:1.05rem; letter-spacing:-.02em; margin-bottom:3px;
}
.ficha__dato span{ font-size:.86rem; color:var(--tinta-70); }

/* ---------- GALERÍA ------------------------------------------------------- */
.galeria{ padding:34px 0 50px; }
.galeria__rejilla{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (min-width:760px){ .galeria__rejilla{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.galeria__rejilla figure{ margin:0; }
.galeria__rejilla img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radio);
}
.galeria__rejilla figcaption{ margin-top:8px; font-size:.84rem; color:var(--tinta-45); }

/* ---------- ARTÍCULO ------------------------------------------------------ */
.articulo{ padding:26px 0 50px; }
.articulo__cuerpo{ max-width:38em; }
.articulo__cuerpo h2{ font-size:clamp(1.35rem,3.4vw,1.85rem); margin-top:1.6em; }
.articulo__cuerpo h3{ margin-top:1.5em; }
.articulo__cuerpo p{ color:var(--tinta-70); }
.articulo__cuerpo > p:first-of-type{ font-size:1.1rem; color:var(--tinta); }
.articulo__cuerpo strong{ color:var(--tinta); }
.articulo__cuerpo ul, .articulo__cuerpo ol{ color:var(--tinta-70); padding-left:1.15em; }
.articulo__cuerpo li{ margin-bottom:.5em; }
.articulo__cuerpo blockquote{
  margin:1.6em 0; padding:2px 0 2px 20px;
  border-left:3px solid var(--marca);
  font-size:1.06rem; color:var(--tinta);
}
.articulo__meta{ color:var(--tinta-45); font-size:.88rem; margin:0 0 26px; }

/* ---------- FOTOS DE LOS ARTÍCULOS ----------------------------------------
   La portada va algo más ancha que la columna de texto (46em contra 38em):
   se lee como la foto del artículo, no como una ilustración intercalada.
   Las de dentro heredan el ancho de la columna y no hace falta limitarlas. */
.art-foto, .art-par{ margin:0 0 30px; max-width:46em; }
.articulo__cuerpo .art-foto,
.articulo__cuerpo .art-par,
.articulo__cuerpo .art-tira{ margin:30px 0; max-width:none; }

.art-foto img{
  display:block; width:100%; height:auto;
  max-height:min(58vh, 430px); object-fit:cover; object-position:center 58%;
  border-radius:var(--radio-g); background:var(--linea-suave);
}
.art-par__fotos{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border-radius:var(--radio-g); overflow:hidden; background:var(--linea);
}
.art-par__foto{ position:relative; }
.art-par__foto img{
  display:block; width:100%; height:100%;
  aspect-ratio:var(--ratio, 4/5); object-fit:cover;
}
.art-foto figcaption, .art-par figcaption{
  margin-top:10px; font-size:.88rem; line-height:1.55; color:var(--tinta-45);
}

/* La tira de cuatro pasos, dentro del artículo. En móvil son dos filas de
   dos: cuatro en línea a 360 px no se ve nada. */
.art-tira{ display:grid; grid-template-columns:1fr 1fr; gap:10px; counter-reset:paso; }
@media (min-width:620px){ .art-tira{ grid-template-columns:repeat(4,1fr); } }
.art-tira__paso{ margin:0; counter-increment:paso; position:relative; }
.art-tira__paso img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radio); background:var(--linea-suave);
}
.art-tira__paso figcaption{
  margin-top:8px; font-size:.82rem; line-height:1.45; color:var(--tinta-45);
}
@media (min-width:1040px){
  .articulo__cuerpo .art-tira,
  .articulo__cuerpo .art-par{ width:calc(100% + 9em); }
}
.art-tira__paso figcaption::before{
  content:counter(paso,decimal-leading-zero) " ";
  font-weight:700; color:var(--marca-texto);
}

.blog__lista{ display:grid; gap:14px; }
@media (min-width:760px){ .blog__lista{ grid-template-columns:1fr 1fr; gap:16px; } }
.blog__item{
  display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start;
  border:1px solid var(--linea); border-radius:var(--radio-g); padding:16px;
  text-decoration:none; color:inherit; background:var(--papel);
  transition:border-color .2s ease;
}
@media (min-width:760px){ .blog__item{ grid-template-columns:118px 1fr; padding:18px; } }
.blog__item:hover{ border-color:var(--marca); }
/* La miniatura es decorativa: el titular que tiene al lado ya dice a dónde
   lleva el enlace, así que va con alt vacío y no se lee dos veces. */
.blog__miniatura{
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; object-position:center 55%;
  border-radius:var(--radio); background:var(--linea-suave);
}
.blog__texto{ min-width:0; }
.blog__item h3{ margin:0 0 .4em; font-size:1.02rem; line-height:1.3; }
.blog__item p{ margin:0; font-size:.9rem; color:var(--tinta-70); }
.blog__item .articulo__meta{ margin:0 0 6px; font-size:.78rem; }

/* ---------- ADMINISTRADORAS DE FINCAS ------------------------------------- */
/* Fondo oscuro: es otro cliente y otra conversación, y tiene que notarse. */
.pm{ background:var(--grafito); color:#fff; padding:34px 0 40px; }
@media (min-width:900px){ .pm{ padding:52px 0 58px; } }
.pm h1{ color:#fff; max-width:14em; }
.pm__rotulo{
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--marca); margin:0 0 12px;
}
.pm__entrada{ color:#c4c4c4; font-size:1.07rem; max-width:38em; margin:0 0 22px; }
.pm__botones{ display:flex; flex-wrap:wrap; gap:11px; }
.pm .boton--linea{ background:transparent; color:#fff; border-color:#4d4d4d; }
.pm .boton--linea:hover{ border-color:#fff; }
.pm__cifras{ display:grid; gap:1px; background:#333333; margin-top:32px; border-radius:var(--radio); overflow:hidden; }
@media (min-width:640px){ .pm__cifras{ grid-template-columns:repeat(3,1fr); } }
.pm__cifra{ background:#262626; padding:20px 18px; }
.pm__cifra b{ display:block; font-family:'Archivo','Inter',sans-serif; font-weight:800; font-size:1.04rem; margin-bottom:4px; }
.pm__cifra span{ font-size:.88rem; color:#a3a3a3; }

/* ---------- CINTA DE UNA FRASE -------------------------------------------- */
.cinta{ background:var(--marca-luz); border-block:1px solid #f0e2bd; padding:26px 0; }
.cinta p{
  margin:0; max-width:44em;
  font-family:'Archivo','Inter',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.1rem,2.8vw,1.42rem); line-height:1.3;
}
.cinta small{ display:block; margin-top:8px; font-family:'Inter',sans-serif; font-weight:400; font-size:.88rem; color:var(--tinta-70); letter-spacing:0; }

/* ---------- MOVIMIENTO ---------------------------------------------------- */



/* ==========================================================================
   MÁS VIDA: ZOOM AL PASAR EL CURSOR Y ENTRADAS ESCALONADAS
   --------------------------------------------------------------------------
   Añadido a petición del cliente. Tres condiciones, para que "más dinámica"
   no acabe siendo "parece una plantilla":

   1. El zoom SOLO con marco que recorte. Una foto que crece sin marco se
      come a la de al lado. Donde no hay marco se usa `object-view-box`, que
      acerca el CONTENIDO sin mover la caja, o un realce sin escala.
   2. Las entradas usan el MISMO gesto que ya tiene la web —el barrido y el
      asentado— y van LIGADAS al scroll, no disparadas por él. Sin fundidos
      genéricos y sin retardos falsos: cada elemento tiene su propio tramo.
   3. Todo el hover va bajo @media (hover:hover). En un teléfono el estado de
      "ratón encima" se queda pegado después de tocar, y eso se ve roto.

   Sigue en pie la regla de arriba: nada de esto toca la barra fija ni los
   botones de llamar.
   ========================================================================== */

@media (hover:hover) and (pointer:fine){

  /* ---- 1. Las parejas antes/después: aquí el zoom sí recorta -------------
     .pareja__fotos ya recorta el conjunto, pero cada celda necesita lo suyo
     o la foto que crece invade a su pareja. */
  .pareja__foto{ overflow:hidden; }
  .pareja__foto img,
  .pareja__foto video{
    transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .35s ease;
  }
  .pareja:hover .pareja__foto img,
  .pareja:hover .pareja__foto video{ transform:scale(1.055); }
  /* La de "después" se acerca un pelo más: es la que se ha venido a ver. */
  .pareja:hover .pareja__foto:last-child img{ transform:scale(1.075); }
  /* Y la de "antes" cede un poco de luz, para que la otra gane. */
  .pareja:hover .pareja__foto:first-child img{ filter:brightness(.93); }

  /* ---- 2. Tarjetas con marco: blog, ciudades, servicios ------------------
     .hub__tarjeta ya recorta (overflow:hidden), así que la foto puede crecer
     dentro sin desbordar. La tarjeta sube y la sombra la despega del papel. */
  .hub__tarjeta{
    transition:border-color .2s ease, transform .28s cubic-bezier(.2,.72,.28,1),
               box-shadow .28s ease;
  }
  .hub__tarjeta:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px -16px rgba(0,0,0,.38);
  }
  .hub__tarjeta img{
    transition:transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .hub__tarjeta:hover img{ transform:scale(1.07); }
  /* La flecha del titular se adelanta: dice "esto lleva a algún sitio". */
  .hub__texto h3::after{ transition:transform .25s cubic-bezier(.2,.72,.28,1); }
  .hub__tarjeta:hover .hub__texto h3::after{ transform:translateX(5px); }

  /* Las filas del índice del blog. La miniatura es de 96px y la tarjeta
     tiene 16px de relleno alrededor, así que puede crecer por dentro sin
     salirse; aun así se recorta, que sale más barato que confiar en la suma. */
  .blog__item{
    overflow:hidden;
    transition:border-color .2s ease, transform .24s cubic-bezier(.2,.72,.28,1),
               box-shadow .24s ease;
  }
  .blog__item:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px -16px rgba(0,0,0,.32);
  }
  .blog__miniatura{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
  .blog__item:hover .blog__miniatura{ transform:scale(1.08); }

  /* ---- 3. Fotos SIN marco: se acerca el contenido, no la caja ------------
     object-view-box acerca la imagen por dentro dejando la caja quieta, así
     que no hay nada que pueda desbordar sobre la foto vecina ni sobre el pie
     de foto. Donde el navegador no lo lleve, queda el realce de abajo. */
  .galeria__rejilla img,
  .trabajo__mas img{
    transition:box-shadow .3s ease, filter .3s ease, transform .3s cubic-bezier(.2,.72,.28,1);
  }
  .galeria__rejilla figure:hover img,
  .trabajo__mas img:hover{
    filter:saturate(1.06);
    box-shadow:0 12px 30px -14px rgba(0,0,0,.42);
  }
  @supports (object-view-box: inset(0%)){
    .galeria__rejilla img,
    .trabajo__mas img{
      object-view-box:inset(0%);
      transition:object-view-box .6s cubic-bezier(.2,.7,.3,1),
                 box-shadow .3s ease, filter .3s ease;
    }
    .galeria__rejilla figure:hover img,
    .trabajo__mas img:hover{ object-view-box:inset(4%); transform:none; }
  }
  /* El pie de foto se aclara cuando miras la foto: enlaza los dos. */
  .galeria__rejilla figcaption{ transition:color .3s ease; }
  .galeria__rejilla figure:hover figcaption{ color:var(--tinta); }

  /* ---- 4. Las filas de precio ------------------------------------------
     La cifra es lo que se ha venido a leer: crece ella, no la fila entera. */
  .precio{ transition:background .22s ease; }
  .precio:hover{ background:var(--papel); }
  /* La barrita dorada de la esquina recorre la fila entera. Es el gesto de
     la marca, no un subrayado cualquiera. */
  .precio::before{ transition:width .42s cubic-bezier(.2,.7,.3,1); }
  .precio:hover::before{ width:100%; }
  .precio__cifra{ transition:transform .25s cubic-bezier(.2,.72,.28,1); transform-origin:right center; }
  .precio:hover .precio__cifra{ transform:scale(1.07); }

  /* ---- 5. Las rejillas de enlaces --------------------------------------- */
  .otros__lista span{ transition:transform .24s cubic-bezier(.2,.72,.28,1); }
  .otros__lista a:hover span{ transform:translateX(5px); }

  /* ---- 6. Las reseñas ---------------------------------------------------- */
  .resena{ transition:transform .25s cubic-bezier(.2,.72,.28,1), box-shadow .25s ease; }
  .resena:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -18px rgba(0,0,0,.3); }
}


/* ---------- TOQUES DEL PIE, A 24px ----------------------------------------
   Medido: los enlaces del pie y del mapa del sitio quedaban en 23,5px de
   alto. Google pide 24px para un destino táctil. Medio píxel de diferencia,
   pero es un aviso que sale en su informe y se arregla con una línea. */
.pie__contacto a,
.pie__mapa a,
.pie__legal a{ display:inline-block; min-height:24px; line-height:1.55; }


/* ==========================================================================
   SEGUNDA TANDA: EL RESTO DE LA WEB
   --------------------------------------------------------------------------
   La primera tanda cubrió portada, galería, servicios y blog-índice. Al
   inventariar las 40 páginas quedaban bloques enteros sin nada, y el más
   gordo eran LAS FOTOS DE LOS 14 ARTÍCULOS: ni zoom ni entrada. Un artículo
   con cinco fotos muertas se lee como un documento, no como una web.

   Mismas reglas de siempre:
   · zoom con escala SOLO donde hay marco que recorte; donde no lo hay,
     `object-view-box`, que acerca el contenido sin mover la caja;
   · el que además se levanta con el ratón entra con `asentar-libre`, porque
     una animación con fill:both le gana al :hover si las dos usan `transform`;
   · nada de esto roza la barra fija ni los botones de llamar.
   ========================================================================== */

@media (hover:hover) and (pointer:fine){

  /* ---- Las fotos de los artículos ---------------------------------------
     `.art-par__fotos` recorta el conjunto; cada celda necesita lo suyo o la
     foto que crece invade a su pareja. Igual que en `.pareja__foto`. */
  .art-par__foto{ overflow:hidden; }
  .art-par__foto img{ transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .35s ease; }
  .art-par:hover .art-par__foto img{ transform:scale(1.055); }
  .art-par:hover .art-par__foto:last-child img{ transform:scale(1.075); }
  .art-par:hover .art-par__foto:first-child img{ filter:brightness(.93); }

  /* La foto suelta y los pasos llevan pie debajo, así que no hay marco que
     recorte: se acerca el contenido y la caja no se mueve. */
  .art-foto img,
  .art-tira__paso img,
  .duo__foto img{
    transition:box-shadow .3s ease, filter .3s ease;
  }
  .art-foto:hover img,
  .art-tira__paso:hover img,
  .duo__foto:hover img{
    filter:saturate(1.06);
    box-shadow:0 12px 30px -14px rgba(0,0,0,.4);
  }
  @supports (object-view-box: inset(0%)){
    .art-foto img,
    .art-tira__paso img,
    .duo__foto img{
      object-view-box:inset(0%);
      transition:object-view-box .6s cubic-bezier(.2,.7,.3,1),
                 box-shadow .3s ease, filter .3s ease;
    }
    .art-foto:hover img,
    .art-tira__paso:hover img,
    .duo__foto:hover img{ object-view-box:inset(3.5%); }
  }
  .art-foto figcaption,
  .art-tira__paso figcaption{ transition:color .3s ease; }
  .art-foto:hover figcaption,
  .art-tira__paso:hover figcaption{ color:var(--tinta); }

  /* ---- Las preguntas frecuentes ------------------------------------------
     La flecha gira al abrirse y se adelanta al pasar por encima: dice que
     eso se despliega, que es justo lo que no se sabe mirando un <summary>. */
  .faq__item summary::after{ transition:transform .22s ease, border-color .22s ease; }
  .faq__item summary:hover::after{ border-color:var(--marca-texto); }
  .faq__item{ transition:background .22s ease; }
  .faq__item:hover{ background:var(--papel); }

  /* ---- El raíl de materiales y la tira del proceso ----------------------- */
  .materiales__lista li{
    transition:transform .24s cubic-bezier(.2,.72,.28,1), box-shadow .24s ease;
  }
  .materiales__lista li:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px -16px rgba(0,0,0,.28);
  }
  /* .tira__foto recorta (overflow:hidden), así que aquí el zoom es de verdad. */
  .tira__foto img{ transition:transform .55s cubic-bezier(.2,.7,.3,1); }
  .tira__paso:hover .tira__foto img{ transform:scale(1.07); }

  /* ---- Las cifras de administradoras (sobre grafito) ---------------------
     Aquí el papel es oscuro, así que no vale una sombra: sube el fondo. */
  .pm__cifra{ transition:background .22s ease, transform .24s cubic-bezier(.2,.72,.28,1); }
  .pm__cifra:hover{ background:#303030; transform:translateY(-2px); }

  /* ---- La ficha de las páginas de ciudad --------------------------------- */
  .ficha__dato{ transition:background .22s ease; }
  .ficha__dato:hover{ background:var(--papel); }

  /* ---- Los pasos de "cómo trabajamos" ------------------------------------ */
  .pasos__lista li{ transition:transform .24s cubic-bezier(.2,.72,.28,1); }
  .pasos__lista li:hover{ transform:translateY(-3px); }

  /* ---- Las tarjetas de servicio: la flecha, no la caja -------------------
     Están pegadas unas a otras con una línea entre medias; levantarlas
     rompería esa línea. Se mueve la flecha, que es lo que dice a dónde va. */
  .servicio h3::after{ transition:transform .25s cubic-bezier(.2,.72,.28,1); }
  .servicio:hover h3::after{ transform:translateX(5px); }
}


/* ==========================================================================
   ENTRADAS — REESCRITO EL 26/09/2026
   --------------------------------------------------------------------------
   La versión anterior ligaba la opacidad al SCROLL (animation-timeline).
   Era un error, y se ve en cuanto se mira despacio: si bajas poco a poco, el
   texto se queda clavado a media transparencia mientras lo estás leyendo.
   Eso no parece un efecto, parece que la página está rota.

   Se miró cómo lo resuelven stripe.com, linear.app, vercel.com y apple.com.
   Dato medido, no opinión: NINGUNO liga las entradas al scroll. Las disparan
   UNA VEZ, cuando el elemento entra, y luego corren a su propio ritmo pase lo
   que pase con la rueda del ratón.

   Lo que se copia de ellos:
     · disparo único, nunca se repite;
     · 0,7 s de duración (Stripe usa 0,8 en sus entradas);
     · curva cubic-bezier(.16,1,.3,1) — sale rápido y se posa despacio. Es la
       que usan Stripe y media web decente. Nada de `ease`, que es lo que
       delata una plantilla;
     · RECORRIDO CORTO: 14px. Apple usa 4. La versión anterior tenía 26 y por
       eso se veía aparatoso;
     · y MENOS COSAS animadas. Animar cada `li`, cada enlace del pie y cada
       pastilla de zona es lo que hace que una web parezca un juguete. Aquí
       entran las secciones y los bloques grandes; lo pequeño, quieto.
   ========================================================================== */

:root{
  --curva-entrada:cubic-bezier(.16,1,.3,1);
  --tiempo-entrada:.7s;
}

/* `data-mov` lo pone un script de una línea en el <head>, y SOLO si el
   navegador tiene IntersectionObserver y el visitante no ha pedido menos
   movimiento. Sin JS el atributo no existe, no se oculta nada y la página se
   lee igual: por eso el estado oculto cuelga de él y no al revés. */
html[data-mov] :where(
  .seccion__cab h2, .ahorro h2, .prosa__rejilla h2, .duo__texto h2,
  .limites__caja h2, .articulo__cuerpo h2,
  .cinta p, .prueba, .frente__caja,
  .pareja, .galeria__rejilla figure, .art-foto, .art-par, .duo__foto,
  .precio, .resena, .hub__tarjeta, .blog__item, .faq__item,
  .pasos__lista li, .materiales__lista li, .art-tira__paso,
  .ficha__dato, .pm__cifra, .contacto__rejilla, .cierre
){
  opacity:0;
  transform:translateY(14px);
  will-change:opacity, transform;
}

html[data-mov] .dentro{
  opacity:1;
  transform:none;
  transition:opacity var(--tiempo-entrada) var(--curva-entrada),
             transform var(--tiempo-entrada) var(--curva-entrada);
  will-change:auto;
}

/* Las parejas antes/después conservan el gesto de la casa: la superficie
   nueva BARRE sobre la vieja, que es lo que hace José. Pero ahora también va
   por tiempo, no por scroll. Un poco más lenta: es el momento que la web ha
   venido a enseñar y merece que se vea. */
html[data-mov] .pareja .pareja__foto:last-child img{
  clip-path:inset(0 100% 0 0);
}
html[data-mov] .pareja.dentro .pareja__foto:last-child img{
  clip-path:inset(0 0 0 0);
  transition:clip-path .95s var(--curva-entrada) .12s;
}

/* Y su etiqueta "After" aparece cuando el barrido ya ha pasado por encima. */
html[data-mov] .pareja .pareja__foto:last-child .marca{ opacity:0; }
html[data-mov] .pareja.dentro .pareja__foto:last-child .marca{
  opacity:1;
  transition:opacity .45s ease .75s;
}

/* Un titular no se desplaza: se descubre. Mismo gesto, aplicado a la letra. */
html[data-mov] :where(.seccion__cab h2, .ahorro h2, .prosa__rejilla h2,
                      .duo__texto h2, .limites__caja h2, .articulo__cuerpo h2){
  transform:none;
  clip-path:inset(0 100% -.25em 0);
  opacity:1;
}
html[data-mov] :where(.seccion__cab h2, .ahorro h2, .prosa__rejilla h2,
                      .duo__texto h2, .limites__caja h2, .articulo__cuerpo h2).dentro{
  clip-path:inset(0 -2% -.25em 0);
  transition:clip-path .8s var(--curva-entrada);
}

/* Si el visitante pide menos movimiento, el <head> no pone `data-mov` y nada
   de lo de arriba llega a aplicarse. Esta regla es el cinturón por si acaso. */
@media (prefers-reduced-motion:reduce){
  html[data-mov] :where([class]){
    opacity:1 !important; transform:none !important;
    clip-path:none !important; transition:none !important;
  }
}