@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap');

:root {
  --radius: 1rem;
  --background: oklch(98.5% .012 85);
  --cream: oklch(97% .018 80);
  --foreground: oklch(22% .035 45);
  --card: oklch(99.5% .008 85);
  --primary: oklch(28% .045 40);
  --primary-foreground: oklch(98.5% .012 85);
  --muted: oklch(94% .022 75);
  --muted-foreground: oklch(48% .035 50);
  --border: oklch(89% .025 75);
  --terracotta: oklch(62% .13 42);
  --olive: oklch(55% .07 120);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.font-serif { font-family: 'Fraunces', Georgia, serif; }

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) { .container { padding: 0 2rem; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  padding: 0 1.75rem;
  height: 3rem;
  border: none;
  transition: all .35s ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.btn-primary:hover { background: color-mix(in oklch, var(--primary) 90%, white); }
.btn-outline { background: color-mix(in oklch, var(--card) 60%, transparent); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-outline:hover { background: var(--card); }
.btn-terracotta { background: var(--terracotta); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.btn-terracotta:hover { background: color-mix(in oklch, var(--terracotta) 90%, black); }
.btn-ghost-light { background: transparent; border: 1px solid color-mix(in oklch, var(--primary-foreground) 30%, transparent); color: var(--primary-foreground); }
.btn-ghost-light:hover { background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .75rem; border-radius: 999px; }

/* Header */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: color-mix(in oklch, var(--background) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}
.header-inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 600; }
.brand-icon { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); }
.brand-icon svg { width: 1rem; height: 1rem; }
.brand-sub { font-size: .7rem; font-family: -apple-system, sans-serif; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); margin-left: .25rem; }
nav.main-nav { display: none; align-items: center; gap: 2rem; font-size: .875rem; color: var(--muted-foreground); }
nav.main-nav a:hover { color: var(--foreground); }
@media (min-width: 768px) { nav.main-nav { display: flex; } .brand-sub { display: inline; } }
@media (max-width: 767px) { .brand-sub { display: none; } }

/* Hero */
#top { position: relative; padding: 7rem 0 4rem; overflow: hidden; }
@media (min-width: 640px) { #top { padding: 9rem 0 6rem; } }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at top, var(--cream), var(--background)); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } .hero-col-text { grid-column: span 6; } .hero-col-img { grid-column: span 6; } }

.badge-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  padding: .375rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.badge-pill svg { width: .875rem; height: .875rem; color: var(--terracotta); }

h1 { margin: 1.5rem 0 0; font-size: 2.75rem; line-height: 1.05; color: var(--primary); font-weight: 500; }
@media (min-width: 640px) { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { h1 { font-size: 4.5rem; } }
.italic-terracotta { font-style: italic; color: var(--terracotta); }
.lede { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); max-width: 36rem; line-height: 1.6; }
.btn-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.trust-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; font-size: .875rem; }
.stars { display: inline-flex; align-items: center; gap: .15rem; }
.stars svg { width: 1rem; height: 1rem; fill: var(--terracotta); color: var(--terracotta); }
.stars span { margin-left: .5rem; color: var(--muted-foreground); }
.open-dot { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted-foreground); }
.pulse { height: .5rem; width: .5rem; border-radius: 999px; background: var(--olive); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

.hero-img-wrap { position: relative; }
.hero-img-frame { position: relative; border-radius: 2rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.hero-img-frame img { width: 100%; height: 26rem; object-fit: cover; }
@media (min-width: 640px) { .hero-img-frame img { height: 35rem; } }
.hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklch, var(--primary) 30%, transparent), transparent); }
.float-card { position: absolute; bottom: -1.5rem; left: -1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,.06); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; max-width: 16rem; }
@media (min-width: 640px) { .float-card { left: 1.5rem; } }
.float-card-icon { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 999px; background: color-mix(in oklch, var(--terracotta) 10%, transparent); color: var(--terracotta); flex-shrink: 0; }
.float-card-icon svg { width: 1.25rem; height: 1.25rem; }
.float-card p.title { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--primary); line-height: 1.2; margin: 0; }
.float-card p.sub { font-size: .75rem; color: var(--muted-foreground); margin: .15rem 0 0; }
.float-badge { display: none; position: absolute; top: -1rem; right: -.5rem; background: var(--primary); color: var(--primary-foreground); border-radius: 1rem; padding: .75rem 1rem; align-items: center; gap: .5rem; box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.float-badge svg { width: 1rem; height: 1rem; }
@media (min-width: 768px) { .float-badge { display: flex; } }

/* Marquee */
.marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--card) 40%, transparent); padding: 1.5rem 0; }
.marquee-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 3rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); }
.marquee-inner .dot { color: var(--terracotta); }

/* Section headings */
section { padding: 5rem 0; }
@media (min-width: 640px) { section { padding: 7rem 0; } }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 3rem; }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .22em; color: var(--terracotta); }
h2 { font-family: 'Fraunces', serif; margin: .75rem 0 0; font-size: 2.25rem; color: var(--primary); font-weight: 500; line-height: 1.1; }
@media (min-width: 640px) { h2 { font-size: 3rem; } }
.section-head p { margin-top: 1rem; max-width: 36rem; color: var(--muted-foreground); }

/* Tabs */
.tabs-bar { display: flex; justify-content: center; }
.tabs-list { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); padding: .375rem; }
.tab-btn { border: none; background: none; cursor: pointer; font-size: .875rem; font-weight: 500; border-radius: 999px; padding: .625rem 1.25rem; color: var(--muted-foreground); transition: all .35s ease-out; }
.tab-btn.active { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tab-panel { display: none; margin-top: 3rem; }
.tab-panel.active { display: block; }
.menu-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.menu-card { border: 1px solid var(--border); border-radius: 1.5rem; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; transition: all .35s ease-out; }
.menu-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.menu-card-img { position: relative; aspect-ratio: 5/4; overflow: hidden; }
.menu-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
.menu-card:hover .menu-card-img img { transform: scale(1.08); }
.menu-card-tag { position: absolute; top: 1rem; left: 1rem; border-radius: 999px; background: color-mix(in oklch, var(--background) 95%, transparent); backdrop-filter: blur(4px); padding: .25rem .75rem; font-size: .75rem; font-weight: 500; color: var(--terracotta); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.menu-card-noimg { display: grid; place-items: center; aspect-ratio: 5/4; background: var(--cream); }
.menu-card-noimg svg { width: 2.5rem; height: 2.5rem; color: var(--terracotta); opacity: .6; }
.menu-card-body { padding: 1.5rem; }
.menu-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.menu-card-top h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; color: var(--primary); margin: 0; font-weight: 500; line-height: 1.2; }
.menu-card-price { font-family: 'Fraunces', serif; font-size: 1.125rem; color: var(--terracotta); white-space: nowrap; }
.menu-card-body p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; }
.menu-note { margin-top: 2.5rem; text-align: center; font-size: .875rem; color: var(--muted-foreground); }
.menu-note .block { display: block; margin-top: .25rem; font-style: italic; }

/* Esencia */
#esencia { background: color-mix(in oklch, var(--cream) 60%, var(--background)); }
.esencia-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .esencia-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.esencia-img-wrap { position: relative; }
.esencia-img-wrap .frame { border-radius: 2rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.esencia-img-wrap img { width: 100%; height: 26rem; object-fit: cover; }
@media (min-width: 640px) { .esencia-img-wrap img { height: 35rem; } }
.esencia-tag { position: absolute; bottom: -1.5rem; right: -.5rem; background: var(--primary); color: var(--primary-foreground); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 4px 10px rgba(0,0,0,.06); max-width: 16rem; }
@media (min-width: 640px) { .esencia-tag { right: 1.5rem; } }
.esencia-tag p.title { font-family: 'Fraunces', serif; font-size: 1.125rem; margin: 0; line-height: 1.2; }
.esencia-tag p.sub { font-size: .75rem; color: color-mix(in oklch, var(--primary-foreground) 70%, transparent); margin: .25rem 0 0; }
.esencia-text p.lede2 { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.65; }
.esencia-list { margin-top: 2rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.esencia-list li { display: flex; align-items: flex-start; gap: 1rem; }
.esencia-list .ico { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; flex-shrink: 0; border-radius: 1rem; background: var(--card); border: 1px solid var(--border); color: var(--terracotta); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: all .35s; }
.esencia-list .ico svg { width: 1.25rem; height: 1.25rem; }
.esencia-list li:hover .ico { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.06); }
.esencia-list p.title { font-family: 'Fraunces', serif; font-size: 1.125rem; color: var(--primary); margin: 0; }
.esencia-list p.sub { font-size: .875rem; color: var(--muted-foreground); margin: .15rem 0 0; }

/* Opiniones */
.review-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.review-card { border: 1px solid var(--border); border-radius: 1.5rem; background: var(--card); padding: 1.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: all .35s ease-out; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.review-stars { display: flex; align-items: center; gap: .15rem; margin-bottom: 1rem; }
.review-stars svg { width: 1rem; height: 1rem; fill: var(--terracotta); color: var(--terracotta); }
.review-card blockquote { font-family: 'Fraunces', serif; font-size: 1.125rem; color: var(--primary); margin: 0; line-height: 1.4; }
.review-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklch, var(--border) 70%, transparent); }
.review-foot p.name { font-weight: 500; margin: 0; }
.review-foot p.src { font-size: .75rem; color: var(--muted-foreground); margin: .15rem 0 0; }

/* Visítanos */
#visitanos { background: var(--primary); color: var(--primary-foreground); }
.visitanos-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .visitanos-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
#visitanos .eyebrow-light { font-size: .75rem; text-transform: uppercase; letter-spacing: .22em; color: color-mix(in oklch, var(--cream) 70%, transparent); }
#visitanos h2 { color: var(--primary-foreground); }
#visitanos > .container > .visitanos-grid > div:first-child > p { margin-top: 1.25rem; max-width: 28rem; color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
.open-pill { margin-top: 2.5rem; display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px; background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); border: 1px solid color-mix(in oklch, var(--primary-foreground) 15%, transparent); padding: .625rem 1.25rem; font-size: .875rem; }
.visit-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .visit-cards { grid-template-columns: 1fr 1fr; } }
.visit-card { border-radius: 1.5rem; background: color-mix(in oklch, var(--primary-foreground) 5%, transparent); border: 1px solid color-mix(in oklch, var(--primary-foreground) 10%, transparent); padding: 1.5rem; transition: all .35s ease-out; }
.visit-card:hover { background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); transform: translateY(-4px); }
.visit-card .ico { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 1rem; background: color-mix(in oklch, var(--terracotta) 20%, transparent); color: var(--terracotta); }
.visit-card .ico svg { width: 1.25rem; height: 1.25rem; }
.visit-card p.title { font-family: 'Fraunces', serif; font-size: 1.25rem; margin: 1rem 0 0; }
.visit-card .meta { margin-top: .5rem; font-size: .875rem; color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
.visit-card .meta p { margin: .1rem 0; }

footer.site-foot { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklch, var(--primary-foreground) 15%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; color: color-mix(in oklch, var(--primary-foreground) 60%, transparent); }
@media (min-width: 640px) { footer.site-foot { flex-direction: row; } }
footer.site-foot .italic { font-family: 'Fraunces', serif; font-style: italic; }