/* =========================================================
   VILLALUN S.R.L.
   Línea gráfica tomada del logo oficial: rojo, blanco y azul
   sobre carbón, y un sistema de arcos concéntricos abiertos
   a la derecha. De ahí salen el color y las formas redondeadas.
   ========================================================= */

/* ---------- colores de marca (no dependen del tema) ---------- */
:root{
  --rojo:     #D31317;   /* arco exterior y filo del logotipo */
  --rojo-lt:  #F2282A;
  --rojo-dp:  #A50D11;
  --azul:     #007FF6;   /* arco interior y las siglas SRL */
  --azul-lt:  #3FA0FF;
  --azul-dp:  #0A6FD8;

  --radio:  14px;              /* curva de las tarjetas */
  --radio-sm: 10px;
  --wrap: 1240px;

  --f-disp: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- TEMA CLARO (el predeterminado) ---------- */
:root,
:root[data-tema="claro"]{
  color-scheme: light;

  --bg:       #FFFFFF;
  --bg-2:     #F4F5F7;
  --bg-3:     #EAECEF;
  --txt:      #14171A;
  --txt-2:    #4B5257;
  --txt-3:    #5F676D;

  --linea:    rgba(20,23,26,.12);
  --linea-2:  rgba(20,23,26,.22);

  --acento:   #D31317;   /* rojo: llamadas a la acción y numeración */
  --acento-2: #0A6FD8;   /* azul: iconos, enlaces y planos */

  --panel:    #EFF1F4;
  --panel-2:  #E0E4E9;
  --panel-txt:   #14171A;
  --panel-txt-2: #4B5257;
  --linea-p:  rgba(20,23,26,.13);
  --linea-p2: rgba(20,23,26,.24);

  --glow:     rgba(211,19,23,.055);
  --vidrio:   rgba(0,127,246,.10);
  --grano:    .020;
  --nav-vidrio: rgba(255,255,255,.84);
  --sombra:   0 30px 70px -40px rgba(20,23,26,.38);

  --sheen-1:  #14171A;
  --sheen-2:  #D31317;
  --sheen-3:  #A50D11;
}

/* ---------- TEMA OSCURO ---------- */
:root[data-tema="oscuro"]{
  color-scheme: dark;

  --bg:       #0E1013;
  --bg-2:     #16191D;
  --bg-3:     #1E2227;
  --txt:      #ECEEF0;
  --txt-2:    #A2AAB0;
  --txt-3:    #7E888F;

  --linea:    rgba(236,238,240,.13);
  --linea-2:  rgba(236,238,240,.26);

  --acento:   #F2504F;
  --acento-2: #3FA0FF;

  --panel:    #F1F1F1;
  --panel-2:  #E3E5E7;
  --panel-txt:   #14171A;
  --panel-txt-2: #4B5257;
  --linea-p:  rgba(20,23,26,.13);
  --linea-p2: rgba(20,23,26,.24);

  --glow:     rgba(211,19,23,.13);
  --vidrio:   rgba(63,160,255,.14);
  --grano:    .042;
  --nav-vidrio: rgba(14,16,19,.84);
  --sombra:   0 40px 90px -45px rgba(0,0,0,.8);

  --sheen-1:  #FFFFFF;
  --sheen-2:  #F2282A;
  --sheen-3:  #D31317;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:800;line-height:1.02;letter-spacing:-.022em}
p{margin:0}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acento-2);outline-offset:3px}
/* .btn declara display:inline-flex y le gana al display:none del UA */
[hidden]{display:none!important}
::selection{background:var(--rojo);color:#fff}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite symbol{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}

/* grano: le quita el plástico a los fondos planos */
body::after{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:2000;background:var(--bg);
  display:grid;place-items:center;transition:opacity .5s .15s var(--ease),visibility .5s .15s;
}
.loader__bar{
  width:min(240px,42vw);height:2px;background:var(--linea-2);position:relative;overflow:hidden;
}
.loader__bar::after{
  content:'';position:absolute;inset:0;background:var(--rojo);
  transform:scaleX(0);transform-origin:left;animation:load 1s var(--ease) forwards;
}
@keyframes load{to{transform:scaleX(1)}}
body.cargado .loader{opacity:0;visibility:hidden}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
/* El desenfoque va en un pseudo-elemento, no en .nav: un backdrop-filter
   sobre el header lo volvería bloque contenedor del menú fijo de móvil
   y el menú se abriría del alto de la barra. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--nav-vidrio);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav.pegado::before{opacity:1}
.nav.pegado{border-bottom-color:var(--linea)}
.nav__row{display:flex;align-items:center;gap:2rem;height:92px}

.logo{display:flex;align-items:center;flex:none}
/* El logotipo y el arco del medio son blancos, así que sobre fondo claro
   desaparecerían. Por eso hay dos versiones del mismo archivo y se cambia
   por tema: va de fondo, no como <img>, para que sólo baje la que toca. */
.logo__img{
  display:block;width:clamp(88px,9.5vw,108px);aspect-ratio:480/342;
  background:url("../img/marca/logo-claro.webp") left center/contain no-repeat;
}
:root[data-tema="oscuro"] .logo__img{background-image:url("../img/marca/logo.webp")}

/* En el pie hay sitio de sobra y el fondo es oscuro en los dos temas */
.logo--pie{display:block}
.logo--pie img{width:auto;height:clamp(96px,10vw,124px)}

.nav__links{display:flex;gap:1.65rem;margin-left:auto;font-size:.925rem;color:var(--txt-2)}
.nav__links a{position:relative;padding:.3rem 0;transition:color .25s}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acento);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav__links a:hover{color:var(--txt)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links-call{display:none}

.nav__side{display:flex;align-items:center;gap:1rem;margin-left:.5rem}
.tel-link{
  display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--txt-2);
  font-variant-numeric:tabular-nums;transition:color .25s;
}
.tel-link:hover{color:var(--acento-2)}
.burger{display:none;color:var(--txt);padding:.4rem}
.burger .ico{width:26px;height:26px}

/* interruptor de tema: muestra el icono del tema al que se va a cambiar */
.tema{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--linea-2);color:var(--txt-2);
  border-radius:50%;
  transition:color .25s,border-color .25s;
}
.tema:hover{color:var(--acento-2);border-color:var(--acento-2)}
.tema .ico{width:19px;height:19px;stroke-width:1.6}
.tema__sol{display:none}
:root[data-tema="oscuro"] .tema__sol{display:block}
:root[data-tema="oscuro"] .tema__luna{display:none}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.5rem;font-family:var(--f-disp);font-weight:700;font-size:.95rem;
  letter-spacing:.005em;position:relative;overflow:hidden;isolation:isolate;
  border-radius:999px;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.btn--sm{padding:.62rem 1.05rem;font-size:.875rem}
.btn .ico{transition:transform .35s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--wa{background:var(--rojo);color:#fff}
.btn--wa::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--rojo-lt);
  transform:translateY(101%);transition:transform .38s var(--ease);
}
.btn--wa:hover::before{transform:translateY(0)}

.btn--line{border:1px solid var(--linea-2);color:var(--txt)}
.btn--line::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--txt);
  transform:translateY(101%);transition:transform .38s var(--ease);
}
.btn--line:hover{color:var(--bg)}
.btn--line:hover::before{transform:translateY(0)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;padding:clamp(8.5rem,14vw,12rem) 0 clamp(4rem,7vw,6.5rem);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,var(--glow),transparent 58%),
    radial-gradient(90% 70% at 8% 100%,var(--glow),transparent 62%),
    var(--bg);
}
.grid-lines{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;
  width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;left:0;right:0}
.grid-lines i{width:1px;background:linear-gradient(180deg,transparent,var(--linea) 18%,var(--linea) 82%,transparent)}

/* marca de agua: los arcos del logo en grande, sangrando por la izquierda */
.arco-marca{
  position:absolute;left:-16%;top:50%;transform:translateY(-50%);
  width:min(700px,60vw);aspect-ratio:1;pointer-events:none;opacity:.10;
  background:url("../img/marca/isotipo.png") center/contain no-repeat;
}
:root[data-tema="oscuro"] .arco-marca{opacity:.15}
@media (max-width:900px){.arco-marca{left:-34%;width:92vw;opacity:.07}}

.hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

.hero__title{
  font-size:clamp(2.85rem,7.2vw,5.6rem);font-stretch:106%;font-weight:900;
  letter-spacing:-.032em;margin-bottom:1.4rem;
}
.sheen{
  background:linear-gradient(96deg,var(--sheen-1) 0%,var(--sheen-2) 34%,var(--sheen-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  max-width:46ch;color:var(--txt-2);font-size:clamp(1.02rem,.5vw + .92rem,1.18rem);margin-bottom:2.2rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.6rem}

.hero__facts{display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;font-size:.9rem;color:var(--txt-3);
  padding-top:1.6rem;border-top:1px solid var(--linea)}
.hero__facts li{display:flex;align-items:center;gap:.5rem}
.hero__facts .ico{color:var(--acento-2);width:15px;height:15px}

/* Foto real de vidrio + una lámina dibujada en CSS encima */
.hero__art{position:relative;display:grid;gap:1.4rem}
.hfoto{
  position:relative;margin:0;
  border-radius:20px;
  height:clamp(280px,33vw,420px);
  background:var(--bg-3) url("../img/foto/hero-claro.jpg") center/cover no-repeat;
  border:1px solid var(--linea-2);
  box-shadow:var(--sombra);
}
/* va como fondo y no como <img> para que solo baje la foto del tema activo */
:root[data-tema="oscuro"] .hfoto{background-image:url("../img/foto/hero-oscuro.jpg")}
.hfoto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 48%,transparent 57%);
  background-size:260% 100%;background-position:150% 0;
  animation:reflejo 7s var(--ease) infinite;
}
.hfoto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.1rem .8rem;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#EAF1F4;
  background:linear-gradient(180deg,transparent,rgba(10,13,15,.92));
}
@keyframes reflejo{0%,64%{background-position:150% 0}92%,100%{background-position:-60% 0}}

.spec{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;align-items:baseline;
  border-left:1px solid var(--linea-2);padding-left:1.3rem;
}
.spec__k{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--txt-3);font-weight:600}
.spec__v{font-family:var(--f-disp);font-weight:700;font-size:1rem;color:var(--txt)}

/* =========================================================
   TIRA
   ========================================================= */
.tira{
  border-block:1px solid var(--linea);background:var(--bg-2);
  overflow:hidden;padding:1.05rem 0;
}
.tira__track{display:flex;width:max-content;animation:correr 34s linear infinite}
.tira__track span{
  display:flex;align-items:center;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.05rem,2.1vw,1.5rem);font-stretch:88%;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-3);white-space:nowrap;padding-right:1.2rem;
}
.tira__track i{color:var(--acento);font-style:normal;margin:0 1.1rem;opacity:.85}
@keyframes correr{to{transform:translateX(-50%)}}

/* =========================================================
   SECCIONES
   ========================================================= */
.sec{padding:clamp(4.5rem,8vw,7.5rem) 0;position:relative}
.sec__head{max-width:60ch;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.sec__num{
  display:inline-block;font-family:var(--f-disp);font-weight:700;font-size:.76rem;
  letter-spacing:.22em;color:var(--acento);margin-bottom:1rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--linea-2);
}
.sec__title{font-size:clamp(1.95rem,3.9vw,3.15rem);font-stretch:104%;margin-bottom:.9rem}
.sec__lede{color:var(--txt-2);max-width:54ch;font-size:1.03rem}

/* bloque claro */
.claro{background:var(--panel);color:var(--panel-txt);--acento:#B8121A;--acento-2:#0A6FD8}
.claro .sec__title{color:var(--panel-txt)}
.claro .sec__lede{color:var(--panel-txt-2)}
.claro .sec__num{color:var(--acento);border-bottom-color:var(--linea-p2)}
.claro .btn--line{border-color:var(--linea-p2);color:var(--panel-txt)}
.claro .btn--line:hover{color:var(--panel)}
.claro .btn--line::before{background:var(--panel-txt)}

/* =========================================================
   BENTO DE SERVICIOS
   ========================================================= */
/* Las líneas las dibuja cada tarjeta con su borde, no el gap del grid.
   Así una celda vacía al final de una fila queda invisible. */
.bento{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
}
.card{
  --pad:clamp(1.6rem,2.4vw,2.2rem);
  background:var(--bg);padding:var(--pad);
  display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden;
  transition:background .4s var(--ease);
}
/* tarjetas con foto: la imagen ocupa el flanco izquierdo a toda la altura,
   así la fila del grid no se estira y las tarjetas vecinas no quedan vacías */
.card--foto{display:block;padding:0;position:relative}
.card__foto{
  position:absolute;left:0;top:0;width:41%;height:100%;max-width:none;object-fit:cover;
  /* la foto es vertical y la caja apaisada: se encuadra arriba, donde va el gabinete */
  object-position:50% 22%;
  filter:saturate(.9) contrast(1.04);
  transition:transform .9s var(--ease),filter .5s;
}
.card--foto:hover .card__foto{transform:scale(1.05);filter:saturate(1) contrast(1.07)}
.card__txt{
  margin-left:41%;padding:var(--pad);min-height:100%;
  display:flex;flex-direction:column;gap:.75rem;
  border-left:1px solid var(--linea);
}
.card--wide{grid-column:span 2}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rojo);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.card:hover{background:var(--bg-3)}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  width:44px;height:44px;color:var(--acento-2);margin-bottom:.4rem;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;
  transition:transform .5s var(--ease),color .4s;
}
.card:hover .card__ico{transform:translateY(-3px);color:var(--acento)}
.card h3{font-size:1.3rem;font-stretch:102%}
.card p{color:var(--txt-2);font-size:.965rem;flex:1}
.card__cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.55rem;
  font-family:var(--f-disp);font-weight:700;font-size:.9rem;color:var(--txt);
  transition:color .25s;
}
.card__cta .ico{transition:transform .35s var(--ease)}
.card__cta:hover{color:var(--acento)}
.card__cta:hover .ico{transform:translateX(4px)}
.card--ghost{background:var(--bg-2);grid-column:1/-1}
.card--ghost .card__ico{color:var(--txt-3)}
.card--ghost p{max-width:60ch}

/* franja de argumentos */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:1.2rem;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
}
.strip__item{background:var(--bg-2);padding:1.7rem clamp(1.2rem,1.8vw,1.7rem)}
.strip__k{
  display:block;font-family:var(--f-disp);font-weight:800;font-size:.95rem;
  color:var(--acento);margin-bottom:.5rem;
}
.strip__item p{color:var(--txt-3);font-size:.9rem;line-height:1.55}

/* =========================================================
   FICHAS
   ========================================================= */
.sec--fichas{background:var(--bg-2);border-top:1px solid var(--linea)}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{
  padding:.5rem 1.05rem;border:1px solid var(--linea-2);color:var(--txt-2);
  font-family:var(--f-disp);font-weight:600;font-size:.875rem;
  border-radius:999px;
  transition:background .3s,color .3s,border-color .3s;
}
.chip:hover{color:var(--txt);border-color:var(--txt-3)}
.chip.is-on{background:var(--rojo);border-color:var(--rojo);color:#fff}

.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ficha{
  border:1px solid var(--linea);background:var(--bg);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .4s,transform .4s var(--ease);
}
.ficha:hover{border-color:var(--acento-2);transform:translateY(-4px)}
.ficha.oculta{display:none}
.ficha__art{
  background:
    radial-gradient(80% 80% at 50% 0%,var(--vidrio),transparent 70%),
    var(--bg-3);
  border-bottom:1px solid var(--linea);padding:1.4rem;
}
.draw{width:100%;height:auto}
.draw .d-line{fill:none;stroke:var(--txt-2);stroke-width:2;stroke-linejoin:round}
.draw .d-glass{fill:var(--vidrio);stroke:none}
.draw .d-acc{fill:none;stroke:var(--acento-2);stroke-width:2;stroke-linecap:round}
.draw .d-dim{fill:none;stroke:var(--txt-3);stroke-width:1;stroke-dasharray:4 4}
.draw .d-hatch{fill:none;stroke:var(--linea-2);stroke-width:1}
.ficha:hover .d-acc{stroke:var(--acento)}

.ficha__body{padding:1.5rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.ficha__body h3{font-size:1.18rem}
.ficha__specs{display:grid;gap:.4rem;flex:1}
.ficha__specs div{display:flex;gap:.8rem;justify-content:space-between;font-size:.875rem;
  padding-bottom:.4rem;border-bottom:1px dashed var(--linea)}
.ficha__specs dt{color:var(--txt-3)}
.ficha__specs dd{color:var(--txt);text-align:right;font-weight:500}
.ficha__cta{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-disp);
  font-weight:700;font-size:.9rem;color:var(--acento-2);transition:gap .3s var(--ease);
}
.ficha__cta:hover{gap:.85rem}

/* =========================================================
   ASÍ SE VE EL TRABAJO (mosaico de fotos)
   ========================================================= */
.sec--obra{background:var(--bg);border-top:1px solid var(--linea)}
/* Retrato: las fotos del taller vienen de teléfono, todas verticales */
.obra{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.obra__i{aspect-ratio:3/4}
.obra__i{
  position:relative;margin:0;overflow:hidden;background:var(--bg-3);
  border-radius:18px;
  border:1px solid var(--linea);
}
.obra__i img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(1.04);
  transition:transform .9s var(--ease),filter .5s;
}
.obra__i:hover img{transform:scale(1.06);filter:saturate(1) contrast(1.08)}
.obra__i::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -90px 70px -60px rgba(53,180,230,.25);
  opacity:0;transition:opacity .5s;
}
.obra__i:hover::after{opacity:1}
.obra__i figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .85rem;
  display:grid;gap:.1rem;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,12,14,.92) 62%);
}
.obra__i figcaption b{font-family:var(--f-disp);font-weight:800;font-size:1rem;color:#fff;letter-spacing:-.01em}
.obra__i figcaption span{font-size:.82rem;color:#B9C4CB;line-height:1.35}

/* =========================================================
   COTIZADOR
   ========================================================= */
.quoter{
  display:grid;grid-template-columns:1.5fr .85fr;gap:1px;
  background:var(--linea-p);border:1px solid var(--linea-p);
}
/* min-width:0 en los hijos del grid: si no, el ancho intrínseco de los
   inputs (size=20 por defecto) estira la columna y desborda en móvil */
.quoter__main,.quoter__resumen{min-width:0}
.quoter__main{background:#fff;padding:clamp(1.5rem,3vw,2.5rem)}
.quoter__bar{height:2px;background:var(--panel-2);margin-bottom:1.1rem}
.quoter__bar span{display:block;height:100%;width:33.33%;background:var(--rojo);transition:width .45s var(--ease)}
.quoter__steps{display:flex;gap:1.4rem;margin-bottom:2rem;font-size:.8rem;
  font-family:var(--f-disp);font-weight:700;color:#5A666D;flex-wrap:wrap}
.quoter__steps .is-on{color:var(--acento)}

.qstep{display:none;animation:entra .4s var(--ease)}
.qstep.is-on{display:block}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qstep__q{font-family:var(--f-disp);font-weight:800;font-size:1.15rem;margin-bottom:1rem;color:var(--panel-txt)}

.opts{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem}
.opts--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt{
  display:flex;align-items:center;gap:.6rem;text-align:left;
  padding:.8rem 1rem;border:1px solid var(--linea-p2);color:var(--panel-txt);
  font-family:var(--f-disp);font-weight:600;font-size:.9rem;background:#fff;
  border-radius:var(--radio-sm);
  transition:background .25s,border-color .25s,color .25s;
}
.opt:hover{border-color:var(--acento-2);background:#F4F8FD}
.opt.is-on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.opt svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;opacity:.8}
.opt.is-on svg{opacity:1}

.qfield{margin-bottom:1.5rem}
.qfield__lab{display:block;font-family:var(--f-disp);font-weight:700;font-size:.92rem;
  margin-bottom:.55rem;color:var(--panel-txt)}
.qfield__lab em{font-style:normal;font-weight:500;color:#9AA5AC}
.qfield input[type=text],.qfield textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--linea-p2);background:#fff;
  color:var(--panel-txt);border-radius:8px;transition:border-color .25s;resize:vertical;
}
.qfield input:focus,.qfield textarea:focus{border-color:var(--acento-2);outline:none}
.qfield input::placeholder,.qfield textarea::placeholder{color:#A9B3B9}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--linea-p2)}
.stepper button{width:42px;height:44px;display:grid;place-items:center;color:var(--panel-txt-2);transition:background .2s}
.stepper button:hover{background:var(--panel)}
.stepper input{width:60px;height:44px;text-align:center;border:0;border-inline:1px solid var(--linea-p2);
  font-family:var(--f-disp);font-weight:700;background:#fff}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}

.medidas{display:flex;align-items:center;gap:.7rem}
.medidas label{position:relative;flex:1 1 0;min-width:0;max-width:180px}
.medidas input{min-width:0}
.medidas label span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  color:#A9B3B9;font-size:.85rem;pointer-events:none}
.medidas b{color:#9AA5AC;font-weight:500}
.qhint{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;font-size:.85rem;color:var(--panel-txt-2)}
.qhint .ico{color:var(--acento-2);width:14px;height:14px}

.quoter__nav{display:flex;gap:.7rem;align-items:center;padding-top:1.2rem;border-top:1px solid var(--linea-p)}
.btn[disabled]{opacity:.35;pointer-events:none}

/* El resumen es una tarjeta oscura en los dos temas: ancla el bloque claro
   y hace que el pedido se lea como algo ya escrito. Redefine los tokens
   dentro de sí mismo, así sus reglas hijas no cambian. */
.quoter__resumen{
  --bg:#101317; --txt:#ECEEF0; --txt-3:#7E888F;
  --linea:rgba(236,238,240,.13); --acento:#F2504F;
  background:var(--bg);color:var(--txt);padding:clamp(1.5rem,3vw,2.2rem);
  display:flex;flex-direction:column;
}
.resumen__lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--acento);
  font-weight:600;padding-bottom:.8rem;border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.resumen__list{display:grid;gap:.6rem;flex:1;align-content:start}
.resumen__list li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
  padding-bottom:.55rem;border-bottom:1px dashed var(--linea)}
.resumen__list li b{font-weight:500;color:var(--txt-3)}
.resumen__list li span{text-align:right;color:var(--txt);font-weight:500}
.resumen__list .is-empty{color:var(--txt-3);border:0;display:block}
.resumen__pie{margin-top:1.4rem;font-size:.82rem;color:var(--txt-3);line-height:1.5}

/* =========================================================
   PROCESO
   ========================================================= */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-p);
  border-top:1px solid var(--linea-p)}
.paso{background:var(--panel);padding:2rem 1.4rem 2.2rem;position:relative}
.paso__n{
  display:block;font-family:var(--f-disp);font-weight:900;font-size:2.6rem;font-stretch:120%;
  color:transparent;-webkit-text-stroke:1px var(--linea-p2);line-height:1;margin-bottom:1rem;
  transition:-webkit-text-stroke-color .4s,color .4s;
}
.paso:hover .paso__n{color:var(--acento);-webkit-text-stroke-color:transparent}
.paso h3{font-size:1.2rem;margin-bottom:.6rem;color:var(--panel-txt)}
.paso p{color:var(--panel-txt-2);font-size:.93rem}

/* =========================================================
   FAQ
   ========================================================= */
.faq__wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq__intro{position:sticky;top:110px}
.faq__intro .btn{margin-top:1.4rem}
.faq{border-top:1px solid var(--linea-p)}
.qa{border-bottom:1px solid var(--linea-p)}
.qa summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;position:relative;
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--panel-txt);
  transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acento-2)}
.qa summary::after{
  content:'';position:absolute;right:.4rem;top:1.5rem;width:11px;height:11px;
  border-right:1.6px solid var(--acento-2);border-bottom:1.6px solid var(--acento-2);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.qa p{padding:0 2.2rem 1.3rem 0;color:var(--panel-txt-2);font-size:.96rem;animation:entra .35s var(--ease)}

/* =========================================================
   CONTACTO
   ========================================================= */
.sec--contacto{
  background:
    radial-gradient(90% 80% at 20% 0%,var(--glow),transparent 60%),
    var(--bg);
  border-top:1px solid var(--linea);overflow:hidden;
}
.contacto{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.contacto__acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0}
.contacto__acciones .btn{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;padding-top:1.8rem;border-top:1px solid var(--linea)}
.datos dt{display:flex;align-items:center;gap:.5rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--txt-3);margin-bottom:.5rem;font-weight:600}
.datos dt .ico{color:var(--acento-2);width:14px;height:14px}
.datos dd{font-size:.95rem;color:var(--txt);line-height:1.55}
.datos dd a{color:var(--acento-2);border-bottom:1px solid var(--linea-2)}
.datos dd a:hover{border-color:var(--acento-2)}

.contacto__lado{display:grid;gap:1.1rem;align-content:start}
.contacto__mapa{position:relative;border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--bg-2)}
.mapa{width:100%;height:auto}
/* el mapa se pinta con los tokens del tema, no con colores fijos */
.mapa .m-grid,.mapa .m-calle{stroke:var(--linea)}
.mapa .m-via{stroke:var(--linea-2)}
.mapa .m-guion{stroke:var(--txt-3)}
.mapa .m-lote{fill:var(--vidrio);stroke:var(--rojo)}
.mapa .m-txt{fill:var(--txt-3)}
.mapa .m-halo{fill:var(--glow)}
.mapa .m-punto{fill:var(--rojo)}
.mapa__pin{animation:latir 2.6s ease-in-out infinite;transform-origin:105px 150px}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.55}}
.mapa__cta{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  padding:.95rem 1.2rem;background:var(--bg-2);
  border-top:1px solid var(--linea);font-family:var(--f-disp);font-weight:700;font-size:.9rem;
  color:var(--txt);transition:color .25s;
}
.mapa__cta:hover{color:var(--acento-2)}

/* =========================================================
   FOOTER
   ========================================================= */
/* El pie queda oscuro también en modo claro: le da base a la página */
.pie{
  --bg-2:#101317; --txt:#ECEEF0; --txt-2:#A2AAB0; --txt-3:#7E888F;
  --linea:rgba(236,238,240,.13); --linea-2:rgba(236,238,240,.26);
  --acento:#F2504F; --acento-2:#3FA0FF;
  background:var(--bg-2);color:var(--txt);
  border-top:1px solid var(--linea);padding:3.2rem 0 1.5rem;
}
.pie__row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:2.5rem;padding-bottom:2.4rem;
  border-bottom:1px solid var(--linea)}
.pie__brand p{color:var(--txt-3);font-size:.9rem;max-width:38ch;margin-top:1rem}
.pie__nav{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;font-size:.92rem;color:var(--txt-2)}
.pie__nav a:hover{color:var(--acento-2)}
.pie__cont{display:grid;gap:.4rem;font-family:var(--f-disp);font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;text-align:right}
.pie__cont a:hover{color:var(--acento-2)}
.pie__legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem 1.5rem;
  padding-top:1.4rem;font-size:.82rem;color:var(--txt-3)}
.pie__ig{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600}
.pie__ig .ico{width:17px;height:17px;color:var(--acento-2)}

/* enlace dentro de un párrafo */
.enlace{color:var(--acento-2);border-bottom:1px solid var(--linea-2);transition:border-color .25s}
.enlace:hover{border-color:currentColor}
.pie__by a{color:var(--txt-2);border-bottom:1px solid var(--linea-2)}
.pie__by a:hover{color:var(--acento-2)}

/* =========================================================
   FLOTANTES
   ========================================================= */
.flota{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:950;width:56px;height:56px;
  display:grid;place-items:center;background:var(--rojo);color:#fff;
  border-radius:50%;
  box-shadow:0 14px 34px -12px rgba(53,180,230,.65);
  transition:transform .35s var(--ease),background .3s;
}
.flota .ico{width:27px;height:27px;stroke-width:1.5}
.flota:hover{transform:translateY(-4px);background:var(--rojo-lt)}

.barra{display:none;position:fixed;left:0;right:0;bottom:0;z-index:960;
  border-top:1px solid var(--linea);background:var(--bg);backdrop-filter:blur(14px)}
.barra a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 0;font-family:var(--f-disp);font-weight:700;font-size:.95rem}
.barra__wa{background:var(--rojo);color:#fff}
.barra__tel{color:var(--txt)}

/* =========================================================
   REVEALS
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visto{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 2}
  .obra{grid-template-columns:repeat(2,1fr)}
  .fichas{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .quoter{grid-template-columns:1fr}
  .faq__wrap{grid-template-columns:1fr}
  .faq__intro{position:static}
}

@media (max-width:900px){
  .nav__links{
    position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    gap:1.6rem;font-size:1.45rem;font-family:var(--f-disp);font-weight:700;color:var(--txt);
    transform:translateY(-100%);transition:transform .5s var(--ease);margin:0;padding:2rem;
  }
  .nav__links.abierto{transform:none}
  .nav__links-call{display:block;color:var(--acento-2);font-size:1.1rem}
  .burger{display:block;position:relative;z-index:2}
  .tel-link{display:none}
  .nav__side .btn--wa{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1;margin-bottom:1rem}
  .hfoto{height:min(52vw,260px)}
  .spec{grid-template-columns:repeat(3,auto);justify-content:start;gap:.2rem 2rem;
    border-left:0;border-top:1px solid var(--linea-2);padding:1rem 0 0}
  .spec__k{grid-row:1}
  .spec__v{grid-row:2}
  .contacto{grid-template-columns:1fr}
  .pie__row{grid-template-columns:1fr;gap:1.8rem}
  .pie__cont{text-align:left}
  .barra{display:flex}
  .flota{display:none}
  body{padding-bottom:56px}
}

@media (max-width:620px){
  html{scroll-padding-top:86px}
  .nav__row{height:74px}
  .logo__img{width:82px}
  .bento{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .card--foto{display:flex;flex-direction:column}
  .card__foto{position:static;width:100%;height:180px}
  .card__txt{margin-left:0;border-left:0;border-top:1px solid var(--linea);min-height:0}
  .obra{grid-template-columns:1fr 1fr;gap:.7rem}
  .fichas{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .datos{grid-template-columns:1fr}
  .hero__cta .btn{flex:1;justify-content:center}
  .grid-lines{display:none}
  .quoter__steps{gap:.9rem;font-size:.74rem}
  .opts--grid{grid-template-columns:1fr 1fr}
  .medidas label{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}