:root{
  --page:#ffffff;
  --header:#eef2f6;
  --serif:"Playfair Display",Georgia,serif;
  --sky:#48c9f4;
  --sky2:#aee8fb;
  --ocean:#20a5c9;
  --deep:#075b72;
  --teal:#0c94a8;
  --coral:#ef5d45;
  --yellow:#ffd44d;
  --cream:#fff9e8;
  --sand:#f2dfbd;
  --wood:#9a5d27;
  --wood2:#6d3e17;
  --ink:#15373e;
  --white:#fff;
  --line:rgba(7,91,114,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Lato",system-ui,sans-serif;
  color:var(--ink);
  background:var(--page);
}
img{display:block;width:100%;max-width:100%}
a{text-decoration:none;color:inherit}
.hero{
  background:var(--header);
  border-bottom:1px solid #dde4ec;
  padding:12px 20px;
  position:relative;
  z-index:20;
}
.topbar{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{display:block;flex:none;margin-bottom:calc(clamp(150px,20vw,240px) / -2)}
.hero-logo{
  width:clamp(150px,20vw,240px);
  height:auto;
  filter:drop-shadow(0 4px 8px rgba(7,91,114,.2));
}
.topnav{display:flex;align-items:center;gap:6px}
.topnav a{
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  color:var(--deep);
  transition:background .2s,color .2s;
}
.topnav a:hover{background:rgba(7,91,114,.09)}
.topnav .topnav-menu{
  margin-left:8px;
  background:var(--coral);
  color:#fff;
  box-shadow:0 6px 14px rgba(239,93,69,.3);
}
.topnav .topnav-menu:hover{background:#d94c35}
.hero-content{position:relative;z-index:2;max-width:850px;margin:0 auto;padding:0 20px}
.logo-badge{
  display:inline-block;
  padding:16px 24px 10px;
  background:rgba(255,249,232,.92);
  border:6px solid var(--yellow);
  outline:4px solid var(--teal);
  border-radius:28px;
  box-shadow:0 16px 35px rgba(0,0,0,.16);
  transform:rotate(-1deg);
}
.logo-small{
  display:block;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--coral);
  font-size:.78rem;
}
.logo-main{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(3.4rem,12vw,6.6rem);
  line-height:.9;
  color:#138ca3;
  text-shadow:
    0 4px 0 #fff,
    0 7px 0 #f4cc38;
  letter-spacing:.04em;
}
.hero h1{
  font-family:var(--serif);font-weight:700;
  color:#8e4f1c;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:.98;
  margin:28px 0 12px;
  text-shadow:0 3px 0 rgba(255,255,255,.8);
}
.hero p{
  margin:0 auto 24px;
  max-width:700px;
  font-size:1.08rem;
  font-weight:700;
  color:#204b52;
  background:rgba(255,255,255,.68);
  display:inline-block;
  padding:10px 15px;
  border-radius:16px;
}
.primary-btn,.secondary-btn{
  display:inline-flex;
  padding:13px 22px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}
.primary-btn{background:var(--coral);color:#fff;border:3px solid #fff}
.secondary-btn{background:var(--yellow);color:#583512}
.palm{position:absolute;z-index:1;font-size:clamp(4rem,10vw,8rem);top:12px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.16))}
.palm-left{left:-12px;transform:rotate(-12deg)}
.palm-right{right:-12px;transform:scaleX(-1) rotate(-12deg)}

main{max-width:1180px;margin:auto;padding:0 max(18px,env(safe-area-inset-left))}
footer{padding-bottom:max(42px,env(safe-area-inset-bottom))}
.highlight-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  margin-top:36px;
  position:relative;
  z-index:5;
}
.promo-card{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:26px;
  border:5px solid #fff;
  box-shadow:0 18px 40px rgba(13,92,104,.18);
  background:#fff;
}
.promo-card img{position:absolute;inset:0;height:100%;object-fit:cover;filter:saturate(1.18) brightness(1.1)}
.promo-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(0,53,63,.82) 100%);
}
.promo-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:26px;
}
.mini-tag{
  display:inline-block;
  background:var(--yellow);
  color:#5a3515;
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.promo-copy h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2rem,4vw,3.2rem);
  margin:10px 0 5px;
  letter-spacing:.02em;
}
.promo-copy p{margin:0;color:rgba(255,255,255,.9)}

.packages,.menu-section{padding:70px 0}
.section-title{text-align:center;margin-bottom:28px}
.section-title span{
  display:inline-block;
  color:var(--coral);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  font-size:.78rem;
}
.section-title h2{
  font-family:var(--serif);font-weight:700;
  color:#75451d;
  font-size:clamp(2.4rem,5vw,4rem);
  margin:8px 0;
  letter-spacing:.02em;
}
.section-title p{margin:0;color:#617d82}

.packages-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.package-card{
  background:linear-gradient(#fffdf6,#fff6de);
  border:2px solid #e7cfaa;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(88,64,32,.09);
  position:relative;
}
.package-card .wood{
  background:
    linear-gradient(rgba(91,49,17,.08),rgba(91,49,17,.08)),
    linear-gradient(90deg,#8b5224,#b17137,#8b5224);
  color:#fff;
  padding:18px;
  text-shadow:0 2px 2px rgba(0,0,0,.22);
}
.package-card h3{
  font-family:var(--serif);font-weight:700;
  margin:0;
  font-size:1.55rem;
  letter-spacing:.02em;
}
.package-price{font-size:2rem;font-weight:900;color:#fff59a;margin-top:5px}
.package-body{padding:16px}
.package-body p{margin:9px 0;line-height:1.4;font-size:.92rem}
.package-body b{color:var(--teal)}

.category-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  padding:12px 2px 16px;
  position:relative;
}
.nav-break{flex-basis:100%;height:0}
.category-nav a{
  flex:none;
  background:#fff;
  border:2px solid #cceef3;
  color:var(--deep);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
}
.category-nav a:hover{background:var(--yellow);border-color:#efc343}

.menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.category{
  background:#fffdf7;
  border:2px solid #ecd4ad;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(60,91,94,.08);
  scroll-margin-top:80px;
}
.category-header{
  padding:13px 18px;
  background:
    linear-gradient(rgba(90,51,18,.1),rgba(90,51,18,.1)),
    linear-gradient(90deg,#9c602a,#bd8045,#8a5021);
  color:#fff;
  border-bottom:4px solid #f2cf7d;
}
.category-header h3{
  font-family:var(--serif);font-weight:700;
  margin:0;
  font-size:1.7rem;
  letter-spacing:.03em;
  text-shadow:0 2px 2px rgba(0,0,0,.2);
}
.menu-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:13px 16px;
  border-top:1px solid var(--line);
}
.menu-item:first-of-type{border-top:0}
.item-name{font-weight:900;overflow-wrap:anywhere}
.item-meta{display:block;color:#6b7c7e;font-size:.82rem;margin-top:2px}
.item-price{font-weight:900;color:var(--coral);white-space:nowrap}

.tropical-cta{
  margin:30px 0 70px;
  border-radius:28px;
  padding:34px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  background:
    radial-gradient(circle at 85% 30%,rgba(255,212,77,.33),transparent 13rem),
    linear-gradient(135deg,#0f9db4,#67d5ef);
  color:#fff;
  border:5px solid #fff;
  box-shadow:0 18px 38px rgba(12,113,132,.16);
}
.tropical-cta span{font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem}
.tropical-cta h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.8rem,3vw,2.2rem);
  margin:7px 0 0;
  max-width:760px;
}

footer{
  text-align:center;
  padding:42px 20px;
  color:#fff;
  background:linear-gradient(180deg,#05667d,#034757);
}
.footer-mark{
  font-family:var(--serif);font-weight:700;
  font-size:2.4rem;
  color:#ffe36c;
  text-shadow:0 3px 0 #ef5d45;
}
.footer-sub{letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;opacity:.9}
.footer-contact{
  font-style:normal;
  margin:22px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:1rem;
  line-height:1.4;
}
.footer-contact a{opacity:.92}
.footer-contact a:hover{opacity:1;text-decoration:underline}
footer small{display:block;margin-top:22px;opacity:.7;font-size:.85rem}

@media(max-width:1100px){
  .packages-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .highlight-grid{grid-template-columns:1fr 1fr}
  .promo-card{min-height:340px}
}
@media(max-width:760px){
  .hero{padding:8px 14px}
  .topnav{gap:2px}
  .topnav a{padding:6px 7px;font-size:.78rem}
  .topnav .topnav-menu{margin-left:3px}
  .highlight-grid{grid-template-columns:1fr;margin-top:28px}
  .promo-card{min-height:320px}
  .promo-copy{padding:20px}
  .package-price{font-size:1.8rem}
  .packages,.menu-section{padding:48px 0}
  .tropical-cta{padding:26px 22px}
  .packages-grid{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .highlight-grid{grid-template-columns:1fr}
  .tropical-cta{display:block}
  .tropical-cta .secondary-btn{margin-top:22px}
}

.gallery{padding:40px 0 0}
.carousel{max-width:560px;margin:0 auto;position:relative;border-radius:26px;overflow:hidden;border:5px solid #fff;box-shadow:0 18px 40px rgba(13,92,104,.18);background:#fff}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;margin:0;scroll-snap-align:center;aspect-ratio:4/3;background:#f4ead2}
.slide img{height:100%;object-fit:contain}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:var(--coral);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.25);padding:0 0 4px}
.car-btn.prev{left:12px}.car-btn.next{right:12px}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.4);padding:0;cursor:pointer}
.dots button.on{background:var(--yellow)}
@media(max-width:760px){
  .gallery{padding-top:48px}
}

/* ---------- Intro (debajo de la barra) ---------- */
.intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
  padding:calc(clamp(150px,20vw,240px) / 2 + 0px) 0 8px;
}
.eyebrow{
  display:inline-block;
  color:var(--coral);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  font-size:.78rem;
}
.intro h1{
  font-family:var(--serif);
  font-weight:700;
  color:#75451d;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.08;
  margin:12px 0 16px;
}
.intro p{margin:0 0 26px;font-size:1.1rem;line-height:1.6;color:#4a6a70;max-width:520px}
.intro-actions{display:flex;flex-wrap:wrap;gap:12px}
.intro .primary-btn{border:0}
.intro .secondary-btn{border:2px solid #efc343}
.intro-facts{
  list-style:none;margin:18px 0 26px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 22px;
  color:#4a6a70;font-size:.95rem;
}
.intro-facts li::before{content:"✓ ";color:var(--teal);font-weight:900}
.intro-facts b{color:var(--deep)}
.intro-photo{
  border-radius:26px;
  overflow:hidden;
  border:5px solid #fff;
  box-shadow:0 20px 44px rgba(13,92,104,.2);
  aspect-ratio:5/4;
}
.intro-photo img{height:100%;object-fit:cover}
@media(max-width:760px){
  .intro{grid-template-columns:1fr;gap:26px;padding-top:calc(75px + 28px);text-align:center}
  .intro p{margin-left:auto;margin-right:auto}
  .intro-actions,.intro-facts{justify-content:center}
  .intro-photo{order:-1;aspect-ratio:4/3}
  /* en celular el carrusel va primero, justo debajo del logo */
  .intro .gallery{order:-1;padding:0}
  .intro{gap:22px}
}


/* ---------- Bebidas: otro color ---------- */
.category.drinks{background:#f3fcfd;border-color:#b6e3ea}
.category.drinks .category-header{
  background:
    linear-gradient(rgba(0,40,55,.12),rgba(0,40,55,.12)),
    linear-gradient(90deg,#0b7f95,#16a5bd,#0b7f95);
  border-bottom-color:#7fdcec;
}
.category.drinks .item-price{color:var(--teal)}
.category.drinks .menu-item{border-top-color:rgba(12,148,168,.18)}
.category-note{margin:0;padding:12px 16px;font-size:.88rem;font-weight:800;color:#a8321f;background:#fff1ea;border-top:1px solid #f3cdbd}
.category-nav a.drink{background:#e1f7fb;border-color:#9bdcea;color:#0a6d80}
.category-nav a.drink:hover{background:#16a5bd;border-color:#16a5bd;color:#fff}

@media(max-width:760px){
  .category-nav{gap:7px}
  .category-nav a{padding:8px 12px;font-size:.88rem}
}

/* ---------- Botón flotante "Ver menú" (todas las pantallas) ---------- */
.fab-menu{
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:fixed;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:50;
  padding:9px 18px;
  font-size:.85rem;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  font-weight:900;
  border:2px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.fab-menu:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.32)}
@media(max-width:760px){
  .fab-menu:active{transform:scale(.95)}
  footer{padding-bottom:max(80px,calc(58px + env(safe-area-inset-bottom)))}
}

.intro .intro-note{margin:16px 0 0;font-size:.9rem;font-weight:700;color:#8a5a2b}
.footer-note{margin-top:14px}

.intro .intro-hours{
  display:flex;
  flex-direction:column;
  text-align:left;
  margin:0;
  padding:2px 0 2px 14px;
  border-left:4px solid var(--coral);
}
.hours-label{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#6b7c7e}
.hours-time{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--deep);line-height:1.2}
.intro .intro-hours + .intro-note{margin-top:12px}
.footer-contact span{opacity:.92}

.intro-actions{align-items:center;gap:12px 24px}

/* Logo más pequeño en celular (la mitad sigue sobre el contenido) */
@media(max-width:760px){
  .hero-logo{width:130px}
  .brand{margin-bottom:-65px}
  .intro{padding-top:calc(65px + 8px)}
}

/* Botón flotante: solo icono, a la derecha */
.fab-menu{
  width:52px;height:52px;
  padding:0;
  justify-content:center;
  gap:0;
  font-size:1.4rem;
  line-height:1;
}
.fab-menu .fab-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* Botones del carrusel: pequeños y casi transparentes */
.car-btn,.car-btn:hover{
  width:30px;height:30px;
  font-size:1.2rem;
  padding:0 0 2px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,184,102,.25);
  color:#fff;
  box-shadow:none;
}
.car-btn:hover{background:rgba(255,160,64,.6);color:#fff}
.car-btn.prev{left:8px}.car-btn.next{right:8px}
@media(max-width:760px){.car-btn{display:none}}

/* ---------- Paquetes para llevar (modal) ---------- */
.category-nav button.nav-pack{
  flex:none;
  font:inherit;
  cursor:pointer;
  background:var(--yellow);
  border:2px solid #efc343;
  color:#583512;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
}
.category-nav button.nav-pack:hover{background:#ffe38a}
@media(max-width:760px){.category-nav button.nav-pack{padding:8px 12px;font-size:.88rem}}
html.modal-open{overflow:hidden}
#packages-modal{
  width:min(960px,calc(100% - 28px));
  max-height:calc(100dvh - 28px);
  margin:auto;
  padding:26px 22px 24px;
  border:5px solid #fff;
  border-radius:26px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  overflow:auto;
}
#packages-modal::backdrop{background:rgba(3,50,62,.55);backdrop-filter:blur(3px)}
#packages-modal .modal-head{text-align:center;margin-bottom:22px}
#packages-modal .modal-head span{color:var(--coral);text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.78rem}
#packages-modal .modal-head h2{font-family:var(--serif);font-weight:700;color:#75451d;font-size:clamp(1.8rem,5vw,2.8rem);margin:6px 0}
#packages-modal .modal-head p{margin:0;color:#617d82}
#packages-modal .modal-close{
  position:absolute;top:12px;right:14px;
  width:36px;height:36px;border-radius:50%;
  border:0;background:var(--coral);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 0 3px;
}
#packages-modal .packages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){
  #packages-modal{padding:22px 14px 18px}
  #packages-modal .packages-grid{grid-template-columns:1fr}
}

#packages-modal .modal-actions{text-align:center;margin-top:22px}
#packages-modal .modal-call{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;
  background:var(--coral);color:#fff;font-weight:900;
  border:3px solid #fff;box-shadow:0 10px 20px rgba(239,93,69,.3);
}
#packages-modal .modal-call:hover{background:#d94c35}
#packages-modal .modal-actions small{display:block;margin-top:10px;color:#617d82}

.secondary-btn[hidden]{display:none}
.intro-actions button.secondary-btn{border:2px solid #efc343;font:inherit;font-weight:900;cursor:pointer}

/* Horario y botón de paquetes: más pequeños */
.hours-label{font-size:.66rem}
.hours-time{font-size:1.05rem}
.intro .intro-hours{padding-left:10px;border-left-width:3px}
.intro-actions{gap:10px 16px}
.intro-actions .secondary-btn{padding:8px 16px;font-size:.82rem;box-shadow:0 6px 12px rgba(0,0,0,.12)}
@media(max-width:760px){
  .intro-actions .secondary-btn{padding:4px 10px;font-size:.66rem;border-width:1px}
}

#packages-modal .coming-soon{text-align:center;padding:18px 10px 8px}
#packages-modal .coming-soon-icon{font-size:3rem;line-height:1}
#packages-modal .coming-soon h3{font-family:var(--serif);font-weight:700;color:var(--deep);font-size:clamp(1.6rem,5vw,2.2rem);margin:10px 0 6px}
#packages-modal .coming-soon p{margin:0;color:#617d82;font-size:1.05rem}

/* El botón flotante aparece al hacer scroll */
.fab-menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
.fab-menu.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
@media(max-width:760px){.btn-long{display:none}}
/* Escritorio: el slogan con el mismo tamaño que los títulos de sección ("Elige tu antojo") */
@media(min-width:761px){
  .intro h1{font-size:clamp(2.4rem,5vw,4rem)}
}

/* Espacio uniforme entre el icono y el texto del menú superior */
.topnav a{display:inline-flex;align-items:center;gap:7px}
@media(max-width:760px){.topnav a{gap:4px}}

/* Botón "Menú" un poco más largo */
.topnav .topnav-menu{padding-left:24px;padding-right:24px}
@media(max-width:760px){.topnav .topnav-menu{padding-left:12px;padding-right:12px}}

/* "El Hawaii, el sabor de Guaracha." siempre en una sola línea */
.tropical-cta h2{
  white-space:nowrap;
  max-width:none;
  font-size:clamp(.95rem,5.5vw,2.2rem);
}
@media(max-width:760px){.tropical-cta{padding:24px 14px}}

/* Footer con menos margen */
footer{padding:24px 20px max(24px,env(safe-area-inset-bottom))}
.footer-contact{margin-top:14px;gap:6px}
footer small{margin-top:14px}
.footer-note{margin-top:10px}
@media(max-width:760px){
  footer{padding-bottom:max(60px,calc(40px + env(safe-area-inset-bottom)))}
}

/* Footer: el texto usa casi todo el ancho */
footer{padding-left:8px;padding-right:8px}
.footer-contact{width:100%;max-width:none}
.footer-contact a,.footer-contact span{max-width:100%}

/* Celular: el menú de arriba no debe tocar el borde derecho */
@media(max-width:760px){
  .hero{padding-left:16px;padding-right:16px}
  .topbar{gap:6px}
  .topnav{min-width:0}
  .topnav a{padding:6px 5px;font-size:.78rem;gap:3px}
  .topnav .topnav-menu{padding-left:10px;padding-right:10px;margin-left:2px}
}

/* Letra del botón "Menú" más grande */
.topnav .topnav-menu{font-size:1.08rem}
@media(max-width:760px){.topnav .topnav-menu{font-size:.92rem}}

/* "Elige tu antojo" con el mismo tamaño que el slogan (celular y escritorio) */
.section-title h2{font-size:clamp(1.9rem,4vw,3.2rem)}
@media(min-width:761px){
  .section-title h2{font-size:clamp(2.4rem,5vw,4rem)}
}