/* Gulf Spoke Cycle Works (DEMO) - taller de bicis: pegboard, etiquetas de cartulina, banco de madera */
:root{
  --bg:#1a3530;        /* muestreado: pegboard turquesa foto pegboard, bajado de luminosidad */
  --bg2:#12261f;       /* muestreado: sombra pegboard foto hero, mas oscuro */
  --wood:#3b1d0c;      /* muestreado: banco de madera foto hero (#5f3012), mas oscuro */
  --wood2:#2a1508;
  --manila:#e4ccaa;    /* muestreado: etiqueta foto flatlay (#dabb9b), mas claro */
  --manila2:#d6b894;
  --ink:#1f2a24;       /* tinta sobre cartulina, del pegboard oscuro */
  --stamp:#4a1a06;     /* sello sobre cartulina */
  --orange:#cb6636;    /* muestreado: palanca naranja foto flatlay */
  --text:#efe3cf;
  --muted:#c3b69f;
  --nav-h:calc(64px + env(safe-area-inset-bottom,0px));
  --e:cubic-bezier(.22,1,.36,1);
  --f-disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-body:'Bitter',Georgia,serif;
  --f-stamp:'Special Elite','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:var(--nav-h)}
body{
  background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:clamp(1rem,.94rem + .3vw,1.18rem);line-height:1.62;
  padding-bottom:var(--nav-h);overflow-x:clip;
  font-feature-settings:"liga","kern";
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--orange);color:#1b0f07}
:focus-visible{outline:3px solid var(--manila);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- pegboard: fondo con atmosfera ---------- */
.peg{
  position:relative;background-color:var(--bg);
  background-image:
    radial-gradient(circle at 12px 12px,rgba(0,0,0,.38) 0 2.6px,rgba(255,235,200,.05) 3px 3.6px,transparent 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,200,140,.07),transparent 60%);
  background-size:26px 26px,100% 100%;
}
.peg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.35));}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{position:relative;z-index:1;width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
section{position:relative;padding-block:clamp(4.5rem,9vw,8rem)}

/* ---------- tipografia ---------- */
.disp{font-family:var(--f-disp);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
h1.disp{font-size:clamp(2.9rem,9.4vw,7.6rem);font-weight:900;letter-spacing:-.015em}
h2.disp{font-size:clamp(2.5rem,7vw,5.2rem);margin-bottom:.35em}
.stamp{font-family:var(--f-stamp);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
p{max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.3rem);color:var(--text)}
.muted{color:var(--muted)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border:2px solid var(--manila);
  background:transparent;color:var(--text);text-decoration:none;font-family:var(--f-disp);font-weight:800;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  border-radius:4px;transition:transform .3s var(--e),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-3px) rotate(-.6deg);background:var(--manila);color:var(--ink)}
.btn:active{transform:translateY(0)}
.btn.hot{background:var(--orange);border-color:var(--orange);color:#1b0f07}
.btn.hot:hover{background:var(--manila);border-color:var(--manila);color:var(--ink)}
.btn svg{width:22px;height:22px;flex:none}

/* ---------- barra = frente del banco (fija abajo) ---------- */
.bench{position:fixed;z-index:50;left:0;right:0;bottom:0;height:var(--nav-h);padding:0 max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(12px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:linear-gradient(#4a2510,var(--wood) 30%,var(--wood2));border-top:2px solid #6b3a1c;box-shadow:0 -3px 6px rgba(0,0,0,.3)}
.bench::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.5) 6px 7px,transparent 7px 19px)}
.bench>*{position:relative}
.bench a.tg,.bench button.tg{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;
  background:var(--manila);color:var(--ink);border:0;text-decoration:none;font-family:var(--f-stamp);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-right:22px;transition:transform .25s var(--e),background .2s}
.bench a.tg:hover,.bench button.tg:hover{background:#fff1da;transform:translateY(-2px)}
.bench a.tg svg,.bench button.tg svg{width:18px;height:18px;flex:none}
.bench .call{background:var(--orange);color:#1b0f07}
.bench .call:hover{background:#e07a48}
.rack-links{list-style:none;position:absolute;right:10px;left:10px;bottom:calc(100% + 10px);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--wood);border:2px solid #6b3a1c;border-radius:6px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .35s var(--e),visibility 0s .35s}
.bench.open .rack-links{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--e)}
.rack-links a{display:flex;align-items:center;min-height:48px;padding:0 14px;background:var(--manila);color:var(--ink);text-decoration:none;font-family:var(--f-stamp);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;border-radius:3px 12px 12px 3px}
.rack-links a:hover{background:#fff1da}

/* conmutador de idioma: pastilla con thumb, dentro del frente del banco */
.lang{position:relative;display:grid;grid-template-columns:1fr 1fr;width:92px;height:44px;border:2px solid #7a4a28;border-radius:999px;background:rgba(0,0,0,.35);padding:2px;flex:none}
.lang .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:999px;background:var(--manila);transition:transform .35s var(--e)}
html[lang=es] .lang .thumb{transform:translateX(100%)}
.lang button{position:relative;z-index:1;background:none;border:0;font-family:var(--f-stamp);font-size:.95rem;letter-spacing:.06em;color:#e4d3b6;min-height:40px;border-radius:999px}
html[lang=en] .lang button[data-l=en],html[lang=es] .lang button[data-l=es]{color:var(--ink);font-weight:700}

@media (min-width:980px){
  .bench{justify-content:center;gap:22px}
  .bench .menu{display:none}
  .rack-links{position:static;opacity:1;visibility:visible;transform:none;display:flex;gap:6px;padding:0;background:none;border:0;box-shadow:none;transition:none}
  .rack-links a{min-height:44px;padding:0 14px;font-size:.92rem;background:transparent;color:var(--text);border-radius:3px}
  .rack-links a:hover{background:var(--manila);color:var(--ink)}
}
@media (max-width:359px){.bench a.tg,.bench button.tg{padding:0 8px 0 10px;padding-right:16px;font-size:.85rem}.lang{width:84px}}

/* ---------- HOME ---------- */
.hero{padding:0;min-height:min(100svh,940px);display:flex;align-items:flex-end;background:var(--bg2);overflow:clip}
.hero .ph{position:absolute;inset:-4% 0 0;height:108%;z-index:0}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,22,18,.5) 0%,rgba(10,22,18,.05) 28%,rgba(10,22,18,.5) 62%,rgba(10,22,18,.93) 100%),linear-gradient(90deg,rgba(10,22,18,.72),transparent 70%)}
.hero .wrap{padding-bottom:calc(var(--nav-h) + 26px);padding-top:clamp(90px,16vh,160px)}
.hero .kick{display:inline-block;color:#f4ead9;margin-bottom:1rem;border-top:2px solid var(--orange);padding:.55rem .7rem .4rem;background:rgba(10,22,18,.72)}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--e)}
.go .ln>span{transform:none}
.go .ln:nth-child(2)>span{transition-delay:.1s}.go .ln:nth-child(3)>span{transition-delay:.2s}
.hero .lead{margin-top:1.2rem;max-width:46ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:1.6rem;align-items:center}
.hero .acts .alt{font-family:var(--f-stamp);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
/* firma: la etiqueta colgada que se balancea */
.hang{position:absolute;z-index:3;top:0;right:clamp(14px,8vw,120px);transform-origin:50% 0;animation:swing 6s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(0,0,0,.45));cursor:grab}
.hang .str{display:block;width:2px;height:clamp(40px,9vh,90px);margin:0 auto;background:linear-gradient(#cdb48d,#8c7452)}
.hang .tag{width:clamp(138px,34vw,220px);padding-top:38px}
.hang.kick-it{animation:swing-big 2.2s var(--e) 1}
@keyframes swing{0%,100%{transform:rotate(-3.2deg)}50%{transform:rotate(3.2deg)}}
@keyframes swing-big{0%{transform:rotate(-14deg)}30%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}100%{transform:rotate(-3.2deg)}}

/* ---------- etiqueta de cartulina (objeto base) ---------- */
.tagw{position:relative;transform-origin:50% 0;filter:drop-shadow(0 12px 12px rgba(0,0,0,.4))}
.tag{position:relative;background:linear-gradient(165deg,#ecd7b8,var(--manila2));color:var(--ink);padding:48px 18px 20px;
  clip-path:polygon(22% 0,78% 0,100% 11%,100% 100%,0 100%,0 11%)}
.tag::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.tag::after{content:"";position:absolute;top:14px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--bg2);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 0 0 4px rgba(255,255,255,.28)}
.tag .no{color:var(--stamp);display:block;margin-bottom:.35rem}
.tag .hand{font-family:var(--f-stamp);font-size:.95rem;line-height:1.5;color:var(--ink)}
.tag .hand b{font-weight:400;background:linear-gradient(transparent 62%,rgba(203,102,54,.4) 62%)}

/* ---------- SERVICES: el rack de etiquetas ---------- */
#services{background:var(--bg)}
.q{display:flex;flex-direction:column;gap:.3rem;margin-bottom:clamp(1.6rem,4vw,3rem)}
.q .stamp{color:var(--manila)}
.rod{position:relative;height:12px;margin:0 -4px 0;border-radius:6px;background:linear-gradient(#a9743f,#6a3f1c 60%,#3d200c);box-shadow:0 6px 10px rgba(0,0,0,.45)}
.tags{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding-inline:0}
.tags li{position:relative;padding-top:34px}
.tags li::before{content:"";position:absolute;top:0;left:50%;width:2px;height:48px;background:linear-gradient(#cdb48d,#8c7452)}
.tags .tagw{transform:rotate(var(--r,0deg));margin-bottom:26px}
.tags li:nth-child(odd){--r:-1.6deg}.tags li:nth-child(even){--r:1.4deg;padding-top:56px}
.tags li:nth-child(even)::before{height:70px}
.tags .tag{padding-inline:14px;min-height:238px}
.tags h3{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:.95;margin-bottom:.4rem}
.tags .price{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.1rem,8vw,3.1rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tags .price small{font-family:var(--f-stamp);font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:block;color:var(--stamp)}
.tags p{font-size:.92rem;line-height:1.45;margin-top:.55rem;color:#1f2a24}
.tags .ready{display:inline-block;margin-top:.7rem;border:2px solid var(--stamp);color:var(--stamp);padding:.2rem .5rem;transform:rotate(-3deg);font-size:.7rem}
@media (min-width:760px){
  .tags{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
  .tags li:nth-child(even){padding-top:34px}.tags li:nth-child(even)::before{height:48px}
  .tags li:nth-child(3n+2){padding-top:70px}.tags li:nth-child(3n+2)::before{height:84px}
  .tags .tag{min-height:268px;padding-inline:20px}
}
.tagw{transition:transform .5s var(--e)}
@media (hover:hover){.tags .tagw:hover{transform:rotate(calc(var(--r,0deg) * -2.4)) translateY(-4px);}}

/* e-bike + alquiler */
.strip{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(3rem,7vw,6rem);align-items:stretch}
.ebike{position:relative;min-height:340px;display:flex;align-items:flex-end;border-radius:6px;overflow:clip;border:2px solid rgba(239,227,207,.5);outline:2px solid rgba(239,227,207,.25);outline-offset:6px}
.ebike img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.ebike .cap{position:relative;z-index:1;padding:1.4rem;background:linear-gradient(transparent,rgba(8,16,13,.9) 45%);width:100%}
.ebike h3{font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(2rem,6vw,3.2rem);line-height:.95}
.ebike p{font-size:.98rem;margin:.5rem 0 1rem}
.rent{position:relative;border-radius:6px;overflow:clip;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;border:2px solid rgba(239,227,207,.5);outline:2px solid rgba(239,227,207,.25);outline-offset:6px}
.rent>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.rent::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,16,13,.86),rgba(8,16,13,.3) 42%,rgba(8,16,13,.9))}
.rent .hd{position:relative;z-index:1;padding:1.4rem 1.4rem 0;margin-bottom:auto}
.rent h3{font-family:var(--f-disp);text-transform:uppercase;font-weight:900;font-size:clamp(2rem,6vw,3.2rem);line-height:.95}
.stubs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:1.2rem 1rem 1.4rem}
.stub{position:relative;background:var(--manila);color:var(--ink);padding:.7rem .55rem .7rem .9rem;text-align:left;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) ;mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000)}
.stub::after{content:"";position:absolute;left:0;top:6px;bottom:6px;border-left:2px dashed rgba(31,42,36,.35)}
.stub b{display:block;font-family:var(--f-disp);font-weight:900;font-size:clamp(1.6rem,6vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums}
.stub span{font-family:var(--f-stamp);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);line-height:1.2;display:block;margin-top:.2rem}
.rent .rent-note{position:relative;z-index:1;padding:0 1.4rem 1.4rem;font-size:.9rem;color:var(--text)}
@media (min-width:900px){.strip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* ---------- ABOUT: la orden de trabajo sobre el banco ---------- */
#about{background:var(--wood);color:var(--text)}
#about::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 140px),radial-gradient(120% 80% at 20% 0%,rgba(255,190,120,.12),transparent 60%)}
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;align-items:start}
.bench-photo{position:relative;margin:0 0 0 2%;transform:rotate(-1.6deg);border:10px solid var(--manila);border-bottom-width:44px;box-shadow:0 24px 40px rgba(0,0,0,.5);background:var(--manila)}
.bench-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bench-photo figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center;color:var(--ink);font-family:var(--f-stamp);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.sheet{position:relative;background:linear-gradient(170deg,#ecd7b8,var(--manila));color:var(--ink);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 26px 44px rgba(0,0,0,.5);transform:rotate(.7deg)}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:multiply;background-image:repeating-linear-gradient(transparent 0 31px,rgba(31,42,36,.2) 31px 32px)}
.sheet>*{position:relative}
.sheet h2{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(2.1rem,6.4vw,4rem);line-height:.95;margin:.4rem 0 1rem;text-wrap:balance}
.sheet .stamp{color:var(--stamp)}
.sheet dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1rem;font-family:var(--f-stamp);font-size:.92rem;margin-bottom:1.2rem}
.sheet dt{color:var(--stamp);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;padding-top:.12rem}
.sheet p{color:#2c342d}
.rules{list-style:none;margin-top:1.3rem;display:grid;gap:.7rem}
.rules li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.6rem;align-items:start;font-size:.98rem}
.rules li::before{content:attr(data-n);font-family:var(--f-disp);font-weight:900;font-size:2rem;line-height:.9;color:var(--orange)}
@media (min-width:900px){.about{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0}.sheet{margin-left:-1.2rem;padding-left:clamp(2.6rem,4vw,3.4rem)}.bench-photo{margin:3rem 2.2rem 0 0;z-index:2}}

/* ---------- GALLERY: el pegboard con contornos pintados ---------- */
#gallery{background:var(--bg2)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,32vw,200px);gap:22px 20px;margin-top:2rem;padding:8px}
.gal figure{position:relative;border-radius:10px;transition:transform .45s var(--e)}
.gal figure::before{content:"";position:absolute;inset:-8px;border:2px solid rgba(239,227,207,.6);border-radius:16px;pointer-events:none}
.gal figure img{width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:0 14px 22px rgba(0,0,0,.5)}
.gal figcaption{position:absolute;left:8px;bottom:8px;right:8px;padding:.35rem .6rem;background:rgba(10,10,12,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f4ead9;font-family:var(--f-stamp);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;line-height:1.3}
.g1{grid-column:span 2;grid-row:span 2}.g2,.g3,.g4,.g5{grid-row:span 2}
.g6{grid-column:span 2;grid-row:span 1}
.gal .empty{display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;color:var(--manila);border-radius:10px;min-height:100%;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.3rem,5vw,2rem);text-transform:uppercase;line-height:1;text-align:center;padding:10px}
.gal .empty::before{border-style:dashed;border-color:var(--orange);inset:0;border-radius:12px}
.gal .empty:hover{background:rgba(203,102,54,.18)}
.gal .empty svg{width:48px;height:48px;flex:none}
@media (min-width:860px){
  .gal{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(110px,14.5vw,230px);gap:26px}
  .g1{grid-column:1/8;grid-row:1/3}.g2{grid-column:8/13;grid-row:1/2}.g3{grid-column:8/13;grid-row:2/3}
  .g4{grid-column:1/5;grid-row:3/5}.g5{grid-column:5/10;grid-row:3/5}.g6{grid-column:10/13;grid-row:3/5}
  .gal .empty{flex-direction:column}
}
@media (hover:hover){.gal figure:hover{transform:translateY(-8px) rotate(-.7deg)}}

/* ---------- CONTACT: el mostrador de entrega ---------- */
#contact{background:var(--manila);color:var(--ink)}
#contact::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;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='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
#contact .stamp{color:var(--stamp)}
.drop{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.drop h2{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,8.4vw,6.4rem);line-height:.92;text-wrap:balance}
.addr{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,5vw,3rem);line-height:1;margin:1rem 0 .6rem}
.addr a{text-decoration:none;border-bottom:4px solid var(--orange)}
.addr a:hover{background:rgba(203,102,54,.22)}
.phone{display:inline-block;font-family:var(--f-disp);font-weight:900;font-size:clamp(2.4rem,9.6vw,5.4rem);line-height:1;text-decoration:none;font-variant-numeric:tabular-nums;color:var(--ink);padding:.1em 0}
.phone:hover{color:var(--stamp)}
.open{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-stamp);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);padding:.45rem .8rem;border-radius:4px;margin-top:.4rem}
.open i{width:12px;height:12px;border-radius:50%;background:#7b7b72;flex:none}
.open.on i{background:#2f8a46;box-shadow:0 0 0 4px rgba(47,138,70,.25)}
.open.off i{background:var(--stamp)}
.hours{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border-top:3px solid var(--ink);margin-top:.4rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .3rem;border-bottom:1px solid rgba(31,42,36,.35);font-family:var(--f-stamp);font-size:.95rem}
.hours li.today{background:var(--ink);color:var(--manila)}
.hours li.today b{color:#f6a579}
.hours b{font-weight:400;text-align:right}
.contact-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4rem}
.contact-b .btn{border-color:var(--ink);color:var(--ink)}
.contact-b .btn:hover{background:var(--ink);color:var(--manila)}
.contact-b .btn.hot{background:var(--orange);border-color:var(--ink);color:#1b0f07}
.contact-b .btn.hot:hover{background:var(--ink);color:var(--manila)}
.plan{border:3px solid var(--ink);background:#d9c09c;border-radius:4px;padding:10px;position:relative}
.plan svg{width:100%;height:auto;display:block}
.plan figcaption{font-family:var(--f-stamp);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.5rem;color:var(--stamp)}
.plan text{font-family:'Special Elite','Courier New',monospace;font-size:13px;fill:#1f2a24;letter-spacing:.05em}
@media (min-width:900px){.drop{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem 4rem;align-items:start}.hours{grid-template-columns:repeat(7,minmax(0,1fr));border-top:3px solid var(--ink)}
  .hours li{flex-direction:column;gap:.3rem;border-bottom:0;border-right:1px solid rgba(31,42,36,.35);padding:.7rem .4rem;font-size:.8rem;text-align:left}.hours li:last-child{border-right:0}.hours b{text-align:left}
  .drop .wide{grid-column:1/-1}}

/* ---------- FAQ: preguntas de mostrador ---------- */
#faq{background:var(--bg)}
.faq{margin-top:1.5rem;display:grid;gap:12px;max-width:860px}
.faq details{background:rgba(8,16,13,.45);border:2px solid rgba(239,227,207,.35);border-radius:4px}
.faq summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:56px;padding:.7rem 1rem;cursor:pointer;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.25rem,4.4vw,1.7rem);text-transform:uppercase;line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";font-family:var(--f-stamp);font-size:1.2rem;flex:none;width:34px;height:34px;display:grid;place-items:center;background:var(--manila);color:var(--ink);border-radius:50%;transition:transform .35s var(--e),background .25s}
.faq details[open] summary::before{content:"!";background:var(--orange);transform:rotate(-12deg)}
.faq summary:hover{background:rgba(239,227,207,.08)}
.faq .ans{padding:0 1rem 1.1rem 64px;color:var(--text)}

/* ---------- BLOG: copias de la libreta de recibos ---------- */
#blog{background:var(--wood);overflow:clip}
#blog::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 140px)}
.notes{display:grid;gap:22px;margin-top:2rem;grid-template-columns:minmax(0,1fr)}
.note{position:relative;background:linear-gradient(170deg,#ecd7b8,var(--manila));color:var(--ink);box-shadow:0 18px 30px rgba(0,0,0,.45);padding-left:46px;transform:rotate(var(--r,0deg))}
.note:nth-child(1){--r:-.5deg}.note:nth-child(2){--r:.4deg}.note:nth-child(3){--r:-.3deg}
.note::before{content:"";position:absolute;left:30px;top:0;bottom:0;border-left:3px dashed rgba(31,42,36,.4)}

.note summary{list-style:none;cursor:pointer;display:block;padding:1.1rem 1.1rem 1rem .6rem;min-height:56px}
.note summary::-webkit-details-marker{display:none}
.note .stamp{color:var(--stamp);display:block}
.note h3{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.55rem,5.4vw,2.2rem);line-height:.98;margin:.35rem 0 .4rem}
.note summary p{font-size:.95rem;color:#2c342d}
.note .more{display:inline-block;margin-top:.5rem;font-family:var(--f-stamp);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);border-bottom:2px solid var(--stamp)}
.note[open] .more{display:none}
.note .body{padding:0 1.1rem 1.3rem .6rem;color:#232b25;font-size:.98rem}
.note .body p+p{margin-top:.7rem}
@media (min-width:900px){.notes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}

/* ---------- pie ---------- */
footer{background:var(--bg2);padding:2.4rem 0 1.4rem;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:center}
footer .demo{font-family:var(--f-stamp);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
footer a{text-underline-offset:4px}

/* ---------- movimiento ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.tags .rv.tagw{opacity:1;transform:rotate(-9deg) translateY(-14px)}
.tags .rv.tagw.in{opacity:1;transform:rotate(var(--r,0deg));transition:transform 1.4s cubic-bezier(.3,1.6,.5,1) var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.tags .rv.tagw{opacity:1!important;transform:none!important}
  .tags .rv.tagw{transform:rotate(var(--r,0deg))!important}
  .ln>span{transform:none!important}
}
.nojs .rv{opacity:1;transform:none}
.nojs .ln>span{transform:none}

@media (max-width:640px){
  .hang{right:10px}
  .hang .str{height:28px}
  .hang .tag{width:118px;padding:34px 10px 12px}
  .hang .tag .hand{font-size:.72rem;line-height:1.4}
  .hang .tag .no{font-size:.62rem}
  .hero .kick{font-size:.7rem}
}
.addr{line-height:1.12}.addr a{display:inline-block;padding-bottom:.05em}
html{overflow-x:clip}section,footer{overflow-x:clip}.tags{padding-inline:6px}
/* capas: las texturas van DETRAS del texto, en su propio contexto de apilado */
section,.tag,.sheet,.note,.hero{isolation:isolate}
.grain::before,#about::before,#blog::before,#contact::before,.peg::after,.tag::before,.sheet::before{z-index:-1}
.hero .scrim{z-index:0}.hero .ph{z-index:-1}.hero .wrap{z-index:2}
.rent{isolation:isolate}.rent>picture,.rent>img{position:absolute;inset:0;z-index:-2}.rent>picture img{position:absolute;inset:0}.rent::after{z-index:-1}
.gal figure{isolation:isolate}.gal figure::before{z-index:-1}
.note::before,.bench::before{z-index:-1}.note{background:radial-gradient(circle at 6px 17px,var(--wood) 0 5px,transparent 6px) 8px 18px/12px 34px repeat-y,linear-gradient(170deg,#ecd7b8,var(--manila))}.bench{isolation:isolate}