/* El Chiki Barber · mobile barbershop — black and gold, like the decal on the van */
:root{
  /* Dark gray background (02-10), not pure black: that way the photos, the gold and the sections stand out */
  --black:#1B1B1F; --charcoal:#24242A; --graphite:#2E2E35; --black-rgb:27,27,31; --line:rgba(var(--gold-rgb),.22);
  --text:#F4F1EA; --muted:#A9A398;
  /* The brand gold, from highlight to shadow. Changing the gold means changing only this block */
  /* Deep 24k gold (02-10): more saturated and more orange than the metallic yellow used before */
  --gold-bright:#FFE9A8; --gold-light:#FFD66E; --gold-soft:#F2B93E; --gold:#DB9B21; --gold-dark:#9A6507;
  --gold-rgb:219,155,33; --gold-ink:#1A1206;
  --gold-gradient:linear-gradient(115deg,var(--gold-dark) 0%,var(--gold) 22%,var(--gold-light) 42%,var(--gold-soft) 58%,var(--gold) 78%,var(--gold-soft) 100%);
  /* metallic gold of the logo: light on top, bronze in the middle, a reflection at the bottom */
  --gold-metal:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold-soft) 30%,var(--gold) 52%,var(--gold-dark) 68%,var(--gold) 86%,var(--gold-soft) 100%);
  --radius:4px; --max-width:1240px; --gutter:clamp(16px,4vw,44px);
  /* Type (decision B, 2026-10-22): Cormorant Garamond for headings, prices and the signature; Archivo for text, nav, labels and buttons */
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-title:'Archivo',system-ui,sans-serif; --font-body:'Archivo',system-ui,-apple-system,sans-serif;
  /* Archivo SemiCondensed caps for nav and buttons (owner decision B). Themes with their own UI font reset these to `initial`, so every var() falls back to the old values */
  --ui-stretch:semi-condensed; --ui-tracking:.08em; --ui-nav-weight:600;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Fixed header height; the hero padding and anchor offsets read it */
  --header-height:90px;
}
@media (max-width:1099px){:root{--header-height:72px}}
@media (max-width:640px){:root{--header-height:64px}}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}  /* no blue Android highlight on tap */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--black);color:var(--text);font:400 16px/1.7 var(--font-body);overflow-x:clip}
body.loading{overflow:hidden}
html.booking-open,html.booking-open body{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--gold-ink)}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.gold{background-image:linear-gradient(105deg,transparent 42%,rgba(255,244,205,.65) 50%,transparent 58%),var(--gold-metal);background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:150% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes shine{0%,55%{background-position:150% 0,0 0}100%{background-position:-50% 0,0 0}}
.eyebrow{font:600 12px/1 var(--font-title);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.005em}
h1,h2{line-height:1.04;letter-spacing:-.015em}
/* The gold words of the headings use the italic of the same Cormorant; extra room for the letter tails */
h1 .gold,h2 .gold,.band figcaption .gold{font-style:italic;font-weight:500;padding:0 .06em .1em 0}
/* Decision A: the accent stays only in the hero headline and in "La carta de servicios"; every other heading is one plain color */
h2 .gold:not(.services *),.band figcaption span.gold{background:none;color:inherit;font-style:normal;font-weight:inherit;padding:0}
h2{font-size:clamp(40px,5.6vw,70px);margin:16px 0 18px}
.intro{color:var(--muted);max-width:560px;font-size:17px}
section{padding:clamp(64px,8vw,112px) 0;position:relative}
section[id],#ubicacion{scroll-margin-top:var(--header-height)}  /* anchors land below the fixed header (Lenis reads it too); #ubicacion is a div */
.split-line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}

/* ————— Intro: the scissors cut the sheet ————— */
#curtain{position:fixed;inset:0;z-index:100;pointer-events:auto;animation:curtain-failsafe .5s 7s forwards}  /* if the JS fails, it goes away on its own */
@keyframes curtain-failsafe{to{opacity:0;visibility:hidden}}
#curtain .half{position:absolute;left:0;right:0;height:50%;overflow:hidden;will-change:transform,clip-path}
#curtain .top{top:0}
#curtain .bottom{bottom:0}
#curtain .sheet{position:absolute;left:0;right:0;height:200%;background:
  radial-gradient(60% 50% at 50% 50%,rgba(var(--gold-rgb),.10),transparent 70%),var(--black)}
#curtain .top .sheet{top:0}
#curtain .bottom .sheet{bottom:0}
#curtain .center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center}
#curtain .intro-logo{position:relative;width:min(340px,68vw);aspect-ratio:1}
#curtain .intro-logo img{clip-path:circle(0% at 50% 50%);position:absolute;inset:4%;width:92%;height:92%;border-radius:50%;box-shadow:0 30px 80px -20px rgba(var(--gold-rgb),.45)}
#curtain .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#curtain .ring circle{fill:none;stroke:url(#g-gold);stroke-width:1.6;stroke-dasharray:0 1000}
#curtain .glint{position:absolute;inset:4%;border-radius:50%;overflow:hidden;pointer-events:none}
#curtain .glint::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,244,200,.55) 50%,transparent 60%);transform:translateX(var(--glint,-120%))}
#curtain .cut-line{opacity:0;position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;overflow:visible}
#curtain .cut-line line{stroke:var(--gold);stroke-width:2;stroke-dasharray:1.2 1.2;vector-effect:non-scaling-stroke}
#curtain .intro-scissors{opacity:0;position:absolute;left:0;top:50%;width:clamp(150px,20vw,240px);margin-top:calc(clamp(150px,20vw,240px) * -.265);filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
#curtain .intro-scissors svg{width:100%;height:auto;overflow:visible}
#curtain .blade-a,#curtain .blade-b{transform-origin:0 0}

/* ————— Spinning barber pole ————— */
.stripes{animation:pole-scroll 1.4s linear infinite}
@keyframes pole-scroll{to{transform:translateY(-24px)}}

/* ————— Buttons ————— */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--radius);font:600 13px/1 var(--font-title);font-stretch:var(--ui-stretch,normal);letter-spacing:var(--ui-tracking,.14em);text-transform:uppercase;cursor:pointer;border:0;position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.button svg{width:20px;height:20px;flex:none}
.button:active{transform:translateY(1px) scale(.985)}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.button-gold{background:var(--gold-gradient);background-size:200% 100%;color:var(--gold-ink);box-shadow:0 8px 28px -10px rgba(var(--gold-rgb),.7);transition:background-position .6s var(--ease),box-shadow .3s,transform .2s var(--ease)}
.button-gold:hover{background-position:100% 0;box-shadow:0 14px 36px -10px rgba(var(--gold-rgb),.9)}
@keyframes glint{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.button-outline{border:1px solid var(--gold);color:var(--gold-light);background:transparent;transition:color .35s,transform .2s var(--ease)}
.button-outline::before{content:"";position:absolute;inset:0;background:var(--gold-gradient);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.button-outline:hover{color:var(--gold-ink)}
.button-outline:hover::before{transform:scaleY(1)}

/* ————— Header ————— */
.header{position:fixed;inset:0 0 auto;z-index:50;background:var(--black);border-bottom:1px solid rgba(var(--gold-rgb),.14);transition:background-color .4s,box-shadow .4s,transform .5s var(--ease)}
.header.has-bg{box-shadow:0 12px 32px -20px rgba(0,0,0,.7)}
.header.is-hidden{transform:translateY(-100%)}
.header .wrap{display:flex;align-items:center;gap:24px;height:var(--header-height)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{width:50px;height:50px;flex:none;border-radius:50%;box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35),0 6px 18px -6px rgba(var(--gold-rgb),.5)}
.brand b{display:block;font:600 15px/1 var(--font-title);letter-spacing:.1em;text-transform:uppercase}
.brand small{display:block;font:600 9px/1.6 var(--font-title);letter-spacing:.26em;text-transform:uppercase;background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Header logo only: the round logo already reads the name; the footer .brand keeps its wordmark */
.header .brand img{width:60px;height:60px}
.header .brand span{display:none}
.menu{display:flex;align-self:stretch;gap:clamp(24px,2.4vw,36px);font:500 13px/1 var(--font-title);text-transform:uppercase;
  font-weight:var(--ui-nav-weight,500);font-stretch:var(--ui-stretch,normal);letter-spacing:var(--ui-tracking,.14em)}
.menu a{display:flex;align-items:center;color:var(--muted);position:relative;transition:color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current]{color:var(--text)}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a:focus-visible{outline-offset:-6px}
.header-phone{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-left:24px;position:relative;font:500 13px/1 var(--font-title);letter-spacing:.06em;color:var(--text);white-space:nowrap;transition:color .25s}
.header-phone::before{content:"";position:absolute;left:0;top:50%;width:1px;height:22px;margin-top:-11px;background:var(--line)}
.header-phone svg{width:16px;height:16px;flex:none;color:var(--gold)}
.header-phone:hover{color:var(--gold-light)}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lang-switch button{background:none;border:0;color:var(--muted);font:600 11px/1 var(--font-title);letter-spacing:.1em;min-width:40px;min-height:40px;padding:0 10px;cursor:pointer;transition:background-color .3s,color .3s}
.lang-switch button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.header .button{min-height:44px;padding:0 20px;font-size:12px;letter-spacing:var(--ui-tracking,.16em)}
/* 1100-1239px: the phone collapses to a round icon button (the number stays in aria-label) */
@media (max-width:1239px){
  .header-phone{width:44px;height:44px;padding:0;justify-content:center;border:1px solid var(--line);border-radius:50%}
  .header-phone::before,.header-phone span{display:none}
}
/* Below 1100px the nav does not fit: no hamburger; the mobile bottom bar covers the actions */
@media (max-width:1099px){
  .menu{display:none}
  .header .brand img{width:52px;height:52px}
}
@media (max-width:359px){.header-phone{display:none}}

/* ————— Hero: full-bleed photo, dark veil, text left (split) or on top (stacked) ————— */
.hero{
  --hero-scrim-rgb:var(--black-rgb);   /* veil color; light themes override it to a dark tone */
  --hero-fade:var(--black);        /* bottom blend into the next section; light themes: transparent */
  --hero-h1-fit:1;                 /* per-theme headline size multiplier */
  --hero-h1-em:7.1;                   /* longest headline line in em for this theme's font; the size cap is 97cqi / em, so both lines always fit the column */
  --hero-gold:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold-light) 46%,var(--gold-soft) 100%);
  min-height:100svh;display:flex;align-items:center;padding:var(--header-height) 0 0;overflow:hidden;isolation:isolate;
  background:rgb(var(--hero-scrim-rgb));color:var(--text)}  /* color re-resolves --text here, where light themes redefine it */
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-text{position:relative;z-index:2;max-width:min(44vw,700px);container-type:inline-size}
.hero .eyebrow{font:500 clamp(12px,.3vw + 10px,15px)/1.4 var(--font-title);letter-spacing:.16em;color:var(--muted);text-wrap:balance}
/* Sentence case (hero Variant C); the urban theme keeps its capitals through its own h1 rule */
.hero h1{font-size:min(calc(clamp(56px,6.2vw,96px) * var(--hero-h1-fit)),calc(97cqi / var(--hero-h1-em)));
  line-height:1;letter-spacing:-.01em;text-wrap:balance;margin:clamp(16px,1.8vw,24px) 0 clamp(32px,3.2vw,48px)}
.hero h1>span{display:block}
/* Hero only: upright, light golds only (the dark bronze of --gold-metal loses contrast on the veil) */
.hero h1 .gold{font-style:normal;font-weight:inherit;background-image:linear-gradient(105deg,transparent 42%,rgba(255,244,205,.65) 50%,transparent 58%),var(--hero-gold)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.hero .actions .button{min-height:54px;padding:0 36px;min-width:200px;flex:0 0 auto;font-size:13px;letter-spacing:var(--ui-tracking,.22em)}
.hero .button-outline{border-color:rgba(var(--gold-rgb),.75)}
.hero .button-outline:hover,.hero .button-outline:focus-visible{border-color:var(--gold)}
.hero-photo{position:absolute;inset:0;margin:0;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:100% 60%;will-change:transform}
/* z-index:1 is required: GSAP transforms the img, which would otherwise paint over the veil */
.hero-photo::before,.hero-photo::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.hero-photo::before{top:0;bottom:0;background:linear-gradient(90deg,rgba(var(--hero-scrim-rgb),.93) 0%,rgba(var(--hero-scrim-rgb),.88) 38%,rgba(var(--hero-scrim-rgb),.70) 50%,rgba(var(--hero-scrim-rgb),.45) 60%,rgba(var(--hero-scrim-rgb),.32) 72%)}
.hero-photo::after{bottom:0;height:16%;background:linear-gradient(0deg,var(--hero-fade),transparent)}
/* Split layout: the photo fills the right part, cropped from the van doorway so the decal and QR never sit behind the text.
   --hero-u is one natural pixel of van-banner.webp (2400x1260). The barber's body starts at natural x 1374 and the crop starts at 906 */
@media (min-width:981px) and (min-aspect-ratio:1401/1000){
  .hero{--hero-photo-width:66vw;--hero-u:max(calc(100svh / 1260),calc(var(--hero-photo-width) / 1494));
    align-items:flex-end;padding-bottom:clamp(56px,11svh,128px)}
  .hero-photo{left:auto;width:var(--hero-photo-width)}
  .hero-photo img{position:absolute;max-width:none;height:auto;object-fit:fill;
    width:calc(2400 * var(--hero-u));left:calc(-906 * var(--hero-u));top:calc((100svh - 1260 * var(--hero-u)) * .6)}
  .hero-photo::before{background:linear-gradient(90deg,rgb(var(--hero-scrim-rgb)) 0,rgb(var(--hero-scrim-rgb)) calc(90 * var(--hero-u)),
    rgba(var(--hero-scrim-rgb),.55) calc(200 * var(--hero-u)),rgba(var(--hero-scrim-rgb),0) calc(400 * var(--hero-u)))}
  /* text column ends 40px before the barber: photo left edge + 468 natural px, minus the wrapper's left edge */
  .hero-text{max-width:calc(100vw - var(--hero-photo-width) + 468 * var(--hero-u) - max(0px,50vw - 620px) - var(--gutter) - 40px)}
}
/* Stacked layout: tablets, phones and any window narrower than 7:5 */
@media (max-width:980px),(max-aspect-ratio:7/5){
  .hero{align-items:flex-start;min-height:max(100svh,520px);padding-top:calc(var(--header-height) + clamp(24px,5svh,56px))}
  .hero-text{max-width:none}
  .hero h1{font-size:min(calc(clamp(34px,min(11vw,8svh),72px) * var(--hero-h1-fit)),calc(97cqi / var(--hero-h1-em)));margin:14px 0 28px}
  .hero-photo img{object-position:85% 50%}
  .hero-photo::before{background:linear-gradient(180deg,rgba(var(--hero-scrim-rgb),.92) 0%,rgba(var(--hero-scrim-rgb),.86) 32%,rgba(var(--hero-scrim-rgb),.50) 42%,rgba(var(--hero-scrim-rgb),.30) 52%)}
  .hero-photo::after{height:10%}
}
/* Landscape screens in the stacked layout: same doorway crop, so the decal and QR are never behind the text */
@media (max-width:980px) and (min-aspect-ratio:1/1),(min-aspect-ratio:1/1) and (max-aspect-ratio:7/5){
  .hero{--hero-u:max(calc(100svh / 1260),calc(100vw / 1494))}
  .hero-photo img{position:absolute;max-width:none;height:auto;object-fit:fill;
    width:calc(2400 * var(--hero-u));left:calc(-906 * var(--hero-u));top:min(0px,calc((100svh - 1260 * var(--hero-u)) * .3))}
}
@media (max-aspect-ratio:1/1){.hero-photo img{object-position:66% 50%}}

/* ————— Services ————— */
.services{background:var(--black)}
.price-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;margin-top:48px;container-type:inline-size}
/* Price board (change 2): name, dot leader and price share one baseline; the description runs underneath */
.service{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:baseline;align-content:start;gap:6px 14px;padding:20px 0;position:relative}
/* .rule is the dot leader; app.js draws it (scaleX 0 to 1) when the row enters */
.service .rule{grid-column:2;grid-row:1;position:relative;top:-.3em;height:0;border-bottom:2px dotted rgba(var(--gold-rgb),.5);transform-origin:left}
.service h3{grid-column:1;grid-row:1;font-size:30px;letter-spacing:0;transition:color .3s}
.service:hover h3{color:var(--gold-light)}
.service .price{grid-column:3;grid-row:1;font:600 22px/1 var(--display);text-align:right;font-variant-numeric:lining-nums;white-space:nowrap}
.service .price b{font-size:42px}
.service p{grid-column:1/-1;grid-row:2;color:var(--muted);font-size:15px;max-width:56ch}
.service .duration{font-size:13px;color:var(--gold);text-align:right;letter-spacing:.06em;white-space:nowrap}
.price-list .group{grid-column:1/-1;font:600 11px/1 var(--font-title);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:40px 0 4px;display:flex;align-items:center;gap:16px}
.price-list .group:first-child{padding-top:0}
.price-list .group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.service .price-text{font:italic 500 22px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--gold-light)}
/* At-home service: one row (text, price, button) between two thin accent rules, no card */
.featured{grid-column:1/-1;margin-top:40px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px 24px;padding:28px 0;position:relative;
  border-top:1px solid rgba(var(--gold-rgb),.55);border-bottom:1px solid rgba(var(--gold-rgb),.55)}
.featured h3{font-size:30px;margin-bottom:6px;white-space:nowrap}
.featured p{color:var(--muted);max-width:46ch;font-size:15px}
.featured .price{font:600 22px/1 var(--display);font-variant-numeric:lining-nums;white-space:nowrap}
.featured .price b{font-size:52px}
.featured .button{justify-self:end}
/* Narrow board (phones, tablets, about 1100px wide windows): the text takes its own row, then price and button */
@container (max-width:600px){
  .featured{grid-template-columns:auto 1fr}
  .featured>div{grid-column:1/-1}
  .featured .button{justify-self:stretch}
  .featured h3{white-space:normal}
}

/* ————— Where I work: at the van (Hialeah) or at your home ————— */
.location{margin-top:0}
.location h2{font-size:32px;margin:0}
.places{display:grid;grid-template-columns:1fr;margin-top:20px}
.place{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.place p{color:var(--muted);max-width:46ch}
.place .place-address{color:var(--text);font-size:17px;line-height:1.5;margin-bottom:12px}  /* address sits 20px under the rule, button 24px below */
.place .place-address .gold{font:italic 600 44px/1 var(--display);font-variant-numeric:lining-nums}
.place .button{margin-top:auto}
.address-field[hidden]{display:none}
/* 3D view of the condominium: the three.js canvas, with the still image underneath in case there is no WebGL */
.view-3d{margin:48px 0 0}
.view-3d-canvas{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--charcoal);border:1px solid var(--line);isolation:isolate}
.view-3d-canvas canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.view-3d-canvas canvas:active{cursor:grabbing}
.view-3d-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.view-3d-canvas.has-3d .view-3d-image{display:none}
.view-3d-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 10px rgba(var(--black-rgb),.7)}
.label-3d{position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;font:600 11px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 12px;border-radius:4px;background:rgba(var(--black-rgb),.88);color:var(--text);border:1px solid var(--line);margin-top:-10px}
.label-3d.van-label{background:var(--gold-gradient);color:var(--gold-ink);border:0;box-shadow:0 8px 24px -8px rgba(var(--gold-rgb),.8)}
/* without the 3D JS the HTML labels stay hidden over the still image, which already has them painted in */
.view-3d-canvas:not(.has-3d) .label-3d{display:none}
.compass{position:absolute;right:16px;top:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(var(--black-rgb),.85);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .25s}
.compass:hover{border-color:var(--gold)}

.compass i{font:600 12px/1 var(--font-title);font-style:normal;color:var(--gold-light);position:relative;top:-6px}
.compass::before{content:"";position:absolute;top:5px;left:50%;margin-left:-4px;border:4px solid transparent;border-bottom:7px solid var(--gold);border-top:0}
.view-3d-canvas:not(.has-3d) .compass,.view-3d-canvas:not(.has-3d) .two-finger-hint{display:none}
/* Mobile hint when someone tries to move the map with one finger (two fingers move it, as in Google Maps) */
.two-finger-hint{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:none;
  background:rgba(var(--black-rgb),.62);color:var(--text);font:600 13px/1.4 var(--font-title);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.two-finger-hint.visible{opacity:1}
.view-3d figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:14px;color:var(--muted);font-size:14px}
.view-3d figcaption a{color:var(--gold-light);font:600 12px/1.6 var(--font-title);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--gold)}

/* ————— Cuts and reviews ————— */
.section-header{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
/* "Mi trabajo": three equal 4:5 tiles on one line, caption under each photo. The 2:3 photos lose only top/bottom strips (no faces in frame) */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);margin-top:48px;align-items:start}
.photo-card{margin:0}
.photo-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--radius);background:var(--graphite)}
.photo-card figcaption{margin-top:14px;font:600 11px/1 var(--font-title);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.side-note{font-style:italic;color:var(--muted);font-size:16px;margin-top:26px;max-width:540px}
.price-list .side-note{grid-column:1/-1}

/* ————— Large photo between sections ————— */
/* The van's black and gold decal (decal.webp, 1600x925) in a strip on top; the caption sits UNDER it on the plain page color, so they never overlap.
   --u is one natural pixel of the decal photo; --strip-height is the strip height. The strip fades into the page color (light themes: the light background) */
.band{--u:calc(100vw / 1425);--strip-height:min(calc(500 * var(--u)),560px);position:relative;overflow:hidden;margin:0;padding-top:var(--strip-height)}
.band img{position:absolute;left:calc(-55 * var(--u));top:calc(-50 * var(--u));width:calc(1600 * var(--u));height:auto;max-width:none;object-fit:fill}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.band::before{top:0;height:calc(24 * var(--u));background:linear-gradient(var(--black),rgba(var(--black-rgb),0))}
.band::after{top:0;bottom:0;background:linear-gradient(180deg,rgba(var(--black-rgb),0) calc(var(--strip-height) * .74),var(--black) var(--strip-height))}
.band figcaption{position:relative;z-index:2;max-width:var(--max-width);margin:calc(var(--strip-height) * -.06) auto 0;padding:0 var(--gutter);
  font:600 clamp(44px,6vw,92px)/1.02 var(--display);letter-spacing:-.015em;text-shadow:0 0 28px rgba(var(--black-rgb),.85),0 2px 6px rgba(var(--black-rgb),.6)}
.band figcaption span{display:block}

/* ————— Inside the van ————— */
/* Two-column header (change 3): heading left, intro right */
.the-van-header{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.the-van-header .intro{margin:0 0 18px}
/* Tall interior photo on the left across two rows; the right column holds two 16:11 cells (van-back and van-interior-chair, a 16:11 photo) */
.van-gallery{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,2vw,24px);margin-top:56px}
.van-photo{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--graphite);margin:0}
.van-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.van-photo:hover img{transform:scale(1.03)}
.van-photo.tall{grid-row:1/3}
.van-photo:not(.tall){aspect-ratio:16/11}


/* ————— FAQ ————— */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq>div:first-child{position:sticky;top:calc(var(--header-height) + 40px);align-self:start}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:600 25px/1.3 var(--display);transition:color .3s}
summary:hover{color:var(--gold-light)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 28px/1 var(--font-body);color:var(--gold);transition:transform .4s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding:0 0 26px;max-width:640px}

/* ————— Booking and service area in one block ————— */
.booking-block{background:var(--charcoal);border-top:1px solid var(--line)}
.booking-header{max-width:none}
.booking-header .intro{margin-bottom:30px}
/* Change 3: booking (left) and the van's location card (right) side by side, the 3D map underneath */
.booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.booking-grid .view-3d{grid-column:1/-1;margin-top:clamp(16px,3vw,32px)}

/* ————— Booking screen ————— */
.booking-panel{position:fixed;inset:0;z-index:95;overflow:hidden}
.booking-panel[hidden]{display:none}
.panel-content{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(50% 50% at 85% 10%,rgba(var(--gold-rgb),.14),transparent 70%),var(--black);padding-bottom:40px}
.panel-header{display:flex;align-items:center;justify-content:space-between;height:84px;position:sticky;top:0;z-index:2;background:linear-gradient(var(--black) 60%,transparent)}
.panel-header img{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35)}
.close{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;position:relative;transition:border-color .3s,transform .5s var(--ease)}
.close span{position:absolute;left:14px;right:14px;top:50%;height:1.5px;background:var(--gold-light);transform:rotate(45deg)}
.close span+span{transform:rotate(-45deg)}
.close:hover{border-color:var(--gold);transform:rotate(90deg)}
.panel-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;padding-top:30px}
.panel-info{position:sticky;top:110px}
.panel-info h2{margin-top:14px}
/* The sheet that gets cut when the panel opens */
.panel-curtain{position:absolute;inset:0;z-index:5;pointer-events:none}
.panel-curtain .half{position:absolute;left:0;right:0;height:50%;overflow:hidden}
.panel-curtain .top{top:0}
.panel-curtain .bottom{bottom:0}
.panel-curtain .sheet{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center;
  background:radial-gradient(40% 35% at 50% 50%,rgba(var(--gold-rgb),.16),transparent 70%),var(--black)}
.panel-curtain .top .sheet{top:0}
.panel-curtain .bottom .sheet{bottom:0}
.panel-curtain .sheet img{width:min(150px,36vw);height:auto;border-radius:50%;box-shadow:0 20px 60px -15px rgba(var(--gold-rgb),.5)}
.panel-curtain .cut-line{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;overflow:visible;opacity:0}
.panel-curtain .cut-line line{stroke:var(--gold);stroke-width:2;stroke-dasharray:1.2 1.2;vector-effect:non-scaling-stroke}
.panel-curtain .panel-scissors{position:absolute;left:0;top:50%;width:clamp(120px,15vw,190px);margin-top:calc(clamp(120px,15vw,190px) * -.265);opacity:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.panel-curtain .panel-scissors svg{width:100%;height:auto;overflow:visible}
@media (max-width:980px){.panel-grid{grid-template-columns:1fr;gap:34px;padding-top:10px}.panel-info{position:static}}
.direct-contact{display:grid;gap:16px;margin-top:36px}
.direct-contact a{display:flex;align-items:center;gap:14px;font:500 18px/1 var(--font-title);letter-spacing:.04em;width:max-content;transition:color .3s}
.direct-contact a:hover{color:var(--gold-light)}
.direct-contact svg{width:22px;height:22px;color:var(--gold)}
form{background:var(--black);border:1px solid var(--line);border-radius:var(--radius);padding:36px;display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font:600 11px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{width:100%;background:var(--graphite);border:1px solid rgba(244,241,234,.1);border-radius:var(--radius);color:var(--text);font:400 16px/1.4 var(--font-body);padding:14px;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12)}
textarea{min-height:92px;resize:vertical}
form .button{width:100%;margin-top:6px}
form small{color:var(--muted);font-size:13px;text-align:center}

/* ————— Footer ————— */
.footer{padding:72px 0 120px;border-top:1px solid var(--line);overflow:hidden}
.footer .columns{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer h4{font:600 12px/1 var(--font-title);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer p,.footer li{color:var(--muted);font-size:15px;list-style:none}
.footer .footer-tagline{margin-top:18px;max-width:340px}
.footer li+li{margin-top:8px}
.footer a:hover{color:var(--gold-light)}
.credits{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#8E887E}

/* Footer signature */
.signature{max-width:1320px;margin:0 auto 64px;padding:0 var(--gutter)}
.signature svg{display:block;width:100%;height:auto;overflow:visible}
.signature-outline{fill:none;stroke:rgba(var(--gold-rgb),.55);stroke-width:1.2;vector-effect:non-scaling-stroke}
.signature-shine{mix-blend-mode:screen}
.signature-tagline{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;font:500 11px/1 var(--font-title);letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.signature-tagline i{width:40px;height:1px;background:var(--gold);opacity:.6}
.signature-tagline span{white-space:nowrap}
@media (max-width:640px){.signature{margin-bottom:48px}.signature-tagline{gap:12px;font-size:10px;letter-spacing:.3em}.signature-tagline i{width:24px}}

/* ————— Fixed mobile bar ————— */
.mobile-bar{display:none}

@media (max-width:980px){
  .faq,.places{grid-template-columns:1fr}
  .view-3d-canvas{aspect-ratio:4/5}
  .price-list{grid-template-columns:1fr}
  .footer .columns{grid-template-columns:1fr 1fr}
  .footer .columns>div:first-child{grid-column:1/-1}
  .the-van-header{grid-template-columns:1fr;gap:0}
  .faq>div:first-child{position:static}
  .booking-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .header .wrap{gap:8px}
  .header .button{min-height:44px;padding:0 16px;font-size:11px;letter-spacing:var(--ui-tracking,.12em)}
  .header .button svg{display:none}
  .lang-switch button{min-width:36px;padding:0 8px}
  .brand img{width:42px;height:42px}
  .header .brand img{width:44px;height:44px}
  .brand b{font-size:14px}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .eyebrow{font-size:11px;letter-spacing:.16em;gap:10px}
  .eyebrow::before{width:20px}
  .actions .button{flex:1 1 100%}
  .hero .actions .button{flex:0 0 auto}
  .van-gallery{grid-template-columns:1fr 1fr}
  .van-photo.tall{grid-row:auto;grid-column:1/-1;aspect-ratio:4/5}
  .gallery{grid-template-columns:minmax(0,1fr);gap:28px}
  .band{--u:calc(100vw / 615);--strip-height:calc(440 * var(--u))}
  .band figcaption{margin-top:0}
  .service h3{font-size:26px}
  .service .price b{font-size:36px}
  .featured .price b{font-size:44px}
  /* Change 4: once the bottom bar is shown, the header drops its own "Reservar" (one at a time) */
  body:has(.mobile-bar.visible) .header .button{display:none}
      .row{grid-template-columns:1fr}
  form{padding:24px 18px}
  .direct-contact a{font-size:16px}
  .mobile-bar{display:grid;grid-template-columns:1.3fr 1fr 1fr;position:fixed;inset:auto 0 0;z-index:60;background:rgba(var(--black-rgb),.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:8px;transform:translateY(110%);transition:transform .6s var(--ease)}
  .mobile-bar.visible{transform:none}
  .mobile-bar a{min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);font:600 11px/1 var(--font-title);letter-spacing:var(--ui-tracking,.1em);font-stretch:var(--ui-stretch,normal);text-transform:uppercase;border:1px solid var(--line)}
  .mobile-bar a:first-child{background:var(--gold-gradient);color:var(--gold-ink);border:0}
  .mobile-bar svg{width:18px;height:18px}
}

/* ————— Services with the clipper ————— */
/* Owner decision (fix round 1): the photo column stretches to the price column's height and the chair photo stays in view (sticky)
   at full viewport height while the prices scroll, so there is no empty space around it */
.services-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:stretch}
.clipper-column{position:relative;isolation:isolate}
.clipper-box{z-index:2;position:relative;width:100%;height:100%;will-change:transform}
/* chair.webp is 1200x1112; 58% keeps the cape logo centered in the tall crop */
.clipper-box .clipper{position:sticky;top:calc(var(--header-height) + 24px);z-index:1;display:block;width:100%;height:calc(100svh - var(--header-height) - 48px);max-width:none;
  object-fit:cover;object-position:58% 50%;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px var(--line)}
.services-grid .price-list{grid-template-columns:1fr;gap:0}


@media (max-width:980px){
  .services-grid{grid-template-columns:minmax(0,1fr)}
  .services{padding-top:40px}
  /* One column: a normal photo at full content width in its own proportion (wider than 4:5), not sticky */
  .clipper-box{height:auto}
  .clipper-box .clipper{position:relative;top:auto;height:auto;aspect-ratio:1200/1112}
  .services-grid .price-list{grid-template-columns:1fr}
}


/* ————— Social links: Instagram only (decision C) ————— */
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold-light);transition:border-color .3s,transform .4s var(--ease)}
.social a:hover{transform:translateY(-3px)}
.social svg{width:18px;height:18px}

/* ————— Booking calendar ————— */
.calendar{border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:12px;min-width:0}
.calendar legend{padding:0 8px;font:600 11px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cal-header{display:flex;align-items:center;justify-content:space-between}
.cal-month{font:600 15px/1 var(--font-title);letter-spacing:.1em;text-transform:uppercase}
.cal-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--gold-light);font:400 22px/1 var(--font-title);cursor:pointer;transition:background-color .3s,border-color .3s}
.cal-arrow:hover:not(:disabled){border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.cal-arrow:disabled{opacity:.25;cursor:default}
.cal-week,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-week span{font:600 10px/1 var(--font-title);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;padding:4px 0}
.cal-days button{aspect-ratio:1;border:1px solid transparent;border-radius:var(--radius);background:var(--graphite);color:var(--text);font:500 14px/1 var(--font-title);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.cal-days button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.cal-days button:disabled{background:transparent;color:#4a4740;cursor:default;text-decoration:line-through}
.cal-days button.today{border-color:var(--line)}
.cal-days button[aria-pressed="true"]{background:var(--gold-gradient);color:var(--gold-ink);border-color:transparent}
.cal-hours{display:flex;flex-wrap:wrap;gap:8px}
.cal-hours:empty{display:none}
.cal-hours button{border:1px solid var(--line);border-radius:100px;background:none;color:var(--text);font:500 13px/1 var(--font-title);letter-spacing:.04em;padding:10px 14px;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.cal-hours button:hover{border-color:var(--gold)}
.cal-hours button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.cal-selected{font-size:14px;color:var(--gold-light);min-height:1.4em}
@media (max-width:640px){.calendar{padding:14px 10px}.cal-days button{font-size:14px}}

@media (max-width:980px){
  .clipper-box{filter:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #curtain{display:none}
}
.in-lines>span{display:block}