/* Climafriosevilla.com — azulejo + plano técnico */
:root{
  --paper:#f2ece0; --paper-2:#e9e1d1; --tile:#fbf8f1; --ink:#101a3a; --ink-2:#2a3557; --mute:#5d6377;
  --cobalt:#1d3fa8; --cobalt-d:#142d7c; --sky:#bfe2ff; --albero:#e0a526; --rust:#c4502a; --wa:#25d366;
  --bar:64px;
  --fb:"Archivo",system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,monospace; --fs:"Cinzel",Georgia,serif;
  --ease:cubic-bezier(.22,.9,.24,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--fb);font-stretch:100%}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900}
p{margin:0 0 1em}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.mono{font-family:var(--fm);font-weight:400;letter-spacing:.02em}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:8px 14px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--albero);outline-offset:3px}

/* ── Botones físicos ── */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.35em;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);
  font:700 1rem/1.1 var(--fb);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn--wa{background:var(--wa)}
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--cobalt)}
.btn--ink:hover{box-shadow:6px 6px 0 var(--cobalt)}
.btn--paper{background:var(--paper)}
.btn--sm{padding:.6em .95em;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn--lg{padding:1.1em 1.5em;font-size:1.08rem}
.btn--block{width:100%;justify-content:center}
.link-arrow{font-weight:700;text-decoration:none;border-bottom:2px solid var(--albero);padding-bottom:2px;transition:color .2s}
.link-arrow:hover{color:var(--cobalt)}

/* ── Cinta métrica (progreso) ── */
.tape{position:fixed;left:0;right:0;top:var(--bar);height:16px;z-index:40;pointer-events:none;--p:0}
.tape__band{height:100%;background:#f3c531;border-bottom:1px solid #a07a10;clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0);
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 40px);
  background-size:100% 4px,100% 9px;background-repeat:repeat-x;background-position:0 0,0 0}
.tape__nums{position:absolute;inset:0;font:600 9px/16px var(--fm);color:var(--ink)}
.tape__nums span{position:absolute;top:1px;transform:translateX(-50%)}
.tape__nums span.red{color:#fff;background:#c4302a;padding:0 2px;line-height:12px;top:2px}
.tape__hook{position:absolute;top:-2px;left:calc(var(--p) * 100%);width:7px;height:20px;background:linear-gradient(90deg,#9aa0a8,#e3e6ea,#8a9098);border:1px solid #555;transform:translateX(-100%);opacity:min(1,calc(var(--p) * 40))}

/* ── Barra superior ── */
.bar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:24px;padding:0 max(16px,calc((100vw - 1240px)/2));background:var(--paper);border-bottom:2px solid var(--ink)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin:0}
.logo__tile{width:34px;height:34px;flex:none;background:url(/img/azulejo.svg) center/34px;border:1.5px solid var(--ink);transition:transform .7s var(--spring)}
.logo:hover .logo__tile{transform:rotate(90deg)}
.logo__txt{display:flex;flex-direction:column;line-height:.9}
.logo__txt b{font:900 1.35rem/0.9 var(--fb);font-stretch:62%;text-transform:uppercase;letter-spacing:.01em}
.logo__txt i{font:700 .72rem/1.2 var(--fs);font-style:normal;color:var(--cobalt);letter-spacing:.2em;text-transform:uppercase}
.bar__meta{display:flex;gap:8px;margin:0;font-size:11px;color:var(--mute);text-transform:uppercase}
.bar__coord{margin-left:10px;padding-left:10px;border-left:1px solid #c9bfa9}
.bar__nav{display:flex;gap:22px;margin-left:auto}
.bar__nav a{font:600 12px/1 var(--fm);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:6px 0;background:linear-gradient(var(--albero),var(--albero)) left bottom/0 3px no-repeat;transition:background-size .3s var(--ease)}
.bar__nav a:hover,.bar__nav a.on{background-size:100% 3px}
.bar__burger{display:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);position:relative;cursor:pointer}
.bar__burger span{position:absolute;left:10px;right:10px;height:2.5px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.bar__burger span:first-child{top:14px}.bar__burger span:last-child{top:24px}
.bar__burger[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.bar__burger[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}
.menu{position:fixed;inset:var(--bar) 0 0;z-index:45;background:var(--paper);padding:28px 20px 40px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:2px solid var(--ink);text-decoration:none;font:900 clamp(2rem,10vw,3rem)/1 var(--fb);font-stretch:62%;text-transform:uppercase;
  opacity:0;transform:translateX(-20px);animation:mIn .45s var(--ease) forwards;animation-delay:calc(var(--i) * 45ms)}
.menu nav a small{font-size:.8rem;color:var(--cobalt)}
.menu .btn{justify-content:center;margin-top:24px}
@keyframes mIn{to{opacity:1;transform:none}}

/* ── Portada ── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - var(--bar));padding:clamp(40px,6vw,80px) max(16px,calc((100vw - 1240px)/2)) clamp(50px,6vw,90px)}
.hero__over{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:20px}
.led{width:9px;height:9px;border-radius:50%;background:var(--wa);border:1.5px solid var(--ink);animation:blink 2.4s steps(1) infinite}
@keyframes blink{50%{background:#0f7a3a}}
.hero__h1{display:block;font-weight:900;margin-bottom:22px}
.ln{display:block;overflow:hidden;font:900 clamp(4.2rem,12.5vw,11rem)/.84 var(--fb);font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;padding-top:.04em}
.ln>span{display:block;transform:translateY(105%);animation:lnUp 1s var(--ease) forwards}
.ln--b{color:var(--cobalt)}
.ln--b>span{animation-delay:.12s}
@keyframes lnUp{to{transform:none}}
.hero__sub{display:block;margin-top:16px;font:600 clamp(.82rem,1.3vw,.98rem)/1.4 var(--fm);letter-spacing:.02em;color:var(--ink-2);opacity:0;animation:fade .8s .55s forwards}
@keyframes fade{to{opacity:1}}
.hero__claim{display:inline;font:800 clamp(1.4rem,2.6vw,2.1rem)/1.15 var(--fb);font-stretch:75%;text-transform:uppercase;
  background:linear-gradient(transparent 58%,color-mix(in srgb,var(--albero) 70%,transparent) 58% 92%,transparent 92%) no-repeat 0 0/0 100%;animation:mark .9s .9s var(--ease) forwards}
@keyframes mark{to{background-size:100% 100%}}
.hero__lead{max-width:52ch;margin-top:20px;color:var(--ink-2);font-size:1.05rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}

.hero__art{position:relative;height:min(76vh,660px);min-height:440px}
.hero__photo{position:absolute;right:0;top:0;width:80%;height:84%;margin:0;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--cobalt);overflow:hidden;background:var(--paper-2)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.08);animation:settle 1.6s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero__inset{position:absolute;left:0;bottom:0;width:46%;margin:0;padding:8px 8px 6px;background:var(--tile);border:2px solid var(--ink);transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--ink)}
.hero__inset figcaption{font-size:10.5px;padding-top:6px;text-transform:uppercase;letter-spacing:.06em}
.plaque{position:absolute;left:4%;top:8%;width:clamp(210px,22vw,300px);aspect-ratio:3/2;transform:rotate(-4deg);filter:drop-shadow(5px 6px 0 rgba(16,26,58,.85))}
.plaque__tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);perspective:600px}
.plaque__tiles i{background:radial-gradient(120% 90% at 30% 20%,#fffdf7,#f1eadb 70%);border:1px solid #cfc5ae;transform-origin:50% 0;transform:rotateX(-95deg);opacity:0;animation:tile .55s var(--spring) forwards}
.plaque__tiles i:nth-child(1){animation-delay:.5s}.plaque__tiles i:nth-child(2){animation-delay:.6s}.plaque__tiles i:nth-child(3){animation-delay:.7s}
.plaque__tiles i:nth-child(4){animation-delay:.8s}.plaque__tiles i:nth-child(5){animation-delay:.9s}.plaque__tiles i:nth-child(6){animation-delay:1s}
@keyframes tile{to{transform:none;opacity:1}}
.plaque__face{position:absolute;inset:9%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--cobalt);outline:1.5px solid var(--cobalt);outline-offset:4px;color:var(--cobalt);text-align:center;opacity:0;animation:paint .8s 1.25s forwards}
.plaque__face::before,.plaque__face::after{content:"";position:absolute;width:22px;height:22px;background:url(/img/azulejo.svg) center/44px;border:1.5px solid var(--cobalt)}
.plaque__face::before{left:-14px;top:-14px}.plaque__face::after{right:-14px;bottom:-14px}
@keyframes paint{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.plaque__small{font:700 clamp(.7rem,1vw,.9rem)/1 var(--fs);letter-spacing:.25em;text-transform:uppercase}
.plaque__big{font:900 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--fs);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;text-shadow:0 0 1px var(--cobalt)}
.thermo{position:absolute;right:-8px;bottom:6%;display:flex;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--albero)}
.thermo div{display:flex;flex-direction:column;padding:10px 16px}
.thermo div+div{border-left:1px dashed rgba(242,236,224,.35)}
.thermo small{font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
.thermo b{font:600 2rem/1 var(--fm)}
.thermo .hot{color:#ff9c6b}.thermo .cold{color:var(--sky);transition:color .6s}

.tilestrip{height:64px;background:url(/img/azulejo.svg) 0 0/64px repeat-x;border-block:2px solid var(--ink)}

/* ── Secciones genéricas ── */
.sec{padding:clamp(80px,10vw,140px) 0;position:relative}
.sec__head{margin-bottom:clamp(36px,5vw,64px);max-width:900px}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--cobalt);margin:0 0 18px}
.sec h2{font:900 clamp(2.5rem,6.4vw,5.4rem)/.9 var(--fb);font-stretch:62%;text-transform:uppercase;letter-spacing:-.003em}
.sec__intro{max-width:56ch;margin-top:22px;font-size:1.08rem;color:var(--ink-2)}
.soft{color:var(--mute)}
.js .rise{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ── Catálogo de servicios ── */
.rows{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.row{position:relative;display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) 40px;align-items:center;gap:24px;padding:24px 12px;border-top:2px solid var(--ink);text-decoration:none;isolation:isolate;overflow:hidden}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cobalt);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.row--volt::before{background:var(--albero)}
.row__n{font-size:13px;color:var(--cobalt);transition:color .3s}
.row__t{font:900 clamp(1.8rem,4vw,3.3rem)/.95 var(--fb);font-stretch:62%;text-transform:uppercase;transition:transform .45s var(--ease),color .3s}
.row__d{color:var(--ink-2);font-size:.98rem;transition:color .3s}
.row__go{justify-self:end;font:400 1.8rem/1 var(--fm);transition:transform .45s var(--ease)}
.row:hover::before,.row:focus-visible::before{transform:scaleY(1)}
.row:hover .row__t{transform:translateX(12px)}
.row:hover .row__go{transform:translateX(6px) rotate(-45deg)}
.row:not(.row--volt):hover,.row:not(.row--volt):hover .row__d,.row:not(.row--volt):hover .row__n{color:var(--paper)}
.row--volt:hover .row__n{color:var(--ink)}
.peek{position:fixed;left:0;top:0;z-index:30;width:260px;aspect-ratio:4/3;margin:0;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper-2);pointer-events:none;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) rotate(-4deg) scale(.6);transition:opacity .25s,scale .3s}
.peek.on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}

/* ── Manifiesto ── */
.manifesto{padding:clamp(90px,12vw,170px) 0;background:var(--tile);border-block:2px solid var(--ink)}
.manifesto__txt{margin:0;max-width:1100px;font:800 clamp(1.9rem,4.6vw,4.1rem)/1.06 var(--fb);font-stretch:78%;text-transform:uppercase}
.manifesto__txt .w{color:rgba(16,26,58,.14);transition:color .3s}
.manifesto__txt .w.lit{color:var(--ink)}
.manifesto__txt .w.hl.lit{color:var(--cobalt)}

/* ── Plano: ciclo frigorífico ── */
.blueprint{background:var(--cobalt);color:var(--paper)}
.blueprint .tag{color:var(--albero)}
.blueprint .soft{color:#a9bdf1}
.cycle{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.cycle__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cycle__svg{display:block;min-width:620px;width:100%;height:auto;border:2px solid rgba(242,236,224,.6);background:var(--cobalt-d)}
.cycle__svg text{font:600 12px var(--fm);fill:var(--paper);letter-spacing:.04em}
.cy-box rect{fill:none;stroke:rgba(242,236,224,.45);stroke-width:1.5;stroke-dasharray:6 5}
.cy-wall{stroke:rgba(242,236,224,.6);stroke-width:6;stroke-dasharray:2 6}
.cycle__svg .cy-small{font-size:10.5px;opacity:.7}
.pipe{fill:none;stroke:rgba(242,236,224,.22);stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.flow{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 14;animation:flow 1.1s linear infinite}
.flow--hot{stroke:var(--albero)}
.flow--cold{stroke:var(--sky)}
@keyframes flow{to{stroke-dashoffset:-16}}
.cycle__svg .cy-lbl{font-size:11px}
.cycle__svg .hotc{fill:var(--albero)}.cycle__svg .coldc{fill:var(--sky)}
.cmp{cursor:pointer;transition:transform .35s var(--spring);transform-box:fill-box;transform-origin:center}
.cmp circle,.cmp path{fill:var(--cobalt);stroke:var(--paper);stroke-width:2.5;stroke-linejoin:round;transition:stroke .25s,fill .25s}
.cmp.on circle,.cmp.on path{stroke:var(--albero);fill:#2a4fc0}
.cmp.on{transform:scale(1.06)}
.air path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 8;animation:flow 1.6s linear infinite}
.air--cold path{stroke:var(--sky)}.air--hot path{stroke:var(--albero)}
.faults{list-style:none;margin:0;padding:0;counter-reset:f}
.faults li{padding:18px 0 18px 16px;border-top:1px solid rgba(242,236,224,.35);border-left:3px solid transparent;color:#dfe6fb;font-size:.98rem;cursor:default;transition:border-color .25s,background .25s}
.faults li:last-child{border-bottom:1px solid rgba(242,236,224,.35)}
.faults li b{display:block;margin-bottom:4px;color:var(--albero);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.faults li.on{border-left-color:var(--albero);background:rgba(255,255,255,.05)}
.blueprint__cta{margin:44px 0 0}

/* ── Cuadro de averías ── */
.board__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.panel{position:relative;padding:52px clamp(16px,2.4vw,30px) 30px;background:#e6e2d8;border:2px solid var(--ink);border-radius:14px;box-shadow:10px 10px 0 var(--ink)}
.panel__screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4f4f4,#9a9a9a);border:1px solid #666}
.panel__screw::after{content:"";position:absolute;left:2px;right:2px;top:5.5px;height:1.5px;background:#555;transform:rotate(35deg)}
.panel__screw:nth-child(1){left:12px;top:12px}.panel__screw:nth-child(2){right:12px;top:12px}.panel__screw:nth-child(3){left:12px;bottom:12px}.panel__screw:nth-child(4){right:12px;bottom:12px}
.panel__label{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;padding:3px 10px;background:var(--tile);border:1px solid #9c968a;font-size:10px;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:0 6px;margin-bottom:22px}
.rail::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:34px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#b9bcc1 0 18px,#9ea2a8 18px 22px);border-block:2px solid #80858c;z-index:0}
.brk{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:150px;padding:10px 4px 8px;border:1.5px solid #a7a39a;border-radius:4px;background:linear-gradient(#fdfcf9,#efece5);cursor:pointer;font:inherit;color:var(--ink);transition:transform .15s}
.brk:active{transform:translateY(1px)}
.brk::before{content:"";width:16px;height:6px;border-radius:2px;background:#5fa66b;border:1px solid #2f5f37;transition:background .2s}
.brk[aria-checked=true]::before{background:#d2382c;border-color:#7d1f17}
.brk__body{position:relative;width:30px;height:60px;border-radius:4px;background:#d9d5cc;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.brk__lever{position:absolute;left:3px;right:3px;top:30px;height:26px;border-radius:3px;background:var(--ink);box-shadow:0 2px 0 #000,inset 0 1px 0 rgba(255,255,255,.25);transition:top .35s var(--spring),background .25s}
.brk[aria-checked=true] .brk__lever{top:4px;background:var(--cobalt)}
.brk--volt[aria-checked=true] .brk__lever{background:var(--albero)}
.brk__name{font:600 10.5px/1.15 var(--fm);text-transform:uppercase;text-align:center;letter-spacing:.02em;min-height:2.3em}
.brk:hover{border-color:var(--ink)}

.ticket{position:relative;padding:32px 26px 26px;background:var(--tile);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--cobalt)}
.ticket::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:10px;background:radial-gradient(circle at 11px 0,var(--paper) 7px,transparent 7.5px) 0 0/22px 10px repeat-x}
.ticket__top{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.12em;padding-bottom:12px;border-bottom:2px dashed var(--ink)}
.ticket__rows{margin:0}
.ticket__rows>div{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px dashed #b9b09c}
.ticket__rows dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.ticket__rows dd{margin:0;font-weight:600}
.ticket__empty{color:#a39a86;font-weight:400;font-style:italic}
.js-list span.item{display:block;animation:typeIn .35s var(--ease)}
.js-list span.item::before{content:"— ";color:var(--cobalt)}
@keyframes typeIn{from{opacity:0;transform:translateX(-8px)}}
.ticket input{width:100%;font:600 1rem var(--fb);border:0;border-bottom:2px solid var(--ink);background:transparent;padding:4px 0;color:var(--ink)}
.ticket input:focus{outline:0;border-color:var(--cobalt)}
.ticket__msg{margin:16px 0 18px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--wa);font-size:.93rem}
.ticket__msg .mono{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:4px}
.ticket__stamp{position:absolute;right:-18px;top:-30px;background:var(--tile);padding:8px 10px;border:3px double var(--rust);color:var(--rust);font:700 11px/1.15 var(--fm);text-transform:uppercase;text-align:center;letter-spacing:.06em;transform:rotate(-12deg) scale(1.8);opacity:0;pointer-events:none}
.ticket.stamped .ticket__stamp{animation:stamp .4s var(--ease) forwards}
@keyframes stamp{to{transform:rotate(-12deg) scale(1);opacity:.85}}

/* ── Para quién ── */
.who{background:var(--paper-2);border-top:2px solid var(--ink)}
.who__cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.who__cols article{padding:32px 32px 8px 0}
.who__cols article+article{padding-left:32px;border-left:2px solid var(--ink)}
.who__cols svg{width:58px;height:58px;fill:none;stroke:var(--cobalt);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.who__cols h3{font:900 1.9rem/1 var(--fb);font-stretch:62%;text-transform:uppercase;margin-bottom:12px}
.who__cols p{color:var(--ink-2)}

/* ── Trabajos ── */
.ba{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(60px,8vw,110px)}
.ba__frame{position:relative;aspect-ratio:3/4;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--albero);overflow:hidden;--x:50%;background:var(--paper-2)}
.ba__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--paper);box-shadow:0 0 0 1px var(--ink);pointer-events:none}
.ba__line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font:700 14px var(--fm)}
.ba__tag{position:absolute;bottom:12px;padding:4px 8px;background:var(--ink);color:var(--paper);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.ba__tag--a{left:12px}.ba__tag--b{right:12px;background:var(--cobalt)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba__txt h3{font:900 clamp(2rem,4vw,3.2rem)/.95 var(--fb);font-stretch:62%;text-transform:uppercase;margin-bottom:16px}
.ba__txt p{color:var(--ink-2);max-width:46ch}
.ba__hint{font-size:12px;color:var(--cobalt)!important;text-transform:uppercase;letter-spacing:.12em}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:18px}
.m{grid-row:span 2;margin:0;display:grid;grid-template-rows:1fr auto;min-height:0}
.m--tall{grid-row:span 3}
.m--wide{grid-column:span 2}
.m button{display:block;padding:0;border:2px solid var(--ink);background:var(--paper-2);cursor:zoom-in;overflow:hidden;min-height:0}
.m img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.m button:hover img{transform:scale(1.05)}
.m figcaption{padding:8px 0 0;font-size:.88rem;font-weight:600}
.m figcaption .mono{color:var(--cobalt);margin-right:6px;font-size:11px}

/* ── Zonas / mapa ── */
.zones{background:var(--paper);border-top:2px solid var(--ink)}
.zones__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center}
.zones__copy>p{color:var(--ink-2);max-width:52ch}
.towns{list-style:none;padding:0;margin:20px 0 30px;display:flex;flex-wrap:wrap;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;line-height:2}
.towns li::after{content:"·";margin:0 9px;color:var(--cobalt)}
.towns li:last-child::after{content:none}
.map{margin:0;border:2px solid var(--ink);background:var(--tile);box-shadow:10px 10px 0 var(--ink)}
.map svg{display:block;width:100%;height:auto}
.map__ring{fill:none;stroke:var(--ink);stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:4 6}
.map__km{font:600 11px var(--fm);fill:var(--mute)}
.river{fill:none;stroke:var(--cobalt);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--rv,0)}
.js .map .river{--rv:1;transition:stroke-dashoffset 2.4s var(--ease)}
.js .map.in .river{--rv:0}
.river__lbl{font:700 15px var(--fs);fill:var(--cobalt);letter-spacing:.2em;text-transform:uppercase}
.town circle{fill:var(--tile);stroke:var(--ink);stroke-width:2.2}
.town text{font:600 13px var(--fb);fill:var(--ink)}
.town--main circle{fill:var(--cobalt);stroke-width:3}
.town--main text{font:900 20px var(--fb);font-stretch:62%;letter-spacing:.04em}
.js .map .town{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--spring)}
.js .map.in .town{opacity:1;transform:none}
.map__n path{fill:var(--ink)}
.map__n text{font:700 13px var(--fm);fill:var(--ink)}

/* ── FAQ ── */
.faq{border-top:2px solid var(--ink);background:var(--paper-2)}
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.faq__list{border-bottom:2px solid var(--ink)}
.faq__list details{border-top:2px solid var(--ink)}
.faq__list summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font:700 1.2rem/1.3 var(--fb)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary .mono{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--ink);font-size:13px;font-weight:600;transition:background .25s,color .25s}
.faq__list summary::after{content:"";margin-left:auto;flex:none;width:18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 100% no-repeat;transition:transform .4s var(--spring)}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details[open] summary .mono{background:var(--cobalt);color:var(--paper);border-color:var(--cobalt)}
.faq__list details p{padding:0 40px 22px 48px;color:var(--ink-2);margin:0;animation:fade .4s}

/* ── Cierre ── */
.close{padding:clamp(80px,11vw,150px) 16px;background:url(/img/azulejo.svg) center/96px;border-top:2px solid var(--ink);display:grid;place-items:center}
.close__card{position:relative;max-width:760px;width:100%;padding:clamp(36px,6vw,64px) clamp(22px,5vw,60px);background:var(--tile);border:3px solid var(--cobalt);outline:2px solid var(--cobalt);outline-offset:6px;text-align:center;box-shadow:0 0 0 14px var(--tile),14px 14px 0 14px var(--ink)}
.close__card .tag{display:inline-block}
.close h2{font:900 clamp(2.6rem,7vw,5.4rem)/.9 var(--fb);font-stretch:62%;text-transform:uppercase;margin-bottom:18px}
.close h2 em{font:900 .78em/1 var(--fs);font-style:normal;color:var(--cobalt);letter-spacing:.04em}
.close p{color:var(--ink-2);font-size:1.08rem}
.close .btn{margin:10px 0 18px}
.close__num{font-size:13px;letter-spacing:.14em!important;margin:0}

/* ── Pie ── */
.foot{background:var(--ink);color:#c9cde0;padding:64px 0 120px;font-size:.95rem}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot .mono{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--albero);margin-bottom:10px}
.logo--foot{margin-bottom:14px}
.logo--foot .logo__txt b{color:var(--paper)}
.logo--foot .logo__txt i{color:var(--sky)}
.logo--foot .logo__tile{border-color:var(--paper)}
.foot__nap{font-style:normal;display:flex;flex-direction:column;gap:2px}
.foot__nap strong{color:#fff}
.foot__links{display:flex;flex-direction:column;gap:4px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--albero)}
.foot__copy{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#8d93ad}

/* ── WhatsApp flotante ── */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:flex-end;gap:10px;text-decoration:none;color:var(--ink)}
.fab__btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--wa);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.fab__btn svg{width:32px;height:32px}
.fab:hover .fab__btn{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.fab:active .fab__btn{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.fab__btn{animation:nudge 6s 5s infinite}
@keyframes nudge{0%,90%,100%{rotate:0deg}92%{rotate:-12deg}94%{rotate:10deg}96%{rotate:-6deg}98%{rotate:3deg}}
.fab__note{margin-bottom:10px;padding:8px 12px;background:var(--tile);border:2px solid var(--ink);font:600 12px/1.25 var(--fm);box-shadow:3px 3px 0 var(--ink);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--spring);pointer-events:none;white-space:nowrap}
.fab.tip .fab__note,.fab:hover .fab__note{opacity:1;transform:none}

/* ── Visor ── */
.lb{border:2px solid var(--ink);padding:10px;background:var(--tile);max-width:min(92vw,1000px);max-height:92vh;box-shadow:10px 10px 0 var(--ink)}
.lb::backdrop{background:rgba(16,26,58,.82)}
.lb[open]{animation:lbIn .35s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:translateY(16px)}}
.lb img{max-height:78vh;width:auto;margin:auto}
.lb__cap{margin:10px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.lb__close{position:absolute;top:-2px;right:-2px;width:44px;height:44px;border:2px solid var(--ink);background:var(--albero);font:700 18px var(--fm);cursor:pointer}

/* ── Responsive ── */
@media (max-width:1120px){
  .bar__meta{display:none}
}
@media (max-width:960px){
  .bar__nav{display:none}
  .bar__burger{display:block}
  .bar .btn--sm{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__art{height:auto;min-height:0;aspect-ratio:1/1.02;max-width:620px;width:100%;margin-inline:auto}
  .cycle,.board__grid,.zones__grid,.faq__grid,.ba{grid-template-columns:1fr}
  .ba__frame{max-width:520px}
  .row{grid-template-columns:44px 1fr 30px;gap:6px 14px}
  .row__n{grid-column:1;grid-row:1}
  .row__t{grid-column:2;grid-row:1}
  .row__d{grid-column:2;grid-row:2}
  .row__go{grid-column:3;grid-row:1}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .who__cols{grid-template-columns:1fr}
  .who__cols article+article{padding-left:0;border-left:0;border-top:2px solid var(--ink)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  :root{--bar:58px}
  body{font-size:16px}
  .bar{gap:10px}
  .bar .btn--sm span{display:none}
  .bar .btn--sm{padding:.55em}
  .logo__txt b{font-size:1.2rem}
  .hero__cta .btn{width:100%;justify-content:center}
  .plaque{width:58%;left:0;top:4%}
  .hero__photo{width:86%;height:80%}
  .hero__inset{width:52%}
  .thermo{right:0}
  .thermo b{font-size:1.5rem}
  .rail{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .rail::before{display:none}
  .brk{height:136px}
  .panel{box-shadow:6px 6px 0 var(--ink)}
  .mosaic{grid-auto-rows:120px;gap:12px}
  .cycle__scroll{margin-inline:-16px;padding:0 16px 6px}
  .m--wide{grid-column:span 2}
  .foot__grid{grid-template-columns:1fr}
  .fab__note{display:none}
  .faq__list details p{padding:0 0 20px}
  .tilestrip{height:48px;background-size:48px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
  .flow,.air path{animation:none!important}
  .peek{display:none}
}