/* =====================================================================
   ADY — Hoja de estilos única
   ---------------------------------------------------------------------
   La identidad viene de la web anterior y se conserva a propósito:
     fondo oscuro #222222 · dorado #B19777 · Montserrat + Roboto
   Lo que cambia es el uso. El dorado pasa a ser un acento —filetes,
   antetítulos, una sola llamada por pantalla— en vez de teñir todos los
   títulos, que era lo que hacía que la web pareciera una plantilla.
   Las fuentes van servidas desde el propio dominio: ningún tercero.
   ===================================================================== */

/* ---------- Tipografías propias (sin Google Fonts) ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/roboto-500.woff2') format('woff2')}

:root{
  /* Identidad ADY */
  --oro:#B19777;
  --oro-claro:#C9B08B;
  --tinta:#222222;
  --tinta-honda:#191919;
  --tinta-alta:#2A2A2A;
  --linea:#383838;
  --linea-suave:#2F2F2F;
  --texto:#F1EFEC;
  --texto-2:#B4AFA8;
  --blanco:#FFFFFF;
  --alerta:#E08A7A;

  --tipo-tit:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tipo-txt:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --ancho:1180px;
  --radio:3px;
  --paso:clamp(3.5rem,7vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;background:var(--tinta);color:var(--texto);
  font-family:var(--tipo-txt);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip
}

h1,h2,h3,h4{font-family:var(--tipo-tit);font-weight:700;line-height:1.15;
  color:var(--blanco);margin:0 0 1rem;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,3.45rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem)}
h3{font-size:clamp(1.12rem,1.8vw,1.3rem);font-weight:600;letter-spacing:0}
h4{font-size:1rem;font-weight:600;letter-spacing:.02em}
p{margin:0 0 1.1rem;color:var(--texto-2)}
p.destacado{font-size:1.18rem;color:var(--texto);max-width:46ch}
strong{color:var(--texto);font-weight:500}
img{max-width:100%;height:auto;display:block}

a{color:var(--oro);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--oro-claro);text-decoration:underline}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:2px}

.env{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
.estrecho{max-width:62rem}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--oro);
  color:var(--tinta);padding:.8rem 1.3rem;font-weight:500}
.saltar:focus{left:1rem;top:1rem}
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Antetítulo: el filete dorado que ordena la página ---------- */
.sobre{display:flex;align-items:center;gap:.7rem;font-family:var(--tipo-tit);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin:0 0 .9rem}
.sobre::before{content:"";width:1.9rem;height:1px;background:var(--oro);flex:none}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:100;background:rgba(25,25,25,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--linea-suave)}
.cab-in{display:flex;align-items:center;gap:1.4rem;min-height:76px}
.marca{display:flex;align-items:center;gap:.65rem;font-family:var(--tipo-tit);
  font-weight:700;font-size:1.32rem;letter-spacing:.14em;color:var(--blanco)}
.marca:hover{text-decoration:none;color:var(--blanco)}
.marca img{height:38px;width:auto}
.marca-txt>span{color:var(--oro);font-weight:400;font-size:.62rem;letter-spacing:.16em;
  display:block;line-height:1;margin-top:.2rem;text-transform:uppercase}
.marca-txt{display:flex;flex-direction:column}

.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav>ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav a{display:block;padding:.6rem .8rem;color:var(--texto);font-size:.93rem;font-weight:400}
.nav a:hover,.nav a[aria-current="page"]{color:var(--oro);text-decoration:none}
.nav a[aria-current="page"]{font-weight:500}

/* El apartado en el que está el visitante lleva un filete dorado debajo,
   como en la web que ya está publicada. Se dibuja con un pseudoelemento
   para que no mueva el texto al aparecer. */
.nav>ul>li>a{position:relative}
.nav>ul>li>a::before{content:"";position:absolute;left:.62rem;right:.62rem;bottom:.1rem;
  height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left center;
  transition:transform .22s ease}
.nav>ul>li>a:hover::before{transform:scaleX(1)}
.nav>ul>li>a[aria-current="page"]::before{transform:scaleX(1)}

.desplegable>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}

/* Panel de Servicios: dos columnas, servicios y sectores. Cabe todo el
   catálogo sin añadir un sexto apartado a la cabecera. */
.panel{position:absolute;top:100%;left:0;display:none;gap:2.2rem;
  background:var(--tinta-alta);border:1px solid var(--linea);
  padding:1.3rem 1.5rem;box-shadow:0 22px 50px rgba(0,0,0,.5)}
/* En pantallas de portátil el panel se saldría por la derecha si creciera
   desde el borde izquierdo del apartado: crece hacia la izquierda. */
@media (min-width:901px) and (max-width:1340px){
  /* Se ancla al margen de la cabecera, no al apartado, y así nunca se
     sale de pantalla por estrecha que sea. */
  .nav>ul>li.desplegable{position:static}
  .panel{left:auto;right:clamp(1rem,4vw,2rem)}
}
.desplegable:hover .panel,.desplegable:focus-within .panel{display:flex}
.panel-col{min-width:15.5rem}
.panel-tit{font-family:var(--tipo-tit);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro);margin:0 0 .6rem}
.panel ul{list-style:none;margin:0;padding:0}
.panel a{padding:.48rem .6rem;font-size:.9rem;color:var(--texto-2);border-radius:var(--radio)}
.panel a:hover{color:var(--oro);background:rgba(177,151,119,.08)}
.panel-pie{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--linea-suave)}
.panel-pie a{padding:.3rem .6rem;color:var(--oro);font-size:.88rem}

.tel-cab{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;color:var(--texto);
  font-size:.95rem;padding:.55rem .8rem;white-space:nowrap}
.tel-cab:hover{color:var(--oro);text-decoration:none}
.hamb{display:none;margin-left:auto;background:none;border:1px solid var(--linea);
  color:var(--texto);min-width:46px;min-height:46px;cursor:pointer;font-size:1.2rem;
  border-radius:var(--radio)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.85rem 1.7rem;background:var(--oro);color:#1B1611;
  font-family:var(--tipo-tit);font-weight:600;font-size:.9rem;letter-spacing:.03em;
  border:1px solid var(--oro);border-radius:var(--radio);cursor:pointer;
  transition:background .18s ease,border-color .18s ease}
.btn:hover{background:var(--oro-claro);border-color:var(--oro-claro);color:#1B1611;text-decoration:none}
.btn-linea{background:transparent;color:var(--texto);border-color:var(--linea)}
.btn-linea:hover{background:transparent;border-color:var(--oro);color:var(--oro)}
.btn-bloque{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ---------- Secciones ---------- */
.sec{padding-block:var(--paso)}
.sec-honda{background:var(--tinta-honda)}
.sec-alta{background:var(--tinta-alta)}
.enc{max-width:46rem;margin-bottom:2.6rem}
.enc p{font-size:1.1rem}

/* ---------- Portada ---------- */
.hero{position:relative;padding-block:clamp(4.5rem,11vw,8.5rem);
  border-bottom:1px solid var(--linea-suave);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70rem 34rem at 82% 8%,rgba(177,151,119,.10),transparent 62%)}
.hero .env{position:relative;z-index:1}
.hero h1{max-width:19ch}
.hero .entrada{font-size:clamp(1.05rem,1.9vw,1.24rem);color:var(--texto-2);max-width:52ch;margin-top:1.4rem}
.hero-datos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.6rem;
  padding-top:1.8rem;border-top:1px solid var(--linea-suave)}
.hero-datos span{font-size:.82rem;color:var(--texto-2);border:1px solid var(--linea);
  padding:.42rem .85rem;border-radius:100px}

/* ---------- Rejillas ---------- */
.rej{display:grid;gap:1.4rem}
.r2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.r-texto{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start}

/* ---------- Tarjetas ---------- */
.tar{background:var(--tinta-alta);border:1px solid var(--linea-suave);
  border-radius:var(--radio);padding:1.8rem;display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease}
.tar:hover{border-color:var(--oro);transform:translateY(-2px)}
.tar h3{color:var(--blanco)}
.tar p{font-size:.97rem;margin-bottom:0}
.tar .mas{margin-top:auto;padding-top:1.2rem;font-size:.85rem;font-weight:500;
  font-family:var(--tipo-tit);letter-spacing:.04em;color:var(--oro)}
a.tar{text-decoration:none}
a.tar:hover{text-decoration:none}
.tar-num{font-family:var(--tipo-tit);font-size:.75rem;letter-spacing:.18em;
  color:var(--oro);margin-bottom:.9rem}

/* ---------- Listas ---------- */
.lista{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.lista li{position:relative;padding-left:1.5rem;color:var(--texto-2);font-size:.99rem}
.lista li::before{content:"";position:absolute;left:0;top:.66em;width:.46rem;height:.46rem;
  border-top:1px solid var(--oro);border-right:1px solid var(--oro);transform:rotate(45deg)}
.lista-2{columns:2;column-gap:2rem}
@media (max-width:640px){.lista-2{columns:1}}

/* ---------- Nota / apunte ---------- */
.nota{border-left:2px solid var(--oro);background:rgba(177,151,119,.05);
  padding:1.3rem 1.5rem;border-radius:0 var(--radio) var(--radio) 0}
.nota p:last-child{margin-bottom:0}
.nota strong{color:var(--blanco)}

/* ---------- Franja de llamada ---------- */
.franja{background:var(--tinta-honda);border-block:1px solid var(--linea-suave);
  padding-block:clamp(3rem,6vw,4.5rem);text-align:center}
.franja h2{max-width:22ch;margin-inline:auto}
.franja p{max-width:48ch;margin-inline:auto}
.franja .btns{justify-content:center}

/* ---------- Formularios ---------- */
.form{display:grid;gap:1.3rem;margin-top:2rem}
.campo{display:grid;gap:.45rem}
.campo label{font-size:.88rem;font-weight:500;color:var(--texto);font-family:var(--tipo-tit);letter-spacing:.02em}
.req{color:var(--oro)}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--tinta-honda);border:1px solid var(--linea);
  color:var(--texto);font:inherit;font-size:1rem;padding:.8rem .9rem;
  min-height:50px;border-radius:var(--radio)}
.campo textarea{min-height:9rem;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--oro);outline:none;box-shadow:0 0 0 3px rgba(177,151,119,.16)}
.campo input::placeholder,.campo textarea::placeholder{color:#7C766E}
.campo select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--oro) 50%),
  linear-gradient(135deg,var(--oro) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.dos{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ayuda{font-size:.85rem;color:var(--texto-2)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;color:var(--texto-2)}
.consent input{margin-top:.28rem;width:19px;height:19px;flex:none;accent-color:var(--oro)}

/* Honeypot: fuera de la vista pero accesible a los bots, no a las personas */
.ady-extra{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.aviso-ok{border:1px solid var(--oro);background:rgba(177,151,119,.07);
  padding:1.8rem;border-radius:var(--radio)}
.aviso-err{border:1px solid var(--alerta);background:rgba(224,138,122,.08);
  padding:1.1rem 1.4rem;border-radius:var(--radio);color:var(--texto)}
.aviso-err ul{margin:.4rem 0 0;padding-left:1.2rem}

/* Marca de dato sin confirmar. Se ve. Está para que se rellene. */
.pendiente{background:#5B1F1F;color:#FFE9E4;padding:.12em .5em;border-radius:2px;
  font-size:.85em;font-weight:500;font-family:var(--tipo-tit);letter-spacing:.02em}

/* ---------- Cookies ---------- */
.cookies{position:fixed;inset:auto 1rem 1rem;z-index:150;max-width:38rem;margin-inline:auto;
  background:var(--tinta-alta);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.4rem 1.5rem;box-shadow:0 22px 55px rgba(0,0,0,.55)}
.cookies p{font-size:.92rem;margin-bottom:1rem}
.cookies-btns{display:flex;flex-wrap:wrap;gap:.7rem}
.cookies-btns .btn{min-height:46px;padding:.7rem 1.3rem;font-size:.85rem}

/* ---------- Caja del mapa (no carga hasta que se acepta) ---------- */
.mapa{aspect-ratio:16/10;max-width:100%;background:var(--tinta-honda);
  border:1px solid var(--linea);border-radius:var(--radio);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:1.6rem;text-align:center}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa p{font-size:.9rem;margin:0;max-width:34ch}

/* ---------- Tablas de los textos legales ---------- */
.tabla{width:100%;border-collapse:collapse;margin:1.2rem 0 1.8rem;font-size:.94rem}
.tabla th,.tabla td{border:1px solid var(--linea);padding:.7rem .8rem;text-align:left;vertical-align:top}
.tabla th{background:var(--tinta-alta);color:var(--oro);font-family:var(--tipo-tit);font-weight:600}
.tabla td{color:var(--texto-2)}
.tabla-caja{overflow-x:auto}

/* ---------- Texto legal ---------- */
.legal{max-width:52rem}
.legal h2{font-size:1.35rem;margin-top:2.6rem;color:var(--oro)}
.legal h3{margin-top:1.8rem}
.legal ul{padding-left:1.3rem}
.legal li{color:var(--texto-2);margin-bottom:.4rem}

/* ---------- Pie ---------- */
.pie{background:var(--tinta-honda);border-top:1px solid var(--linea-suave);
  padding-block:clamp(3rem,6vw,4.2rem) 0}
.pie-rej{display:grid;gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pie h4{color:var(--oro);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.pie a{color:var(--texto-2);font-size:.93rem}
.pie a:hover{color:var(--oro)}
.pie-sede{font-size:.93rem;color:var(--texto-2);margin-bottom:1.2rem}
.pie-sede strong{display:block;color:var(--texto);font-family:var(--tipo-tit);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}
.pie-abajo{margin-top:3rem;border-top:1px solid var(--linea-suave);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center;font-size:.86rem;color:var(--texto-2)}
.pie-abajo ul{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem}
.pie-abajo p{margin:0;font-size:.86rem}
.pie-btn{background:none;border:0;color:var(--texto-2);font:inherit;font-size:.86rem;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.pie-btn:hover{color:var(--oro)}

/* ---------- Móvil y tableta estrecha ----------
   La hamburguesa aparece a partir de aquí y NO ANTES: en un ordenador los
   cinco apartados tienen que verse escritos. */
@media (max-width:900px){
  .hamb{display:block}
  .tel-cab{margin-left:auto;order:2}
  .hamb{order:3;margin-left:.4rem}
  .nav{order:4;display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--tinta-honda);border-top:1px solid var(--linea);
    padding:.6rem clamp(1rem,4vw,2rem) 1.6rem;max-height:80vh;overflow-y:auto}
  .nav.abierto{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .nav>ul>li{position:static}
  .nav a{padding:.95rem .2rem;border-bottom:1px solid var(--linea-suave);min-height:50px;
    display:flex;align-items:center}
  .nav>ul>li>a::before{display:none}
  .desplegable>a::after{margin-left:auto}
  .panel{display:block;position:static;border:0;background:transparent;box-shadow:none;
    padding:0 0 .5rem 1rem}
  .panel-col{min-width:0}
  .panel-tit{margin:.7rem 0 .2rem}
  .panel a{border-bottom:0;padding:.7rem .2rem;min-height:44px;display:flex;align-items:center}
  .panel-pie{border-top:0;margin:0;padding-top:0}
  .cab-in{flex-wrap:wrap;position:relative}
}
@media (max-width:620px){
  .btns .btn{width:100%}
  .cookies-btns .btn{width:100%}
  .cookies{inset:auto .6rem .6rem}
  .hero-datos span{font-size:.78rem}
}
@media print{
  .cab,.pie,.cookies,.btns{display:none}
  body{background:#fff;color:#000}
}

/* =====================================================================
   FOTOGRAFÍA, PORTADA CON PASE Y MOVIMIENTO
   ---------------------------------------------------------------------
   El movimiento aquí tiene una regla: no puede estorbar la lectura ni
   retrasar el contenido. Nada aparece con retardo largo, nada se mueve
   dos veces, y todo se apaga entero con prefers-reduced-motion.
   ===================================================================== */

/* ---------- Portada con pase de fotos ---------- */
.hero-pase{position:relative;min-height:clamp(30rem,78vh,44rem);display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--linea-suave)}
.hero-pase .env{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,7vw,5rem)}

.pase{position:absolute;inset:0;z-index:0}
.pase-foto{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.pase-foto.activa{opacity:1}
.pase-foto img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Deriva lenta: da vida sin marear y disimula el grano de una foto de obra */
.pase-foto.activa img{animation:deriva 14s ease-out forwards}
@keyframes deriva{from{transform:scale(1.04)}to{transform:scale(1.11)}}

/* Velo: dos capas. Una oscurece para que el texto se lea siempre; la otra
   tira del dorado de ADY para que la foto no parezca pegada encima. */
.pase::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(18,18,18,.94) 0%,rgba(20,20,20,.86) 42%,rgba(25,25,25,.62) 100%)}
.pase::before{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(60rem 30rem at 78% 12%,rgba(177,151,119,.16),transparent 62%)}

.pase-pies{position:absolute;left:0;right:0;bottom:1.4rem;z-index:4}
.pase-pies .env{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:0}
.pase-pie{font-size:.78rem;color:var(--texto-2);letter-spacing:.02em}
.pase-puntos{display:flex;gap:.5rem;margin-left:auto}
.pase-punto{width:2.2rem;height:3px;border:0;padding:0;background:#4A4A4A;cursor:pointer;
  border-radius:2px;transition:background .25s ease}
.pase-punto[aria-selected="true"]{background:var(--oro)}
.pase-punto:hover{background:var(--oro-claro)}

/* ---------- Aparición al desplazar ---------- */
.revela{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.revela.vista{opacity:1;transform:none}
.revela-2{transition-delay:.08s}
.revela-3{transition-delay:.16s}

/* ---------- Tarjeta con foto ---------- */
.tar-foto{padding:0;overflow:hidden}
.tar-foto .marco{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tinta-honda)}
.tar-foto .marco img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tar-foto:hover .marco img{transform:scale(1.06)}
.tar-foto .cuerpo{padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}

/* ---------- Figura suelta dentro de un texto ---------- */
figure.foto{margin:0}
figure.foto img{width:100%;border:1px solid var(--linea-suave);border-radius:var(--radio)}
figure.foto figcaption{font-size:.84rem;color:var(--texto-2);margin-top:.7rem;line-height:1.5}

/* ---------- Galería de trabajos ---------- */
.galeria{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.galeria figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--linea-suave);
  border-radius:var(--radio);background:var(--tinta-honda)}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figcaption{padding:.9rem 1rem 1.1rem;font-size:.9rem;color:var(--texto-2);line-height:1.5}
.galeria figcaption strong{display:block;color:var(--texto);font-family:var(--tipo-tit);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.galeria .alta{grid-column:span 2}
@media (max-width:640px){.galeria .alta{grid-column:span 1}}

/* ---------- Banda de foto a todo ancho ---------- */
.banda{position:relative;overflow:hidden;border-block:1px solid var(--linea-suave)}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banda::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(18,18,18,.95) 0%,rgba(20,20,20,.84) 50%,rgba(22,22,22,.6) 100%)}
.banda .env{position:relative;z-index:2;padding-block:clamp(3.5rem,8vw,6rem)}
.banda h2{max-width:20ch}
.banda p{max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .pase-foto.activa img{animation:none}
  .tar-foto:hover .marco img,.galeria figure:hover img{transform:none}
}

/* =====================================================================
   LA REGLA EN MOVIMIENTO
   ---------------------------------------------------------------------
   Dos piezas, las dos de la misma familia y las dos hechas solo con CSS:
   ni una imagen, ni un kilobyte de más.

   1. LA REGLA. Una banda estrecha bajo la cabecera con marcas de regla
      que cuelgan del borde y corren despacio, sin parar. Es el mismo
      efecto del ejemplo, pero con la figura dibujada aquí en CSS.

   2. LAS VERTICALES. Cuatro filetes que dividen la portada en tercios,
      como el papel milimetrado de un plano, con un destello dorado que
      recorre dos de ellos de arriba abajo.

   Regla que me he impuesto: el movimiento nunca cruza el texto ni tapa
   una foto, y se apaga entero con prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. LA REGLA ----------
   Lo que se desplaza en el ejemplo es una regla: marcas verticales que
   cuelgan del borde superior, con tres longitudes distintas, corriendo
   despacio hacia un lado.

   Aquí está DIBUJADA, no copiada. El ejemplo usa un PNG de 1920x36
   (shape-1.png) que es material de la plantilla comprada; esto son tres
   degradados repetidos de CSS. Mismo movimiento, figura propia, cero
   bytes de imagen.

   Geometría: marca cada 9 px de 10 px de alto; cada quinta, 18 px; cada
   décima, 26 px. Las tres capas se desplazan 90 px —múltiplo común de
   9, 45 y 90— para que el ciclo cierre sin salto.
   Velocidad: 30 px/s, prácticamente la del ejemplo (32 px/s). */
.regla-cabecera{
  position:relative;height:34px;overflow:hidden;
  background:var(--tinta-honda);
  border-bottom:1px solid var(--linea-suave)
}
.regla-cabecera::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(201,176,139,.85) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(90deg,rgba(201,176,139,.55) 0 1px,transparent 1px 45px),
    repeating-linear-gradient(90deg,rgba(201,176,139,.34) 0 1px,transparent 1px 9px);
  background-size:90px 26px, 45px 18px, 9px 10px;
  background-repeat:repeat-x,repeat-x,repeat-x;
  background-position:0 0,0 0,0 0;
  animation:regla-corre 3s linear infinite
}
/* Los extremos se apagan: una regla que acaba en corte seco canta. */
.regla-cabecera::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--tinta-honda) 0,transparent 9%,
    transparent 91%,var(--tinta-honda) 100%)
}
@keyframes regla-corre{
  from{background-position:0 0,0 0,0 0}
  to{background-position:-90px 0,-90px 0,-90px 0}
}

/* ---------- 2. Las verticales de la portada ---------- */
.reglas{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  max-width:var(--ancho);margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem)
}
.reglas .regla{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.085)
}
.reglas .r1{left:clamp(1rem,4vw,2rem)}
.reglas .r2{left:33.333%}
.reglas .r3{left:66.666%}
.reglas .r4{right:clamp(1rem,4vw,2rem)}

/* El destello que recorre el filete. Dos de las cuatro, y a distinto
   ritmo: si van las cuatro a la vez parece un salvapantallas. */
.reglas .regla::after{
  content:"";position:absolute;left:-1px;width:3px;height:30%;
  background:linear-gradient(180deg,transparent,var(--oro-claro),transparent);
  opacity:.9;transform:translateY(-140%);
  box-shadow:0 0 14px 2px rgba(201,176,139,.5)
}
.reglas .r2::after{animation:regla-baja 7.5s ease-in-out 1.2s infinite}
.reglas .r3::after{animation:regla-baja 9.5s ease-in-out 3.4s infinite}
@keyframes regla-baja{
  0%{transform:translateY(-140%)}
  55%,100%{transform:translateY(520%)}
}

@media (max-width:760px){
  /* En móvil los tercios no se leen: se queda solo el marco. */
  .reglas .r2,.reglas .r3{display:none}
}
@media (prefers-reduced-motion:reduce){
  .regla-cabecera::before{animation:none}
  .reglas .regla::after{display:none}
}

/* =====================================================================
   AJUSTES DE LA CABECERA
   ---------------------------------------------------------------------
   Con siete apartados, el teléfono y la llamada a la acción, a 1440 px
   el menú se partía en dos líneas. Ahora son cinco apartados —los mismos
   que en la web activa— y caben con holgura, así que el menú puede
   respirar: más aire entre apartados y nada que esconder.
   ===================================================================== */
.cab-in{gap:1.2rem}
.nav{margin-left:auto}
.nav>ul{gap:.2rem}
.nav>ul>li>a{white-space:nowrap;padding:.55rem .9rem;font-size:.95rem;letter-spacing:.01em}
.cab-acciones{display:flex;align-items:center;gap:.5rem;flex:none}
.tel-cab{font-size:.92rem;padding:.5rem .55rem}
.btn-cab{min-height:42px;padding:.55rem 1.05rem;font-size:.82rem;white-space:nowrap}
.marca img{height:36px}
.marca{font-size:1.24rem;letter-spacing:.12em}

@media (max-width:1100px){
  /* Antes de apretar los apartados se retira el teléfono escrito: el
     botón sigue ahí y en móvil el teléfono vuelve, más grande. */
  .cab-acciones .tel-cab{display:none}
  .nav>ul>li>a{padding:.55rem .7rem;font-size:.92rem}
}
@media (max-width:980px){
  .nav>ul>li>a{padding:.55rem .55rem;font-size:.89rem}
  .marca-txt>span{display:none}
}
@media (max-width:900px){
  .nav{margin-left:0}
  .cab-acciones{margin-left:auto;order:2}
  .cab-acciones .tel-cab{display:inline-flex}
  .marca-txt>span{display:block}
  .hamb{order:3;margin-left:.3rem}
  .nav{order:4}
}
@media (max-width:520px){
  .cab-acciones .btn-cab{display:none}   /* En pantalla pequeña manda el teléfono */
  .tel-cab{font-size:1rem;font-weight:500}
}

/* ---------- Cabecera en móvil: todo en una sola fila ----------
   Con el logotipo, el rótulo entero, el teléfono y la hamburguesa no
   cabía, y la hamburguesa se caía a una segunda fila. Se recorta el
   rótulo antes que apilar. */
@media (max-width:900px){
  .cab-in{flex-wrap:nowrap;gap:.6rem;min-height:66px}
  .marca{flex:0 1 auto;min-width:0}
  .marca-txt{min-width:0}
  .marca-txt>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cab-acciones{gap:.2rem}
  .hamb{flex:none}
}
@media (max-width:600px){
  .marca img{height:32px}
  .marca{font-size:1.1rem}
  .marca-txt>span{font-size:.55rem;letter-spacing:.1em}
  .tel-cab{padding:.5rem .35rem}
}
@media (max-width:400px){
  /* Lo último que sobra es el rótulo largo; el logotipo y el teléfono se
     quedan siempre. */
  .marca-txt>span{display:none}
}

/* =====================================================================
   LA OBRA POR DELANTE
   ---------------------------------------------------------------------
   La portada tenía 945 palabras y 8 imágenes: seis bloques de tarjetas
   de texto y la galería escondida al 60% de la página. Esto invierte la
   proporción. La foto manda; el texto acompaña.
   ===================================================================== */

/* ---------- Mosaico de obra, a todo ancho ---------- */
.mosaico{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(9rem,15vw,13.5rem)
}
.mosaico figure{
  position:relative;margin:0;overflow:hidden;background:var(--tinta-honda);
  grid-column:span 1;grid-row:span 1
}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.mosaico figure:hover img{transform:scale(1.06)}

/* Velo inferior: el pie se lee siempre, sin tapar la foto. */
.mosaico figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(0deg,rgba(14,14,14,.92),rgba(14,14,14,.55) 45%,transparent);
  font-size:.86rem;color:var(--texto-2);line-height:1.45
}
.mosaico figcaption strong{
  display:block;color:var(--blanco);font-family:var(--tipo-tit);
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.22rem}
.mosaico figcaption strong::before{
  content:"";display:inline-block;width:1.1rem;height:1px;background:var(--oro);
  vertical-align:middle;margin-right:.5rem}
/* El detalle largo solo cuando hay sitio e interés. */
.mosaico .detalle{display:none}
@media (hover:hover){
  .mosaico .g2 figcaption .detalle,.mosaico .g4 figcaption .detalle{display:block;margin-top:.3rem}
}

/* Tamaños. Sin huérfanas: los tramos suman cuatro columnas en cada fila. */
.mosaico .g4{grid-column:span 2;grid-row:span 2}
.mosaico .g2{grid-column:span 2}
@media (max-width:900px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .mosaico .g4{grid-column:span 2;grid-row:span 2}
  .mosaico .g2{grid-column:span 2}
}
@media (max-width:520px){
  .mosaico{grid-template-columns:1fr;grid-auto-rows:13rem}
  .mosaico .g4,.mosaico .g2{grid-column:span 1;grid-row:span 1}
  .mosaico .g4{grid-row:span 2}
}

/* ---------- Tarjeta de servicio con foto ---------- */
.serv{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
a.serv-tar{
  position:relative;display:block;overflow:hidden;background:var(--tinta-honda);
  border:1px solid var(--linea-suave);border-radius:var(--radio);
  min-height:clamp(14rem,22vw,17rem);text-decoration:none;
  transition:border-color .2s ease,transform .2s ease}
a.serv-tar:hover{border-color:var(--oro);transform:translateY(-3px);text-decoration:none}
.serv-tar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
a.serv-tar:hover img{transform:scale(1.07)}
.serv-tar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,13,13,.95) 12%,rgba(15,15,15,.62) 52%,rgba(20,20,20,.3))}
.serv-tar .txt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.4rem 1.4rem 1.3rem;min-height:inherit}
.serv-tar .num{font-family:var(--tipo-tit);font-size:.7rem;letter-spacing:.18em;color:var(--oro);
  margin:0 0 .5rem}
.serv-tar h3{color:var(--blanco);margin:0 0 .4rem;font-size:1.18rem}
.serv-tar p{color:var(--texto-2);font-size:.92rem;margin:0}
.serv-tar .ir{margin-top:.8rem;font-family:var(--tipo-tit);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;color:var(--oro)}

/* ---------- Tira compacta de sectores ---------- */
.tira-sect{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.tira-sect a{display:flex;flex-direction:column;gap:.3rem;padding:1.05rem 1.1rem;
  border:1px solid var(--linea-suave);border-radius:var(--radio);background:var(--tinta-alta);
  text-decoration:none;transition:border-color .18s ease,background .18s ease}
.tira-sect a:hover{border-color:var(--oro);background:rgba(177,151,119,.06);text-decoration:none}
.tira-sect strong{font-family:var(--tipo-tit);font-size:.95rem;font-weight:600;color:var(--blanco)}
.tira-sect span{font-size:.86rem;color:var(--texto-2);line-height:1.45}

/* ---------- Cuatro razones, en una línea cada una ---------- */
.razones{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  margin-top:1.8rem}
.razones div{padding:1.1rem 1.2rem;border-left:2px solid var(--oro);background:rgba(177,151,119,.045)}
.razones h3{font-size:.95rem;margin:0 0 .3rem;color:var(--blanco)}
.razones p{font-size:.89rem;margin:0;color:var(--texto-2)}

/* Un ancho completo para las secciones que van a sangre. */
.a-sangre{max-width:none;padding-inline:0}
@media (prefers-reduced-motion:reduce){
  .mosaico figure:hover img,a.serv-tar:hover img{transform:none}
}

/* ---------- Portada de página interior, con foto ----------
   Las páginas interiores abrían con un bloque de texto sobre fondo liso.
   Ahora abren con una fotografía de obra: la misma identidad, y de un
   vistazo se ve de qué va la página. */
.portada-pag{position:relative;overflow:hidden;border-bottom:1px solid var(--linea-suave);
  min-height:clamp(17rem,34vw,24rem);display:flex;align-items:flex-end}
.portada-pag>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portada-pag::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,14,14,.95) 0%,rgba(17,17,17,.84) 48%,rgba(22,22,22,.52) 100%)}
.portada-pag .env{position:relative;z-index:2;padding-block:clamp(2.6rem,6vw,4.2rem)}
.portada-pag h1{max-width:17ch;margin-bottom:.9rem}
.portada-pag .destacado{max-width:48ch;margin-bottom:0}

/* ---------- Portada con trazado, para Diseño y desarrollo ----------
   Software no se ilustra con una cubierta. Esto es papel milimetrado
   dibujado con degradados, de la misma familia que las reglas. */
.portada-trazado{background:var(--tinta-honda)}
.portada-trazado .trazado{position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(201,176,139,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,176,139,.16) 1px,transparent 1px),
    linear-gradient(rgba(201,176,139,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,176,139,.07) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
  mask-image:radial-gradient(70% 90% at 72% 40%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 90% at 72% 40%,#000 10%,transparent 75%)}
.portada-trazado::after{background:linear-gradient(90deg,rgba(14,14,14,.94) 0%,
  rgba(17,17,17,.7) 52%,rgba(20,20,20,.25) 100%)}

/* El séptimo servicio no lleva foto: se distingue con el trazado. */
a.serv-tar.serv-codigo{background:var(--tinta-honda)}
.serv-codigo .trazado{position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(201,176,139,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,176,139,.2) 1px,transparent 1px),
    linear-gradient(rgba(201,176,139,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,176,139,.08) 1px,transparent 1px);
  background-size:72px 72px,72px 72px,12px 12px,12px 12px;
  mask-image:radial-gradient(75% 85% at 70% 30%,#000 5%,transparent 78%);
  -webkit-mask-image:radial-gradient(75% 85% at 70% 30%,#000 5%,transparent 78%)}

/* =====================================================================
   ANTES Y DESPUÉS
   ---------------------------------------------------------------------
   Dos fotos del mismo sitio, una encima de otra, y un tirador que las
   corta. Es la forma más honesta de enseñar una obra: no hay montaje,
   no hay retoque, se ve el mismo encuadre antes y después.

   Sin JavaScript sigue funcionando: el tirador es un <input type=range>
   de verdad, así que se mueve con el dedo, con el ratón y con las
   flechas del teclado.
   ===================================================================== */
.comparar{position:relative;overflow:hidden;border-radius:var(--radio);
  border:1px solid var(--linea-suave);background:var(--tinta-honda);
  aspect-ratio:4/5;max-height:38rem;margin:0}
.comparar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* La de después se recorta desde la izquierda según el tirador. */
.comparar .despues{clip-path:inset(0 0 0 var(--corte,50%))}

.comparar .etq{position:absolute;top:.8rem;z-index:3;font-family:var(--tipo-tit);
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:2px;background:rgba(14,14,14,.82);color:var(--texto)}
.comparar .etq-a{left:.8rem}
.comparar .etq-d{right:.8rem;color:var(--oro)}

/* El eje de corte, dibujado. */
.comparar .eje{position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;z-index:4;
  background:var(--oro);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 14px rgba(177,151,119,.5)}
.comparar .eje::after{content:"";position:absolute;top:50%;left:50%;width:2.6rem;height:2.6rem;
  transform:translate(-50%,-50%);border:2px solid var(--oro);border-radius:50%;
  background:rgba(14,14,14,.7)}
.comparar .eje::before{content:"";position:absolute;top:50%;left:50%;width:.9rem;height:.9rem;
  transform:translate(-50%,-50%) rotate(45deg);border-left:2px solid var(--oro);
  border-bottom:2px solid var(--oro);z-index:1}

/* El tirador real: invisible, encima de todo, y accesible. */
.comparar input[type=range]{position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;background:none}
.comparar input[type=range]:focus-visible{opacity:1;outline:2px solid var(--oro-claro);
  outline-offset:-4px}

.comparar figcaption{position:absolute;inset:auto 0 0 0;z-index:3;
  padding:2.4rem 1.1rem .95rem;font-size:.86rem;color:var(--texto-2);line-height:1.45;
  background:linear-gradient(0deg,rgba(14,14,14,.92),transparent)}
.comparar figcaption strong{display:block;color:var(--blanco);font-family:var(--tipo-tit);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.22rem}

.cmp-par{display:grid;gap:1.4rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}

/* =====================================================================
   ASISTENTE DE ATENCIÓN
   ---------------------------------------------------------------------
   Abajo a la derecha, por encima de todo menos del aviso de cookies: si
   los dos salieran a la vez se taparían, y el que manda es el de cookies.
   En pantalla pequeña la ventana ocupa casi todo el ancho, porque una
   ventanita de conversación de 300 px en un móvil no la usa nadie.
   ===================================================================== */
.asis{position:fixed;right:clamp(.8rem,2.5vw,1.6rem);bottom:clamp(.8rem,2.5vw,1.6rem);
  z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}

.asis-llamador{display:inline-flex;align-items:center;gap:.55rem;order:3;
  background:var(--oro);color:#1B1611;border:1px solid var(--oro);border-radius:999px;
  padding:.72rem 1.15rem;min-height:50px;cursor:pointer;font-family:var(--tipo-tit);
  font-weight:600;font-size:.88rem;box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:background .18s ease,transform .18s ease}
.asis-llamador:hover{background:var(--oro-claro);transform:translateY(-1px)}
.asis-icono{display:inline-flex}
.asis[data-estado="abierto"] .asis-llamador-txt{display:none}
.asis[data-estado="abierto"] .asis-llamador{padding:.72rem .9rem}

/* --- El globo que saluda --- */
.asis-saludo{order:2;max-width:17.5rem;background:var(--tinta-alta);
  border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1rem;
  box-shadow:0 16px 36px rgba(0,0,0,.45);animation:asis-entra .3s ease both}
.asis-saludo p{margin:0 0 .7rem;font-size:.92rem;color:var(--texto)}
.asis-saludo-btns{display:flex;flex-wrap:wrap;gap:.4rem}
.asis-mini{background:rgba(177,151,119,.12);border:1px solid var(--oro);color:var(--oro);
  border-radius:999px;padding:.42rem .8rem;font:inherit;font-size:.82rem;cursor:pointer}
.asis-mini:hover{background:rgba(177,151,119,.2)}
.asis-mini-tenue{background:transparent;border-color:var(--linea);color:var(--texto-2)}
.asis-mini-tenue:hover{background:transparent;border-color:var(--texto-2);color:var(--texto)}
@keyframes asis-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- La ventana --- */
.asis-ventana{order:1;width:min(23rem,calc(100vw - 2rem));display:flex;flex-direction:column;
  max-height:min(32rem,calc(100vh - 7rem));background:var(--tinta-honda);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55);animation:asis-entra .26s ease both}
.asis-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;
  padding:.9rem 1rem;background:var(--tinta-alta);border-bottom:1px solid var(--linea)}
.asis-tit{margin:0;font-family:var(--tipo-tit);font-weight:600;font-size:.95rem;color:var(--blanco)}
.asis-sub{margin:.15rem 0 0;font-size:.78rem;color:var(--texto-2)}
.asis-sub a{color:var(--oro)}
.asis-cerrar{background:none;border:0;color:var(--texto-2);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:.1rem .3rem}
.asis-cerrar:hover{color:var(--oro)}

.asis-hilo{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.asis-fila{display:flex}
.asis-ellos{justify-content:flex-start}
.asis-visitante{justify-content:flex-end}
.asis-burbuja{max-width:88%;padding:.6rem .85rem;border-radius:var(--radio);
  background:var(--tinta-alta);border:1px solid var(--linea-suave)}
.asis-visitante .asis-burbuja{background:rgba(177,151,119,.14);border-color:rgba(177,151,119,.35)}
.asis-burbuja p{margin:0;font-size:.9rem;line-height:1.55;color:var(--texto)}

.asis-acciones{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.1rem 0 .3rem}
.asis-accion{display:inline-flex;align-items:center;min-height:38px;padding:.4rem .85rem;
  border:1px solid var(--oro);border-radius:999px;color:var(--oro);font-size:.84rem}
.asis-accion:hover{background:rgba(177,151,119,.12);text-decoration:none}
.asis-accion-tel{background:var(--oro);color:#1B1611;font-weight:600}
.asis-accion-tel:hover{background:var(--oro-claro);color:#1B1611}

.asis-puntos{display:flex;gap:.28rem;align-items:center;min-height:1.1rem}
.asis-puntos span{width:6px;height:6px;border-radius:50%;background:var(--texto-2);
  animation:asis-late 1.1s infinite ease-in-out}
.asis-puntos span:nth-child(2){animation-delay:.16s}
.asis-puntos span:nth-child(3){animation-delay:.32s}
@keyframes asis-late{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

.asis-sugerencias{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .4rem}
.asis-sugerencias:empty{display:none}
.asis-chip{background:transparent;border:1px solid var(--linea);color:var(--texto-2);
  border-radius:999px;padding:.4rem .75rem;font:inherit;font-size:.81rem;cursor:pointer;
  min-height:34px;text-align:left}
.asis-chip:hover{border-color:var(--oro);color:var(--oro)}

.asis-pie{display:flex;gap:.4rem;padding:.7rem 1rem;border-top:1px solid var(--linea-suave)}
.asis-pie input{flex:1 1 auto;min-width:0;background:var(--tinta-alta);border:1px solid var(--linea);
  border-radius:var(--radio);color:var(--texto);font:inherit;font-size:.9rem;padding:.6rem .75rem;
  min-height:44px}
.asis-pie input:focus{outline:2px solid var(--oro);outline-offset:1px}
.asis-enviar{flex:none;width:44px;min-height:44px;background:var(--oro);color:#1B1611;
  border:1px solid var(--oro);border-radius:var(--radio);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.asis-enviar:hover{background:var(--oro-claro)}

.asis-letra{margin:0;padding:0 1rem .85rem;font-size:.72rem;line-height:1.5;color:var(--texto-2)}
.asis-letra a{color:var(--texto-2);text-decoration:underline;text-underline-offset:2px}
.asis-letra a:hover{color:var(--oro)}


@media (max-width:620px){
  .asis-ventana{max-height:calc(100vh - 6rem)}
  .asis-llamador-txt{display:none}
  .asis-llamador{padding:.75rem .9rem}
}
@media (prefers-reduced-motion:reduce){
  .asis-saludo,.asis-ventana{animation:none}
  .asis-puntos span{animation:none;opacity:.5}
}

/* =====================================================================
   TRABAJOS: SEIS OBRAS, NO UN MURO DE FOTOS
   ---------------------------------------------------------------------
   Cada obra es foto más texto, uno al lado del otro. Una fotografía sola
   no dice nada: hace bonito y se pasa de largo. Con dos líneas de qué
   había y qué se hizo, la misma fotografía convence.
   ===================================================================== */
.obras{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr));
  margin-top:2.4rem}
.obra{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1.3rem;
  align-items:start}
.obra-foto{position:relative;overflow:hidden;border:1px solid var(--linea-suave);
  border-radius:var(--radio);aspect-ratio:4/5;background:var(--tinta-alta)}
.obra-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.obra:hover .obra-foto img{transform:scale(1.05)}
.obra-tipo{font-family:var(--tipo-tit);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro);margin:0 0 .45rem}
.obra-txt h3{font-size:1.12rem;margin:0 0 .7rem;color:var(--blanco)}
.obra-txt p{font-size:.92rem;line-height:1.62;margin:0 0 .6rem;color:var(--texto-2)}
.obra-txt p:last-child{margin-bottom:0}
.obra-txt strong{color:var(--texto);font-weight:500}

@media (max-width:620px){
  .obra{grid-template-columns:1fr;gap:.9rem}
  .obra-foto{aspect-ratio:16/10}
}

/* ---------- Tarjeta de servicio sin fotografía ----------
   Las fotos de obra viven ahora en un solo sitio de la portada, con su
   pie. Repetir aquí las mismas seis se notaba: la foto no acompañaba al
   servicio, tapaba un hueco. Sin foto, la tarjeta dice lo que es. */
a.serv-tar:not(:has(img)){min-height:0;background:var(--tinta-alta);
  border-left:2px solid var(--oro)}
a.serv-tar:not(:has(img))::after{display:none}
a.serv-tar:not(:has(img)) .txt{justify-content:flex-start;padding:1.35rem 1.4rem 1.4rem;min-height:0}
a.serv-tar:not(:has(img)):hover{transform:translateY(-3px);border-color:var(--oro)}

/* La banda sin fotografía sigue siendo una banda, no un hueco. */
.banda-lisa{background:var(--tinta-alta)}
.banda-lisa::after{background:linear-gradient(90deg,rgba(177,151,119,.08),transparent 55%)}

/* ---------- Migas de pan ----------
   Pequeñas, por encima del titular. Sirven a dos: a quien llega desde
   un buscador a una página interior y no sabe dónde está, y al propio
   buscador, que con ellas dibuja la ruta bajo el título del resultado. */
.migas{margin:0 0 1rem}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;
  list-style:none;margin:0;padding:0;font-size:.8rem}
.migas li{display:flex;align-items:center;gap:.55rem;color:var(--texto-2)}
.migas li+li::before{content:"";width:.34em;height:.34em;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(-45deg);opacity:.75}
.migas a{color:var(--texto-2)}
.migas a:hover{color:var(--oro)}
.migas [aria-current="page"]{color:var(--texto)}

/* ---------- Preguntas frecuentes ----------
   <details> de serie: funciona sin JavaScript, el buscador lee el texto
   aunque esté plegado y el teclado lo abre con Intro. */
.faq{margin-top:2rem;border-top:1px solid var(--linea-suave)}
.faq details{border-bottom:1px solid var(--linea-suave)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  cursor:pointer;list-style:none;padding:1.15rem .2rem;font-family:var(--tipo-tit);
  font-weight:600;font-size:1.02rem;color:var(--blanco)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.5em;height:.5em;margin-top:.45em;
  border-right:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);
  transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--oro)}
.faq p{margin:0 0 1.2rem;padding-right:2.5rem;max-width:68ch;color:var(--texto-2);
  font-size:.95rem;line-height:1.68}

/* ---------- hidden gana siempre ----------
   El navegador aplica a [hidden] un display:none de baja prioridad, que
   cualquier regla nuestra con clase se lleva por delante. Pasó con la
   ventana del asistente: se cerraba de verdad —el atributo cambiaba—
   pero seguía dibujada porque .asis-ventana decía display:flex. Esta
   línea cierra el agujero para todo el sitio de una vez. */
[hidden]{display:none !important}


/* =====================================================================
   PORTADA ANIMADA, MENÚ FIJO Y TRABAJOS REALIZADOS
   ===================================================================== */

/* ---------- Menú siempre a la vista ---------- */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:130}
.cab-in{transition:min-height .25s ease}
.cab.enrollada{background:rgba(25,25,25,.98);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.cab.enrollada .cab-in{min-height:62px}
@media (max-width:900px){ .nav{max-height:calc(100dvh - 76px)} }

/* ---------- Portada ---------- */
.hero-pase{min-height:clamp(35rem,84vh,50rem);align-items:stretch;flex-direction:column;
  justify-content:center;background:var(--tinta-honda)}
.hero-pase .hero-txt{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3rem,6vw,4.5rem) clamp(9rem,13vw,10.5rem)}
.hero-txt h1{max-width:17ch;text-wrap:balance;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.hero-txt .entrada{max-width:44ch;color:var(--texto);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero-txt>*{animation:hero-sube .8s cubic-bezier(.2,.7,.2,1) both}
.hero-txt>:nth-child(2){animation-delay:.1s}
.hero-txt>:nth-child(3){animation-delay:.2s}
.hero-txt>:nth-child(4){animation-delay:.3s}
@keyframes hero-sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.pase{inset:-9% 0 -9% 0;will-change:transform}
.pase-foto{opacity:1;z-index:0;clip-path:inset(0 0 0 100%);transition:none}
.pase-foto.sale{z-index:1;clip-path:inset(0)}
.pase-foto.activa{z-index:2;clip-path:inset(0);transition:clip-path 1.15s cubic-bezier(.76,0,.2,1)}
.pase-foto img{transform-origin:center}
.pase-foto.activa img,.pase-foto.sale img{animation-duration:9s;animation-timing-function:linear;animation-fill-mode:forwards}
.mov-a.activa img,.mov-a.sale img{animation-name:mov-acerca}
.mov-b.activa img,.mov-b.sale img{animation-name:mov-barre}
.mov-c.activa img,.mov-c.sale img{animation-name:mov-aleja}
@keyframes mov-acerca{from{transform:scale(1.02)}to{transform:scale(1.2)}}
@keyframes mov-barre{from{transform:scale(1.18) translateX(4%)}to{transform:scale(1.18) translateX(-4%)}}
@keyframes mov-aleja{from{transform:scale(1.22)}to{transform:scale(1.03)}}

/* Velo más ligero: la foto se tiene que ver, el texto se lee por la izquierda */
.pase::after{z-index:3;background:
  linear-gradient(95deg,rgba(14,14,14,.86) 0%,rgba(16,16,16,.62) 38%,rgba(20,20,20,.12) 72%,rgba(20,20,20,.05) 100%),
  linear-gradient(0deg,rgba(14,14,14,.88) 0%,rgba(14,14,14,0) 34%)}
.pase::before{display:none}

/* Filo dorado que acompaña a la cortina */
.pase-filo{position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--oro-claro);z-index:3;
  opacity:0;pointer-events:none;box-shadow:0 0 26px rgba(201,176,139,.75)}
.pase-filo.corre{animation:filo-corre 1.15s cubic-bezier(.76,0,.2,1)}
@keyframes filo-corre{0%{opacity:1;right:0}92%{opacity:1}100%{opacity:0;right:100%}}

.pase-pies{bottom:1.3rem}
.pase-pies .env{display:block}
.pase-rotulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .75rem;margin-bottom:.8rem}
.pase-rotulo>*{animation:hero-sube .6s .25s cubic-bezier(.2,.7,.2,1) both}
.pase-tipo{font-family:var(--tipo-tit);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-claro)}
.pase-rotulo strong{font-family:var(--tipo-tit);font-weight:600;font-size:1.05rem;color:var(--blanco)}
.pase-mando{display:flex;align-items:center;gap:.7rem}
.pase-tabs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
.pase-tab{appearance:none;background:none;border:0;padding:.35rem 0 0;cursor:pointer;text-align:left;
  color:var(--texto-2);font:500 .72rem/1.3 var(--tipo-txt);min-height:34px;
  display:flex;flex-direction:column;gap:.4rem;justify-content:flex-end;min-width:0}
.pase-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pase-tab:hover,.pase-tab[aria-selected="true"]{color:var(--blanco)}
.pase-tab i{display:block;height:3px;background:rgba(255,255,255,.26);position:relative;overflow:hidden}
.pase-tab i::after{content:"";position:absolute;inset:0;background:var(--oro);transform:scaleX(0);transform-origin:left}
.pase-tab[aria-selected="true"] i{animation:barra-reloj 5.5s linear forwards}
.pase-tab[aria-selected="true"] i::after{animation:barra-llena 5.5s linear forwards}
@keyframes barra-reloj{from{outline-color:transparent}to{outline-color:transparent}}
@keyframes barra-llena{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-pase.pausado .pase-tab i,.hero-pase.pausado .pase-tab i::after,.hero-pase.pausado .pase-foto img{animation-play-state:paused}
.pase-pausa{flex:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);background:rgba(18,18,18,.5);
  border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--blanco)}
.pase-pausa:hover{border-color:var(--oro);color:var(--oro)}
.pase-pausa span{width:9px;height:11px;border-inline:3px solid currentColor}
.pase-pausa[aria-pressed="true"] span{width:0;height:0;border-inline:0;border-block:6px solid transparent;
  border-left:10px solid currentColor;margin-left:3px}

/* ---------- Cinta de trabajos ---------- */
.cinta{overflow:hidden;background:var(--oro);color:#1B1611;padding-block:.72rem}
.cinta-pista{display:flex;width:max-content;animation:cinta-corre 34s linear infinite}
.cinta ul{display:flex;list-style:none;margin:0;padding:0;flex:none}
.cinta li{font-family:var(--tipo-tit);font-weight:600;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;padding-inline:1.5rem;position:relative}
.cinta li::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;
  background:#1B1611;transform:rotate(45deg)}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta-corre{to{transform:translateX(-50%)}}

/* ---------- Trabajos realizados ---------- */
.trab-filtros{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.6rem 0 1.1rem}
.trab-filtro{background:transparent;border:1px solid var(--linea);color:var(--texto-2);min-height:40px;
  padding:.4rem 1rem;border-radius:var(--radio);font:500 .86rem var(--tipo-txt);cursor:pointer}
.trab-filtro:hover{border-color:var(--oro);color:var(--oro)}
.trab-filtro[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:#1B1611}
.trab-rej{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(11rem,18vw,15.5rem);gap:.55rem;grid-auto-flow:dense}
.trab{position:relative;overflow:hidden;padding:0;border:0;background:var(--tinta-alta);cursor:zoom-in;
  display:block;text-align:left;color:var(--blanco);font:inherit;min-width:0;
  animation:trab-entra .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes trab-entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.trab.t-g{grid-column:span 2;grid-row:span 2}
.trab.t-a{grid-row:span 2}
.trab.t-h{grid-column:span 2}
.trab img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.trab:hover img,.trab:focus-visible img{transform:scale(1.07)}
.trab::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,12,.82) 0,rgba(12,12,12,0) 52%)}
.trab-pie{position:absolute;inset:auto 0 0 0;z-index:1;padding:.9rem 1rem;display:block}
.trab-pie strong{display:block;font-family:var(--tipo-tit);font-weight:600;font-size:1rem;line-height:1.3}
.trab.t-g .trab-pie strong{font-size:1.3rem}
.trab-pie span{display:block;font-size:.84rem;line-height:1.4;color:#E4DFD8;margin-top:.15rem}
.trab:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.trab-rej[data-f="fac"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.trab-rej[data-f="fac"] .trab{grid-column:span 1;grid-row:span 2}
@media (max-width:760px){
  .trab-rej,.trab-rej[data-f="fac"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:9.5rem}
  .trab-rej[data-f="fac"] .trab{grid-column:span 2;grid-row:span 2}
  .trab-pie span{display:none}
  .pase-tab span{display:none}
  .pase-tab{min-height:0}
  .hero-pase .hero-txt{padding-block:2.6rem 8rem}
}

/* ---------- Visor ---------- */
.visor{border:0;padding:0;margin:auto;background:transparent;color:var(--blanco);
  width:min(96vw,74rem);max-width:none;max-height:none;overflow:visible}
.visor::backdrop{background:rgba(10,10,10,.92)}
.visor figure{margin:0}
.visor img{display:block;max-width:100%;max-height:80vh;margin-inline:auto;object-fit:contain}
.visor figcaption{padding:.7rem 3.2rem;text-align:center;font-size:.92rem;color:var(--texto-2)}
.visor figcaption strong{display:block;color:var(--blanco);font-family:var(--tipo-tit);font-weight:600}
.visor-ir,.visor-x{position:absolute;z-index:1;width:46px;height:46px;border:1px solid var(--linea);
  border-radius:50%;background:rgba(18,18,18,.82);color:var(--blanco);font-size:1.25rem;line-height:1;cursor:pointer}
.visor-ir:hover,.visor-x:hover{border-color:var(--oro);color:var(--oro)}
.visor-ir{top:calc(50% - 40px)}
.visor-ant{left:.5rem}
.visor-sig{right:.5rem}
.visor-x{top:.5rem;right:.5rem}

/* ---------- Asistente, aviso y flecha: cada uno en su sitio ---------- */
.cookies{inset:auto auto calc(1rem + env(safe-area-inset-bottom,0px)) 1rem;max-width:30rem;margin:0}
.asis{right:calc(clamp(.8rem,2.5vw,1.6rem) + 3.4rem + env(safe-area-inset-right,0px));
  bottom:calc(clamp(.8rem,2.5vw,1.6rem) + var(--alto-aviso,0px) + env(safe-area-inset-bottom,0px))}
.asis[data-estado="abierto"]{right:clamp(.8rem,2.5vw,1.6rem);z-index:140}
.subir{position:fixed;z-index:119;right:calc(clamp(.8rem,2.5vw,1.6rem) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(.8rem,2.5vw,1.6rem) + var(--alto-aviso,0px) + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;border-radius:50%;border:1px solid var(--oro);background:var(--tinta-honda);
  color:var(--oro);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease,color .2s ease}
.subir.visible{opacity:1;visibility:visible;transform:none}
.subir:hover{background:var(--oro);color:#1B1611}
@media (max-width:760px){
  .cookies{inset:auto .6rem calc(.6rem + env(safe-area-inset-bottom,0px));max-width:none}
  .cookies p{font-size:.84rem;margin-bottom:.6rem}
}
@media print{.subir,.cinta,.asis{display:none}}

.pagina{scroll-margin-top:14rem}

/* ---------- Teléfono destacado en los botones de llamada ---------- */
.tel-n{font-size:1.24em;font-weight:700;letter-spacing:.02em;margin-left:.1em;white-space:nowrap}

/* ---------- Testimonios ---------- */
.testi{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));margin-top:1.8rem}
.testi-tar{display:flex;flex-direction:column;justify-content:space-between;gap:1.3rem;min-width:0;
  background:var(--tinta-alta);border-top:2px solid var(--oro);padding:1.5rem 1.5rem 1.4rem}
.testi-txt{margin:0;font-size:1.02rem;line-height:1.62;color:var(--texto)}
.testi-quien{margin:0;font-size:.86rem;color:var(--texto-2)}
.testi-quien strong{display:block;color:var(--blanco);font-family:var(--tipo-tit);font-weight:600;font-size:.92rem}
.testi-vacia{background:transparent;border:1px dashed var(--linea);border-top:1px dashed var(--oro)}
.testi-vacia .testi-txt{color:var(--texto-2)}
.testi-pie{margin:1.2rem 0 0;font-size:.92rem;color:var(--texto-2)}