/* Casa de Chicas design system.
   A casa is a house: a door, a patio, a threshold you step over to be looked
   after. The page is warm plaster (crema), the type is the logo's own ink,
   and the first voice is clay: the terracotta of Agdal rooftops at seven in
   the evening. A patio blue answers it where something needs to feel cool.

   Three motifs, owned by nobody else: the arch (every photograph and every
   door ends in a half circle), the stroke (one hand-drawn line, cousin of the
   face in the logo, that draws itself under a title), and the stamp (buttons
   are square labels lifted on a hard clay shadow that presses flat under the
   finger). Shadows are hard and offset, never blurred: this is a printed
   thing, not a glowing one. */

/* The text face: Monimer Serif (Måns Grebäck, dafont), self-hosted. Outfit
   stays in the stack as the loading fallback. One weight only, so bold is
   never synthesised: the labels read at their true regular. */
@font-face {
  font-family: 'Monimer Serif';
  src: url('../fonts/monimer-serif.woff2') format('woff2'),
       url('../fonts/monimer-serif.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* The personal-use build ships every digit as one placeholder glyph. The
     face is only asked for letters and punctuation; digits (prices, hours,
     phone numbers) fall through to Outfit until the commercial licence is
     installed, at which point this line can go. */
  unicode-range: U+0020-002F, U+003A-007E, U+00A0-024F;
}

:root {
  --crema: #f4eee4;        /* warm plaster: the page ground */
  --crema-2: #eadfcf;      /* deeper linen, for the quiet bands */
  --blanco: #fffcf6;       /* a clean sheet: cards and panels */
  --tinta: #1d1917;        /* the logo's ink: headings, borders, the night bands */
  --tinta-2: #3a332e;
  --gris: #665c55;         /* the paragraph voice */
  --arcilla: #c4623c;      /* clay: the first voice */
  --arcilla-deep: #9a4826; /* the same clay where small type must read on crema */
  --arcilla-ink: #8a4022;  /* prices at 15px on crema clear 4.5:1 here */
  --arcilla-light: #e8a07f;/* clay lifted for the night bands */
  --rosa: #ecd0c2;         /* nude blush: tints and quiet shadows */
  --rosa-2: #f5e6dc;
  --azul: #2f4d66;         /* patio blue: the second voice */
  --azul-deep: #223a4e;
  --noche: #1d1917;
  --noche-2: #141110;
  --line: rgba(29, 25, 23, 0.18);
  --line-soft: rgba(29, 25, 23, 0.1);
  --on-noche: #f4eee4;
  --on-noche-dim: #b9ada2;
  --noche-line: rgba(244, 238, 228, 0.18);
  --noche-line-soft: rgba(244, 238, 228, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The linen bands (the card and the hours) sit a shade deeper than the page */
  --paper: #eadfcf;
  --paper-2: #e0d2be;
  --ink-on-paper: #1d1917;
  --para-on-paper: #5c534c;
  --gold-on-paper: #9a4826;
  --rule-on-paper: rgba(29, 25, 23, 0.2);

  --display: 'DM Serif Display', 'Times New Roman', Georgia, serif;
  --sans: 'Monimer Serif', 'Outfit', 'Segoe UI', system-ui, sans-serif;
  /* The hand: one line on the mirror. The hero's second line, the note on
     the week strip, the note beside the hours. Never in running text. */
  --script: 'Nothing You Could Do', 'Segoe Print', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --arch: 999px 999px 14px 14px;
  --stamp: 4px 4px 0 var(--arcilla);
  --stamp-ink: 4px 4px 0 var(--tinta);

  /* The stroke: one hand-drawn line in clay, for the foot of a title */
  --trazo: no-repeat left center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-6 24 2 38-2s22-6 36-1 24 4 42-3' fill='none' stroke='%23c4623c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --trazo-crema: no-repeat left center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-6 24 2 38-2s22-6 36-1 24 4 42-3' fill='none' stroke='%23f4eee4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--crema);
  color: var(--gris);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
  counter-reset: chapter;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--arcilla); color: #fff7f0; }

:focus-visible { outline: 2px solid var(--arcilla-deep); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* Headings are DM Serif Display at its one weight, close-set, the way the
   logo sets "Casa": high contrast, no tracking, never capitals. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

/* The eyebrow: a chapter number in the serif, then the fact, then nothing.
   Left-set heads are numbered through the page like the rooms of a house;
   centred heads carry a short clay rule instead. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--arcilla-deep); line-height: 1;
}
.section-head:not(.center) .kicker::before {
  counter-increment: chapter;
  content: counter(chapter, decimal-leading-zero);
  font-family: var(--display); font-weight: 400;
  font-size: 24px; letter-spacing: 0; color: var(--arcilla);
  line-height: 1; transform: translateY(-1px);
}
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::before { content: ''; width: 28px; height: 1.5px; background: var(--arcilla); }
.section-head.center .kicker::after { content: ''; width: 28px; height: 1.5px; background: var(--arcilla); }

.section-title {
  font-size: clamp(36px, 4.4vw, 62px);
  margin: 18px 0 0;
  max-width: 22ch;
}
/* The stroke under every title: drawn left to right once the title arrives */
.section-title::after {
  content: ''; display: block; width: 96px; height: 12px; margin-top: 18px;
  background: var(--trazo);
  transform-origin: left center;
}
.section-head.center .section-title::after { margin-left: auto; margin-right: auto; }
.section-title.reveal::after { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.35s; }
.section-title.reveal.visible::after { transform: scaleX(1); }
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--gris); max-width: 58ch; font-size: 16px; margin-top: 18px; }
.section-head.center .section-sub { max-width: 64ch; }

.serif { font-family: var(--display); }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
/* A button is a stamp: a pill with a hairline of ink, lifted on a hard clay
   shadow. Under the finger it presses flat, which is the whole feedback and
   the whole trick. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 15px 36px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--stamp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.3s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--arcilla); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--arcilla); }

.btn.solid { background: var(--arcilla); border-color: var(--arcilla); color: #fff7f0; box-shadow: var(--stamp-ink); }
.btn.solid:hover { background: var(--tinta); border-color: var(--tinta); color: var(--crema); box-shadow: 2px 2px 0 var(--arcilla); }
.btn.solid:active { box-shadow: 0 0 0 var(--arcilla); }

.btn.ghost { background: transparent; color: var(--tinta); }
.btn.ghost:hover { background: var(--tinta); color: var(--crema); }

.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn.danger { background: var(--err); border-color: var(--err); color: #fff; box-shadow: var(--stamp-ink); }
.btn.danger:hover { background: var(--tinta); border-color: var(--tinta); }

/* ---------- The bands ---------- */
/* No hairlines between bands: the page divides itself by ground. Plaster,
   then linen, then ink, then clay; the eye reads the change of material. */
section, footer { position: relative; }
#about { background: var(--crema); }
.families-section { background: var(--blanco); }
.gallery-section { background: var(--crema-2); }
.programme-section { background: var(--crema); }
#spaces { background: var(--blanco); }

/* ---------- Paper ---------- */
/* The card and the hours are printed things, so they sit on linen: a sheet
   a shade deeper than the page, with one wash of blush in a corner. */
section.paper {
  background-color: var(--paper);
  background-image: radial-gradient(60% 50% at 90% 100%, rgba(196, 98, 60, 0.07), transparent 70%);
  background-repeat: no-repeat;
  color: var(--para-on-paper);
}
.paper .kicker { color: var(--gold-on-paper); }
.paper .section-title, .paper h1, .paper h2, .paper h3 { color: var(--ink-on-paper); }
.paper .section-sub, .paper p { color: var(--para-on-paper); }

.paper .menu-tabs button { border-color: var(--ink-on-paper); color: var(--ink-on-paper); background: var(--blanco); }
.paper .menu-tabs button.active { background: var(--ink-on-paper); color: var(--paper); }
.paper .cat-head { border-bottom-color: var(--rule-on-paper); }
.paper .menu-cat h3 { color: var(--ink-on-paper); }
.paper .menu-cat-sub { color: var(--gold-on-paper); }
.paper .menu-item .mi-name { color: var(--ink-on-paper); }
.paper .menu-item .mi-price { color: var(--gold-on-paper); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(29, 25, 23, 0.3); }
.paper .menu-item-desc { color: var(--para-on-paper); opacity: 0.9; }
.paper .menu-item.mi-head { border-bottom-color: var(--rule-on-paper); }
.paper .mi-was { color: var(--para-on-paper); }
.paper .mi-deal { color: #2f7a52; }

.paper .hours-list li { border-bottom-color: var(--rule-on-paper); }
.paper .hours-list .day { color: var(--ink-on-paper); }
.paper .hours-list .day-note { color: var(--gold-on-paper); }
.paper .hours-list .dots { border-bottom-color: rgba(29, 25, 23, 0.28); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9c3a34; }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--gold-on-paper); }
.paper .contact-lines a:hover { color: var(--ink-on-paper); }
.paper #map { border-color: var(--ink-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.22) saturate(0.7) brightness(1.02) contrast(0.96); }
.paper #map .leaflet-control-attribution { background: rgba(234, 223, 207, 0.85); color: var(--para-on-paper); }
.paper #map .leaflet-control-attribution a { color: var(--gold-on-paper); }
.paper #map .leaflet-bar a { background: var(--paper); color: var(--ink-on-paper); border-bottom-color: var(--rule-on-paper); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
/* Over the hero the bar is nothing but cream type on the film; once the page
   scrolls it becomes plaster with a line of ink under it, and the type flips
   to ink. The mark swaps with it: cream over the film, ink on the plaster. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px 0;
  transition: background 0.4s, padding 0.4s, box-shadow 0.4s;
}
.nav.scrolled {
  background: rgba(244, 238, 228, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 10px 0;
  box-shadow: 0 1.5px 0 var(--tinta);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.nav-logo img {
  height: 58px; width: auto; flex: none;
  transition: height 0.4s var(--ease);
}
.nav-logo img.mark-ink { display: none; }
.nav.scrolled .nav-logo img { height: 46px; }
.nav.scrolled .nav-logo img.mark-cream, .nav.menu-open .nav-logo img.mark-cream { display: none; }
.nav.scrolled .nav-logo img.mark-ink, .nav.menu-open .nav-logo img.mark-ink { display: block; }
.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 14px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #f4eee4;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(20, 17, 16, 0.5);
  transition: opacity 0.35s, color 0.35s;
  position: relative;
  padding: 8px 0;
  display: inline-block;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { color: var(--tinta); text-shadow: none; }
/* The stroke in miniature: the clay line draws itself under the word */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 7px;
  background: var(--trazo);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--arcilla-light); }
.nav.scrolled .nav-links a:hover { color: var(--arcilla-deep); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta {
  border: 1.5px solid rgba(244, 238, 228, 0.7); padding: 9px 22px !important; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--arcilla);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.3s, color 0.3s !important;
}
.nav-cta:hover { background: var(--arcilla); border-color: var(--arcilla); color: #fff7f0 !important; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.nav.scrolled .nav-cta { border-color: var(--tinta); background: var(--blanco); }
.nav.scrolled .nav-cta:hover { background: var(--arcilla); border-color: var(--arcilla); color: #fff7f0 !important; }
.nav-cta::after { display: none; }

/* Two-state switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1.5px solid rgba(244, 238, 228, 0.45); border-radius: 999px;
}
.nav.scrolled .lang-switch { border-color: var(--tinta); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--arcilla);
  border-radius: 999px;
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: #f4eee4;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 5px 13px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--gris); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #fff7f0; }

.burger { display: none; background: none; border: 0; width: 30px; height: 20px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 0; background: #f4eee4; transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--tinta); }
.nav.menu-open .burger span { background: var(--tinta); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* The film is the room. The words sit on the left like a name on a door,
   the four families run down the right edge like a house number, and a
   marquee of plaster closes the frame at the foot. */
.hero {
  height: 100svh; min-height: 700px;
  position: relative; display: grid; align-items: center;
  overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--noche-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg .hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero-bg .hero-slide.active { opacity: 1; }
.hero-bg img.kb { animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.11) translateY(-1.5%); } }
/* Ink from the left, where the words are; the film stays bright on the right */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(29, 25, 23, 0.82) 0%, rgba(29, 25, 23, 0.55) 42%, rgba(29, 25, 23, 0.12) 100%),
    linear-gradient(180deg, rgba(29, 25, 23, 0.4) 0%, transparent 30%, rgba(29, 25, 23, 0.5) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: min(1200px, 90vw); margin: 0 auto;
  padding: 120px 0 130px;
  text-align: left;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: #f0c9b4;
}
.hero-eyebrow::before { content: ''; width: 44px; height: 1.5px; background: var(--arcilla); flex: none; }
.hero-script {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(60px, 9.6vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: #f7f1e8;
  text-transform: none;
  max-width: 9ch;
  margin: 26px 0 0;
}
.hero-script em { font-style: italic; color: #e8a07f; }
.hero-tag {
  margin-top: 20px;
  font-family: var(--script);
  font-size: clamp(21px, 2.5vw, 33px);
  color: #f0c9b4;
  text-transform: none; letter-spacing: 0; text-indent: 0; font-weight: 400;
  line-height: 1.3;
}
.hero-lead { max-width: 46ch; color: rgba(247, 241, 232, 0.84); margin-top: 22px; font-size: 16.5px; }
.hero-actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; margin-top: 36px; }
/* On the dark hero the ink outline disappears; the ghost twin reads in cream */
.hero-actions .btn:not(.solid) {
  color: #f4eee4; background: transparent; border-color: rgba(244, 238, 228, 0.75);
  box-shadow: 4px 4px 0 var(--arcilla);
}
.hero-actions .btn:not(.solid):hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }

.hero-content > * { opacity: 0; transform: translateY(24px); animation: heroIn 1.3s var(--ease) forwards; }
.hero-content > .hero-script { transform: translateY(24px); animation: heroTitleIn 1.5s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.16s; }
.hero-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-content > *:nth-child(4) { animation-delay: 0.48s; }
.hero-content > *:nth-child(5) { animation-delay: 0.62s; }
.hero-content > *:nth-child(6) { animation-delay: 0.76s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for */
.hero-hours {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  margin-top: 34px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: #f0c9b4;
}
.hero-hours i { display: block; width: 44px; height: 1.5px; background: var(--arcilla); }
@media (max-width: 700px) { .hero-hours { margin-top: 26px; letter-spacing: 0.22em; text-indent: 0.22em; } }

/* The house number: the four families down the right edge, desktop only */
.hero-index {
  position: absolute; z-index: 2;
  right: max(24px, calc((100vw - 1200px) / 2));
  bottom: 140px;
  display: grid; gap: 14px; text-align: right;
  opacity: 0; animation: heroIn 1.2s var(--ease) 0.9s forwards;
}
.hero-index a {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247, 241, 232, 0.88);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  transition: color 0.3s;
}
.hero-index a b { font-family: var(--display); font-weight: 400; font-size: 17px; color: #e8a07f; letter-spacing: 0; }
.hero-index a:hover { color: #e8a07f; }
@media (max-width: 1100px) { .hero-index { display: none; } }

/* The marquee: the families in the serif, walking across the foot of the
   film on a strip of plaster */
.hero-marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: var(--crema); border-top: 1.5px solid var(--tinta);
  padding: 13px 0; overflow: hidden; white-space: nowrap;
}
.hero-marquee .track { display: inline-flex; width: max-content; animation: marquee 34s linear infinite; }
.hero-marquee span { font-family: var(--display); font-size: 24px; color: var(--tinta); padding: 0 26px; line-height: 1; }
.hero-marquee span i { font-style: italic; color: var(--arcilla); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .hero-marquee span { font-size: 19px; padding: 0 18px; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* ---------- The frame ---------- */
/* Photographs are doors: an arch at the top, square at the foot, and a hard
   blush shadow to the lower right as if the sun stood behind them. Hover
   turns the shadow clay; it never draws on the picture. */
.img-frame {
  position: relative; overflow: hidden;
  border-radius: var(--arch);
  box-shadow: 12px 12px 0 var(--rosa);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); width: 100%; height: 100%; object-fit: cover; }
.img-frame:hover { box-shadow: 12px 12px 0 var(--arcilla); transform: translate(-2px, -2px); }
.img-frame:hover img { transform: scale(1.04); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.about-images { position: relative; padding-bottom: 80px; padding-right: 12px; }
.about-images .img-main { width: 74%; aspect-ratio: 3 / 4; }
.about-images .img-accent {
  position: absolute; right: 12px; bottom: 0; width: 46%; aspect-ratio: 4 / 5;
  border-radius: 6px;
  box-shadow: 10px 10px 0 var(--tinta);
  border: 6px solid var(--crema);
}
.about-images .img-accent:hover { box-shadow: 10px 10px 0 var(--arcilla); }
.about-text p { color: var(--gris); margin: 24px 0; font-size: 16.5px; }
.about-sign { font-family: var(--script); font-size: 26px; color: var(--arcilla-deep); margin-top: 8px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--crema); }
.menu-tabs { display: flex; justify-content: center; gap: 14px; margin-bottom: 46px; }
.menu-tabs button {
  background: var(--blanco); border: 1.5px solid var(--tinta); color: var(--tinta);
  border-radius: 999px; box-shadow: var(--stamp);
  padding: 12px 36px;
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em; font-size: 12px;
  transition: 0.3s var(--ease);
}
.menu-tabs button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--arcilla); }
.menu-tabs button.active { border-color: var(--tinta); color: var(--crema); background: var(--tinta); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
.menu-cat { break-inside: avoid; min-width: 0; }
.cat-head {
  text-align: left;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--tinta);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--tinta);
  line-height: 1.2;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--script);
  color: var(--arcilla-deep);
  font-size: 17px;
  line-height: 1.4;
  margin: 6px 0 0;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--tinta); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1.5px dotted rgba(102, 92, 85, 0.45); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--sans); font-weight: 600; color: var(--arcilla-ink); font-size: 14.5px; white-space: nowrap; letter-spacing: 0.02em; }
.menu-item-desc { color: var(--gris); opacity: 0.85; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* Two prices on one row (short hair / long hair): px, not em */
.menu-cat.two-way .mi-price { width: 132px; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 132px; }
.menu-item.mi-head .mi-price { white-space: nowrap; letter-spacing: 0.08em; }
.menu-item.mi-head { padding: 0 0 5px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-weight: 600; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris); opacity: 0.75;
}

/* ---------- The signature band ---------- */
/* The one band that goes full clay: the forfaits are the house's signature
   and the colour is the house's. Cream type, the stroke in cream, and the
   list on a sheet lifted on an ink shadow. */
.formule {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 232, 214, 0.22), transparent 60%),
    var(--arcilla);
  color: #fff3ea;
}
.formule .kicker { color: #fff3ea; }
.formule .section-head:not(.center) .kicker::before { color: var(--tinta); }
.formule .section-title { color: #fff7f0; }
.formule .section-title::after { background: var(--trazo-crema); }
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { margin-bottom: 0; font-size: clamp(36px, 4vw, 58px); }
.formule-copy > p { color: rgba(255, 243, 234, 0.9); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 26px; line-height: 1.35;
  color: #fff3ea; margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: var(--tinta); border-color: var(--tinta); color: var(--crema); box-shadow: 4px 4px 0 #fff3ea; }
.formule-copy .btn:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); box-shadow: 2px 2px 0 var(--tinta); }
.formule-list {
  position: relative;
  background: var(--blanco);
  border: 1.5px solid var(--tinta);
  border-radius: 2px;
  box-shadow: 12px 12px 0 var(--tinta);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
  color: var(--gris);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--tinta); }
.fm-dots { flex: 1; border-bottom: 1.5px dotted rgba(102, 92, 85, 0.4); transform: translateY(-4px); }
.fm-price { font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--arcilla-ink); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--gris); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven tickets in a row, torn from the same book: a hairline of ink around
   each, today's printed in clay. The note under each day is in the hand. */
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.prog-day {
  position: relative;
  border: 1.5px solid var(--tinta);
  margin-left: -1.5px;
  background: var(--blanco);
  padding: 28px 14px 30px;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s;
}
.prog-day:first-child { margin-left: 0; }
.prog-day:hover { background: var(--rosa-2); }
.prog-day.today { background: var(--arcilla); border-color: var(--arcilla); z-index: 1; }
.prog-day.today::before {
  content: ''; position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff3ea;
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--tinta);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--gris); opacity: 0.8; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 17px; line-height: 1.35;
  color: var(--arcilla-deep); margin-top: 14px; min-height: 40px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.today .prog-name, .prog-day.today .prog-note { color: #fff7f0; }
.prog-day.today .prog-hours { color: #fbe0d3; opacity: 1; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); } .prog-day { margin-top: -1.5px; } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 16px; } }

/* ---------- Spaces ---------- */
/* Three doors in a row, the caption set under each in ink rather than laid
   over the picture. */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.space-card { position: relative; margin: 0; }
.space-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--arch);
  box-shadow: 10px 10px 0 var(--crema-2);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.space-card:hover img { box-shadow: 10px 10px 0 var(--arcilla); transform: translate(-2px, -2px); }
.space-card figcaption { margin-top: 22px; text-align: center; }
.space-card figcaption span { display: block; font-family: var(--display); font-size: 23px; color: var(--tinta); line-height: 1.2; }
.space-card figcaption small { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--gris); margin-top: 5px; letter-spacing: 0.02em; }
.space-card figcaption small:empty { display: none; }

/* ---------- Gallery ---------- */
/* Two lanes of doors drifting past each other, the upper one walking left,
   the lower one walking right, full bleed, and held still under the pointer.
   Each lane holds its six pictures twice, so the loop has no seam. */
.gal-lanes {
  display: grid; gap: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding: 12px 0 20px;
}
.gal-lane {
  display: flex; gap: 22px; width: max-content;
  animation: laneDrift 70s linear infinite;
  will-change: transform;
}
.gal-lane.reverse { animation-direction: reverse; }
.gal-lanes:hover .gal-lane { animation-play-state: paused; }
.gal-lane figure {
  position: relative; flex: none; margin: 0; overflow: hidden; cursor: zoom-in;
  width: clamp(180px, 20vw, 280px); aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  box-shadow: 8px 8px 0 var(--rosa);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.gal-lane.reverse figure { border-radius: 14px 14px 999px 999px; }
.gal-lane figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.gal-lane figure:hover { box-shadow: 8px 8px 0 var(--arcilla); transform: translate(-2px, -2px); }
.gal-lane figure:hover img { transform: scale(1.04); }
@keyframes laneDrift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .gal-lanes { gap: 14px; }
  .gal-lane { gap: 14px; animation-duration: 45s; }
  .gal-lane figure { width: 42vw; }
}
@media (prefers-reduced-motion: reduce) { .gal-lane { animation: none; } }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 17, 16, 0.96);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 2px; box-shadow: 14px 14px 0 var(--arcilla); }
.lightbox button {
  position: absolute; background: none; border: 1.5px solid var(--noche-line); color: var(--on-noche);
  border-radius: 50%;
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--arcilla-light); color: var(--arcilla-light); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-top: 8px; }
.hours-list li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--tinta); }
.hours-list .day-note { font-family: var(--script); font-size: 16px; line-height: 1.3; color: var(--arcilla-deep); }
.hours-list .dots { flex: 1; border-bottom: 1.5px dotted rgba(102, 92, 85, 0.35); transform: translateY(-4px); }
.hours-list .time { color: var(--tinta-2); letter-spacing: 0.06em; font-weight: 500; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--gris); font-size: 15px; }
.contact-lines a:hover { color: var(--arcilla-deep); }
.contact-lines strong { color: var(--arcilla-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1.5px solid var(--tinta); border-radius: 2px; z-index: 1; box-shadow: 10px 10px 0 var(--rosa); }
#map .leaflet-tile-pane { filter: sepia(0.18) saturate(0.8) brightness(1.02) contrast(0.97); }
#map .leaflet-control-attribution { background: rgba(244, 238, 228, 0.85); color: var(--gris); }
#map .leaflet-control-attribution a { color: var(--arcilla-deep); }
#map .leaflet-bar a { background: var(--blanco); color: var(--tinta); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--crema-2); color: var(--arcilla-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--arcilla); border: 3px solid var(--blanco);
  box-shadow: 0 2px 10px rgba(29, 25, 23, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--arcilla);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--blanco); color: var(--tinta); border-radius: 2px; }
.leaflet-popup-content a { color: var(--arcilla-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The salon after closing: the photograph under ink, and the form on a
   sheet of paper lifted on a clay shadow in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(29, 25, 23, 0.84), rgba(20, 17, 16, 0.9)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--blanco);
  border: 1.5px solid var(--tinta);
  border-radius: 2px;
  color: var(--gris);
  box-shadow: 14px 14px 0 var(--arcilla);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--arcilla-deep); }
.reserve-panel .section-title { color: var(--tinta); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--gris); }
.reserve-panel .prefill-note { color: var(--arcilla-deep); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.form-field { display: grid; gap: 9px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--arcilla-deep); }
.form-field input, .form-field select {
  background: var(--crema);
  border: 1.5px solid var(--line);
  color: var(--tinta);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.02em;
  transition: border-color 0.35s, box-shadow 0.35s;
  width: 100%; border-radius: 2px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--tinta); box-shadow: 3px 3px 0 var(--arcilla); }
.form-field input::placeholder { color: rgba(102, 92, 85, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--arcilla-deep) 50%), linear-gradient(135deg, var(--arcilla-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--blanco); color: var(--tinta); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--gris); opacity: 0.85; font-size: 13px; margin-top: 20px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 20px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: var(--ok); }
.form-msg.err { display: block; color: var(--err); }
.field-note { display: block; margin-top: 7px; font-size: 12.5px; color: rgba(102, 92, 85, 0.75); letter-spacing: 0.02em; }
.prefill-note { color: var(--arcilla-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
footer {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(196, 98, 60, 0.22), transparent 62%),
    var(--noche);
  color: var(--on-noche-dim);
  padding: 90px 0 34px;
  border-top: 1.5px solid var(--arcilla);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--arcilla-light);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--on-noche-dim); font-size: 15px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--arcilla-light); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo { height: 84px; width: auto; margin-bottom: 20px; }
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint, no filter: these are the
   official logos and they are recognised by their colour. */
.socials a, .socials .soon {
  width: 46px; height: 46px; display: block; border-radius: 6px;
  transition: transform 0.3s var(--ease);
}
.socials a img, .socials .soon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translate(-2px, -2px); }
.socials .soon { opacity: 0.45; filter: saturate(0.6); cursor: default; }
.footer-bottom {
  border-top: 1px solid var(--noche-line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--on-noche-dim); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--arcilla-light); }

/* ---------- Subpages ---------- */
.page-hero { height: 46vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(29, 25, 23, 0.7) 0%, rgba(29, 25, 23, 0.5) 45%, rgba(29, 25, 23, 0.78) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(2px) saturate(0.95); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-hero-poster.jpg') center / cover no-repeat; }
}
.page-hero h1 { font-size: clamp(40px, 5.6vw, 76px); position: relative; z-index: 2; letter-spacing: -0.015em; text-transform: none; color: #f7f1e8; margin-top: 16px; }
.page-hero .kicker { position: relative; z-index: 2; color: #f0c9b4; justify-content: center; }
.page-hero .kicker::before { content: ''; width: 28px; height: 1.5px; background: var(--arcilla); }
.page-hero .kicker::after { content: ''; width: 28px; height: 1.5px; background: var(--arcilla); }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; margin: 48px 0 16px; color: var(--arcilla-deep); font-weight: 600; }
.legal p, .legal li { color: var(--gris); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 120;
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  width: min(620px, calc(100vw - 32px));
  margin-top: 16px; padding: 16px 22px;
  border-radius: 2px;
  background: var(--blanco); color: var(--tinta);
  border: 1.5px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--arcilla);
  font-size: 14.5px; font-weight: 400; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 0;
  background: var(--ok);
}
.toast.err::before { background: var(--err); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--gris); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--tinta); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1.5px solid rgba(244, 238, 228, 0.55); border-radius: 999px;
  padding: 9px 18px !important; letter-spacing: 0.18em; text-indent: 0.18em;
  transition: background .3s, color .3s, border-color .3s;
}
.nav.scrolled .nav-auth { border-color: var(--tinta); }
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--tinta); border-color: var(--tinta); color: var(--crema) !important; }
.nav.scrolled .nav-auth:hover { background: var(--tinta); color: var(--crema) !important; }
.nav-auth.signed-in { border-color: var(--arcilla-light); color: var(--arcilla-light) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--arcilla-deep) !important; border-color: var(--arcilla-deep); }
.nav-auth.signed-in:hover { background: var(--arcilla); border-color: var(--arcilla); color: #fff7f0 !important; }

.page-account { background: var(--noche); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(29, 25, 23, .7), rgba(29, 25, 23, .82) 55%, rgba(20, 17, 16, .94));
}
.page-account .nav {
  background: rgba(244, 238, 228, 0.96); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); box-shadow: 0 1.5px 0 var(--tinta); padding: 10px 0;
}
.page-account .nav .nav-links a, .page-account .nav .nav-right a { color: var(--tinta); text-shadow: none; }
.page-account .nav .lang-switch { border-color: var(--tinta); }
.page-account .nav .lang-switch button { color: var(--gris); }
.page-account .nav .lang-switch button.active { color: #fff7f0; }
.page-account .nav .nav-auth { border-color: var(--tinta); }
.page-account .nav .nav-cta { border-color: var(--tinta); background: var(--blanco); }
.page-account .nav .burger span { background: var(--tinta); }
.page-account .nav-logo img { height: 46px; }
.page-account .nav-logo img.mark-cream { display: none; }
.page-account .nav-logo img.mark-ink { display: block; }
.account-main { padding: 96px 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.account-main section { padding: 0; }
.account-main .section-head .kicker::before { content: none; }
.page-account footer { border-top: 1.5px solid var(--arcilla); background: rgba(20, 17, 16, .6); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: var(--blanco); border: 1.5px solid var(--tinta);
  border-radius: 2px; padding: 34px 36px; text-align: center;
  box-shadow: 12px 12px 0 var(--arcilla);
}
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.auth-card .section-title { font-size: 28px; margin: 0 0 6px; }
.auth-card .section-title::after { display: none; }
.auth-sub { color: var(--gris); font-size: 13px; line-height: 20px; margin-bottom: 16px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-family: var(--sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--arcilla-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--crema); border: 1.5px solid var(--line);
  border-radius: 2px; padding: 12px 13px; color: var(--tinta);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--tinta); box-shadow: 3px 3px 0 var(--arcilla); }
.auth-form .btn { margin-top: 16px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--gris); opacity: 0.8; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--crema); border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--gris); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--tinta); }
.gender-row button.active { border-color: var(--tinta); background: var(--rosa-2); color: var(--arcilla-deep); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: var(--err); }
.auth-msg.ok { color: var(--ok); }
.auth-switch { font-size: 13px; color: var(--gris); text-align: center; margin-top: 12px; grid-column: 1 / -1; }
.auth-switch a { color: var(--arcilla-deep); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 25px; font-weight: 400; margin-bottom: 8px; color: var(--tinta); }

.auth-form select {
  width: 100%; background: var(--crema); border: 1.5px solid var(--line);
  border-radius: 2px; padding: 12px 13px; color: var(--tinta);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--arcilla-deep) 50%),
                    linear-gradient(135deg, var(--arcilla-deep) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--tinta); }
.auth-form select option { background: var(--blanco); color: var(--tinta); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--gris); opacity: .8; transition: color .25s, opacity .25s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--arcilla-deep); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--tinta); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--gris); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--arcilla); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link { margin-top: 12px; font-size: 13px; color: var(--arcilla-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--tinta); }
.birthday-note {
  font-size: 12px; color: var(--arcilla-deep); margin-top: 10px; text-align: center;
  background: var(--rosa-2); border: 1px solid var(--line-soft); border-radius: 2px; padding: 10px 12px;
}

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card {
  background: var(--blanco);
  border: 1.5px solid var(--tinta); border-radius: 2px; padding: 28px;
  box-shadow: 8px 8px 0 var(--arcilla);
}
.member-card h3 { font-family: var(--display); font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.member-card .btn { margin-top: 16px; width: 100%; text-align: center; }
.member-card .muted { color: var(--gris); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, var(--rosa), var(--arcilla-light) 62%, var(--arcilla)); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #5c2a14; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 400; color: #3a1a0c; line-height: 1; }
.fidelity-card p { color: #4a2312; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #4a2312; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 25px; font-weight: 400; margin-bottom: 18px; color: #f4eee4; }
.account-main .section-head .section-title { color: #f7f1e8; }
.account-main .section-head .section-sub { color: var(--on-noche-dim); }
.account-main .section-head .kicker { color: var(--arcilla-light); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--blanco);
  border: 1.5px solid var(--tinta); border-radius: 2px; padding: 17px 22px;
  box-shadow: 6px 6px 0 var(--arcilla);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--arcilla-deep); }
.res-when span { font-size: 12px; color: var(--gris); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; color: var(--tinta); }
.res-meta span { font-size: 12px; color: var(--gris); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1.5px solid; }
.res-badge.pending { color: var(--arcilla-deep); border-color: var(--arcilla); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(47, 122, 82, 0.6); }
.res-badge.cancelled { color: var(--err); border-color: rgba(179, 64, 58, 0.6); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* The salon at night: the photograph under ink, one wash of clay across it,
   and the cards on paper. */
.contact-band {
  position: relative; padding: 100px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  height: auto;
  z-index: 0;
  background: linear-gradient(180deg, rgba(29, 25, 23, .9), rgba(122, 54, 26, .6) 55%, rgba(29, 25, 23, .92));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #f0c9b4; }
.contact-inner .section-title { font-size: clamp(38px, 5vw, 60px); color: #f7f1e8; }
.contact-inner .section-title::after { background: var(--trazo-crema); margin-left: auto; margin-right: auto; }
.contact-lead { color: rgba(244, 238, 228, 0.86); max-width: 620px; margin: 24px auto 44px; line-height: 27px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-bottom: 40px; }
.contact-card {
  display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none;
  background: var(--blanco); border: 1.5px solid var(--tinta); border-radius: 2px;
  padding: 19px 21px;
  box-shadow: 6px 6px 0 var(--arcilla);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.contact-card:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--arcilla); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 2px; display: grid; place-items: center;
  background: var(--rosa-2); border: 1px solid var(--rosa);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--arcilla-deep); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--arcilla-deep); }
.cc-body b { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--tinta); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .btn.ghost { color: #f4eee4; border-color: rgba(244, 238, 228, 0.75); box-shadow: 4px 4px 0 var(--arcilla); }
.contact-band .btn.ghost:hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-main .section-head .section-title { color: #f7f1e8; }
.deals-main .section-head .section-sub { color: rgba(244, 238, 228, 0.8); }
.deals-empty {
  background: var(--blanco); border: 1.5px solid var(--tinta); border-radius: 2px;
  padding: 44px 32px; text-align: center; color: var(--gris); max-width: 580px; margin: 0 auto;
  box-shadow: 10px 10px 0 var(--arcilla);
}
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; color: #f0c9b4; font-weight: 600; margin-bottom: 18px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 15px; align-items: center;
  background: var(--blanco); border: 1.5px solid var(--tinta); border-radius: 2px;
  padding: 15px;
  box-shadow: 6px 6px 0 var(--arcilla);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.deal-card:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--arcilla); }
.deal-card img { width: 74px; height: 74px; border-radius: 40px 40px 2px 2px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 19px; font-weight: 400; margin-bottom: 3px; }
.deal-body p { color: var(--gris); font-size: 12px; opacity: .8; margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--gris); opacity: .55; font-size: 13px; }
.deal-prices b { font-family: var(--sans); color: var(--arcilla-deep); font-size: 17px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--rosa-2);
  color: var(--arcilla-deep); border-radius: 999px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--gris); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 600; font-style: normal; }
.nav-deals { color: var(--arcilla-light) !important; }
.nav.scrolled .nav-deals { color: var(--arcilla-deep) !important; }

/* ---------- Delete account ---------- */
.del-card { max-width: 660px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 28px; }
.del-block { margin-bottom: 28px; }
.del-block h2 {
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--arcilla-deep); margin-bottom: 12px; font-weight: 600;
}
.del-list { list-style: none; display: grid; gap: 9px; }
.del-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--gris); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--arcilla); }
.del-note { font-size: 13px; color: var(--gris); margin-top: 14px; line-height: 1.6; }
.del-or { margin-top: 22px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 24px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }

/* ---------- Time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--crema); border: 1.5px solid var(--line); color: var(--gris);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0.02em; text-align: left; border-radius: 2px;
  transition: border-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--tinta); box-shadow: 3px 3px 0 var(--arcilla); }
.timepick-btn.chosen { color: var(--tinta); }
.timepick-btn .tp-caret {
  width: 0; height: 0; flex: none; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--arcilla-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--arcilla-deep); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px);
  max-height: 236px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: var(--blanco); border: 1.5px solid var(--tinta);
  border-radius: 2px;
  box-shadow: 6px 6px 0 var(--arcilla);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--crema); border: 1.5px solid transparent; color: var(--gris);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--rosa-2); color: var(--tinta); border-color: var(--arcilla); }
.timepick-slot.on { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@media (max-width: 720px) { .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; } }

/* ---------- Boot cover ---------- */
.page-boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--crema); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.boot-mark img { width: 70px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--line-soft); border-top-color: var(--arcilla);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
/* The announcement strip runs in patio blue: the one place the second voice
   speaks alone, so an offer never reads as part of the house's own decor. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--azul);
  border-bottom: 1.5px solid var(--azul-deep);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: #f4eee4; font-weight: 600;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: var(--rosa); }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--azul); color: #f4eee4; font-weight: 600;
  border-radius: 999px; padding: 12px 28px;
  font-family: var(--sans); text-align: center; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.promo-notice.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
}
/* Eight links plus the switch, the booking button and two account links do
   not fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1400px) {
  .nav-logo img { height: 48px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--crema);
    flex-direction: column; justify-content: center; align-items: center; gap: 22px;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: inset(0); visibility: visible; transition: clip-path 0.55s var(--ease); }
  .nav-links a { font-size: 18px; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--tinta); text-shadow: none; }
  .nav-links .nav-cta { border: 1.5px solid var(--tinta); padding: 14px 30px !important; color: var(--arcilla-deep); background: var(--blanco); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; border-color: var(--tinta); }
  .nav-links .lang-switch button { color: var(--gris); }
  .nav-links .lang-switch button.active { color: #fff7f0; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-links.open li:nth-child(9) { animation-delay: 0.54s; }
  .nav-links.open li:nth-child(10) { animation-delay: 0.58s; }
  .nav-links.open li:nth-child(11) { animation-delay: 0.62s; }
  .nav-links.open li:nth-child(12) { animation-delay: 0.66s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { background-attachment: scroll; }
  section.paper { background-attachment: scroll, scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-script { font-size: clamp(54px, 16vw, 84px); }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 82px; }
  .menu-cat.two-way .mi-price.alt { width: 82px; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
  .about-images .img-main { width: 82%; }
  .about-images .img-accent { width: 52%; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; box-shadow: 8px 8px 0 var(--arcilla); }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
  .reserve-panel { box-shadow: 8px 8px 0 var(--arcilla); }
}
/* On a short screen, centring a tall card pushes it below the fold */
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

/* Someone who asked their system for less motion gets the content, not the
   choreography. Without this the page reads as blank until it animates in. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
  .hero-content > *, .hero-index { opacity: 1; transform: none; }
  .section-title.reveal::after { transform: none; }
  .hero video { display: none; }
}

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page: a stamp of paper with a
   dashed clay edge, the words turning, the face in the middle still. */
.reserve-badge {
  position: fixed; left: 34px; bottom: 34px; z-index: 55;
  width: 112px; height: 112px; display: grid; place-items: center;
}
.reserve-badge::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255, 252, 246, 0.94); border: 1.5px dashed var(--arcilla);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 4px 4px 0 var(--arcilla);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.reserve-badge svg text {
  fill: var(--arcilla-deep); font-family: var(--sans); font-weight: 600;
  font-size: 8.2px; letter-spacing: 0.3em; text-transform: uppercase;
}
.reserve-badge .badge-center { position: relative; display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 40px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

/* ---------- Booking switched off ---------- */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off .reserve-badge,
.bookings-off a[href$="#reserve"],
.bookings-off li:has(> a[href$="#reserve"]) { display: none !important; }

.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
.carte-lang {
  display: flex; justify-content: center; gap: 0;
  margin: -26px 0 44px;
}
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--gris); opacity: .75;
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-soft); }
.carte-lang button:hover { opacity: 1; color: var(--tinta); }
.carte-lang button.active { opacity: 1; color: var(--arcilla-deep); border-bottom-color: var(--arcilla); }
.paper .carte-lang button { color: var(--para-on-paper); }
.paper .carte-lang button + button { border-left-color: var(--rule-on-paper); }
.paper .carte-lang button:hover { color: var(--ink-on-paper); }
.paper .carte-lang button.active { color: var(--gold-on-paper); border-bottom-color: var(--gold-on-paper); }
@media (max-width: 560px) {
  .carte-lang { margin: -18px 0 32px; }
  .carte-lang button { padding: 8px 11px; font-size: 11px; letter-spacing: .1em; }
}

/* ---------- Booking taken on WhatsApp ---------- */
.reserve-panel .btn.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #1fa855;
  border-color: #1fa855;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
}
.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #157a3c; border-color: #157a3c; color: #fff; }
.reserve-panel .btn.wa-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
  transition: fill 0.45s var(--ease);
}
.reserve-panel .btn.wa-btn.incomplete { opacity: .5; }

/* ---------- Picking services off the card ---------- */
/* The + that books a service: a small square stamp beside the price. Once
   picked it turns clay and shows its check. */
.mi-add {
  flex: none; margin-left: 9px; vertical-align: middle;
  width: 24px; height: 24px; border: 1.5px solid var(--arcilla-deep);
  border-radius: 50%;
  background: transparent; color: var(--arcilla-deep);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.mi-add::before { content: '+'; font-weight: 600; margin-top: -1px; }
.mi-add:hover { box-shadow: 2px 2px 0 var(--arcilla); transform: translate(-1px, -1px); }
.mi-add.on { background: var(--arcilla-deep); color: #fff7f0; }
.mi-add.on::before { content: '✓'; font-size: 12px; }
.menu-item .mi-price { display: inline-flex; align-items: center; }
.menu-cat.two-way .mi-price { justify-content: flex-end; }

/* The basket bar: fixed to the foot of the services page, ink over the page */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(29, 25, 23, 0.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--arcilla);
  padding: 12px 0;
}
.cart-bar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cart-state { color: var(--on-noche); font-size: 14px; }
.cart-total { color: var(--arcilla-light); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; }
.cart-bar .btn { margin-left: auto; padding: 12px 28px; box-shadow: 4px 4px 0 var(--crema); }
.cart-bar .btn.disabled { opacity: 0.45; pointer-events: none; }
.menu-page { padding-bottom: 140px; }
@media (max-width: 560px) {
  .cart-bar-inner { gap: 8px; }
  .cart-state, .cart-total { font-size: 12.5px; }
  .cart-bar .btn { padding: 12px 20px; width: 100%; }
}

/* ---------- Chosen services in the booking panel ---------- */
.rsv-services { margin-top: 30px; }
.rsv-empty {
  text-align: center; background: var(--crema);
  border: 1.5px solid var(--tinta); border-radius: 2px;
  padding: 30px 26px;
}
.rsv-empty b { display: block; font-family: var(--display); font-size: 24px; font-weight: 400; color: var(--tinta); margin-bottom: 8px; }
.rsv-empty p { font-size: 14px; margin-bottom: 18px; }
#reserveForm.no-services .form-grid,
#reserveForm.no-services .form-submit,
#reserveForm.no-services .form-note { display: none; }
.rsv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rsv-head b { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--tinta); }
.rsv-more { font-size: 13px; font-weight: 600; color: var(--arcilla-deep); }
.rsv-more:hover { color: var(--tinta); }
.rsv-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.rsv-name { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
.rsv-dots { flex: 1; min-width: 18px; border-bottom: 1.5px dotted rgba(102, 92, 85, 0.4); transform: translateY(-5px); }
.rsv-price { font-family: var(--sans); font-weight: 600; color: var(--arcilla-ink); font-size: 14.5px; white-space: nowrap; }
.rsv-del {
  flex: none; align-self: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; transition: background 0.25s, color 0.25s;
}
.rsv-del:hover { background: rgba(179, 64, 58, 0.12); color: var(--err); }
.rsv-total {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1.5px solid var(--tinta); margin-top: 8px; padding-top: 12px;
}
.rsv-total b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--tinta); }
.rsv-total b:last-child { color: var(--arcilla-deep); }
.rsv-note { font-size: 12px; color: var(--gris); opacity: 0.75; margin-top: 6px; }

/* ---------- Nav dropdowns ---------- */
.nav-links li { position: relative; }
.nav-links li.has-drop > a {
  padding-right: 16px;
  background: no-repeat right center / 8px 5px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8a07f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nav-drop {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; padding: 12px 8px 8px;
  background: var(--blanco); border: 1.5px solid var(--tinta);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--arcilla);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  z-index: 70;
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
.nav-links li.has-drop:hover > .nav-drop,
.nav-links li.has-drop:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-drop-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 9px 14px; border-radius: 2px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--tinta) !important; text-shadow: none !important;
  text-transform: none !important; letter-spacing: 0.01em !important; text-indent: 0 !important;
  transition: background 0.25s;
}
.nav-drop-link span { flex: 1 1 auto; min-width: 0; padding-right: 10px; }
.nav-drop-link b { flex: none; margin-left: auto; color: var(--arcilla-deep); font-weight: 600; white-space: nowrap; font-size: 12px; }
.nav-drop-link:hover { background: var(--rosa-2); }
.nav-drop-all {
  display: block; margin: 6px 6px 2px; padding: 10px 14px; text-align: center;
  border-top: 1.5px solid var(--tinta);
  font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--arcilla-deep) !important; text-shadow: none !important;
}
.nav-drop-all:hover { color: var(--tinta) !important; }
.nav-drop a::after { display: none !important; }
@media (max-width: 1400px) { .nav-drop { display: none; } .nav-links li.has-drop > a { background: none; padding-right: 0; } }

/* ---------- The four families, home page ---------- */
/* Four doors in a row. The picture is the arch, the name sits under it in
   the serif, and the whole card lifts onto a clay shadow on hover. */
.families-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.family-card { position: relative; display: block; }
.family-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--arch);
  box-shadow: 10px 10px 0 var(--rosa);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.family-card:hover img { box-shadow: 10px 10px 0 var(--arcilla); transform: translate(-2px, -2px); }
.fc-veil { display: none; }
.fc-body { padding: 22px 4px 0; text-align: left; color: var(--tinta); display: block; }
.fc-body b { display: block; font-family: var(--display); font-size: 27px; font-weight: 400; line-height: 1.1; }
.fc-body small { display: block; font-size: 13.5px; color: var(--gris); margin-top: 7px; line-height: 1.5; }
.fc-body i {
  display: inline-block; margin-top: 14px; font-style: normal;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--arcilla-deep);
  border-bottom: 1.5px solid var(--arcilla); padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}
.family-card:hover .fc-body i { color: var(--tinta); border-color: var(--tinta); }
@media (max-width: 1024px) { .families-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .families-grid { grid-template-columns: 1fr; } .family-card img { aspect-ratio: 4 / 3; } }

/* ---------- Family pages ---------- */
.fam-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px); transform: scale(1.05); }
.fam-page { padding-top: clamp(46px, 5vw, 76px); background: var(--crema); }
.fam-note { text-align: center; max-width: 60ch; margin: 0 auto 40px; color: var(--gris); font-size: 15px; }
.svc-block { margin-bottom: clamp(48px, 6vw, 80px); }
.svc-block .section-head { margin-bottom: 28px; }
.svc-block .section-title { font-size: clamp(28px, 3.2vw, 40px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  background: var(--blanco); border: 1.5px solid var(--tinta);
  border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--arcilla); }
.svc-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1.5px solid var(--tinta); }
.svc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-card:hover .svc-pic img { transform: scale(1.05); }
.svc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-family: var(--display); font-size: 20px; font-weight: 400; line-height: 1.2; }
.svc-body h3 a { color: var(--tinta); }
.svc-body h3 a:hover { color: var(--arcilla-deep); }
.svc-body p { font-size: 13px; color: var(--gris); margin-top: 6px; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.svc-price { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--arcilla-ink); }
.svc-add {
  border: 1.5px solid var(--tinta); background: var(--blanco); color: var(--tinta);
  border-radius: 999px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--arcilla);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.svc-add:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--arcilla); }
.svc-add.on { background: var(--arcilla); border-color: var(--arcilla); color: #fff7f0; box-shadow: 3px 3px 0 var(--tinta); }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Service page ---------- */
.svc-page { padding: 140px 0 140px; background: var(--crema); }
.svc-crumbs { font-size: 12.5px; letter-spacing: 0.06em; color: var(--gris); margin-bottom: 26px; }
.svc-crumbs a { color: var(--arcilla-deep); font-weight: 600; }
.svc-crumbs a:hover { color: var(--tinta); }
.svc-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.svc-detail-pic { margin: 0; overflow: hidden; border-radius: var(--arch); box-shadow: 14px 14px 0 var(--rosa); aspect-ratio: 4 / 4.6; }
.svc-detail-pic img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail-body .section-title { margin-top: 16px; }
.svc-detail-price { margin: 18px 0 10px; display: flex; align-items: baseline; gap: 14px; }
.svc-detail-price b { font-family: var(--display); font-size: 34px; font-weight: 400; color: var(--arcilla-deep); }
.svc-detail-price s { color: var(--gris); opacity: 0.6; font-size: 18px; }
.svc-detail-desc { color: var(--gris); font-size: 16px; max-width: 52ch; }
.svc-points { list-style: none; margin: 22px 0 28px; display: grid; gap: 9px; }
.svc-points li { position: relative; padding-left: 22px; font-size: 14px; color: var(--gris); }
.svc-points li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 2px;
  background: var(--arcilla);
}
.svc-detail-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.svc-detail-actions .btn.solid.added { background: var(--azul); border-color: var(--azul); }
.svc-related-wrap { margin-top: clamp(60px, 8vw, 100px); }
@media (max-width: 900px) { .svc-detail { grid-template-columns: 1fr; } .svc-detail-pic { max-width: 420px; } }

/* ---------- About page ---------- */
.about-page { background: var(--crema); }
.about2-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.about2-lead { font-family: var(--display); font-size: 26px; line-height: 1.35; color: var(--tinta); margin-bottom: 22px; }
.about2-text p { margin-bottom: 18px; font-size: 16px; }
.about2-pics { display: grid; gap: 30px; }
.about2-pics .img-frame { aspect-ratio: 4 / 5; }
.about2-pics .img-frame.alt { border-radius: 6px; width: 82%; justify-self: end; box-shadow: 10px 10px 0 var(--tinta); aspect-ratio: 4 / 3; }
.about2-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card {
  background: var(--blanco); border: 1.5px solid var(--tinta);
  border-radius: 2px; padding: 26px 24px;
  box-shadow: 6px 6px 0 var(--rosa);
  transition: box-shadow 0.3s var(--ease);
}
.value-card:hover { box-shadow: 6px 6px 0 var(--arcilla); }
.value-card b { display: block; font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--tinta); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--gris); }
@media (max-width: 900px) { .about2-grid, .about2-values { grid-template-columns: 1fr; } }

/* ---------- The floating WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: flex; align-items: center; gap: 10px;
  background: #25d366; color: #ffffff;
  border-radius: 999px; padding: 13px 20px 13px 15px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(18, 82, 47, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
}
.wa-float:hover { transform: translateY(-3px); background: #1fbd5b; box-shadow: 0 16px 38px rgba(18, 82, 47, 0.48); }
.wa-float svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
body:has(.cart-bar) .wa-float { bottom: 86px; }
@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: 13px; }
  body:has(.cart-bar) .wa-float { bottom: 130px; }
}