/*
  Template Restaurante (HTML + CSS + JS)
  Objetivo: replicar el layout del PDF "Proyecto template restaurante".
  - Sin React/Vite/Tailwind
  - Estilos pensados para una landing 1-página
*/

:root{
  --amber-50:#fffbeb;
  --amber-100:#fef3c7;
  --amber-200:#fde68a;
  --amber-500:#f59e0b;
  --amber-600:#d97706;
  --orange-500:#f97316;
  --orange-600:#ea580c;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --red-500:#ef4444;

  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;

  --white:#ffffff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 10px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 22px 32px rgba(0,0,0,.14);

  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --container: 1120px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--gray-800);
  background:var(--white);
}
img{max-width:100%; display:block}
button{font-family:inherit}

.container{width:min(100% - 32px, var(--container)); margin-inline:auto}

/* -------------------------------- Header -------------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  transition: background .2s ease, box-shadow .2s ease;
}
.site-header.scrolled{
  background: var(--white);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
.header-inner{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  background: linear-gradient(90deg, var(--amber-600), var(--orange-500));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.nav{display:flex; align-items:center; gap:28px}
.nav-link{
  border:0;
  background:transparent;
  font-weight:700;
  color:var(--gray-700);
  cursor:pointer;
  padding:8px 2px;
  position:relative;
}
.nav-link:hover{color:var(--amber-600)}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0;
  height:2px;
  background:var(--amber-600);
  transition: width .2s ease;
}
.nav-link:hover::after{width:100%}

.icon-btn{
  border:0;
  background:transparent;
  padding:8px;
  border-radius:12px;
  cursor:pointer;
  color:var(--gray-700);
}
.icon-btn:hover{color:var(--amber-600); background: rgba(245,158,11,.08)}

.nav-toggle{display:none}
.nav-mobile{display:none; border-top:1px solid var(--gray-200); background:var(--white)}
.nav-mobile.open{display:block}
.nav-mobile-inner{padding:16px 0; display:flex; flex-direction:column; gap:10px}
.nav-mobile .nav-link{text-align:left; padding:10px 0}

.icon{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center}
.icon svg{width:28px; height:28px}

@media (max-width: 860px){
  .nav-desktop{display:none}
  .nav-toggle{display:inline-flex}
}

/* ------------------------------- Sections -------------------------------- */
main{padding-top:80px}
.section{padding:64px 0}
.section-menu,
.section-location{background: var(--amber-50)}

.section-head{margin-bottom:40px}
.section-head.center{text-align:center}

.h2{
  font-size: clamp(30px, 3.2vw, 46px);
  line-height:1.1;
  margin:0 0 10px;
  font-weight:900;
}
.lead{
  margin:0;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--gray-600);
}

/* -------------------------------- Buttons -------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius: 999px;
  border:0;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:active{transform: translateY(0)}
.btn-icon{font-size:18px; line-height:1; display:inline-flex}

.btn-whatsapp{
  background: var(--green-500);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-whatsapp:hover{background: var(--green-600); transform: translateY(-1px)}

.btn-light{
  background: var(--white);
  color: var(--orange-600);
  box-shadow: var(--shadow-md);
}
.btn-light:hover{filter: brightness(.98); transform: translateY(-1px)}

.btn-outline{
  background: transparent;
  border:2px solid rgba(255,255,255,.92);
  color: rgba(255,255,255,.96);
}
.btn-outline:hover{background: rgba(255,255,255,.12); transform: translateY(-1px)}

.btn-outline-white{
  background: transparent;
  border:2px solid rgba(255,255,255,.92);
  color: rgba(255,255,255,.96);
}
.btn-outline-white:hover{background: rgba(255,255,255,.12); transform: translateY(-1px)}

.btn.wide{width:100%}

/* -------------------------------- Hero ---------------------------------- */
.hero{
  position:relative;
  height:calc(100vh - 80px);
  min-height:640px;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0}
.hero-bg-img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero-overlay{
  position:absolute;
  inset:0;
  background: rgba(217,119,6,.55);
}

.hero-content{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 16px;
}
.hero-text{max-width: 860px}
.hero-title{
  color: var(--white);
  font-size: clamp(40px, 5vw, 74px);
  line-height:1.05;
  margin:0 0 14px;
  font-weight: 900;
  text-shadow: 0 14px 30px rgba(0,0,0,.38);
}
.hero-subtitle{
  margin:0 0 26px;
  color: rgba(255,255,255,.95);
  font-size: clamp(16px, 1.9vw, 22px);
  text-shadow: 0 12px 26px rgba(0,0,0,.35);
}

.scroll-indicator{position:absolute; left:50%; bottom:26px; transform: translateX(-50%)}
.scroll-pill{
  width:26px;
  height:40px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:8px;
  animation: bob 1.5s infinite;
}
.scroll-dot{width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.95)}
@keyframes bob{0%,100%{transform: translateY(0)}50%{transform: translateY(6px)}}

/* ------------------------------- Grids/Cards ------------------------------ */
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:22px}
@media (max-width: 1020px){.grid-3{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 720px){.grid-3,.grid-2{grid-template-columns: 1fr}}

.card{
  z-index: 10;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-top:4px solid var(--amber-500);
  padding:22px;
  position:relative;
  overflow:hidden;
}

/* ------------------------------- Menu (PDF) ------------------------------- */
.menu-category{margin-bottom:52px}
.menu-category-title{
  margin:0 0 18px;
  font-size:26px;
  font-weight: 900;
  display:inline-block;
  padding-bottom:8px;
  border-bottom:4px solid var(--amber-500);
}

.menu-item{transition: transform .18s ease, box-shadow .18s ease}
.menu-item:hover{transform: translateY(-6px); box-shadow: var(--shadow-lg)}

.menu-item-image-container{
  width: calc(100% + 44px);
  height: 200px;
  margin: -22px -22px 16px -22px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--gray-100);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--gray-100);
}

.menu-bg-icon{
  position:absolute;
  right:14px;
  top:10px;
  font-size:40px;
  opacity:.10;
  user-select:none;
  z-index: 0;
}

.menu-item-with-image .menu-bg-icon{
  top: 230px;
}

.menu-item .card-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight: 900;
  padding-right:54px;
}
.menu-item .card-desc{
  margin:0 0 16px;
  color: var(--gray-600);
  font-size: 13px;
  line-height: 1.55;
  min-height: 40px;
}
.menu-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.menu-price{font-size:22px; font-weight: 900; color: var(--amber-600)}
.menu-icon{font-size:22px}

/* --------------------------------- CTA ---------------------------------- */
.cta{
  background: var(--amber-500);
  color: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 34px 28px;
  text-align:center;
}
.cta-title{
  margin:0 0 18px;
  font-size: clamp(22px, 2.7vw, 40px);
  font-weight: 900;
  text-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ------------------------------- Hours (PDF) ------------------------------ */
.card-accent-amber{border-top-color: var(--amber-500); background: linear-gradient(180deg, var(--amber-50), var(--white))}
.card-accent-orange{border-top-color: var(--orange-500); background: linear-gradient(180deg, rgba(249,115,22,.10), var(--white))}

.card-title{display:flex; align-items:center; gap:12px; margin:0 0 14px}
.card-title h3{margin:0; font-size:20px; font-weight: 900}
.card-title-icon{font-size:22px}

.schedule-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(217,119,6,.25);
}
.schedule-row:last-child{border-bottom:0}
.schedule-day{font-weight:900; color: var(--gray-700)}
.schedule-hours{font-weight:800; color: var(--amber-600)}

.open-status{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid rgba(217,119,6,.18);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--red-500);
  box-shadow: 0 0 0 6px rgba(239,68,68,.12);
}
.status-dot.is-open{
  background: var(--green-500);
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}
.status-text{color: var(--gray-700)}

.info-list{display:flex; flex-direction:column; gap:16px}
.info-row{display:flex; gap:12px; align-items:flex-start}
.info-icon{font-size:20px; margin-top:2px}
.info-label{margin:0; font-weight: 900; color: var(--gray-700); font-size: 13px}
.info-value{margin:0; color: var(--gray-600)}

.note{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(229,231,235,.9);
  border-radius: 14px;
  padding: 12px 12px;
}
.note-strong{font-weight: 900}
.note-strong.amber{color: var(--amber-600)}
.note-strong.orange{color: var(--orange-600)}
.note.gradient{background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(249,115,22,.10))}

/* ---------------------------- Location (PDF) ------------------------------ */
.map-card{padding:0}
.map{height: 380px}
.map iframe{width:100%; height:100%; border:0}

.contact-box{display:flex; flex-direction:column; gap:14px}
.contact-item{
  display:flex;
  gap:12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(229,231,235,.9);
}
.contact-item.amber:hover{background: rgba(245,158,11,.10)}
.contact-item.orange:hover{background: rgba(249,115,22,.08)}
.contact-icon{font-size:22px; margin-top:2px}
.link{color: var(--gray-700); font-weight: 800; text-decoration:none}
.link:hover{color: var(--orange-600)}

/* ---------------------------- Testimonials (PDF) -------------------------- */
.testimonial{transition: transform .18s ease, box-shadow .18s ease}
.testimonial:hover{transform: translateY(-6px); box-shadow: var(--shadow-lg)}

.testimonial-top{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.avatar{width:54px; height:54px; border-radius:999px; object-fit:cover; border:2px solid var(--amber-500)}
.testimonial-name{font-weight: 900; margin:0; font-size:16px; color: var(--gray-800)}

.stars{display:flex; gap:3px; margin-top:6px}
.star{font-size:16px; line-height:1}
.star-on{color: var(--amber-500)}
.star-off{color: var(--gray-300)}

.testimonial-text{margin:0; color: var(--gray-600); line-height:1.65; font-style: italic}

/* --------------------------- Floating WhatsApp --------------------------- */
.floating-wa{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  border:0;
  width:64px;
  height:64px;
  border-radius:999px;
  background: var(--green-500);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, background .18s ease;
}
.floating-wa:hover{background: var(--green-600); transform: translateY(-2px)}
.floating-wa-icon{position:relative; z-index:2; font-size:30px}
.floating-wa-pulse{
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(34,197,94,.45);
  animation: pulse2 2s infinite;
}
@keyframes pulse2{0%{transform:scale(1); opacity:.6}50%{transform:scale(1.18); opacity:.25}100%{transform:scale(1); opacity:.6}}

.floating-wa-tooltip{
  position:absolute;
  right:100%;
  margin-right:14px;
  top:50%;
  transform: translateY(-50%);
  background: var(--white);
  color: var(--gray-800);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.floating-wa:hover .floating-wa-tooltip{opacity:1; transform: translateY(-50%) translateX(-6px)}
.floating-wa-tooltip strong{display:block; font-size:14px}

/* ------------------------------ Animations ------------------------------- */
[data-animate]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--delay, 0ms);
}
[data-animate].in-view{opacity:1; transform: translateY(0)}

/* Minor tweaks */
@media (max-width: 520px){
  .section{padding:56px 0}
  .cta{padding: 28px 18px}
}