:root{
    --rojo: #D62E27;
    --rojo-dark: #A8221C;
    --crema: #FBF6EC;
    --crema-2: #F3ECDB;
    --negro: #1A1714;
    --dorado: #E8B548;
    --blanco: #FFFFFF;
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow-soft: 0 18px 40px -12px rgba(26,23,20,0.18);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ font-family:'Inter', sans-serif; background:var(--crema); color:var(--negro); overflow-x:hidden; }
  img{ max-width:100%; display:block; }
  h1,h2,h3,.display{ font-family:'Lilita One', cursive; letter-spacing:0.5px; line-height:1.05; }
  .mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.3px; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--rojo); color:var(--blanco); font-weight:800;
    font-family:'Lilita One', cursive; font-size:1.05rem;
    padding:16px 30px; border-radius:100px; border:3px solid var(--negro);
    text-decoration:none; cursor:pointer;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
    box-shadow: 4px 4px 0 var(--negro);
  }
  .btn:hover{ transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--negro); }
  .btn.ghost{ background:var(--blanco); color:var(--negro); }
  .btn.small{ padding:10px 20px; font-size:0.85rem; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace; text-transform:uppercase;
    font-size:0.78rem; letter-spacing:2px; font-weight:600; color:var(--rojo-dark);
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:22px; height:3px; background:var(--rojo-dark); border-radius:2px; }

  /* ===== HEADER ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(251,246,236,0.92); backdrop-filter: blur(10px);
    border-bottom:3px solid var(--negro);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1180px; margin:0 auto; }
  .nav .logo{ display:flex; align-items:center; }
  .nav .logo img{ height:38px; width:auto; }
  .nav ul{ display:flex; gap:26px; list-style:none; }
  .nav ul a{ text-decoration:none; color:var(--negro); font-weight:600; font-size:0.93rem; position:relative; }
  .nav ul a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0%; height:3px; background:var(--rojo); border-radius:2px; transition: width .3s; }
  .nav ul a:hover::after{ width:100%; }
  .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
  .burger span{ width:26px; height:3px; background:var(--negro); border-radius:2px; }

  @media(max-width:900px){
    .nav ul{
      position:fixed; top:64px; left:0; right:0; background:var(--crema);
      flex-direction:column; align-items:center; padding:20px 0 30px;
      border-bottom:3px solid var(--negro); transform:translateY(-150%); opacity:0;
      transition: transform .35s, opacity .3s; gap:18px;
    }
    .nav ul.open{ transform:translateY(0); opacity:1; }
    .burger{ display:flex; }
    .nav-cta{ display:none; }
  }

  /* ===== HERO ===== */
  .hero-pin{ position:relative; }
  .hero{
    position:relative; min-height:100vh; z-index:5;
    display:flex; align-items:center; padding-top:90px;
    background: var(--rojo);
  }
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background: radial-gradient(circle at 80% 20%, rgba(232,181,72,0.30), transparent 45%), rgba(214,46,39,0.72);
  }
  .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1fr; gap:40px; align-items:center; width:100%; }
  .hero-text{ position:relative; }
  .hero-text .eyebrow{ color:var(--dorado); }
  .hero-text .eyebrow::before{ background:var(--dorado); }
  .hero h1{ color:var(--blanco); font-size:clamp(2.6rem, 6vw, 4.6rem); text-shadow: 4px 4px 0 var(--negro); margin-bottom:18px; }
  .hero h1 mark{ background:none; color:var(--dorado); }
  .hero p.lead{ color:var(--crema); font-size:1.15rem; max-width:480px; margin-bottom:30px; font-weight:500; }
  .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
  .btn-delivery{
    width:54px; height:54px; flex-shrink:0; border-radius:50%; background:var(--dorado); color:var(--negro);
    display:flex; align-items:center; justify-content:center; border:3px solid var(--negro);
    box-shadow: 5px 5px 0 var(--negro); transition: transform .25s, box-shadow .25s;
  }
  .btn-delivery:hover{ transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--negro); }
  .hero-img{ position:absolute; bottom:-90px; left:50%; transform:translateX(calc(-50% + 0px)); width:300px; z-index:6; }
  .hero-img img{ width:100%; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.35)); }
  .badge-float{
    position:absolute; background:var(--blanco); border:3px solid var(--negro); border-radius:100px;
    padding:10px 18px; font-family:'Lilita One',cursive; font-size:0.9rem;
    box-shadow: 4px 4px 0 var(--negro); display:flex; align-items:center; gap:8px;
  }
  .badge-1{ top:6%; left:-4%; }
  .badge-2{ bottom:10%; right:-6%; background:var(--dorado); }

  .hero-fx-init{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .hero-fx-init.go{ opacity:1; transform:translateY(0); }
  .hero-text h1{ transition-delay:.12s; }
  .hero-text p.lead{ transition-delay:.24s; }
  .hero-text .hero-cta{ transition-delay:.36s; }

  @media(max-width:900px){
    .hero-grid{ text-align:center; }
    .hero p.lead{ margin-inline:auto; }
    .hero-cta{ justify-content:center; }
    .badge-1, .badge-2{ display:none; }
    .hero-img{ display:flex; justify-content:center; }
  }

  /* ===== SECTION GENERIC ===== */
  section{ padding:100px 0; position:relative; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head h2{ font-size:clamp(2rem, 4vw, 2.8rem); }
  .alt-bg{ background:var(--negro); color:var(--crema); }
  .alt-bg .eyebrow{ color:var(--dorado); }
  .alt-bg .eyebrow::before{ background:var(--dorado); }

  #mosaico{ padding-top:60px; background:var(--negro); }

  /* ===== MOSAICO LOCAL (carrusel) ===== */
  .mosaic-carousel{ overflow:hidden; cursor:grab; user-select:none; }
  .mosaic-carousel.dragging{ cursor:grabbing; }
  .mosaic-track{ display:flex; gap:14px; width:max-content; will-change:transform; }
  .mosaic-track .m-item{ position:relative; overflow:hidden; border-radius:var(--radius-md); border:3px solid var(--negro); flex:0 0 auto; width:360px; height:380px; }
  .mosaic-track .m-item.m-big{ width:520px; }
  .mosaic-track .m-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
  .mosaic-track .m-item:hover img{ transform: scale(1.08); }
  .mosaic .m-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent 55%); }
  .mosaic .m-overlay span{ color:var(--blanco); font-family:'Lilita One',cursive; font-size:1.3rem; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }
  @media(max-width:760px){
    .mosaic-track .m-item{ width:280px; height:300px; }
    .mosaic-track .m-item.m-big{ width:340px; }
  }

  /* ===== QUIENES SOMOS ===== */
  .somos-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:50px; align-items:center; }
  .somos-media{ position:relative; }
  .somos-img{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:4px solid var(--negro); box-shadow: var(--shadow-soft); aspect-ratio: 9/16; }
  .somos-img img{ width:100%; height:100%; object-fit:cover; }
  .somos-media .somos-overlay-img{ position:absolute; top:-240px; left:50%; transform:translateX(-50%); width:90%; height:auto; object-fit:contain; pointer-events:none; z-index:2; }
  .somos-media .somos-overlay-img-bottom{ position:absolute; bottom:-350px; left:50%; transform:translateX(-50%); width:60%; height:auto; object-fit:contain; pointer-events:none; z-index:2; }
  .stat-row{ display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
  .stat .num{ font-family:'Lilita One',cursive; font-size:2.3rem; color:var(--rojo); }
  .stat .label{ font-size:0.85rem; color:#555; max-width:140px; }
  @media(max-width:860px){ .somos-grid{ grid-template-columns:1fr; } }

  /* ===== PRODUCTOS ===== */
  .tabs{ display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
  .tab-btn{
    font-family:'Lilita One',cursive; background:var(--crema); color:var(--negro); border:3px solid var(--negro);
    border-radius:100px; padding:10px 22px; cursor:pointer; font-size:0.95rem; transition: all .2s;
  }
  .tab-btn.active{ background:var(--rojo); color:var(--blanco); }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }

  .product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
  .product-card{ background:var(--blanco); border:3px solid var(--negro); border-radius:var(--radius-md); overflow:hidden; box-shadow: 5px 5px 0 var(--negro); transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .product-card:hover{ transform: translateY(-8px); }
  .product-photo{ aspect-ratio:4/3; background: linear-gradient(135deg, var(--dorado), #f4d98c); display:flex; align-items:center; justify-content:center; border-bottom:3px solid var(--negro); overflow:hidden; }
  .product-photo img{ width:100%; height:100%; object-fit:cover; }
  .ph-label{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:rgba(26,23,20,0.55); text-align:center; padding:10px; }
  .product-body{ padding:20px 22px 24px; }
  .product-body h3{ font-size:1.3rem; margin-bottom:8px; color:var(--rojo); }
  .product-body p{ font-size:0.92rem; color:#555; margin-bottom:14px; }
  .spec-list{ list-style:none; font-family:'JetBrains Mono',monospace; font-size:0.76rem; color:#555; display:flex; flex-direction:column; gap:5px;}
  .spec-list li{ display:flex; justify-content:space-between; border-bottom:1px dashed #d8d2c2; padding-bottom:4px; }
  .spec-list li b{ color:var(--negro); }

  .emp-group-title{ font-family:'Lilita One', cursive; font-size:1.5rem; margin: 36px 0 20px; display:flex; align-items:center; gap:12px; }
  .emp-group-title:first-child{ margin-top:0; }
  .emp-group-title .pill{ background:var(--rojo); color:var(--blanco); font-size:0.7rem; font-family:'JetBrains Mono',monospace; padding:4px 12px; border-radius:100px; text-transform:uppercase; }
  .emp-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
  .emp-card{ background:var(--blanco); border:3px solid var(--negro); border-radius:14px; overflow:hidden; box-shadow: 3px 3px 0 var(--negro); transition: transform .25s; }
  .emp-card:hover{ transform: translateY(-5px); }
  .emp-photo{ aspect-ratio:1.1; background:#e9e3d2; overflow:hidden; }
  .emp-photo img{ width:100%; height:100%; object-fit:cover; }
  .emp-name{ padding:12px 12px 0; font-size:0.85rem; font-weight:700; text-align:center; line-height:1.25; color:var(--rojo); }
  .emp-info{
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
    font-size:0.72rem; color:#555; text-align:center; line-height:1.4; padding:0 14px;
  }
  .emp-card:hover .emp-info{ max-height:160px; opacity:1; padding:8px 14px 16px; }
  .emp-card:hover .emp-name{ padding-bottom:0; }

  @media(max-width:1000px){ .product-grid{ grid-template-columns:1fr 1fr; } .emp-grid{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:680px){ .product-grid{ grid-template-columns:1fr; } .emp-grid{ grid-template-columns:repeat(2,1fr); } }

  /* ===== DOS FORMAS ===== */
  .dual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  .dual-card{ border-radius:var(--radius-lg); border:4px solid var(--negro); padding:36px; position:relative; overflow:hidden; }
  .dual-card.locales{ background:var(--rojo); color:var(--blanco); }
  .dual-card.puntos{ background:var(--dorado); color:var(--negro); }
  .dual-card .tag{ font-family:'JetBrains Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:1.5px; opacity:0.85; margin-bottom:10px; display:block; }
  .dual-card h3{ font-size:1.9rem; margin-bottom:14px; }
  .dual-card p{ margin-bottom:24px; line-height:1.5; }
  .mini-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
  .mini-gallery .ph{ aspect-ratio:1; border-radius:12px; border:2px solid var(--negro); overflow:hidden; background:rgba(255,255,255,0.25); }
  .mini-gallery .ph img{ width:100%; height:100%; object-fit:cover; }
  @media(max-width:860px){ .dual-grid{ grid-template-columns:1fr; } }

  /* ===== MAPA ===== */
  .map-layout{ display:grid; grid-template-columns: 320px 1fr; gap:20px; align-items:stretch; }
  .map-list{
    border:4px solid var(--negro); border-radius:var(--radius-lg); background:var(--crema);
    overflow:hidden; display:flex; flex-direction:column; max-height:480px; overflow-y:auto;
  }
  .map-list-item{
    display:flex; align-items:flex-start; gap:12px; padding:16px 18px; cursor:pointer;
    border-bottom:2px solid rgba(26,23,20,0.1); color:var(--negro); transition: background .2s;
  }
  .map-list-item:last-child{ border-bottom:none; }
  .map-list-item:hover{ background:rgba(214,46,39,0.08); }
  .map-list-item.active{ background:var(--rojo); color:var(--blanco); }
  .map-list-item .dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--negro); flex-shrink:0; margin-top:4px; }
  .map-list-item .info b{ display:block; font-size:0.92rem; font-weight:700; line-height:1.3; }
  .map-list-item .info span{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; opacity:0.75; text-transform:uppercase; }
  .map-wrapper{ border:4px solid var(--negro); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
  #map{ height:480px; width:100%; }
  @media(max-width:860px){
    .map-layout{ grid-template-columns:1fr; }
    .map-list{ max-height:260px; }
    #map{ height:380px; }
  }
  .legend{ display:flex; gap:24px; margin-top:20px; flex-wrap:wrap; }
  .legend .item{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; }
  .legend .dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--negro); }
  .dot.rojo-dot{ background:var(--rojo); }
  .dot.dorado-dot{ background:var(--dorado); }

  /* ===== PUNTOS CROCANTTO / COMODATO ===== */
  .section-title-hero{ color:var(--negro); font-size:clamp(2.6rem, 6vw, 4.6rem); text-align:center; margin-bottom:36px; }
  .comodato{ background: var(--negro); color:var(--crema); border-radius:var(--radius-lg); padding:60px; display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
  .comodato ul{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:26px 0; }
  .comodato ul li{ display:flex; gap:12px; align-items:flex-start; }
  .comodato ul li .ico{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--dorado); color:var(--negro); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; }
  .freezer-visual{ border-radius:var(--radius-md); overflow:hidden; border:4px solid var(--dorado); }
  .freezer-visual img{ width:100%; height:100%; object-fit:cover; }
  @media(max-width:860px){ .comodato{ grid-template-columns:1fr; padding:40px 26px; } }

  /* ===== FOOTER ===== */
  footer{ background:var(--rojo); color:var(--blanco); padding:70px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:40px; margin-bottom:50px; }
  .footer-grid h3{ font-size:1.8rem; margin-bottom:14px; }
  .footer-grid p{ opacity:0.9; max-width:320px; line-height:1.5; }
  .footer-col h4{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; opacity:0.8;}
  .footer-col a, .footer-col p{ color:var(--blanco); text-decoration:none; display:block; margin-bottom:10px; opacity:0.95; font-weight:500;}
  .footer-bottom{ border-top:2px solid rgba(255,255,255,0.25); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; opacity:0.85; }
  @media(max-width:860px){ .footer-grid{ grid-template-columns:1fr; } }

  .whatsapp-wrap{ position:fixed; bottom:24px; right:24px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }

  .whatsapp-float{
    background:#25D366; color:white; border-radius:50%;
    width:60px; height:60px; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); border:3px solid var(--negro); text-decoration:none;
    font-size:1.6rem; animation: pulse 2.4s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 8px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(37,211,102,0.5);}
    70%{ box-shadow:0 8px 20px rgba(0,0,0,0.3), 0 0 0 14px rgba(37,211,102,0);}
    100%{ box-shadow:0 8px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(37,211,102,0);}
  }

  .whatsapp-bubble{
    position:relative; max-width:260px; background:var(--blanco); color:var(--negro);
    border:3px solid var(--negro); border-radius:16px 16px 4px 16px; padding:16px 18px;
    box-shadow:5px 5px 0 var(--negro);
    opacity:0; transform:translateY(12px) scale(0.96); pointer-events:none;
    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  }
  .whatsapp-bubble.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .whatsapp-bubble a{ text-decoration:none; color:var(--negro); display:block; }
  .whatsapp-bubble p{ margin:0 0 8px; font-size:0.85rem; line-height:1.4; }
  .whatsapp-bubble p:last-child{ margin-bottom:0; color:var(--rojo); font-weight:700; }
  .whatsapp-bubble-close{
    position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
    background:var(--negro); color:var(--crema); border:none; cursor:pointer;
    font-size:0.7rem; display:flex; align-items:center; justify-content:center; line-height:1;
  }
  @media(max-width:480px){ .whatsapp-bubble{ max-width:220px; } }

  .reveal{ opacity:0; transform: translateY(36px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.1s; }
  .reveal-delay-2{ transition-delay:.2s; }
  .reveal-delay-3{ transition-delay:.3s; }

  @media (prefers-reduced-motion: reduce){
    .reveal, .hero-fx-init{ transition:none; opacity:1; transform:none; }
    .whatsapp-float{ animation:none; }
  }