/* ===== Tokens ===== */
:root{
  --green: #0E4F35;
  --green-dark: #0A3A27;
  --lime: #AFC32F;
  --lime-dark: #93A825;
  --ink: #111111;
  --ink-soft: #52605A;
  --paper: #ffffff;
  --bg-soft: #F3F4F3;
  --line: rgba(17,17,17,.12);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--serif); font-weight:600; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
svg{ width:1em; height:1em; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-size: .78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green); font-weight:700; margin-bottom:.9rem;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-weight:600; font-size:.95rem; transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.btn--primary{ background: var(--green); color: #fff; }
.btn--primary:hover{ background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,79,53,.28); }
.btn--ghost{ border:1.5px solid var(--green); color: var(--green); }
.btn--ghost:hover{ background: var(--green); color: #fff; transform: translateY(-2px); }
.btn--lime{
  background: var(--lime); color: var(--ink); width:100%; justify-content:center; text-align:center;
}
.btn--lime:hover{ background: var(--lime-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(175,195,47,.35); }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  transition: box-shadow .3s, background .3s;
}
.nav.is-scrolled{ background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(17,17,17,.06); }
.nav__inner{
  max-width: var(--container); margin:0 auto; padding: .9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--serif); font-weight:600; color: var(--ink); }
.nav__logo{ width:38px; height:38px; object-fit:contain; border-radius:50%; }
.nav__links{ display:flex; align-items:center; gap:2rem; font-size:.92rem; font-weight:500; }
.nav__links a:not(.nav__cta){ position:relative; color: var(--ink); }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--lime);
  transition: width .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{ padding:.55rem 1.2rem; border-radius:999px; background: var(--green); color: #fff; transition: background .3s; }
.nav__cta:hover{ background: var(--lime); color: var(--ink); }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav__toggle span{ width:22px; height:2px; background:var(--ink); }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding: 8rem 1.5rem 4rem; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; }
.hero__capybara{ width:120%; max-width:1100px; color: var(--green); opacity:.05; }
.hero__content{ position:relative; z-index:2; max-width:820px; }
.hero__content h1{
  font-size: clamp(2.6rem, 6vw, 5rem); line-height:1.02; margin: 0 0 1.4rem; color: var(--ink);
}
.hero__content h1 em{ font-style:italic; color: var(--green); }
.hero__sub{
  font-size:1.15rem; color: var(--ink-soft); max-width:560px; margin:0 auto 2.2rem;
}
.hero__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2;
}
.hero__scroll span{
  width:1px; height:38px; background: linear-gradient(var(--ink), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
.hero__scroll p{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft); }
@keyframes scrollPulse{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

/* ===== Signature banner (slogan) ===== */
.signature-banner{
  background: var(--green); color: #fff; text-align:center;
  padding: 5.5rem 1.5rem; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.signature-banner__logo{
  width:4.2rem; height:4.2rem; border-radius:50%; background:#fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.08);
}
.signature-banner__eyebrow{
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.6); font-weight:600;
}
.signature-banner__line{
  font-size: clamp(2rem, 5vw, 3.6rem); line-height:1.12; color:#fff; max-width:820px;
}

/* ===== Section shell ===== */
section{ position:relative; padding: 7rem 1.5rem; }
.about__mark{
  position:absolute; top:2rem; right:1.5rem; font-family:var(--serif);
  font-size:5rem; color: rgba(17,17,17,.05); font-weight:600; line-height:1;
}
.about__mark--light{ color: rgba(255,255,255,.12); }

/* ===== About ===== */
.about{ max-width: var(--container); margin:0 auto; background: var(--paper); }
.about__grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items:start;
}
.about__lead h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); line-height:1.15; color: var(--ink); }
.about__body p{ font-size:1.05rem; color: var(--ink-soft); margin-bottom:1.2rem; }
.about__body strong{ color: var(--ink); }

/* ===== Products ===== */
.products{ background: var(--bg-soft); }
.products__head{ max-width: var(--container); margin:0 auto 3.5rem; text-align:center; }
.products__head h2{ font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); }
.products__sub{ color: var(--ink-soft); max-width:540px; margin:1rem auto 0; }

.products__body{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: minmax(280px, 360px) 1fr; gap:2.4rem; align-items:start;
}

/* Featured product: the one category with a real photo today */
.feature-card{
  display:block; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; cursor:pointer; text-align:left;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover, .feature-card:focus-visible{
  transform: translateY(-5px); box-shadow: 0 22px 44px rgba(14,79,53,.16); border-color: var(--lime); outline:none;
}
.feature-card__media{ aspect-ratio: 1 / 1; background: var(--bg-soft); }
.feature-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-card__body{ padding: 1.7rem 1.7rem 1.9rem; }
.feature-card__eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color: var(--lime-dark); margin-bottom:.6rem;
}
.feature-card__body h3{ font-family: var(--serif); font-size:1.45rem; color: var(--ink); margin-bottom:.6rem; }
.feature-card__desc{ font-size:.92rem; color: var(--ink-soft); line-height:1.55; margin-bottom:1.2rem; }
.feature-card__cta{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.88rem; color: var(--green);
}
.feature-card__cta svg{ width:1.05rem; height:1.05rem; transition: transform .3s var(--ease); }
.feature-card:hover .feature-card__cta svg{ transform: translateX(4px); }

/* Rest of the catalog: grouped reference list, not equal-weight tiles */
.catalog{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1.3rem;
}
.catalog__group{
  background: var(--paper); border:1px solid var(--line); border-radius:14px;
  padding: 1.3rem 1.4rem 1.4rem;
}
.catalog__group h4{
  font-family: var(--serif); font-size:1.05rem; font-weight:600; color: var(--green);
  margin:0 0 .8rem; padding-bottom:.7rem; border-bottom:1.5px solid var(--bg-soft);
}
.catalog__group ul{ list-style:none; margin:0; padding:0; }
.catalog__group li{
  display:flex; align-items:center; gap:.7rem; padding:.5rem 0; font-size:.9rem; color: var(--ink);
  border-bottom:1px solid var(--bg-soft); transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.catalog__group li:last-child{ border-bottom:none; }
.catalog__group li svg{ width:1.15rem; height:1.15rem; color: var(--green); flex-shrink:0; transition: color .25s; }
.catalog__group li:hover{ color: var(--lime-dark); padding-left:.4rem; }
.catalog__group li:hover svg{ color: var(--lime-dark); }

/* ===== Branches ===== */
.branches{ background: var(--green); color: #fff; }
.branches .eyebrow{ color: rgba(255,255,255,.85); text-align:center; }
.branches > h2{ text-align:center; color: #fff; font-size: clamp(2rem,4vw,3rem); margin-bottom:3.5rem; }
.branches__grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:1.6rem;
}
.branch-card{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); overflow:hidden;
  transition: transform .4s var(--ease), background .3s;
}
.branch-card:hover{ transform: translateY(-6px); background: rgba(255,255,255,.14); }
.branch-card__map{ width:100%; height:170px; background: var(--green-dark); }
.branch-card__map iframe{ width:100%; height:100%; border:0; }
.branch-card__body{ padding: 1.8rem 1.6rem 2.2rem; }
.branch-card__pin{
  width:2.6rem; height:2.6rem; border-radius:50%; background: #fff; color: var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
}
.branch-card__pin svg{ width:1.3rem; height:1.3rem; }
.branch-card h3{ font-size:1.3rem; margin-bottom:.6rem; color: #fff; }
.branch-card p{ color: rgba(255,255,255,.85); font-size:.94rem; line-height:1.5; }

/* ===== Contact ===== */
.contact{ text-align:center; background: var(--paper); }
.contact__inner{ max-width:760px; margin:0 auto; }
.contact > .contact__inner h2{ font-size: clamp(2rem,4vw,3rem); margin: 1rem 0 2.5rem; color: var(--ink); }
.contact__row{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.contact__item{
  display:flex; align-items:center; gap:.6rem;
  padding: 1rem 1.5rem; border-radius:999px; border:1.5px solid var(--green);
  font-weight:600; color: var(--ink); transition: all .3s var(--ease);
}
.contact__item svg{ width:1.15rem; height:1.15rem; color: var(--green); }
.contact__item:hover{ background: var(--green); color: #fff; transform: translateY(-3px); }
.contact__item:hover svg{ color: #fff; }
.contact__item--whatsapp{ background: var(--lime); border-color: var(--lime); }
.contact__item--whatsapp svg{ color: var(--ink); }
.contact__item--whatsapp:hover{ background: var(--lime-dark); border-color: var(--lime-dark); color: var(--ink); }
.contact__item--whatsapp:hover svg{ color: var(--ink); }

/* ===== Footer ===== */
.footer{
  padding: 3rem 1.5rem; text-align:center; background: var(--green-dark); color: rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; gap:1rem; font-size:.85rem;
}
.footer__logo{ width:44px; height:44px; border-radius:50%; background:#fff; }

/* ===== Product detail modal ===== */
/* The <dialog> itself must never receive a `transform` — Chrome silently
   drops its modal/backdrop state if it does. Position it with inset+margin
   auto instead, and animate the inner wrapper for open/close motion. */
.product-modal{
  border:none; padding:0; background:transparent; overflow:visible;
  position: fixed; inset:0; margin:auto; z-index:100;
  width: fit-content; height: fit-content;
  max-width: calc(100% - 2.5rem); max-height: calc(100vh - 4rem);
}
.product-modal::backdrop{ background: rgba(10,20,15,.55); backdrop-filter: blur(3px); }
.product-modal__inner{
  border-radius: 22px; max-width: 780px; width: calc(100vw - 2.5rem);
  box-shadow: 0 30px 70px rgba(17,17,17,.35);
  overflow:hidden; max-height: calc(100vh - 4rem); overflow-y:auto;
  background: var(--paper);
}
.product-modal__close{
  position:absolute; top:1rem; right:1rem; width:2.4rem; height:2.4rem; border-radius:50%;
  border:1px solid var(--line); background: var(--paper); color: var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition: background .3s, transform .3s;
}
.product-modal__close svg{ width:1.1rem; height:1.1rem; }
.product-modal__close:hover{ background: var(--bg-soft); transform: rotate(90deg); }
.product-modal__grid{
  display:grid; grid-template-columns: .85fr 1.15fr;
}
.product-modal__diagram{
  background: var(--bg-soft); display:flex; align-items:center; justify-content:center;
  padding: 1.6rem; border-radius: 22px 0 0 22px;
}

/* Real product photo with dimension callouts overlaid on top */
.bag-photo{ position:relative; width:100%; }
.bag-photo img{ width:100%; display:block; border-radius:10px; }
.bag-photo__dim{ position:absolute; color: var(--ink); }
.bag-photo__dim-line{
  position:relative; display:block; background: var(--ink);
}
.bag-photo__dim-line::before, .bag-photo__dim-line::after{
  content:""; position:absolute; background: var(--ink);
}
.bag-photo__dim-label{
  position:absolute; font-size:.68rem; font-weight:700; letter-spacing:.02em;
  background: rgba(255,255,255,.92); padding:.15rem .5rem; border-radius:5px;
  white-space:nowrap;
}

.bag-photo__dim--width{ left:43%; width:42%; top:66%; }
.bag-photo__dim--width .bag-photo__dim-line{ width:100%; height:1.5px; }
.bag-photo__dim--width .bag-photo__dim-line::before,
.bag-photo__dim--width .bag-photo__dim-line::after{ top:-4px; width:1.5px; height:9px; }
.bag-photo__dim--width .bag-photo__dim-line::before{ left:0; }
.bag-photo__dim--width .bag-photo__dim-line::after{ right:0; }
.bag-photo__dim--width .bag-photo__dim-label{
  top:100%; left:50%; transform:translate(-50%, .3rem);
}

.bag-photo__dim--height{ top:4%; height:62%; left:88%; }
.bag-photo__dim--height .bag-photo__dim-line{ width:1.5px; height:100%; }
.bag-photo__dim--height .bag-photo__dim-line::before,
.bag-photo__dim--height .bag-photo__dim-line::after{ left:-4px; height:1.5px; width:9px; }
.bag-photo__dim--height .bag-photo__dim-line::before{ top:0; }
.bag-photo__dim--height .bag-photo__dim-line::after{ bottom:0; }
.bag-photo__dim--height .bag-photo__dim-label{
  left:100%; top:50%; transform:translate(.4rem, -50%);
}
.product-modal__info{ padding: 2.4rem 2rem 2rem; display:flex; flex-direction:column; background: var(--paper); }
.product-modal__info h3{ font-size:1.7rem; color: var(--ink); margin-bottom:1.2rem; }
.product-modal__table-wrap{ max-height: 320px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; margin-bottom:1.4rem; }
.product-modal__table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.product-modal__table thead th{
  position:sticky; top:0; background: var(--green); color:#fff; text-align:left;
  padding:.7rem .9rem; font-weight:600; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
}
.product-modal__table tbody td{ padding:.6rem .9rem; color: var(--ink); border-bottom:1px solid var(--line); }
.product-modal__table tbody tr:nth-child(even){ background: var(--bg-soft); }
.product-modal__table tbody tr:last-child td{ border-bottom:none; }

/* ===== Reveal base ===== */
[data-reveal]{ opacity:0; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .about__grid{ grid-template-columns:1fr; gap:2rem; }
  .products__body{ grid-template-columns:1fr; }
  .feature-card__media{ aspect-ratio: 16 / 10; }
  .nav__links{ position:fixed; top:66px; left:0; right:0; background:var(--paper); flex-direction:column;
    padding:1.5rem; gap:1.2rem; border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition: transform .35s var(--ease); }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__toggle{ display:flex; }
  .product-modal__grid{ grid-template-columns:1fr; }
  .product-modal__diagram{ border-radius:22px 22px 0 0; padding:1.6rem; }
}
@media (max-width:520px){
  section{ padding: 5rem 1.2rem; }
  .hero{ padding-top:7rem; }
  .contact__item{ width:100%; justify-content:center; }
  .catalog{ grid-template-columns:1fr; }
  .product-modal__inner{ width: calc(100vw - 1.5rem); }
  .product-modal__info{ padding: 1.8rem 1.3rem 1.5rem; }
}