* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}

body {
  margin: 0;
  background: #f6f3ee;
  color: #2e251f;
  font-family: "DM Sans", Arial, sans-serif;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* iconos */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.12em;
  flex: none
}

:focus-visible {
  outline: 2px solid #8a6b4f;
  outline-offset: 3px
}

/* ---------- HEADER ---------- */
.header {
  height: 86px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background: #f0eee8;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46, 37, 31, .08)
}

.brand img {
  width: 150px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply
}

.desktop-nav {
  display: flex;
  gap: 34px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.8px;
  font-weight: 600
}

.desktop-nav a,
.header-cta {
  transition: opacity .2s
}

.desktop-nav a:hover,
.header-cta:hover {
  opacity: .55
}

.header-cta {
  padding: 14px 20px;
  border: 1px solid #2e251f;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  padding: 8px;
  cursor: pointer
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: #2e251f;
  margin: 7px 0;
  transition: transform .3s ease
}

/* el menú móvil solo existe bajo 900px (ver media query). Sin esta regla el <nav>
   queda como display:block en desktop y el menú aparece duplicado en la cabecera */
.mobile-nav {
  display: none
}

/* ---------- HERO ---------- */
.hero {
  height: 100vh;
  min-height: 760px;
  position: relative;
  color: #fff;
  overflow: hidden
}

.hero-stage {
  --drag: 0px;
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none
}

.hero-stage.is-dragging {
  cursor: grabbing
}

/* mientras se arrastra, el slide sigue el dedo/cursor sin transición */
.hero-stage.is-dragging .hero-slide {
  transition: opacity .35s ease
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .9s ease, transform 1.4s ease;
  pointer-events: none;
  will-change: opacity
}

.hero-slide.is-active {
  opacity: 1;
  transform: translate3d(var(--drag, 0px), 0, 0) scale(1);
  pointer-events: auto
}

.hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none
}

.hero-slide:nth-child(2) img {
  object-position: center 58%
}

.hero-slide:nth-child(3) img {
  object-position: center 46%
}

.hero-slide:nth-child(4) img {
  object-position: center 52%
}

/* oscurecido para que el texto blanco siempre se lea sobre fotos claras */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 15, 11, .82) 0%, rgba(20, 15, 11, .58) 42%, rgba(20, 15, 11, .18) 72%, rgba(20, 15, 11, .34) 100%),
    linear-gradient(0deg, rgba(20, 15, 11, .55), rgba(20, 15, 11, 0) 55%)
}

.hero-copy {
  position: absolute;
  left: 9vw;
  top: 50%;
  transform: translateY(-42%);
  max-width: 780px
}

.hero .eyebrow {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35)
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0
}

.hero-title {
  font-family: Fraunces, serif;
  font-size: clamp(58px, 8vw, 118px);
  line-height: .91;
  letter-spacing: -3px;
  word-spacing: .12em;
  margin: 20px 0 25px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35)
}

.hero-title em {
  font-style: italic
}

.hero-text {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .93);
  margin: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4)
}

/* la copia entra animada cada vez que su slide se activa */
.hero-slide.is-active .hero-copy > * {
  animation: heroIn .8s cubic-bezier(.2, .7, .3, 1) both
}

.hero-slide.is-active .hero-copy > *:nth-child(2) {
  animation-delay: .08s
}

.hero-slide.is-active .hero-copy > *:nth-child(3) {
  animation-delay: .18s
}

.hero-slide.is-active .hero-copy > *:nth-child(4) {
  animation-delay: .26s
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 800;
  transition: background .25s ease, color .25s ease, opacity .25s ease
}

.btn .ico {
  width: 16px;
  height: 16px
}

.btn-light {
  background: #f6f3ee;
  color: #2e251f
}

.btn-light:hover {
  background: #fff
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .85);
  color: #fff
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .16)
}

.btn-dark {
  background: #2e251f;
  color: #fff
}

.btn-dark:hover {
  background: #4a3a2e
}

.btn-outline {
  border: 1px solid rgba(46, 37, 31, .32);
  color: #2e251f
}

.btn-outline:hover {
  background: rgba(46, 37, 31, .06)
}

.hero-controls {
  position: absolute;
  right: 6vw;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2
}

.hero-arrow,
.review-arrow {
  border: 1px solid rgba(255, 255, 255, .65);
  background: transparent;
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, .18)
}

.hero-dots {
  display: flex;
  gap: 7px
}

.dot {
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, .38);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .3s ease
}

.dot.is-active {
  background: #fff
}

.hero-scroll {
  position: absolute;
  left: 9vw;
  bottom: 38px;
  font-size: 10px;
  letter-spacing: 2px;
  z-index: 2
}

.hero-scroll span {
  font-size: 16px;
  margin-left: 8px
}

/* ---------- MARQUEE ---------- */
.marquee {
  background: #2e251f;
  color: #f8f1e7;
  overflow: hidden;
  padding: 14px 0
}

.marquee-track {
  display: flex;
  gap: 24px;
  align-items: center;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-family: Fraunces, serif;
  font-size: 18px;
  letter-spacing: 1px
}

.marquee-track b {
  font-family: DM Sans
}

/* ---------- SECCIONES ---------- */
.section {
  padding: 115px 9vw
}

.section-label {
  font-size: 10px;
  letter-spacing: 2.8px;
  font-weight: 700;
  color: #6f6259;
  margin-bottom: 40px
}

.intro-grid,
.section-head,
.gallery-head,
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 8vw
}

.serif-kicker {
  font-family: Fraunces, serif;
  font-size: 23px;
  font-style: italic;
  margin: 0 0 15px;
  color: #7b695b
}

.intro h2,
.section-head h2,
.gallery-head h2,
.visit h2 {
  font-family: Fraunces, serif;
  font-size: clamp(52px, 7vw, 98px);
  line-height: .9;
  letter-spacing: -3px;
  margin: 0
}

.intro h2 span,
.section-head h2 span,
.gallery-head h2 span,
.visit h2 span {
  font-style: italic
}

.copy-col {
  max-width: 560px;
  padding-top: 10px
}

.lead {
  font-size: 25px;
  line-height: 1.35;
  margin: 0 0 22px
}

.copy-col p:not(.lead) {
  line-height: 1.8;
  color: #6d625a
}

.small-note {
  font-size: 13px
}

.feature-photo {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  background: #ebe5dc
}

.feature-image {
  min-height: 620px;
  overflow: hidden
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.feature-copy {
  padding: 100px 9vw 100px 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.feature-copy h2 {
  font-family: Fraunces, serif;
  font-size: clamp(55px, 6vw, 90px);
  line-height: .9;
  margin: 0 0 28px
}

.feature-copy h2 span {
  font-style: italic
}

.feature-copy>p:last-child {
  max-width: 500px;
  line-height: 1.8;
  color: #6d625a
}

.products {
  background: #2e251f;
  color: #fbf6ef
}

.products .section-label {
  color: #a99c90
}

.section-head {
  align-items: end;
  margin-bottom: 55px
}

.section-head>p {
  max-width: 360px;
  line-height: 1.8;
  color: #cbbfb5
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.product-card {
  min-height: 320px;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #3a3029;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .4s ease, box-shadow .4s ease
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18)
}

.product-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .14), transparent 38%)
}

.product-card--coffee {
  background: #4a392f
}

.product-card--cake {
  background: #40352e
}

.product-icon {
  position: absolute;
  left: 28px;
  top: 26px;
  font-size: 33px
}

.product-card h3 {
  position: relative;
  font-family: Fraunces, serif;
  font-size: 36px;
  line-height: .95;
  margin: 0 0 18px
}

.product-card p {
  position: relative;
  color: #d7cdc2;
  line-height: 1.6;
  max-width: 360px
}

.product-card a {
  position: relative;
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700
}

/* ---------- PARALLAX ---------- */
.parallax {
  height: 78vh;
  min-height: 580px;
  position: relative;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center
}

.parallax-media {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.parallax-image {
  position: absolute;
  inset: -14% 0;
  background-image: url("../assets/images/bg-parallax.jpg");
  background-size: cover;
  background-position: center 45%;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.14));
  will-change: transform
}

.parallax-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(28, 21, 16, .68), rgba(28, 21, 16, .12) 75%),
    rgba(31, 25, 20, .18)
}

.parallax-copy {
  position: relative;
  z-index: 1;
  margin-left: 9vw;
  max-width: 720px;
  transform: translate3d(0, var(--cy, 0px), 0);
  opacity: var(--co, 1)
}

.parallax-copy .eyebrow {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4)
}

.parallax h2 {
  font-family: Fraunces, serif;
  font-size: clamp(58px, 8vw, 120px);
  line-height: .92;
  letter-spacing: -3px;
  margin: 18px 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35)
}

.parallax h2 em {
  font-style: italic
}

.parallax-copy>p:last-child {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4)
}

/* ---------- GALERÍA ---------- */
.gallery-head {
  align-items: end;
  margin-bottom: 50px
}

.gallery-head p {
  max-width: 320px;
  line-height: 1.7;
  color: #76695f
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-template-rows: 310px 310px;
  gap: 10px
}

.gallery-item {
  margin: 0;
  overflow: hidden;
  background: #ded5cb
}

.gallery-item--large {
  grid-row: span 2
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease
}

.gallery-item:hover img {
  transform: scale(1.05)
}

/* ---------- RESEÑAS ---------- */
.reviews {
  background: #efe8df
}

.reviews-source {
  font-size: 13px;
  line-height: 1.8;
  color: #6f6259
}

/* .section-head>p fija un gris claro pensado para la sección oscura de productos;
   sobre el fondo crema de reseñas quedaba ilegible (1,6:1). Aquí manda el gris oscuro. */
.reviews .section-head>p {
  color: #6f6259
}

.reviews-source strong {
  color: #2e251f
}

.reviews-source a {
  border-bottom: 1px solid rgba(46, 37, 31, .35)
}

.review-slider {
  position: relative;
  min-height: 350px;
  max-width: 900px
}

.review {
  display: none;
  max-width: 820px
}

.review.is-active {
  display: block;
  animation: fade .45s ease
}

.review-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px
}

.review-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(46, 37, 31, .12);
  flex: none
}

.review-who {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.review-g {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(46, 37, 31, .14);
  font-size: 10px;
  font-weight: 700;
  color: #2e251f;
  flex: none
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #6f6259
}

.review-meta .stars {
  margin-left: 2px
}

.stars {
  letter-spacing: 3px;
  color: #2e251f
}

.review p {
  font-family: Fraunces, serif;
  font-size: clamp(23px, 2.9vw, 36px);
  line-height: 1.18;
  margin: 0 0 24px
}

.review.is-long p {
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.3
}

.review-who strong {
  font-size: 14px;
  letter-spacing: .3px;
  font-weight: 700
}

.review-date {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  color: #6f6259
}

.review-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px
}

.review-arrow {
  border-color: rgba(46, 37, 31, .35);
  color: #2e251f
}

.review-arrow:hover {
  background: rgba(46, 37, 31, .08)
}

.review-count {
  font-size: 10px;
  letter-spacing: 2px;
  color: #84766c
}

/* ---------- VISÍTANOS ---------- */
.visit {
  background: #fff
}

.visit-grid {
  align-items: start
}

.visit h2 {
  margin-bottom: 25px
}

.visit .lead {
  max-width: 500px;
  color: #6d625a
}

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px
}

.visit-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.mini-card {
  padding: 26px;
  background: #f4eee7;
  border: 1px solid rgba(46, 37, 31, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .3s ease, box-shadow .3s ease
}

.mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(46, 37, 31, .08)
}

.mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(46, 37, 31, .1);
  color: #4a3a2e;
  margin-bottom: 10px
}

.mini-icon .ico {
  width: 19px;
  height: 19px
}

.mini-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #897d74;
  font-weight: 700
}

.mini-card a,
.mini-strong {
  font-family: Fraunces, serif;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.2;
  margin: 0
}

.mini-card a:hover {
  border-bottom: 1px solid rgba(46, 37, 31, .35)
}

.mini-card p {
  font-size: 12px;
  line-height: 1.5;
  color: #6f6259;
  margin: 0
}

/* ---------- FOOTER ---------- */
.footer {
  background: #2e251f;
  color: #eee4da;
  padding: 70px 9vw 35px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 50px
}

.footer-brand img {
  width: 125px;
  height: 90px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: invert(1);
  opacity: .92
}

.footer-brand p {
  color: #a99c90;
  font-size: 12px;
  margin: 6px 0 0
}

.footer-address {
  margin-top: 16px !important;
  line-height: 1.8
}

.footer-title {
  font-size: 10px;
  letter-spacing: 2.4px;
  color: #8d8177;
  font-weight: 700;
  margin-bottom: 4px
}

.footer-nav,
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 12px
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px
}

.footer-social .ico {
  width: 15px;
  height: 15px;
  color: #d9cec4
}

.footer-nav a,
.footer-social a {
  opacity: .8
}

.footer-nav a:hover,
.footer-social a:hover {
  opacity: 1
}

.footer-credit {
  grid-column: 1/-1;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #9d9187;
  font-size: 10px
}

.footer-credit p {
  margin: 0
}

.footer-credit a {
  color: #eee4da
}

/* ---------- ANIMACIONES ---------- */
@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

@keyframes fade {
  from {
    opacity: .2;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px) {

  .desktop-nav,
  .header-cta {
    display: none
  }

  .header {
    height: 72px;
    padding: 0 6vw
  }

  .menu-toggle {
    display: block
  }

  .brand img {
    width: 150px;
    height: auto
  }

  .hero {
    min-height: 720px
  }

  .hero-copy {
    left: 7vw;
    right: 7vw;
    top: 54%;
    transform: translateY(-38%);
    max-width: none
  }

  .hero-title {
    font-size: clamp(46px, 11.5vw, 78px);
    letter-spacing: -2px
  }

  .hero-text {
    font-size: 16px;
    max-width: 420px
  }

  .hero-controls {
    right: 7vw;
    bottom: 27px
  }

  .hero-scroll {
    left: 7vw;
    bottom: 30px
  }

  .section {
    padding: 82px 7vw
  }

  .intro-grid,
  .section-head,
  .gallery-head,
  .visit-grid,
  .feature-photo {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .feature-image {
    min-height: 480px
  }

  .feature-copy {
    padding: 75px 7vw
  }

  .product-grid {
    grid-template-columns: 1fr
  }

  .product-card {
    min-height: 260px
  }

  .parallax {
    height: 70vh
  }

  .parallax-copy {
    margin: 0 7vw
  }

  .parallax h2 {
    font-size: clamp(50px, 12vw, 82px)
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 260px
  }

  .gallery-item--large {
    grid-row: auto;
    grid-column: 1/-1
  }

  .visit-note {
    grid-template-columns: 1fr 1fr
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    gap: 35px
  }

  .footer-credit {
    flex-direction: column
  }

  .footer-brand {
    grid-column: 1/-1
  }

  .mobile-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #f0eee8;
    border-bottom: 1px solid rgba(46, 37, 31, .1);
    padding: 18px 7vw 24px;
    display: none;
    flex-direction: column;
    gap: 17px;
    box-shadow: 0 15px 30px rgba(46, 37, 31, .07)
  }

  .menu-open .mobile-nav {
    display: flex
  }

  .mobile-nav a {
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 6px 0
  }

  .menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg)
  }

  .menu-open .menu-toggle span:last-child {
    transform: translateY(-5px) rotate(-45deg)
  }
}

@media(max-width:560px) {
  .hero {
    height: 100svh;
    min-height: 690px
  }

  .hero-copy {
    top: 55%
  }

  .hero-title {
    font-size: 44px;
    line-height: .95
  }

  /* la reseña más larga ocupa ~400px en móvil: fijamos el alto para que la sección no salte al cambiar */
  .review-slider {
    min-height: 412px
  }

  .review.is-long p {
    font-size: 19px;
    line-height: 1.32
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .btn {
    min-width: 164px
  }

  .hero-controls {
    bottom: 18px
  }

  .hero-scroll {
    display: none
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 230px 230px 230px 230px
  }

  .gallery-item--large {
    grid-column: auto
  }

  .visit-note {
    grid-template-columns: 1fr
  }

  .footer {
    grid-template-columns: 1fr
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }

  .marquee-track {
    animation: none
  }

  .hero-slide,
  .hero-slide.is-active,
  .hero-slide.is-active .hero-copy>*,
  .review.is-active {
    animation: none !important;
    transition: none !important
  }

  .hero-slide {
    transform: none
  }

  .gallery-item img,
  .mini-card,
  .product-card {
    transition: none
  }
}


/* ================== 5 estrellas destacadas (reseñas Google) ================== */
.stars-lg {
  color: #f2a93b;
  font-size: 22px;
  letter-spacing: 4px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(46, 37, 31, .10)
}
.reviews-source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px
}
.reviews-source .rating {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: Fraunces, serif;
  color: #2e251f
}
.reviews-source .rating strong {
  font-size: 36px;
  line-height: 1
}
.reviews-source .rating-max {
  font-size: 14px;
  color: #6f6259
}
.reviews-source .rating-line {
  font-size: 13.5px;
  line-height: 1.7;
  color: #6f6259
}
.reviews-source .rating-line .hi {
  color: #2e251f
}
.mini-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap
}
.mini-rating .stars-lg {
  font-size: 17px;
  letter-spacing: 2px
}
.review-meta .stars {
  color: #f2a93b;
  font-size: 13px;
  letter-spacing: 2px
}

/* ================== Marca de agua + aviso de DEMO ==================
   Va en TODAS las demos mostradas antes de cerrar. Quitar los 3 bloques
   (.demo-wm, .demo-badge, .footer-demo) al publicar el sitio del cliente. */
.demo-wm {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200'%3E%3Ctext x='0' y='120' transform='rotate(-22 0 120)' font-family='Helvetica,Arial,sans-serif' font-size='24' letter-spacing='2' fill='%232e251f' fill-opacity='0.07'%3EDEMO %C2%B7 ARTIFIK%3C/text%3E%3C/svg%3E");
  background-repeat: repeat
}
.demo-badge {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 252px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(35, 28, 23, .9);
  color: #f6f3ee;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  backdrop-filter: blur(6px)
}
.demo-badge strong {
  font-size: 10px;
  letter-spacing: .14em;
  color: #f2a93b
}
.demo-badge a {
  color: #f6f3ee;
  border-bottom: 1px solid rgba(246, 243, 238, .45)
}
.footer-demo {
  max-width: 62ch;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(246, 243, 238, .62)
}
@media (max-width: 600px) {
  .demo-badge {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: 196px;
    padding: 7px 10px;
    font-size: 10px
  }
  .demo-badge strong {
    font-size: 9px
  }
  .stars-lg {
    font-size: 19px;
    letter-spacing: 3px
  }
  .reviews-source .rating strong {
    font-size: 30px
  }
}

/* ================== Anclas ==================
   `html { scroll-padding-top: 100px }` ya deja las secciones bajo el header fijo.
   La marquesina va pegada justo arriba de #visitanos: al saltar al ancla
   sumamos su alto (52px) para que la banda quede visible y no escondida. */
#visitanos {
  scroll-margin-top: 52px
}

/* --- Reserva por WhatsApp --- */
.reserva .section-head { align-items: end }
.reserva-card {
  background: #fff; border: 1px solid rgba(46, 37, 31, .16);
  border-radius: 22px; padding: 30px; margin-top: 46px;
  box-shadow: 0 22px 48px rgba(46, 37, 31, .07)
}
.reserva-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.reserva-card label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(46, 37, 31, .68)
}
.reserva-card input, .reserva-card select {
  font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none;
  color: #2e251f; background: #fff; width: 100%; padding: 12px 14px;
  border: 1px solid rgba(46, 37, 31, .22); border-radius: 12px
}
.reserva-card input:focus, .reserva-card select:focus { outline: 2px solid #2e251f; outline-offset: 1px }
.reserva-nota { margin-top: 16px }
.reserva-btn { margin-top: 22px; cursor: pointer; font: inherit;
  background: #2e251f; color: #f6f1e9; border: 1px solid #2e251f }
.reserva-btn:hover { background: #443733; border-color: #443733 }
.reserva-hint { margin: 12px 0 0; font-size: 12.5px; color: rgba(46, 37, 31, .6) }
@media (max-width: 860px) { .reserva-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .reserva-grid { grid-template-columns: 1fr } .reserva-card { padding: 20px; margin-top: 30px } }