/* ==============================================================================
   VELACCIO V2 — chrome: cabecera, desplegables, menú, reserva, visor, pie.
   Provenance ref: VEL-PROV-9K4XQ7M2
   ============================================================================== */

/* ── logo ──────────────────────────────────────────────────────────────────── */
/* The wordmark PNG as a mask, so it is painted with currentColor and flips with
   the section like any text. */
.logo {
  display: block; width: 112px; aspect-ratio: 800 / 133; background-color: currentColor;
  -webkit-mask: url(../../assets/logo-velaccio.png) center / contain no-repeat;
  mask: url(../../assets/logo-velaccio.png) center / contain no-repeat;
}
@media (min-width: 768px) { .logo { width: 128px; } }

/* ── cabecera ──────────────────────────────────────────────────────────────── */
/* Transparent, like Darkroom's: three things float over the page (logo, nav,
   button) and take the colour of the section under them. Past the first
   screen the links fold into a single "menú" pill. */
.hd {
  --hd-fg: var(--c-black); --hd-pill: var(--c-black); --hd-pill-fg: #fff; --hd-cta: var(--c-black); --hd-cta-fg: #fff;
  position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--hd-fg); pointer-events: none;
  view-transition-name: hd;
}
.hd[data-on="dark"] { --hd-fg: #fff; --hd-pill: rgba(255, 255, 255, .1); --hd-pill-fg: #fff; --hd-cta: #fff; --hd-cta-fg: var(--c-black); }
/* No fade behind the bar: the header floats straight over the page. (There
   used to be a gradient backdrop past the first screen, which over the warm
   sections had to replay their gradient exactly — that is what kept the warm
   gradient a horizontal band. Gone, so the warm surfaces are free to be a mesh.) */
.hd[data-on="warm"] .hd__cta .bt__a { background: var(--c-black); color: #fff; }
.hd__bar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  height: var(--hd-h); padding-inline: var(--gutter);
}
.hd__bar > * { pointer-events: auto; }
.hd__logo { justify-self: start; padding: 8px 0; transition: color .2s, opacity .35s var(--ease-soft); }
.hd__nav { position: relative; display: flex; align-items: center; justify-content: center; transition: opacity .35s var(--ease-soft); }
.hd__links { display: none; }
.hd__cta { --b-bg: var(--hd-cta); --b-fg: var(--hd-cta-fg); justify-self: end; height: 36px; }
.hd__cta .bt__a { width: 36px; }
.hd__cta .bt__t { padding: 0 12px 0 14px; min-width: 0; }
.hd__cta-l { display: none; }
.hd__cta .bt__t { transition: background-color .25s, color .25s, transform .35s var(--ease); }
.hd__cta .bt__a { transition: background-color .25s, color .25s, transform .7s var(--ease); }
.hd__cta .bt__t > span { transition: opacity .3s var(--ease-soft); }
/* the arrow points in, towards the page; on hover it leans that way */
.hd__cta .bt__a svg { transition: transform .7s var(--ease); }
.hd__cta:hover .bt__a svg, .hd__cta:focus-visible .bt__a svg { transform: translateX(-2px); }
.hd__cta:hover .bt__t, .hd__cta:focus-visible .bt__t { transform: none; }

/* Booking open (js/v2/book.js): the button's plate IS the panel. The panel
   (.book__sheet) opens out of the plate — same top and right edge, the same
   gap again at the bottom — while the plate's words fade and the plate turns
   the panel's colour and steps aside for it. The arrow stays outside, riding
   along the panel's left edge, and turns to point out. The rest of the
   header steps back; the header sits over the panel until it has folded. */
html.is-book-up .hd { z-index: 125; }
html.is-book-open .hd__logo, html.is-book-open .hd__nav { opacity: 0; pointer-events: none; }
html.is-book-open .hd__cta { --b-bg: var(--c-dark); --b-fg: #fff; pointer-events: none; }
/* the arrow travels on exactly the panel's clip timing, both ways, so it
   stays 2px clear of the panel's edge the whole time */
html.is-book-open .hd__cta .bt__a {
  pointer-events: auto; transform: translateX(var(--bk-shift, 0px)); background: var(--warm); color: var(--c-black);
  transition: background-color .25s, color .25s, transform .75s var(--ease);
}
html.is-book-up:not(.is-book-open) .hd__cta .bt__a { transition: background-color .25s, color .25s, transform .7s var(--ease-io); }
html.is-book-open .hd__cta .bt__t { opacity: 0; transition: background-color .3s linear, color .3s linear, opacity 0s .35s; }
html.is-book-open .hd__cta .bt__t > span { opacity: 0; transition-duration: .15s; }
html.is-book-open .hd__cta .bt__a svg { transform: rotate(180deg); }
html.is-book-open .hd__cta:hover .bt__a svg, html.is-book-open .hd__cta:focus-visible .bt__a svg { transform: rotate(180deg) translateX(-2px); }
/* folding back: the plate is back at once, in the panel's colour, and only
   takes its own colour (and its words) again as the panel lands on it */
html.is-book-up:not(.is-book-open) .hd__cta .bt__t { transition: background-color .3s linear .4s, color .3s linear .4s, opacity 0s; }
html.is-book-up:not(.is-book-open) .hd__cta .bt__t > span { transition: opacity .3s var(--ease-soft) .5s; }

.hd__menu {
  position: relative; display: inline-grid; place-items: center; height: 32px; min-width: 64px; padding: 0 16px;
  border-radius: 6px; background: var(--hd-pill); color: var(--hd-pill-fg); font-size: .8125rem; line-height: 1;
  transition: background-color .25s, min-width .45s var(--ease), padding .45s var(--ease), height .45s var(--ease);
}
.hd__menu > * { grid-area: 1 / 1; }
.hd__menu-x { width: 14px; height: 14px; opacity: 0; transform: rotate(-45deg) scale(.6); transition: opacity .25s, transform .45s var(--ease); }
.hd__menu-t { transition: opacity .2s, transform .45s var(--ease); }
html.is-menu-open .hd__menu { min-width: 40px; height: 40px; padding: 0; background: var(--c-black); color: #fff; }
html.is-menu-open .hd__menu-x { opacity: 1; transform: none; }
html.is-menu-open .hd__menu-t { opacity: 0; transform: scale(.6); }

@media (min-width: 560px) {
  .hd__cta-l { display: inline; }
  .hd__cta-s { display: none; }
  .hd__cta .bt__t { padding: 0 16px 0 18px; }
}
@media (min-width: 1024px) {
  .hd__bar { grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .hd__nav { min-width: 420px; height: 40px; }
  .hd__cta { justify-self: end; height: 40px; }
  .hd__cta .bt__a { width: 40px; }
  .hd__links {
    display: flex; align-items: center; gap: clamp(24px, 2.4vw, 40px);
    transition: opacity .3s var(--ease-soft), transform .5s var(--ease), visibility 0s .5s;
  }
  .hd__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; font-size: .8125rem; letter-spacing: .01em; white-space: nowrap; transition: opacity .2s; }
  .hd__links:hover .hd__link:not(:hover):not([aria-expanded="true"]) { opacity: .5; }
  .hd__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .hd__chev { width: 9px; height: 6px; transition: transform .35s var(--ease); }
  .hd__link[aria-expanded="true"] .hd__chev { transform: rotate(180deg); }
  /* the pill sits on top of the links and takes over past the first screen */
  .hd__menu { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; transform: scale(.85); pointer-events: none; visibility: hidden; transition: opacity .25s, transform .45s var(--ease), visibility 0s .45s, background-color .25s, min-width .45s var(--ease), height .45s var(--ease), padding .45s var(--ease); }
  html.is-collapsed .hd__links, html.is-menu-open .hd__links { opacity: 0; transform: scale(.96); visibility: hidden; pointer-events: none; }
  html.is-collapsed .hd__menu, html.is-menu-open .hd__menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
}

/* ── fila de los menús ─────────────────────────────────────────────────────
   One row for the header dropdowns and the full-screen menu: number, name,
   one line, arrow. Rows are all the same height and sit in a list split by
   hairlines, so a list of three and a list of six both close up with no
   holes; what a service includes rides on the preview piece instead. */
.nrs { display: grid; }
.nrs > li { position: relative; }
.nrs > li + li::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: rgba(13, 13, 13, .08); transition: opacity .3s;
}
.nrs > li:hover::before, .nrs > li:hover + li::before,
.nrs > li:has(> .nr:focus-visible)::before, .nrs > li:has(> .nr:focus-visible) + li::before { opacity: 0; }
.nr {
  --nr-h: var(--c-grey);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 11px 12px; border-radius: 10px; color: var(--c-black);
  transition: background-color .3s var(--ease-soft);
}
.nr:hover, .nr:focus-visible { background: var(--nr-h); }
.nr:focus-visible { outline-offset: 0; }
.nr > .nb { grid-area: 1 / 1; }
.nr__t { grid-area: 1 / 2; font-size: .9375rem; font-weight: 500; line-height: 1.25; letter-spacing: .005em; }
.nr__d { grid-area: 2 / 2; font-size: .8125rem; line-height: 1.4; letter-spacing: .01em; color: #5E5E5E; }
.nr__go {
  grid-area: 1 / 3 / 3 / 4; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-grey); transition: transform .5s var(--ease), background-color .3s;
}
.nr__go svg { width: 10px; height: 10px; }
.nr:hover .nr__go, .nr:focus-visible .nr__go { transform: rotate(45deg); background: var(--svc, var(--c-orange)); }
.nr:hover .nr__t, .nr:focus-visible .nr__t { transform: translateX(2px); }
.nr__t { transition: transform .5s var(--ease); }
.nr[aria-current="page"] .nr__t::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: var(--c-orange); vertical-align: middle; }
/* no number: the name and its line take the first column */
.nr--plain, .nr--all { grid-template-columns: minmax(0, 1fr) auto; }
.nr--plain .nr__t, .nr--all .nr__t { grid-area: 1 / 1; }
.nr--plain .nr__d, .nr--all .nr__d { grid-area: 2 / 1; }
.nr--plain .nr__go, .nr--all .nr__go { grid-area: 1 / 2 / 3 / 3; }
/* "todos los servicios": the one warm row */
.nr--all { padding-block: 14px; background: var(--warm); }
.nr--all:hover, .nr--all:focus-visible { background: var(--warm); }
.nr--all .nr__d { color: rgba(13, 13, 13, .8); }
.nr--all .nr__go, .nr--all:hover .nr__go, .nr--all:focus-visible .nr__go { background: rgba(255, 255, 255, .55); }

/* ── la pieza que cambia (desplegables y menú) ─────────────────────────────
   Layers stacked; the one showing is .is-on. A new one wipes up over the
   last (which stays put underneath as .is-prev): the site's page-transition
   wipe, never a crossfade. js/v2/app.js drives it. A service's layer carries
   its chips at the foot, so they arrive with the wipe. */
.pv { position: relative; height: 100%; min-height: 200px; border-radius: 14px; overflow: hidden; background: #161616; isolation: isolate; }
.pv__layer { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.pv__layer.is-prev { z-index: 1; clip-path: inset(0 0 0 0); }
.pv__layer.is-on { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-io); }
.pv__layer > .media, .pv__layer > .art { position: absolute; inset: 0; }
.pv__layer.is-on > .media, .pv__layer.is-on > .art { animation: pv-in .9s var(--ease-io); }
@keyframes pv-in { from { transform: translate3d(0, 14%, 0) scale(1.08); } }
/* "Nuestro trabajo" wipes at twice the speed (js/v2/app.js waits the same) */
.drop--work .pv__layer.is-on { transition-duration: .45s; }
.drop--work .pv__layer.is-on > .media, .drop--work .pv__layer.is-on > .art { animation-duration: .45s; }
.pv .media > img, .pv .media > video { object-position: 50% 30%; }
.pv .pv__cap { top: 10px; bottom: auto; }
.pv__inc {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: 48px 12px 12px;
  background: linear-gradient(rgba(13, 13, 13, 0), rgba(13, 13, 13, .62)); color: #fff;
}
.pv__inc-h { font-size: .6875rem; letter-spacing: .02em; opacity: .8; }
.pv__inc .chips > * { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pv__layer.is-on .pv__inc { animation: pv-inc .9s var(--ease) .25s backwards; }
@keyframes pv-inc { from { opacity: 0; transform: translateY(10px); } }
/* the services dropdown: a real client case on each layer, in the brand
   wall's panel colours (grey, white mark between four corner ticks) */
.pv--case { background: #2b2b2b; }
.pv--case .pv__layer { clip-path: none; visibility: hidden; }
.pv--case .pv__layer.is-on { visibility: visible; transition: none; }
.pv--case .pv__layer.is-prev { visibility: hidden; }
.pvc {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; padding: 16px 18px 18px; color: #fff;
  background: radial-gradient(70% 45% at 75% 22%, rgba(255, 255, 255, .2), transparent 70%), radial-gradient(65% 50% at 20% 90%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(160deg, #4a4a4a, #262626);
}
.pvc__eye { display: flex; justify-content: space-between; gap: 12px; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pvc__mark { position: relative; display: grid; place-items: center; min-height: 0; margin-block: 6px; }
.pvc__mark i { position: absolute; width: 5px; height: 5px; background: #fff; }
.pvc__mark i:nth-child(1) { top: 0; left: 0; } .pvc__mark i:nth-child(2) { top: 0; right: 0; }
.pvc__mark i:nth-child(3) { bottom: 0; left: 0; } .pvc__mark i:nth-child(4) { bottom: 0; right: 0; }
/* the mark fits inside the four ticks, wide or round */
.pvc__logo { position: absolute; top: 14%; left: 17%; width: 66%; height: 72%; object-fit: contain; }
.pvc__name { font-family: var(--f-serif); font-size: 1.75rem; line-height: 1.1; text-align: center; }
.pvc__res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pvc__big { font-family: var(--f-sans); font-weight: 700; font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); line-height: .9; letter-spacing: -.04em; }
.pvc__lab { font-size: .8125rem; line-height: 1.3; color: rgba(255, 255, 255, .8); }
.pvc__did { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .72); }


/* ── desplegables ──────────────────────────────────────────────────────────
   A white panel: the list on the left, the piece on the right at the full
   height of the list. */
.drop {
  position: absolute; top: calc(var(--hd-h) - 10px); left: var(--drop-x, 50%); z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--drop-side, 380px); gap: 8px;
  width: min(var(--drop-w, 860px), calc(100vw - var(--gutter) * 2)); padding: 8px;
  border-radius: 22px; background: #fff; color: var(--c-black); pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, .06), 0 44px 90px -34px rgba(13, 13, 13, .5);
  clip-path: inset(0 0 100% 0 round 22px); transform: translateY(-8px);
  transition: clip-path .65s var(--ease), transform .65s var(--ease);
}
.drop.is-open { clip-path: inset(0 0 0 0 round 22px); transform: none; }
.drop--work { --drop-w: 740px; --drop-side: 330px; }
.drop__list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.drop__list > .nr--all, .drop__note { margin-top: auto; }
.drop__note { padding: 10px 12px 8px; border-top: 1px solid rgba(13, 13, 13, .08); font-size: .75rem; letter-spacing: .01em; color: var(--fg-2); }
.drop .pv { border-radius: 14px; }
/* the rows come in one after another as the panel opens */
.js .drop .nrs > li, .js .drop__list > .nr--all, .js .drop__note { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-soft), transform .7s var(--ease); }
.js .drop.is-open .nrs > li, .js .drop.is-open .drop__list > .nr--all, .js .drop.is-open .drop__note { opacity: 1; transform: none; transition-delay: calc(.08s + var(--n, 0) * 35ms); }
.nrs > li:nth-child(2) { --n: 1; }
.nrs > li:nth-child(3) { --n: 2; }
.nrs > li:nth-child(4) { --n: 3; }
.nrs > li:nth-child(5) { --n: 4; }
.drop__list > .nr--all, .drop__note { --n: 5; }
.drop-scrim {
  position: fixed; inset: 0; z-index: 99; background: rgba(13, 13, 13, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-soft), visibility 0s .45s;
}
html.is-drop-open .drop-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ── menú a pantalla completa ──────────────────────────────────────────────
   Two levels and one picture, so the eye has one place to start. The four
   services are the big rows and share the height; the work and the company
   sit under them in small type, as one quiet block; the piece on the right
   follows the pointer. */
.menu {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--hd-h) + 4px) var(--gutter) 16px; overflow: hidden auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__in { display: grid; gap: 16px; align-content: start; min-height: 0; }
.menu__nav { display: grid; gap: 36px; min-width: 0; }
.menu__svc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.menu__h { margin: 4px 2px 8px; font-size: .75rem; letter-spacing: .02em; color: var(--fg-2); }
.menu .nr { --nr-h: #fff; }
.menu .nr__go { background: #fff; }
.menu .nrs > li + li::before { background: rgba(13, 13, 13, .1); }
/* the services lead at every size: serif on phones too, above the small links */
.nrs--big .nr__t { font-family: var(--f-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.01em; }
.menu__all { align-self: flex-start; margin: 8px 12px 0; font-size: .875rem; }
.menu__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 20px 12px 0; border-top: 1px solid rgba(13, 13, 13, .1); }
.menu__more .menu__h { margin-inline: 0; }
.menu__links { display: grid; gap: 2px; }
.menu__links a { position: relative; display: inline-block; font-size: .9375rem; line-height: 1.6; letter-spacing: .005em; }
@media (min-width: 700px) { .menu__links a { font-size: 1.0625rem; line-height: 1.5; } }
.menu__links a:hover, .menu__links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.menu__links a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--c-orange); }
.menu__side { display: none; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 24px; }
.menu__foot .bt { margin-right: auto; }
/* tablet and up: the menu fills the screen top to bottom — the service rows
   share whatever height there is, the rest sits at the foot */
@media (min-width: 700px) {
  .menu__in { align-content: stretch; }
  .menu__nav { grid-template-rows: 1fr auto; }
  .nrs--big { flex: 1; grid-auto-rows: minmax(68px, 1fr); }
  .nrs--big .nr { height: 100%; align-content: center; gap: 6px 18px; padding: 0 18px 0 14px; border-radius: 14px; }
  .nrs--big .nb { width: 24px; height: 24px; font-size: .75rem; }
  .nrs--big .nr__t { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.5rem, .9rem + 1.25vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; }
  .nrs--big .nr__d { font-size: .875rem; }
  .nrs--big .nr__go { width: 40px; height: 40px; }
  .nrs--big .nr__go svg { width: 12px; height: 12px; }
  .menu__all { margin-inline: 14px; }
  .menu__more { padding-inline: 14px; }
}
/* with a pointer, a service's arrow only shows on the row being pointed at */
@media (hover: hover) {
  .menu .nrs--big .nr__go { opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease-soft), transform .5s var(--ease), background-color .3s; }
  .menu .nrs--big .nr:hover .nr__go, .menu .nrs--big .nr:focus-visible .nr__go { opacity: 1; transform: rotate(45deg); }
}
@media (min-width: 1100px) {
  .menu { padding-bottom: 20px; }
  .menu__foot { justify-content: flex-end; padding-top: 18px; }
  .menu__foot .bt { display: none; }   /* the header's button is right above */
  .menu__in { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); gap: clamp(32px, 4vw, 64px); }
  .menu__side { display: block; position: relative; min-height: 320px; }
}
/* cinematic entrance: the panel wipes down, then the rows rise in turn and
   the piece opens from the top like a shutter */
.js .menu__h, .js .menu .nrs > li, .js .menu__all, .js .menu__grp, .js .menu__foot {
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-soft), transform .8s var(--ease);
}
.js .menu.is-open .menu__h, .js .menu.is-open .nrs > li, .js .menu.is-open .menu__all, .js .menu.is-open .menu__grp, .js .menu.is-open .menu__foot { opacity: 1; transform: none; }
.js .menu.is-open .menu__h { transition-delay: .22s; }
.js .menu.is-open .nrs > li { transition-delay: calc(.26s + var(--n, 0) * 45ms); }
.js .menu.is-open .menu__all { transition-delay: .5s; }
.js .menu.is-open .menu__grp { transition-delay: .5s; }
.js .menu.is-open .menu__grp + .menu__grp { transition-delay: .56s; }
.js .menu.is-open .menu__foot { transition-delay: .62s; }
.js .menu__side .mc { clip-path: inset(0 0 100% 0 round 18px); transition: clip-path 1.1s var(--ease-io) .2s; }
.js .menu.is-open .menu__side .mc { clip-path: inset(0 0 0 0 round 18px); }

/* ── menú: el panel del lado ───────────────────────────────────────────────
   One panel that stays put, on the grey of the brand wall's panel (Sobre
   nosotros), with a real client in it: the mark between four corner ticks,
   who, the result as the case library words it, and what we did. Every three
   seconds js/v2/app.js blurs it out (.is-out), puts another in, and blurs
   that in; the pill, the arrow, the ticks and the rule stay. */
.mc {
  position: absolute; inset: 0; overflow: hidden; border-radius: 18px;
  background: radial-gradient(55% 45% at 72% 30%, rgba(255, 255, 255, .2), transparent 70%), radial-gradient(60% 55% at 25% 85%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(160deg, #4a4a4a, #2b2b2b);
}
.mc__card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.2vw, 34px); color: #fff; }
.mc__card :is(.mc__logo, .mc__name, .mc__who > *, .mc__rt, .mc__d) { transition: filter .22s var(--ease-soft), opacity .22s var(--ease-soft); }
.mc__card.is-out :is(.mc__logo, .mc__name, .mc__who > *, .mc__rt, .mc__d) { filter: blur(14px); opacity: 0; }
.mc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc__eye { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #fff; color: var(--c-black); font-size: .75rem; letter-spacing: .01em; }
.mc__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--c-black); transition: transform .5s var(--ease); }
.mc__go svg { width: 12px; height: 12px; }
.mc__card:hover .mc__go { transform: rotate(45deg); }
.mc__d { max-width: 34em; font-size: .9375rem; line-height: 1.5; letter-spacing: .005em; color: rgba(255, 255, 255, .72); }
.mc__mark { position: relative; flex: 1; min-height: 120px; margin-block: 8px 4px; }
.mc__mark i { position: absolute; width: 6px; height: 6px; background: #fff; }
.mc__mark i:nth-child(1) { top: 0; left: 0; } .mc__mark i:nth-child(2) { top: 0; right: 0; }
.mc__mark i:nth-child(3) { bottom: 0; left: 0; } .mc__mark i:nth-child(4) { bottom: 0; right: 0; }
/* round marks no bigger than wide ones: the height is capped */
.mc__logo { position: absolute; top: 50%; left: 18%; width: 64%; height: min(64%, 170px); translate: 0 -50%; object-fit: contain; }
.mc__name { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-serif); font-size: clamp(1.75rem, 1rem + 1.4vw, 2.625rem); }
.mc__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mc__rt { max-width: 16em; font-family: var(--f-serif); font-size: clamp(1.5rem, 1rem + 1.1vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* ── reserva: formulario (en el panel y al final de cada página) ───────────── */
.bk {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 18px 14px;
  --chip: color-mix(in srgb, currentColor 7%, transparent); --chip-h: color-mix(in srgb, currentColor 14%, transparent);
}
.bk__f { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; }
.bk__f--full { grid-column: 1 / -1; }
.bk__l { font-size: .875rem; letter-spacing: .01em; }
.bk input, .bk select, .bk textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--field); color: var(--fg);
  font-size: .875rem; letter-spacing: .01em; outline: none; transition: box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.bk textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.bk input::placeholder, .bk textarea::placeholder { color: var(--fg-3); }
.bk select:invalid { color: var(--fg-3); }
/* where the browser draws the list itself, it takes the section's colours */
.bk option { background-color: var(--bg); color: var(--fg); }
.bk option[disabled] { color: var(--fg-3); }
.bk input:focus-visible, .bk select:focus-visible, .bk textarea:focus-visible, .bk select:open { box-shadow: inset 0 0 0 1px var(--fg); }
.bk__f:has(select)::after {
  content: ""; position: absolute; right: 16px; bottom: 19px; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease);
}
.bk__f:has(select:open)::after { transform: translateY(3px) rotate(225deg); }
/* Chrome and Edge draw the list as part of the page (customizable select),
   so it gets the site's look: a rounded panel in the field colour, a soft
   highlight under the pointer and an orange dot on the chosen option. The
   placeholder stays the value until one is picked but leaves the list. */
@supports (appearance: base-select) {
  .bk select, .bk select::picker(select) { appearance: base-select; }
  .bk select { display: flex; align-items: center; }
  .bk select::picker-icon { display: none; }
  .bk select::picker(select) {
    margin-block: 6px; padding: 6px; border: 0; border-radius: 12px;
    background: linear-gradient(var(--field), var(--field)), var(--bg); color: var(--fg);
    box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgba(0, 0, 0, .55);
    opacity: 0; translate: 0 -4px;
    transition: opacity .18s, translate .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete;
  }
  .bk select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .bk select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  .bk option { gap: 10px; padding: 10px 12px; border-radius: 8px; background: none; transition: background-color .15s; }
  .bk option[disabled] { display: none; }
  .bk option:hover, .bk option:focus-visible { background: var(--chip-h); outline: none; }
  .bk option::checkmark { order: 1; margin-left: auto; content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); }
}
.bk__cal { padding: 14px; border-radius: 12px; background: var(--field); }
.bk__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk__month { font-size: .875rem; letter-spacing: .01em; }
.bk__month::first-letter { text-transform: uppercase; }
.bk__nav { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; transition: background-color .2s; }
.bk__nav svg { width: 14px; height: 14px; }
.bk__nav:hover:not(:disabled) { background: var(--chip-h); }
.bk__nav:disabled { opacity: .3; cursor: default; }
.bk__dow, .bk__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk__dow span { font-size: .6875rem; color: var(--fg-3); text-align: center; padding-bottom: 6px; }
.bk__grid .vel-cal__day { height: 36px; border-radius: 8px; font-size: .8125rem; font-feature-settings: "tnum" 1; transition: background-color .15s; }
.bk__grid .vel-cal__day:hover:not(:disabled):not(.is-sel) { background: var(--chip-h); }
.bk__grid .vel-cal__day:disabled { color: var(--fg-3); opacity: .45; cursor: default; }
.bk__grid .vel-cal__day.is-today .vel-cal__day-n { text-decoration: underline; text-underline-offset: 3px; }
.bk__grid .vel-cal__day.is-sel { color: #0D0D0D; }
.bk__slotbox { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bk__slots-l { display: block; font-size: .75rem; color: var(--fg-2); margin-bottom: 8px; }
.bk__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.bk__slots:empty { display: none; }
.vel-book__slot { height: 32px; padding: 0 12px; border-radius: 6px; background: var(--chip); font-size: .8125rem; font-feature-settings: "tnum" 1; transition: background-color .15s; }
.vel-book__slot:hover:not(.is-sel) { background: var(--chip-h); }
.vel-book__slot.is-sel { color: #0D0D0D; }
.bk__when { font-size: .8125rem; margin-top: 2px; }
.bk__send { display: grid; gap: 10px; margin-top: 6px; }
.bk__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 10px;
  background: var(--inv-bg); color: var(--inv-fg); font-size: .9375rem; letter-spacing: .01em; transition: opacity .25s, transform .3s var(--ease);
}
.bk__cta svg { width: 14px; height: 14px; }
.bk__cta:active { transform: scale(.99); }
.bk__cta.is-disabled { opacity: .38; pointer-events: none; }
.bk__tip { font-size: .75rem; color: var(--fg-2); text-align: center; }
.bk__legal { font-size: .75rem; color: var(--fg-3); }
.vel-book__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk__done { display: grid; gap: 8px; padding: 20px; border-radius: 12px; background: var(--field); }
.bk.is-done > :not(.bk__done) { display: none; }

/* ── reserva: panel lateral ────────────────────────────────────────────────── */
.book { position: fixed; inset: 0; z-index: 120; background: transparent; }
.book__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .4s var(--ease-soft); }
/* A floating panel cut from the header button's plate: --bk-t / --bk-r are
   the plate's own top and right offsets (the same gap is kept at the
   bottom), --bk-a the arrow beside it, which stays outside. It sits at its
   full size and is revealed by its clip, which starts as the plate's
   rectangle (--bk-clip) and opens to the whole panel, so nothing inside
   stretches. Its colour starts as the plate's (--bk-from). js/v2/book.js
   measures all of it. */
.book__sheet {
  position: absolute; top: var(--bk-t, 14px); right: var(--bk-r, var(--gutter)); bottom: var(--bk-t, 14px);
  width: min(560px, calc(100vw - var(--bk-r, var(--gutter)) - var(--gutter) - var(--bk-a, 0px)));
  overflow: auto; overscroll-behavior: contain; border-radius: 14px;
  padding: 22px var(--gutter) 40px; background: var(--bk-from, var(--bg)); color: var(--fg);
  clip-path: var(--bk-clip, inset(0 0 100% 100% round 6px));
  transition: clip-path .7s var(--ease-io), background-color .3s linear .4s;
}
.book__sheet > * { opacity: 0; transition: opacity .2s var(--ease-soft); }
.book.is-prep .book__sheet, .book.is-prep .book__sheet > * { transition: none; }
@media (min-width: 600px) { .book__sheet { padding: 28px 32px 48px; } }
.book.is-open .book__scrim { opacity: 1; }
.book.is-open .book__sheet { clip-path: inset(0 0 0 0 round 14px); background: var(--bg); transition: clip-path .75s var(--ease), background-color .3s linear; }
.book.is-open .book__sheet > * { opacity: 1; transition: opacity .45s var(--ease-soft) .3s; }
/* Wide screens: a narrow panel read top to bottom. The fields go in pairs,
   the goals across, then the calendar across the full width (book.html puts
   it after the fields in the markup, so the tab order matches) and the send
   button under it. Scoped to the panel: the same form at the foot of each
   page and on /contacto keeps its own layout. On a screen too short for all
   of it, the panel scrolls. */
@media (min-width: 900px) {
  .book__sheet { width: min(600px, calc(100vw - var(--bk-r, var(--gutter)) - var(--gutter) - var(--bk-a, 0px))); padding: 28px 32px 32px; }
  .book__top { justify-content: space-between; margin-bottom: 6px; }
  .book__intro { max-width: 52ch; margin-bottom: 22px; }
  .book .bk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .book .bk textarea { min-height: 64px; }
  .book .bk__f--cal { margin-top: 6px; }
  .book .bk__grid .vel-cal__day { height: 32px; }
  .book .bk__send { margin-top: 0; }
}
/* Phones and small tablets: the same "all at a glance", compacted — the
   fields in pairs, a tighter calendar, smaller labels, and no intro (the
   "30 min · hora de Madrid" line above the calendar says what matters).
   On a screen too short even for this, the panel still scrolls. */
@media (max-width: 899px) {
  .book__sheet { padding: 14px 14px 14px; }
  .book__top { margin-bottom: 10px; }
  .book__top .t-h2s { font-size: 1.0625rem; line-height: 1.25; }
  .book__x { width: 32px; height: 32px; }
  .book__intro { display: none; }
  .book .bk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 8px; }
  .book .bk__f { grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: end; }   /* the sliding row of times must not widen it */
  .book .bk__f--cal { gap: 6px; }
  .book .bk__l { font-size: .75rem; line-height: 1.25; text-wrap: balance; }
  .book .bk input, .book .bk select { height: 36px; padding: 0 10px; font-size: .8125rem; }
  .book .bk__f:has(select)::after { right: 12px; bottom: 15px; }
  .book .bk textarea { min-height: 0; height: 38px; padding: 9px 10px; font-size: .8125rem; resize: none; }
  .book .bk__cal { padding: 6px 10px 8px; }
  .book .bk__head { margin-bottom: 0; }
  .book .bk__nav { width: 28px; height: 28px; }
  .book .bk__dow span { padding-bottom: 2px; }
  .book .bk__dow, .book .bk__grid { gap: 2px; }
  .book .bk__grid .vel-cal__day { height: 25px; }
  .book .bk__slotbox { margin-top: 6px; padding-top: 6px; }
  .book .bk__slots-l { margin-bottom: 5px; font-size: .6875rem; }
  /* the times in one row that slides sideways, not two */
  .book .bk__slots { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-inline: -10px; padding-inline: 10px; }
  .book .bk__slots::-webkit-scrollbar { display: none; }
  .book .vel-book__slot { flex: none; height: 26px; padding: 0 8px; font-size: .75rem; }
  /* "tu llamada" repeats the line over the times; it stays in the DOM, where
     js/vel-supabase.js reads it */
  .book .bk__when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .book .bk__send { gap: 4px; margin-top: 2px; }
  .book .bk__cta { height: 40px; font-size: .875rem; }
  .book .bk__tip { font-size: .6875rem; }
  .book .bk__legal { font-size: .625rem; line-height: 1.35; }
}
/* phones with the browser bars showing: one notch tighter */
@media (max-width: 899px) and (max-height: 740px) {
  .book__sheet { padding: 12px; }
  .book__top { margin-bottom: 6px; }
  .book .bk { row-gap: 5px; }
  .book .bk__l { font-size: .6875rem; }
  .book .bk input, .book .bk select { height: 34px; }
  .book .bk textarea { height: 34px; padding-block: 7px; }
  .book .bk__grid .vel-cal__day { height: 22px; }
  .book .bk__nav { width: 24px; height: 24px; }
  .book .bk__cta { height: 36px; }
}

/* short laptop screens: tighten the calendar and the gaps so it still fits */
@media (min-width: 900px) and (max-height: 780px) {
  .book__sheet { padding-top: 22px; padding-bottom: 22px; }
  .book__intro { margin-bottom: 14px; }
  .book .bk { row-gap: 10px; }
  .book .bk__cal { padding: 10px 12px; }
  .book .bk__grid .vel-cal__day { height: 30px; }
  .book .bk input, .book .bk select { height: 40px; }
  .book .bk textarea { min-height: 60px; }
  .book .bk__cta { height: 46px; }
}
.book__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.book__x { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--soft); transition: background-color .2s; }
.book__x:hover { background: var(--soft-h); }
.book__x svg { width: 14px; height: 14px; }
.book__intro { margin-bottom: 26px; }

/* ── reserva: bloque al final de la página ─────────────────────────────────── */
.booksec__in { max-width: calc(640px + var(--gutter) * 2); }
.booksec__head { display: grid; gap: 12px; margin-bottom: 36px; }

/* ── visor de vídeo ────────────────────────────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 130; background: transparent; }
.viewer__bg { position: absolute; inset: 0; background: rgba(10, 10, 10, .96); opacity: 0; transition: opacity .5s var(--ease-soft); }
.viewer.is-open .viewer__bg { opacity: 1; }
.viewer__frame { position: absolute; overflow: hidden; border-radius: 8px; background: #000; transform-origin: 0 0; will-change: transform; }
.viewer__poster, .viewer__video, .viewer__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer__video { opacity: 0; transition: opacity .4s; }
.viewer__video.is-on { opacity: 1; }
.viewer__info {
  position: absolute; left: var(--gutter); bottom: 20px; right: var(--gutter); display: grid; gap: 8px; justify-items: start;
  color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .4s .25s, transform .6s .25s var(--ease);
}
.viewer.is-open .viewer__info { opacity: 1; transform: none; }
.viewer__line { max-width: 44ch; color: #C9C9C9; }
.viewer__ctrl { position: absolute; top: 14px; right: var(--gutter); display: flex; gap: 6px; opacity: 0; transition: opacity .4s .2s; }
.viewer.is-open .viewer__ctrl { opacity: 1; }
.viewer__b { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .8125rem; transition: background-color .2s; }
.viewer__b:hover { background: rgba(255, 255, 255, .22); }
.viewer__b svg { width: 14px; height: 14px; }
.viewer__sound[aria-pressed="true"] { background: #fff; color: #0D0D0D; }
@media (max-width: 719px) {
  .viewer__frame { border-radius: 0; }
  .viewer__info { padding: 60px var(--gutter) 0; left: 0; right: 0; bottom: 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .75) 40%); }
}
@media (min-width: 720px) {
  .viewer__info { max-width: 420px; bottom: 28px; }
  .viewer__ctrl { top: auto; bottom: 28px; }
}

/* ── pie ───────────────────────────────────────────────────────────────────
   The v1 footer the founder wanted kept — a line and a button, then three
   columns and the socials — on plain black (data-theme="dark").
   The footer and the booking section (white) are flat colour: the accent
   in them is the solid orange, not the warm mesh. */
.ft, .booksec, .pg-contact { --warm: var(--c-orange); }
.ft { position: relative; }
.ft__top { display: grid; gap: 56px; padding-block: clamp(72px, 9vw, 136px) clamp(48px, 6vw, 88px); }
.ft__cta { display: grid; justify-items: start; gap: 24px; }
.ft__say { max-width: 15ch; font-family: var(--f-serif); font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.ft__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ft__h { margin-bottom: 14px; font-size: .75rem; letter-spacing: .02em; color: var(--fg-3); }
.ft__cols ul { display: grid; gap: 9px; justify-items: start; }
.ft__cols a { font-size: .9375rem; letter-spacing: .005em; }
.ft__cols a svg { width: 9px; height: 9px; }
@media (min-width: 900px) { .ft__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ft__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; } }
.ft__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 22px max(26px, env(safe-area-inset-bottom)); }
.ft__bar::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--line); }
.ft__logo { width: 112px; }
.ft__mail { font-size: .875rem; }
.ft__copy { font-size: .75rem; }
@media (min-width: 700px) { .ft__copy { margin-left: auto; } }