:root{
  --ink: oklch(24% 0.03 50);
  --ink-soft: oklch(38% 0.03 50);
  --cream: oklch(97% 0.020 75);
  --paper: oklch(99% 0.006 90);
  --orange: oklch(62% 0.17 45);
  --orange-dark: oklch(46% 0.15 38);
  --orange-tint: oklch(93% 0.045 55);
  --green: oklch(50% 0.11 152);
  --green-dark: oklch(38% 0.10 152);
  --green-tint: oklch(93% 0.045 150);
  --pink: oklch(58% 0.19 9);
  --pink-tint: oklch(93% 0.045 9);
  --yellow: oklch(86% 0.13 92);
  --shadow: 0 18px 40px -18px oklch(24% 0.03 50 / 0.35);
}
*{ box-sizing: border-box; }
body{ margin:0; }
h1,h2,h3{ font-family:'Baloo 2', 'Trebuchet MS', sans-serif; margin:0; color:var(--ink); font-weight:800; }
p,span,li,a,button{ font-family:'Nunito', 'Segoe UI', sans-serif; }
.accent-script{ font-family:'Caveat','Segoe Script',cursive; }
a{ color: var(--orange-dark); text-decoration:none; }
a:hover{ color: var(--orange); }
ul{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; border:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
@media (min-width:860px){ .container{ padding:0 40px; } }

/* ---------- floating whatsapp icon (shared) ---------- */
.wa-icon{ width:22px; height:22px; flex-shrink:0; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:40;
  background: color-mix(in oklch, var(--cream) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid oklch(24% 0.03 50 / 0.08);
}
.site-header .row{ display:flex; align-items:center; justify-content:space-between; padding:10px 20px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:44px; width:44px; }
.brand .word{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.1; }
.brand .word small{ display:block; font-family:'Nunito',sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-dark); }
nav.links{ display:none; gap:28px; }
nav.links a{ font-weight:700; color:var(--ink-soft); font-size:.95rem; }
@media (min-width:860px){ nav.links{ display:flex; } }
.btn-wa{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--green); color:#fff; padding:10px 18px; border-radius:999px;
  font-weight:800; font-size:.88rem; box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease;
}
.btn-wa:hover{ background: var(--green-dark); color:#fff; transform: translateY(-1px); }
.btn-wa.small{ padding:12px 20px; font-size:.85rem; }

/* ---------- mobile quick links ---------- */
.mobile-quicklinks{ display:flex; gap:8px; overflow-x:auto; padding:10px 16px 12px; background:var(--cream); border-bottom:1px solid oklch(24% 0.03 50 / 0.08); -webkit-overflow-scrolling:touch; }
.mobile-quicklinks a{ flex:0 0 auto; font-weight:800; font-size:.85rem; color:var(--ink-soft); background:var(--paper); padding:10px 18px; border-radius:999px; border:1px solid oklch(24% 0.03 50 / 0.1); }
@media (min-width:860px){ .mobile-quicklinks{ display:none; } }

/* ---------- papel picado banner ---------- */
.picado{ display:flex; justify-content:center; gap:2px; overflow:hidden; padding-top:8px; background:var(--cream); }
.picado span{
  width:34px; height:30px; flex-shrink:0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position:relative; transform-origin: top center;
  animation: sway 3.6s ease-in-out infinite;
}
.picado span::after{
  content:""; position:absolute; left:50%; top:34%; width:7px; height:7px; margin-left:-3.5px;
  background: var(--cream); border-radius:50%;
}
.picado span:nth-child(6n+1){ background:var(--orange); animation-delay:0s; }
.picado span:nth-child(6n+2){ background:var(--pink); animation-delay:.2s; }
.picado span:nth-child(6n+3){ background:var(--green); animation-delay:.4s; }
.picado span:nth-child(6n+4){ background:var(--yellow); animation-delay:.6s; }
.picado span:nth-child(6n+5){ background:var(--orange-dark); animation-delay:.8s; }
.picado span:nth-child(6n+6){ background:var(--green-dark); animation-delay:1s; }
@keyframes sway{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }

/* ---------- hero ---------- */
.hero{ background:var(--cream); padding:36px 0 64px; position:relative; }
.hero .container{ display:flex; flex-direction:column; gap:36px; align-items:center; }
@media (min-width:900px){ .hero .container{ flex-direction:row; align-items:center; gap:56px; } }
.hero-copy{ flex:1 1 0; text-align:center; }
@media (min-width:900px){ .hero-copy{ text-align:left; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.4rem; color:var(--orange-dark);
  background:var(--orange-tint); padding:4px 16px 6px; border-radius:999px; margin-bottom:14px;
}
.hero h1{ font-size: clamp(2rem, 5vw, 3.1rem); line-height:1.06; letter-spacing:-.01em; }
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero p.lead{ margin:18px 0 26px; color:var(--ink-soft); font-size:1.08rem; line-height:1.55; max-width:46ch; }
@media (min-width:900px){ .hero p.lead{ margin-left:0; margin-right:0; } }
.hero p.lead{ margin-left:auto; margin-right:auto; }
@media (min-width:900px){ .hero p.lead{ margin-left:0; } }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
@media (min-width:900px){ .hero-ctas{ justify-content:flex-start; } }
.btn-wa.big{ padding:16px 30px; font-size:1.02rem; }
.link-ghost{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--ink-soft); padding:16px 6px; }
.link-ghost svg{ width:16px; height:16px; }

.hero-media{ flex:1 1 0; width:100%; max-width:480px; }
.video-frame{
  position:relative; border-radius:28px; overflow:hidden; aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--orange) 0%, var(--pink) 55%, var(--green-dark) 100%);
  box-shadow: var(--shadow); border: 6px solid var(--paper);
}
.video-frame{ background-size:cover; background-position:center; }
.video-frame .steam{ position:absolute; inset:0; opacity:.35; }
.video-frame .caption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px 16px;
  background: linear-gradient(to top, oklch(20% 0.02 40 / 0.75), transparent 70%);
  color:#fff; font-weight:700; font-size:.9rem;
}
.play-btn{
  position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
  background: color-mix(in oklch, white 88%, transparent); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -8px oklch(20% 0.02 40 / 0.5);
}
.play-btn svg{ width:26px; height:26px; margin-left:4px; }
.media-note{ text-align:center; font-size:.78rem; color:var(--ink-soft); opacity:.75; margin-top:10px; }

/* ---------- delivery band ---------- */
.delivery-band{ background:var(--green-dark); color:#fff; padding:26px 0; position:relative; }
.delivery-band::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:16px;
  background: radial-gradient(circle at 10px 16px, transparent 10px, var(--green-dark) 11px) 0 0 / 20px 20px repeat-x;
}
.delivery-band .row{
  display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center;
}
@media (min-width:760px){ .delivery-band .row{ flex-direction:row; text-align:left; justify-content:space-between; } }
.delivery-headline{ display:flex; align-items:center; gap:14px; }
.delivery-headline svg{ width:40px; height:40px; flex-shrink:0; }
.delivery-headline h2{ color:#fff; font-size:1.3rem; }
.delivery-facts{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; }
@media (min-width:760px){ .delivery-facts{ justify-content:flex-end; } }
.delivery-facts .fact{ display:flex; align-items:center; gap:7px; font-size:.85rem; font-weight:700; opacity:.95; }
.delivery-facts svg{ width:16px; height:16px; opacity:.85; }

/* ---------- section heading ---------- */
.section{ padding:64px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head .eyebrow{ background:var(--green-tint); color:var(--green-dark); }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.section-head p{ color:var(--ink-soft); margin-top:12px; line-height:1.55; }

/* ---------- menu ---------- */
.menu-section{ background:var(--paper); }
.container.menu-wrap{ padding:0 20px; }
@media (min-width:900px){ .container.menu-wrap{ padding:0 40px; } }
.menu-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:6px 0 8px;
}
@media (min-width:600px){ .menu-grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (min-width:900px){ .menu-grid{ grid-template-columns:repeat(4,1fr); } }
.menu-category-head{ margin:8px 0 14px; display:flex; align-items:center; gap:12px; }
.menu-category-head:not(:first-child){ margin-top:34px; }
.menu-category-head h3{ font-size:1.1rem; color:var(--orange-dark); white-space:nowrap; }
.menu-category-head::after{ content:""; flex:1; height:2px; background:var(--orange-tint); }
.dish-card{
  position:relative; background:var(--cream); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow: 0 12px 26px -18px oklch(24% 0.03 50/.4);
  border:1px solid oklch(24% 0.03 50/.06);
}
.dish-card.is-unavailable{ opacity:.6; }
.unavailable-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: oklch(24% 0.03 50 / 0.85); color:#fff; font-size:.62rem; font-weight:800;
  padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
}
.dish-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.dish-icon{
  width:100%; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.dish-icon.caldo{ background:var(--orange-tint); }
.dish-icon.guisado{ background:var(--green-tint); }
.dish-icon.mananero{ background:var(--yellow); }
.dish-icon.bebida{ background:var(--pink-tint); }
.dish-icon svg{ width:32px; height:32px; opacity:.6; }
.dish-icon .soon-note{ font-size:.66rem; font-weight:800; letter-spacing:.03em; color:var(--ink-soft); opacity:.65; text-transform:uppercase; }
.dish-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.dish-card h3{ font-size:.98rem; line-height:1.2; }
.dish-card p{ color:var(--ink-soft); font-size:.8rem; line-height:1.4; flex-grow:1; margin:0; }
.dish-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; gap:8px; }
.price-tag{
  font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--orange-dark); background:var(--orange-tint);
  padding:5px 12px; border-radius:999px; font-size:.8rem; white-space:nowrap;
}
.tag-note{ font-size:.68rem; color:var(--ink-soft); opacity:.7; text-align:right; }
.menu-footnote{ text-align:center; color:var(--ink-soft); font-size:.9rem; margin-top:26px; }

/* ---------- personalize / catalog bridge ---------- */
.personalize{ background: var(--cream); }
.personalize .card{
  background:var(--paper); border-radius:28px; padding:36px 28px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
@media (min-width:860px){ .personalize .card{ flex-direction:row; align-items:center; justify-content:space-between; gap:36px; } }
.personalize .copy{ max-width:520px; }
.personalize h2{ font-size:1.5rem; margin-bottom:10px; }
.personalize p{ color:var(--ink-soft); line-height:1.55; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{ font-size:.78rem; font-weight:700; background:var(--green-tint); color:var(--green-dark); padding:6px 12px; border-radius:999px; }

/* ---------- tortillas callout ---------- */
.tortillas-callout{ background:var(--paper); padding-top:0; }
.tortillas-card{ border-radius:26px; overflow:hidden; position:relative; box-shadow:var(--shadow); }
.tortillas-img{ width:100%; height:260px; object-fit:cover; }
@media (min-width:760px){ .tortillas-img{ height:360px; } }
.tortillas-copy{
  position:absolute; left:0; right:0; bottom:0; padding:24px 24px 22px;
  background: linear-gradient(to top, oklch(20% 0.02 40 / 0.8), transparent 75%);
}
@media (min-width:760px){ .tortillas-copy{ padding:34px 40px 30px; } }
.tortillas-copy .eyebrow{ background: color-mix(in oklch, white 88%, transparent); }
.tortillas-copy h2{ color:#fff; font-size:1.5rem; margin:8px 0 6px; }
.tortillas-copy p{ color: oklch(94% 0.01 75); line-height:1.5; max-width:50ch; font-size:.95rem; margin:0; }

/* ---------- about ---------- */
.about{ background:var(--paper); }
.about .grid{ display:flex; flex-direction:column; gap:32px; align-items:center; }
@media (min-width:900px){ .about .grid{ flex-direction:row; } }
.about-art{ flex:0 0 240px; width:240px; height:240px; border-radius:50%; position:relative; }
.about-art .ring{
  position:absolute; inset:0; border-radius:50%; border:3px dashed var(--orange-tint);
}
.about-art .about-photo{
  position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px);
  border-radius:50%; object-fit:cover; box-shadow: inset 0 0 0 4px var(--paper);
}
.about-text{ flex:1; }
.about-text .eyebrow{ background:var(--orange-tint); color:var(--orange-dark); }
.about-text h2{ font-size:1.6rem; margin-bottom:14px; }
.about-text p{ color:var(--ink-soft); line-height:1.6; font-size:1rem; }

/* ---------- footer ---------- */
footer{ background: var(--ink); color: oklch(90% 0.01 75); padding:0; position:relative; }
footer::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:16px;
  background: radial-gradient(circle at 10px 16px, transparent 10px, var(--ink) 11px) 0 0 / 20px 20px repeat-x;
}
footer .top{ padding:56px 0 30px; display:flex; flex-direction:column; gap:32px; }
@media (min-width:860px){ footer .top{ flex-direction:row; justify-content:space-between; } }
.foot-brand{ display:flex; align-items:center; gap:12px; max-width:340px; }
.foot-brand img{ height:52px; width:52px; }
.foot-brand p{ color: oklch(78% 0.01 75); font-size:.88rem; line-height:1.5; margin:6px 0 0; }
.foot-col h4{ font-family:'Baloo 2',sans-serif; color:#fff; font-size:.95rem; margin-bottom:14px; }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col li{ display:flex; align-items:center; gap:9px; font-size:.9rem; color: oklch(82% 0.01 75); }
.foot-col li svg{ width:16px; height:16px; opacity:.8; flex-shrink:0; }
.foot-cols{ display:flex; flex-wrap:wrap; gap:40px; }
.social-row{ display:flex; gap:10px; margin-top:6px; }
.social-pill{
  display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  background: oklch(32% 0.02 60); color: oklch(90% 0.01 75); font-size:.78rem; font-weight:700;
}
.social-pill .dot{ width:8px; height:8px; border-radius:50%; }
.social-pill.fb .dot{ background: var(--orange); }
.social-pill.ig .dot{ background: var(--pink); }
.social-pill.tt .dot{ background: var(--green); }
.foot-bottom{
  border-top: 1px solid oklch(100% 0 0 / 0.08); padding:18px 0 28px;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
  color: oklch(65% 0.01 75); font-size:.78rem;
}
@media (min-width:760px){ .foot-bottom{ flex-direction:row; justify-content:space-between; text-align:left; } }
.placeholder-note{ color: var(--yellow); opacity:.85; }

/* ---------- floating whatsapp button ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:60px; height:60px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px oklch(50% 0.11 152/.6);
}
.fab svg{ width:28px; height:28px; }
.fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--green);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

/* ---------- admin panel (propio, no toca el diseño publico) ---------- */
.admin-body{ background:var(--paper); min-height:100vh; font-family:'Nunito',sans-serif; }
.admin-wrap{ max-width:960px; margin:0 auto; padding:30px 20px 60px; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.admin-topbar h1{ font-size:1.3rem; }
.admin-nav{ display:flex; gap:10px; flex-wrap:wrap; }
.admin-nav a{ font-weight:800; font-size:.85rem; color:var(--ink-soft); background:var(--cream); padding:8px 14px; border-radius:999px; }
.admin-nav a.active{ background:var(--green); color:#fff; }
.admin-card{ background:var(--cream); border-radius:16px; padding:20px; margin-bottom:18px; border:1px solid oklch(24% 0.03 50/.08); }
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td{ text-align:left; padding:10px 8px; border-bottom:1px solid oklch(24% 0.03 50/.08); font-size:.9rem; vertical-align:middle; }
.admin-table img{ width:48px; height:48px; object-fit:cover; border-radius:8px; }
.admin-form label{ display:block; font-weight:800; font-size:.82rem; margin:14px 0 6px; color:var(--ink-soft); }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password], .admin-form textarea, .admin-form select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid oklch(24% 0.03 50/.18); font:inherit; font-size:.95rem;
}
.admin-form textarea{ min-height:70px; resize:vertical; }
.btn{ display:inline-flex; align-items:center; gap:6px; background:var(--green); color:#fff; padding:10px 18px; border-radius:999px; font-weight:800; font-size:.85rem; }
.btn:hover{ background:var(--green-dark); color:#fff; }
.btn.secondary{ background:var(--orange-tint); color:var(--orange-dark); }
.btn.secondary:hover{ background:var(--orange); color:#fff; }
.btn.danger{ background:var(--pink-tint); color:var(--pink); }
.pill-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; padding:5px 12px; border-radius:999px; }
.pill-toggle.on{ background:var(--green-tint); color:var(--green-dark); }
.pill-toggle.off{ background:oklch(24% 0.03 50/.1); color:var(--ink-soft); }
.admin-flash{ padding:12px 16px; border-radius:12px; margin-bottom:16px; font-weight:700; font-size:.9rem; }
.admin-flash.ok{ background:var(--green-tint); color:var(--green-dark); }
.admin-flash.err{ background:var(--pink-tint); color:var(--pink); }
.login-box{ max-width:360px; margin:80px auto; background:var(--cream); padding:32px 28px; border-radius:20px; box-shadow:var(--shadow); }
.login-box h1{ font-size:1.3rem; margin-bottom:18px; text-align:center; }