:root{
    --bg:#faf8f4;
    --bg-alt:#f1ece1;
    --panel:#ffffff;
    --gold:#c9a24b;
    --gold-light:#a9823a;
    --wine:#7c2430;
    --wine-light:#a3384a;
    --cream:#221c16;
    --muted:#6e6453;
    --line: rgba(160,128,60,0.28);
    /* texto del header mientras está sobre las franjas oscuras (hero,
       cabeceras internas) — fijo, independiente del tema general claro */
    --header-text:#f4eee1;
    --header-text-muted:#cbbfa0;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background-color:var(--bg);
    color:var(--cream);
    font-family:'Jost', sans-serif;
    font-weight:400;
    line-height:1.7;
    overflow-x:hidden;
  }

  img{ max-width:100%; display:block; }

  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }

  h1,h2,h3{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.02em;
    font-weight:400;
    color:var(--cream);
  }

  .script{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:500;
    color:var(--gold-light);
  }

  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
  }

  /* ---------- corner-dot plaque, signature motif from the brand's own print pieces ---------- */
  .plaque{
    position:relative;
    border:1px solid var(--line);
    padding: clamp(1.75rem, 4vw, 3rem);
  }
  .plaque .dot{
    position:absolute;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 8px rgba(201,162,75,0.6);
  }
  .plaque .dot.tl{ top:-4px; left:-4px; }
  .plaque .dot.tr{ top:-4px; right:-4px; }
  .plaque .dot.bl{ bottom:-4px; left:-4px; }
  .plaque .dot.br{ bottom:-4px; right:-4px; }

  .rule{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin: 1rem 0 1.5rem;
  }
  .rule::before, .rule::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--line);
  }
  .rule .dot-mid{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold);
  }

  /* ---------- marquee bar ---------- */
  .marquee-bar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:110;
    height:38px;
    background:#f4eee1;
    border-bottom:1px solid var(--gold);
    overflow:hidden;
    display:flex;
    align-items:center;
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation: marquee-scroll 24s linear infinite;
  }
  .marquee-content{ display:flex; flex-shrink:0; }
  .marquee-content span{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0 2.2rem;
    font-size:0.76rem;
    letter-spacing:0.04em;
    font-weight:600;
    color:var(--wine);
    white-space:nowrap;
  }
  .marquee-content span::before{ content:'🚚'; font-size:0.85rem; }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  /* ---------- header ---------- */
  header{
    position:fixed;
    top:38px;
    left:0; right:0;
    z-index:100;
    background:transparent;
    border-bottom:1px solid transparent;
    transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0.6rem clamp(1.25rem, 4vw, 3rem);
    max-width:1180px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .brand img{ height:72px; width:auto; transition: height 0.25s; }
  .brand-name{
    font-family:'Bebas Neue', sans-serif;
    font-size:1.1rem;
    letter-spacing:0.14em;
    line-height:1;
    color:var(--header-text);
    transition: color 0.25s;
  }
  .brand-name span{ display:block; font-size:0.55rem; letter-spacing:0.2em; color:var(--header-text-muted); font-family:'Jost',sans-serif; font-weight:400; margin-top:2px; transition: color 0.25s; }

  .nav-links{
    display:flex;
    align-items:center;
    gap:1.5rem;
    font-size:1rem;
    letter-spacing:0.02em;
  }
  .nav-links a{
    color:var(--header-text);
    transition:color 0.25s;
    position:relative;
  }
  .nav-links a:hover{ color:var(--gold-light); }

  header.scrolled .brand-name{ color:#181310; }
  header.scrolled .brand-name span{ color:#8a7d64; }
  header.scrolled .nav-links a{ color:#2a221b; }
  header.scrolled .nav-links a:hover{ color:var(--gold); }

  .nav-item{ position:relative; }
  .nav-item > a::after{ content:'▾'; font-size:0.65em; margin-left:0.3em; opacity:0.7; }
  .dropdown{
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%) translateY(6px);
    background:var(--panel);
    border:1px solid var(--line);
    min-width:190px;
    padding:0.4rem 0;
    opacity:0; visibility:hidden;
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index:120;
  }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown{
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  .dropdown a{
    display:block;
    padding:0.6rem 1.3rem;
    font-size:0.92rem;
    color:var(--muted);
  }
  .dropdown a::after{ content:none; }
  .dropdown a:hover{ color:var(--gold-light); background:rgba(201,162,75,0.08); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.7rem 1.5rem;
    font-size:0.82rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:500;
    border:1px solid var(--gold);
    transition: all 0.25s ease;
    white-space:nowrap;
  }
  .btn-solid{
    background:var(--gold);
    color:#161310;
  }
  .btn-solid:hover{ background:var(--gold-light); border-color:var(--gold-light); }
  .btn-ghost{
    color:var(--gold-light);
    background:transparent;
  }
  .btn-ghost:hover{ background:rgba(201,162,75,0.1); }

  .menu-toggle{ display:none; background:none; border:none; color:var(--gold); font-size:1.6rem; cursor:pointer; }

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    padding: calc(7rem + 38px) 0 5rem;
    position:relative;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    z-index:-1;
  }
  .hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition: opacity 1.4s ease;
  }
  .hero-slide.active{ opacity:1; }
  .hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: 50% 30%;
  }
  .hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(0deg, rgba(11,10,9,0.96) 0%, rgba(11,10,9,0.72) 32%, rgba(11,10,9,0.28) 62%, rgba(11,10,9,0.55) 100%);
  }

  /* ---------- hero carousel controls ---------- */
  .hero-dots{
    position:absolute;
    bottom:4.2rem; left:50%;
    transform:translateX(-50%);
    display:flex; gap:0.6rem;
    z-index:3;
  }
  .hero-dots button{
    width:9px; height:9px; border-radius:50%;
    background:rgba(244,238,225,0.35);
    border:1px solid rgba(244,238,225,0.5);
    cursor:pointer;
    padding:0;
    transition: background 0.25s, transform 0.25s;
  }
  .hero-dots button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.25); }
  .hero-arrow{
    position:absolute;
    top:50%; transform:translateY(-50%);
    z-index:3;
    width:42px; height:42px;
    border-radius:50%;
    background:rgba(11,10,9,0.45);
    border:1px solid var(--line);
    color:var(--gold-light);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .hero-arrow:hover{ background:rgba(11,10,9,0.75); border-color:var(--gold); }
  .hero-arrow svg{ width:18px; height:18px; }
  .hero-arrow.prev{ left:1.2rem; }
  .hero-arrow.next{ right:1.2rem; }
  @media (max-width:900px){
    .hero-arrow{ display:none; }
    .hero-dots{ bottom:3.4rem; }
  }
  .hero .container{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items:center;
    max-width:1180px;
  }
  .hero h1{
    font-size:clamp(2.8rem, 6vw, 4.6rem);
    line-height:0.98;
    margin: 0.6rem 0 1.4rem;
    text-shadow: 0 3px 16px rgba(0,0,0,0.5);
    color:var(--header-text);
  }
  .hero h1 .accent{
    color:var(--gold);
    display:inline-block;
    min-width:9.5ch;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity:1;
    transform:translateY(0);
  }
  .hero h1 .accent.word-out{
    opacity:0;
    transform:translateY(-16px);
  }
  .hero p.lead{
    font-size:1.15rem;
    color:#d9cdb4;
    max-width:36ch;
    margin-bottom:2.2rem;
    line-height:1.65;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  }
  .hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

  .hero-circle-wrap{ display:flex; justify-content:center; }
  .hero-circle{
    position:relative;
    width: clamp(200px, 24vw, 320px);
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    border:3px solid var(--gold);
    box-shadow: 0 0 0 8px rgba(201,162,75,0.12), 0 20px 50px rgba(0,0,0,0.55);
    transition: border-color 1s ease, box-shadow 1s ease;
  }
  .hero-circle-slide{
    position:absolute; inset:0;
    opacity:0;
    transition: opacity 1.1s ease;
  }
  .hero-circle-slide.active{ opacity:1; }
  .hero-circle-slide picture, .hero-circle-slide img{ display:block; width:100%; height:100%; object-fit:cover; }

  /* ---------- category strip ---------- */
  .category-strip{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: 2.4rem 0;
  }
  .category-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap: clamp(1.6rem, 4vw, 3.2rem);
  }
  .category-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.85rem;
    color:var(--muted);
    font-size:0.8rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:500;
    transition:color 0.2s;
  }
  .category-item .icon-circle{
    width:84px; height:84px;
    display:flex; align-items:center; justify-content:center;
    transition: transform 0.25s, filter 0.25s;
  }
  .category-item .icon-circle img{ width:100%; height:100%; object-fit:contain; }
  .category-item:hover{ color:var(--gold-light); }
  .category-item:hover .icon-circle{
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 18px rgba(201,162,75,0.35));
  }

  /* ---------- section generic ---------- */
  section{ padding: clamp(4rem, 8vw, 7rem) 0; }
  .section-head{ max-width:640px; margin-bottom: 3rem; }
  .section-head h2{ font-size:clamp(2.2rem, 4.2vw, 3.2rem); margin-top:0.5rem; }
  .section-head p{ color:var(--muted); margin-top:1rem; max-width:56ch; font-size:1.05rem; line-height:1.7; }

  /* ---------- value props ---------- */
  .values{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .value-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .value-card{
    background:var(--bg-alt);
    padding: 2.2rem 1.8rem;
    box-shadow: inset 0 1px 0 rgba(201,162,75,0.08), 0 12px 28px rgba(0,0,0,0.28);
    transition: box-shadow 0.25s;
  }
  .value-card:hover{ box-shadow: inset 0 1px 0 rgba(201,162,75,0.14), 0 16px 36px rgba(0,0,0,0.38); }
  .value-card .icon{
    width:38px; height:38px;
    margin-bottom:1.3rem;
    color:var(--gold);
  }
  .value-card h3{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:1.02rem;
    color:var(--cream);
    text-transform:none;
    letter-spacing:0;
    margin-bottom:0.6rem;
  }
  .value-card p{ font-size:1rem; color:var(--muted); line-height:1.6; }

  /* ---------- restaurants section ---------- */
  .restaurants .container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .checklist{ list-style:none; margin-top:1.8rem; }
  .checklist li{
    display:flex;
    gap:0.8rem;
    padding: 0.85rem 0;
    border-bottom:1px solid var(--line);
    font-size:0.96rem;
    color:var(--cream);
  }
  .checklist li:last-child{ border-bottom:none; }
  .checklist li .mark{ color:var(--gold); flex-shrink:0; font-family:'Bebas Neue',sans-serif; }

  .restaurants-panel{
    background:var(--panel);
    padding: clamp(2rem, 4vw, 3rem);
  }
  .restaurants-panel .script{ font-size:1.5rem; display:block; margin-bottom:0.4rem; }
  .restaurants-panel h3{ font-size:1.9rem; margin-bottom:1rem; }
  .restaurants-panel p{ color:var(--muted); font-size:1.02rem; line-height:1.65; }

  /* ---------- featured product ---------- */
  .featured{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .featured .container{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .featured-img{ position:relative; }
  .featured-img img{ width:100%; object-fit:cover; }
  .featured-label{
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(2.6rem, 5vw, 3.6rem);
    color:var(--gold);
    line-height:1;
  }
  .featured-sub{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:var(--cream); letter-spacing:0.06em; margin-bottom:1.2rem;}
  .featured p.desc{ color:var(--muted); margin-bottom:1.8rem; max-width:52ch; }
  .cook-methods{
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem;
  }
  .cook-methods .method{
    text-align:center;
    width:78px;
  }
  .cook-methods .method .icon{
    width:34px; height:34px;
    margin: 0 auto 0.5rem;
    color:var(--gold);
  }
  .cook-methods .method span{
    font-size:0.65rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---------- menu hub (categories) ---------- */
  .menu-hub-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 2px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top: 1rem;
  }
  .menu-hub-card{
    background:var(--bg);
    padding: 2.4rem 2rem;
    display:flex;
    flex-direction:column;
    box-shadow: 0 14px 32px rgba(0,0,0,0.3);
  }
  .menu-hub-card .icon{ width:36px; height:36px; color:var(--gold); margin-bottom:1.3rem; }
  .menu-hub-card h3{ font-family:'Jost',sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:0; margin-bottom:0.6rem; }
  .menu-hub-card p{ color:var(--muted); font-size:1rem; line-height:1.6; margin-bottom:1.4rem; flex-grow:1; }
  .menu-hub-card a{ color:var(--gold-light); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:500; }
  .menu-hub-card a:hover{ color:var(--gold); }

  /* ---------- media grids: combos / precios / otros productos ---------- */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:1rem; }
  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; margin-top:1rem; }

  .media-card{
    border:1px solid var(--line);
    background:var(--panel);
    overflow:hidden;
  }
  .media-card .img-frame{
    position:relative;
    width:100%;
    aspect-ratio: 3 / 4;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .media-card .img-frame img{ width:auto; height:100%; max-width:100%; object-fit:contain; display:block; }
  .media-card .caption{ padding:1.3rem 1.5rem; }
  .media-card .caption h3{
    font-family:'Jost', sans-serif;
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:0;
    color:var(--cream);
    margin-bottom:0.3rem;
  }
  .media-card .caption .price{
    font-family:'Bebas Neue', sans-serif;
    font-size:1.4rem;
    color:var(--gold-light);
    letter-spacing:0.03em;
  }
  .media-card .caption p.note{ color:var(--muted); font-size:0.92rem; line-height:1.55; margin-top:0.4rem; }
  .media-card .caption .btn{ margin-top:1rem; padding:0.6rem 1.1rem; font-size:0.72rem; }

  /* ---------- how to order ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top:1rem;
  }
  .step{
    position:relative;
    padding-top:1.2rem;
    border-top:1px solid var(--line);
  }
  .step .num{
    font-family:'Bebas Neue', sans-serif;
    font-size:2.4rem;
    color:var(--wine-light);
    display:block;
    margin-bottom:0.6rem;
  }
  .step h3{ font-family:'Jost',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:0; color:var(--cream); margin-bottom:0.5rem; }
  .step p{ color:var(--muted); font-size:1rem; line-height:1.6; }

  /* ---------- contact / cta ---------- */
  .contact{
    background: linear-gradient(180deg, var(--bg-alt), var(--bg));
    border-top:1px solid var(--line);
  }
  .contact-panel{
    text-align:center;
    max-width:700px;
    margin:0 auto;
  }
  .contact-panel .script{ font-size:1.6rem; }
  .contact-panel h2{ font-size:clamp(2.4rem,5vw,3.4rem); margin: 0.5rem 0 1.2rem; }
  .contact-panel p{ color:var(--muted); margin-bottom:2.2rem; }
  .contact-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding: 3.5rem 0 2rem;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding-bottom: 2.2rem;
  }
  .footer-brand-col .footer-brand{
    display:flex; align-items:center; gap:0.7rem;
    margin-bottom:1rem;
  }
  .footer-brand-col img{ height:34px; }
  .footer-brand-col .footer-brand span{ font-family:'Bebas Neue',sans-serif; letter-spacing:0.1em; font-size:0.95rem; }
  .footer-brand-col p{ font-size:0.9rem; color:var(--muted); max-width:34ch; line-height:1.6; }
  .footer-col h4{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:1rem;
  }
  .footer-col a, .footer-col p{
    display:block;
    font-size:0.87rem;
    color:var(--muted);
    margin-bottom:0.6rem;
  }
  .footer-col a:hover{ color:var(--gold-light); }
  .footer-bottom{
    border-top:1px solid var(--line);
    padding-top:1.4rem;
    text-align:center;
    font-size:0.75rem;
    color:var(--muted);
    opacity:0.7;
  }

  /* ---------- whatsapp float / back to top ---------- */
  .wa-float{
    position:fixed;
    bottom:1.6rem; right:1.6rem;
    z-index:90;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--gold);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,0.45);
    transition: transform 0.2s;
  }
  .wa-float:hover{ transform:scale(1.08); }
  .wa-float svg{ width:28px; height:28px; color:#161310; }

  .back-top{
    position:fixed;
    bottom:1.75rem; right:5.3rem;
    z-index:90;
    width:44px; height:44px;
    border-radius:50%;
    background:var(--panel);
    border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-light);
    opacity:0; pointer-events:none;
    transition: opacity 0.25s, transform 0.2s;
  }
  .back-top.show{ opacity:1; pointer-events:auto; }
  .back-top:hover{ transform:translateY(-3px); }
  .back-top svg{ width:18px; height:18px; }

  /* ---------- reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    .nav-links{ display:none; }
    .menu-toggle{ display:flex; }
    .hero .container, .restaurants .container, .featured .container{ grid-template-columns:1fr; }
    .hero-circle-wrap{ order:-1; }
    .hero-circle{ width:180px; }
    .value-grid{ grid-template-columns:repeat(2,1fr); }
    .menu-hub-grid{ grid-template-columns:1fr; }
    .grid-3, .grid-2{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; }
    .featured-img{ max-width:340px; margin:0 auto; }
    .footer-grid{ grid-template-columns:1fr; gap:2rem; }
    .category-grid{ gap:1.6rem 1.8rem; }
    .category-item .icon-circle{ width:68px; height:68px; }
  }
  @media (max-width:560px){
    .value-grid{ grid-template-columns:1fr; }
    footer .container{ flex-direction:column; text-align:center; }
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold-light);
    outline-offset:3px;
  }

  /* =========================================================
     NUEVO CSS — secciones agregadas en el rediseño
     ========================================================= */

  /* ---------- header con estado "scrolled" ---------- */
  header.scrolled{
    background:rgba(255,255,255,0.62);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:0 6px 24px rgba(20,15,10,0.12);
    border-bottom-color: rgba(201,162,75,0.35);
  }
  header.scrolled nav{ padding-top:0.5rem; padding-bottom:0.5rem; }
  header.scrolled .brand img{ height:56px; }

  /* ---------- mobile menu ---------- */
  .menu-toggle{
    flex-direction:column;
    gap:5px;
    width:30px;
    padding:0;
  }
  .menu-toggle span{
    display:block; height:2px; width:100%;
    background:var(--gold);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-nav{
    position:fixed;
    top:0; right:0;
    width:min(320px, 84vw);
    height:100%;
    background:var(--panel);
    border-left:1px solid var(--line);
    z-index:200;
    padding: 6rem 2rem 2rem;
    transform:translateX(100%);
    transition: transform 0.35s ease;
    overflow-y:auto;
  }
  .mobile-nav.open{ transform:translateX(0); }
  .mobile-nav a{
    display:block;
    padding:0.9rem 0;
    border-bottom:1px solid var(--line);
    color:var(--cream);
    font-size:1.05rem;
    letter-spacing:0.03em;
  }
  .mobile-nav .btn{ margin-top:1.5rem; width:100%; justify-content:center; }
  .mobile-nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    z-index:190; opacity:0; pointer-events:none; transition:opacity 0.3s;
  }
  .mobile-nav-overlay.open{ opacity:1; pointer-events:auto; }

  /* ---------- hero extras: scroll indicator ---------- */
  .scroll-indicator{
    position:absolute;
    bottom:1.6rem; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
    color:var(--muted);
    font-size:0.68rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    animation: bob 2.2s ease-in-out infinite;
    z-index:2;
  }
  .scroll-indicator svg{ width:16px; height:16px; color:var(--gold); }
  @keyframes bob{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(8px); }
  }

  /* ---------- promotions / countdown ---------- */
  .promo-section{
    position:relative;
    background:
      linear-gradient(180deg, rgba(11,10,9,0.94), rgba(30,10,12,0.92)),
      url('../bg-texture.webp');
    background-size:cover;
    background-position:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .promo-badge{
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--wine);
    color:var(--cream);
    padding:0.4rem 1rem;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:1rem;
  }
  .countdown{
    display:flex; gap:0.9rem; margin: 1.6rem 0 2.2rem;
    flex-wrap:wrap;
  }
  .countdown .cd-box{
    background:var(--panel);
    border:1px solid var(--gold);
    min-width:72px;
    text-align:center;
    padding:0.8rem 0.4rem 0.6rem;
  }
  .countdown .cd-box .num{
    font-family:'Bebas Neue', sans-serif;
    font-size:2rem;
    color:var(--gold-light);
    line-height:1;
    display:block;
  }
  .countdown .cd-box .lbl{
    font-size:0.62rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:0.3rem;
    display:block;
  }
  .promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
  .promo-card{
    background:var(--panel);
    border:1px solid var(--line);
    padding:1.8rem 1.6rem;
    position:relative;
    overflow:hidden;
  }
  .promo-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--wine-light));
  }
  .promo-card .old-price{
    text-decoration:line-through;
    color:var(--muted);
    font-size:0.85rem;
  }
  .promo-card .new-price{
    font-family:'Bebas Neue', sans-serif;
    font-size:2.2rem;
    color:var(--gold-light);
    display:block;
    margin:0.2rem 0 0.8rem;
  }
  .promo-card h3{ font-family:'Jost',sans-serif; font-weight:600; letter-spacing:0; font-size:1.1rem; margin-bottom:0.4rem; }

  /* ---------- catalog controls ---------- */
  .catalog-controls{
    display:flex; flex-wrap:wrap; gap:1rem;
    align-items:center; justify-content:space-between;
    margin-bottom:2rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--line);
  }
  .search-box{
    display:flex; align-items:center; gap:0.6rem;
    border:1px solid var(--line);
    padding:0.65rem 1rem;
    flex:1; min-width:220px; max-width:360px;
  }
  .search-box svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }
  .search-box input{
    background:none; border:none; outline:none;
    color:var(--cream); font-family:'Jost',sans-serif; font-size:0.92rem; width:100%;
  }
  .search-box input::placeholder{ color:var(--muted); }
  .filter-pills{ display:flex; gap:0.6rem; flex-wrap:wrap; }
  .pill{
    padding:0.55rem 1.1rem;
    border:1px solid var(--line);
    font-size:0.78rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--muted);
    cursor:pointer;
    background:none;
    font-family:'Jost',sans-serif;
    transition: all 0.2s;
  }
  .pill.active, .pill:hover{ border-color:var(--gold); color:var(--gold-light); }

  .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    gap:1.1rem;
  }
  .product-card{
    background:var(--panel);
    border:1px solid var(--line);
    display:flex; flex-direction:column;
    box-shadow: 0 10px 22px rgba(0,0,0,0.26);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .product-card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.38); }
  .product-photo{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(201,162,75,0.16), transparent 55%),
      linear-gradient(135deg, #241d18, #14100d 60%, #1b1512);
    display:flex; align-items:center; justify-content:center;
  }
  .product-photo img{ width:100%; height:100%; object-fit:cover; object-position:center center; }
  .product-photo svg{ width:36px; height:36px; color:var(--gold); opacity:0.55; }
  .product-badges{
    position:absolute; top:0.5rem; left:0.5rem;
    display:flex; flex-direction:column; gap:0.3rem;
  }
  .badge{
    font-size:0.56rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    padding:0.22rem 0.45rem;
    background:rgba(11,10,9,0.82);
    border:1px solid var(--gold);
    color:#e9cc82;
  }
  .badge.badge-wine{ border-color:var(--wine-light); color:#f0c3cb; }
  .product-body{ padding:0.85rem 0.9rem 1rem; display:flex; flex-direction:column; flex:1; }
  .product-body h3{ font-family:'Jost',sans-serif; font-weight:600; font-size:0.88rem; letter-spacing:0; color:var(--cream); margin-bottom:0.25rem; line-height:1.25; }
  .product-body .usos{ font-size:0.8rem; color:var(--muted); line-height:1.4; margin-bottom:0.6rem; flex:1; }
  .product-price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.7rem; }
  .product-price{ font-family:'Bebas Neue',sans-serif; font-size:1.2rem; color:var(--gold-light); }
  .product-price small{ font-family:'Jost',sans-serif; font-size:0.6rem; color:var(--muted); text-transform:uppercase; margin-left:0.2rem; }
  .product-actions{ display:flex; gap:0.4rem; }
  .product-actions .btn{ padding:0.45rem 0.6rem; font-size:0.62rem; flex:1; justify-content:center; }
  .add-quote-btn{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; flex-shrink:0;
    border:1px solid var(--line);
    background:none; color:var(--gold-light); cursor:pointer;
    font-size:0.9rem;
    transition: all 0.2s;
  }
  .add-quote-btn svg{ width:16px; height:16px; }
  .add-quote-btn.added{ background:var(--gold); border-color:var(--gold); color:#161310; }
  .no-results{ text-align:center; padding:3rem 1rem; color:var(--muted); display:none; }
  .no-results.show{ display:block; }

  /* ---------- floating quote bar ---------- */
  .quote-bar{
    position:fixed; left:50%; bottom:1.6rem;
    transform:translateX(-50%) translateY(140%);
    z-index:95;
    background:var(--panel);
    border:1px solid var(--gold);
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    padding:0.9rem 1.4rem;
    display:flex; align-items:center; gap:1rem;
    transition: transform 0.3s ease;
    max-width:92vw;
  }
  .quote-bar.show{ transform:translateX(-50%) translateY(0); }
  .quote-bar .qb-count{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:var(--gold-light); white-space:nowrap; }
  .quote-bar .btn{ padding:0.55rem 1rem; font-size:0.72rem; white-space:nowrap; }
  .quote-bar .qb-clear{ color:var(--muted); font-size:0.72rem; text-decoration:underline; white-space:nowrap; cursor:pointer; }

  /* ---------- calculator ---------- */
  .calc-section{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .calc-panel{
    display:grid; grid-template-columns:1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .calc-form{ background:var(--panel); border:1px solid var(--line); padding: clamp(1.75rem, 4vw, 2.6rem); }
  .calc-field{ margin-bottom:1.4rem; }
  .calc-field label{ display:block; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:0.6rem; }
  .calc-field input[type="number"]{
    width:100%; background:var(--bg); border:1px solid var(--line); color:var(--cream);
    padding:0.75rem 1rem; font-family:'Jost',sans-serif; font-size:1rem; outline:none;
  }
  .calc-field input:focus{ border-color:var(--gold); }
  .calc-options{ display:flex; gap:0.7rem; flex-wrap:wrap; }
  .calc-opt{
    flex:1; min-width:120px; text-align:center;
    border:1px solid var(--line); padding:0.7rem 0.5rem; cursor:pointer;
    font-size:0.82rem; color:var(--muted); transition: all 0.2s;
  }
  .calc-opt.active{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,75,0.08); }
  .calc-result{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
  .calc-result .kg{ font-family:'Bebas Neue',sans-serif; font-size:2.6rem; color:var(--gold-light); line-height:1; }
  .calc-result p{ color:var(--muted); font-size:0.96rem; line-height:1.6; margin:0.5rem 0 1.2rem; }

  /* ---------- testimonials ---------- */
  .testi-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
  .testi-card{ background:var(--panel); border:1px solid var(--line); padding:1.9rem 1.7rem; box-shadow: 0 12px 28px rgba(0,0,0,0.28); }
  .testi-stars{ color:var(--gold); font-size:0.9rem; letter-spacing:0.15em; margin-bottom:0.9rem; }
  .testi-card p.quote{ color:var(--cream); font-size:1.04rem; line-height:1.6; margin-bottom:1.3rem; }
  .testi-who{ display:flex; align-items:center; gap:0.7rem; }
  .testi-avatar{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--wine));
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; color:#161310; font-size:0.95rem;
    flex-shrink:0;
  }
  .testi-who .name{ font-size:0.88rem; color:var(--cream); font-weight:500; }
  .testi-who .role{ font-size:0.75rem; color:var(--muted); }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:820px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.3rem 0.2rem; color:var(--cream); font-family:'Jost',sans-serif; font-size:1rem; font-weight:500;
  }
  .faq-q .plus{ flex-shrink:0; width:20px; height:20px; position:relative; }
  .faq-q .plus::before, .faq-q .plus::after{
    content:''; position:absolute; background:var(--gold); transition: transform 0.25s;
  }
  .faq-q .plus::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
  .faq-q .plus::after{ left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); }
  .faq-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
  .faq-item.open .faq-a{ max-height:240px; }
  .faq-a p{ padding:0 0.2rem 1.4rem; color:var(--muted); font-size:1rem; line-height:1.65; max-width:64ch; }

  /* ---------- contact section upgrade ---------- */
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .contact-info-block{ margin-bottom:1.6rem; }
  .contact-info-block h4{ font-family:'Jost',sans-serif; font-weight:600; font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); margin-bottom:0.6rem; }
  .contact-info-block p, .contact-info-block a{ color:var(--muted); font-size:0.98rem; line-height:1.6; display:block; margin-bottom:0.3rem; }
  .contact-info-block a:hover{ color:var(--gold-light); }
  .map-embed{ border:1px solid var(--line); width:100%; height:220px; filter:grayscale(0.4) contrast(1.1); }
  .contact-form{ background:var(--panel); border:1px solid var(--line); padding: clamp(1.75rem, 4vw, 2.4rem); }
  .form-row{ margin-bottom:1.2rem; }
  .form-row label{ display:block; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
  .form-row input, .form-row select, .form-row textarea{
    width:100%; background:var(--bg); border:1px solid var(--line); color:var(--cream);
    padding:0.7rem 0.9rem; font-family:'Jost',sans-serif; font-size:0.92rem; outline:none; resize:vertical;
  }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--gold); }
  .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

  /* ---------- footer social icons ---------- */
  .footer-social{ display:flex; gap:0.8rem; margin-top:0.8rem; }
  .footer-social a{
    width:34px; height:34px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    color:var(--gold-light); margin-bottom:0 !important;
  }
  .footer-social a:hover{ border-color:var(--gold); }
  .footer-social svg{ width:16px; height:16px; }
  .footer-col.footer-map .map-embed{ height:150px; }

  /* ---------- restaurant checklist extras ---------- */
  .rest-mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.8rem; }
  .rest-mini{ border:1px solid var(--line); padding:1rem 1.1rem; }
  .rest-mini .lbl{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.3rem; }
  .rest-mini .val{ font-size:0.94rem; color:var(--muted); line-height:1.5; }

  /* ---------- about (sobre nosotros) ---------- */
  .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
  .about-photo{ position:relative; }
  .about-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
  .about-values{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem; }
  .about-values .av-item h4{ font-family:'Jost',sans-serif; font-weight:600; font-size:0.92rem; color:var(--cream); margin-bottom:0.3rem; letter-spacing:0; }
  .about-values .av-item p{ font-size:0.95rem; color:var(--muted); line-height:1.6; }

  /* ---------- responsive additions ---------- */
  @media (max-width:900px){
    .promo-grid{ grid-template-columns:1fr; }
    .calc-panel{ grid-template-columns:1fr; }
    .testi-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .about-photo{ max-width:340px; margin:0 auto; }
    .rest-mini-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .catalog-controls{ flex-direction:column; align-items:stretch; }
    .search-box{ max-width:none; }
    .form-row-2{ grid-template-columns:1fr; }
    .countdown .cd-box{ min-width:64px; padding:0.6rem 0.3rem 0.5rem; }
    .countdown .cd-box .num{ font-size:1.5rem; }
    .quote-bar{ flex-wrap:wrap; justify-content:center; text-align:center; }
  }

  /* =========================================================
     REDISEÑO MULTI-PÁGINA — nuevos componentes
     ========================================================= */

  /* ---------- estado activo del menú ---------- */
  .nav-links a.active{ color:var(--gold); }
  .mobile-nav a.active{ color:var(--gold-light); }
  .nav-links a.active::before{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold);
  }
  .dropdown a.active{ color:var(--gold-light); background:rgba(201,162,75,0.08); }

  /* ---------- cabecera de página interior (no-home) ---------- */
  .page-header{
    position:relative;
    padding: calc(9rem + 38px) 0 3.5rem;
    background:
      linear-gradient(180deg, rgba(11,10,9,0.92) 0%, rgba(11,10,9,0.85) 55%, rgba(11,10,9,0.97) 100%),
      url('../bg-texture.webp');
    background-size:cover;
    background-position:center 30%;
    border-bottom:1px solid var(--line);
  }
  .breadcrumbs{
    display:flex; align-items:center; gap:0.5rem;
    font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--header-text-muted); margin-bottom:1.4rem;
  }
  .breadcrumbs a{ color:var(--header-text-muted); }
  .breadcrumbs a:hover{ color:var(--gold); }
  .breadcrumbs .sep{ color:var(--header-text-muted); opacity:0.5; }
  .breadcrumbs .current{ color:var(--gold); }
  .page-header h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); margin-top:0.4rem; text-shadow: 0 3px 14px rgba(0,0,0,0.5); color:var(--header-text); }
  .page-header p.lead{ color:#d9cdb4; max-width:60ch; margin-top:1rem; font-size:1.05rem; line-height:1.65; }

  /* ---------- hub de navegación del menú (usado en inicio) ---------- */
  .menu-hub-grid{ margin-top: 2rem; }
  .menu-hub-card{ transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; position:relative; }
  .menu-hub-card:hover{ transform:translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.42); }

  /* ---------- tarjeta "ver más" al final de una sección resumida ---------- */
  .see-more{
    margin-top: 2.4rem;
    display:flex; justify-content:center;
  }

  /* ---------- franja CTA compacta (usada en inicio para contacto) ---------- */
  .cta-band{
    background:var(--panel);
    border:1px solid var(--line);
    padding: clamp(2rem, 5vw, 3rem);
    display:flex; align-items:center; justify-content:space-between;
    gap:2rem; flex-wrap:wrap;
  }
  .cta-band h3{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
  .cta-band p{ color:var(--muted); margin-top:0.4rem; max-width:48ch; }
  .cta-band-ctas{ display:flex; gap:0.9rem; flex-wrap:wrap; }

  @media (max-width:900px){
    .page-header{ padding: calc(7rem + 38px) 0 2.8rem; }
  }

  /* ---------- banner promocional rotativo (inicio) ---------- */
  .promo-banner{
    position:relative;
    width:100%;
    aspect-ratio: 2167 / 726;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .promo-banner-slide{
    position:absolute; inset:0;
    opacity:0;
    pointer-events:none;
    transition: opacity 1s ease;
  }
  .promo-banner-slide.active{ opacity:1; pointer-events:auto; z-index:1; }
  .promo-banner-slide a{ display:block; width:100%; height:100%; }
  .promo-banner-slide img{ width:100%; height:100%; object-fit:cover; }
  .promo-banner-dots{
    position:absolute;
    bottom:1rem; left:50%;
    transform:translateX(-50%);
    display:flex; gap:0.6rem;
    z-index:3;
  }
  .promo-banner-dots button{
    width:9px; height:9px; border-radius:50%;
    background:rgba(244,238,225,0.35);
    border:1px solid rgba(244,238,225,0.5);
    cursor:pointer;
    padding:0;
    transition: background 0.25s, transform 0.25s;
  }
  .promo-banner-dots button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.25); }

  /* ---------- aliados gastronómicos: frase + grid de fotos ---------- */
  .partners-statement{
    text-align:center;
    max-width:780px;
    margin: 0 auto 2.6rem;
  }
  .partners-statement .script{ font-size:1.3rem; display:block; margin-bottom:0.6rem; }
  .partners-statement h3{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); line-height:1.15; }
  .photo-placeholder-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
  }
  .photo-placeholder{
    border:1px solid var(--line);
    background:var(--panel);
    overflow:hidden;
  }
  .photo-placeholder .frame{
    aspect-ratio: 4/5;
    background:
      radial-gradient(circle at 30% 22%, rgba(201,162,75,0.18), transparent 55%),
      linear-gradient(135deg, #241d18, #14100d 60%, #1b1512);
    display:flex; align-items:center; justify-content:center;
  }
  .photo-placeholder .frame svg{ width:46px; height:46px; color:var(--gold); opacity:0.6; }
  .photo-placeholder .cap{
    padding:0.9rem 1rem;
    font-size:0.8rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    text-align:center;
    border-top:1px solid var(--line);
  }
  @media (max-width:900px){
    .photo-placeholder-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  /* =========================================================
     CARRITO DE COMPRAS
     ========================================================= */

  /* ---------- ícono del carrito en el header ---------- */
  .cart-link{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    color: var(--header-text);
  }
  .cart-link svg{ width:22px; height:22px; }
  header.scrolled .cart-link{ color:#2a221b; }
  .cart-count{
    position:absolute; top:-2px; right:-4px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:50%;
    background:var(--gold);
    color:#161310;
    font-family:'Jost',sans-serif;
    font-size:0.62rem; font-weight:700;
    display:none; align-items:center; justify-content:center;
    line-height:1;
  }
  .mobile-nav .cart-count{
    position:static; margin-left:0.5rem;
    display:none; align-items:center; justify-content:center;
  }

  /* ---------- layout general del carrito ---------- */
  .cart-layout{
    display:grid;
    grid-template-columns: 1.55fr 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items:start;
  }
  @media (max-width:900px){
    .cart-layout{ grid-template-columns:1fr; }
  }

  .cart-empty{
    display:flex; flex-direction:column; align-items:flex-start; gap:0.9rem;
    padding: 3rem 1rem;
    color:var(--muted);
  }
  .cart-empty svg{ width:44px; height:44px; color:var(--gold); opacity:0.7; }
  .cart-empty h3{ font-family:'Jost',sans-serif; font-weight:600; color:var(--cream); font-size:1.1rem; }

  .cart-line{
    display:grid;
    grid-template-columns: 64px 1fr auto auto auto;
    align-items:center;
    gap:1rem;
    padding:1rem 0;
    border-bottom:1px solid var(--line);
  }
  .cart-line-photo{
    width:64px; height:64px;
    background:linear-gradient(135deg, #241d18, #14100d 60%, #1b1512);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .cart-line-photo img, .cart-line-photo picture{ width:100%; height:100%; object-fit:cover; display:block; }
  .cart-line-photo svg{ width:24px; height:24px; color:var(--gold); opacity:0.55; }
  .cart-line-info h4{ font-family:'Jost',sans-serif; font-weight:600; font-size:0.95rem; color:var(--cream); margin-bottom:0.2rem; }
  .cart-line-unit{ font-size:0.8rem; color:var(--muted); }
  .cart-line-qty{
    display:flex; align-items:center; gap:0.6rem;
    border:1px solid var(--line);
    padding:0.3rem 0.5rem;
  }
  .qty-btn{
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--gold-light);
    font-size:1rem; cursor:pointer; line-height:1;
  }
  .qty-btn:hover{ color:var(--gold); }
  .qty-val{ min-width:1.4rem; text-align:center; font-size:0.9rem; color:var(--cream); }
  .cart-line-total{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:var(--gold-light); white-space:nowrap; }
  .cart-line-remove{
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .cart-line-remove:hover{ color:var(--wine-light); border-color:var(--wine-light); }
  .cart-line-remove svg{ width:14px; height:14px; }

  @media (max-width:640px){
    .cart-line{
      grid-template-columns: 56px 1fr auto;
      grid-template-areas:
        "photo info remove"
        "photo qty total";
      row-gap:0.6rem;
    }
    .cart-line-photo{ grid-area:photo; width:56px; height:56px; }
    .cart-line-info{ grid-area:info; }
    .cart-line-remove{ grid-area:remove; }
    .cart-line-qty{ grid-area:qty; justify-self:start; }
    .cart-line-total{ grid-area:total; justify-self:end; align-self:center; }
  }

  /* ---------- resumen y checkout ---------- */
  .cart-summary{ padding: clamp(1.6rem, 4vw, 2.2rem); position:sticky; top:calc(38px + 6rem); }
  .cart-summary h3{ font-family:'Jost',sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:1.2rem; }
  .cart-summary-row{ display:flex; justify-content:space-between; font-size:0.95rem; color:var(--muted); margin-bottom:0.6rem; }
  .cart-summary-note{ font-size:0.78rem; color:var(--muted); line-height:1.5; margin:0.6rem 0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
  .cart-summary-total{ font-size:1.15rem; color:var(--cream); font-weight:600; margin-bottom:1.6rem; }
  .cart-summary-total span:last-child{ font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--gold-light); }
  .checkout-form .form-row{ margin-bottom:1rem; }
  .checkout-fineprint{ font-size:0.74rem; color:var(--muted); text-align:center; margin-top:0.8rem; line-height:1.5; }
  .add-cart-btn.added{ background:var(--gold-light) !important; }

  /* ---------- botón de WhatsApp compacto junto a "Agregar al carrito" ---------- */
  .icon-btn-wa{
    width:38px; height:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:#25D366;
    transition: border-color 0.2s;
  }
  .icon-btn-wa:hover{ border-color:#25D366; }
  .icon-btn-wa svg{ width:17px; height:17px; }

  /* ---------- acciones del combo (carrito + WhatsApp) ---------- */
  .combo-actions{ display:flex; gap:0.5rem; margin-top:1rem; }
  .combo-actions .add-cart-btn{ flex:1; }

  /* ---------- checkbox de autorización de datos personales ---------- */
  .form-row-checkbox{ margin-bottom:1.3rem; }
  .checkbox-label{
    display:flex; align-items:flex-start; gap:0.6rem;
    cursor:pointer;
    font-size:0.78rem;
    color:var(--muted);
    line-height:1.5;
  }
  .checkbox-label input[type="checkbox"]{
    flex-shrink:0;
    width:16px; height:16px;
    margin-top:0.15rem;
    accent-color: var(--gold);
    cursor:pointer;
  }

  /* ---------- selector de método de pago ---------- */
  .payment-method-options{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
  .payment-method-option{
    display:flex; align-items:center; gap:0.6rem;
    border:1px solid var(--line);
    padding:0.75rem 0.8rem;
    cursor:pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .payment-method-option:has(input:checked),
  .payment-method-option.is-selected{
    border-color:var(--gold);
    background: rgba(201,162,75,0.06);
  }
  .payment-method-option input{ accent-color:var(--gold); flex-shrink:0; }
  .pm-icon{ color:var(--gold); flex-shrink:0; }
  .pm-icon svg{ width:20px; height:20px; }
  .pm-text{ display:flex; flex-direction:column; line-height:1.3; }
  .pm-text strong{ font-size:0.82rem; color:var(--cream); font-weight:600; }
  .pm-text small{ font-size:0.72rem; color:var(--muted); }
  @media (max-width:460px){
    .payment-method-options{ grid-template-columns:1fr; }
  }

  /* ---------- panel de datos de transferencia ---------- */
  .transfer-info{
    border:1px dashed var(--line);
    background:var(--bg-alt);
    padding:1.2rem;
    margin-top:0.9rem;
    margin-bottom:0.2rem;
  }
  .transfer-info-title{
    font-family:'Jost',sans-serif; font-weight:600; font-size:0.85rem;
    color:var(--cream); margin-bottom:0.9rem;
  }
  .transfer-qr-placeholder{
    width:120px; height:120px;
    margin:0 auto 1rem;
    border:1px dashed var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
    color:var(--muted);
    text-align:center;
  }
  .transfer-qr-placeholder svg{ width:30px; height:30px; opacity:0.6; }
  .transfer-qr-placeholder span{ font-size:0.62rem; padding:0 0.5rem; }
  .transfer-qr-placeholder img{ width:100%; height:100%; object-fit:contain; }
  .transfer-key-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:0.85rem; color:var(--muted);
    padding-bottom:0.8rem; margin-bottom:0.8rem;
    border-bottom:1px solid var(--line);
  }
  .transfer-key-row strong{ color:var(--gold-light); }
  .transfer-note{ font-size:0.76rem; color:var(--muted); line-height:1.55; }

  /* ---------- tarjetas de producto con 2 fotos ---------- */
  .product-photo picture.pp-img{
    position:absolute; inset:0; display:block;
    opacity:0; transition: opacity 0.35s ease;
  }
  .product-photo picture.pp-img.active{ opacity:1; }
  .product-photo picture.pp-img img{ width:100%; height:100%; object-fit:cover; }
  .product-photo.has-two{ cursor:pointer; }
  .product-badges{ z-index:2; }
  .pp-dots{
    position:absolute; left:50%; bottom:0.55rem; transform:translateX(-50%);
    display:flex; gap:0.45rem; z-index:2;
  }
  .pp-dots button{
    width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,0.55); border:1px solid rgba(0,0,0,0.35);
    transition: background 0.2s, transform 0.2s;
  }
  .pp-dots button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.2); }

  /* ---------- confirmación de pedido enviado ---------- */
  .order-done{
    flex-direction:column; align-items:flex-start; gap:0.8rem;
    padding:2rem; border:1px solid var(--gold); background:var(--panel);
    box-shadow:0 12px 28px rgba(0,0,0,0.12);
  }
  .order-done svg{ width:46px; height:46px; color:var(--gold); }
  .order-done h3{ font-family:'Jost',sans-serif; font-weight:600; font-size:1.3rem; color:var(--cream); }
  .order-done p{ color:var(--muted); font-size:1rem; }
  .order-done p strong{ color:var(--cream); letter-spacing:0.04em; }
  .order-done .order-done-small{ font-size:0.85rem; }
  .order-done-actions{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:0.4rem; }

  /* ---------- Nosotros: tarjetas de empresa (3 y 2 columnas) ---------- */
  .value-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
  .value-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
  .value-card ul{ margin:0.9rem 0 0.9rem 1.1rem; color:var(--muted); font-size:1rem; line-height:1.6; }
  .value-card ul li{ margin-bottom:0.35rem; }
  .value-card p + p, .value-card ul + p{ margin-top:0.9rem; }
  @media (max-width:900px){
    .value-grid.cols-3, .value-grid.cols-2{ grid-template-columns:1fr; }
  }