@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════
   MDD Decoración — hoja de estilo
   Dirección: "la urdimbre y el pliegue".
   Fondo de hilos verticales, paneles que cuelgan de un riel,
   y una cortina azul que abre y cierra la navegación.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────── */
:root{
  /* color */
  --tinta:#16202B;
  --tinta-70:#4A5764;
  --tinta-45:#7C8791;
  --azul:#304F6C;          /* corporativo del cliente */
  --azul-hondo:#1D3145;
  --azul-claro:#6E8AA3;
  --papel:#E8E6E1;
  --papel-2:#F3F2EF;
  --papel-3:#DBD8D1;
  --hilo:#A98F5E;          /* hilo dorado: sólo filetes y versales */
  --hilo-claro:#C6AC77;

  /* tipografía */
  --display:"Italiana",'Times New Roman',serif;
  --texto:"Faustina",Georgia,serif;
  --util:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* medidas */
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --ancho:1360px;
  --ancho-txt:64ch;
  --sec-y:clamp(4.5rem,9vw,9.5rem);
  --radio:2px;

  /* motion */
  --e-suave:cubic-bezier(.22,.61,.36,1);
  --e-tela:cubic-bezier(.62,.02,.2,1);
}

/* ── 2. Reset y base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1.02rem,.42vw + .92rem,1.14rem);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* la urdimbre: hilos verticales finísimos por todo el sitio */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(48,79,108,.055) 0 1px, transparent 1px 34px);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
/* sin z-index en main: crearia contexto de apilado y el visor de la galeria
   quedaria por debajo del boton flotante de WhatsApp. */
main,header,footer{position:relative}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--hilo);outline-offset:3px;border-radius:1px}
::selection{background:var(--azul);color:var(--papel-2)}

.container{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:var(--azul);color:var(--papel-2);
  padding:.7rem 1.1rem;font-family:var(--util);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:.75rem}

/* ── 3. Tipografía ───────────────────────────────────────────── */
.display{
  font-family:var(--display);font-weight:400;
  line-height:.94;letter-spacing:.005em;
  text-wrap:balance;
}
.d-xl{font-size:clamp(2.9rem,7.4vw,6.6rem)}
.d-l {font-size:clamp(2.3rem,5.2vw,4.4rem)}
.d-m {font-size:clamp(1.9rem,3.4vw,3rem)}

.eyebrow{
  font-family:var(--util);font-weight:500;
  font-size:clamp(.66rem,.2vw + .62rem,.74rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--azul);display:flex;align-items:center;gap:.9em;
}
.eyebrow::before{
  content:"";width:clamp(1.6rem,4vw,3.2rem);height:1px;background:var(--hilo);
  transform-origin:left center;flex:none;
}
.eyebrow.on-dark{color:var(--papel-3)}
.eyebrow.centrado{justify-content:center}
.eyebrow.centrado::after{content:"";width:clamp(1.6rem,4vw,3.2rem);height:1px;background:var(--hilo);flex:none}

.lead{font-size:clamp(1.1rem,.6vw + .98rem,1.3rem);line-height:1.58;color:var(--tinta-70);max-width:var(--ancho-txt)}
.prosa p + p{margin-top:1.05em}
.prosa{max-width:var(--ancho-txt)}
.mini{font-family:var(--util);font-size:.78rem;letter-spacing:.06em;color:var(--tinta-45);line-height:1.5}

/* ── 4. Botones ──────────────────────────────────────────────── */
.btn{
  --bg:var(--azul);--fg:var(--papel-2);--bd:var(--azul);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--util);font-weight:500;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:1.05em 1.85em;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  border-radius:var(--radio);cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-suave),border-color .45s var(--e-suave);
}
/* el relleno sube como una tela que se descuelga */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e-tela);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--bg)}
/* el filete reserva su ancho final y crece con transform: así no se
   recalcula el ancho del botón en cada hover (ni da el saltito). */
.btn .fl{width:2.2em;height:1px;background:currentColor;transform:scaleX(.636);transform-origin:left center;transition:transform .45s var(--e-suave)}
.btn:hover .fl,.btn:focus-visible .fl{transform:scaleX(1)}

.btn.ghost{--bg:transparent;--fg:var(--tinta);--bd:rgba(22,32,43,.28)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--papel-2);border-color:var(--tinta)}
.btn.ghost::after{background:var(--tinta)}
.btn.claro{--bg:transparent;--fg:var(--papel-2);--bd:rgba(232,230,225,.42)}
.btn.claro:hover,.btn.claro:focus-visible{color:var(--azul-hondo);border-color:var(--papel-2)}
.btn.claro::after{background:var(--papel-2)}

.enlace{
  font-family:var(--util);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;color:var(--azul);padding-bottom:.3em;
  background-image:linear-gradient(var(--hilo),var(--hilo));
  background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;
  transition:background-size .5s var(--e-suave);
}
.enlace:hover,.enlace:focus-visible{background-size:100% 1px}
.enlace .fl{width:1.3em;height:1px;background:currentColor}

/* ── 5. Cabecera ─────────────────────────────────────────────── */
.head{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background-color .5s var(--e-suave),box-shadow .5s var(--e-suave),transform .5s var(--e-suave);
}
/* El encogido de la cabecera SÍ anima medidas (padding y alto del logo):
   es justo el efecto. Se dispara una sola vez al cruzar los 40px de scroll
   (classList.toggle con estado), no en cada fotograma, y el relayout queda
   contenido en la cabecera, que es fixed y no empuja al documento. */
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.85rem,1.6vw,1.35rem);transition:padding-block .5s var(--e-suave)}
.head.pegado{background:rgba(232,230,225,.93);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(22,32,43,.1)}
.head.pegado .head-in{padding-block:.7rem}
.head.oculto{transform:translateY(-102%)}

/* logotipo: marca MDD + bloque de texto apilado */
.logo{display:flex;align-items:center;gap:clamp(.6rem,1.1vw,.9rem);color:var(--tinta)}
.logo svg{height:clamp(26px,3vw,34px);width:auto;fill:currentColor;transition:height .5s var(--e-suave)}
.head.pegado .logo svg{height:clamp(24px,2.4vw,29px)}
.logo-txt{
  font-family:var(--util);font-weight:400;text-transform:uppercase;
  font-size:clamp(.56rem,.55vw + .42rem,.7rem);letter-spacing:.2em;
  line-height:1.42;color:var(--tinta-70);
  padding-left:clamp(.6rem,1.1vw,.9rem);border-left:1px solid rgba(22,32,43,.2);
}
.logo-txt b{display:block;font-weight:400}
.head.claro .logo,.head.claro .nav a{color:var(--papel-2)}
.head.claro .logo-txt{color:rgba(243,242,239,.8);border-left-color:rgba(243,242,239,.3)}
.head.claro .burger span{background:var(--papel-2)}
.head.pegado.claro .logo,.head.pegado.claro .nav a{color:var(--tinta)}
.head.pegado.claro .logo-txt{color:var(--tinta-70);border-left-color:rgba(22,32,43,.2)}
.head.pegado.claro .burger span{background:var(--tinta)}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.1vw,2.1rem)}
.nav a{
  font-family:var(--util);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding-block:.35rem;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--hilo);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-suave);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{padding:.78em 1.3em;font-size:.72rem}
.nav .btn::after{display:none}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
/* Las dos rayas animan su ancho a propósito (26/18px desiguales -> X).
   Van dentro de un botón de 44x44 fijo, así que el relayout no sale de ahí,
   y pasarlas a scaleX chocaría con el transform-origin que necesita el giro. */
.burger span{display:block;height:1px;background:var(--tinta);transition:width .4s var(--e-suave),transform .4s var(--e-suave),opacity .3s}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(-45deg)}
.burger[aria-expanded="true"] span:nth-child(2){width:26px;transform:translateY(-3.5px) rotate(45deg)}

/* ── 6. La cortina: menú móvil + transición entre páginas ─────── */
.telon{position:fixed;inset:0;z-index:120;pointer-events:none;display:flex}
.telon .hoja{
  flex:1 1 50%;background:var(--azul-hondo);position:relative;
  transform:translate3d(0,0,0);will-change:transform;
}
.telon .hoja::before{ /* trama tejida */
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 5px);
}
.telon .hoja::after{ /* pliegues */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.075) 0px, rgba(255,255,255,.015) 22px,
    rgba(0,0,0,.15) 44px, rgba(255,255,255,.015) 66px, rgba(255,255,255,.075) 88px);
}
.telon .hoja.izq{box-shadow:14px 0 40px rgba(0,0,0,.3)}
.telon .hoja.der{box-shadow:-14px 0 40px rgba(0,0,0,.3)}
/* estado por defecto: abierta (fuera de pantalla) para que sin JS no tape nada */
.telon .hoja.izq{transform:translateX(-101%)}
.telon .hoja.der{transform:translateX(101%)}

/* riel superior de la cortina */
.telon-riel{position:fixed;top:0;left:0;right:0;height:3px;background:var(--hilo);z-index:121;
  transform:scaleX(0);transform-origin:center;pointer-events:none}

/* panel del menú, viaja dentro del telón */
.menu{position:fixed;inset:0;z-index:130;display:none;flex-direction:column;
  padding:clamp(5.5rem,12vh,8rem) var(--gutter) clamp(2rem,5vh,3rem);color:var(--papel-2)}
.menu.visible{display:flex}
.menu-nav{display:flex;flex-direction:column;gap:clamp(.4rem,1.6vh,1rem);margin-top:auto;margin-bottom:auto}
.menu-nav a{font-family:var(--display);font-size:clamp(1.9rem,8.5vw,3.4rem);line-height:1.08;color:var(--papel-2);
  display:block;overflow:hidden}
.menu-nav a span{display:block}
.menu-nav a[aria-current="page"]{color:var(--hilo-claro)}
.menu-pie{display:grid;gap:.5rem;padding-top:1.6rem;border-top:1px solid rgba(243,242,239,.22)}
.menu-pie a{font-family:var(--util);font-size:.84rem;letter-spacing:.06em;color:rgba(243,242,239,.85)}
.menu-pie a:hover{color:var(--hilo-claro)}

body.menu-abierto{overflow:hidden}

/* ── 7. Hero ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero.corto{min-height:min(70svh,600px)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transform-origin:center 40%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,22,32,.6) 0%,rgba(13,22,32,.18) 26%,rgba(13,22,32,.5) 60%,rgba(13,22,32,.9) 100%),
    linear-gradient(90deg,rgba(16,28,40,.86) 0%,rgba(16,28,40,.66) 34%,rgba(16,28,40,.24) 66%,rgba(16,28,40,.1) 100%);
}
.hero-in{width:100%;max-width:var(--ancho);margin-inline:auto;padding:0 var(--gutter) clamp(3.5rem,9vh,7rem);
  color:var(--papel-2);position:relative}
.hero h1{margin:.5rem 0 0;color:var(--papel-2);max-width:15ch}
.hero .lead{color:rgba(243,242,239,.86);margin-top:clamp(1.1rem,2.4vw,1.7rem);max-width:52ch}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.6rem,3.2vw,2.4rem)}

/* datos colgando del borde derecho del hero, como una etiqueta de tejido */
.hero-etiqueta{
  position:absolute;right:var(--gutter);bottom:clamp(3.5rem,9vh,7rem);z-index:2;
  display:grid;gap:.85rem;text-align:right;color:rgba(243,242,239,.9);
  font-family:var(--util);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}
.hero-etiqueta li{padding-right:1.1rem;border-right:1px solid rgba(201,172,119,.6)}
@media (max-width:1080px){.hero-etiqueta{display:none}}

.baja{position:absolute;left:var(--gutter);bottom:clamp(1.2rem,3vh,2rem);z-index:2;
  display:flex;align-items:center;gap:.7rem;color:rgba(243,242,239,.72);
  font-family:var(--util);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.baja i{display:block;width:1px;height:34px;background:linear-gradient(var(--hilo),transparent);position:relative;overflow:hidden}
.baja i::after{content:"";position:absolute;inset:0;background:var(--hilo-claro);animation:hilo 2.4s var(--e-suave) infinite}
@keyframes hilo{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* cabecera interior (páginas que no son la home) */
.portada{padding:clamp(9rem,17vh,13rem) 0 clamp(3rem,6vw,5rem);position:relative}
.portada .display{margin-top:.7rem;max-width:18ch}
.portada .lead{margin-top:1.2rem}
.portada::after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--hilo),rgba(169,143,94,0));
  margin-top:clamp(2.5rem,5vw,4rem);transform-origin:left}

/* ── 8. Secciones ────────────────────────────────────────────── */
.sec{padding-block:var(--sec-y);position:relative}
.sec.ajustada{padding-block:clamp(3rem,6vw,5.5rem)}
.sec.corta-abajo{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec.oscura{background:var(--azul-hondo);color:var(--papel-2)}
.sec.oscura .lead{color:rgba(243,242,239,.78)}
.sec.oscura .display{color:var(--papel-2)}
.sec.papel{background:var(--papel-2)}
.sec-cab{display:grid;gap:clamp(.9rem,2vw,1.3rem);margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-cab.ancha{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end;gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:840px){.sec-cab.ancha{grid-template-columns:1fr}}

/* ── 9. El riel: paneles que cuelgan ─────────────────────────── */
.riel{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2.2rem);
  padding-top:clamp(1.4rem,3vw,2.4rem);position:relative;
}
.riel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(22,32,43,.18);transform-origin:left}
.sec.oscura .riel::before{background:rgba(243,242,239,.24)}
.drop{position:relative;display:flex;flex-direction:column}
/* la anilla del riel */
.drop::before{content:"";position:absolute;top:calc(-1 * clamp(1.4rem,3vw,2.4rem));left:0;
  width:1px;height:clamp(1.4rem,3vw,2.4rem);background:rgba(22,32,43,.28)}
.sec.oscura .drop::before{background:rgba(243,242,239,.4)}
.drop:nth-child(2){margin-top:clamp(1.2rem,3.4vw,3.4rem)}
.drop:nth-child(3){margin-top:clamp(2.2rem,6vw,6.4rem)}
@media (max-width:860px){
  .riel{grid-template-columns:1fr 1fr;gap:1rem}
  .drop:nth-child(2){margin-top:2rem}
  .drop:nth-child(3){margin-top:0}
}
@media (max-width:560px){
  .riel{grid-template-columns:1fr}
  .drop:nth-child(n){margin-top:0}
  .drop + .drop{margin-top:1.6rem}
}

/* marco de foto reutilizable */
.marco{position:relative;overflow:hidden;background:var(--papel-3);border-radius:var(--radio)}
.marco img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-suave)}
.marco.r34{aspect-ratio:3/4}
.marco.r11{aspect-ratio:1/1}
.marco.r43{aspect-ratio:4/3}
.marco.r169{aspect-ratio:16/9}
.marco.r45{aspect-ratio:4/5}
a.tarjeta:hover .marco img,a.tarjeta:focus-visible .marco img{transform:scale(1.045)}

.tarjeta{display:flex;flex-direction:column;gap:1rem;color:inherit}
.tarjeta h3{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.1;font-weight:400}
.tarjeta p{color:var(--tinta-70);font-size:.98rem;line-height:1.55}
.sec.oscura .tarjeta p{color:rgba(243,242,239,.72)}
.tarjeta .cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(22,32,43,.14)}
.sec.oscura .tarjeta .cab{border-bottom-color:rgba(243,242,239,.24)}
.tarjeta .cab .idx{font-family:var(--util);font-size:.68rem;letter-spacing:.16em;color:var(--hilo);flex:none}

/* ── 10. Franja de confianza ─────────────────────────────────── */
.franja{border-block:1px solid rgba(22,32,43,.14);background:var(--papel-2)}
.franja ul{display:grid;grid-template-columns:repeat(4,1fr);}
.franja li{padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1rem,2vw,2rem);border-left:1px solid rgba(22,32,43,.11)}
.franja li:first-child{border-left:0;padding-left:0}
.franja b{display:block;font-family:var(--util);font-weight:500;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.5rem}
.franja span{font-size:.94rem;color:var(--tinta-70);line-height:1.5}
@media (max-width:860px){
  .franja ul{grid-template-columns:1fr 1fr}
  .franja li{padding-inline:0 1rem;border-left:0}
  .franja li:nth-child(even){padding-left:1.2rem;border-left:1px solid rgba(22,32,43,.11)}
  .franja li:nth-child(n+3){border-top:1px solid rgba(22,32,43,.11)}
}

/* ── 11. Bloques de producto (alternos) ──────────────────────── */
.bloque{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,5rem);align-items:center;padding-block:clamp(2.6rem,6vw,5rem);
  border-top:1px solid rgba(22,32,43,.13)}
.bloque:first-of-type{border-top:0;padding-top:0}
.bloque.invertido .bloque-media{order:2}
.bloque-media{position:relative}
.bloque-media .marco{aspect-ratio:4/5}
.bloque-media .sello{
  position:absolute;bottom:0;right:0;transform:translate(18%,26%);
  background:var(--papel);padding:.9rem 1.2rem;border:1px solid rgba(22,32,43,.14);
  font-family:var(--util);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul);
}
.bloque-txt h2{margin-bottom:1rem}
.bloque-txt .lead{margin-bottom:1.6rem}
.especs{display:grid;gap:0;border-top:1px solid rgba(22,32,43,.14);margin-bottom:1.8rem}
.especs li{display:flex;align-items:center;gap:.9rem;padding:.72rem 0;border-bottom:1px solid rgba(22,32,43,.09);
  font-size:.96rem;color:var(--tinta-70)}
.especs li::before{content:"";width:14px;height:1px;background:var(--hilo);flex:none}
@media (max-width:860px){
  .bloque{grid-template-columns:1fr;gap:1.8rem}
  .bloque.invertido .bloque-media{order:0}
  .bloque-media .sello{transform:translate(0,0);bottom:.9rem;right:.9rem}
}

/* ── 12. Proceso numerado (aquí el número sí informa) ─────────── */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(243,242,239,.26)}
.proceso li{padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem) 0;border-left:1px solid rgba(243,242,239,.16);position:relative}
.proceso li:first-child{border-left:0;padding-left:0}
.proceso .n{font-family:var(--util);font-size:.72rem;letter-spacing:.2em;color:var(--hilo-claro);display:block;margin-bottom:1.4rem}
.proceso h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.12;margin-bottom:.7rem}
.proceso p{font-size:.95rem;line-height:1.55;color:rgba(243,242,239,.72)}
@media (max-width:860px){
  .proceso{grid-template-columns:1fr}
  .proceso li{border-left:0;padding-left:0;padding-bottom:1.8rem;border-bottom:1px solid rgba(243,242,239,.16)}
  .proceso li:last-child{border-bottom:0}
}

/* ── 13. Carrusel de proyectos (arrastrable) ─────────────────── */
.carru{position:relative;overflow:hidden;cursor:grab}
.carru.agarrando{cursor:grabbing}
.carru-pista{display:flex;gap:clamp(1rem,2vw,1.8rem);will-change:transform;padding-inline:var(--gutter)}
.carru-item{flex:0 0 clamp(240px,26vw,380px)}
.carru-item .marco{aspect-ratio:3/4;margin-bottom:1rem}
.carru-item h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.15}
.carru-item .mini{margin-top:.3rem}
.carru-barra{height:2px;background:rgba(22,32,43,.13);margin:clamp(1.6rem,3vw,2.4rem) var(--gutter) 0;position:relative}
.carru-barra i{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--azul);transform-origin:left;transform:scaleX(.25)}
.carru-pistas{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin:1rem var(--gutter) 0}
.carru-nav{display:flex;gap:.5rem}
.carru-nav button{width:46px;height:46px;border:1px solid rgba(22,32,43,.22);background:transparent;
  display:grid;place-items:center;cursor:pointer;border-radius:var(--radio);transition:background .35s,color .35s,border-color .35s}
.carru-nav button:hover:not(:disabled){background:var(--azul);border-color:var(--azul);color:var(--papel-2)}
.carru-nav button:disabled{opacity:.32;cursor:not-allowed}
.carru-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}

/* ── 14. Galería ─────────────────────────────────────────────── */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filtro{font-family:var(--util);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.7em 1.15em;border:1px solid rgba(22,32,43,.2);background:transparent;cursor:pointer;
  border-radius:var(--radio);transition:background .35s,color .35s,border-color .35s}
.filtro:hover{border-color:var(--azul);color:var(--azul)}
.filtro[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:var(--papel-2)}

.gal{columns:3;column-gap:clamp(.7rem,1.6vw,1.4rem)}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:520px){.gal{columns:1}}
.gal-item{break-inside:avoid;margin-bottom:clamp(.7rem,1.6vw,1.4rem);position:relative;display:block;width:100%;
  padding:0;border:0;background:var(--papel-3);cursor:zoom-in;border-radius:var(--radio);overflow:hidden}
.gal-item img{width:100%;height:auto;transition:transform 1s var(--e-suave),filter .6s}
.gal-item .pie-foto{display:block;
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1rem .95rem;text-align:left;
  background:linear-gradient(transparent,rgba(15,26,38,.86));color:var(--papel-2);
  font-family:var(--util);font-size:.74rem;letter-spacing:.05em;line-height:1.4;
  opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--e-suave);
}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.04)}
.gal-item:hover .pie-foto,.gal-item:focus-visible .pie-foto{opacity:1;transform:none}
.gal-item.fuera{display:none}
.gal-vacia{padding:3rem 0;color:var(--tinta-45);font-family:var(--util);font-size:.9rem}

/* visor */
.visor{position:fixed;inset:0;z-index:160;background:rgba(15,22,30,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);backdrop-filter:blur(6px)}
.visor.visible{display:flex}
.visor img{max-width:100%;max-height:82vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.visor figcaption{color:rgba(243,242,239,.82);font-family:var(--util);font-size:.82rem;letter-spacing:.05em;
  text-align:center;margin-top:1.2rem}
.visor-x,.visor-p,.visor-s{position:absolute;background:transparent;border:1px solid rgba(243,242,239,.3);
  color:var(--papel-2);width:52px;height:52px;display:grid;place-items:center;cursor:pointer;border-radius:var(--radio);
  transition:background .3s,border-color .3s}
.visor-x:hover,.visor-p:hover,.visor-s:hover{background:rgba(243,242,239,.14);border-color:var(--papel-2)}
.visor-x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.visor-p{left:clamp(.6rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.visor-s{right:clamp(.6rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.visor svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.visor-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}

/* ── 15. Preguntas frecuentes ────────────────────────────────── */
.fx{border-top:1px solid rgba(22,32,43,.16);max-width:900px}
.fx-item{border-bottom:1px solid rgba(22,32,43,.13)}
.fx-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.15rem,2.4vw,1.7rem) 0;font-family:var(--texto);font-weight:500;
  font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.4;color:var(--tinta);transition:color .3s}
.fx-q:hover{color:var(--azul)}
.fx-mas{flex:none;width:20px;height:20px;position:relative;margin-top:.28em}
.fx-mas::before,.fx-mas::after{content:"";position:absolute;background:var(--hilo);transition:transform .45s var(--e-suave)}
.fx-mas::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.fx-mas::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.fx-q[aria-expanded="true"] .fx-mas::after{transform:scaleY(0)}
.fx-q[aria-expanded="true"] .fx-mas::before{transform:rotate(180deg)}
.fx-a{overflow:hidden;height:0}
.fx-a > div{padding-bottom:clamp(1.15rem,2.4vw,1.7rem);padding-right:clamp(0rem,4vw,3rem);
  color:var(--tinta-70);max-width:70ch}

/* ── 16. Contacto ────────────────────────────────────────────── */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.contacto{grid-template-columns:1fr}}
.campo{display:grid;gap:.5rem;margin-bottom:1.15rem}
.campo label{font-family:var(--util);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-70)}
.campo input,.campo textarea,.campo select{
  background:#FAF9F7;border:1px solid rgba(22,32,43,.22);border-radius:var(--radio);
  padding:.95rem 1rem;font-family:var(--texto);font-size:1rem;transition:border-color .3s,box-shadow .3s;width:100%}
.campo textarea{resize:vertical;min-height:130px}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(48,79,108,.13)}
.campo input:user-invalid,.campo textarea:user-invalid{border-color:#9E4B3F}
.campo .ayuda{font-family:var(--util);font-size:.72rem;color:var(--tinta-45)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:560px){.duo{grid-template-columns:1fr}}
.envio{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.aviso{font-family:var(--util);font-size:.76rem;color:var(--tinta-45);margin-top:1rem;line-height:1.55;max-width:52ch}

.ficha{display:grid;gap:0;border-top:1px solid rgba(22,32,43,.16)}
.ficha > div{padding:1.15rem 0;border-bottom:1px solid rgba(22,32,43,.1);display:grid;
  grid-template-columns:auto 1fr;gap:.35rem 1.5rem;align-items:baseline}
.ficha dt{font-family:var(--util);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-45)}
.ficha dd{margin:0;font-size:1.02rem}
.ficha dd a:hover{color:var(--azul)}
.mapa{margin-top:clamp(1.6rem,3vw,2.4rem);aspect-ratio:4/3;background:var(--papel-3);
  border:1px solid rgba(22,32,43,.14);overflow:hidden;border-radius:var(--radio)}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.95);transition:filter .6s}
.mapa:hover iframe{filter:grayscale(0) contrast(1)}

/* ── 17. Llamada final ───────────────────────────────────────── */
.cierre{position:relative;overflow:hidden;isolation:isolate;background:var(--azul-hondo);color:var(--papel-2)}
.cierre-media{position:absolute;inset:0;z-index:-1}
.cierre-media img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cierre-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,49,69,.75),rgba(22,32,43,.9))}
.cierre-in{padding-block:clamp(4.5rem,10vw,8.5rem);text-align:center;display:grid;gap:1.4rem;justify-items:center}
.cierre .lead{color:rgba(243,242,239,.82);margin-inline:auto;text-align:center}
.cierre-acciones{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:.7rem}

/* ── 18. Pie ─────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:rgba(243,242,239,.72);padding-block:clamp(3rem,6vw,4.5rem) 0}
.pie-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:820px){.pie-top{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (max-width:520px){.pie-top{grid-template-columns:1fr}}
.pie .logo{color:var(--papel-2);margin-bottom:1.2rem}
.pie .logo-txt{color:rgba(243,242,239,.65);border-left-color:rgba(243,242,239,.25)}
.pie h4{font-family:var(--util);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hilo-claro);margin-bottom:1.2rem}
.pie ul{display:grid;gap:.65rem}
.pie a:hover{color:var(--papel-2)}
.pie p{max-width:36ch;font-size:.96rem;line-height:1.6}
.pie-bajo{border-top:1px solid rgba(243,242,239,.14);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:center;
  font-family:var(--util);font-size:.72rem;letter-spacing:.06em;color:rgba(243,242,239,.5)}
.pie-bajo a:hover{color:var(--hilo-claro)}
.redes{display:flex;gap:.7rem;margin-top:1.4rem}
.redes a{width:42px;height:42px;border:1px solid rgba(243,242,239,.22);display:grid;place-items:center;
  border-radius:var(--radio);transition:background .35s,border-color .35s,color .35s}
.redes a:hover{background:var(--papel-2);color:var(--tinta);border-color:var(--papel-2)}
.redes svg{width:17px;height:17px;fill:currentColor}

/* ── 19. WhatsApp flotante ───────────────────────────────────── */
.wa{position:fixed;right:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.8rem);z-index:80;
  display:flex;align-items:center;gap:.7rem;background:var(--azul);color:var(--papel-2);
  padding:.85rem 1.1rem;border-radius:999px;box-shadow:0 12px 34px rgba(22,32,43,.3);
  font-family:var(--util);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .35s,transform .35s var(--e-suave),box-shadow .35s}
.wa:hover{background:var(--azul-hondo);transform:translateY(-2px);box-shadow:0 16px 42px rgba(22,32,43,.38)}
.wa svg{width:21px;height:21px;fill:currentColor;flex:none}
.wa span{display:none}
@media (min-width:640px){.wa span{display:block}}

/* ── 20. Estados de animación (sólo si hay JS) ───────────────── */
.js [data-anim]{opacity:0}
.js [data-anim="sube"]{transform:translateY(26px)}
.js [data-anim="tela"]{transform:translateY(40px) scale(.985)}
.js .lin{transform:scaleX(0)}
.lin{height:1px;background:rgba(22,32,43,.16);transform-origin:left}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js [data-anim]{opacity:1 !important;transform:none !important}
  .js .lin{transform:none !important}
  .hero-media img{transform:scale(1)}
}

/* ── 21. Responsive de cabecera ──────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
}

/* ── 22. Impresión ───────────────────────────────────────────── */
@media print{
  .head,.wa,.telon,.menu,.baja,.carru-nav{display:none !important}
  body::before{display:none}
  .sec.oscura,.cierre,.pie{background:#fff !important;color:#000 !important}
}

/* ── 23. Correcciones de apilado con el menú y el visor ──────── */
/* Con el menú abierto la cabecera sube por encima del telón, de modo que
   la hamburguesa se convierte en la X y sigue siendo pulsable. */
body.menu-abierto .head{z-index:140}
body.menu-abierto .head.pegado{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-abierto .head .logo,
body.menu-abierto .head .nav a{color:var(--papel-2)}
body.menu-abierto .head .logo-txt{color:rgba(243,242,239,.8);border-left-color:rgba(243,242,239,.3)}
body.menu-abierto .head .burger span{background:var(--papel-2)}
body.menu-abierto .head.oculto{transform:none}
/* el botón flotante estorba cuando hay una capa abierta */
.wa{transition:background .35s,transform .35s var(--e-suave),box-shadow .35s,opacity .3s}
body.menu-abierto .wa{opacity:0;pointer-events:none}