/* =====================================================================
   LITTLE MOKA · Hoja de estilos
   Paleta tomada del logo y del manual de marca.
   ===================================================================== */

:root{
  /* Marca */
  --brown:      #6B4423;
  --brown-dk:   #3E2A1B;
  --brown-lt:   #7A5230;
  --cream:      #FDF7EC;
  --cream-2:    #FBEBD6;
  --beige:      #F2E4CB;
  --beige-dk:   #E3D5B8;
  --teal:       #3F8E9F;
  --teal-dk:    #2F6E7C;
  --amber:      #F0A23A;
  --coral:      #D2604C;
  --red:        #D84554;
  --purple:     #7B5EA7;
  --olive:      #8D982F;
  --wa:         #25D366;
  --wa-dk:      #128C7E;

  --ink:        #3E2A1B;
  --ink-soft:   #6B5546;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-xl: 44px;

  --shadow-sm: 0 4px 14px rgba(62,42,27,.08);
  --shadow-md: 0 12px 30px rgba(62,42,27,.12);
  --shadow-lg: 0 24px 60px rgba(62,42,27,.18);

  --wrap: 1160px;
  --nav-h: 74px;

  --f-head: 'Fredoka', 'Arial Rounded MT Bold', 'Avenir Next', system-ui, sans-serif;
  --f-body: 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a{ color: inherit; }

::selection{ background: var(--amber); color: #fff; }

.aviso-top{
  background: var(--brown-dk); color: var(--cream);
  position: relative; z-index: 120;
}
.aviso-top[hidden]{ display:none !important; }
.aviso-top__inner{
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; padding:.7rem 0; text-align:center;
}
.aviso-top__ico{ font-size:1.25rem; line-height:1; flex:none; }
.aviso-top__texto{ margin:0; font-size:.95rem; line-height:1.4; }
.aviso-top__texto b{
  font-family: var(--f-head); color: var(--amber);
  margin-right:.4rem;
}
@media (max-width: 620px){
  .aviso-top__texto b{ display:block; margin:0 0 .15rem; }
  .aviso-top__texto{ font-size:.88rem; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--brown); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.4rem, 800px); }

/* ============================ TIPOGRAFÍA ========================== */
h1,h2,h3,h4{ font-family: var(--f-head); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }

.eyebrow{
  font-family: var(--f-head); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; color: var(--teal); margin:0 0 .6rem;
}
.eyebrow--light{ color: var(--cream-2); }

.h2{ font-size: clamp(1.9rem, 4.2vw, 3rem); color: var(--brown-dk); max-width: 18ch; }
.h2--light{ color:#fff; }
.h3{ font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--brown-dk); }

.lead{ font-size: clamp(1rem, 1.6vw, 1.17rem); color: var(--ink-soft); max-width: 62ch; margin:0 0 2.4rem; }
.lead--light{ color: rgba(255,255,255,.9); }

/* ============================== BOTONES =========================== */
.btn{
  --bg: var(--brown); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-head); font-weight:600; font-size:1.02rem;
  padding: .95rem 1.6rem; border:none; border-radius: 999px;
  text-decoration:none; cursor:pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.14), var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,.14), var(--shadow-md); filter:saturate(1.05); }
.btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.14); }
.btn--sm{ padding:.65rem 1.15rem; font-size:.94rem; box-shadow: 0 4px 0 rgba(0,0,0,.13); }
.btn--block{ width:100%; }
.btn--wa{ --bg: var(--wa); --fg:#08361d; }
.btn--brown{ --bg: var(--brown); }
.btn--cream{ --bg: var(--cream-2); --fg: var(--brown-dk); }
.btn--ghost{
  --bg: transparent; --fg: var(--brown-dk);
  box-shadow: inset 0 0 0 2.5px var(--brown);
}
.btn--ghost:hover{ box-shadow: inset 0 0 0 2.5px var(--brown), var(--shadow-sm); }
.btn--outline{
  --bg:#fff; --fg: var(--brown-dk);
  box-shadow: inset 0 0 0 2px var(--beige-dk), 0 3px 0 rgba(62,42,27,.08);
}
.btn .ico{ width:1.25em; height:1.25em; fill: currentColor; flex:none; }

.linkish{
  background:none; border:none; padding:0; margin-top:.9rem;
  font-family: var(--f-body); font-weight:700; font-size:.92rem;
  color: var(--teal); cursor:pointer; text-decoration: underline; text-underline-offset:3px;
}

/* ================================ NAV ============================= */
.nav{
  position: sticky; top:0; z-index:100;
  background: rgba(253,247,236,.86);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.is-stuck{ border-bottom-color: var(--beige-dk); box-shadow: 0 6px 20px rgba(62,42,27,.07); }

.nav__inner{ display:flex; align-items:center; gap:1rem; min-height: var(--nav-h); }

.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.nav__owl{ width:40px; height:auto; transition: transform .3s ease; }
.nav__brand:hover .nav__owl{ transform: rotate(-8deg) scale(1.06); }
.nav__name{ font-family: var(--f-head); font-weight:700; font-size:1.35rem; color: var(--brown); line-height:1; }
.nav__name span{ color: var(--amber); }

.nav__links{ display:flex; align-items:center; gap:.35rem; }
.nav__links > a:not(.btn){
  font-family: var(--f-head); font-weight:500; font-size:1rem;
  color: var(--brown-dk); text-decoration:none;
  padding:.5rem .8rem; border-radius:999px;
  transition: background .18s ease, color .18s ease;
}
.nav__links > a:not(.btn):hover{ background: var(--cream-2); color: var(--brown); }
.nav__cta{ margin-left:.5rem; }

.nav__toggle{
  display:none; width:46px; height:46px; border:none; border-radius:14px;
  background: var(--cream-2); cursor:pointer; padding:12px 11px; flex-direction:column; justify-content:space-between;
}
.nav__toggle span{ display:block; height:3px; border-radius:2px; background: var(--brown); transition: transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 940px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background: var(--cream); border-bottom:2px solid var(--beige-dk);
    padding: .8rem 1.2rem 1.4rem;
    box-shadow: var(--shadow-md);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links > a:not(.btn){ padding:.8rem .9rem; font-size:1.08rem; }
  .nav__cta{ margin:.5rem 0 0; }
}

/* ================================ HERO ============================ */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(172deg, var(--cream-2) 0%, #FDF4E6 45%, var(--cream-2) 100%);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 5.5rem;
}
.hero__sky{ position:absolute; inset:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter: blur(2px); opacity:.4; }
.blob--1{ width:320px; height:320px; background: var(--amber); top:-90px; left:-80px; opacity:.22; }
.blob--2{ width:260px; height:260px; background: var(--teal); bottom:40px; right:-90px; opacity:.16; }
.blob--3{ width:180px; height:180px; background: var(--coral); top:38%; left:44%; opacity:.10; }
.dot{ position:absolute; border-radius:50%; animation: float 7s ease-in-out infinite; }
.dot--a{ width:16px; height:16px; background: var(--amber); top:16%; left:8%; }
.dot--b{ width:11px; height:11px; background: var(--teal); top:30%; right:12%; animation-delay:-1.5s; }
.dot--c{ width:20px; height:20px; background: var(--purple); bottom:22%; left:16%; animation-delay:-3s; opacity:.7; }
.dot--d{ width:13px; height:13px; background: var(--red); top:60%; right:24%; animation-delay:-4.5s; }
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }

.hero__inner{
  position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:.4rem; margin:0 0 1rem;
  background:#fff; border-radius:999px; padding:.35rem .95rem;
  font-family: var(--f-head); font-weight:600; font-size:.86rem; color: var(--brown);
  box-shadow: var(--shadow-sm);
}
.hero__logo{ width: min(100%, 430px); margin-bottom: 1.4rem; }
.hero__title{ font-size: clamp(1.75rem, 3.6vw, 2.6rem); color: var(--brown-dk); max-width: 17ch; }
.hero__title em{ font-style:normal; color: var(--coral); }
.hero__sub{ font-size: clamp(1rem,1.5vw,1.14rem); color: var(--ink-soft); max-width: 46ch; margin:0 0 1.8rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__note{
  display:flex; align-items:center; gap:.55rem; margin:1.6rem 0 0;
  font-weight:700; font-size:.95rem; color: var(--ink-soft);
}
.dotlight{
  width:11px; height:11px; border-radius:50%; background: var(--ink-soft); flex:none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.is-open-now .dotlight{ background: var(--olive); box-shadow: 0 0 0 4px rgba(141,152,47,.22); animation: pulse 2s infinite; }
.is-closed-now .dotlight{ background: var(--red); box-shadow: 0 0 0 4px rgba(216,69,84,.18); }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(141,152,47,.22) } 50%{ box-shadow:0 0 0 9px rgba(141,152,47,0) } }

.hero__media{ position:relative; }
.photo{
  border-radius: var(--r-xl); overflow:hidden;
  border: 8px solid #fff; box-shadow: var(--shadow-lg);
  background: var(--beige);
}
.photo--tilt{ transform: rotate(2deg); }
.photo img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }

.sticker{
  position:absolute; font-family: var(--f-head); font-weight:600; font-size:.9rem; line-height:1.2;
  background:#fff; color: var(--brown-dk); padding:.7rem 1rem; border-radius: 18px;
  box-shadow: var(--shadow-md); text-align:center;
}
.sticker--1{ left:-14px; bottom:32px; transform: rotate(-6deg); border-bottom:4px solid var(--teal); }
.sticker--2{ right:-10px; top:24px; transform: rotate(5deg); border-bottom:4px solid var(--amber); }

.wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:80px; }
.wave path{ fill: var(--cream); }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__media{ margin-top:1.5rem; max-width:560px; }
  .hero__logo{ width: min(100%, 340px); }
  .sticker--1{ left:-6px; }
  .sticker--2{ right:-4px; }
}

/* ============================= SECCIONES ========================== */
.section{ padding: clamp(3.5rem, 7vw, 6rem) 0; position:relative; }
.section--cream{ background: var(--cream); }
.section--beige{ background: var(--cream-2); }
.section--teal{ background: var(--teal); color:#fff; }
.section--teal::before{
  content:''; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, #fff 2px, transparent 0);
  background-size: 26px 26px;
}
.section--teal .wrap{ position:relative; }

/* ============================== VALORES =========================== */
.values{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.value{
  background:#fff; border-radius: var(--r-lg); padding: 2rem 1.4rem 1.7rem;
  text-align:center; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.value:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value__ring{
  display:grid; place-items:center; width:78px; height:78px; margin:0 auto 1rem;
  border-radius:50%; background: var(--c);
}
.value__ring svg{ width:44px; height:44px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; color:#fff; }
.value h3{ font-size:1.12rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c); margin-bottom:.4rem; }
.value p{ margin:0; font-size:.96rem; color: var(--ink-soft); }

.strip{
  margin-top:2.5rem; display:grid; grid-template-columns: repeat(4,1fr); gap:1rem;
  background: var(--beige); border-radius: var(--r-lg); padding:1.5rem;
}
.strip__item{ text-align:center; }
.strip__item b{ display:block; font-family: var(--f-head); font-size:1.35rem; color: var(--brown); }
.strip__item span{ font-size:.9rem; color: var(--ink-soft); }

@media (max-width: 860px){
  .values{ grid-template-columns: repeat(2,1fr); }
  .strip{ grid-template-columns: repeat(2,1fr); gap:1.3rem; }
}
@media (max-width: 460px){
  .values{ grid-template-columns:1fr; }
}

/* ============================== BANNERS =========================== */
.banner[hidden]{ display:none !important; }
.banner{
  border-radius: var(--r-md); padding: .95rem 1.2rem; margin: 0 0 1.8rem;
  font-size:.95rem; line-height:1.5;
}
.banner--warn{ background: #FFF3DC; border-left: 6px solid var(--amber); color: #6b4c15; }
.banner--info{ background: #E6F1F3; border-left: 6px solid var(--teal); color: #23555e; }
.banner code{ background: rgba(0,0,0,.06); padding:.1rem .35rem; border-radius:6px; font-size:.9em; }

/* =============================== MENÚ ============================= */
.menu__tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.menu__tab{
  font-family: var(--f-head); font-weight:500; font-size:1rem;
  background:#fff; color: var(--brown-dk); border:2px solid transparent;
  padding:.6rem 1.15rem; border-radius:999px; cursor:pointer;
  box-shadow: var(--shadow-sm); transition: all .18s ease;
}
.menu__tab:hover{ transform: translateY(-2px); }
.menu__tab[aria-selected="true"]{ background: var(--brown); color:#fff; }

.menu__panel{ display:none; }
.menu__panel.is-active{ display:block; animation: fadeUp .35s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }

.menu__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 2.2rem; }
.mitem{
  background:#fff; border-radius: var(--r-md); padding:1.1rem 1.3rem;
  display:grid; grid-template-columns: 1fr auto; gap:.3rem 1rem; align-items:start;
  box-shadow: var(--shadow-sm);
}
.mitem__name{ font-family: var(--f-head); font-weight:600; font-size:1.08rem; color: var(--brown-dk); margin:0; }
.mitem__price{ font-family: var(--f-head); font-weight:600; color: var(--teal); white-space:nowrap; }
.mitem__desc{ grid-column:1 / -1; margin:0; font-size:.93rem; color: var(--ink-soft); }
.tag{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.15rem .5rem; border-radius:999px; margin-left:.4rem; vertical-align:middle;
  background: var(--amber); color:#5a3a06;
}
.tag--favorito{ background: var(--red); color:#fff; }
.tag--nuevo{ background: var(--olive); color:#fff; }
.tag--saludable{ background: var(--teal); color:#fff; }

.desa{
  display:grid; gap:1.6rem; align-items:center;
  background: linear-gradient(135deg, #FFF3DC 0%, #FDEFD4 100%);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 4vw, 2.6rem);
  margin:0 0 2.2rem; box-shadow: var(--shadow-sm);
  border:3px solid var(--amber);
}
@media (min-width: 860px){
  .desa--con-foto{ grid-template-columns: 1fr minmax(0, 380px); gap:2.4rem; }
}
.desa__eyebrow{
  display:inline-block; margin:0 0 .5rem; padding:.3rem .9rem;
  background: var(--coral); color:#fff; border-radius:999px;
  font-family: var(--f-head); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.desa__h{
  font-family: var(--f-head); font-weight:700;
  font-size: clamp(2.2rem, 7vw, 3.4rem); line-height:1;
  color: var(--brown-dk); margin:0 0 .5rem;
}
.desa__grande{
  font-family: var(--f-head); font-weight:700;
  font-size: clamp(1.25rem, 3.4vw, 1.8rem); line-height:1.15;
  color: var(--coral); text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 .8rem;
}
.desa__hora{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border-radius:999px; padding:.5rem 1.1rem;
  font-family: var(--f-head); font-weight:600; font-size:1.05rem;
  color: var(--brown-dk); margin:0 0 1rem; box-shadow: var(--shadow-sm);
}
.desa__p{ margin:0 0 .7rem; color:#6b4c15; max-width:52ch; }
.desa__nota{ margin:0 0 1.2rem; font-size:.9rem; color: var(--ink-soft); font-style:italic; }
.desa__foto{ margin:0; }
.desa__foto img{
  width:100%; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.desa-cartas{
  display:grid; gap:1.1rem; margin:0 0 2.2rem;
}
@media (min-width: 820px){
  .desa-cartas{ grid-template-columns: repeat(3, 1fr); align-items:start; }
  .dadic{ grid-column: 1 / -1; }
}
.dcarta{
  background:#fff; border-radius: var(--r-lg); padding:1.3rem 1.4rem;
  box-shadow: var(--shadow-sm); border-top:6px solid var(--teal);
}
.dcarta--teal{   border-top-color: var(--teal); }
.dcarta--olive{  border-top-color: var(--olive); }
.dcarta--purple{ border-top-color: var(--purple); }
.dcarta__t{
  font-family: var(--f-head); font-weight:600; font-size:1.15rem;
  color: var(--brown-dk); margin:0 0 .2rem;
}
.dcarta__precio{
  font-family: var(--f-head); font-weight:700; font-size:1.8rem;
  line-height:1; margin:0 0 .9rem; color: var(--brown);
}
.dcarta--teal   .dcarta__precio{ color: var(--teal-dk); }
.dcarta--olive  .dcarta__precio{ color: #6f7a24; }
.dcarta--purple .dcarta__precio{ color: var(--purple); }
.dcarta__lista{ list-style:none; margin:0; padding:0; }
.dcarta__lista li{
  padding:.45rem 0 .45rem 1.3rem; position:relative;
  border-bottom:1px dashed var(--beige-dk); font-size:.93rem;
}
.dcarta__lista li:last-child{ border-bottom:0; }
.dcarta__lista li::before{
  content:''; position:absolute; left:0; top:.85em;
  width:8px; height:8px; border-radius:50%; background: var(--amber);
}
.dcarta__lista b{ display:block; color: var(--brown-dk); font-weight:700; }
.dcarta__lista span{ color: var(--ink-soft); font-size:.9em; }

.dadic{
  background: var(--cream-2); border-radius: var(--r-md);
  padding:1rem 1.3rem;
}
.dadic__t{
  margin:0 0 .5rem; font-family: var(--f-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:.8rem;
  color: var(--brown);
}
.dadic__fila{
  display:flex; justify-content:space-between; gap:1rem; margin:.25rem 0;
  font-size:.95rem;
}
.dadic__fila b{ font-family: var(--f-head); color: var(--brown-dk); }

.cumple-foto{
  margin:2rem 0 1.2rem; max-width:340px;
}
.cumple-foto img{
  width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.cumple-foto figcaption{
  margin-top:.6rem; font-size:.88rem; color: rgba(255,255,255,.85);
}

.hours li.tiene-nota{ flex-wrap:wrap; }
.hours__nota{
  flex-basis:100%; margin-top:.15rem;
  font-size:.82rem; color: var(--teal-dk);
}
.aviso-horarios{
  background:#FFF3DC; border-left:5px solid var(--amber);
  border-radius: var(--r-sm); padding:.7rem .9rem; margin:0 0 .9rem;
  font-size:.9rem; color:#6b4c15;
}
.aviso-horarios[hidden]{ display:none !important; }
.aviso-horarios b{ display:block; font-family: var(--f-head); color: var(--brown-dk); }

.hours__tag{
  display:inline-block; margin-left:.5rem; padding:.1rem .55rem;
  border-radius:999px; background: var(--amber); color:#fff;
  font-style:normal; font-family: var(--f-head); font-weight:600;
  font-size:.72rem; letter-spacing:.04em; vertical-align:middle;
}

.menu__catnota{
  margin:0 0 1.2rem; padding:.55rem .9rem;
  background: rgba(63,142,159,.10); border-radius: var(--r-sm);
  color: var(--teal-dk); font-size:.92rem; font-weight:600;
  display:inline-block;
}

.playbox{
  margin-top: 1.8rem;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background: var(--teal); color:#fff;
  border-radius: var(--r-lg); padding: 1.3rem 1.6rem;
  box-shadow: var(--shadow-md);
}
.playbox__ico{ font-size:2.2rem; line-height:1; flex:none; }
.playbox > div{ flex:1 1 240px; }
.playbox__title{ font-size:1.35rem; color:#fff; margin:0 0 .15rem; }
.playbox__inc{ margin:0; color: rgba(255,255,255,.88); font-size:.95rem; }
.playbox__price{ margin:0; text-align:right; flex:none; }
.playbox__price b{
  display:block; font-family: var(--f-head); font-weight:700;
  font-size:2rem; line-height:1;
}
.playbox__price span{ font-size:.9rem; color: rgba(255,255,255,.85); }
@media (max-width:560px){
  .playbox__price{ text-align:left; }
}

.menu__confoto{ display:grid; gap:1.4rem; align-items:start; }
.menu__foto{ margin:0; }
.menu__foto img{
  width:100%; border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px){
  .menu__confoto{ grid-template-columns: minmax(0,300px) 1fr; gap:2rem; }
}

.menu__iva{
  margin:.9rem 0 0; text-align:center;
  font-size:.88rem; color: var(--ink-soft);
}

.menu__foot{
  margin-top:2.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  background:#fff; border-radius: var(--r-lg); padding:1.3rem 1.6rem; box-shadow: var(--shadow-sm);
}
.menu__foot p{ margin:0; color: var(--ink-soft); flex:1 1 260px; }

@media (max-width: 760px){ .menu__list{ grid-template-columns:1fr; } }

/* ============================== GALERÍA =========================== */
.gallery{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap:1rem;
}
/* Flex en vez de grid: con 10 fotos la última fila queda incompleta, y así
   se centra sola en vez de dejar un hueco a la derecha. */
.gallery.gallery--fotos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
}
.gallery.gallery--fotos .gcard{
  flex: 0 1 calc((100% - 2rem) / 3);
  aspect-ratio: 4 / 3;
}
@media (max-width: 760px){
  .gallery.gallery--fotos .gcard{ flex-basis: 100%; }
}

.gcard{
  position:relative; padding:0; border:none; cursor:pointer; overflow:hidden;
  border-radius: var(--r-lg); background: var(--beige);
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.gcard img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gcard:hover img{ transform: scale(1.06); }
.gcard--big{ grid-column: span 2; grid-row: span 2; }
.gcard--wide{ grid-column: span 4; }
.gcard__cap{
  position:absolute; left:.8rem; bottom:.8rem;
  background: rgba(255,255,255,.94); color: var(--brown-dk);
  font-family: var(--f-head); font-weight:600; font-size:.86rem;
  padding:.35rem .8rem; border-radius:999px;
}
@media (max-width: 760px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 140px; }
  .gcard--big{ grid-column: span 2; grid-row: span 2; }
  .gcard--wide{ grid-column: span 2; }
}

/* ============================ CUMPLEAÑOS ========================== */
.packs{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.pack{
  background:#fff; color: var(--ink); border-radius: var(--r-lg);
  padding:1.9rem 1.6rem; display:flex; flex-direction:column;
  box-shadow: var(--shadow-md);
}
.pack--star{ transform: translateY(-14px); border:4px solid var(--amber); }
.pack__tag{
  align-self:flex-start; background: var(--cream-2); color: var(--brown);
  font-family: var(--f-head); font-weight:600; font-size:.78rem;
  padding:.25rem .75rem; border-radius:999px; margin-bottom:.8rem;
}
.pack h3{ color: var(--brown-dk); font-size:1.4rem; margin-bottom:.35rem; }
.pack > p{ color: var(--ink-soft); font-size:.96rem; margin:0 0 1rem; }
.pack ul{ list-style:none; padding:0; margin:0 0 1.4rem; }
.pack li{ position:relative; padding-left:1.55rem; margin-bottom:.45rem; font-size:.95rem; }
.pack li::before{
  content:''; position:absolute; left:0; top:.45em; width:1rem; height:.55rem;
  border-left:3px solid var(--olive); border-bottom:3px solid var(--olive);
  transform: rotate(-45deg); border-radius:2px;
}
.pack .btn{ margin-top:auto; align-self:flex-start; }
.packs__note{ margin:2rem 0 0; color: rgba(255,255,255,.85); font-size:.95rem; }
@media (max-width: 900px){
  .packs{ grid-template-columns:1fr; }
  .pack--star{ transform:none; }
}

/* ============================= RESERVAS =========================== */
.reservas{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,4vw,3.5rem); align-items:start; }
.ticks{ list-style:none; padding:0; margin:0 0 1.8rem; }
.ticks li{ position:relative; padding-left:1.9rem; margin-bottom:.6rem; color: var(--ink-soft); }
.ticks li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:1.3rem; height:1.3rem; border-radius:50%; background: var(--olive); color:#fff;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
}
.reservas__alt{
  background: var(--beige); border-radius: var(--r-md); padding:1rem 1.2rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.95rem;
}
.link-wa{ font-weight:800; color: var(--wa-dk); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

.card{ background:#fff; border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); box-shadow: var(--shadow-md); }
.card--soft{ box-shadow: var(--shadow-sm); }
.card__title{ font-size:1.2rem; color: var(--brown-dk); margin-bottom:.7rem; }

.form .field{ margin-bottom:1.05rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form label{
  display:block; font-family:var(--f-head); font-weight:500; font-size:.94rem;
  color: var(--brown-dk); margin-bottom:.35rem;
}
.opt{ color: var(--ink-soft); font-weight:400; font-size:.85em; }
.form input, .form select, .form textarea{
  width:100%; font-family: var(--f-body); font-size:1rem; color: var(--ink);
  background: var(--cream); border:2px solid var(--beige-dk); border-radius: var(--r-sm);
  padding:.75rem .9rem; transition: border-color .18s ease, background .18s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color: var(--teal); background:#fff;
}
.form textarea{ resize:vertical; }
.form__err{
  background:#FDE7E9; color:#8d1f2b; border-radius: var(--r-sm);
  padding:.7rem .9rem; margin:0 0 1rem; font-size:.92rem; font-weight:600;
}
.form__mini{ margin:.9rem 0 0; text-align:center; font-size:.83rem; color: var(--ink-soft); }
.field.has-error input, .field.has-error select{ border-color: var(--red); }

@media (max-width: 900px){ .reservas{ grid-template-columns:1fr; } }

/* ============================ UBICACIÓN =========================== */
.ubi{ display:grid; grid-template-columns: .85fr 1.15fr; gap:1.6rem; align-items:start; }
.ubi__info{ display:grid; gap:1.2rem; }
.addr{ margin:0 0 .2rem; font-size:1.02rem; font-weight:700; color: var(--brown-dk); }
.addr--muted{ font-weight:400; color: var(--ink-soft); font-size:.96rem; }
.mapbtns{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }

.mapbox{
  border-radius: var(--r-lg); overflow:hidden; border:6px solid #fff;
  box-shadow: var(--shadow-md); background: var(--beige-dk);
}
.mapbox iframe{ display:block; width:100%; height: 440px; border:0; }

.mapstatic{
  border-radius: var(--r-lg); border:6px solid #fff; background: var(--beige);
  box-shadow: var(--shadow-md); min-height: 440px;
  display:grid; place-content:center; justify-items:center; text-align:center; gap:.35rem; padding:2rem;
  background-image: radial-gradient(circle at 1px 1px, rgba(107,68,35,.16) 2px, transparent 0);
  background-size: 24px 24px;
}
.mapstatic__pin{ font-size:2.6rem; line-height:1; margin-bottom:.4rem; }
.mapstatic__dir{ margin:0; font-family: var(--f-head); font-weight:600; font-size:1.15rem; color: var(--brown-dk); }
.mapstatic__sub{ margin:0 0 1.1rem; color: var(--ink-soft); }
.mapstatic__nota{ margin:1.1rem 0 0; font-size:.85rem; color: var(--ink-soft); max-width: 34ch; }

.opinion-cta{ text-align:center; }
.opinion-cta .h2, .opinion-cta .lead{ margin-inline:auto; }
.opinion-cta__estrellas{
  display:block; color: var(--amber); font-size:1.6rem;
  letter-spacing:.18em; margin-bottom:.6rem;
}
.opinion-cta__btns{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
}

.rutas{
  display:grid; gap:1.4rem; margin-top:1.6rem;
}
@media (min-width: 760px){ .rutas{ grid-template-columns: 1fr 1fr; gap:2rem; } }
.ruta{
  background:#fff; border-radius: var(--r-md); padding:1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.ruta__t{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; color: var(--brown-dk); margin:0 0 .7rem;
}
.ruta__n{
  display:inline-grid; place-content:center; width:1.7em; height:1.7em;
  border-radius:50%; color:#fff; font-size:.85em; flex:none;
}
.ruta__n--1{ background: var(--olive); }
.ruta__n--2{ background: var(--teal); }
.ruta ol{ margin:0; padding-left:1.25rem; }
.ruta li{ margin-bottom:.35rem; }
.ruta__nota{
  margin:.9rem 0 0; padding:.6rem .85rem; font-size:.9rem;
  background: rgba(240,162,58,.14); border-radius: var(--r-sm); color:#6b4c15;
}

.hours{ list-style:none; margin:0; padding:0; }
.hours__turno{ display:block; }
.hours__turno + .hours__turno{ margin-top:.1rem; }
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.42rem 0; border-bottom:1px dashed var(--beige-dk); font-size:.97rem;
}
.hours li:last-child{ border-bottom:none; }
.hours li.is-today{ font-weight:800; color: var(--brown); }
.hours li.is-today span:first-child::after{ content:' · hoy'; color: var(--teal); font-weight:700; }
.hours__now{ margin:.9rem 0 0; font-size:.92rem; font-weight:700; color: var(--ink-soft); }

.croquis{ margin-top: 2.6rem; }
.croquis__head p{ color: var(--ink-soft); margin-top:-.2rem; }
.croquis__img{
  position:relative; display:block; width:100%; padding:0; border:6px solid #fff; cursor:pointer;
  border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-md); background:#fff;
  transition: transform .2s ease;
}
.croquis__img:hover{ transform: translateY(-3px); }
.croquis__zoom{
  position:absolute; right:1rem; bottom:1rem;
  background: rgba(255,255,255,.95); color: var(--brown-dk);
  font-family: var(--f-head); font-weight:600; font-size:.88rem;
  padding:.4rem .9rem; border-radius:999px; box-shadow: var(--shadow-sm);
}
@media (max-width: 900px){
  .ubi{ grid-template-columns:1fr; }
  .mapbox iframe{ height: 320px; }
}

/* =============================== FAQ ============================== */
.faq{ display:grid; gap:.8rem; }
.faq__item{
  background:#fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  overflow:hidden; border-left:6px solid var(--beige-dk);
  transition: border-color .2s ease;
}
.faq__item[open]{ border-left-color: var(--amber); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.3rem; position:relative;
  font-family: var(--f-head); font-weight:500; font-size:1.06rem; color: var(--brown-dk);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:'+'; position:absolute; right:1.2rem; top:50%; transform: translateY(-50%);
  font-size:1.6rem; line-height:1; color: var(--teal); transition: transform .2s ease;
}
.faq__item[open] summary::after{ content:'−'; }
.faq__item p{ margin:0; padding:0 1.3rem 1.2rem; color: var(--ink-soft); font-size:.98rem; }

/* =============================== CTA ============================== */
.cta{ background: var(--brown); color:#fff; padding: clamp(2.5rem,5vw,3.6rem) 0; }
.cta__inner{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center; text-align:center; }
.cta__owl{ width:96px; }
.cta .h2{ margin-bottom:.2rem; max-width:none; }
.cta .lead{ margin:0; }
@media (min-width: 820px){ .cta__inner{ text-align:left; justify-content:space-between; flex-wrap:nowrap; } .cta__inner > div{ margin-right:auto; } }

/* ============================== FOOTER ============================ */
.foot{ background: var(--brown-dk); color: rgba(255,255,255,.82); padding: 3.2rem 0 1.6rem; font-size:.96rem; }
.foot__inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap:2rem; }
.foot__logo{ width:190px; filter: brightness(0) invert(1); opacity:.95; }
.foot__slogan{ font-family: var(--f-head); letter-spacing:.08em; font-size:.88rem; color: var(--amber); margin:.6rem 0 0; }
.foot h4{ font-size:1.02rem; color:#fff; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.7rem; }
.foot p{ margin:0 0 .35rem; }
.foot__link{ color: var(--cream-2); text-decoration:none; border-bottom:1px solid rgba(251,235,214,.35); cursor:pointer; }
.foot__link:hover{ color: var(--amber); border-color: var(--amber); }
.foot__nav{ list-style:none; padding:0; margin:0; }
.foot__nav a{ text-decoration:none; }
.foot__nav a:hover{ color: var(--amber); }
.foot__nav li{ margin-bottom:.3rem; }
.foot__social{ display:flex; gap:.6rem; margin-top:.8rem; }
.foot__social a{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background: rgba(255,255,255,.1); text-decoration:none; transition: background .2s ease, transform .2s ease;
}
.foot__social a:hover{ background: var(--amber); transform: translateY(-2px); }
.foot__social svg{ width:20px; height:20px; fill: currentColor; }
.foot__base{
  margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.86rem; opacity:.75;
}
@media (max-width: 820px){ .foot__inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .foot__inner{ grid-template-columns: 1fr; } }

/* ================================ FAB ============================= */
.fab{
  position: fixed; right: 18px; bottom: 18px; z-index:90;
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--wa); color:#08361d; text-decoration:none; cursor:pointer;
  padding: .85rem 1.15rem; border-radius:999px;
  font-family: var(--f-head); font-weight:600;
  box-shadow: 0 10px 26px rgba(18,140,126,.4);
  transition: transform .2s ease;
}
.fab:hover{ transform: translateY(-3px) scale(1.03); }
.fab svg{ width:24px; height:24px; fill: currentColor; }
@media (max-width: 560px){ .fab__txt{ display:none; } .fab{ padding:.9rem; } }

/* ============================= LIGHTBOX =========================== */
.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:150; background: rgba(48,32,20,.92);
  display:grid; place-items:center; padding:1.5rem;
  animation: fade .2s ease both;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb__fig{ margin:0; max-width: 1100px; width:100%; }
.lb__fig img{
  width:100%; max-height: 78vh; object-fit:contain;
  border-radius: var(--r-md); background:#fff;
}
.lb__fig figcaption{
  color: var(--cream-2); text-align:center; margin-top:.9rem;
  font-family: var(--f-head); font-size:1rem;
}
.lb__close{
  position:absolute; top:14px; right:18px; width:48px; height:48px;
  border:none; border-radius:50%; background: rgba(255,255,255,.15); color:#fff;
  font-size:2rem; line-height:1; cursor:pointer;
}
.lb__close:hover{ background: rgba(255,255,255,.28); }

/* ============================= REVEAL ============================= */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .nav,.fab,.lb,.hero__sky,.wave{ display:none !important; }
  body{ background:#fff; }
}