/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #0E0B09;
  --bg-elevated: #130F0C;
  --bg-card:     #221A12;
  --fg:          #F2EEE6;
  --fg-2:        #9A8B78;
  --fg-3:        #6B5D50;
  --sep:         rgba(242,232,218,.08);
  --accent:      #C49A6C;
  --accent-warm: #A8804E;
  --green:       #25D366;
  --radius:      16px;
  --radius-lg:   24px;
  --max-w:       1200px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; width: 100%; }
body {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3A2E24; border-radius: 10px; }

/* ─── Selection ──────────────────────────────────────────────────────────── */
::selection { background: rgba(196,154,108,.28); color: var(--fg); }

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer  { from { background-position:-200% center; } to { background-position:200% center; } }
@keyframes spinArc  { to { transform: rotate(360deg); } }

/* ─── Utility ────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
@media (min-width:640px) { .container { padding: 0 32px; } }

.eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.divider { height:1px; background: linear-gradient(90deg, transparent, rgba(242,232,218,.1), transparent); }

.glass {
  background: rgba(34,26,18,.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--sep);
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 2rem;
  background: var(--accent);
  color: var(--bg);
  font-size: .9375rem;
  font-weight: 600;
  border-radius: 99px;
  transition: background .2s;
}
.btn-primary:hover { background: #CF9F6A; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 2rem;
  background: rgba(255,255,255,.07);
  color: var(--fg);
  font-size: .9375rem;
  font-weight: 500;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* AOS reveal */
.aos { opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.aos.visible { opacity:1; transform:none; }
.aos-scale { opacity:0; transform:scale(.96); transition: opacity .6s ease, transform .6s ease; }
.aos-scale.visible { opacity:1; transform:none; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
#header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  transition: background .4s, border-color .4s;
}
#header.scrolled {
  background: rgba(14,11,9,.88);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--sep);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 20px;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width:640px) { .header-inner { padding: 0 32px; height: 64px; } }

.logo { display: flex; align-items: center; line-height: 1; }
.logo svg { display: block; }

.nav-links { display: none; gap: 28px; align-items: center; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a:not(.nav-reserve) { font-size: .875rem; color: var(--fg-2); transition: color .2s; }
.nav-links a:not(.nav-reserve):hover { color: var(--fg); }
.nav-links .nav-reserve {
  display: none;
  padding: .4rem 1.1rem;
  background: var(--accent);
  color: var(--bg);
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 99px;
  transition: background .2s, color .2s;
}
@media (min-width:768px) { .nav-links .nav-reserve { display: inline-flex; } }
.nav-links .nav-reserve:hover { background: #CF9F6A; color: var(--bg); }

.burger { color: var(--fg-2); display: flex; padding: 4px; }
@media (min-width:768px) { .burger { display: none; } }

/* ─── Mobile drawer ─────────────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 10vw;
  gap: 0;
  /* Fondo con blur sobre la página */
  background: rgba(10,8,6,.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  /* Círculo que crece desde el burger (top-right) */
  clip-path: circle(0% at calc(100% - 28px) 28px);
  transition: clip-path .65s cubic-bezier(.86,0,.07,1);
  pointer-events: none;
  will-change: clip-path;
}
.drawer.open {
  clip-path: circle(150% at calc(100% - 28px) 28px);
  pointer-events: auto;
}

/* Items: parten invisible, desplazados a la derecha */
.drawer > * {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
/* Stagger: links antes que la X */
.drawer.open > *:nth-child(2) { opacity:1; transform:none; transition-delay:.22s; }
.drawer.open > *:nth-child(3) { opacity:1; transform:none; transition-delay:.27s; }
.drawer.open > *:nth-child(4) { opacity:1; transform:none; transition-delay:.32s; }
.drawer.open > *:nth-child(5) { opacity:1; transform:none; transition-delay:.37s; }
.drawer.open > *:nth-child(6) { opacity:1; transform:none; transition-delay:.42s; }
.drawer.open > *:nth-child(7) { opacity:1; transform:none; transition-delay:.47s; }
.drawer.open > *:nth-child(8) { opacity:1; transform:none; transition-delay:.54s; }
.drawer.open > *:nth-child(1) { opacity:1; transform:none; transition-delay:.40s; } /* X */

/* Links con barra accent izquierda animada */
.drawer-link {
  position: relative;
  display: block;
  font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  color: rgba(242,238,230,.45);
  padding: 12px 0 12px 20px;
  transition: color .25s ease;
  text-decoration: none;
}
.drawer-link::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px; height: 60%;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.drawer-link:hover { color: var(--fg); }
.drawer-link:hover::before { transform: translateY(-50%) scaleY(1); }

/* Separador: línea accent después del último link */
.drawer-link:last-of-type::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: rgba(196,154,108,.35);
  margin-top: 28px;
}

/* Botón CTA */
.drawer .btn-primary {
  color: var(--bg);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 14px 36px;
  margin-top: 20px;
  margin-left: 20px;
}

.drawer a { text-decoration: none; }
.drawer-close {
  position: absolute;
  top: calc(36px + env(safe-area-inset-top, 0px));
  right: 20px;
  color: rgba(242,238,230,.6);
  padding: 10px;
  border-radius: 50%;
  background: none;
  border: none;
  outline: none;
  z-index: 100;
  transition: color .2s ease, transform .2s ease;
}
.drawer-close:hover { color: var(--fg); transform: rotate(90deg); }
.drawer-close:active { color: var(--accent); }

/* Mobile drawer overlay */
.drawer-overlay {
  position: fixed; inset:0; z-index:98;
  background: rgba(14,11,9,.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.16,1,.3,1);
}
.drawer.open ~ .drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  width: 100%;
  height: 100svh; min-height: 640px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-slide {
  position: absolute; inset:0;
  opacity: 0;
  transition: opacity 2s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position: center center; filter: sepia(.12) saturate(.88) brightness(.94); }
.hero-slide:nth-child(1) img { object-position: center 40%; }
.hero-slide:nth-child(2) img { object-position: center top; }
.hero-slide:nth-child(3) img { object-position: center 35%; }
.hero-slide:nth-child(4) img { object-position: center 45%; }

.hero-grad {
  position: absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.88) 100%);
}
.hero-vignette {
  position: absolute; inset:0; z-index:1;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
}
.hero-content {
  position: relative; z-index:2;
  text-align: center;
  padding: 0 20px;
  max-width: 860px;
  animation: fadeUp 1s cubic-bezier(.16,1,.3,1) both;
}
.hero-tag {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b88e61;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* H1: presente para SEO, visualmente discreto */
.hero-h1 {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(196,154,108,.75);
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* Tagline: el gran titular visual */
.hero-tagline {
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 4px 22px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.85);
}
.hero-slogan {
  font-size: clamp(.875rem, 1.4vw, 1.0625rem);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero-sub {
  color: #d1c0ad;
  font-size: clamp(1rem,1.8vw,1.2rem);
  max-width: 500px;
  margin: 0 auto 40px;
  font-weight: 400;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.hero-dots { position: absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:8px; align-items:center; }
.hero-dot {
  /* Área de toque 44×44 px (Lighthouse) con punto visual pequeño */
  width:44px; height:44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none; cursor: pointer;
  transition: all .4s;
}
.hero-dot::after {
  content: '';
  width: 6px; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.25);
  transition: all .4s;
}
.hero-dot.active::after { width:20px; background: var(--accent); }

.hero-address {
  display: none;
  position: absolute; bottom:32px; right:24px; z-index:2;
  align-items: center; gap:6px;
  padding: 6px 12px; border-radius:99px;
}
@media(min-width:640px) { .hero-address { display:flex; } }
.hero-address svg { width:12px; height:12px; color: var(--accent); flex-shrink:0; }
.hero-address span { font-size:11px; color: var(--fg-2); letter-spacing:.04em; }

/* ─── Stats ─────────────────────────────────────────────────────────────── */
/* ─── Quiénes Somos ──────────────────────────────────────────────────────── */
#quienes-somos { padding: 96px 0; background: var(--bg-elevated); border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
@media(min-width:640px) { #quienes-somos { padding: 120px 0; } }
.about-wrap { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media(min-width:900px) { .about-wrap { grid-template-columns: 1fr 1fr; gap: 80px; } }
.about-text h2 { margin: 12px 0 28px; }
.about-text p { color: var(--fg-2); line-height: 1.75; margin-bottom: 16px; font-size: 1rem; }
.about-text p:last-child { margin-bottom: 0; }
.about-cta-text { color: var(--fg) !important; font-size: .9375rem !important; }
.about-img-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.about-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.about-img--tall { grid-row: 1 / 3; height: 340px; }
.about-img-grid img:not(.about-img--tall) { height: 163px; }
@media(min-width:640px) { .about-img--tall { height: 420px; } .about-img-grid img:not(.about-img--tall) { height: 203px; } }

/* ─── Services ──────────────────────────────────────────────────────────── */
#servicios { padding: 96px 0; background: var(--bg); }
@media(min-width:640px) { #servicios { padding: 128px 0; } }
.section-heading { max-width:500px; margin-bottom:64px; }
.section-heading h2 { font-size: clamp(2.4rem,5vw,3.5rem); font-weight:700; line-height:1.05; letter-spacing:-.025em; margin-top:12px; }
.section-heading h2 .muted { color: var(--fg-2); font-weight:300; }

.services-grid { display:grid; gap:16px; }
@media(min-width:600px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1024px) { .services-grid { grid-template-columns: repeat(4,1fr); } }

.service-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.service-card.popular { background: rgba(196,154,108,.07); box-shadow: 0 0 0 1px rgba(196,154,108,.22); }

.service-img-wrap { width:100%; height:180px; overflow:hidden; }
.service-img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.service-card:hover .service-img { transform: scale(1.05); }

.service-body { padding: 24px; display:flex; flex-direction:column; flex:1; }

.service-badge {
  position: absolute; top:14px; right:14px;
  padding: 3px 10px; border-radius:99px;
  background: var(--accent); color: var(--bg);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  z-index:1;
}
.service-name { font-size:1.05rem; font-weight:600; color:var(--fg); margin-bottom:8px; }
.service-desc { font-size:.8125rem; color:var(--fg-2); line-height:1.55; flex:1; margin-bottom:20px; }
.service-footer { display:flex; align-items:center; justify-content:space-between; }
.service-price { font-size:1.5rem; font-weight:700; color:var(--accent); }
.service-duration { font-size:.75rem; color:var(--fg-3); }

/* ─── Gallery ───────────────────────────────────────────────────────────── */
#galeria { padding: 96px 0; background: var(--bg-elevated); }
@media(min-width:640px) { #galeria { padding: 128px 0; } }

.masonry {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 180px;
  gap: 10px;
}
@media(min-width:640px) {
  .masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap:12px; }
}
@media(min-width:1024px) {
  .masonry { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap:14px; }
}

.masonry-item {
  border-radius: var(--radius); overflow:hidden;
  position: relative; cursor: pointer;
}
.masonry-item.wide { grid-column: span 2; }
.masonry-item.tall { grid-row: span 2; }
.masonry-item img {
  width:100%; height:100%; display:block; object-fit:cover;
  filter: sepia(.18) saturate(.92) brightness(.93) contrast(1.04);
  transition: transform .7s ease, filter .4s ease;
}
.masonry-item:hover img { transform: scale(1.05); filter: sepia(.08) saturate(1) brightness(.98); }
.masonry-item-overlay {
  position:absolute; inset:0;
  background: rgba(0,0,0,0);
  transition: background .3s;
  display:flex; align-items:flex-end; padding:16px;
}
.masonry-item:hover .masonry-item-overlay { background: rgba(0,0,0,.38); }
.masonry-item-label {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,0); font-weight:500;
  transition: color .3s;
}
.masonry-item:hover .masonry-item-label { color: rgba(255,255,255,.88); }

/* Lightbox */
#lightbox {
  position: fixed; inset:0; z-index:200;
  background: rgba(0,0,0,.97);
  display:none; align-items:center; justify-content:center;
  animation: fadeIn .2s ease both;
}
#lightbox.open { display:flex; }
#lightbox img { max-height:88vh; max-width:calc(100vw - 120px); object-fit:contain; border-radius:var(--radius); }
.lb-btn {
  position:absolute; color: rgba(255,255,255,.4);
  background: none; border:none; cursor:pointer; padding:8px;
  transition: color .2s;
}
.lb-btn:hover { color: var(--accent); }
.lb-close { top:20px; right:20px; }
.lb-prev { left:16px; }
.lb-next { right:16px; }
@media(min-width:640px) { .lb-prev { left:32px; } .lb-next { right:32px; } }
.lb-counter { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--fg-3); letter-spacing:.1em; }

/* ─── Testimonials ──────────────────────────────────────────────────────── */
#opiniones { padding: 96px 0; background: var(--bg); }
@media(min-width:640px) { #opiniones { padding: 128px 0; } }
.reviews-grid { display:grid; gap:16px; }
@media(min-width:640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1024px) { .reviews-grid { grid-template-columns: repeat(3,1fr); } }
.review-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; }
.review-stars { display:flex; gap:3px; margin-bottom:16px; color:var(--accent); font-size:13px; }
.review-text { color:var(--fg-2); font-size:.8125rem; line-height:1.65; flex:1; margin-bottom:20px; }
.review-divider { height:1px; background:var(--sep); margin-bottom:20px; }
.review-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review-author { display:flex; align-items:center; gap:10px; min-width:0; }
.review-photo { width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--bg-tertiary); flex-shrink:0; }
.review-initial { width:34px; height:34px; border-radius:50%; background:var(--accent-muted); color:var(--accent); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.review-author-info { display:flex; flex-direction:column; min-width:0; }
.review-name { font-size:.8125rem; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-time { font-size:11px; color:var(--fg-3); letter-spacing:.02em; }
.review-google-icon { width:18px; height:18px; flex-shrink:0; opacity:.8; }
/* skeleton */
@keyframes reviewShimmer { from{background-position:-400px 0} to{background-position:400px 0} }
.review-skeleton { height:160px; border-radius:var(--radius-lg); background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-tertiary) 50%,var(--bg-card) 75%); background-size:800px 100%; animation:reviewShimmer 1.4s infinite linear; }
/* reviews-dynamic es transparente para el grid — sus hijos se integran como celdas directas */
#reviews-dynamic { display: contents; }
/* rating aggregate bar */
.reviews-rating-bar { margin-bottom:28px; }
.reviews-rating-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg); font-size:.875rem; transition:opacity .2s; }
.reviews-rating-link:hover { opacity:.75; }
.reviews-stars-emoji { color:var(--accent); font-size:.95rem; letter-spacing:1px; }
.reviews-rating-score { font-size:1.05rem; font-weight:700; }
.reviews-rating-sep { color:var(--fg-3); }
.reviews-rating-count { color:var(--fg-3); }

/* ─── Booking ───────────────────────────────────────────────────────────── */
#reservas { padding: 96px 0; background: var(--bg-elevated); }
@media(min-width:640px) { #reservas { padding: 128px 0; } }

#reservas .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#reservas .section-heading {
  width: 100%;
}

.booking-wrap {
  width: min(100%, 760px);
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: 28px;
  overflow: hidden;
}

/* Progress */
.booking-progress { display:flex; border-bottom: 1px solid var(--sep); }
.booking-step-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg-3); border-bottom:2px solid transparent;
  transition: color .3s, border-color .3s;
}
.booking-step-tab.done { color: var(--accent); border-bottom-color: var(--accent); }
.booking-step-tab.active { color: var(--fg); border-bottom-color: var(--fg-2); }
.step-num { width:26px; height:26px; border-radius:50%; background: var(--bg); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.booking-step-tab.done .step-num { background: var(--accent); color:var(--bg); }
.booking-step-tab.active .step-num { background: var(--bg-elevated); color:var(--fg); }

/* Panels */
.booking-panel { display:none; padding:32px 24px; text-align:center; }
@media(min-width:640px) { .booking-panel { padding:40px 48px; } }
.booking-panel.active { display:block; }
.booking-panel-title { font-size:1.1rem; font-weight:600; margin-bottom:24px; color:var(--fg); }

.booking-panel .svc-grid,
.booking-panel .cal-header,
.booking-panel .cal-grid,
.booking-panel .slots-wrap,
.booking-panel .confirm-summary,
.booking-panel .step-nav,
.booking-panel #booking-err {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.booking-panel .form-field,
.booking-panel > p[style*="Necesitamos al menos"] {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.booking-panel .form-label,
.booking-panel .form-input,
.booking-panel .confirm-row {
  text-align: left;
}

.booking-panel .slots-label {
  text-align: center;
}

/* Service selector */
.svc-grid { display:grid; gap:10px; }
@media(min-width:480px) { .svc-grid { grid-template-columns:1fr 1fr; } }
.svc-btn {
  padding:16px; border-radius:var(--radius); text-align:left;
  background: rgba(255,255,255,.04); border:1px solid var(--sep);
  transition: all .2s; cursor:pointer;
}
.svc-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(242,232,218,.15); }
.svc-btn.selected { background: rgba(196,154,108,.1); border-color: rgba(196,154,108,.4); }
.svc-btn-name { font-size:.875rem; font-weight:600; color:var(--fg); margin-bottom:4px; }
.svc-btn-meta { font-size:.75rem; color: var(--fg-2); }
.svc-btn-price { font-size:1.1rem; font-weight:700; color:var(--accent); margin-top:8px; }

/* Calendar */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-month { font-size:.9375rem; font-weight:600; color:var(--fg); }
.cal-nav { width:32px; height:32px; border-radius:50%; background: rgba(255,255,255,.06); color:var(--fg-2); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.cal-nav:hover { background: rgba(255,255,255,.12); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-day-name { font-size:10px; color:var(--fg-3); padding:6px 0; letter-spacing:.06em; text-transform:uppercase; }
.cal-day {
  aspect-ratio:1; border-radius:10px;
  font-size:.8125rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .2s;
  background: none; color: var(--fg-2); border:none;
}
.cal-day:hover:not(:disabled):not(.empty) { background: rgba(255,255,255,.08); color:var(--fg); }
.cal-day.today { color:var(--accent); }
.cal-day.selected { background: var(--accent) !important; color:var(--bg) !important; font-weight:700; }
.cal-day:disabled, .cal-day.empty { color:var(--fg-3); cursor:default; }
.cal-day.past { opacity:.3; pointer-events:none; }

/* Slots */
.slots-wrap { margin-top:24px; }
.slots-label { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:12px; }
.slots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
.slot {
  padding:8px 4px; border-radius:10px; text-align:center;
  font-size:.8125rem; font-weight:500; border:none; cursor:pointer;
  background: rgba(255,255,255,.08); color: #F2EEE6 !important;
  transition: all .2s;
}
.slot:hover:not(:disabled) { background: rgba(255,255,255,.16); color: #F2EEE6 !important; }
.slot.selected   { background: var(--accent); color: #0E0B09 !important; font-weight:700; }
/* Taken by a booking – strikethrough */
.slot--taken  { text-decoration: line-through; opacity: .4 !important; cursor: not-allowed; }
/* Blocked by admin (lunch, etc.) – lock icon, different bg */
.slot--blocked {
  background: rgba(255,80,80,.07) !important;
  color: rgba(242,238,230,.4) !important;
  cursor: not-allowed;
  position: relative;
}
.slot--blocked::after {
  content: "";
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,100,100,.5);
  position: absolute; top: 5px; right: 5px;
}
.slot:disabled:not(.slot--taken):not(.slot--blocked) { color: rgba(242,238,230,.35) !important; text-decoration:line-through; opacity:.45; cursor:not-allowed; }
.slots-loading { color:var(--f); font-size:.875rem; }

/* Form */
.form-field { margin-bottom:20px; }
.form-label { display:block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.form-input {
  width:100%; padding:12px 16px;
  background: rgba(255,255,255,.05); border:1px solid var(--sep);
  border-radius:12px; color:var(--fg); font-size:.9375rem;
  outline:none; transition: border-color .2s;
}
.form-input:focus { border-color: rgba(196,154,108,.5); }
.form-input::placeholder { color:var(--fg-3); }

/* Confirm step */
.confirm-summary {
  background: rgba(255,255,255,.04); border:1px solid var(--sep);
  border-radius:var(--radius); padding:20px; margin-bottom:24px;
}
.confirm-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.confirm-row + .confirm-row { border-top:1px solid var(--sep); }
.confirm-key { font-size:.75rem; color:var(--fg-3); }
.confirm-val { font-size:.875rem; color:var(--fg); font-weight:500; }

/* Booking success */
.booking-success { padding:48px 24px; text-align:center; }
@media(min-width:640px) { .booking-success { padding:64px 48px; } }
.success-icon { font-size:3rem; margin-bottom:16px; }
.success-id { display:inline-block; padding:6px 16px; border-radius:99px; background:rgba(196,154,108,.1); color:var(--accent); font-size:.8125rem; letter-spacing:.06em; margin-bottom:24px; }

/* Nav between steps */
.step-nav { display:flex; justify-content:space-between; margin-top:32px; }
.step-nav.right { justify-content:flex-end; }

/* Spinner */
.spinner { width:24px; height:24px; border:2px solid rgba(255,255,255,.1); border-top-color:var(--accent); border-radius:50%; animation: spinArc .7s linear infinite; }

/* ─── Location ──────────────────────────────────────────────────────────── */
#ubicacion { padding: 96px 0; background: var(--bg); }
@media(min-width:640px) { #ubicacion { padding: 128px 0; } }
.location-grid { display:grid; gap:48px; }
@media(min-width:768px) { .location-grid { grid-template-columns: 1fr 1fr; align-items:start; } }
.location-info h3 { font-size:1.1rem; font-weight:600; color:var(--fg); margin-bottom:24px; }
.info-item { display:flex; gap:14px; margin-bottom:20px; }
.info-icon { color:var(--accent); font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.info-label { font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:4px; }
.info-val { font-size:.9375rem; color:var(--fg); }
.info-val small { display:block; color: var(--fg-2); font-size:.8125rem; margin-top:2px; }
.map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 360px;
  background: var(--bg-card);
  border: 1px solid var(--sep);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,11,9,.08) 0%, rgba(14,11,9,.18) 100%);
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: sepia(.08) saturate(.9) brightness(.9) contrast(1.05);
}

/* ─── Click-to-load map placeholder ────────────────────────────────────── */
.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-card);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(196,154,108,.06) 0%, transparent 70%);
  transition: background .2s;
}
.map-placeholder:hover { background-color: var(--bg-tertiary); }
.map-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--fg-2);
  padding: 24px;
}
.map-placeholder-inner svg { color: var(--accent); margin-bottom: 4px; }
.map-placeholder-inner p { font-size: 1rem; font-weight: 600; color: var(--fg); margin: 0; }
.map-placeholder-inner small { font-size: .8125rem; color: var(--fg-3); }
.map-load-btn {
  margin-top: 8px;
  padding: 10px 22px;
  background: var(--accent);
  color: #0E0B09;
  border: none;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.map-load-btn:hover { opacity: .85; }

/* ─── Footer ────────────────────────────────────────────────────────────── */
#footer { background: var(--bg-elevated); border-top:1px solid var(--sep); padding:64px 0 40px; --fg-3: #aaaaaa; --fg-2: #c4b8ac; }
.footer-grid { display:grid; gap:48px; margin-bottom:48px; }
@media(min-width:768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap:32px; } }
.footer-brand p { color:var(--fg-3); font-size:.8125rem; line-height:1.65; max-width:280px; margin-top:12px; }
.footer-col h4 { font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col li a { font-size:.875rem; color:var(--fg-2); transition:color .2s; }
.footer-col li a:hover { color:var(--fg); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:28px; border-top:1px solid var(--sep); }
.footer-copy { font-size:.75rem; color:var(--fg-3); }
.footer-legal { display:flex; gap:20px; align-items:center; }
.footer-legal a { font-size:.75rem; color:var(--fg-3); transition:color .2s; }
.footer-legal a:hover { color:var(--fg-2); }
.footer-cookie-btn { background:none; border:none; padding:0; cursor:pointer; font-size:.75rem; color:var(--fg-3); font-family:inherit; transition:color .2s; }
.footer-cookie-btn:hover { color:var(--fg-2); }

/* ─── Cookie / RGPD Banner ──────────────────────────────────────────────── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8900;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(14, 12, 9, 0.97);
  border-top: 1px solid var(--sep);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
#cookie-banner.visible { transform: translateY(0); }
.cookie-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cookie-text-block { flex: 1; min-width: 220px; }
.cookie-title { font-size: .875rem; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.cookie-desc  { font-size: .775rem; color: var(--fg-3); line-height: 1.55; }
.cookie-desc a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn {
  padding: 10px 20px; border-radius: 10px; font-size: .8rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--sep);
  font-family: inherit; white-space: nowrap; transition: all .15s;
}
.cookie-btn--reject { background: transparent; color: var(--fg-2); }
.cookie-btn--reject:hover { background: rgba(255,255,255,.09); color: var(--fg); }
.cookie-btn--accept { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cookie-btn--accept:hover { opacity: .85; }
@media(max-width:639px) {
  .cookie-inner { padding: 16px 18px; gap: 16px; }
  .cookie-actions { width: 100%; justify-content: stretch; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ─── WhatsApp FAB ──────────────────────────────────────────────────────── */
#wa-fab {
  position: fixed; bottom:24px; right:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background: #25D366;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s, box-shadow .2s;
  animation: wa-fab-in .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: .8s;
}
@keyframes wa-fab-in {
  from { opacity:0; transform:scale(0) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
#wa-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(37,211,102,.55); }
#wa-fab:hover .wa-fab-tooltip { pointer-events:none; }
#wa-fab svg { width:27px; height:27px; fill:#fff; flex-shrink:0; }

.wa-fab-tooltip {
  position:absolute; right:64px;
  background:rgba(0,0,0,.75); color:#fff;
  font-size:.75rem; font-weight:500; letter-spacing:.02em;
  padding:5px 10px; border-radius:6px; white-space:nowrap;
  opacity:1; transform:translateX(0);
  transition: opacity .18s, transform .18s;
  pointer-events:none;
}

/* ─── Admin ─────────────────────────────────────────────────────────────── */
.admin-login-wrap {
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.admin-login-box {
  width:100%; max-width:400px;
  background: var(--bg-card); border-radius:28px; padding:40px 32px;
  border:1px solid var(--sep);
}
.admin-login-box h1 { font-size:1.4rem; font-weight:700; margin-bottom:8px; }
.admin-login-box p { color:var(--fg-2); font-size:.875rem; margin-bottom:32px; }
.admin-error { color:#ff6b6b; font-size:.8125rem; margin-top:16px; display:none; }
.admin-error.visible { display:block; }

.admin-layout { display:flex; min-height:100svh; }
.admin-sidebar {
  width:240px; flex-shrink:0;
  background: var(--bg-elevated); border-right:1px solid var(--sep);
  padding:24px 16px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100svh; overflow-y:auto;
}
.admin-sidebar .logo { margin-bottom:32px; padding:0 8px; }
.sidebar-logout { margin-top:auto; padding:10px 12px; border-radius:10px; font-size:.875rem; color:var(--fg-3); width:100%; text-align:left; transition:background .2s; }
.sidebar-logout:hover { background:rgba(255,255,255,.05); color:var(--fg); }

.admin-main { flex:1; padding:32px 24px; overflow-x:hidden; }
@media(min-width:1024px) { .admin-main { padding:40px; } }
.admin-main h1 { font-size:1.5rem; font-weight:700; margin-bottom:8px; }
.admin-subtitle { color:var(--fg-2); font-size:.875rem; margin-bottom:32px; }

/* Filters */
.admin-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.filter-btn { padding:6px 16px; border-radius:99px; font-size:.8125rem; border:1px solid var(--sep); background: rgba(255,255,255,.04); color:var(--fg-2); transition:all .2s; }
.filter-btn:hover { background:rgba(255,255,255,.08); color:var(--fg); }
.filter-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; }

/* Booking cards */
.bookings-list { display:grid; gap:12px; }
.booking-card {
  background: var(--bg-card); border-radius:var(--radius-lg); padding:20px 24px;
  border:1px solid var(--sep);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  transition: border-color .2s;
}
.booking-card:hover { border-color: rgba(242,232,218,.14); }
.bc-date { font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:2px; }
.bc-time { font-size:1.2rem; font-weight:700; color:var(--fg); }
.bc-service { font-size:.8125rem; color:var(--fg-2); }
.bc-client { font-size:.875rem; font-weight:600; color:var(--fg); }
.bc-phone { font-size:.8125rem; color:var(--fg-3); }
.bc-price { font-size:.875rem; color:var(--accent); font-weight:600; }
.bc-info { flex:1; min-width:180px; }
.bc-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bc-badge {
  padding:4px 12px; border-radius:99px; font-size:11px; font-weight:600;
}
.bc-badge.pending   { background:rgba(255,196,0,.12);  color:#ffc400; }
.bc-badge.confirmed { background:rgba(52,199,89,.12);  color:#34c759; }
.bc-badge.cancelled { background:rgba(255,69,58,.1);   color:#ff453a; }

.bc-btn {
  padding:6px 14px; border-radius:10px; font-size:12px; font-weight:600;
  transition: all .2s;
}
.bc-btn.confirm { background:rgba(52,199,89,.1); color:#34c759; }
.bc-btn.confirm:hover { background:rgba(52,199,89,.2); }
.bc-btn.cancel  { background:rgba(255,69,58,.08); color:#ff453a; }
.bc-btn.cancel:hover { background:rgba(255,69,58,.16); }
.bc-btn.wa      { background:rgba(37,211,102,.1); color:#25D366; }
.bc-btn.wa:hover { background:rgba(37,211,102,.2); }
.bc-btn.wa.disabled { background:rgba(255,255,255,.04); color:var(--fg-3); pointer-events:none; opacity:.5; }

.admin-empty { text-align:center; padding:80px 0; color:var(--fg-3); }

/* Responsive sidebar on mobile */
@media(max-width:767px) {
  .admin-layout { flex-direction:column; }
  .admin-sidebar { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; padding:16px; gap:16px; }
  .admin-sidebar .logo { margin-bottom:0; }
  .sidebar-logout { margin-top:0; width:auto; }
}

/* ─── Reserve cards (secció #reservas) ──────────────────────────────────── */
.reserve-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .reserve-cards { grid-template-columns: 1fr; }
}

.reserve-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--sep);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  transition: transform .2s, border-color .2s, background .2s;
  cursor: pointer;
}
.reserve-card:hover {
  transform: translateY(-3px);
  background: #221a12;
}

.reserve-card--web   { border-left: 4px solid var(--accent); }
.reserve-card--wa    { border-left: 4px solid #25D366; }
.reserve-card--web:hover  { border-color: rgba(196,154,108,.5); border-left-color: var(--accent); }
.reserve-card--wa:hover   { border-color: rgba(37,211,102,.35); border-left-color: #25D366; }

.reserve-card-icon {
  font-size: 2.25rem;
  line-height: 1;
}

.reserve-card-body { flex: 1; }

.reserve-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.reserve-card--web  .reserve-card-title { color: var(--accent); }
.reserve-card--wa   .reserve-card-title { color: #25D366; }

.reserve-card-sub {
  font-size: .875rem;
  color: var(--fg-3);
  line-height: 1.5;
  margin-bottom: 16px;
}

.reserve-card-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reserve-card-perks li {
  font-size: .8125rem;
  color: var(--fg-2);
  line-height: 1.4;
}

.reserve-card-cta {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  text-align: center;
  transition: opacity .15s;
  margin-top: auto;
}
.reserve-card--web  .reserve-card-cta {
  background: var(--accent);
  color: #0E0B09;
}
.reserve-card--wa   .reserve-card-cta {
  background: rgba(37,211,102,.12);
  color: #25D366;
  border: 1px solid rgba(37,211,102,.25);
}
.reserve-card:hover .reserve-card-cta { opacity: .85; }