/* ===========================================================================
   MONTELA — stands y eventos. Piel propia (no la comparte ningún otro sitio).
   Dirección: el recinto de exposiciones. Grafito neutro (sin el azul de la casa),
   esquinas rectas, rejilla de plano de 1 m, cotas de medida como en un plano de
   montaje, y letra condensada de señalética de pabellón (Big Shoulders Display) en
   mayúsculas. Lectura en Instrument Sans. El turquesa es la línea M: luz de recinto.
   =========================================================================== */
@font-face{font-family:Hombros;src:url("/fuentes/BigShouldersDisplay-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:Instrumento;src:url("/fuentes/InstrumentSans-var.woff2") format("woff2-variations");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
:root{
  --g0:oklch(0.16 0.003 180); --g1:oklch(0.2 0.004 180); --g2:oklch(0.25 0.005 180); --g3:oklch(0.31 0.006 180);
  --linea:oklch(1 0 0 / .1); --linea-2:oklch(1 0 0 / .2);
  --t:oklch(0.97 0.003 180); --t2:oklch(0.85 0.008 180); --t3:oklch(0.74 0.01 180);
  --m:#14B8A6; --m-t:#2DD4BF; --m-osc:#0B5E55; --senal:#FFD000;
  --curva:cubic-bezier(.16,1,.3,1); --ancho-max:1280px;
}
html{background:var(--g0);color-scheme:dark}
body{background:var(--g0);color:var(--t);font:400 17.5px/1.6 Instrumento,system-ui,sans-serif}
/* rejilla de plano: un cuadro = un metro (40 px), con la línea del metro 5 más marcada */
.plano{background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px),
  linear-gradient(oklch(1 0 0 / .04) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0 / .04) 1px,transparent 1px);
  background-size:200px 200px,200px 200px,40px 40px,40px 40px;background-position:-1px -1px}
h1,h2,h3,.d{font-family:Hombros,"Arial Narrow",sans-serif;text-transform:uppercase;margin:0;font-weight:800;letter-spacing:-.005em}
h1{font-size:clamp(44px,12.5vw,112px);line-height:.88}
h1,h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(40px,7.4vw,84px);line-height:.9}
h3{font-size:clamp(26px,2.6vw,34px);line-height:.95;font-weight:750}
h1 em,h2 em{font-style:normal;color:var(--m-t)}
p{margin:0}
a{text-decoration-thickness:1px;text-underline-offset:4px}
.sub{font-size:clamp(18px,1.6vw,21px);color:var(--t2);max-width:40ch;margin-top:18px}
.eti{font:600 12.5px/1 Instrumento;letter-spacing:.14em;text-transform:uppercase;color:var(--m-t);display:inline-flex;gap:10px;align-items:center}
.eti::before{content:"";width:22px;height:2px;background:var(--m)}

/* cabecera: barra de pabellón */
.cab{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--g0) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.cab .ancho{display:flex;align-items:center;gap:16px;min-height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 27px/1 Hombros;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.logo i{width:22px;height:22px;background:var(--m);clip-path:polygon(0 100%,0 0,50% 55%,100% 0,100% 100%,82% 100%,82% 42%,50% 80%,18% 42%,18% 100%)}
.nav{display:flex;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:10px 12px;text-decoration:none;color:var(--t2);font:600 14px Instrumento;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
.nav a[aria-current]{color:var(--t);border-bottom-color:var(--m)}
@media (hover:hover){.nav a:hover{color:var(--t)}}
@media (max-width:899px){.cab .ancho{flex-wrap:wrap;gap:0 12px;padding-top:4px}.nav{order:3;width:100%;margin:0 -10px;padding-bottom:2px;flex-wrap:wrap;overflow:visible}.nav a{padding:8px 10px}.cab .btn{margin-left:auto}.cab{position:relative}}

/* botones: rectos, como una placa */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;font:700 15px Instrumento;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .2s var(--curva)}
.btn-m{background:var(--m);color:#04130F}
.btn-m[href*="wa.me"]::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.2.1.7-.2 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.2.1.7-.2 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-b{background:transparent;color:var(--t);box-shadow:inset 0 0 0 1.5px var(--linea-2)}
@media (hover:hover){.btn-m:hover{background:var(--m-t)}.btn-b:hover{box-shadow:inset 0 0 0 1.5px var(--m)}.btn:hover{transform:translateY(-1px)}}
.cab .btn{min-height:40px;padding:0 14px;font-size:13px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* portada: titular grande de pabellón + render con cotas */
.portada{padding:40px 0 56px;position:relative;overflow:hidden}
.portada-g{display:grid;gap:32px}
.portada .eti{margin-bottom:18px}
@media (min-width:1000px){.portada{padding:72px 0 88px}.portada-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}}
/* figura con cotas: las medidas del stand dibujadas como en un plano */
.cota-fig{position:relative;margin:0}
.cota-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--g1)}
.cota-fig .rot{position:absolute;left:12px;bottom:12px;font:600 11.5px/1 Instrumento;letter-spacing:.1em;text-transform:uppercase;background:oklch(0 0 0 / .62);color:var(--t);padding:7px 9px}
.cotas{position:absolute;inset:0;pointer-events:none}
.cota{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--m-t);font:700 13px/1 Instrumento;letter-spacing:.06em}
.cota.h{left:8%;right:8%;top:10px;height:14px;border-left:1.5px solid var(--m);border-right:1.5px solid var(--m)}
.cota.h::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--m)}
.cota.h span{position:relative;background:var(--g0);padding:0 8px}
.cota.v{right:10px;top:12%;bottom:22%;width:14px;border-top:1.5px solid var(--m);border-bottom:1.5px solid var(--m)}
.cota.v::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.5px dashed var(--m)}
.cota.v span{position:relative;background:var(--g0);padding:6px 0;writing-mode:vertical-rl}
@media (prefers-reduced-motion:no-preference){
  .cota.h{animation:traza 1s .3s var(--curva) both}
  .cota.v{animation:trazav 1s .55s var(--curva) both}
  @keyframes traza{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
  @keyframes trazav{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
}

/* secciones */
.sec{padding:72px 0;border-top:1px solid var(--linea)}
.cabeza{display:grid;gap:14px;margin-bottom:36px;max-width:780px}
.cabeza p{color:var(--t2);font-size:18.5px;max-width:52ch}
@media (min-width:1000px){.sec{padding:112px 0}}

/* tamaños: el número ES el titular */
.tams{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
@media (min-width:760px){.tams{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.tams{grid-template-columns:repeat(4,1fr)}}
.tam{background:var(--g0);display:flex;flex-direction:column;text-decoration:none;position:relative;transition:background .25s}
.tam figure{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--g1)}
.tam img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--curva)}
.tam .tx{padding:20px 20px 24px;display:grid;gap:8px;flex:1}
.tam .num{font:800 64px/.85 Hombros;color:var(--t)}
.tam .num small{font-size:.42em;color:var(--t3);margin-left:6px}
.tam p{color:var(--t2);font-size:16.5px}
.tam .ir{margin-top:auto;padding-top:10px;font:700 13.5px Instrumento;letter-spacing:.08em;text-transform:uppercase;color:var(--m-t)}
.tam .ir::after{content:" →"}
@media (hover:hover){.tam:hover{background:var(--g1)}.tam:hover img{transform:scale(1.04)}}
.plano-mini{display:block;width:100%;height:100%;background:var(--g1)}

/* servicios: catálogo visual */
.cat{display:grid;gap:18px}
@media (min-width:760px){.cat{grid-template-columns:repeat(2,1fr)}}
.pieza{position:relative;display:grid;text-decoration:none;background:var(--g1);border:1px solid var(--linea);overflow:hidden}
.pieza figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--g2)}
.pieza img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--curva)}
.pieza .tx{padding:20px;display:grid;gap:6px}
.pieza p{color:var(--t2);font-size:16.5px}
.pieza .ir{font:700 13.5px Instrumento;letter-spacing:.08em;text-transform:uppercase;color:var(--m-t);margin-top:6px}
.pieza .ir::after{content:" →"}
@media (hover:hover){.pieza:hover img{transform:scale(1.04)}.pieza:hover{border-color:var(--m)}}
.pieza.otra{--o:#F2F2F2}
.pieza .marca-o{position:absolute;top:12px;right:12px;font:700 11.5px Instrumento;letter-spacing:.08em;text-transform:uppercase;background:oklch(0 0 0 / .66);padding:7px 9px;display:flex;gap:7px;align-items:center}
.pieza .marca-o b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--o,#F2F2F2);color:#000;font-size:10px}

/* ruta del proceso: línea de montaje */
.ruta{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:p}
.ruta li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:22px 0;border-top:1px solid var(--linea);position:relative}
.ruta li::before{content:counter(p,decimal-leading-zero);font:800 44px/1 Hombros;color:var(--m-t);grid-row:span 2}
.ruta b{font:750 26px/1 Hombros;text-transform:uppercase}
.ruta span{color:var(--t2)}
@media (min-width:1000px){.ruta{grid-template-columns:repeat(5,1fr);gap:24px}.ruta li{grid-template-columns:1fr;border-top:2px solid var(--m)}.ruta li::before{grid-row:auto;margin-bottom:10px}}

/* galería */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filtros button{min-height:44px;padding:0 16px;background:transparent;border:1.5px solid var(--linea-2);color:var(--t2);font:700 13.5px Instrumento;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.filtros button[aria-pressed=true]{background:var(--m);color:#04130F;border-color:var(--m)}
.gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.gal figure{margin:0;position:relative;background:var(--g1);border:1px solid var(--linea)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{padding:12px 14px;font-size:15px;color:var(--t2);display:grid;gap:3px}
.gal figcaption b{color:var(--t);font-weight:600}
.gal .tipo{font:700 11px Instrumento;letter-spacing:.1em;text-transform:uppercase;color:var(--m-t)}
.gal [hidden]{display:none}
.hueco{aspect-ratio:4/3;display:grid;place-content:center;gap:8px;text-align:center;padding:20px;color:var(--t3);font-size:15px;
  background:repeating-linear-gradient(135deg,var(--g1) 0 14px,var(--g2) 14px 15px)}
.hueco svg{width:34px;height:34px;margin:0 auto;opacity:.7}
.hueco b{color:var(--t2);font:750 22px/1 Hombros;text-transform:uppercase}

/* configurador */
.cfg{display:grid;gap:20px}
@media (min-width:1000px){.cfg{grid-template-columns:minmax(0,7fr) minmax(340px,4fr);gap:28px;align-items:start}}
.visor{position:relative;background:var(--g1);border:1px solid var(--linea);aspect-ratio:3/2;overflow:hidden}
@media (min-width:1000px){.visor{position:sticky;top:84px}}
@media (max-width:999px){.visor{position:sticky;top:0;z-index:5;aspect-ratio:auto;height:min(34vh,250px);box-shadow:0 12px 24px -12px oklch(0 0 0 / .8)}.visor .rot{font-size:10.5px}}
.visor > img,.visor canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visor canvas{touch-action:pan-y}
.visor .rot{position:absolute;left:12px;bottom:12px;font:600 11.5px/1 Instrumento;letter-spacing:.1em;text-transform:uppercase;background:oklch(0 0 0 / .62);padding:7px 9px;z-index:2}
.visor .girar{position:absolute;right:12px;top:12px;z-index:2;min-height:40px;font-size:12.5px;background:oklch(0 0 0 / .66);color:var(--t);box-shadow:inset 0 0 0 1.5px var(--m)}
.visor .estado{position:absolute;left:12px;top:12px;z-index:2;font-size:13px;color:var(--t2);background:oklch(0 0 0 / .6);padding:6px 9px}
.visor .estado:empty{display:none}
.pasos{display:grid;gap:22px}
.paso{border-top:2px solid var(--linea-2);padding-top:14px}
.paso legend,.paso h2{font:750 24px/1 Hombros;text-transform:uppercase;padding:0;margin-bottom:12px;display:flex;gap:10px;align-items:baseline}
.paso legend i,.paso h2 i{font-style:normal;color:var(--m-t);font-size:.8em}
fieldset.paso{border:0;border-top:2px solid var(--linea-2);margin:0;padding:14px 0 0}
.ops{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.ops.dos{grid-template-columns:repeat(2,1fr)}
.op{position:relative}
.op input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.op span{display:grid;gap:2px;min-height:58px;align-content:center;padding:10px 12px;background:var(--g1);border:1.5px solid var(--linea-2);font-size:14.5px;color:var(--t2);transition:border-color .2s,background .2s}
.op span b{font:800 22px/1 Hombros;color:var(--t);text-transform:uppercase}
.op input:checked + span{border-color:var(--m);background:color-mix(in oklch,var(--m) 14%,var(--g1));color:var(--t)}
.op input:focus-visible + span{outline:3px solid var(--senal);outline-offset:2px}
.op input:disabled + span{opacity:.45}
.op .muestra{width:100%;height:10px;margin-bottom:6px}
.resumen{background:var(--g1);border:1px solid var(--linea);padding:18px;display:grid;gap:12px}
.resumen dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px}
.resumen dt{color:var(--t3)}
.resumen dd{margin:0;color:var(--t)}
.resumen textarea{width:100%;min-height:84px;background:var(--g0);border:1.5px solid var(--linea-2);padding:10px;font-size:15px;color:var(--t);resize:vertical}
.resumen label{font-size:14px;color:var(--t2)}
.nota{font-size:14.5px;color:var(--t3)}

/* contenido largo, blog, nosotros */
.doc{max-width:720px;padding:40px 0 80px}
.doc h1{font-size:clamp(44px,8vw,80px);margin-bottom:18px}
.doc h2{font-size:clamp(30px,4vw,42px);margin:40px 0 12px}
.doc p,.doc li{color:var(--t2);font-size:18px;margin-top:12px}
.doc ul{padding-left:20px}
.migas{display:flex;gap:8px;flex-wrap:wrap;padding-top:24px;font-size:14px;color:var(--t3)}
.migas a{color:var(--t2)}
.valores{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:20px}
@media (min-width:760px){.valores{grid-template-columns:repeat(2,1fr)}}
.valores div{background:var(--g0);padding:20px}
.valores b{display:block;font:750 26px/1 Hombros;text-transform:uppercase;margin-bottom:8px}
.valores p{margin:0;font-size:16.5px}
.posts{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.posts a{background:var(--g0);padding:20px;text-decoration:none;display:grid;gap:8px}
.posts img{width:100%;aspect-ratio:3/1;object-fit:cover;margin-bottom:6px}
@media (min-width:760px){.posts a{grid-template-columns:280px 1fr;column-gap:24px;align-items:start}.posts img{grid-row:span 3;aspect-ratio:3/2;margin:0}}
.posts a span{color:var(--t2)}
.posts time{font-size:13.5px;color:var(--t3);letter-spacing:.06em;text-transform:uppercase}
@media (hover:hover){.posts a:hover{background:var(--g1)}}
.entregables{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.entregables li{background:var(--g0);padding:16px 18px;margin:0;color:var(--t2);font-size:16.5px}
.entregables li b{color:var(--t);display:block;font-weight:600}
.ficha{display:grid;gap:28px}
@media (min-width:1000px){.ficha{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}}
.ficha figure{margin:0}

/* cierre */
.cierre{padding:88px 0 120px;border-top:1px solid var(--linea);text-align:left}
.cierre h2{max-width:14ch}

/* pie */
.pie{border-top:1px solid var(--linea);padding:48px 0 120px;font-size:15px;color:var(--t2)}
.pie .ancho{display:grid;gap:28px}
@media (min-width:760px){.pie .ancho{grid-template-columns:2fr 1fr 1fr}.pie{padding-bottom:56px}}
.pie b{display:block;color:var(--t);font:750 20px/1 Hombros;text-transform:uppercase;margin-bottom:12px;letter-spacing:.03em}
.pie a{display:block;padding:7px 0;color:var(--t2);text-decoration:none}
@media (hover:hover){.pie a:hover{color:var(--t)}}
.fijo{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,oklch(0.16 0.003 180 / .94) 30%);transition:transform .3s var(--curva)}
.fijo .btn{width:100%}
.fijo.fuera{transform:translateY(110%)}
@media (min-width:760px){.fijo{display:none}}

/* aparición por scroll: la pieza se "monta" (sube desde el piso con su sombra), no un fundido genérico */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .monta{animation:monta linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes monta{from{clip-path:inset(100% 0 0 0);translate:0 24px}to{clip-path:inset(0 0 0 0);translate:0 0}}
  }
}
.visor .girar[hidden]{display:none}