/* Estilos de jimmy____________________walls */
/* Layout: estructura de Atelier Geominy (enlaces arriba, nombre grande, BOOKINGS / INSTAGRAM, cuadros con ficha, pie con dirección)
   + portada del zip: globo 3D gris con widgets de cristal tipo iOS, texto a máquina de escribir y acento rosa. Todo sobre blanco. */
:root{
  --bg:#ffffff;                   /* todo blanco */
  --ink:#1d1d1f;                  /* texto principal */
  --grey:#8a8a8e;                 /* texto secundario */
  --soft:#f4f4f2;                 /* fondo de cuadros */
  --glass:rgba(255,255,255,.62);  /* widgets */
  --hair:rgba(0,0,0,.09);
  --line:#1d1d1f;
  --pink:#1d1d1f;                 /* acento: casi negro (toda la web en escala de grises) */
  --f-type:"Helvetica Neue",Helvetica,Arial,sans-serif;   /* toda la web en Helvetica Neue */
  --f-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}
:root[data-theme]{color-scheme:light}
html{background:var(--bg)}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-weight:400;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 30px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.grain{display:none}

/* ---------- cabecera (Atelier) ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
nav.top{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase}
nav.top a{padding-bottom:2px;border-bottom:1.5px solid transparent;transition:border-color .2s}
nav.top a:hover,nav.top a[aria-current="page"]{border-bottom-color:var(--ink)}
nav.top a.hot{color:var(--pink)}
nav.top a.hot:hover,nav.top a.hot[aria-current="page"]{border-bottom-color:var(--pink)}
.brand{margin:0;font-family:var(--f-type);font-size:13px;font-weight:400;color:var(--grey);white-space:nowrap}
.brand a:hover{color:var(--ink)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(0,0,0,.16)}
.name{margin:0;font-family:var(--f-type);font-weight:500;font-size:clamp(17px,calc((100vw - 48px) / 17.6),104px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.name .u{font-weight:400;opacity:.8}
.ctas{display:flex;flex-wrap:wrap;gap:4px 34px;margin:0;font-family:var(--f-type);font-weight:500;text-transform:lowercase;font-size:clamp(24px,4.4vw,64px);line-height:1;letter-spacing:-.02em}
.ctas a{border-bottom:.07em solid transparent;transition:border-color .2s,color .2s}
.ctas a:hover{border-bottom-color:var(--pink);color:var(--pink)}
hr{border:0;border-top:1.5px solid var(--line);margin:0;width:100%}

/* ---------- portada: globo tracker (zip) ---------- */
.land{position:relative;height:max(440px,calc(100svh - var(--land-top,230px) - 16px));overflow:hidden;border-radius:26px;background:var(--bg);isolation:isolate}
.scene{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.scene.dragging{cursor:grabbing}
.scene.focus{cursor:zoom-out}
.scene canvas{display:block;width:100%!important;height:100%!important;transition:opacity .45s var(--ease)}
.scene.swap canvas{opacity:0}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 60%,rgba(0,0,0,.035) 100%)}
.flare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;overflow:hidden;opacity:.3}
.flare .ghost{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.flare .hex{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);border-radius:0}
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 34px rgba(0,0,0,.07);border-radius:20px}
.dock{position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);width:min(880px,calc(100% - 32px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px;border-radius:22px}
.dock .route{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.dock .route::-webkit-scrollbar{display:none}
.dock .route li+li{border-top:0}
.dock .route button{grid-template-columns:8px auto;gap:0 8px;padding:7px 12px;width:auto}
.dock .route .d{grid-column:2;font-size:11px}
.dock .route .c{font-size:13px;overflow:visible;text-overflow:clip}
.dock-cta{display:grid;justify-items:end;gap:3px;padding-right:4px}
.dock-cta .row1{display:flex;align-items:center;gap:10px}
.dock .st{font-size:11.5px;color:var(--grey);margin:0}
.dock .st b{color:var(--ink);font-weight:500}
.dock .pill{padding:9px 16px;font-size:13px}
.pill.type{font-family:var(--f-type);font-weight:500;font-size:14px;letter-spacing:-.01em}
.route button.unplanned .dot{background:transparent;box-shadow:inset 0 0 0 1.5px #b9b9be}
.route button.unplanned[aria-pressed="true"] .dot{background:transparent;box-shadow:inset 0 0 0 2px var(--pink),0 0 0 4px rgba(0,0,0,.14)}
.w-clock{padding:14px 16px 16px}
.w-label{font-family:var(--f-type);font-size:12px;color:var(--grey);margin:0 0 6px}
.w-time{font-size:46px;font-weight:200;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.w-time small{font-size:20px;font-weight:300;color:var(--grey);margin-left:2px}
.w-sub{margin:6px 0 0;font-size:13px;color:var(--grey)}
.w-sub b{color:var(--ink);font-weight:500}
.w-route{padding:6px}
.route{list-style:none;margin:0;padding:0}
.route li+li{border-top:1px solid var(--hair)}
.route button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:14px;transition:background .2s,transform .18s cubic-bezier(.3,.7,.4,1)}
.route button:hover{background:rgba(0,0,0,.035)}
.route button:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.route .dot{width:8px;height:8px;border-radius:50%;background:#c7c7cc}
.route button[aria-pressed="true"]{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.route button[aria-pressed="true"] .dot{background:var(--pink);box-shadow:0 0 0 4px rgba(0,0,0,.18)}
.route .c{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route .d{font-size:12px;color:var(--grey);white-space:nowrap}
.w-cta{padding:12px;display:grid;gap:8px}
.w-cta .st{font-size:12.5px;color:var(--grey);margin:0 4px}
.w-cta .st b{color:var(--ink);font-weight:500}
.pill{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:500;transition:transform .15s,background .2s;border:0;cursor:pointer}
.pill:active{transform:scale(.97)}
.pill.dark{background:var(--ink);color:#fff}
.pill.dark:hover{background:#000}
.pill.pink{background:var(--pink);color:#fff}
.pill.pink:hover{background:#000}
.pill.clear{background:#fff;color:var(--ink);border:1px solid rgba(0,0,0,.1)}
.more{font-size:12px;color:var(--grey);text-align:center;text-decoration:underline;text-underline-offset:3px}
.more:hover{color:var(--ink)}
.right{position:absolute;z-index:5;right:18px;top:18px;display:grid;justify-items:end;gap:10px}
.seg{display:flex;padding:3px;border-radius:12px;background:rgba(118,118,128,.12)}
.seg button{all:unset;cursor:pointer;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:500;transition:background .2s,box-shadow .2s,transform .18s cubic-bezier(.3,.7,.4,1)}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.seg button:focus-visible{outline:2px solid var(--pink)}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.lab{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.08);transition:opacity .35s;will-change:transform}
.labels.mini .lab{font-size:9.5px;padding:3px 7px}
.lab.now::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:6px;vertical-align:1px}
.land-ctas{position:absolute;z-index:4;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mute{all:unset;position:absolute;z-index:6;right:18px;top:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(60,60,64,.55);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .15s,background .2s}
.mute:hover{background:rgba(40,40,44,.7)}
.mute:active{transform:scale(.94)}
.mute:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.mute svg{width:24px;height:24px}
.mute .on{display:none}
.mute[aria-pressed="true"] .on{display:inline}
.mute[aria-pressed="true"] .off{display:none}
.hint{position:absolute;z-index:4;left:18px;bottom:24px;margin:0;font-family:var(--f-type);font-size:12px;color:var(--grey)}
.boot{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--bg);color:var(--grey);font-family:var(--f-type);font-size:13px;transition:opacity .9s var(--ease)}
.boot ol{list-style:none;margin:0;padding:0;line-height:1.9;white-space:pre}
.boot li{opacity:0}.boot li.on{opacity:1}
.boot.gone{opacity:0;pointer-events:none}
.is-depth .scene{background:#000}
.nogl .scene{background:radial-gradient(circle at 50% 50%,#d6d6d4 0,#d6d6d4 22%,transparent 22.4%)}
@media (max-width:860px){
  .land{height:auto;display:flex;flex-direction:column;padding-bottom:20px;border-radius:20px}
  .scene{position:relative;inset:auto;height:62svh;min-height:400px}
  html.is-home .land{height:auto}
  html.is-home .scene,html.is-home .flare,html.is-home .vignette,html.is-home .labels{height:max(320px,calc(100svh - var(--land-top,200px) - var(--dock-h,170px) - 52px));min-height:0}
  html.is-home .mute{top:calc(max(320px,calc(100svh - var(--land-top,200px) - var(--dock-h,170px) - 52px)) - 58px)}
  .flare,.vignette,.labels{height:62svh;min-height:400px;bottom:auto}
  .right{display:none}
  .mute{bottom:auto;top:calc(max(400px,62svh) - 66px);right:auto;left:14px}
  .hint{display:none}
  .dock{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:14px 0 0;grid-template-columns:1fr}
  .dock-cta{justify-items:stretch}
  .dock-cta .row1{justify-content:space-between}
}

/* ---------- el inicio es solo el globo: sin pie ni nada debajo ---------- */
html.is-home .wrap > hr,html.is-home footer{display:none}
html.is-home body{padding-bottom:16px}
/* ---------- cinta de ciudades ---------- */

.ticker{overflow:hidden;border-block:1.5px solid var(--line);padding-block:16px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.ticker .track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font-family:var(--f-type);font-weight:500;font-size:clamp(20px,2.6vw,34px);padding-inline:22px;white-space:nowrap;letter-spacing:-.02em}
.ticker i{font-style:normal;color:var(--pink);margin-left:20px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- texto ---------- */
.prose{max-width:62ch;display:flex;flex-direction:column;gap:14px;font-size:18px}
.prose p{margin:0}
.prose h3{margin:10px 0 0;font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase}
.contact{font-family:var(--f-type);font-size:14px;color:var(--grey);line-height:1.6}
.sub{margin:0;font-family:var(--f-type);font-weight:500;font-size:clamp(22px,3.2vw,42px);line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.lead{margin:0;font-family:var(--f-type);font-size:clamp(22px,2.8vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:30ch;text-wrap:balance}
.lead span{color:var(--grey)}

/* ---------- cuadros con ficha (Atelier) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:40px 22px}
.work{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0}
.work .frame{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--soft);overflow:hidden;border-radius:4px}
.work canvas,.work img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work:hover canvas,.work:hover img{transform:scale(1.035)}
.work .cap{font-family:var(--f-type);font-size:13px;line-height:1.5;color:var(--grey);border-top:1.5px solid var(--line);padding-top:8px}
.work .cap b{color:var(--ink);font-size:14px}
.sold{color:var(--pink);font-weight:500;letter-spacing:0}
.note{font-family:var(--f-type);font-size:13px;color:var(--grey);max-width:70ch;margin:0}

/* ---------- series con foto flotante (zip) ---------- */
.series{border-top:1.5px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;align-items:center;gap:12px 24px;padding-block:22px;border-bottom:1.5px solid var(--line);isolation:isolate}
.row .idx{font-family:var(--f-type);font-size:13px;color:var(--grey)}
.row .nm{font-family:var(--f-type);font-weight:500;font-size:clamp(30px,5.4vw,78px);line-height:1;letter-spacing:-.04em;transition:transform .5s var(--ease)}
.row:hover .nm{transform:translateX(18px)}
.row .go{font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase}
.row .peek{position:absolute;right:18%;top:50%;width:clamp(170px,20vw,300px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;z-index:2;opacity:0;transform:translateY(-50%) scale(.9) rotate(3deg);transition:opacity .4s,transform .55s var(--ease);pointer-events:none;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.row .peek img{width:100%;height:100%;object-fit:cover}
.row:hover .peek{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
@media (max-width:700px){.row{grid-template-columns:1fr}.row .peek{display:none}}


/* ---------- reservas ---------- */
.policies{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.policies div{border-top:1.5px solid var(--line);padding-top:12px;min-width:0}
.policies h3{margin:0 0 8px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase}
.policies p{margin:0;color:var(--grey)}
.links-big{display:flex;flex-wrap:wrap;gap:8px 30px;font-family:var(--f-type);font-weight:500;font-size:clamp(22px,3vw,40px);letter-spacing:-.02em}
.links-big a{border-bottom:2px solid var(--ink)}
.links-big a:hover{color:var(--pink);border-color:var(--pink)}
form.cita{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;max-width:860px;padding:22px;border-radius:22px}
form.cita .full{grid-column:1/-1}
form.cita label{display:grid;gap:6px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:lowercase}
form.cita input,form.cita select,form.cita textarea{width:100%;font-family:var(--f-type);font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;padding:11px 13px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff}
form.cita textarea{min-height:120px;resize:vertical}
form.cita input:focus,form.cita select:focus,form.cita textarea:focus{outline:2px solid var(--pink);outline-offset:1px;border-color:transparent}
form.cita .send{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
form.cita .ok{margin:0;min-height:0;font-family:var(--f-type);font-size:14px;color:var(--ink)}
form.cita .ok b{color:var(--pink)}
@media (max-width:640px){form.cita{grid-template-columns:1fr;padding:16px}}

/* ---------- pie ---------- */
footer{display:flex;flex-direction:column;gap:18px;margin-top:20px}
footer .addr{margin:0;font-family:var(--f-type);font-weight:500;font-size:clamp(20px,2.8vw,38px);line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere}
footer .addr span{display:block;font-weight:400;font-size:14px;color:var(--grey);margin-top:8px;line-height:1.6;letter-spacing:0}
footer .row2{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase}
footer .ig{width:26px;height:26px;display:inline-grid;place-items:center}
footer svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8}

/* ---------- vistas y aparición al hacer scroll ---------- */
.view{display:flex;flex-direction:column;gap:30px}
.view[hidden]{display:none!important}
html.js .rv{opacity:.001;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}
/* ---------- inicio: el globo es el fondo de toda la pantalla y todo flota encima ---------- */
html.is-home,html.is-home body{overflow:hidden;height:100%}
html.is-home .topbar{position:relative;z-index:10}
html.is-home .land{position:fixed;inset:0;height:auto;border-radius:0;z-index:0;display:block;padding:0}
html.is-home .scene,html.is-home .flare,html.is-home .vignette,html.is-home .labels{position:absolute;inset:0;height:auto;min-height:0}
html.is-home .dock{position:absolute;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom,0px));width:min(880px,calc(100% - 32px));margin:0}
html.is-home .mute{top:auto;left:auto;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + var(--dock-h,64px) + 12px)}
@media (min-width:861px){ html.is-home .mute{top:auto} }
@media (max-width:860px){ html.is-home .dock{grid-template-columns:1fr} }
/* selector de idioma bajo el nombre */

/* ---------- galería de tatuajes (fotos de Instagram) ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media (min-width:1100px){.tgrid{grid-template-columns:repeat(4,1fr)}}
.tgrid button{all:unset;position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--soft);cursor:zoom-in;border-radius:2px}
.tgrid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .5s;opacity:0}
.tgrid img.ld{opacity:1}
@media (hover:hover){.tgrid button:hover img{transform:scale(1.04)}}
.tgrid button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.tgrid .n{position:absolute;top:8px;right:8px;font-family:var(--f-type);font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:99px}
@media (max-width:640px){.tgrid{gap:3px}}

/* ---------- visor a pantalla completa ---------- */
.lb{position:fixed;inset:0;z-index:100;background:var(--bg,#fff);display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
.lb[hidden]{display:none}
.lb-fig{margin:0;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 0 24px;min-width:0}
.lb-fig img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;display:block}
.lb-fig figcaption{font-family:var(--f-type);font-size:13px;color:var(--ink);text-align:center;max-width:70ch;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.lb-meta{color:var(--grey)}
.lb-meta a{color:var(--pink)}
.lb button{all:unset;cursor:pointer;font-size:34px;line-height:1;color:var(--ink);display:grid;place-items:center;width:56px;height:56px}
.lb button:hover{color:var(--pink)}
.lb button:focus-visible{outline:2px solid var(--pink)}
.lb .lb-x{position:absolute;top:8px;right:8px;z-index:2}
.lb .lb-nav.prev{grid-column:1;grid-row:1}.lb-fig{grid-column:2;grid-row:1}.lb .lb-nav.next{grid-column:3;grid-row:1}   /* sin flechas (una sola foto) la foto sigue en el centro */
@media (max-width:640px){.lb{grid-template-columns:36px 1fr 36px}.lb button{width:36px}}

/* ---------- about ---------- */
.about-head{display:flex;align-items:center;gap:18px}
.about-head img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.about-head b{font-family:var(--f-type);font-size:15px;overflow-wrap:anywhere}
.bio{white-space:pre-line}
.brandcol{display:grid;gap:4px;justify-items:start}
.lang{display:flex;gap:5px;align-items:center;font-family:var(--f-type);font-size:12px;color:var(--grey)}
.lang button{all:unset;cursor:pointer;color:var(--grey);border-bottom:1px solid transparent;line-height:1.3}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.lang button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* sonido: botón pequeño junto al nombre */
.brandrow{display:flex;align-items:center;gap:10px}
.mute,html.is-home .mute{position:static;width:22px;height:22px;background:rgba(60,60,64,.45);backdrop-filter:none;-webkit-backdrop-filter:none;inset:auto}
.mute svg{width:13px;height:13px}
html:not(.is-home) .mute{display:none}

/* ---------- art: una fila por pieza (medida | descripción y año | imagen) ---------- */
.artlist{display:flex;flex-direction:column;border-top:1.5px solid var(--line)}
.piece{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr) clamp(96px,14vw,200px);gap:14px 28px;align-items:start;padding:16px 0;border-bottom:1.5px solid var(--line);cursor:default;-webkit-tap-highlight-color:transparent}
.p-size{font-family:var(--f-type);font-size:clamp(16px,1.8vw,24px);line-height:1.1;display:flex;flex-direction:column;gap:4px}
.p-media{position:relative}
.p-sold{position:absolute;right:100%;bottom:0;margin-right:12px;font-family:var(--f-type);font-size:12px;line-height:1.2;color:var(--grey);white-space:nowrap;pointer-events:none}
.p-desc{font-family:var(--f-type);font-size:14px;line-height:1.55;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.p-year{color:var(--grey)}
.p-img{all:unset;position:relative;display:block;cursor:zoom-in;-webkit-tap-highlight-color:transparent;overflow:hidden;border-radius:2px}
.p-img img{display:block;width:100%;height:auto;transition:transform .7s var(--ease)}
@media (hover:hover){.p-img:hover img{transform:scale(1.03)}}
.p-img:active img{transform:scale(.985);transition-duration:.15s}
.p-img:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.p-img .n{position:absolute;top:8px;right:8px;font-family:var(--f-type);font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:99px}
@media (max-width:700px){.piece{grid-template-columns:70px 1fr 96px;gap:12px}.p-desc{font-size:12.5px}}

/* ---------- ventana de compra ---------- */
.buy{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.buy[hidden]{display:none}
.buy-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.16)}
.buy-card img{width:100%;height:auto;display:block;border-radius:4px}
.buy-info{display:flex;flex-direction:column;gap:12px;font-family:var(--f-type);font-size:14px}
.buy-info h3{margin:0;font-size:13px;font-weight:500;letter-spacing:0;text-transform:lowercase;font-family:var(--f-ui)}
.buy-info p{margin:0}
.buy-price{font-size:18px;font-weight:500}
.buy-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.buy .buy-x{all:unset;cursor:pointer;position:absolute;top:8px;right:12px;font-size:28px;line-height:1}
.buy .buy-x:hover{color:var(--pink)}
@media (max-width:640px){.buy-card{grid-template-columns:1fr}}

/* ---------- jerarquía tipográfica (Helvetica Neue, sin mayúsculas) ----------
   1 · display: nombre del pie, medida de cada cuadro ...... 500 (medium), grande, interletraje negativo
   2 · títulos de sección y etiquetas ...................... 500, 15 px, color tinta
   3 · texto ............................................... 400 (regular), 15–18 px
   4 · datos secundarios (fechas, años, notas) .............. 400, 12–13 px, gris
   5 · navegación y botones ................................. 400–500, 14–15 px */
nav.top{font-size:15px;font-weight:400}
nav.top a[aria-current="page"]{font-weight:500}
.brand{font-size:14px}
.lang{font-size:13px;text-transform:lowercase}
.prose h3,.policies h3,.buy-info h3{font-size:15px;font-weight:500;color:var(--ink)}
form.cita label{font-size:13px;font-weight:500;color:var(--ink)}
footer .row2{font-size:14px;font-weight:400}
footer .addr{font-weight:500;letter-spacing:-.035em}
.pill,.pill.type{font-weight:500;letter-spacing:0;text-transform:lowercase}
.p-size{font-size:15px;font-weight:500;letter-spacing:0;line-height:1.4}
.p-desc{font-size:14px}
.p-year,.note,.contact,.lb-meta,.route .d,.dock .route .d{font-size:13px;font-weight:400}
.lead{font-weight:400;letter-spacing:-.02em}
.about-head b{font-weight:500}
.lb-fig figcaption{font-size:14px}
footer .row2{font-size:15px;gap:6px 26px}
footer .row2 a[hidden]{display:none}

/* ---------- barra de arriba siempre visible al hacer scroll (menos en la portada, que no tiene scroll) ---------- */
html:not(.is-home) .topbar{position:sticky;top:0;z-index:60;margin-top:-26px;padding-block:26px 14px;isolation:isolate}
html:not(.is-home) .topbar::before{content:"";position:absolute;inset:0 -100vw;background:var(--bg);z-index:-1}

/* ---------- barra de arriba: nombre que se estira con la ventana + menú en una línea ---------- */
.topbar{flex-wrap:nowrap;gap:12px 40px}
.brandcol{flex:1 1 auto;min-width:0}
.brandrow{width:100%}
.brand{font-size:15px;flex:1 1 auto;min-width:0}
.brand a{display:flex;align-items:baseline;width:100%}
.brand .bar{flex:1 1 auto;min-width:3ch;align-self:stretch;background:linear-gradient(currentColor,currentColor) left calc(100% - .22em)/100% 1px no-repeat}
.brand .u-txt{display:none}
nav.top{flex-wrap:nowrap;white-space:nowrap}
/* ventana estrecha: el menú baja y el nombre ocupa todo el ancho */
@media (max-width:700px){
  .topbar{flex-wrap:wrap}
  .brandcol{flex-basis:100%}
  nav.top{flex-wrap:wrap;white-space:normal;gap:6px 18px}
}
.lang .mute{margin-left:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(60,60,64,.45);color:#fff;border-bottom:0}
.lang .mute:hover{background:var(--pink);color:#fff}
.lang .mute svg{width:12px;height:12px}
.lead{font-size:18px;line-height:1.4;letter-spacing:0;max-width:60ch;text-transform:lowercase}
form.cita .send{align-self:end}
form.cita .send .pill{width:100%;justify-content:center;padding-block:12px}
@media (min-width:641px){form.cita .send .pill{width:auto;padding-inline:26px}}
/* elegir por dónde se envía la cita */
.via{display:flex;flex-direction:column;gap:10px;margin:-8px 0 4px}
.via p{margin:0;font-size:15px}
.via .seg{align-self:flex-start}
.via .seg button{font-size:14px;padding:7px 16px}

/* ===== último paso del envío (cita y lista de espera) ===== */
#citaOk,#esperaOk{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#citaOk:empty,#esperaOk:empty{display:none}
#citaOk b,#esperaOk b{color:var(--ink);font-weight:500}
#citaOk .go,#esperaOk .go{width:auto;padding-inline:26px;text-decoration:none}
#citaOk .nota{font-size:13px;color:var(--ink);opacity:.7;max-width:52ch}
#citaOk .copy{all:unset;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
#citaOk .pre{white-space:pre-wrap;font-size:13px;opacity:.6;border-left:2px solid currentColor;padding-left:12px;max-width:60ch;word-break:break-word}

/* ===== campo "instagram o teléfono" del formulario de cita ===== */
form.cita .contacto{display:grid;gap:6px;align-content:start;min-width:0}
form.cita .contacto .cab{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:13px;font-weight:500;min-height:18px}
form.cita .seg.mini{padding:2px;border-radius:9px}
form.cita .seg.mini button{font-size:12px;padding:2px 10px;border-radius:7px}
form.cita .campo{display:flex;gap:8px;min-width:0}
form.cita .campo[hidden]{display:none}
form.cita #campoIg{position:relative}
form.cita .arroba{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--ink);pointer-events:none}
form.cita #fIg{padding-left:30px}
form.cita #fPrefijo{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
form.cita #fTel{flex:1;min-width:0}
form.cita .prefijo{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 30px 0 13px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;font-size:15px;white-space:nowrap}
form.cita .prefijo::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
form.cita .prefijo select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
form.cita .prefijo:focus-within{outline:2px solid var(--pink);outline-offset:1px;border-color:transparent}
.via p.lead{font-size:18px;max-width:none}
.via:has(p.lead){margin-top:0}
#v-bookings .despues{margin:28px 0 0;max-width:60ch;font-size:15px;line-height:1.5;color:var(--ink);opacity:.75;text-transform:lowercase}
form.cita .refs{margin:0;font-size:14px;line-height:1.45;opacity:.75}

/* ===== avisos de campos obligatorios ===== */
form.cita .err-msg{font-size:12px;font-weight:400;color:#1d1d1f;min-height:0}
form.cita .err-msg:empty{display:none}
form.cita label.err input,form.cita label.err textarea,form.cita label.err select,form.cita .contacto.err .campo:not([hidden]) input{border-color:#1d1d1f}
form.cita input[type=file]{padding:9px 11px;font-size:14px;cursor:pointer}
form.cita .err-msg{text-transform:lowercase}

/* ===== ciudades del formulario (se pueden marcar varias) ===== */
form.cita .ciudades{display:grid;gap:8px;min-width:0}
form.cita .ciudades .lbl{font-size:13px;font-weight:500}
form.cita .ciudades .lbl small{font-weight:400;opacity:.6;font-size:12px}
form.cita .chips{display:grid;gap:8px}
form.cita .chips .grupo{margin:4px 0 0;font-size:12px;opacity:.6}
form.cita .chips .fila{display:flex;flex-wrap:wrap;gap:6px}
form.cita .chips button{all:unset;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;font-size:14px;line-height:1.2;transition:background .15s,border-color .15s,color .15s,transform .18s cubic-bezier(.3,.7,.4,1)}
form.cita .chips button small{font-size:11px;opacity:.55}
form.cita .chips button:hover{border-color:rgba(0,0,0,.3)}
form.cita .chips button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
form.cita .chips button[aria-pressed="true"] small{opacity:.85}
form.cita .chips button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
form.cita .ciudades.err .chips button{border-color:#1d1d1f}
.scene.over-city{cursor:pointer}
.scene.dragging{cursor:grabbing}
form.cita .fotos-estado{font-size:12px;font-weight:400;opacity:.7}
form.cita .fotos-estado:empty{display:none}

/* ===== burbuja de reserva en el inicio ===== */
.reserva{position:absolute;z-index:7;top:calc(var(--top-h,96px) + 4px);right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));width:min(580px,46vw);display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.74)}
.reserva[hidden]{display:none}
.reserva .tinte{position:absolute;inset:0;background:var(--pink);opacity:0;pointer-events:none;z-index:3}
.res-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px 4px 24px}
.res-cab h2{margin:0;font-family:var(--f-type);font-size:22px;font-weight:500;letter-spacing:-.01em;text-transform:lowercase}
.res-x{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(118,118,128,.14);transition:background .2s,transform .2s}
.res-x:hover{background:rgba(118,118,128,.26);transform:rotate(90deg)}
.res-x:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.res-x svg{width:16px;height:16px;fill:none}
.res-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 24px 26px;display:grid;align-content:start;gap:16px;scrollbar-width:thin}
.res-cuerpo[hidden]{display:none}
.reserva .lead{font-size:15px;line-height:1.45;max-width:none;margin:0}
.reserva .via{margin:0}
.reserva form.cita{padding:0;max-width:none;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;gap:14px 14px}
.reserva .despues{margin:4px 0 0;font-size:13px}
.res-ok{flex:1;display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:30px 28px 40px}
.res-ok[hidden]{display:none}
.res-ok h3{margin:4px 0 0;font-family:var(--f-type);font-size:24px;font-weight:500;text-transform:lowercase}
.res-ok p{margin:0;max-width:36ch;font-size:15px;line-height:1.5;opacity:.75;text-transform:lowercase}
.res-ok .check{width:76px;height:76px;fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.res-ok-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.res-ok-acc .pill{text-decoration:none}
.onda{position:absolute;z-index:6;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:2px solid var(--pink);pointer-events:none}
html.reservando .flare{opacity:0;transition:opacity .4s}
html.reservando .dock{pointer-events:none}
html.reservando .scene{cursor:grab}
@media (max-width:860px){
  .reserva{left:10px;right:10px;width:auto;top:max(calc(var(--top-h,140px) + 150px),40svh);bottom:max(10px,env(safe-area-inset-bottom,0px));border-radius:24px}
  .res-cab{padding:14px 14px 2px 18px}
  .res-cuerpo{padding:4px 16px 22px}
}

/* al pulsar, los botones se hunden un poco (como en iOS) */
.route button:active,.seg button:active,form.cita .chips button:active,.res-x:active{transform:scale(.96)}

/* mira térmica sobre la ciudad donde estoy ahora */
.mira{position:absolute;left:0;top:0;width:46px;height:46px;pointer-events:none;transition:opacity .35s;will-change:transform}
.mira svg{display:block;width:100%;height:100%;overflow:visible}
.mira .m-giro{transform-box:view-box;transform-origin:50% 50%;animation:mira-late 2.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.mira path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mira .m-sombra{stroke:rgba(0,0,0,.42);stroke-width:3.4}
.mira .m-luz{stroke:#fff;stroke-width:1.5}
.labels.mini .mira{width:34px;height:34px}
@keyframes mira-late{from{transform:scale(1)}to{transform:scale(.86)}}

/* en pantallas táctiles no hay ratón que siga el destello: se quita (ahorra trabajo al móvil) */
@media (hover:none){.flare{display:none}}

/* viñeta de la ciudad tocada en el globo: sale del nombre de la ciudad; botón "pedir cita" y a su derecha las fechas o "lista de espera" */
.vin{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.vin-in{position:relative;display:flex;align-items:center;gap:4px;padding:5px 6px 5px 5px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 6px 24px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.06);
  transform:translateY(-50%) scale(.6);transform-origin:0 50%;opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.25),opacity .25s}
.vin-in::before{content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.vin.izq .vin-in{transform-origin:100% 50%}
.vin.izq .vin-in::before{left:auto;right:-4px}
.vin.si .vin-in{transform:translateY(-50%) scale(1);opacity:1}
.vin.si:not(.oculta){pointer-events:auto}
.vin.oculta .vin-in{opacity:0;transform:translateY(-50%) scale(.85);transition-duration:.25s}
.vin.fuera .vin-in{transition:none;opacity:0}
.vin-b{position:relative;padding:8px 16px;font-size:13px}
.vin-info{font-size:12px;font-weight:500;color:rgba(0,0,0,.6);padding:0 10px 0 8px;text-transform:lowercase;white-space:nowrap}
.vin-info::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:7px;vertical-align:1px}
.vin.espera .vin-info::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--pink)}
.vin{z-index:2}
.vin.arr .vin-in{transform-origin:50% 100%}
.vin.arr .vin-in::before{left:50%;top:auto;bottom:-4px;margin:0 0 0 -4.5px}

/* ---------- inicio: un solo botón central "pedir cita" y dos burbujas de ciudades ---------- */
html.is-home .dock{width:auto;display:block;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dock #cta{padding:13px 28px;font-size:15px;box-shadow:0 8px 26px rgba(0,0,0,.22)}
.burbs{position:absolute;z-index:6;left:0;right:0;top:calc(var(--top-h,96px) + 8px);bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + var(--dock-h,50px) + 16px);
  display:flex;justify-content:space-between;align-items:center;padding:0 max(28px,env(safe-area-inset-right,0px)) 0 max(28px,env(safe-area-inset-left,0px));pointer-events:none}
.burbs[hidden],.burb[hidden]{display:none}
.burb{pointer-events:auto;width:clamp(210px,24vw,320px);max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:rgba(255,255,255,.96);border-radius:26px;box-shadow:0 14px 44px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.05);padding:16px 8px 8px;will-change:transform,opacity}
.burb::-webkit-scrollbar{display:none}
.burb h3{margin:0 12px 8px;font-size:13px;font-weight:500;color:var(--grey)}
.burb-l{list-style:none;margin:0;padding:0}
.burb-c{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:8px minmax(0,1fr);gap:2px 10px;align-items:center;padding:9px 12px;border-radius:16px;transition:background .2s,transform .18s cubic-bezier(.3,.7,.4,1)}
.burb-c:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.burb-c:active{transform:scale(.97)}
@media (hover:hover){ .burb-c:hover{background:rgba(0,0,0,.04)} }
.burb-c .dot{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.burb-c.espera .dot{background:transparent;box-shadow:inset 0 0 0 1.5px #b9b9be}
.burb-c .c{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burb-c .d{grid-column:2;font-size:12px;color:var(--grey);white-space:nowrap}
.burb-c .d:empty{display:none}
html.reservando .burbs{pointer-events:none}
@media (max-width:860px){
  .burbs{align-items:flex-start;gap:10px;padding:0 10px}
  .burb{width:auto;flex:1 1 0;min-width:0;padding:14px 4px 6px;border-radius:22px}
  .burb h3{margin:0 10px 6px}
  .burb-c{padding:8px 10px;gap:2px 8px}
  .burb-c .c{font-size:13.5px}
}
.dock .route[hidden]{display:none}

/* formulario: sin título visible (se llega desde botones de "pedir cita"); solo queda la X arriba a la derecha.
   El título sigue ahí para lectores de pantalla. */
.res-cab{position:absolute;top:0;right:0;z-index:4;padding:14px 14px 0 0}
.res-cab h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.res-cuerpo{padding-top:22px}
.reserva .lead{padding-right:40px}
@media (max-width:860px){ .res-cab{padding:10px 10px 0 0} .res-cuerpo{padding-top:16px} }
/* botón central: Helvetica Neue casi bold, en minúsculas como el resto */
.dock #cta{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:.01em;font-size:15px;padding:14px 30px;white-space:nowrap}
.dock #cta{transition:opacity .3s,transform .35s cubic-bezier(.3,.7,.4,1),background .2s}
html.vineta .dock #cta{opacity:0;transform:translateY(14px) scale(.94);pointer-events:none}
/* móvil: el menú de arriba lleva un velo blanco suave detrás, para que al hacer zoom el globo nunca se mezcle con el texto */
@media (max-width:860px){
  html.is-home .topbar::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-60px;bottom:-34px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,.96) 0,rgba(255,255,255,.9) 70%,rgba(255,255,255,0) 100%)}
}

/* toda la web en escala de grises: el acento (--pink) ahora es casi negro; la jerarquía va con tonos de gris y opacidades */

/* el botón de abajo siempre centrado en la pantalla, sea cual sea el largo del texto (es / en) */
html.is-home .dock{left:0;right:0;width:auto;transform:none;display:flex;justify-content:center;pointer-events:none}
html.is-home .dock #cta{pointer-events:auto}
html.vineta .dock #cta{pointer-events:none}
/* móvil: el formulario ocupa toda la pantalla bajo el menú y tapa el globo (fondo casi opaco, sin desenfoque: más fluido) */
@media (max-width:860px){
  .reserva{top:calc(var(--top-h,140px) + 6px);background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* la X del formulario es opaca: al bajar, los campos no se ven por debajo */
.res-x{background:#ececee;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.res-x:hover{background:#e2e2e5}
/* móvil: el iPhone hace zoom al tocar un campo si su letra es menor de 16px. Con 16px solo sale el teclado. */
@media (pointer:coarse){ input,select,textarea{font-size:16px!important} }

/* ===== PORTADA: sin globo. Fondo blanco infinito, como el de Pocoyó (blanco con una sombra gris muy suave al fondo) ===== */
:root{--pocoyo:radial-gradient(ellipse 140% 95% at 50% 42%,#ffffff 48%,#f6f6f7 74%,#ececee 100%)}
.portada{position:absolute;inset:0;background:var(--pocoyo)}
html.is-home .land{background:var(--pocoyo)}

/* ===== ENTRADA: solo el nombre; se estira con el ancho de la ventana. Al tocarlo aparece la web ===== */
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--pocoyo);cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding-inline:max(16px,env(safe-area-inset-left,0px))}
.intro:focus-visible{outline:none}
.intro-logo{margin:0;width:min(1100px,88vw);display:flex;align-items:baseline;font-family:var(--f-type);font-weight:400;
  font-size:17px;letter-spacing:0;color:var(--grey);white-space:nowrap;transition:color .2s}   /* letras siempre del mismo tamaño: solo la barra se estira */
.intro-logo .bar{flex:1 1 auto;min-width:2ch;align-self:stretch;background:linear-gradient(currentColor,currentColor) left calc(100% - .2em)/100% 1px no-repeat}
@media (hover:hover){ .intro-logo:hover{color:var(--ink)} }   /* como el nombre de arriba al pasar por encima */
html.entrada .wrap{visibility:hidden}
html.entrada,html.entrada body{overflow:hidden}

/* ===== CABECERA: nombre / menú / idioma y sonido, uno debajo de otro ===== */
.topbar,html.is-home .topbar{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px}
.topbar .brandcol{flex:none;width:100%}
.topbar nav.top{flex-wrap:wrap;white-space:normal;gap:6px 26px}
.topbar .lang{margin-top:-2px}


/* ===== BOTÓN DE SONIDO: base de cartucho, siempre abajo a la derecha (también en la entrada) ===== */
#mute.cartucho{all:unset;position:fixed;z-index:400;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  display:block!important;width:44px;height:44px;padding:6px;margin:-6px;cursor:pointer;opacity:.4;transition:opacity .3s,transform .15s;-webkit-tap-highlight-color:transparent}
#mute.cartucho img{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.12)}   /* el único elemento a color de la web */
#mute.cartucho[aria-pressed="true"]{opacity:1}
#mute.cartucho:hover{opacity:.75}
#mute.cartucho[aria-pressed="true"]:hover{opacity:1}
#mute.cartucho:active{transform:scale(.9)}
#mute.cartucho:focus-visible{outline:2px solid var(--ink);outline-offset:-6px;border-radius:50%}
#mute.cartucho .x{position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#1d1d1f;stroke:#fff;stroke-width:1.6;stroke-linecap:round;fill:none;padding:2px;box-sizing:border-box;
  opacity:0;transform:scale(.4);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
#mute.cartucho[aria-pressed="false"] .x{opacity:1;transform:scale(1)}
#mute.cartucho[aria-pressed="false"]{opacity:.45}

/* ===== IDIOMA: es / en siempre abajo a la izquierda (mismo tamaño y color que antes) ===== */
.lang.esquina{position:fixed;z-index:400;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));line-height:44px;font-size:16px}
.lang.esquina button{padding:6px 2px;margin:-6px 0}
/* en la entrada (solo el nombre) no se ven ni el cartucho ni el idioma: aparecen con la web */
html.entrada #mute.cartucho,html.entrada .lang.esquina{opacity:0!important;pointer-events:none}
/* el formulario deja libre la franja de abajo para el idioma y el cartucho */
.reserva{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 56px)}
@media (max-width:860px){ .reserva{bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 60px)} }

/* ===== BOTÓN CENTRAL "book an appointment / pedir cita": en el centro de la pantalla, de cristal =====
   Está fijo en el centro: cuando debajo haya una galería que se desplaza, el botón se queda y deja ver lo de detrás. */
html.is-home .dock{position:fixed;z-index:8;left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%);display:flex;justify-content:center;pointer-events:none}
.dock #cta,.dock #cta.pill.pink{background:rgba(255,255,255,.34);color:var(--ink);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 34px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(0,0,0,.08);
  padding:15px 32px;font-weight:600}
.dock #cta:hover{background:rgba(255,255,255,.5)}
.dock #cta[aria-expanded="true"]{background:rgba(255,255,255,.6)}
/* la burbuja del formulario nace del botón con su mismo cristal */
.reserva .tinte{background:rgba(255,255,255,.6)}
.onda{border-color:rgba(29,29,31,.35)}
/* burbujas de ciudades: en ordenador a los lados del botón; en el móvil debajo de él */
.burbs{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 50px)}
@media (max-width:860px){ .burbs{top:calc(50% + 40px);bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 50px)} }

/* ===== el ancho de la página nunca pasa del ancho de la pantalla (en el móvil no hay scroll lateral;
   si el usuario hace zoom, el navegador sí deja moverse) ===== */
html,body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){ html{overflow-x:hidden} body{overflow-x:visible} }
html:not(.is-home) .topbar::before{inset:0 auto;left:50%;width:100vw;transform:translateX(-50%)}
@media (max-width:860px){ html.is-home .topbar::before{left:50%;right:auto;width:100vw;transform:translateX(-50%)} }

/* ===== GALERÍA DE LA PORTADA: una columna ancha en el centro que se desplaza de arriba abajo, detrás de todo =====
   Ocupa toda la pantalla como zona de scroll (la rueda funciona en cualquier sitio), pero las imágenes solo
   en una columna centrada. Si la ventana se estrecha más que la columna, la columna ocupa todo el ancho. */
.columna{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.columna::-webkit-scrollbar{display:none}
.columna-in{width:min(100%,clamp(380px,32vw,560px));margin:0 auto;display:flex;flex-direction:column;pointer-events:none;user-select:none;-webkit-user-select:none}
.columna-in img,.columna-in video{display:block;width:100%;height:auto;margin:0;-webkit-user-drag:none}
html:not(.is-home) .columna{display:none}

/* ===== MENÚ FIJO: art / tattoo / info / instagram no cambia nunca de tamaño ni de separación, como el nombre de arriba ===== */
.topbar nav.top,html .topbar nav.top{font-size:15px;gap:6px 26px;flex-wrap:nowrap;white-space:nowrap}
@media (max-width:700px){ .topbar nav.top,html .topbar nav.top{gap:6px 26px;flex-wrap:nowrap;white-space:nowrap} }

/* ===== PORTADA: sin velo blanco arriba; la interfaz se solapa sin más con la galería ===== */
html.is-home .topbar::before{content:none!important;display:none!important}

/* ===== BOTÓN CENTRAL: letra blanca, Helvetica Neue fina y en minúsculas ===== */
.dock #cta,.dock #cta.pill.pink{color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;text-transform:lowercase;letter-spacing:.02em;
  background:rgba(255,255,255,.2);text-shadow:0 1px 10px rgba(0,0,0,.28),0 0 1px rgba(0,0,0,.25)}
.dock #cta:hover{background:rgba(255,255,255,.3)}
.dock #cta[aria-expanded="true"]{background:rgba(255,255,255,.38)}

/* ===== TEXTOS QUE SE ADAPTAN A LO QUE TIENEN DEBAJO =====
   Todo el texto de la interfaz que flota sobre la galería o las fotos se pinta en "diferencia": sobre blanco se ve
   igual que siempre (gris / casi negro) y donde pasa por encima de algo oscuro se vuelve claro, letra a letra.
   Los colores van invertidos (blanco - color) para que sobre el fondo blanco salgan exactamente los grises de siempre. */
html.is-home .topbar,.lang.esquina{mix-blend-mode:difference;--ink:#fff;--grey:#757571;--pink:#fff;color:var(--ink)}
html.is-home .topbar{isolation:auto}
/* copia gris encima (js/contraste.js): deja las letras en escala de grises sin tocar la imagen de alrededor */
.capa{pointer-events:none!important;user-select:none}
.capa *{pointer-events:none!important}
.gris{mix-blend-mode:saturation!important;--ink:#808080;--grey:#808080;--pink:#808080;color:#808080!important}
/* contraste x3 (solo móvil): sobreexponer con gris 1/3 y subexponer con gris 1/2 → claro pasa a blanco, oscuro a negro */
.capa.esquivar,.capa.quemar{display:none!important}
.esquivar{mix-blend-mode:color-dodge!important;--ink:#555;--grey:#555;--pink:#555;color:#555!important}
.quemar{mix-blend-mode:color-burn!important;--ink:#808080;--grey:#808080;--pink:#808080;color:#808080!important}
.topbar.capa{z-index:11}
html:not(.is-home) .topbar.capa{display:none!important}
html.entrada .lang.esquina.capa{opacity:0!important}

/* ===== MÓVIL: la portada como el ejemplo (columna a pantalla completa, hueco blanco arriba, niebla blanca) ===== */
.niebla{display:none}
@media (max-width:500px),(pointer:coarse) and (max-width:860px){
  /* (solo teléfonos y tabletas, o ventanas de menos de 500 px: en una ventana de ordenador la columna sigue siendo 1/6) */
  /* la columna ocupa toda la pantalla, de borde a borde, detrás de toda la interfaz */
  html.is-home .columna{position:fixed;inset:0;z-index:1}
  html.is-home .columna-in{width:100%;
    /* al entrar, un hueco blanco arriba deja leer el nombre y el menú; al deslizar hacia abajo desaparece */
    padding-top:max(calc(var(--top-h,110px) + 28px),30svh);padding-bottom:22svh}
  html.is-home,html.is-home body{overflow:hidden;overscroll-behavior:none}
  /* niebla: blanco suave y algo transparente, con un desenfoque ligero. Subiendo: abajo grande. Bajando: abajo pequeña y una franja fina arriba */
  html.is-home .niebla{display:block;position:fixed;left:0;right:0;z-index:2;pointer-events:none;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:height .5s cubic-bezier(.3,.7,.4,1),opacity .5s}
  html.is-home .niebla.abajo{bottom:0;height:20svh;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.25) 50%,rgba(255,255,255,.55) 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,#000 55%)}
  html.is-home .niebla.arriba{top:0;height:calc(env(safe-area-inset-top,0px) + 40px);opacity:0;
    background:linear-gradient(to top,rgba(255,255,255,0) 0,rgba(255,255,255,.25) 50%,rgba(255,255,255,.55) 100%);
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 55%);mask-image:linear-gradient(to top,transparent 0,#000 55%)}
  html.is-home.baja .niebla.abajo{height:9svh}
  html.is-home.baja .niebla.arriba{opacity:1}
  html.reservando .niebla{opacity:0}
}
@media (max-width:860px){

  /* más contraste en los textos que se adaptan al fondo: blanco puro en "diferencia" (negro sobre blanco,
     blanco sobre oscuro) y un punto más de grosor, como en el ejemplo */
  html.is-home .topbar,.lang.esquina{--grey:#fff;--ink:#fff}
  html.is-home .topbar.gris,.lang.esquina.gris,html.is-home .topbar.quemar,.lang.esquina.quemar{--grey:#808080;--ink:#808080}
  html.is-home .topbar.esquivar,.lang.esquina.esquivar{--grey:#555;--ink:#555}
  html.is-home .topbar.esquivar,html.is-home .topbar.quemar,.lang.esquina.esquivar,.lang.esquina.quemar{display:flex!important}
  html.is-home .topbar nav.top a,.lang.esquina button,.lang.esquina span{font-weight:500}
}
@media (max-width:860px){ .lang.esquina button[aria-pressed="false"]{opacity:.5} }
/* móvil: "instagram" al extremo derecho de la fila del menú (art / tattoo / info quedan a la izquierda) */
@media (max-width:860px){ .topbar nav.top a[data-ig]{margin-left:auto} }

/* ===== MÓVIL: "book an appointment" sube al menú y las burbujas ocupan toda la pantalla (js/muelle.js) ===== */
/* arriba, el botón es una palabra más del menú: mismo tamaño y grosor, subrayado como el apartado abierto */
.topbar .cta-arriba{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--f-ui);font-size:15px;font-weight:500;line-height:inherit;
  color:var(--ink);text-transform:lowercase;white-space:nowrap;padding-bottom:2px;border-bottom:1.5px solid currentColor;-webkit-tap-highlight-color:transparent}
.topbar .cta-sombra{pointer-events:none;z-index:1}
@media (max-width:860px){
  /* el botón se centra en el hueco entre "info" e "instagram": art, portfolio, info e instagram no se mueven */
  html.cita-arriba .topbar nav.top{justify-content:flex-start;gap:6px 26px}
  html.cita-arriba .topbar nav.top .cta-arriba{margin-left:auto;margin-right:auto}
  html.cita-arriba .topbar nav.top a[data-ig]{margin-left:0}
}
/* ordenador: arriba a la derecha, al final de la fila del menú (debajo de "walls") */
@media (min-width:861px){ .topbar nav.top .cta-arriba{margin-left:auto} }
/* el cristal que hace el viaje entre el centro y el menú */
.cta-fantasma{position:fixed;z-index:9;pointer-events:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 34px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(0,0,0,.08);
  color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:15px;letter-spacing:.02em;text-transform:lowercase;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.28),0 0 1px rgba(0,0,0,.25);will-change:left,top,width,height,opacity}
@media (max-width:860px){
  /* las burbujas llenan la pantalla entre la cabecera y la fila de abajo (idioma / cartucho), una al lado de la otra */
  html.is-home .burbs{position:fixed;z-index:6;left:0;right:0;top:calc(var(--top-h,110px) + 14px);
    bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 44px + 16px);padding:0 12px;gap:10px;align-items:stretch}
  html.is-home .burb{max-height:none;height:auto;flex:1 1 0;min-width:0;will-change:transform,opacity}
}
/* hueco muy justo: solo se estrecha el aire alrededor del botón; las demás palabras siguen en su sitio */
html.cita-arriba.cita-justa .topbar nav.top{gap:6px 0}
html.cita-arriba.cita-justa .topbar nav.top > a:nth-child(1),html.cita-arriba.cita-justa .topbar nav.top > a:nth-child(2){margin-right:26px}
html.cita-arriba.cita-justa .topbar nav.top > a:nth-child(3){margin-right:8px}
html.cita-arriba.cita-justa .topbar nav.top a[data-ig]{margin-left:8px}

/* ===== ANCHO DE LA COLUMNA DE LA GALERÍA (copiado de la referencia "12.mov") =====
   Medido fotograma a fotograma: la columna mide siempre 1/6 del ancho de la ventana y va centrada, así que
   crece y encoge en proporción exacta con la ventana. Cuando la ventana baja de 550 px (ahí la columna
   ya sería de unos 90 px y las fotos no se leerían) cambia de golpe a ocupar todo el ancho. */
/* Como la web de referencia (polsolabg.com, medida fotograma a fotograma): en ordenador la columna mide siempre
   exactamente 1/6 del ancho de la ventana, centrada y pegada arriba, a cualquier tamaño de ventana; solo crece y
   encoge con el ancho (el alto de la ventana no la cambia). A pantalla completa solo en teléfonos y tabletas, o
   por debajo de 500 px (el mínimo de una ventana de navegador de ordenador). */
html .columna-in,html.is-home .columna-in{width:calc(100vw / 6)}
@media (max-width:500px),(pointer:coarse) and (max-width:860px){ html .columna-in,html.is-home .columna-in{width:100%} }
/* al cambiar el tamaño, el navegador no debe "anclar" el desplazamiento por su cuenta: lo hace js/columna.js */
.columna{overflow-anchor:none}

/* ===== FLUIDEZ (sensación tipo Apple) =====
   Una misma curva para todo: arranca rápido y frena largo y suave. */
:root{--apple:cubic-bezier(.32,.72,0,1)}
html{-webkit-tap-highlight-color:transparent}
/* galería: cada foto aparece con un fundido al cargar */
.columna-in img,.columna-in video{opacity:0;transition:opacity .9s var(--apple)}
.columna-in img.ok,.columna-in video.ok{opacity:1}
/* apartados: entran con un fundido y un leve ascenso */
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view.entra{animation:entra .75s var(--apple) both}
/* menú: el subrayado se dibuja de izquierda a derecha al pasar el ratón, y se recoge al salir */
nav.top a{border-bottom-color:transparent!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition:background-size .5s var(--apple),opacity .2s}
nav.top a[aria-current="page"]{background-size:100% 1.5px}
@media (hover:hover){ nav.top a:hover{background-size:100% 1.5px} }
/* al pulsar, todo responde con un leve hundimiento que vuelve con muelle */
nav.top a:active,.lang button:active,.burb-c:active,.topbar .cta-arriba:active{transform:scale(.96);transition:transform .12s var(--apple)}
.dock #cta:active{transform:scale(.96)!important;transition:transform .12s var(--apple)!important}
.lang button{transition:color .3s var(--apple),opacity .3s var(--apple),border-color .3s var(--apple),transform .35s var(--apple)}
.burb-c{transition:background .25s var(--apple),transform .35s var(--apple)}
/* el botón de cristal reacciona al ratón: se ilumina un poco y crece apenas */
@media (hover:hover){ .dock #cta{transition:background .35s var(--apple),transform .5s var(--apple),box-shadow .5s var(--apple)}
  .dock #cta:hover{transform:scale(1.025)} }
/* desplazamientos internos (burbujas, formulario) también con inercia suave en el móvil */
.burb,.res-cuerpo{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){ .view.entra{animation:none} .columna-in img,.columna-in video{transition:none;opacity:1} }
/* botón central sobre fondo blanco (columna más estrecha que el botón): letra oscura */
html.cta-oscuro .dock #cta,html.cta-oscuro .dock #cta.pill.pink,html.cta-oscuro .cta-fantasma{color:var(--ink);text-shadow:none;background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.08)}

/* ===== MÓVIL: la cabecera no se mueve nunca al cambiar de apartado =====
   Antes la portada y los apartados colocaban la cabecera por caminos distintos (margen del navegador + relleno
   en la portada; margen negativo + "sticky" en los apartados). En el iPhone eso daba unos píxeles de diferencia
   y las palabras subían y bajaban al volver a la portada. Ahora es la misma caja exacta en todas partes:
   pegada arriba, 26 px de aire encima, mismo grosor y mismo color de letra que en la portada. */
@media (max-width:860px){
  body{margin:0;padding-top:0;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .topbar,html.is-home .topbar,html:not(.is-home) .topbar{position:sticky;top:0;margin-top:0;padding-top:26px}
  html.is-home .topbar{padding-bottom:0}
  html:not(.is-home) .topbar{padding-bottom:14px;--ink:#000;--grey:#000}
  html:not(.is-home) .topbar nav.top a{font-weight:500}
}

/* ===== MÓVIL: en art, portfolio e info el botón de cita vive siempre en el menú =====
   Las burbujas de ciudades y el formulario salen de la portada (js/muelle.js) y se muestran fijos en pantalla,
   igual que en la portada: entre la cabecera y la fila de idioma / cartucho. */
@media (max-width:860px){
  .burbs.fuera{position:fixed;z-index:70;left:0;right:0;top:calc(var(--top-h,110px) + 14px);
    bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 44px + 16px);padding:0 12px;gap:10px;align-items:stretch;display:flex}
  .burbs.fuera[hidden]{display:none}
  .burbs.fuera .burb{max-height:none;height:auto;flex:1 1 0;min-width:0}
  .reserva.fuera{position:fixed;z-index:70}
}
/* x para cerrar las burbujas, arriba a la derecha de la de lista de espera (misma que la del formulario).
   Se queda pegada arriba aunque se desplace la lista. */
.burb-x{float:right;position:sticky;top:0;z-index:2;margin:-6px 4px 0 8px;width:30px;height:30px}
.burb-x svg{width:14px;height:14px}
/* en art, portfolio e info las burbujas quedan encima de textos: cristal casi opaco para que no se mezclen */
@media (max-width:860px){ .burbs.fuera .burb{background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} }

/* ===== Fluidez y toques al instante (30 oct) =====
   - Botones: sin el retraso del doble toque del móvil y sin destello gris al tocar.
   - Las copias de contraste no llevan el botón de cita (se movía en ellas a destiempo y dejaba una mancha negra).
   - La x de las burbujas ya no va dentro de la lista que se desplaza (en el iPhone, tocar algo "pegado" dentro de
     una lista que se mueve a veces no hace nada): la burbuja es una caja fija y solo se desplaza su lista.
   - Sin desenfoques detrás de las burbujas (son casi opacas): el móvil las mueve sin esfuerzo. */
button,a,[role=button],.burb-c,.res-x,.seg button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.capa .cta-arriba,.capa .cta-sombra{visibility:hidden!important}
.burb{display:flex;flex-direction:column;overflow:hidden;position:relative}
.burb h3{flex:none}
.burb .burb-l{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.burb .burb-l::-webkit-scrollbar{display:none}
.burb-x{float:none;position:absolute;top:10px;right:10px;margin:0;width:32px;height:32px;z-index:3}
.burb-x::before{content:"";position:absolute;inset:-8px;border-radius:50%}
#burbEspera h3{padding-right:34px}
@media (max-width:860px){ .burbs.fuera .burb{-webkit-backdrop-filter:none;backdrop-filter:none} }
@media (hover:none){ .res-x:hover{transform:none;background:rgba(118,118,128,.14)} }
.res-x:active{transform:scale(.9);transition:transform .1s var(--apple)}
.cta-fantasma{transform-origin:0 0;will-change:transform,opacity}
.reserva{will-change:transform,opacity}

/* El botón de cita del menú solo va subrayado mientras hay algo suyo abierto: las burbujas de ciudades (eligiendo)
   o el formulario (formulario). Al cerrarlo, sea cual sea, el subrayado se va con un fundido. */
.topbar .cta-arriba{border-bottom-color:transparent;transition:border-color .25s var(--apple)}
html.eligiendo .topbar .cta-arriba,html.formulario .topbar .cta-arriba{border-bottom-color:currentColor}

/* ===== ORDENADOR: el botón de cita también vive en el menú en art, portfolio e info (js/muelle.js) =====
   Las burbujas y el formulario salen de la portada y se muestran fijos encima del apartado, igual que en la portada. */
@media (min-width:861px){
  .burbs.fuera{position:fixed;z-index:70;top:calc(var(--top-h,96px) + 8px);bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 50px)}
  .burbs.fuera[hidden]{display:none}
  .reserva.fuera{position:fixed;z-index:70}
}
/* arriba en el menú el botón es una palabra: sin el fondo negro del "hover" de los botones rosas
   (en el iPhone el hover se queda puesto tras tocar y salía un recuadro negro en lugar de "book") */
.topbar .cta-arriba.pill.pink,.topbar .cta-arriba.pill.pink:hover,.topbar .cta-arriba.pill.pink:active{background:none;box-shadow:none}
@media (hover:hover){ .topbar .cta-arriba.pill.pink:hover{opacity:.6} }
/* ===== ORDENADOR: las dos burbujas de ciudades empiezan a la misma altura (arriba) =====
   Cada una mide lo que ocupen sus ciudades; si no caben, su lista se desplaza dentro. */
@media (min-width:861px){ .burbs,.burbs.fuera{align-items:flex-start} }
/* ===== Cartucho silenciado: la x va encima del cartucho, centrada (móvil y ordenador) ===== */
#mute.cartucho .x{left:28px;top:28px;right:auto;width:22px;height:22px;padding:4px;background:rgba(29,29,31,.88);transform:translate(-50%,-50%) scale(.4)}
#mute.cartucho[aria-pressed="false"] .x{transform:translate(-50%,-50%) scale(1)}

/* ===== columna de portada: secuencias de imágenes ===== */
.columna-in .secuencia{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;overflow:hidden;opacity:0;transition:opacity .9s var(--apple)}
.columna-in .secuencia.ok{opacity:1}
.columna-in .secuencia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none}
.columna-in .secuencia img.on{opacity:1}

/* el botón de cita, mientras cambia de sitio (js/muelle.js), sin transiciones propias: así nunca parpadea */
#cta.quieto,.dock #cta.quieto,.topbar #cta.quieto{transition:none!important}

/* ===== cambio de tamaño de ventana sin cortes =====
   El hueco blanco de arriba (móvil) también crece poco a poco desde 860 px (arriba, en el bloque MÓVIL).
   El color del texto del botón (blanco sobre la foto / oscuro sobre blanco) cambia con un fundido, no de golpe. */
.dock #cta{transition:opacity .3s,transform .35s cubic-bezier(.3,.7,.4,1),background .35s var(--apple),color .45s var(--apple),text-shadow .45s var(--apple),border-color .45s var(--apple)}
@media (hover:hover){ .dock #cta{transition:background .35s var(--apple),transform .5s var(--apple),box-shadow .5s var(--apple),color .45s var(--apple),text-shadow .45s var(--apple),border-color .45s var(--apple)} }
.columna-in{position:relative}
/* art: el título del cuadro, primera línea */
.p-desc .p-tit{font-weight:500;color:var(--ink)}

/* ===== about: una sola frase, en el centro del apartado ===== */
#v-about{min-height:calc(100svh - var(--about-top,164px));justify-content:center;align-items:center}
#v-about .nada{margin:0;font-family:var(--f-type);font-size:15px;font-weight:400;letter-spacing:0;text-transform:lowercase;color:var(--ink);text-align:center}

/* ===== formulario: ciudades en dos carriles que se deslizan de lado (arriba con fechas, abajo lista de espera) ===== */
form.cita .chips{gap:8px}
form.cita .chips .carril{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;padding:2px 0;cursor:grab;
  --fi:0px;--ff:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi),#000 calc(100% - var(--ff)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fi),#000 calc(100% - var(--ff)),transparent 100%)}
form.cita .chips .carril::-webkit-scrollbar{display:none}
form.cita .chips .carril.ini{--fi:28px}
form.cita .chips .carril.fin{--ff:28px}
form.cita .chips .carril.arrastra{cursor:grabbing;user-select:none}
form.cita .chips .carril.arrastra button{pointer-events:none}
form.cita .chips .carril button{flex:none;white-space:nowrap}

/* ===== visor: hueco fijo con dos fotos apiladas (fundido cruzado sin saltos) ===== */
.lb-stage{position:relative;width:100%;height:calc(100dvh - 150px);flex:none;touch-action:pan-y;will-change:transform}
.lb-fig .lb-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;opacity:0;
  transition:filter .3s;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lb-fig .lb-stage img.espera{filter:opacity(.5)}
.lb-fig figcaption{min-height:1.4em}
@media (max-width:640px){ .lb-fig{padding-bottom:64px} .lb-stage{height:calc(100dvh - 200px)} }
form.cita .chips .grupo{margin:6px 0 -2px;font-size:12px;line-height:1.2;opacity:.55}
form.cita .chips .grupo:first-child{margin-top:0}
form.cita .via{margin:10px 0 2px;gap:10px}