:root {
  --paper: #fbf8f0;
  --paper-deep: #eadbbd;
  --ink: #0d0d0c;
  --wine: #b38a44;
  --wine-dark: #171511;
  --gold: #c9a661;
  --gold-soft: #e4c888;
  --forest: #191916;
  --line: rgba(13, 13, 12, .16);
  --card: rgba(255, 253, 248, .92);
  --shadow: 0 18px 42px -28px rgba(13, 13, 12, .35);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(78, 40, 17, .22) .7px, transparent .7px); background-size: 5px 5px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(228, 200, 136, .28); background: rgba(10, 10, 9, .97); backdrop-filter: blur(11px); color: #fff9ec; }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #000 url("assets/logo-deli-huapi.png") center / cover no-repeat; color: transparent; font-size: 0; }
.brand-name { display: grid; line-height: 1; }
.brand-name strong { font-family: "Playfair Display", Georgia, serif; font-size: 21px; letter-spacing: -.035em; }
.brand-name small { margin-top: 4px; color: var(--gold-soft); font-family: "Sacramento", cursive; font-size: 16px; line-height: .7; }
.nav-menu { display: flex; align-items: center; gap: 27px; margin-left: auto; }
.nav-menu a { padding: 10px 0; color: rgba(255, 249, 236, .78); font-size: 13px; font-weight: 700; transition: color .18s ease; }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold-soft); }
.nav-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--gold-soft); border-radius: 999px; color: #fff9ec; font-size: 13px; font-weight: 700; }
.nav-action:hover { background: var(--gold-soft); color: var(--wine-dark); }
.menu-toggle { display: none; width: 40px; height: 40px; padding: 8px; border: 1px solid rgba(255, 249, 236, .58); border-radius: 50%; background: transparent; color: #fff9ec; }
.menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 47px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 800; transition: transform .18s ease, background .18s ease, color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--wine); color: #fffaf0; box-shadow: 0 11px 23px -13px rgba(100, 21, 16, .75); }
.button-primary:hover { background: var(--wine-dark); }
.button-ghost { border-color: var(--wine); color: var(--wine); }
.button-ghost:hover { background: var(--wine); color: #fffaf0; }
.button-light { background: #fffaf0; color: var(--wine-dark); }
.button-arrow { font-size: 20px; line-height: .5; }

.home-hero { position: relative; overflow: hidden; min-height: 645px; padding: 108px 0 92px; background: linear-gradient(90deg, rgba(8, 8, 7, .94) 0%, rgba(12, 12, 10, .78) 46%, rgba(12, 12, 10, .22) 100%), url("assets/hero-empanadas.jpg") center / cover; color: #fffaf0; }
.home-hero::before, .home-hero::after { content: ""; position: absolute; pointer-events: none; }
.home-hero::before { width: 620px; height: 620px; right: -175px; top: -200px; border: 1px solid rgba(232, 199, 120, .33); border-radius: 49% 51% 54% 46% / 44% 52% 48% 56%; box-shadow: inset 0 0 0 38px rgba(232, 199, 120, .035), inset 0 0 0 80px rgba(232, 199, 120, .03); transform: rotate(19deg); }
.home-hero::after { left: -42px; bottom: -42px; width: 260px; height: 260px; border: 1px solid rgba(232, 199, 120, .24); border-radius: 50%; box-shadow: 70px -48px 0 -18px rgba(232, 199, 120, .07), 120px 24px 0 -44px rgba(232, 199, 120, .08); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 660px); align-items: center; gap: 58px; }
.home-hero h1 { max-width: 680px; color: #fffaf0; font-size: clamp(51px, 6.1vw, 82px); line-height: .98; letter-spacing: -.055em; }
.home-hero h1 em { color: var(--gold-soft); font-weight: 600; }
.home-hero .eyebrow { color: var(--gold-soft); }
.hero-lede { max-width: 500px; margin: 23px 0 31px; color: rgba(255, 250, 240, .82); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badge { position: relative; width: min(100%, 410px); justify-self: end; padding: 31px 31px 28px; border: 1px solid rgba(232, 199, 120, .54); border-radius: 50% 50% 46% 48% / 52% 48% 50% 46%; background: rgba(20, 11, 7, .25); text-align: center; transform: rotate(4deg); }
.hero-badge::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(232, 199, 120, .3); border-radius: inherit; }
.hero-badge p { position: relative; margin: 0; }
.badge-title { color: #fff9ef; font-family: "Playfair Display", Georgia, serif; font-size: clamp(34px, 4vw, 54px); font-weight: 700; line-height: .95; letter-spacing: -.06em; }
.badge-sub { margin-top: 15px !important; color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.badge-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 27px !important; }
.badge-list span { border: 1px solid rgba(255, 249, 236, .35); border-radius: 999px; padding: 6px 10px; color: rgba(255, 249, 236, .9); font-size: 10px; font-weight: 700; }
.hero-note { position: absolute; right: 0; bottom: 0; color: rgba(255, 250, 240, .56); font-family: "Sacramento", cursive; font-size: 26px; transform: rotate(-4deg); }

.section { padding: 104px 0; }
.section-header { max-width: 660px; margin-bottom: 39px; }
.section-header h2 { font-size: clamp(37px, 4.1vw, 56px); line-height: 1.05; letter-spacing: -.045em; }
.section-header p:not(.eyebrow) { margin: 16px 0 0; color: rgba(42, 23, 17, .68); font-size: 16px; line-height: 1.65; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.category-card { display: flex; min-height: 405px; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-deep); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.category-card:hover { box-shadow: 0 21px 42px -24px rgba(61, 29, 15, .5); transform: translateY(-6px); }
.category-image { height: 171px; border-radius: 12px; background-repeat: no-repeat; background-position: center; background-size: cover; }
.image-empanadas { background-image: url("assets/empanadas-nuevas.png"); background-position: center 56%; }
.image-pizzas { background-image: url("assets/pizzas.jpg"); background-position: center; }
.image-postres { background-image: url("assets/mendocinos.jpg"); background-position: center; }
.image-masas { background-image: url("assets/masas-empanadas-nuevas.png"); background-position: center; }
.image-sopaipillas { background-image: url("assets/sopaipillas-nuevas.png"); background-position: center; }
.category-card h3 { margin: 18px 0 10px; font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.category-card p { min-height: 67px; margin: 0 0 18px; color: rgba(42, 23, 17, .7); font-size: 13px; line-height: 1.6; }
.category-card .button { align-self: flex-start; margin-top: auto; min-height: 39px; padding: 0 15px; border-color: var(--wine); background: var(--wine); color: #fffaf0; font-size: 12px; }
.category-card .button:hover { background: var(--wine-dark); color: #fffaf0; }

.info-strip { padding: 61px 0; background: var(--forest); color: #fffaf0; }
.info-strip-grid { display: grid; grid-template-columns: 1.03fr 1fr 1fr; align-items: center; gap: 40px; }
.info-strip h2 { color: #fffaf0; font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -.045em; }
.info-strip p { margin: 0; color: rgba(255, 250, 240, .72); line-height: 1.65; }
.info-pill { padding-left: 23px; border-left: 1px solid rgba(255, 250, 240, .3); }
.info-pill strong { display: block; margin-bottom: 6px; color: var(--gold-soft); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.delivery-section { padding: 76px 0; border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.delivery-layout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 30px; }
.delivery-truck { width: 150px; height: auto; }
.delivery-section .eyebrow { margin-bottom: 8px; color: var(--wine-dark); }
.delivery-section h2 { max-width: 730px; margin: 0; font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -.045em; }
.delivery-section p:not(.eyebrow) { margin: 11px 0 0; color: rgba(13,13,12,.7); line-height: 1.6; }

.dough-sizes { display: flex; align-items: end; gap: 16px; min-height: 132px; margin: 25px 0 34px; padding: 18px 21px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.75); }
.dough-size { display: grid; flex: none; place-items: center; border: 2px solid rgba(179,138,68,.78); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #e6c887); color: var(--ink); font-family: "Playfair Display", Georgia, serif; font-weight: 700; box-shadow: inset -6px -7px 12px rgba(103,72,25,.12); }
.dough-size span { font-size: 18px; line-height: 1; }.dough-size small { margin-top: 1px; font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.size-12 { width: 55px; height: 55px; }.size-15 { width: 69px; height: 69px; }.size-18 { width: 84px; height: 84px; }.size-20 { width: 94px; height: 94px; }.size-22 { width: 103px; height: 103px; }

.mobile-section { overflow: hidden; background: #fdf9f0; }
.mobile-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); align-items: center; gap: 65px; }
.mobile-copy h2 { font-size: clamp(37px, 4.1vw, 55px); line-height: 1.04; letter-spacing: -.045em; }
.mobile-copy > p:not(.eyebrow) { max-width: 500px; margin: 19px 0 28px; color: rgba(42, 23, 17, .7); line-height: 1.68; }
.mobile-list { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.mobile-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.mobile-list i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--wine); color: #fffaf0; font-style: normal; font-size: 13px; }
.phone-scene { position: relative; height: 430px; }
.phone { position: absolute; overflow: hidden; width: 220px; height: 410px; border: 8px solid #2a1711; border-radius: 34px; background: #f5ead8; box-shadow: 0 25px 37px -17px rgba(42, 23, 17, .42); }
.phone-one { top: 0; left: 10%; transform: rotate(-8deg); }
.phone-two { right: 8%; bottom: 0; transform: rotate(9deg); }
.phone-notch { width: 73px; height: 16px; margin: -1px auto 13px; border-radius: 0 0 11px 11px; background: #2a1711; }
.phone-screen { min-height: 100%; padding: 0 13px 13px; background: linear-gradient(150deg, #fffaf0 0%, #ead3b5 100%); }
.phone-brand { padding: 7px 0 13px; color: var(--wine); font-family: "Playfair Display", Georgia, serif; font-size: 15px; font-weight: 700; text-align: center; }
.phone-title { margin: 18px 0 14px; font-family: "Playfair Display", Georgia, serif; font-size: 22px; line-height: 1; }
.phone-order { margin-bottom: 10px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.65); box-shadow: 0 6px 11px -9px rgba(42,23,17,.45); font-size: 10px; }
.phone-order strong { display: block; margin-bottom: 3px; color: var(--wine); }
.phone-line { height: 7px; margin-top: 7px; border-radius: 6px; background: rgba(42,23,17,.14); }
.phone-line.short { width: 55%; }
.phone-cta { margin-top: 14px; padding: 10px 7px; border-radius: 8px; background: var(--wine); color: #fffaf0; font-size: 10px; font-weight: 800; text-align: center; }

.site-footer { padding: 64px 0 25px; background: var(--ink); color: #fff9ed; }
.footer-top { display: grid; grid-template-columns: 1.15fr .65fr .7fr 1fr; gap: 35px; padding-bottom: 43px; }
.footer-top h2 { margin: 0 0 13px; color: #fff9ed; font-size: 34px; letter-spacing: -.045em; }
.footer-logo { display: none; }
.footer-top p { max-width: 395px; margin: 0; color: rgba(255, 249, 237, .67); font-size: 14px; line-height: 1.65; }
.footer-label { margin-bottom: 14px; color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.footer-links { display: grid; gap: 9px; font-size: 14px; }
.footer-links a { color: rgba(255, 249, 237, .78); }
.footer-links a:hover { color: var(--gold-soft); }
.social-links { display: grid; gap: 10px; }
.social-links a { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 249, 237, .8); font-size: 13px; }
.social-links img { width: 24px; height: 24px; }
.social-links a:hover { color: var(--gold-soft); }
.footer-whatsapp { display: inline-flex; margin-bottom: 16px; color: #fff9ed; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.payment-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.payment-methods > * { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 6px; border: 1px solid rgba(255,249,237,.35); border-radius: 4px; color: #fff9ed; font-family: Arial, sans-serif; font-size: 9px; font-style: normal; letter-spacing: -.02em; line-height: .9; }
.payment-methods b { color: #76a7ea; font-size: 11px; font-style: italic; }.payment-methods strong { color: #ed8470; font-size: 8px; }.payment-methods i { color: #c4e3f2; font-size: 8px; text-transform: lowercase; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 21px; border-top: 1px solid rgba(255, 249, 237, .16); color: rgba(255, 249, 237, .55); font-size: 12px; }
.footer-bottom a { color: var(--gold-soft); }

.page-hero { padding: 82px 0 76px; background: linear-gradient(125deg, #090909, #242015); color: #fffaf0; }
.page-hero .breadcrumb { display: inline-flex; gap: 8px; margin-bottom: 28px; color: var(--gold-soft); font-size: 12px; font-weight: 700; }
.page-hero .breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 { max-width: 800px; color: #fffaf0; font-size: clamp(47px, 6vw, 75px); line-height: .98; letter-spacing: -.055em; }
.page-hero p { max-width: 620px; margin: 20px 0 0; color: rgba(255,250,240,.77); font-size: 16px; line-height: 1.65; }
.page-hero .status-chip { display: inline-block; margin: 0 0 18px; padding: 7px 11px; border: 1px solid rgba(232, 199, 120, .55); border-radius: 999px; color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing: .1em; }

.catalog-page { padding: 82px 0 105px; }
.catalog-layout { display: grid; grid-template-columns: 1fr 300px; align-items: start; gap: 30px; }
.catalog-intro { margin-bottom: 25px; }
.catalog-intro h2 { font-size: 42px; letter-spacing: -.045em; }
.catalog-intro p { margin: 11px 0 0; color: rgba(42,23,17,.67); line-height: 1.65; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-item { min-height: 145px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper-deep); box-shadow: var(--shadow); }
.product-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.product-item h3 { font-size: 23px; letter-spacing: -.04em; }
.product-item .flavor { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.price-row { display: flex; justify-content: space-between; gap: 16px; padding-top: 9px; border-top: 1px solid var(--line); }
.price-row + .price-row { margin-top: 8px; }
.price-row span { color: rgba(42,23,17,.62); font-size: 12px; }
.price-row strong { color: var(--wine-dark); font-size: 14px; }
.catalog-aside { position: sticky; top: 99px; width: 100%; max-width: 260px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,252,245,.86); box-shadow: var(--shadow); }
.catalog-aside img { width: 100%; height: 220px; border-radius: 10px; object-fit: cover; object-position: center; }
.catalog-aside p { margin: 12px 2px 0; color: rgba(42,23,17,.68); font-size: 12px; line-height: 1.45; }
.catalog-aside .button { width: 100%; min-height: 38px; margin-top: 12px; padding: 0 12px; font-size: 11px; }
.product-section-title { margin: 42px 0 16px; color: var(--wine-dark); font-family: "Playfair Display", Georgia, serif; font-size: 31px; letter-spacing: -.04em; }
.product-section-title::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 9px; background: var(--gold); }
.catalog-group-note { margin: -7px 0 16px; color: rgba(42,23,17,.67); font-size: 13px; line-height: 1.5; }

.empty-page { display: grid; min-height: 390px; place-items: center; text-align: center; }
.empty-card { width: min(100%, 600px); padding: 55px 35px; border: 1px dashed rgba(143,32,29,.38); border-radius: 22px; background: rgba(255,252,245,.56); }
.empty-icon { display: grid; width: 69px; height: 69px; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: var(--paper-deep); color: var(--wine); font-family: "Playfair Display", Georgia, serif; font-size: 32px; }
.empty-card h2 { font-size: 43px; letter-spacing: -.05em; }
.empty-card p { max-width: 390px; margin: 14px auto 24px; color: rgba(42,23,17,.67); line-height: 1.65; }

.wa-float { display: grid; position: fixed; right: 23px; bottom: 23px; z-index: 30; width: 58px; height: 58px; place-items: center; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.wa-float img { display: block; width: 58px; height: 58px; border-radius: 50%; filter: none; }
.wa-float:hover { transform: scale(1.06); }

@media (max-width: 980px) {
  .nav-menu { gap: 17px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr 255px; }
}

@media (max-width: 730px) {
  .wrap { width: min(100% - 36px, 1180px); }
  .site-header { position: relative; }
  .nav { min-height: 69px; }
  .menu-toggle { display: block; }
  .nav-menu { display: none; position: absolute; top: 69px; left: 0; right: 0; z-index: 4; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 16px; border-bottom: 1px solid rgba(255,252,245,.18); background: var(--ink); }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 13px 0; border-bottom: 1px solid rgba(255,252,245,.12); }
  .nav-menu a:last-child { border: 0; }
  .nav-action { display: none; }
  .home-hero { min-height: auto; padding: 74px 0 92px; }
  .hero-layout { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: clamp(47px, 14.5vw, 67px); }
  .hero-note { right: auto; left: 7px; bottom: -44px; }
  .section { padding: 71px 0; }
  .category-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 0; }
  .category-card h3 { margin-top: 18px; }
  .category-card p { min-height: auto; }
  .info-strip-grid, .footer-top { grid-template-columns: 1fr; }
  .info-strip-grid { gap: 27px; }
  .info-pill { padding-left: 15px; }
  .delivery-section { padding: 59px 0; }
  .delivery-layout { grid-template-columns: 1fr; gap: 18px; }
  .delivery-truck { width: 126px; }
  .delivery-layout .button { width: 100%; }
  .dough-sizes { justify-content: space-between; gap: 8px; padding: 14px 9px; }
  .size-12 { width: 36px; height: 36px; }.size-15 { width: 42px; height: 42px; }.size-18 { width: 51px; height: 51px; }.size-20 { width: 58px; height: 58px; }.size-22 { width: 66px; height: 66px; }
  .dough-size span { font-size: 15px; }
  .footer-top { gap: 28px; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 11px; }
  .page-hero { padding: 62px 0; }
  .page-hero h1 { font-size: clamp(44px, 13vw, 61px); }
  .catalog-page { padding: 62px 0 75px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-aside { position: static; order: -1; }
  .catalog-aside img { height: min(52vw, 265px); object-position: center; }
  .product-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .brand-mark { width: 45px; height: 45px; }
  .brand-name strong { font-size: 19px; }
  .hero-actions .button { width: 100%; }
  .empty-card { padding: 43px 22px; }
}