/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F1F2ED;--fg:#fff;--muted:#434343;--primary:#fb923c;--primary-foreground:#fff;--secondary:#308136;--cream:#FFF8F0;--cream-dark:#E6E8DF}
html,body{height:100%}
body{font-family:Poppins,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{margin:0 auto;padding:0 1rem;}
h1,h2,h3,h4,h5,h6{font-family: "Noto Sans", sans-serif;font-weight:700;margin-bottom:.5rem}
p{margin-bottom:1rem;line-height:1.6;}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;z-index:50;backdrop-filter:blur(6px);}
.site-header .container::before{content:"";position:absolute;inset:0;border-radius:80px;height:60px;margin:25px 16rem 0;background:transparent;transition:all 0.3s ease}
.site-header.scrolled .container::before{background:#216726;}
.site-header .nav{display:flex;align-items:center;justify-content:center;padding:1rem 0}
.nav-left{list-style:none;display:none;gap:6rem;z-index:10;}
.nav-left a,.nav-links a{color:var(--fg);text-decoration:none;font-weight:600;}
.nav-left a:hover,.nav-links a:hover{color:#E36F2F;}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;position:relative;margin:0 4rem}
.site-header .logo-circle{width:100px;height:100px;background:var(--bg);border-radius:0 0 50% 50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-top:-16px}
.site-header .logo-text{font-family: "Noto Sans", sans-serif;font-size:18px;font-weight:800;letter-spacing:1px;color:var(--primary-foreground);position:absolute;bottom:-30px;white-space:nowrap}
.site-header.scrolled .logo-text{color:#216726;}
.nav-right{display:flex;align-items:center;z-index:10;}
.nav-links{display:none;list-style:none;gap:6rem}
.icons{position:absolute; right: 0; display: flex; align-items: center;}
.icon-btn{background:var(--bg);border:0;padding:.5rem;border-radius:9999px;cursor:pointer;position:relative}
.icon-btn + .icon-btn{background: #2C6F31; margin-left: 10px;}
.icon-btn img{width:24px;height:24px}
.icon-btn .badge{position:absolute;top:-6px;left:-6px;background:#DC402C;color:var(--primary-foreground);width:20px;height:20px;border-radius:9999px;font-size:11px;display:flex;align-items:center;justify-content:center}
@media (max-width: 1535px) {
  .site-header .container::before{margin:25px 10rem 0;}
}
@media (max-width: 1279px) {
  .nav-left, .nav-links{gap:4rem;}
  .logo{margin:0 2rem}
  .site-header .container::before{margin:25px 8rem 0;}
}
@media (max-width: 1024px) {
  .site-header .container::before{display: none;}
}
@media (max-width: 1024px) {
  .site-header{padding:0 2rem}
}

/* Hero */
.hero{min-height:65vh;background:linear-gradient(to bottom left,#50a556 0%,#216726 100%);padding-top:96px;position:relative;overflow:hidden}
.hero.page-title{padding:120px 0 80px;min-height: 475px;}
.hero::before{content:"";position:absolute;inset:0;background:url('../images/bg-hero.png') no-repeat top left;}
.hero::after{content:"";width:100%;height:100%;position:absolute;bottom:-2px;background:url('../images/bg-wave-hero.svg') no-repeat bottom;background-size: 100%}
.hero-content{position:relative;z-index:10;padding:4rem 0;text-align:center}
.hero h1{font-size:2.25rem;line-height:1.05;margin-bottom:1rem;color:#fff}
.hero h1 .highlight{color:var(--primary);display:inline-block}
.lead{color:rgba(255,255,255,0.9);max-width:40rem;margin:0.5rem auto 1.25rem}
.btn{display:inline-block;padding:.75rem 1.25rem;border-radius:9999px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--primary);color:var(--primary-foreground)}
.hero-cta{margin-top:1.5rem}
.floating-images{width:1440px;height:300px;margin:0 auto 30px;position:relative;}
.floating-images img{position:absolute;width:auto;height:auto;border-radius:9999px;object-fit:cover;}
.f1{right:0;bottom:12rem}
.f2{right:10%;bottom:0;}
.f3{right:27%;bottom:3rem;}
.f4{left:27%;bottom:8rem;}
.f5{left:12%;bottom:-1rem;}
.f6{left:0;bottom:8rem;}
#heroPrev,#heroNext{display:none;}

@media (max-width: 1023px){
.hero.page-title{min-height: 125px;padding-bottom:20px;}
}

/* Floating animations (used on hero images) */
.animate-float{animation:float 5s ease-in-out infinite}
.animate-float-slow{animation:float 8s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* Products */
.products{padding:2rem 0 4rem 0;}
.products hr{border:none;border-top:2px dashed rgba(0,0,0,0.1)}
.product-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.product .inner{min-height:300px;background:#E6E8DF;border-radius:65px 65px 16px 16px;overflow:hidden;padding:1rem;padding-top:80px;margin-top:-60px;}
.product .cover{padding: 0 30px;}
.product img{width:100%;min-height:280px;object-fit:cover;background:#f3f3f3;border-radius: 8px;}
.product p{padding:0 1rem;color:var(--muted);font-size:.95rem}
.actions{display:flex;gap:.5rem;align-items:center;justify-content:space-between;padding:1rem}
.actions .btn{background: #308136;}
.actions .btn:hover{background: #216726;}
.actions .icon-btn{background: #fb923c;}
.actions .icon-btn:hover{background: #E36F2F;}
.actions .icon-btn svg{width:32px;height:32px;}
.btn.outline{background:transparent;color:var(--secondary);padding:.6rem 2rem;border-radius:50px; outline-style: auto;}
.btn.outline:hover{background:var(--secondary);color:var(--primary-foreground);}
.center{text-align:center;margin-top:1.25rem}
#prodPrev svg,#prodNext svg{width:32px;height:32px;fill: #308136;}  
.btn.outline:hover svg{fill: #fff !important;}

/* How to order */
.how-to-order{padding:1.5rem 0 4rem 0;position: relative;}
.section-header h2{text-align:center;margin-bottom:.8rem;color:var(--secondary)}
.section-header .muted{text-align:center;color:var(--muted);max-width:48rem;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(1,1fr);gap:1.5rem;margin-top:2rem}
.step{text-align:center;padding:1.25rem}
.step-num{width:64px;height:64px;border-radius:50%;border:3px solid var(--secondary);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;background:#fff;color:var(--secondary);font-weight:800;font-size:1.25rem}
.step:nth-child(even) .step-num{border-color:var(--primary);color:var(--primary)}
.step h3{margin-bottom:.5rem;color:var(--secondary);font-weight:600;}
.step:nth-child(even) h3{margin-bottom:.5rem;color:var(--primary)}
.step p{color:var(--muted);font-size:.95rem;line-height:1.5}

/* Aside steps: reuse how-to-order step look but scale for narrow aside */
.aside-steps{display:flex;flex-direction:column;gap:0.75rem}
.aside-steps .step{display:flex;align-items:flex-start;gap:1rem;padding:0;text-align:left;}
.aside-steps .step-num{width:44px;height:44px;padding:1rem;border-radius:50%;border: 0 !important;;display:flex;align-items:center;justify-content:center;background:#fff;color:#488F4D !important;font-weight:700;font-size:1rem;margin: 0;background: #fff;}
.aside-steps .step h4{margin:0 0 .25rem 0;color:#595959;font-weight:600}
.aside-steps .step p{margin:0;color:#52605a;font-size:.95rem}

@media (max-width: 768px){
  .aside-steps .step{gap:.5rem}
  .aside-steps .step-num{width:40px;height:40px;font-size:.95rem;border-width:2px}
}

/* About section: make title, muted text and grid content darker */
#about .section-title{color:var(--secondary)}
#about .text-muted-foreground{color:#545454}
#about .text-foreground{color:#545454}
#about .grid .font-semibold,#about .grid h4{color:#545454}
#about .grid p{color:#475569}

/* Partner CTA */
.partner-cta::before{content:"";width:100%;height:100%;position:absolute;top:-5px;background:url('../images/bg-wave-order.svg') no-repeat top center;background-size: 100%}
.partner-cta::after{content:"";width:100%;height:100%;position:absolute;bottom:-5px;background:url('../images/bg-wave-marketing.svg') no-repeat bottom center;background-size: 100%}
.partner-cta.second::after{display: none;}

/* Clients carousel (JS-driven infinite marquee) */
.clients-carousel{overflow:hidden;padding:1.25rem 0}
.clients-track{display:flex;align-items:center;gap:2.5rem;will-change:transform}
.client-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.client-item img{height:42px;opacity:0.95;filter:grayscale(10%);object-fit:contain}

@media(min-width:768px){
  .clients-track{gap:3.5rem}
  .client-item img{height:64px}
}

/* Footer */
.site-footer{background:var(--cream-dark);padding:3rem 0;}
.footer-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}
.logo-circle.large img{width:80px;height:80px}
.footer-logo .logo-text{font-family: "Noto Sans", sans-serif;font-size:18px;font-weight:800;letter-spacing:1px;color:#525252;white-space:nowrap}
.footer-nav{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin:2rem 0}
.footer-nav a{text-decoration:none;color:#525252;font-weight:600}
.footer-nav a:hover{text-decoration:underline;}
.contact-info{display:flex;justify-content:center;gap:2rem;color:#6B6B6B;text-align:center;margin-top:1rem}
.contact-info img{width: 16px;}
.site-footer hr{border:none;border-top:2px dashed rgba(0,0,0,0.1)}
.site-footer .copyright{margin-top:1rem;color:var(--muted)}
.whatsapp{position:fixed;right:1.5rem;bottom:1.5rem;width:56px;height:56px;border-radius:9999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.25rem}


/* Responsive */
@media(min-width:1024px){
  .nav-left{display:flex}
  .nav-links{display:flex}
  .hero h1{font-size:3.5rem}
  .steps{grid-template-columns:repeat(4,1fr);position:relative}
  .step{padding:2rem}
  .product-grid{grid-template-columns:repeat(3,1fr)}
}

/* Products carousel: show 3 / 2 / 1 items depending on breakpoint */
.products-track .product{flex:0 0 100%;max-width:100%}
@media (min-width: 768px) and (max-width: 1023px){
  .products-track .product{flex:0 0 50%;max-width:50%}
}
@media (min-width: 1024px){
  .products-track .product{flex:0 0 33.3333%;max-width:33.3333%}
}

/* Footer: responsive adjustments for small screens */
@media (max-width: 768px) {
  .contact-info{
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    text-align:center;
  }
  .contact-info .inline-flex{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
  }
  /* Stack the bottom copyright/social row and center items */
  .site-footer .flex.justify-between.items-center{
    flex-direction:column;
    gap:0.75rem;
    align-items:center;
  }
  /* Give footer links a bit more breathing room on small screens */
  .footer-nav{gap:1rem}
}

/* Mobile menu overlay and off-canvas panel */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:60;opacity:1;transition:opacity .25s}
.menu-overlay.hidden{opacity:0;pointer-events:none}
.mobile-menu{position:fixed;right:0;top:0;height:100%;width:320px;max-width:90%;background:#fff;z-index:70;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.9,.2,1);box-shadow:-8px 0 30px rgba(2,6,23,.15)}
.mobile-menu[aria-hidden="false"]{transform:translateX(0)}
.mobile-menu-inner{height:100%;display:flex;flex-direction:column}
.mobile-menu .logo-text{font-family: "Noto Sans", sans-serif;font-size:18px;font-weight:800;letter-spacing:1px;color:#216726;white-space:nowrap}
.mobile-menu .menu-close{color:#525252;position:absolute;top:20px;right:20px;background-color:rgba(0,0,0,0.1);width:40px;height:40px;border-radius:50%;font-size:1.7rem;padding-top:2px;}
.mobile-menu ul li a{color:#525252;font-weight:600;}

/* ensure header buttons show/hide correctly when tailwind utilities are present */
.btn-menu-toggle{display:block}
@media(min-width:1024px){
  .btn-menu-toggle{display:none}
}
.btn-menu-toggle{background:#2C6F31;border:0;padding:.5rem;border-radius:50px;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--fg);position:absolute;left:0;width:40px;height:40px;}

/* About section: responsive tweaks for desktop / tablet / mobile */
@media (min-width: 1024px) {
  #about .relative.flex-shrink-0 { width: 450px; }
  #about .aspect-square { border-radius: 1.25rem; }
  #about .section-title { font-size: 2.4rem; }
  #about .text-muted-foreground { font-size: 1rem; max-width: none; }
}
@media (max-width: 1023px)  {
  /* Force stacking and center content on small screens */
  #about .flex{flex-direction:column;gap:1rem;align-items:start}
  #about .relative.flex-shrink-0{width:100%}
  #about .aspect-square{width:100%;height:auto;border-radius:1rem}
  #about .section-title{font-size:1.6rem;}
  #about .text-muted-foreground{font-size:0.95rem;}
}
@media (max-width: 650px)  {  
  /* Make the two-column mini-grid stack to one column */
  #about .grid{grid-template-columns:repeat(1,1fr)}
  #about .grid > div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
}

/* Cart summary box */
.summary-box{background:#ffffff;border:1px solid rgba(16,24,16,0.04);}
@media (max-width: 1023px){
  .summary-box{position:static;top:auto;}
}

/* Modal (checkout) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:90}
.modal.hidden{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5)}
.modal-content{position:relative;background:#fff;border-radius:12px;max-width:720px;width:94%;padding:1.5rem;z-index:95;box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:1.25rem;cursor:pointer}

/* Simple utility overrides to match existing button styles */
.btn.primary{background:#308136;color:#fff;padding:.75rem 1rem;border-radius:8px}
.btn.outline{border:1px solid #308136;background:transparent;color:#308136;padding:.6rem 1rem;border-radius:8px}

@media (max-width: 1023px){
  .modal-content{padding:1rem}
}

/* Cart item styles */
.cart-item{display:flex;gap:1rem;padding:1rem;position:relative;}
.cart-item img{border-radius:8px;object-fit:cover}
.cart-item h3{margin-bottom:.25rem;word-break:break-word}
.cart-item p{margin:0;word-break:break-word}

.qty-control{min-width:120px;justify-content:center}
.qty-control .qty-decrement,.qty-control .qty-increment{border:1px solid rgba(0,0,0,0.06);background:#fff;border-radius:9999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.qty-control .qty-value{min-width:40px;max-width:50px;text-align:center;display:inline-block;border:none;background:transparent;font-weight:500;font-size:1rem;padding:0;font-family:inherit;color:#525252;}
.qty-control .qty-value::-webkit-outer-spin-button,.qty-control .qty-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-control .qty-value[type=number]{-moz-appearance:textfield}

.cart-delete{display:inline-flex;align-items:center;justify-content:center;width:60px;height:45px;border-radius:9999px;background:#fff;border:1px solid rgba(0,0,0,0.04);cursor:pointer}
.cart-delete img{ width:24px;height:24px;}
.cart-delete:hover{background:#feecec}

@media (max-width: 767px){
  .cart-item{flex-direction:column;gap:.75rem;padding:.75rem}
  .qty-control{min-width:100px;width:100%}
  .qty-control{justify-content:space-between}
  .cart-delete{position: absolute;top: 10px;right:10px; width: 40px; height: 40px;}
}

/* Between 1024px and 1279px: use 2 columns for main product grid */
@media (min-width: 1024px) and (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* List Category*/
.list-category li a{margin-bottom:5px;display:flex; justify-content: space-between;}
.list-category li a svg{width:18px;margin-right:8px;fill: #888888;}
.list-category li a.active{color: #308136;font-weight:600;}
.list-category li a.active svg{fill: #308136;}

/* Testimoni cards */
.testimoni .inner{min-height:280px;background:#E6E8DF;border-radius:16px;overflow:hidden;padding:1.5rem;margin-top:0;}
.testimoni img{border-radius:8px;}
.testimoni .flex span{color:#fb923c;}
.testimoni .font-semibold{font-size:1rem;color:#1a1a1a;}
.testimoni .text-xs{font-size:0.8rem;color:#525252;}
.testimoni .muted{font-size:0.95rem;color:#434343;}