:root{
    --brand-dark: #1A4E2B;
    --brand-dark2: #123A20;
    --brand-light: #B4E6AA;
    --gold: #D9A441;
    --gold-dark:#B9862E;
    --ink: #16281C;
    --paper: #FFFFFF;
    --paper-alt: #F3FAF1;
    --line: rgba(22,40,28,0.10);
    --gray: rgba(22,40,28,0.62);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,.display{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  ::selection{background:var(--brand-light); color:var(--brand-dark2);}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:100; background:var(--brand-dark); box-shadow:0 2px 12px rgba(0,0,0,0.12);}
  header .bar{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
  .logo-wordmark{height:30px;}
  nav{display:flex; gap:26px; align-items:center;}
  nav a{font-size:14.5px; font-weight:500; color:var(--paper); opacity:0.88;}
  nav a:hover{opacity:1;}
  nav a.active{opacity:1; position:relative;}
  nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand-light); border-radius:2px;}
  .btn-gold{
    background:var(--gold); color:var(--brand-dark2) !important; opacity:1 !important;
    padding:10px 18px; border-radius:6px; font-weight:700 !important; font-size:14px !important;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-gold:hover{background:var(--gold-dark);}
  .nav-toggle{display:none; background:none; border:none; color:var(--paper); font-size:26px; cursor:pointer;}
  @media(max-width:900px){
    nav{position:fixed; top:60px; left:0; right:0; background:var(--brand-dark2); flex-direction:column; align-items:flex-start; padding:20px 24px; gap:16px; transform:translateY(-140%); transition:transform .25s ease; z-index:99;}
    nav.open{transform:translateY(0);}
    .nav-toggle{display:block;}
  }

  /* ---------- Hero (video background) ---------- */
  .hero{
    position:relative; overflow:hidden; padding:0;
    min-height:640px; display:flex; align-items:center;
    color:var(--paper); background:var(--brand-dark2);
  }
  .hero-media{position:absolute; inset:0; z-index:0; overflow:hidden;}
  .hero-media video, .hero-media img{
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
    transform:scale(1.02);
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(18,58,32,0.72) 0%, rgba(18,58,32,0.50) 45%, rgba(18,58,32,0.85) 100%);
  }
  .hero .wrap{position:relative; z-index:2; padding:110px 24px 96px; max-width:760px; margin:0;}
  .hero-eyebrow{font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-light); margin-bottom:18px;}
  .hero h1{font-size:clamp(32px,4.6vw,52px); line-height:1.12; margin-bottom:18px;}
  .hero p.lead{font-size:16.5px; color:rgba(255,255,255,0.88); max-width:480px; margin-bottom:30px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-eyebrow, .hero h1, .hero p.lead, .hero-ctas{
    opacity:0; transform:translateY(20px); animation:heroIn .8s cubic-bezier(.16,.8,.3,1) forwards;
  }
  .hero-eyebrow{animation-delay:.05s;} .hero h1{animation-delay:.16s;} .hero p.lead{animation-delay:.28s;}
  .hero-ctas{animation-delay:.40s;}
  @keyframes heroIn{to{opacity:1; transform:translateY(0);}}
  @media (prefers-reduced-motion: reduce){
    .hero-eyebrow, .hero h1, .hero p.lead, .hero-ctas{animation:none; opacity:1; transform:none;}
    .hero-media video{display:none;}
  }
  @media(max-width:700px){ .hero{min-height:560px;} .hero .wrap{padding:90px 20px 70px;} }
  .btn-primary{background:var(--gold); color:var(--brand-dark2); font-weight:700; padding:14px 24px; border-radius:8px; font-size:15px; display:inline-flex; align-items:center; gap:10px;}
  .btn-primary:hover{background:var(--gold-dark);}
  .btn-outline{border:1.5px solid rgba(255,255,255,0.4); color:var(--paper); font-weight:600; padding:14px 24px; border-radius:8px; font-size:15px;}
  .btn-outline:hover{border-color:var(--paper);}

  /* organic leaf SVG blob */
  .leaf-badge{width:100%; max-width:340px;}

  /* ---------- Trust bar ---------- */
  .trust{background:var(--brand-dark2); padding:16px 0;}
  .trust .wrap{display:flex; flex-wrap:wrap; gap:28px; justify-content:center;}
  .trust-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:rgba(255,255,255,0.88); font-weight:500;}
  .trust-item .dot{width:6px; height:6px; border-radius:50%; background:var(--brand-light); flex-shrink:0;}

  /* ---------- Section pattern ---------- */
  .section{padding:80px 0;}
  .section.alt{background:var(--paper-alt);}
  .sec-head{text-align:center; max-width:640px; margin:0 auto 44px;}
  .sec-eyebrow{font-size:12.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-dark); margin-bottom:12px;}
  .sec-head h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:12px;}
  .sec-head p{color:var(--gray); font-size:15.5px;}

  /* ---------- Category cards (Productos) ---------- */
  .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:860px){.cat-grid{grid-template-columns:1fr;}}
  .cat-card{
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:32px 26px;
    display:flex; flex-direction:column; gap:14px; transition:transform .18s ease, box-shadow .18s ease;
  }
  .cat-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(26,78,43,0.12);}
  .cat-icon{width:56px; height:56px; border-radius:12px; background:var(--paper-alt); display:flex; align-items:center; justify-content:center;}
  .cat-card h3{font-size:20px;}
  .cat-card p{color:var(--gray); font-size:14.5px; flex:1;}
  .cat-link{font-weight:700; font-size:14px; color:var(--brand-dark); display:inline-flex; align-items:center; gap:6px;}
  .cat-card:hover .cat-link .arrow{transform:translateX(4px);}
  .cat-link .arrow{transition:transform .18s ease;}

  /* ---------- Quote / mission ---------- */
  .quote-block{background:var(--brand-dark); color:var(--paper); border-radius:18px; padding:56px; text-align:center;}
  .quote-block blockquote{font-family:'Poppins',sans-serif; font-weight:600; font-style:italic; font-size:clamp(20px,2.6vw,28px); max-width:760px; margin:0 auto 26px; line-height:1.5;}
  .quote-stats{display:flex; justify-content:center; gap:48px; flex-wrap:wrap; margin-top:20px;}
  .qstat .num{font-family:'Poppins',sans-serif; font-weight:800; font-size:34px; color:var(--brand-light);}
  .qstat .lbl{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.7);}

  /* ---------- Services icons ---------- */
  .serv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.serv-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.serv-grid{grid-template-columns:1fr;}}
  .serv-card{text-align:center; padding:10px;}
  .serv-icon{width:60px; height:60px; margin:0 auto 16px; border-radius:50%; background:var(--brand-dark); display:flex; align-items:center; justify-content:center; color:var(--brand-light);}
  .serv-card h4{font-size:16px; margin-bottom:8px;}
  .serv-card p{font-size:13.5px; color:var(--gray);}

  /* ---------- Financing & Rewards split cards ---------- */
  .promo-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media(max-width:860px){.promo-grid{grid-template-columns:1fr;}}
  .promo-card{border-radius:16px; padding:38px; position:relative; overflow:hidden; display:block; transition:transform .18s ease, box-shadow .18s ease;}
  .promo-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(26,78,43,0.16);}
  .promo-card.financiamiento{background:var(--brand-dark); color:var(--paper);}
  .promo-card.recompensas{background:var(--gold); color:var(--brand-dark2);}
  .promo-badge{
    display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
    padding:6px 12px; border-radius:20px; margin-bottom:18px;
  }
  .promo-card.financiamiento .promo-badge{background:rgba(255,255,255,0.15); color:var(--brand-light);}
  .promo-card.recompensas .promo-badge{background:rgba(18,58,32,0.15); color:var(--brand-dark2);}
  .promo-card h3{font-size:24px; margin-bottom:12px;}
  .promo-card p{font-size:14.5px; margin-bottom:20px; line-height:1.6;}
  .promo-card.financiamiento p{color:rgba(255,255,255,0.85);}
  .promo-card.recompensas p{color:rgba(18,58,32,0.85);}
  .promo-list{list-style:none; margin-bottom:24px;}
  .promo-list li{font-size:14px; padding:8px 0; display:flex; gap:10px; align-items:flex-start;}
  .promo-card.financiamiento .promo-list li{border-bottom:1px solid rgba(255,255,255,0.12);}
  .promo-card.recompensas .promo-list li{border-bottom:1px solid rgba(18,58,32,0.14);}
  .promo-list li:last-child{border-bottom:none;}
  .promo-list .check{flex-shrink:0; font-weight:700;}
  .promo-card.financiamiento .promo-list .check{color:var(--brand-light);}
  .promo-card.recompensas .promo-list .check{color:var(--brand-dark2);}
  .btn-on-dark{background:var(--gold); color:var(--brand-dark2); font-weight:700; padding:13px 22px; border-radius:8px; font-size:14.5px; display:inline-flex; align-items:center; gap:8px;}
  .btn-on-dark:hover{background:var(--gold-dark);}
  .btn-on-gold{background:var(--brand-dark); color:var(--paper); font-weight:700; padding:13px 22px; border-radius:8px; font-size:14.5px; display:inline-flex; align-items:center; gap:8px;}
  .btn-on-gold:hover{background:var(--brand-dark2);}
  .fine-print{font-size:12px; margin-top:14px; opacity:0.7;}

  /* ---------- Filter pills ---------- */
  .filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; justify-content:center;}
  .pill{font-size:13px; font-weight:600; padding:9px 16px; border-radius:20px; border:1.5px solid var(--line); background:var(--paper); cursor:pointer; transition:all .15s ease;}
  .pill.active{background:var(--brand-dark); color:var(--paper); border-color:var(--brand-dark);}
  .pill:hover:not(.active){border-color:var(--brand-dark);}

  /* ---------- Product grid ---------- */
  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px;}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px;
    display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s ease, transform .15s ease;
  }
  .card:hover{box-shadow:0 10px 24px rgba(26,78,43,0.10); transform:translateY(-3px);}
  .card .tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--brand-dark); background:var(--paper-alt); padding:4px 10px; border-radius:20px; display:inline-block; width:fit-content;}
  .card h4{font-size:16px; font-weight:600; line-height:1.35;}
  .card .price-row{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
  .card .price-label{font-size:13px; color:var(--gray); font-weight:500;}
  .card .btn-mini{font-size:12.5px; font-weight:700; background:var(--brand-dark); color:var(--paper); padding:8px 13px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .card .btn-mini:hover{background:var(--brand-dark2);}

  .mayoreo-banner{background:var(--brand-dark); color:var(--paper); border-radius:14px; padding:26px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
  .mayoreo-banner p{max-width:520px; font-size:14.5px; color:rgba(255,255,255,0.85);}

  /* ---------- Kits ---------- */
  .kits-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;}
  .kit-card{background:var(--paper); border-radius:14px; overflow:hidden; box-shadow:0 2px 14px rgba(26,78,43,0.08); display:flex; flex-direction:column;}
  .kit-top{background:var(--brand-light); color:var(--brand-dark2); padding:14px 22px; display:flex; justify-content:space-between; align-items:center;}
  .kit-top .kit-badge{font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;}
  .kit-body{padding:24px 22px 28px;}
  .kit-body h3{font-size:19px; margin-bottom:8px;}
  .kit-body .desc{font-size:13.5px; color:var(--gray); margin-bottom:16px;}
  .kit-includes{list-style:none; margin-bottom:20px;}
  .kit-includes li{font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--line); display:flex; gap:8px;}
  .kit-includes li::before{content:"✓"; color:var(--brand-dark); font-weight:700; flex-shrink:0;}
  .kit-price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:18px;}
  .kit-price{font-family:'Poppins',sans-serif; font-size:28px; font-weight:800; color:var(--brand-dark);}
  .kit-price-old{font-size:14px; color:var(--gray); text-decoration:line-through;}

  /* ---------- Footer ---------- */
  footer{background:var(--brand-dark2); color:var(--paper); padding:56px 0 26px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
  @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:500px){.foot-grid{grid-template-columns:1fr;}}
  footer h5{font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--brand-light); margin-bottom:14px; font-weight:700;}
  footer p, footer a{font-size:14px; color:rgba(255,255,255,0.75); line-height:1.85;}
  footer a:hover{color:var(--paper);}
  .foot-logo{height:26px; margin-bottom:14px;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; font-size:12.5px; color:rgba(255,255,255,0.45); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  .float-wa{position:fixed; bottom:22px; right:22px; z-index:200; background:#25D366; color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.25); transition:transform .15s ease;}
  .float-wa:hover{transform:scale(1.08);}
  .empty-state{padding:40px 0; text-align:center; color:var(--gray); font-size:13px; grid-column:1/-1;}

  /* ---------- Scroll reveal animation ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
  .reveal-stagger.in-view > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s;}
  .reveal-stagger.in-view > *:nth-child(2){transition-delay:.14s;}
  .reveal-stagger.in-view > *:nth-child(3){transition-delay:.23s;}
  .reveal-stagger.in-view > *:nth-child(4){transition-delay:.32s;}
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  }

  /* ---------- Visítanos / Maps ---------- */
  .visit-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
  @media(max-width:860px){.visit-wrap{grid-template-columns:1fr;}}
  .visit-card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:36px;}
  .visit-card h3{font-size:22px; margin-bottom:14px;}
  .visit-card p{color:var(--gray); font-size:14.5px; margin-bottom:22px; line-height:1.7;}
  .btn-maps{background:var(--brand-dark); color:var(--paper); font-weight:700; padding:14px 22px; border-radius:8px; font-size:14.5px; display:inline-flex; align-items:center; gap:10px;}
  .btn-maps:hover{background:var(--brand-dark2);}
  .map-frame{
    border-radius:16px; overflow:hidden; position:relative; aspect-ratio:4/3.2; background:var(--brand-dark);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .map-frame::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 30% 30%, rgba(180,230,170,0.18) 0%, transparent 45%),
      radial-gradient(circle at 70% 70%, rgba(180,230,170,0.12) 0%, transparent 50%);
  }
  .map-pin{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--paper);}
  .map-pin span{font-size:14px; font-weight:600; color:rgba(255,255,255,0.85);}
  .pin-pulse{position:relative; width:60px; height:60px; display:flex; align-items:center; justify-content:center;}
  .pin-pulse::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--brand-light); opacity:0.35; animation:pinPulse 2.2s ease-out infinite;}
  @keyframes pinPulse{0%{transform:scale(0.6); opacity:0.5;} 100%{transform:scale(2.2); opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .pin-pulse::before{animation:none; display:none;} }

  /* ---------- Count-up numbers ---------- */
  .qstat .num, .stat .num{font-variant-numeric:tabular-nums;}