:root{
  --green-grama: #9ed548;
  --green-couve: #c7ea92;
  --green-jaca:  #6b9d31;
  --brown-terra: #d9a45f;
  --yellow-polpa: #ffd061;
  --yellow-polpa-30: #d0c08c;
  --black: #0a130a;
  --bg: #f6f9f2;
  --panel: #ffffff;
  --panel-2: #eef4e4;
  --text: #263425;
  --muted: #5b6a4c;
  --radius: 18px;
  --shadow: 0 20px 45px rgba(55,91,45,.12);
  --accent-green: #6ea743;
  --accent-green-dark: #4b7b28;
  --accent-stroke: rgba(108,166,74,.35);
  --tab-bg: #e9f2dc;
  --tab-border: #d0e4b5;
  --logo-height: 52px;
  --logo-height-mobile: 38px;
  --cert-height: 120px;
  --cert-height-mobile: 80px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Inter","Montserrat","Segoe UI","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system,"Helvetica Neue",sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--green-jaca);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}

.container{width:min(1200px, 92vw);margin:0 auto}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(96,138,68,.16);box-shadow:0 15px 40px rgba(0,0,0,.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{height:var(--logo-height);object-fit:contain}
.brand-text{display:flex;flex-direction:column;gap:4px}
.site-title{font-weight:800;font-size:clamp(18px,2.4vw,28px);letter-spacing:.2px;color:var(--green-jaca)}
.site-subtitle{font-size:clamp(12px,1.4vw,16px);color:var(--muted);text-transform:uppercase;letter-spacing:.32em}

.hero{position:relative;display:block;overflow:hidden;background:linear-gradient(120deg,#ffffff 0%,#f6f9f2 30%,#dff2c7 100%);min-height:clamp(420px,64vh,560px);border-bottom-left-radius:48px;border-bottom-right-radius:48px;padding:60px 0 84px;margin:0 auto}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(1.2);mix-blend-mode:multiply;border-radius:inherit}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#1b2418;text-align:left;gap:24px;margin:0 auto;width:100%;max-width:min(1100px,92vw);padding:0 clamp(24px,5vw,72px)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(245,249,242,.95) 0%,rgba(255,255,255,0) 70%);border-radius:inherit}
.hero h1{font-size:clamp(34px,4.8vw,64px);margin:0;font-weight:800;letter-spacing:.2px;line-height:1.1;color:#1c2a19;max-width:820px}
.hero p{margin:0;max-width:640px;font-size:clamp(16px,1.4vw,20px);color:#425138}
.hero .highlight{color:var(--accent-green);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.28em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.hero-certificates{display:flex;gap:20px;align-items:center;justify-content:flex-start;margin-top:8px;padding:6px 0 0;flex-wrap:wrap}
.hero-certificates img{max-height:var(--cert-height);filter:drop-shadow(0 8px 18px rgba(65,97,52,.25))}
.hero-certificates img:nth-child(2){filter:drop-shadow(0 10px 20px rgba(63,109,55,.35))}
.hero .cert-update-banner{margin:8px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:999px;border:1px solid var(--accent-stroke);background:var(--accent-green);color:#fff;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:14px;transition:.25s;box-shadow:0 18px 26px rgba(110,167,67,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:0 26px 36px rgba(110,167,67,.32);background:var(--accent-green-dark)}
.btn-ghost{border:1px solid rgba(38,52,37,.28);color:var(--accent-green-dark);background:rgba(255,255,255,.8);padding:12px 26px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.btn-ghost:hover{background:#fff;color:var(--accent-green-dark)}

.section{padding:56px 0}
.section.alt{background:var(--panel-2);border-radius:40px;margin-top:40px;padding:56px 0}
.section-header{text-align:center;max-width:780px;margin:0 auto 24px}
.section-header h2{font-size:clamp(26px,3vw,38px);margin:0 0 12px;color:#1d2b19;font-weight:800}
.section-header p{margin:0;color:var(--muted)}
.cert-update-banner{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 18px;padding:8px 16px;border-radius:999px;border:1px solid rgba(110,167,67,.32);background:rgba(247,253,240,.86);color:#3a6428;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 10px 22px rgba(72,105,52,.08);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.cert-update-banner:hover,.cert-update-banner:focus-visible{background:#ffffff;transform:translateY(-1px);box-shadow:0 14px 26px rgba(72,105,52,.12);outline:0}
.eyebrow{letter-spacing:.24em;text-transform:uppercase;font-size:12px;color:var(--accent-green-dark);font-weight:600;margin:0 0 4px}
.muted{color:var(--muted);font-size:14px}

.tabbar{display:flex;gap:8px;align-items:center;justify-content:center;margin:28px auto 6px;position:sticky;top:110px;z-index:55;padding:0 12px}
.tabbar .tab{flex:1;max-width:360px;background:var(--tab-bg);color:#3a4e2d;border:1px solid var(--tab-border);border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(255,255,255,.35);transition:.2s}
.tabbar .tab.active{background:var(--accent-green);color:#fff;border-color:transparent;box-shadow:0 12px 20px rgba(110,167,67,.35)}
.hidden{display:none !important}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px}
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(64,94,46,.08);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 50px rgba(72,106,54,.18)}
.card .thumb{aspect-ratio:4/3;background:#f0f5e8;display:grid;place-items:center;border-radius:12px;margin:14px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .content{padding:0 14px 16px}
.card h3{margin:0 0 6px;font-size:18px;color:#1f2b17}
.card p{margin:0 0 12px;color:#405038;min-height:48px}
.badges{display:flex;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.badge{background:#eef6e0;border:1px solid rgba(110,167,67,.25);color:#45602e;border-radius:999px;padding:4px 10px;font-size:12px}
.meta{color:#748163;font-size:12px;margin:12px 0 8px;text-transform:uppercase;letter-spacing:.2em}
.price{font-weight:900;color:var(--accent-green-dark);margin-bottom:12px;font-size:18px}
.card .actions{display:flex;gap:10px}

.intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:40px 0}
.intro-grid .card{padding:28px}
.intro-grid ul{padding-left:20px;color:#4a4a4a;line-height:1.5}
.info-card{background:#fff;color:#1c1c1c;border:1px solid rgba(58,87,39,.12);box-shadow:0 30px 55px rgba(40,70,34,.08)}
.info-card h3{color:#1c2a19;font-size:20px;margin-top:0}
.info-card ul li{color:#3e4d33}
.quote-card{margin:32px 0;padding:32px;border-radius:var(--radius);background:linear-gradient(135deg,#ffffff 0%,#f7f5e3 100%);border:1px solid rgba(102,85,45,.15);box-shadow:0 30px 45px rgba(0,0,0,.08)}
.quote-card p{font-size:22px;font-style:italic;color:#1e2a19;margin:0 0 12px}
.quote-author{display:flex;flex-direction:column;color:#4a4a4a;font-size:14px}
.usage-grid{margin:24px 0;padding:32px;border-radius:var(--radius);border:1px solid rgba(110,167,67,.18);background:linear-gradient(120deg,#fdfef8 0%,#edf7da 100%)}
.usage-grid h3{margin:0 0 18px;color:#1e1e1e}
.usage-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.usage-item{display:flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid rgba(41,67,26,.08);border-radius:14px;padding:12px 16px;font-weight:600;color:#2d2d2d;box-shadow:0 8px 24px rgba(50,70,36,.08);text-align:center}
.rep-card{margin:36px 0;padding:32px;border-radius:var(--radius);background:#fff;border:1px solid rgba(61,88,43,.15);display:flex;flex-wrap:wrap;gap:24px;align-items:center;box-shadow:0 40px 60px rgba(45,69,34,.12);color:#232323}
.rep-card ul{list-style:none;margin:0;padding:0;color:#444}
.rep-card li{margin:4px 0}
.rep-card .eyebrow{color:#6d7f4f}

.product-section{margin-top:42px}
.section-subheader h3{margin:0;color:#203019;font-size:24px}
.section-subheader p{margin:6px 0 0;color:#657354}
.disclaimer-card{margin-top:32px;padding:20px;border:1px dashed rgba(78,132,61,.6);border-radius:var(--radius);background:#f5fbef;color:#3d532c}

.conditions{max-width:1100px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.conditions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:24px;justify-content:center}
.conditions .card{background:#fff;border:1px solid rgba(79,112,54,.12);padding:22px;border-radius:18px;overflow:visible;box-shadow:0 24px 45px rgba(46,70,36,.1)}
.conditions .card h3{color:#22321a;text-align:center;margin:0 0 10px;font-size:18px}
.conditions .card p, .conditions .card li{color:#42513a;line-height:1.5;overflow-wrap:anywhere}
.conditions .card ul{margin:8px 0 0 18px}
.conditions .card h3 .icon{width:22px;height:22px;vertical-align:-4px;margin-right:8px;stroke:currentColor;fill:none;stroke-width:2}

.site-footer{background:#f0f5e8;color:#44543b;padding:40px 0 22px;margin-top:40px;border-top:1px solid rgba(74,107,49,.12)}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.footer-brand p{color:#4e5c41;max-width:320px}
.footer-certificates{display:flex;gap:16px;align-items:center;justify-content:center}
.footer-certificates img{max-height:var(--cert-height)}
.footer-brand img{max-height:var(--cert-height);width:auto}
.footer-contact{justify-self:end;text-align:right}
.footer-contact ul{list-style:none;padding:0;margin:0}
.footer-contact li{margin:6px 0;color:#4e5c41;font-weight:600}
.legal{border-top:1px solid rgba(71,99,56,.2);margin-top:16px;padding-top:10px;text-align:center;color:#6c7b5c}

.modal{position:fixed;inset:0;display:none;z-index:1000;padding:24px;}
.modal.active{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,24,15,.65);z-index:0}
.modal-content{position:relative;z-index:1;width:min(780px,92vw);margin:0 auto;background:#ffffff;border-radius:24px;box-shadow:0 45px 90px rgba(0,0,0,.2);padding:28px;color:#2b3726;border:1px solid rgba(60,93,39,.18)}
.modal-close{position:absolute;top:12px;right:14px;border:0;background:#f2f7ec;color:#2c3a28;border-radius:50%;padding:4px 10px;font-size:24px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.modal-attachments{margin-top:18px;padding-top:14px;border-top:1px solid rgba(54,86,36,.1);display:flex;flex-wrap:wrap;gap:12px}
.attachment-link{display:flex;flex-direction:column;row-gap:4px;padding:12px 16px;border-radius:12px;border:1px solid rgba(110,167,67,.4);background:#fbfff7;color:#2f4025;font-weight:600;text-decoration:none;min-width:220px}
.attachment-link:hover{text-decoration:none;background:#f0f8e4}
.attachment-link small{font-size:12px;color:#5a7041;opacity:.85}

@media (max-width: 900px){
  .hero{border-bottom-left-radius:32px;border-bottom-right-radius:32px;padding:64px 0 96px}
  .hero-content{max-width:100%}
  .tabbar{top:72px}
  .footer-inner{grid-template-columns:1fr}
  .footer-contact{justify-self:start;text-align:left}
}

@media (max-width: 720px){
  .hero{min-height:clamp(360px,56vh,440px);padding:64px 0 96px}
  .hero h1{font-size:clamp(28px,7vw,40px)}
  .hero p{max-width:92vw}
  .hero-content{gap:14px;padding:0 7vw}
  .hero-actions{width:100%;flex-direction:column}
  .hero-actions .btn,
  .hero-actions .btn-ghost{width:100%;justify-content:center}
  .hero-certificates{justify-content:center;margin-top:4px}
  .hero-certificates img{max-height:var(--cert-height-mobile)}
  .hero-certificates img:nth-child(2){filter:drop-shadow(0 0 6px rgba(55,85,43,.45))}
  .hero .cert-update-banner{margin:8px auto 0}
  .logo{height:var(--logo-height-mobile)}
  .tabbar{top:86px;padding:0 8px;gap:6px}
  .tabbar .tab{padding:10px 12px;font-size:14px}
  .product-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
  .product-grid .card{border-radius:16px}
  .product-grid .card .thumb{margin:10px;border-radius:12px}
  .product-grid .card .content{padding:0 10px 14px}
  .product-grid .card h3{font-size:15px}
  .product-grid .card p{font-size:13px;min-height:auto}
  .conditions-grid{grid-template-columns:1fr;gap:18px;justify-items:center}
  .conditions .card{margin:0;width:100%;max-width:360px}
  .modal-content{width:min(94vw,760px)}
  .footer-certificates img,
  .footer-brand img{max-height:var(--cert-height-mobile)}
}