:root{--cream:#efe0bd;--red:#b02421;--green:#32472b;--wood:#32180d;--ink:#20150e}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#21120b;color:var(--ink);font-family:Georgia,'Times New Roman',serif}
.desktop-site{display:block}
.mockup-wrap{position:relative;max-width:1920px;margin:0 auto;line-height:0;background:#000}
.mockup{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:3}
.home{left:29.6%;top:0.8%;width:5.1%;height:5.2%}
.salsas{left:35.9%;top:0.8%;width:7.5%;height:5.2%}
.story{left:43.6%;top:0.8%;width:6.8%;height:5.2%}
.find{left:51.1%;top:0.8%;width:11.3%;height:5.2%}
.contact{left:62.0%;top:0.8%;width:6.8%;height:5.2%}
.hero-button{left:10.4%;top:35.4%;width:13.8%;height:5.8%}
.email{left:76.0%;top:89.0%;width:18.0%;height:4.8%}
.mobile-site{display:none}
footer{background:#1a0f0a;color:#cfbdac;text-align:center;padding:15px 18px;font-family:Arial,sans-serif;font-size:14px}

@media(max-width:760px){
  .desktop-site{display:none}
  .mobile-site{display:block;background:var(--cream)}
  .mobile-hero{
    text-align:center;color:white;padding:38px 18px 34px;
    background:linear-gradient(rgba(45,24,14,.56),rgba(45,24,14,.80)),
               radial-gradient(circle at 65% 20%,#b27342 0,#764224 48%,#3d2115 100%);
    border-bottom:7px solid #7e3e25
  }
  .mobile-logo{display:block;width:min(360px,94%);margin:0 auto 24px;background:white;border-radius:50%;box-shadow:0 12px 28px #0006}
  .mobile-hero h1{font-size:46px;line-height:.95;margin:0 0 18px;text-shadow:0 3px 7px #0008}
  .mobile-hero>p{font-size:23px;line-height:1.15;margin-bottom:20px}
  .btn{display:inline-block;background:#be2f28;color:white;text-decoration:none;padding:15px 23px;border-radius:5px;font-weight:bold}
  .mobile-highlights{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px auto 0;max-width:420px;font-size:13px;text-transform:uppercase;font-weight:bold}
  .mobile-highlights span{padding:12px 8px;border-top:1px solid #d9c2a6}
  .mobile-products{padding:45px 18px}
  .mobile-products h2,.story-section h2,.find-section h2,.contact-section h2{text-align:center;font-size:34px;margin:0 0 8px}
  .subtitle{text-align:center;text-transform:uppercase;font-weight:bold;letter-spacing:.06em}
  .cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px}
  .cards article{background:#fff8e8;border-radius:14px;overflow:hidden;text-align:center;box-shadow:0 8px 18px #4c2f1728}
  .cards img{display:block;width:100%;height:225px;object-fit:cover}
  .cards h3{margin:0;background:#b62924;color:#fff;padding:10px}
  .cards p{padding:0 16px 18px;margin:12px 0 0}
  .story-section{padding:46px 20px;background:linear-gradient(90deg,#35190d,#532a15);color:white}
  .story-section p{line-height:1.65}
  .quote{text-align:center;font-style:italic;font-size:29px;margin-top:28px}
  .find-section{padding:42px 20px;background:var(--green);color:#fff;text-align:center}
  .contact-section{padding:42px 20px;text-align:center}
  .contact-section a{font-size:20px;color:var(--red);font-weight:bold}
}