/* Shared site chrome for every direction: header, phone booking bar, footer, booking widget, photo loading.
   Rules from the brand book: walls are square (radius-0), no gradients, no shadows except floating layers,
   text never sits on a photo without a color field, tap targets 44px, type never under 14px. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font: 400 16px/26px var(--font-text); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
.disp { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-optical-sizing: auto; }
.label { font: 600 12px/16px var(--font-text); letter-spacing: 1.2px; text-transform: uppercase; }
.muted { color: var(--ink-muted); }
.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--space-6); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Type scale: 88 / 60 / 44 / 32 / 24, phones step down one size */
.t-poster { font-size: 60px; line-height: 56px; font-weight: 900; letter-spacing: -1px; }
.t-display { font-size: 44px; line-height: 46px; font-weight: 800; letter-spacing: -0.5px; }
.t-h1 { font-size: 32px; line-height: 38px; font-weight: 700; }
.t-h2 { font-size: 24px; line-height: 30px; font-weight: 600; }
.t-h3 { font-size: 24px; line-height: 30px; font-weight: 600; }
.t-lead { font-size: 17px; line-height: 27px; }
@media (min-width: 900px) {
  .t-poster { font-size: 88px; line-height: 80px; }
  .t-display { font-size: 60px; line-height: 60px; }
  .t-h1 { font-size: 44px; line-height: 48px; }
  .t-h2 { font-size: 32px; line-height: 38px; }
  .t-lead { font-size: 19px; line-height: 30px; }
}

/* Photos: reserve space, casa color placeholder, fade in (no layout jumps) */
.ph { position: relative; overflow: hidden; background: var(--casa, var(--arena)); }
.ph > img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--duration-scene) var(--ease-out); }
.ph > img.is-loaded { opacity: 1; }

/* ---------- Header: sticky, gains shadow-float once the page scrolls under it ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--surface); transition: box-shadow var(--duration-move) var(--ease-out); }
.site-head.is-scrolled { box-shadow: var(--shadow-float); }
.site-head .bar { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.site-head .logo { display: block; flex: none; }
.site-head .logo img { height: 44px; width: auto; }
/* Phones: the Sol alone (page-corner use); desktop: horizontal lockup at 150px+ wide (its minimum) */
.site-head .logo .full { display: none; }
@media (min-width: 1024px) { .site-head .logo .mark { display: none; } .site-head .logo .full { display: block; height: 84px; } .site-head .logo img { height: 84px; } }
.site-head nav { display: none; gap: var(--space-5); margin-left: var(--space-5); }
.site-head nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 0; border-bottom: 2px solid transparent; transition: border-color var(--duration-quick) var(--ease-out); }
.site-head nav a:hover, .site-head nav a[aria-current] { border-bottom-color: var(--ink); }
.site-head .tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang a { min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--font-text); color: var(--ink); text-decoration: none; }
.lang a[aria-current] { background: var(--ink); color: var(--surface); }
.site-head .wa { display: none; }
.site-head .reserve { display: none; }
.menu-btn { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: 600 14px/1 var(--font-text); cursor: pointer; }
@media (min-width: 1024px) {
  .site-head .bar { height: 96px; }
  .site-head nav { display: flex; }
  .site-head .wa, .site-head .reserve { display: inline-flex; }
  .menu-btn { display: none; }
}

/* Phone booking bar: within thumb reach, floats over content */
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--shadow-float); }
.book-bar .co-btn { flex: 1; }
.book-bar .co-btn-outline { flex: 0 0 auto; }
@media (min-width: 1024px) { .book-bar { display: none; } }
body.has-bar { padding-bottom: 64px; }
@media (min-width: 1024px) { body.has-bar { padding-bottom: 0; } }

/* Booking widget (front of the Sirvoy engine: keeps house, dates and party) */
.bw { background: var(--surface-raised); border: 1px solid var(--line); display: grid; gap: var(--space-3); padding: var(--space-4); }
.bw label { display: grid; gap: var(--space-1); font: 600 12px/16px var(--font-text); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.bw input, .bw select { min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/1 var(--font-text); text-transform: none; letter-spacing: 0; }
.bw .note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (min-width: 900px) { .bw.is-row { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; align-items: end; } }

/* Live rate: comes from Sirvoy, always with the dates it holds */
.rate { font-variant-numeric: tabular-nums; font-size: 15px; line-height: 22px; }
.rate b { font-weight: 700; }
.rate .valid { display: block; font-size: 14px; color: var(--ink-muted); }

/* Icon (own set) recolored by mask so it follows the lettering rule */
.ico { display: inline-block; width: 24px; height: 24px; flex: none; }
.ico img { width: 100%; height: 100%; }
.ico-32 { width: 32px; height: 32px; } .ico-48 { width: 48px; height: 48px; }

/* Facts row: icon always with a word */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 0; margin: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 15px; }

/* Sticker: one per piece, in the casa's accent, tilted, in a corner, never over a face */
.stk { position: absolute; width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; background: var(--casa-2, var(--sol)); color: var(--on-casa-2, var(--on-light)); border: 4px solid var(--cal); font: 800 17px/18px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; transform: rotate(-8deg); z-index: 2; }

/* Footer */
.site-foot { background: var(--negro); color: var(--cal); padding: var(--space-8) 0 var(--space-7); }
.site-foot a { color: var(--cal); }
.site-foot .grid { display: grid; gap: var(--space-6); }
.site-foot h2 { font-size: 15px; }
.site-foot ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.site-foot .big { font: 700 32px/36px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.site-foot .fine { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(250, 246, 238, 0.16); color: #c9bb9c; font-size: 14px; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.site-foot .social { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-foot .social a { color: #c9bb9c; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .site-foot .grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Snap rows: one card at a time, next card's edge shows */
.snap { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4); padding: 0 var(--space-4) var(--space-3); margin: 0 calc(-1 * var(--space-4)); scrollbar-width: thin; }
.snap > * { scroll-snap-align: start; }
@media (min-width: 768px) { .snap { grid-auto-columns: 42%; } }
@media (min-width: 1100px) { .snap { grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4); margin: 0; padding: 0 0 var(--space-3); } }

/* Mock note: marks what is a placeholder in the direction, removed in the build */
.mock { outline: 1px dashed var(--bronce); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .ph > img { opacity: 1; } }

/* Web floor (brand book section 13: type never under 14px). The system's label (12px) and badge (13px)
   tokens are print and kit sizes; on the web they step up to 14px. Flagged as a token conflict to resolve. */
.label, .co-label, .bw label { font-size: 14px; line-height: 18px; letter-spacing: 1px; }
.co-badge, .co-card-facts { font-size: 14px; line-height: 20px; }
.lang a { min-height: 44px; }

/* Browser surfaces carry the design too (selection, caret, links, scrollbars, numerals) */
::selection { background: var(--sol); color: var(--negro); }
input, textarea, select { caret-color: var(--mar); accent-color: var(--negro); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
html { scrollbar-color: var(--bronce) var(--surface); }
.rate, .price, .time, .tnum { font-variant-numeric: tabular-nums; }

/* Phone menu: the Menú button opens the navigation as a panel under the header (site.js toggles it). */
@media (max-width: 1023px) {
  .site-head.is-menu-open nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); z-index: 60; }
  .site-head.is-menu-open nav a { font-size: 18px; min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .site-head { position: sticky; }
}

/* Nav dropdowns (2026-10-10): hover or keyboard focus opens them on desktop; inline in the phone menu. */
.nav-dd { position: relative; display: flex; }
.nav-dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--duration-quick) var(--ease-out); }
.nav-dd .dd { display: none; }
@media (min-width: 1024px) {
  .nav-dd .dd { position: absolute; top: 100%; left: -16px; min-width: 300px; padding: var(--space-2); background: var(--surface); box-shadow: var(--shadow-float); border-top: 3px solid var(--sol); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out), visibility 0s linear var(--duration-quick); z-index: 60; }
  .nav-dd:hover .dd, .nav-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-dd:hover > a::after, .nav-dd:focus-within > a::after { transform: translateY(0) rotate(225deg); }
  .site-head nav .dd a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 0; font-size: 15px; }
  .site-head nav .dd a:hover { background: var(--surface-raised); }
  .site-head nav .dd a i { width: 12px; height: 12px; border-radius: 50%; background: var(--casa, var(--sol)); }
  .site-head nav .dd a span { display: grid; grid-column: 2; }
  .site-head nav .dd a small { color: var(--ink-muted); font-weight: 400; font-size: 13px; }
  .site-head nav .dd .dd-all { display: block; margin-top: 4px; border-top: 1px solid var(--line); text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1023px) {
  .is-menu-open .nav-dd { flex-direction: column; }
  .is-menu-open .nav-dd .dd { display: grid; padding-left: var(--space-3); }
  .is-menu-open .nav-dd .dd small, .is-menu-open .nav-dd .dd i { display: none; }
  .is-menu-open .nav-dd > a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-dd .dd { transition: none; } }