/* LARAI / Tomsy — concepto editorial urbano crema. SOLO variante local.
   Conserva JS, fotografías reales, precios, lógica y CTA existentes. */
:root{
  color-scheme: light;
  --bg:#F5EFE6;
  --panel:#FFFDF9;
  --ink:#24201D;
  --muted:#685F57;
  --border:#E6D8C8;
  --red:#D91E32;
  --yellow:#D91E32;
  --orange:#A92A37;
}
html{background:#F5EFE6}
body{
  background:#F5EFE6;
  color:var(--ink);
  background-image:radial-gradient(circle at 94% 49%,rgba(217,30,50,.035),transparent 22rem);
}
h2 span{color:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #D91E32;
  outline-offset:3px;
}
.demo-banner{
  background:#101013;
  border-bottom:1px solid #383338;
  color:#F0D7CE;
}
.demo-banner span{color:#D8C4BE}
.topbar{
  max-width:1320px;
  color:#FFFFFF;
  background:#151316;
  padding:17px 32px;
  border:0;
  border-bottom:1px solid #393234;
}
.topbar .brand{color:#FFFFFF}
.topbar .brand span{color:#EF2942}
.topbar .brand small{color:#DCC6C1}
.topbar .outline{color:#FFFFFF;border-color:#686064;background:#272326}
.topbar .outline:hover{background:#3A2A30}
.topbar .outline span{background:#D91E32;color:#fff}
.hero{
  background:#151316;
  color:#FFFFFF;
  max-width:1320px;
  border-radius:0 0 28px 28px;
  padding:48px 42px 58px;
  gap:42px;
  overflow:hidden;
}
.hero:before{background:linear-gradient(128deg,transparent 65%,rgba(217,30,50,.95) 65% 69%,rgba(92,19,31,.35) 69% 85%,transparent 85%)}
.hero h1{color:#FFFFFF;font-size:clamp(63px,8vw,112px);letter-spacing:-2px}
.hero h1 em{color:#FF3E56}
.hero .eyebrow{color:#F4C9C5}
.hero-slogan{color:#FFF9F4}
.hero-secondary{color:#F7E9E2;text-decoration:none}
.hero-secondary:hover{color:#FFFFFF;text-decoration:underline}
.hero-foot{color:#EAD4D0}
.hero .primary{background:#E21F38;border-color:#E21F38;color:#FFFFFF}
.hero .primary:hover{background:#BB172D}
.hero-photo{background:#282125;border:1px solid #544048;border-radius:12px;overflow:hidden}
.hero-photo img{border-radius:8px}
.hero-photo figcaption{color:#FFF8F2;padding:14px 17px}
.hero-photo figcaption span{color:#D2BFB9}
.ticker{background:#D91E32;color:#FFFFFF;border:0;letter-spacing:1px}
.ticker span{color:#FFD6CB}
.menu-section{background:transparent;padding-top:62px}
.menu-section .section-head{margin-bottom:23px}
.menu-section .section-head h2{color:#24201D;font-size:clamp(32px,4vw,54px)}
.menu-section .eyebrow,.group .eyebrow,.sauces-section .eyebrow{color:#A32333}
.menu-section .section-head>p{color:#685F57}
.categories{padding:6px 4px 16px;margin-bottom:22px;scrollbar-color:#D3C1B1 #F5EFE6}
.categories button,.category-link{
  color:#322923;
  background:#FFFDFA;
  border:1px solid #DECEBD;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 2px 7px rgba(74,37,30,.035);
}
.categories button.active{background:#D91E32;border-color:#D91E32;color:#FFFFFF}
.categories button:hover,.category-link:hover{border-color:#D91E32;background:#FFF7F6}
.categories button.active:hover{background:#B8142A}
.category-link{color:#513B35}
#category-status{color:#70645A}
.group{margin-bottom:46px}
.group-heading{border-color:#D8C6B5;padding-bottom:13px}
.group-heading h3{color:#241F1C;font-size:clamp(31px,3vw,42px)}
.food-motif{color:#BD2939;opacity:.4}
.card{
  background:#FFFDFA;
  border:1px solid #E5D7C8;
  border-radius:14px;
  box-shadow:0 7px 22px rgba(45,30,22,.05);
  color:#24201D;
}
.card:hover{border-color:#DAB8A9;box-shadow:0 10px 24px rgba(45,30,22,.08)}
.card h4{color:#24201D}
.card .price{color:#C81930;font-weight:900}
.card p{color:#645950}
.card button{
  background:#D91E32;
  color:#FFFFFF;
  border:1px solid #D91E32;
  border-radius:8px;
  font-weight:800;
  justify-content:space-between;
}
.card button:hover{background:#AD1529;color:#FFFFFF}
.menu-photo,.category-body>.menu-photo{
  background:#FFFDF9;
  border:1px solid #E3D3C3;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(41,29,20,.06);
  overflow:hidden;
}
.menu-photo img{display:block;border-radius:9px}
.menu-photo figcaption{color:#241F1C;background:#FFFDF9}
.menu-photo strong{color:#241F1C}
.menu-photo figcaption span{color:#6D6055}
.pasta-art{
  background:#F0E3D5;
  border:1px solid #DFCBBB;
  border-radius:14px;
  color:#9E4A4A;
}
.pasta-art span{color:#684E46}
.sauces-section{
  color:#241F1C;
  background:#EFE3D5;
  border:1px solid #DECCBA;
  border-left:5px solid #D91E32;
  border-radius:14px;
}
.sauces-section h2{color:#241F1C}
.sauces-section .outline{color:#56272B;border-color:#CDAFA7;background:#FFFDF9}
.sauce-grid article{
  background:#FFFDFA;
  border:1px solid #DFCEBD;
  border-radius:10px;
}
.sauce-grid h3{color:#241F1C}
.sauce-grid span{color:#BB1F32}
.sauces-section .muted{color:#66584F}
footer{
  color:#FFF6F1;
  background:#161417;
  border:0;
  max-width:1320px;
  padding-top:44px;
  padding-bottom:110px;
  border-radius:22px 22px 0 0;
}
footer .brand{color:#FFFFFF}
footer .brand span{color:#FA354C}
footer p,footer small{color:#D0C0BC}
footer a{color:#FFFFFF}
dialog{
  background:#FFF9F1;
  color:#24201D;
  border:1px solid #DFCEBB;
  border-top:5px solid #D91E32;
  border-radius:16px;
  box-shadow:0 25px 90px rgba(8,4,4,.43);
}
dialog::backdrop{background:rgba(8,5,6,.74)}
dialog h2,dialog h3{color:#241F1C}
dialog h2 span{color:#C81930}
dialog .eyebrow{color:#A72438}
dialog p{color:#62574F}
dialog p.price{color:#C81930}
dialog .muted{color:#675C53}
.close{background:#292326;color:#FFFFFF}
label{color:#382D28}
input,select,textarea{
  color:#241F1C;
  border:1px solid #C8B7A6;
  background:#FFFFFF;
  border-radius:9px;
}
input::placeholder,textarea::placeholder{color:#77695E}
input:focus,select:focus,textarea:focus{border-color:#D91E32}
.notice{
  background:#FFF0EB;
  border:1px solid #E2C0B5;
  color:#76313A;
}
.cart-line{border-bottom:1px solid #E5D7C9}
.cart-line h3,.cart-line .line-top strong{color:#24201D}
.cart-line p{color:#655A52}
.cart-line .included-details summary{color:#5F3D3C}
.controls button{
  background:#FFFFFF;
  color:#332821;
  border:1px solid #D5C5B5;
  border-radius:8px;
}
.controls button:hover{border-color:#D91E32;background:#FFF1F1}
.subtotal{
  color:#C81930;
  border-top:1px solid #E6D8CA;
}
.pickup-summary{color:#615449}
#customer-form>.muted{
  background:#F4EADF;
  color:#5F5049;
  border:1px solid #E4D3C0;
}
.whatsapp-help{color:#62584F}
#toast{background:#211B1D;color:#FFFFFF}
.primary{background:#D91E32;border-color:#D91E32;color:#FFFFFF}
.primary:hover{background:#B5152C}
.floating{background:#D91E32;color:#FFFFFF;box-shadow:0 9px 28px rgba(64,13,25,.25)}
@media(max-width:650px){
  .topbar{padding:17px 18px}
  .hero{padding:30px 20px 32px;border-radius:0 0 18px 18px;gap:24px}
  .hero h1{font-size:70px}
  .hero:before{background:linear-gradient(124deg,transparent 67%,rgba(217,30,50,.8) 67% 71%,transparent 71%)}
  .menu-section{padding:36px 18px}
  .categories button,.category-link{padding:11px 16px}
  .card{padding:20px;border-radius:12px}
  .menu-photo,.category-body>.menu-photo{border-radius:12px}
  .sauces-section{margin:0 18px 34px;padding:24px 18px}
  footer{padding:38px 20px 110px;border-radius:18px 18px 0 0}
  dialog{width:min(580px,calc(100% - 16px));max-height:calc(100dvh - 12px);padding:26px 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* Cierre visual: accesos directos con iconos y telefono. */
.footer-contact{display:flex;flex-direction:column;gap:20px;min-width:0}
.footer-contact .footer-address{margin:0;line-height:1.7}
.contact-links{display:flex;flex-wrap:wrap;gap:12px}
footer .contact-chip{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:46px;padding:12px 14px;margin:0;
 border:1px solid #575054;border-radius:8px;
 background:#282429;color:#FFFFFF;
 font-size:13px;font-weight:700;line-height:20px;
 text-decoration:none;white-space:nowrap;
 transition:background-color 180ms ease,border-color 180ms ease;
}
footer .contact-chip:hover{background:#393035;border-color:#ED3B50}
footer .contact-chip:focus-visible{outline:3px solid #F05B6D;outline-offset:3px}
.contact-icon{display:block;width:20px;height:20px;flex:0 0 20px}
.location-icon{color:#F43C53}
.footer-contact .footer-phone{display:flex;flex-direction:column;gap:5px;margin:0}
.footer-phone>span{font-size:11px;color:#DDC8C1}
footer .footer-phone a{margin:0;font-size:16px;color:#FFFFFF;text-decoration:none;line-height:1.6;width:fit-content;font-weight:800}
footer .footer-phone a:hover{text-decoration:underline}
@media(max-width:650px){footer{gap:26px}.footer-contact{width:100%}.contact-links{gap:10px}footer .contact-chip{padding:12px}}