/* ==========================================================
   CAN PETITA — Costa Brava
   Sistema visual: jade luminós · or champagne · crema pedra
   ========================================================== */

:root {
  /* Paleta verde MÁS LUMINOSA — pidió luz */
  --ink:        #0f3329;
  --ink-2:      #143b30;
  --jade-deep:  #1d5142;
  --jade:       #2c7a64;
  --jade-mid:   #3fa085;
  --jade-soft:  #5dbfa3;
  --jade-glow:  #88dcc1;
  --jade-mist:  rgba(108, 207, 173, 0.10);

  --gold:        #c9a86a;
  --gold-warm:   #b8965a;
  --gold-bright: #e6c98a;
  --gold-pale:   #f0dfb5;
  --gold-soft:   #f7eccd;

  --cream:  #f4ede0;
  --bone:   #faf6ee;
  --paper:  #ede4d0;
  --mist:   rgba(244, 237, 224, 0.08);

  --line:  rgba(201, 168, 106, 0.22);
  --line2: rgba(201, 168, 106, 0.42);
  --line3: rgba(201, 168, 106, 0.65);

  --ff-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ff-body:    "Inter", -apple-system, system-ui, sans-serif;
  --ff-script:  "Caveat", cursive;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --maxw: 1280px;
  --pad-x: clamp(20px, 4vw, 64px);

  --radius: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;

  --shadow-soft: 0 12px 40px rgba(0,0,0,.18);
  --shadow-gold: 0 14px 36px rgba(201, 168, 106, .22);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-body);
  background: var(--ink);
  color: var(--cream);
  line-height: 1.55;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

::selection { background: var(--gold); color: var(--ink); }

/* ============== custom cursor halo (desktop only) ============== */
.cursor-halo {
  position: fixed;
  pointer-events: none;
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .25s var(--ease), opacity .3s var(--ease), background .25s;
  mix-blend-mode: screen;
  z-index: 9998;
  opacity: 0;
}
.cursor-halo.visible { opacity: .55; }
.cursor-halo.hover { transform: translate(-50%, -50%) scale(2.2); background: rgba(201, 168, 106, 0.12); }
.cursor-dot {
  position: fixed;
  pointer-events: none;
  width: 4px; height: 4px;
  background: var(--gold-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s;
}
.cursor-dot.visible { opacity: 1; }
@media (hover: none), (max-width: 880px) { .cursor-halo, .cursor-dot { display: none; } }

/* ============== type ============== */
.eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold);
  opacity: .6;
}

h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(56px, 11vw, 168px); }
h2 { font-size: clamp(38px, 6vw, 88px); }
h3 { font-size: clamp(20px, 2vw, 30px); letter-spacing: 0; }

.script { font-family: var(--ff-script); }

/* ============== nav ============== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: backdrop-filter .4s, background .4s, border-color .4s;
  pointer-events: none;
  border-bottom: 1px solid transparent;
}
.nav > * { pointer-events: auto; }
.nav.scrolled {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(15, 51, 41, 0.78);
  border-bottom-color: var(--line);
}
.nav-logo {
  font-family: var(--ff-display);
  font-size: 22px;
  font-style: italic;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-logo b { font-weight: 600; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; font-size: 18px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold);
  transition: right .35s var(--ease);
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { right: 0; }

.book-pill {
  background: var(--gold);
  color: var(--ink) !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.book-pill:hover { background: var(--gold-bright); transform: translateY(-1px); box-shadow: var(--shadow-gold); }
.book-pill::after { display: none !important; }

/* lang switcher */
.lang {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.lang button {
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, color .25s;
  font-family: var(--ff-body);
}
.lang button:hover { color: var(--gold-bright); }
.lang button.active { background: var(--gold); color: var(--ink); }

/* mobile burger */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 999px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  cursor: pointer;
  transition: all .3s;
}
.nav-burger:hover { color: var(--gold-bright); border-color: var(--gold); }
.nav-burger svg { width: 18px; height: 18px; }

/* mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 86vw);
  height: 100vh;
  background: linear-gradient(180deg, var(--ink) 0%, var(--jade-deep) 100%);
  border-left: 1px solid var(--line);
  z-index: 200;
  padding: 76px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 26px;
  color: var(--cream);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: color .3s, padding .3s;
}
.nav-drawer a:hover, .nav-drawer a:active { color: var(--gold-bright); padding-left: 8px; }
.nav-drawer .book-pill {
  margin-top: 22px;
  text-align: center;
  padding: 18px 26px !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  border-radius: 999px;
  display: block;
  width: 100%;
  border-bottom: none !important;
  font-style: normal !important;
  font-family: var(--ff-body) !important;
}
.nav-drawer .book-pill:hover { padding-left: 26px !important; }
.nav-drawer .lang { display: none; }  /* moved to hero on mobile */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 51, 41, 0.6);
  backdrop-filter: blur(6px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.drawer-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold-bright);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-family: var(--ff-display);
  transition: all .3s;
}
.drawer-close:hover { border-color: var(--gold); transform: rotate(90deg); }

@media (max-width: 1080px) {
  .nav-links a:not(.book-pill), .nav-links .lang, .nav-manage { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ============== hero ============== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px var(--pad-x) 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(136, 220, 193, 0.22), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(201, 168, 106, 0.14), transparent 60%),
    linear-gradient(180deg, #143b30 0%, #1d5142 50%, #143b30 100%);
}

.hero-bg-grain {
  position: absolute; inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orb 18s ease-in-out infinite alternate;
}
.hero-orb.a { width: 520px; height: 520px; background: rgba(93, 191, 163, 0.45); top: -160px; right: -140px; }
.hero-orb.b { width: 420px; height: 420px; background: rgba(201, 168, 106, 0.22); bottom: -120px; left: -100px; animation-duration: 22s; animation-delay: -4s; }
@keyframes orb {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.10); }
  100% { transform: translate(-30px, 40px) scale(0.92); }
}

.hero-inner {
  position: relative;
  max-width: var(--maxw);
  width: 100%;
  text-align: center;
  z-index: 2;
}

.hero-eyebrow {
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .2s forwards;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 106, 0.12);
  border: 1px solid var(--line2);
  color: var(--gold-bright);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .1s forwards;
}

/* Mobile-only language pill row inside the hero — hidden on desktop where nav has its own */
.hero-lang {
  display: none;
  gap: 4px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 24px;
  width: fit-content;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .25s forwards;
}
.hero-lang button {
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, color .25s;
  font-family: var(--ff-body);
  min-width: 32px;
}
.hero-lang button:hover { color: var(--gold-bright); }
.hero-lang button.active { background: var(--gold); color: var(--ink); }
@media (max-width: 1080px) {
  .hero-lang { display: inline-flex; }
}
.hero-badge .star { color: var(--gold-bright); font-size: 13px; }

.hero-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.92;
}
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.2s var(--ease) forwards;
  padding: 0.08em 0.08em 0.18em;  /* extra bottom space so italic descenders (f, j, y) don't clip */
  line-height: 1.18;
  overflow: visible;
}
.hero-title .word:nth-child(1) { animation-delay: .35s; }
.hero-title .and {
  font-family: var(--ff-script);
  font-style: normal;
  font-size: 0.42em;
  color: var(--gold-bright);
  margin: -0.08em 0;
  opacity: 0;
  transform: scale(0.6);
  animation: andPop 1s var(--ease-back) .85s forwards;
}
.hero-title .word:nth-child(3) {
  animation-delay: 1.0s;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  letter-spacing: -0.02em;
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes andPop { to { opacity: 1; transform: scale(1); } }

.hero-sub {
  max-width: 580px;
  margin: 36px auto 0;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(244, 237, 224, 0.85);
  line-height: 1.65;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.4s forwards;
  padding: 0 12px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.6s forwards;
}

.hero-cta-cards {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.8s forwards;
}
.cta-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 18px;
  background: rgba(15, 51, 41, 0.55);
  border: 1px solid var(--line2);
  border-radius: 999px;
  text-decoration: none;
  color: var(--cream);
  transition: all .35s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-card:hover {
  border-color: var(--gold);
  background: rgba(15, 51, 41, 0.85);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.cta-card-icon {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border-right: 1px solid var(--line);
  padding-right: 12px;
  margin-right: -2px;
  transition: color .3s;
}
.cta-card:hover .cta-card-icon { color: var(--gold-bright); }
.cta-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 2px;
}
.cta-card-eyebrow {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.cta-card-label {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.cta-card-arrow {
  color: var(--gold-bright);
  font-size: 16px;
  transition: transform .3s var(--ease);
}
.cta-card:hover .cta-card-arrow { transform: translateX(4px); }
@media (max-width: 600px) {
  .hero-cta-cards { gap: 10px; margin-top: 22px; flex-direction: row; }
  .cta-card { padding: 12px 16px 12px 14px; gap: 10px; flex: 1 1 calc(50% - 6px); justify-content: flex-start; }
  .cta-card-icon { width: 30px; height: 30px; padding-right: 8px; }
  .cta-card-icon svg { width: 26px; height: 26px; }
  .cta-card-label { font-size: 14px; }
  .cta-card-arrow { display: none; }
}
@media (max-width: 380px) {
  .hero-cta-cards { flex-direction: column; }
  .cta-card { flex: 1 1 100%; justify-content: center; }
  .cta-card-arrow { display: inline; }
}

.btn {
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
  min-height: 48px;  /* mobile tap target */
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--line2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(201, 168, 106, 0.06); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Hero scroll cue — refined, replaces awkward "Desplaza" word */
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 2s forwards;
  pointer-events: none;
}
.hero-scroll .label {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(230, 201, 138, 0.55);
  font-family: var(--ff-body);
  font-weight: 500;
}
.hero-scroll .mouse {
  width: 22px; height: 36px;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  position: relative;
  opacity: 0.7;
}
.hero-scroll .mouse::before {
  content: "";
  position: absolute;
  width: 3px; height: 7px;
  background: var(--gold-bright);
  left: 50%;
  top: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  animation: mouseBead 1.6s ease-in-out infinite;
}
@keyframes mouseBead {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 600px) {
  .hero { padding: 78px 20px 70px; }
  .hero-orb.a { width: 320px; height: 320px; }
  .hero-orb.b { width: 240px; height: 240px; }
  .hero-scroll { bottom: 14px; }
  .hero-scroll .label { display: none; }
  .hero-ctas .btn { padding: 14px 22px; font-size: 11px; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero-badge { margin-bottom: 18px; padding: 6px 12px; font-size: 10px; }
  .hero-lang { margin-bottom: 18px; }
  .hero-sub { margin-top: 28px; }
  .hero-ctas { margin-top: 30px; }
}

/* ============== sections ============== */
section {
  padding: clamp(80px, 12vh, 160px) var(--pad-x);
  position: relative;
}
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 {
  color: var(--cream);
  font-style: italic;
  font-weight: 300;
}
.section-head h2 .gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  font-style: normal;
}
.section-head .sub {
  margin-top: 18px;
  max-width: 560px;
  color: rgba(244, 237, 224, 0.78);
  font-size: 16px;
}

@media (max-width: 600px) {
  section { padding: 70px 20px; }
}

/* ============== story ============== */
.story {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(93, 191, 163, 0.14), transparent 60%),
    var(--ink);
}
.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 880px) { .story-grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 880px) and (min-width: 600px) {
  .story-photo { max-width: 480px; margin: 0 auto; width: 100%; }
}

.story-text h2 { white-space: pre-line; margin-bottom: 30px; }
.story-text p { margin-bottom: 18px; color: rgba(244, 237, 224, 0.82); font-size: 17px; line-height: 1.75; }
.story-sign { font-family: var(--ff-script); font-size: 36px; color: var(--gold-bright); margin-top: 26px; }

.story-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.story-stats .stat .v {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--gold-bright);
  line-height: 1;
  letter-spacing: -0.01em;
}
.story-stats .stat .l {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.6);
  font-weight: 600;
}

.story-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.story-photo::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line2);
  pointer-events: none;
  z-index: 2;
  border-radius: var(--radius);
}
.story-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.05);
  transition: transform 1.2s var(--ease);
}
.story-photo:hover img { transform: scale(1.04); }

.story-card {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(15, 51, 41, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line2);
  padding: 16px 22px;
  border-radius: var(--radius-md);
  max-width: 240px;
  z-index: 3;
}
.story-card .name { font-family: var(--ff-display); font-style: italic; color: var(--gold-bright); font-size: 26px; line-height: 1; }
.story-card .role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 237, 224, 0.7); margin-top: 6px; }

@media (max-width: 600px) {
  .story-stats { gap: 12px; }
  .story-stats .stat .l { font-size: 9px; letter-spacing: 0.12em; }
}

/* ============== breakfast / lunch (carta) — PDF-inspired epic backdrop ============== */
.menu-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%, rgba(109, 191, 163, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 88% 92%, rgba(212, 175, 86, 0.10), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, #0d2d24 35%, #0a2520 65%, var(--ink) 100%);
}
.menu-section.dark {
  background:
    radial-gradient(ellipse 80% 50% at 80% 6%, rgba(109, 191, 163, 0.20), transparent 55%),
    radial-gradient(ellipse 65% 45% at 12% 100%, rgba(212, 175, 86, 0.13), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, #0d3329 30%, #0a2820 70%, var(--ink-2) 100%);
}

/* Coastal silhouette ridge at the top of each menu section (echoes the PDF's mountain). */
.menu-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'><path d='M0 110 L0 80 Q60 70 110 60 T220 50 Q280 40 340 55 T450 60 Q520 50 590 35 T720 30 Q800 25 880 45 T1010 55 Q1080 50 1150 30 T1290 25 Q1370 28 1440 45 L1440 110 Z' fill='rgba(109,191,163,0.07)'/><path d='M0 110 L0 95 Q70 88 130 82 T260 75 Q320 70 390 80 T520 85 Q600 78 680 65 T820 60 Q900 58 980 72 T1120 80 Q1200 76 1280 65 T1440 70 L1440 110 Z' fill='rgba(212,175,86,0.04)'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 110px;
  background-position: top center;
  pointer-events: none;
  z-index: 0;
}

/* Watermark "P" of Petita — soft typographic backdrop behind the menu grid. */
.menu-section::after {
  content: "P";
  position: absolute;
  font-family: var(--ff-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(160px, 20vw, 280px);
  line-height: 0.85;
  color: rgba(212, 175, 86, 0.06);
  bottom: 6%;
  right: 2%;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.menu-section.dark::after {
  color: rgba(244, 237, 224, 0.04);
  left: 3%;
  right: auto;
  bottom: 8%;
}

/* Section content always above the decorative layers. */
.menu-section .section-inner {
  position: relative;
  z-index: 1;
}

/* Subtle inset frame — echoes the PDF's gold-bordered card containers. */
.menu-section .section-inner > * {
  position: relative;
  z-index: 1;
}

/* Menu section heading: gold-bordered uppercase eyebrow chip (like the PDF). */
.menu-section .section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 14px;
  border: 1px solid rgba(212, 175, 86, 0.32);
  background: linear-gradient(180deg, rgba(212, 175, 86, 0.08), rgba(212, 175, 86, 0.02));
  border-radius: 999px;
  letter-spacing: 0.26em;
  color: var(--gold-bright);
  font-weight: 600;
  text-shadow: 0 0 16px rgba(212, 175, 86, 0.25);
  margin-bottom: 22px;
}
.menu-section .section-head h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.menu-section .section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), rgba(212, 175, 86, 0));
}

/* Category pager: arrows + active name + position dots. Replaces horizontal scroll. */
.cat-pager {
  margin-bottom: 44px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
}
.cat-pager-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cat-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(212, 175, 86, 0.07);
  border: 1px solid rgba(212, 175, 86, 0.32);
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cat-arrow:hover {
  background: rgba(212, 175, 86, 0.16);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.cat-arrow:active { transform: scale(0.92); }
.cat-arrow svg { display: block; }
.cat-pager-track {
  flex: 1;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.cat-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 4.6vw, 28px);
  line-height: 1.15;
  color: var(--gold-bright);
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: catSlideIn .35s var(--ease);
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(212, 175, 86, 0.18);
  padding: 0 6px;
}
.cat-counter {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.45);
}
@keyframes catSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cat-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.cat-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(244, 237, 224, 0.2);
  cursor: pointer;
  transition: width .35s var(--ease), background .25s var(--ease), border-radius .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cat-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.cat-dot:hover { background: rgba(212, 175, 86, 0.55); }
.cat-dot.active {
  width: 26px;
  border-radius: 5px;
  background: var(--gold-bright);
}
.cat-dot.active:hover { background: var(--gold-bright); }

@media (max-width: 600px) {
  .cat-pager { margin-bottom: 30px; padding-bottom: 18px; }
  .cat-pager-row { gap: 8px; }
  .cat-arrow { width: 42px; height: 42px; }
  .cat-dots { margin-top: 14px; gap: 7px; }
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 64px;
}
@media (max-width: 760px) { .menu-grid { grid-template-columns: 1fr; gap: 4px; } }

.menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 18px 4px 18px;
  border-bottom: 1px dashed var(--line);
  cursor: default;
  transition: background .3s, padding .3s, border-color .3s;
}
/* Tiny gold lozenge centered on each dish divider — echoes PDF art-deco. */
.menu-item::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--gold);
  opacity: 0.22;
  border-radius: 1px;
  transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
  pointer-events: none;
}
.menu-item:hover::after { opacity: 0.6; width: 7px; height: 7px; }
.menu-item:hover {
  background: linear-gradient(90deg, transparent, rgba(212, 175, 86, 0.06) 50%, transparent);
  padding-left: 12px; padding-right: 12px;
  border-bottom-color: rgba(212, 175, 86, 0.32);
}
.menu-item.opt { opacity: 0.78; padding: 8px 0; }
.menu-item.opt .top { font-size: 16px; }
.menu-item.opt .price { font-size: 16px; }
.menu-item .top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.7vw, 22px);
  color: var(--cream);
  font-weight: 500;
  min-width: 0;
}
.menu-item .top .name { white-space: normal; }
.menu-item .top .dots {
  flex: 1;
  border-bottom: 1px dotted var(--line2);
  transform: translateY(-4px);
  min-width: 16px;
}
.menu-item .price {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.7vw, 22px);
  color: var(--gold-bright);
  font-weight: 500;
  white-space: nowrap;
}
.menu-item .desc {
  grid-column: 1 / -1;
  font-size: 14px;
  color: rgba(244, 237, 224, 0.65);
  line-height: 1.55;
  margin-top: 4px;
  font-style: italic;
}
.menu-item .price-sym { font-size: 0.7em; opacity: 0.7; margin-left: 2px; }

/* sub-section header within a tab */
.menu-sub {
  grid-column: 1 / -1;
  margin: 30px 0 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.menu-sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line2), transparent);
}
.menu-sub:first-child { margin-top: 0; }

/* category mini-summary */
.menu-tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-bright);
  margin-bottom: 28px;
  opacity: 0.85;
}

/* ============== gallery (real photos) ============== */
.gallery {
  background: var(--ink);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 130px;
  gap: 12px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--jade-deep);
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .6s var(--ease);
  filter: saturate(1.05) contrast(1.02);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15, 51, 41, 0.72) 100%);
  opacity: 0.7;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.tile:hover img { transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
.tile:hover::after { opacity: 0.85; }

.tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  color: var(--cream);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  transform: translateY(8px);
  opacity: 0;
  transition: all .4s var(--ease);
  z-index: 2;
}
.tile:hover .tile-label { transform: translateY(0); opacity: 1; }

/* tile sizes — 10 tiles in a magazine layout */
.t1 { grid-column: span 6; grid-row: span 3; }
.t2 { grid-column: span 3; grid-row: span 2; }
.t3 { grid-column: span 3; grid-row: span 2; }
.t4 { grid-column: span 4; grid-row: span 2; }
.t5 { grid-column: span 4; grid-row: span 2; }
.t6 { grid-column: span 4; grid-row: span 2; }
.t7 { grid-column: span 3; grid-row: span 3; }
.t8 { grid-column: span 5; grid-row: span 2; }
.t9 { grid-column: span 4; grid-row: span 2; }
.t10 { grid-column: span 12; grid-row: span 3; }

@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 8px; }
  .t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9, .t10 { grid-column: span 3; grid-row: span 2; }
  .t1 { grid-column: span 6; grid-row: span 3; }
  .t10 { grid-column: span 6; grid-row: span 3; }
}

.ig-cta { margin-top: 40px; text-align: center; }

/* ============== reviews ============== */
.reviews {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(93, 191, 163, 0.14), transparent 60%),
    var(--jade-deep);
}
.reviews-meta {
  text-align: center;
  margin-bottom: 36px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.reviews-meta .stars-row { color: var(--gold-bright); font-size: 16px; letter-spacing: 4px; margin-bottom: 6px; display: block; }
.review-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (min-width: 600px) and (max-width: 1080px) {
  .review-track { grid-template-columns: 1fr 1fr; }
  .review-track .review:nth-child(3) { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) { .review-track { grid-template-columns: 1fr; } }

.review {
  background: rgba(15, 51, 41, 0.55);
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius-md);
  position: relative;
  transition: border-color .35s, transform .4s var(--ease), box-shadow .4s;
}
.review:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.review .quote {
  position: absolute;
  top: -14px; left: 22px;
  background: var(--jade-deep);
  color: var(--gold);
  font-family: var(--ff-display);
  font-size: 64px;
  line-height: 0.6;
  padding: 0 8px;
}
.review .stars {
  color: var(--gold);
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 14px;
}
.review h4 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  margin-bottom: 10px;
  font-weight: 500;
}
.review .body { color: rgba(244, 237, 224, 0.78); line-height: 1.65; font-size: 15px; }
.review .author { margin-top: 18px; color: var(--gold); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.review .src { font-size: 10px; color: rgba(244, 237, 224, 0.45); letter-spacing: 0.16em; margin-top: 4px; }

.reviews-cta {
  margin-top: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.reviews-cta-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 20px;
  color: rgba(244, 237, 224, 0.85);
  max-width: 460px;
}
.reviews-cta-btn {
  background: rgba(15, 51, 41, 0.7);
  gap: 12px !important;
}
.reviews-cta-btn:hover { background: rgba(15, 51, 41, 0.95); }
.reviews-cta-btn svg { vertical-align: middle; }

/* ============== visit ============== */
.visit { background: var(--ink); }
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 880px) { .visit-grid { grid-template-columns: 1fr; gap: 36px; } }

.visit-info dl { display: grid; grid-template-columns: 1fr; gap: 22px; }
.visit-info .row {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.visit-info .row:last-child { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.visit-info .label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 600;
}
.visit-info .value { font-size: 17px; color: var(--cream); }
.visit-info .value a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line2); transition: color .3s, border-color .3s; }
.visit-info .value a:hover { color: var(--gold-bright); border-color: var(--gold); }

.hours-list { display: grid; gap: 10px; list-style: none; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 4px 0;
}
.hours-list .day { color: rgba(244, 237, 224, 0.78); text-transform: capitalize; }
.hours-list .time { color: var(--cream); font-variant-numeric: tabular-nums; }
.hours-list li.now { background: rgba(230, 201, 138, 0.08); padding: 8px 12px; border-radius: var(--radius); margin: 0 -12px; }
.hours-list li.now .day, .hours-list li.now .time { color: var(--gold-bright); font-weight: 600; }
.hours-list li.now .day::before {
  content: "●";
  color: var(--gold-bright);
  font-size: 9px;
  margin-right: 8px;
  animation: pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
.hours-list li.closed .time { color: rgba(244, 237, 224, 0.4); font-style: italic; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* embedded map iframe (real Google Maps) */
.map-wrap {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: var(--jade-deep);
  box-shadow: var(--shadow-soft);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85) brightness(0.92); }
.map-cta {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(15, 51, 41, 0.92);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: all .3s;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.map-cta:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 600px) { .map-wrap { aspect-ratio: 1; } }

/* ============== reserve ============== */
.reserve {
  background: linear-gradient(180deg, var(--ink) 0%, var(--jade-deep) 100%);
  position: relative;
}
.reserve-card {
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(201, 168, 106, 0.10), transparent 60%),
    rgba(15, 51, 41, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(28px, 5vw, 64px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}
.reserve-card .section-head { margin-bottom: 32px; text-align: center; }
.reserve-card .section-head .eyebrow { justify-content: center; }
.reserve-card .section-head .eyebrow::before { display: none; }
.reserve-card .section-head .sub { margin-left: auto; margin-right: auto; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.field input, .field select, .field textarea {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 15px;
  padding: 14px 16px;
  border-radius: var(--radius);
  transition: border-color .3s, background .3s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0,0,0,0.4);
}
.field input.invalid, .field select.invalid { border-color: #d97a4a; }
.field .err { font-size: 12px; color: #f0a988; font-family: var(--ff-body); margin-top: 2px; font-style: italic; }
.field textarea { resize: vertical; min-height: 96px; font-family: var(--ff-body); }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c9a86a' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 14px 0;
  min-height: auto;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--gold) var(--rng, 50%), rgba(201, 168, 106, 0.18) var(--rng, 50%));
  border-radius: 2px;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 2px solid var(--ink);
  margin-top: -9px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(201, 168, 106, 0.18); }
.field input[type="range"]::-moz-range-track { height: 4px; background: rgba(201, 168, 106, 0.18); border-radius: 2px; }
.field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 2px solid var(--ink);
  cursor: pointer;
}

.form-submit { margin-top: 24px; text-align: center; }
.form-submit .btn { padding: 18px 48px; }
.form-submit .btn[disabled] { opacity: 0.6; cursor: progress; }
.form-success {
  background: rgba(93, 191, 163, 0.16);
  border: 1px solid var(--jade-soft);
  color: var(--cream);
  padding: 22px;
  text-align: center;
  border-radius: var(--radius);
  margin-top: 20px;
  display: none;
  font-family: var(--ff-display);
}
.form-success.show { display: block; animation: fadeUp .6s var(--ease); }
.form-success .ok { font-size: 22px; font-style: italic; color: var(--gold-bright); }
.form-success .sub { display: block; font-size: 14px; margin-top: 6px; color: rgba(244, 237, 224, 0.78); font-family: var(--ff-body); font-style: normal; }
.form-success .code { display: inline-block; margin-top: 10px; background: var(--ink); border: 1px solid var(--gold); padding: 6px 14px; font-family: monospace; color: var(--gold-bright); font-size: 13px; letter-spacing: 0.18em; border-radius: 999px; }

.form-error {
  background: rgba(217, 122, 74, 0.14);
  border: 1px solid #d97a4a;
  color: #f4d4c0;
  padding: 16px;
  text-align: center;
  border-radius: var(--radius);
  margin-top: 16px;
  font-style: italic;
  font-size: 14px;
}

.code-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 12px;
  font-weight: 600;
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ============== Returning visitor pill ============== */
.last-res-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(201, 168, 106, 0.1);
  border: 1px solid var(--line2);
  border-radius: 999px;
  cursor: pointer;
  margin: 0 auto 28px;
  max-width: 540px;
  transition: all .25s var(--ease);
}
.last-res-pill:hover { border-color: var(--gold); background: rgba(201, 168, 106, 0.16); transform: translateY(-1px); }
.last-res-icon { font-size: 22px; }
.last-res-text { flex: 1; min-width: 0; line-height: 1.25; }
.last-res-eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.last-res-info { font-family: var(--ff-display); font-style: italic; font-size: 16px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last-res-arrow { color: var(--gold-bright); font-size: 18px; flex-shrink: 0; }
@media (max-width: 540px) {
  .last-res-pill { padding: 12px 14px; gap: 10px; }
  .last-res-info { font-size: 13px; white-space: normal; line-height: 1.3; max-width: 100%; }
  .last-res-icon { font-size: 18px; }
}

/* ============== Closed-day banner ============== */
.closed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(217, 122, 74, 0.12);
  border: 1px solid rgba(217, 122, 74, 0.5);
  color: #f4d4c0;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  font-size: 14px;
}
.btn-link-gold {
  background: transparent;
  border: none;
  color: var(--gold-bright);
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid var(--gold);
  transition: color .25s;
}
.btn-link-gold:hover { color: var(--cream); }

/* ============== Big group note ============== */
.big-group-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gold-bright);
  font-style: italic;
  background: rgba(201, 168, 106, 0.08);
  padding: 8px 12px;
  border-radius: var(--radius);
  border-left: 2px solid var(--gold);
}

/* ============== Premium success card ============== */
.success-card {
  text-align: center;
  padding: 28px 16px 20px;
  animation: fadeUp .6s var(--ease);
}
.success-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(93, 191, 163, 0.16);
  border: 2px solid var(--jade-soft);
  color: var(--jade-soft);
  margin-bottom: 18px;
  animation: tickPop .7s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes tickPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.success-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 36px);
  color: var(--gold-bright);
  font-weight: 500;
  margin-bottom: 8px;
}
.success-sub {
  color: rgba(244, 237, 224, 0.78);
  font-size: 15px;
  margin-bottom: 22px;
}
.success-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(244, 237, 224, 0.85);
  margin-bottom: 24px;
  text-transform: capitalize;
}
.success-meta strong { color: var(--gold-bright); font-weight: 600; }

.code-block {
  margin: 0 auto 26px;
  max-width: 460px;
}
.code-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  background: var(--ink);
  border: 1px solid var(--gold);
  padding: 12px 18px;
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  color: var(--gold-bright);
  font-size: 14px;
  letter-spacing: 0.12em;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s var(--ease);
  word-break: break-all;
  max-width: 100%;
}
.code-pill:hover { background: rgba(201, 168, 106, 0.08); transform: translateY(-1px); }
.code-pill svg { color: var(--gold); flex-shrink: 0; }
.code-copied {
  margin-top: 10px;
  font-size: 12px;
  color: var(--jade-soft);
  font-style: italic;
  animation: fadeUp .3s var(--ease);
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.success-btn { padding: 14px 22px !important; font-size: 11px !important; gap: 10px !important; }

.success-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  margin-top: 4px;
}
.success-sep { color: var(--gold); opacity: 0.5; }
.success-warn {
  margin-top: 18px;
  font-size: 11px;
  color: rgba(244, 237, 224, 0.5);
  font-style: italic;
}

@media (max-width: 540px) {
  .success-meta { font-size: 12px; padding: 10px 14px; }
  .success-actions { flex-direction: column; align-items: stretch; }
  .success-actions .btn { justify-content: center; }
  .code-pill { font-size: 12px; padding: 10px 14px; }
}

.manage-link {
  margin-top: 16px;
  text-align: center;
}
.manage-link-btn {
  background: transparent;
  border: none;
  color: rgba(244, 237, 224, 0.55);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--ff-body);
  border-bottom: 1px dashed transparent;
  transition: color .25s, border-color .25s;
}
.manage-link-btn:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

/* ============== Manage reservation modal ============== */
.manage-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 51, 41, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeUp .25s var(--ease);
}
.manage-card {
  position: relative;
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, rgba(20,59,48,.98), rgba(15,51,41,.98));
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 36px 32px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.manage-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-bright);
  font-size: 20px; line-height: 1;
  font-family: var(--ff-display);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.manage-close:hover { border-color: var(--gold); transform: rotate(90deg); }

.manage-head { text-align: center; margin-bottom: 24px; }
.manage-head .eyebrow { justify-content: center; }
.manage-head .eyebrow::before { display: none; }
.manage-head h2 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 32px;
  color: var(--cream);
  margin-top: 8px;
  font-weight: 400;
}

.manage-body { display: flex; flex-direction: column; gap: 18px; }
.manage-text { color: rgba(244, 237, 224, 0.78); text-align: center; font-size: 15px; }

.manage-form { display: flex; flex-direction: column; gap: 12px; }
.manage-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 14px 18px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .25s, background .25s;
}
.manage-input:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.45); }
.manage-input::placeholder { color: rgba(244, 237, 224, 0.35); letter-spacing: 0.18em; font-weight: 400; }

.manage-error {
  background: rgba(217, 122, 74, 0.14);
  border: 1px solid #d97a4a;
  color: #f4d4c0;
  padding: 12px 14px;
  text-align: center;
  border-radius: 4px;
  font-size: 13px;
  font-style: italic;
}

.res-summary {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.res-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}
.res-row span {
  color: rgba(244, 237, 224, 0.6);
  text-transform: lowercase;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.res-row strong { color: var(--cream); font-weight: 600; }
.res-row em { color: rgba(244, 237, 224, 0.75); font-style: italic; }
.status-pill {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  color: var(--gold-bright);
  font-family: var(--ff-body);
  font-weight: 600 !important;
}

.manage-actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.manage-actions .btn { flex: 1; min-width: 140px; padding: 14px 18px; font-size: 11px; }
.btn-danger {
  background: transparent;
  color: #f0a988;
  border: 1px solid rgba(217,122,74,0.55);
  padding: 14px 18px;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s var(--ease);
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 480px) {
  .manage-card { padding: 28px 22px 22px; }
  .manage-actions { flex-direction: column; gap: 8px; }
  .manage-actions .btn, .manage-actions .btn-danger, .btn-danger { width: 100%; min-width: 0; }
  .manage-head h2 { font-size: 26px; }
  .res-row { font-size: 13px; gap: 10px; }
  .res-row strong { text-align: right; }
}
.btn-danger:hover { background: rgba(217,122,74,0.18); border-color: #d97a4a; color: #f4d4c0; }

.manage-success, .manage-info, .manage-confirm { text-align: center; padding: 12px 0; }
.manage-success-icon, .manage-info-icon, .manage-confirm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-size: 28px;
  margin: 0 auto 16px;
}
.manage-success-icon { background: rgba(93, 191, 163, 0.15); border: 1px solid var(--jade-soft); color: var(--jade-soft); }
.manage-info-icon { background: rgba(201, 168, 106, 0.15); border: 1px solid var(--gold); color: var(--gold-bright); font-style: italic; }
.manage-confirm-icon { background: rgba(217, 122, 74, 0.18); border: 1px solid #d97a4a; color: #f0a988; }
.manage-success h3, .manage-info h3, .manage-confirm h3 {
  font-family: var(--ff-display); font-style: italic; color: var(--gold-bright);
  font-size: 26px; margin-bottom: 8px; font-weight: 500;
}
.manage-success p, .manage-info p, .manage-confirm p {
  color: rgba(244, 237, 224, 0.75); font-size: 14px; margin-bottom: 8px;
}
.res-summary-mini { background: transparent !important; border: none !important; padding: 0 !important; max-width: 320px; margin: 12px auto 0 !important; }
.res-summary-mini .res-row { padding: 4px 0; font-size: 13px; }

/* WhatsApp action row in manage modal */
.manage-actions-row { margin-bottom: 8px; }
.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: rgba(37, 211, 102, 0.08) !important;
  border: 1px solid rgba(37, 211, 102, 0.5) !important;
  color: #75e6a4 !important;
}
.btn-wa:hover { background: rgba(37, 211, 102, 0.18) !important; border-color: #25d366 !important; color: #b8f5d2 !important; }

/* Status pill colors in res-summary */
.status-pill.confirmed { color: #75e6a4; border-color: rgba(117, 230, 164, 0.5); background: rgba(37, 211, 102, 0.08); }
.status-pill.pending { color: var(--gold-bright); border-color: rgba(230, 201, 138, 0.5); background: rgba(230, 201, 138, 0.08); }
.status-pill.cancelled { color: #f0a988; border-color: rgba(217, 122, 74, 0.5); background: rgba(217, 122, 74, 0.1); text-decoration: line-through; }

/* ============== footer ============== */
footer {
  padding: 70px var(--pad-x) 36px;
  text-align: center;
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.footer-script { font-family: var(--ff-script); font-size: clamp(40px, 5vw, 56px); color: var(--gold-bright); margin-bottom: 18px; }
.footer-rights { font-size: 12px; color: rgba(244, 237, 224, 0.5); letter-spacing: 0.08em; margin-top: 4px; }
.footer-meta { font-size: 11px; color: rgba(244, 237, 224, 0.4); letter-spacing: 0.08em; margin-top: 8px; }
.footer-meta a { color: var(--gold); text-decoration: none; margin: 0 8px; }
.footer-meta a:hover { color: var(--gold-bright); }
.footer-socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 22px 0 18px;
}
.footer-socials a {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  text-decoration: none;
  transition: border-color .3s, color .3s, transform .3s;
}
.footer-socials a:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ornament divider */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin: 0 auto;
  color: var(--gold);
  opacity: .6;
}
.ornament::before, .ornament::after {
  content: "";
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ornament .glyph { font-family: var(--ff-display); font-style: italic; font-size: 14px; }

/* ============== a11y / motion ============== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .hero-title .word, .hero-eyebrow, .hero-sub, .hero-ctas, .hero-scroll, .hero-badge, .hero-orb { opacity: 1; transform: none; }
}

/* small screens: tighten body type */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .story-text p { font-size: 16px; }
  .menu-item .top, .menu-item .price { font-size: 18px; }
  .review h4 { font-size: 20px; }
  .visit-info .value { font-size: 16px; }
}

/* ============== Manage Reservation icons & helpers ============== */
.last-res-icon, .res-floater-icon {
  display: inline-grid;
  place-items: center;
  color: var(--gold-bright);
}
.last-res-icon svg, .res-floater-icon svg { display: block; }
.last-res-arrow {
  color: var(--gold);
  display: grid;
  place-items: center;
}
.manage-success-icon, .manage-info-icon, .manage-confirm-icon {
  font-size: 0;
  color: currentColor;
}
.manage-success-icon svg, .manage-info-icon svg, .manage-confirm-icon svg { display: block; }

.manage-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.manage-input-icon {
  position: absolute;
  left: 18px;
  display: grid;
  place-items: center;
  color: rgba(244, 237, 224, 0.45);
  pointer-events: none;
}
.manage-input-wrap .manage-input { padding-left: 46px; }

.manage-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto 0;
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(244, 237, 224, 0.6);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 999px;
  text-align: center;
  transition: color .25s, border-color .25s, background .25s;
  text-decoration: none;
}
.manage-fallback:hover {
  color: var(--gold-bright);
  border-color: var(--line2);
  background: rgba(212, 175, 86, 0.06);
}
.manage-fallback svg { color: #25D366; flex-shrink: 0; }

/* ============== Floating "Tu reserva" pill (global) ============== */
.res-floater {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 16px;
  background: linear-gradient(180deg, rgba(20, 59, 48, 0.96), rgba(15, 51, 41, 0.98));
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(212, 175, 86, 0.18), inset 0 1px 0 rgba(244, 237, 224, 0.06);
  cursor: pointer;
  color: var(--cream);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  animation: floaterSlideIn .55s var(--ease);
  user-select: none;
  -webkit-user-select: none;
}
.res-floater:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.55), 0 0 0 2px rgba(212, 175, 86, 0.32), inset 0 1px 0 rgba(244, 237, 224, 0.1);
  border-color: var(--gold-bright);
}
.res-floater:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.res-floater-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 4px;
  text-align: left;
}
.res-floater-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.res-floater-info {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 14px;
  color: var(--cream);
  white-space: nowrap;
  line-height: 1.2;
}
.res-floater-arrow {
  color: var(--gold);
  border-left: 1px solid rgba(212, 175, 86, 0.3);
  padding-left: 14px;
  display: grid;
  place-items: center;
}
.res-floater-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-2, #0c2620);
  border: 1px solid var(--line);
  color: rgba(244, 237, 224, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.res-floater-close:hover { color: var(--cream); border-color: var(--line2); background: var(--jade-deep); }

@keyframes floaterSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .res-floater {
    bottom: 88px;
    right: 12px;
    padding: 10px 18px 10px 14px;
    gap: 10px;
  }
  .res-floater-info { font-size: 13px; }
  .res-floater-eyebrow { font-size: 8.5px; }
}
@media (max-width: 380px) {
  .res-floater {
    left: 12px;
    right: 12px;
  }
  .res-floater-info { white-space: normal; }
}

/* ============== Nav "Mi reserva" entry point (always visible) ============== */
.nav-manage {
  background: transparent;
  border: 1px solid rgba(212, 175, 86, 0.32);
  color: var(--gold-bright);
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
  font-family: inherit;
}
.nav-manage:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 86, 0.08);
  color: var(--gold-bright);
}
.nav-manage svg { display: block; }
.nav-manage::after { display: none !important; }
@media (max-width: 1080px) { .nav-manage { display: none !important; } }

.drawer-manage {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 12px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  margin-top: 8px;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), padding .25s var(--ease);
  text-align: left;
  width: 100%;
}
.drawer-manage:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 86, 0.06);
  color: var(--gold-bright);
}
.drawer-manage svg { color: var(--gold); flex-shrink: 0; }

/* ============== Save link block on the success card ============== */
.save-link-block {
  background: linear-gradient(180deg, rgba(212, 175, 86, 0.06), rgba(212, 175, 86, 0.02));
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.save-link-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -30%, rgba(230, 201, 138, 0.18), transparent 60%);
  pointer-events: none;
}
.save-link-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.save-link-help {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 237, 224, 0.78);
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.save-link-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.save-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--ff-body, Inter, sans-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--cream);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
  font-family: inherit;
}
.save-link-btn:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 86, 0.08);
  color: var(--gold-bright);
}
.save-link-btn:active { transform: scale(0.97); }
.save-link-btn.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  border-color: transparent;
}
.save-link-btn.primary:hover {
  filter: brightness(1.06);
  color: var(--ink);
}
.save-link-btn svg { flex-shrink: 0; }
.save-link-btn.primary svg { color: var(--ink); }
.save-link-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(244, 237, 224, 0.42);
  word-break: break-all;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .save-link-block { padding: 16px 14px 14px; }
  .save-link-actions { flex-direction: column; }
  .save-link-btn { justify-content: center; width: 100%; }
}

/* ==========================================================
   Responsive polish v2 — audit-driven fixes for every phone
   (added without touching JSX or core layout)
   ========================================================== */

/* --- Belt & braces: stop accidental horizontal scroll on any device --- */
html, body { max-width: 100%; overflow-x: clip; }

/* --- Fluid section padding floor: tighter on tiny phones (320–360) --- */
@media (max-width: 380px) {
  :root { --pad-x: 14px; }
  section { padding: 60px 14px; }
}

/* --- Nav: prevent overflow on 320, ensure burger always reachable --- */
.nav { gap: 12px; padding-left: clamp(12px, 4vw, 64px); padding-right: clamp(12px, 4vw, 64px); }
.nav-logo { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .nav-logo { font-size: 19px; }
  .nav-logo b { font-size: 15px; letter-spacing: 0.08em; }
  .nav-burger { width: 40px; height: 40px; }
}
@media (max-width: 1080px) {
  /* The book-pill (RESERVAR) was shoving the burger off the right edge on small screens.
     Hide it in the top nav on mobile/tablet — the burger drawer + the floating CTA already
     give two paths to reserve. */
  .nav-links .book-pill { display: none; }
}

/* --- Hero: fluid title that never crushes or overflows --- */
.hero-title .word { font-size: clamp(44px, 13vw, 168px); line-height: 1.05; }
.hero-title .and  { font-size: clamp(20px, 5vw, 56px); }
.hero-sub { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
@media (max-width: 360px) {
  .hero { padding: 72px 16px 64px; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: 0.28em; }
  .hero-badge { font-size: 9.5px; padding: 5px 10px; margin-bottom: 14px; }
  .hero-orb.a { width: 240px; height: 240px; right: -100px; top: -120px; }
  .hero-orb.b { width: 200px; height: 200px; }
  .hero-ctas .btn { padding: 13px 18px; font-size: 10.5px; letter-spacing: 0.14em; }
  .hero-scroll { display: none; }
}
@media (max-width: 380px) {
  /* iPhone SE-class — double row of cta cards looks better stacked */
  .hero-cta-cards { gap: 8px; }
  .cta-card { padding: 12px 14px 12px 12px; gap: 10px; }
  .cta-card-label { font-size: 13px; }
}

/* --- Story: stat values wrap and shrink instead of clipping --- */
.story-stats .stat .v {
  font-size: clamp(18px, 5.6vw, 32px);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.story-stats .stat .l { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .story-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .story-stats .stat:nth-child(3) { grid-column: 1 / -1; text-align: center; }
}
.story-text p { overflow-wrap: anywhere; }

/* --- Menu: long dish names wrap cleanly, prices never clip --- */
.menu-item .top .name { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.menu-item .desc     { overflow-wrap: anywhere; }
.menu-item .top .dots { display: none; }  /* dotted leader collided with wrapped names on narrow rows */
@media (min-width: 760px) { .menu-item .top .dots { display: block; } }

/* Category name was being chopped by ellipsis at 320 ("Destellos para compartir") — let it wrap */
.cat-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(18px, 5.2vw, 28px);
  line-height: 1.2;
  padding: 0 4px;
}
@media (max-width: 360px) {
  .cat-pager-row { gap: 6px; }
  .cat-arrow { width: 38px; height: 38px; }
}

/* --- Visit / hours-list: fix .now negative-margin overflow --- */
.visit-info .row { overflow: hidden; }      /* clip the .now highlight bleed */
.hours-list li.now { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; }
.visit-info .value { overflow-wrap: anywhere; }

/* --- Reservation form: select/input never overflow on tiny screens --- */
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field { min-width: 0; }
.form-grid { min-width: 0; }

/* --- Floating "Tu reserva" pill must NOT cover the sticky reserve CTA on mobile --- */
@media (max-width: 640px) {
  /* The reserve button (cp-floating-reserve) sits at bottom:12px ~52px tall.
     Push the floater higher so they stack cleanly without overlap. */
  .res-floater { bottom: 84px; }
}
@media (max-width: 380px) {
  .res-floater { left: 10px; right: 10px; padding: 10px 14px 10px 12px; gap: 8px; }
  .res-floater-info { font-size: 12.5px; line-height: 1.25; white-space: normal; }
  .res-floater-arrow { padding-left: 10px; }
}

/* --- Floating reserve button (gamification): tighten on smallest phones --- */
@media (max-width: 380px) {
  .cp-floating-reserve { left: 10px; right: 10px; padding: 14px 18px; font-size: 12px; letter-spacing: 0.16em; }
}

/* --- Loyalty form: input + button row was 367px wide on a 320 viewport.
       Override: stack vertically below 420px so neither element gets clipped. --- */
@media (max-width: 420px) {
  .cp-loyalty-input-wrap { flex-direction: column; gap: 10px; }
  .cp-loyalty-input-wrap .cp-loyalty-input { width: 100%; font-size: 16px; letter-spacing: 0.3em; padding: 13px 14px; }
  .cp-loyalty-input-wrap .cp-btn-gold { width: 100%; padding: 14px 18px; }
}
.cp-loyalty-input-wrap, .cp-loyalty-card, .cp-loyalty-form { min-width: 0; max-width: 100%; }

/* --- Quiz section CTAs: prevent button overflow on iPhone Plus widths --- */
.cp-btn-gold { white-space: normal; max-width: 100%; }

/* --- Tap targets: ensure 44px minimum on interactive controls --- */
.lang button, .hero-lang button { min-height: 36px; min-width: 36px; padding: 8px 12px; }
.cat-dot { padding: 10px; box-sizing: content-box; margin: -10px; }   /* enlarge hit area without changing visual */
.cat-dot::before { inset: 0; }
.cat-dot.active { width: 26px; }
.cp-egg { min-width: 44px; min-height: 44px; }
.res-floater-close { min-width: 28px; min-height: 28px; }

/* --- Drawer: keep usable on very small screens --- */
@media (max-width: 380px) {
  .nav-drawer { width: min(320px, 90vw); padding: 70px 22px 22px; }
  .nav-drawer a { font-size: 22px; padding: 10px 0; }
}

/* --- Reviews: typographic safety on tiny screens --- */
.review h4, .review .body { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .review { padding: 26px 20px; }
  .review h4 { font-size: 18px; }
  .review .body { font-size: 14px; }
}

/* --- Section heads: clamp h2 lower so they don't crush at 320 --- */
.section-head h2 { font-size: clamp(30px, 7.6vw, 88px); }
.section-head .sub { overflow-wrap: anywhere; font-size: clamp(14px, 1.4vw, 16px); }

/* --- Footer: keep socials tap-friendly + safe on tiny widths --- */
@media (max-width: 380px) {
  footer { padding: 56px 14px 28px; }
  .footer-socials { gap: 10px; flex-wrap: wrap; }
  .footer-meta { word-break: break-word; }
}

/* --- iPad portrait (768) up to <1080 — burger nav is intentional, but breathe more --- */
@media (min-width: 700px) and (max-width: 1079px) {
  .menu-grid { gap: 12px 40px; }
  .visit-grid { gap: 36px; }
}

/* --- Honor safe-area on notched phones for fixed elements --- */
.res-floater { bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 84px)); }
@media (min-width: 641px) {
  .res-floater { bottom: max(28px, env(safe-area-inset-bottom, 0px)); right: max(28px, env(safe-area-inset-right, 0px)); }
}
.cp-floating-reserve { padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)); }

/* --- Manage modal: ensure tap targets and inputs scale on smallest phones --- */
@media (max-width: 380px) {
  .manage-card { padding: 22px 16px 18px; }
  .manage-input { padding: 12px 14px; font-size: 14px; letter-spacing: 0.14em; }
  .manage-input-wrap .manage-input { padding-left: 40px; }
  .manage-input-icon { left: 14px; }
}

/* --- Form select dropdown chevron: keep clear of value text on small inputs --- */
@media (max-width: 380px) {
  .field select { background-position: right 12px center; padding-right: 32px; padding-left: 12px; padding-top: 12px; padding-bottom: 12px; }
  .field input, .field textarea { padding: 12px 14px; }
}

/* --- Galería: tile labels on touch devices were never visible (only on hover).
       Reveal them softly on small screens so the gallery isn't silent. --- */
@media (hover: none) and (max-width: 880px) {
  .tile-label { opacity: 1; transform: translateY(0); font-size: 14px; padding: 12px 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
}

/* --- Last guard: any element with `white-space: nowrap` that breaks layout on tiny phones --- */
@media (max-width: 380px) {
  .res-floater-info, .last-res-info { white-space: normal; }
}


/* ============== Aesthetic micro-polish ============== */
/* Subtle, brand-aligned micro-interactions. Calm refined craft —
   no playful bounce, just gold sheens, gentle lifts and slow reveals.
   Honors prefers-reduced-motion at the bottom of this block. */

/* 9. Page-level smoothness ------------------------------------------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 10. Cursor refinement on big tap targets -------------------------------- */
.btn, .menu-item, .cta-card, .cp-quiz-opt, .res-floater { cursor: pointer; }

/* 1. Buttons — radial sheen, lift, click scale ---------------------------- */
.btn,
.btn-gold,
.book-pill,
.cp-btn-gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color .35s var(--ease),
    color .35s var(--ease),
    transform .25s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease),
    filter .35s var(--ease);
}
.btn::before,
.btn-gold::before,
.book-pill::before,
.cp-btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 140% at 50% 0%,
    rgba(230, 201, 138, 0.55) 0%,
    rgba(230, 201, 138, 0.18) 38%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.btn:hover::before,
.btn-gold:hover::before,
.book-pill:hover::before,
.cp-btn-gold:hover::before { opacity: 1; }

.btn:hover,
.btn-gold:hover,
.book-pill:hover,
.cp-btn-gold:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.22),
    0 4px 14px rgba(201, 168, 106, 0.28);
}
.btn:active,
.btn-gold:active,
.book-pill:active,
.cp-btn-gold:active {
  transform: scale(0.97);
  transition-duration: .12s;
}

/* 2. Hero CTA cards — glow border, icon kinetics, arrow slide ------------- */
.cta-card {
  position: relative;
  isolation: isolate;
  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
}
.cta-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--jade-mid), var(--gold-bright) 60%, var(--jade-soft));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.cta-card:hover::after { opacity: 1; }
.cta-card-icon {
  transition: transform .4s var(--ease), color .35s var(--ease);
  transform-origin: center;
}
.cta-card:hover .cta-card-icon {
  transform: scale(1.08) rotate(-4deg);
}
.cta-card-arrow {
  transition: transform .35s var(--ease), color .3s var(--ease);
}
.cta-card:hover .cta-card-arrow { transform: translateX(4px); }

/* 3. Reservation pill — soft pulse on appear, gold border on hover ------- */
@keyframes cpAppearPulse {
  0%   { opacity: 0.7; }
  50%  { opacity: 1;   }
  100% { opacity: 0.7; }
}
.res-floater {
  animation: cpAppearPulse 1.5s var(--ease) 1 both;
  transition:
    border-color .35s var(--ease),
    box-shadow .35s var(--ease),
    transform .25s var(--ease),
    background .35s var(--ease);
}
.res-floater:hover {
  border-color: var(--gold-bright);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(230, 201, 138, 0.45);
}

/* 4. Section eyebrow — thin gold line that grows on scroll-into-view ----- */
.eyebrow::before {
  width: 0;
  transition: width .65s var(--ease), opacity .5s var(--ease);
}
.reveal.in .eyebrow::before,
.in .eyebrow::before {
  width: 28px;
  opacity: .85;
}
/* Fallback: when no .reveal wrapper, still show the line at 28px (matches base rule). */
section:not(.reveal) .eyebrow::before,
.section-head:not(.reveal) .eyebrow::before { width: 28px; }

/* 5. Reveal animations — softer fade-up, never undo position:fixed -------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Safety: don't let .reveal break floating UI like .res-floater or .nav. */
.res-floater.reveal,
.nav.reveal,
.cursor-halo.reveal,
.cursor-dot.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* 6. Menu items — dish name color shift to gold-bright on hover ---------- */
.menu-item .top { transition: color .3s var(--ease); }
.menu-item .top .name {
  transition: color .3s var(--ease), letter-spacing .35s var(--ease);
}
.menu-item:hover .top .name {
  color: var(--gold-bright);
}

/* 7. Quiz options — hover lift + soft inner glow ------------------------- */
.cp-quiz-opt {
  position: relative;
  isolation: isolate;
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    background .3s var(--ease),
    box-shadow .35s var(--ease);
}
.cp-quiz-opt:hover {
  transform: translateY(-2px);
  border-color: var(--line3);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.20),
    inset 0 0 18px rgba(230, 201, 138, 0.10);
}
.cp-quiz-opt:active {
  transform: translateY(0) scale(0.985);
  transition-duration: .12s;
}

/* 8. Footer socials — gentle rotate + gold glow -------------------------- */
.footer-socials a {
  transition:
    border-color .35s var(--ease),
    color .35s var(--ease),
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    background .35s var(--ease);
}
.footer-socials a:hover {
  transform: translateY(-2px) rotate(3deg);
  box-shadow: 0 0 0 1px rgba(230, 201, 138, 0.35), 0 6px 18px rgba(201, 168, 106, 0.22);
  background: rgba(201, 168, 106, 0.06);
}

/* a11y: respect reduced motion — disable polish animations & transforms -- */
@media (prefers-reduced-motion: reduce) {
  .res-floater { animation: none; }
  .btn, .btn-gold, .book-pill, .cp-btn-gold,
  .cta-card, .cta-card-icon, .cta-card-arrow,
  .menu-item .top .name, .cp-quiz-opt,
  .footer-socials a, .reveal, .eyebrow::before {
    transition: none !important;
  }
  .btn:hover, .btn-gold:hover, .book-pill:hover, .cp-btn-gold:hover,
  .cp-quiz-opt:hover, .footer-socials a:hover,
  .cta-card:hover .cta-card-icon, .cta-card:hover .cta-card-arrow {
    transform: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .eyebrow::before { width: 28px; }
}

/* ============== Section dividers (waves, ridge, tide, ornament) ============== */
/* Coastal/Mediterranean transitions between major sections.
   Each variant is a thin SVG strip stretched to viewport width. */
.cp-divider {
  position: relative;
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  background: var(--ink);
  z-index: 0;
  overflow: hidden;
}
.cp-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Wave: 3 layered ocean swells. Slow drift on the back layer. */
.cp-divider-wave {
  height: clamp(72px, 9vw, 140px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.cp-divider-wave svg { height: 100%; width: 100%; }
.cp-divider-wave .cpd-wave-back {
  transform-origin: center bottom;
  animation: cpdSwell 14s ease-in-out infinite;
}
.cp-divider-wave .cpd-wave-mid {
  transform-origin: center bottom;
  animation: cpdSwell 18s ease-in-out infinite reverse;
}
@keyframes cpdSwell {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-2%, -3px, 0); }
}

/* Ridge: thin coastal silhouette echoing the menu top ridge. */
.cp-divider-ridge {
  height: clamp(60px, 7vw, 110px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

/* Tide: gentle low foam + drifting sparkles (foam droplets). */
.cp-divider-tide {
  height: clamp(56px, 6.5vw, 90px);
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}
.cp-divider-tide .cpd-tide-spark {
  position: absolute;
  bottom: 22%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(230, 201, 138, 0.6);
  opacity: 0;
  animation: cpdSparkle 5s ease-in-out infinite;
}
.cp-divider-tide .cpd-tide-spark:nth-child(2) { animation-delay: 1.2s; }
.cp-divider-tide .cpd-tide-spark:nth-child(3) { animation-delay: 2.4s; bottom: 35%; }
.cp-divider-tide .cpd-tide-spark:nth-child(4) { animation-delay: 3.6s; }
.cp-divider-tide .cpd-tide-spark:nth-child(5) { animation-delay: 0.6s; bottom: 28%; }
@keyframes cpdSparkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
  40%, 60% { opacity: 0.85; transform: translateY(-2px) scale(1); }
}

/* Ornament: gold art-deco filigree with a central glyph (sun + waves). */
.cp-divider-ornament {
  height: clamp(80px, 7vw, 120px);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 max(var(--pad-x, 24px), 8vw);
}
.cp-divider-ornament .cpd-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 86, 0.45) 50%, transparent 100%);
  max-width: 380px;
  position: relative;
}
.cp-divider-ornament .cpd-line::before,
.cp-divider-ornament .cpd-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(212, 175, 86, 0.55);
  border-radius: 50%;
  transform: translateY(-50%);
}
.cp-divider-ornament .cpd-line::before { left: 50%; transform: translate(-50%, -50%); }
.cp-divider-ornament .cpd-line::after { display: none; }
.cp-divider-ornament .cpd-glyph {
  flex-shrink: 0;
  color: var(--gold);
  display: grid;
  place-items: center;
  width: 64px;
  height: 22px;
  filter: drop-shadow(0 0 12px rgba(212, 175, 86, 0.18));
  animation: cpdGlyphPulse 4.5s ease-in-out infinite;
}
@keyframes cpdGlyphPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 600px) {
  .cp-divider-wave     { height: clamp(60px, 14vw, 100px); }
  .cp-divider-ridge    { height: clamp(50px, 12vw, 90px); }
  .cp-divider-tide     { height: clamp(48px, 10vw, 70px); }
  .cp-divider-ornament { height: clamp(70px, 14vw, 100px); padding: 0 12px; gap: 12px; }
  .cp-divider-ornament .cpd-line { max-width: 200px; }
}

/* Reduced motion: stop divider animations */
@media (prefers-reduced-motion: reduce) {
  .cp-divider-wave .cpd-wave-back,
  .cp-divider-wave .cpd-wave-mid,
  .cp-divider-tide .cpd-tide-spark,
  .cp-divider-ornament .cpd-glyph { animation: none !important; }
  .cp-divider-tide .cpd-tide-spark { opacity: 0.7; }
}

/* ============== Tarjeta Modal (iframe wrapper, opens /tarjeta on landing) ============== */
.cp-tarjeta-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 24, 17, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 12px;
  animation: cpTarjetaFade .22s var(--ease) both;
  transition: opacity .26s var(--ease), backdrop-filter .26s var(--ease);
}
.cp-tarjeta-modal.cp-tarjeta-modal-leaving {
  opacity: 0;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.cp-tarjeta-modal.cp-tarjeta-modal-leaving .cp-tarjeta-modal-frame {
  transform: scale(1.02);
  transition: transform .26s var(--ease);
}
@keyframes cpTarjetaFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cp-tarjeta-modal-frame {
  width: 100%;
  height: 100%;
  max-width: 480px;
  max-height: 880px;
  border: 1px solid rgba(212, 175, 86, 0.35);
  border-radius: 22px;
  background: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 86, 0.14);
  overflow: hidden;
}
.cp-tarjeta-modal-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 1;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(15, 51, 41, 0.88);
  border: 1px solid rgba(212, 175, 86, 0.4);
  color: var(--gold-bright);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s;
}
.cp-tarjeta-modal-close:hover { border-color: var(--gold); background: rgba(20, 59, 48, 0.95); }
.cp-tarjeta-modal-close:active { transform: scale(0.95); }
@media (max-width: 600px) {
  .cp-tarjeta-modal { padding: 0; }
  .cp-tarjeta-modal-frame { border-radius: 0; max-width: 100%; max-height: 100%; border: 0; }
  .cp-tarjeta-modal-close { top: max(14px, env(safe-area-inset-top, 14px)); right: 14px; }
}

/* The CTA inside the loyalty form is a <button> now (was an <a>) — reset native styles. */
.cp-loyalty-digital-cta {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}