:root{
  --sage:#C2E2CE;
  --sage-deep:#408c77;
  --silver:#c1e6d0;
  --white:#FFFFFF;
  --cream:#F6F7F5;
  --ink:#408c77;
  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--sage-deep);font-family:var(--font-body);line-height:1.5;overflow-x:hidden;}
h1, h2, h3, h4, h5, h6 {color: #408c77; font-family: var(--font-display);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem clamp(1.5rem,4vw,4rem);
  background:rgba(255,255,255,0.88);backdrop-filter:blur(8px);
}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:0.04em;color:var(--sage-deep);}
.nav-links{display:flex;gap:1.8rem;font-size:0.82rem;letter-spacing:0.02em;}
.nav-links a{opacity:0.65;transition:opacity .2s;}
.nav-links a:hover,.nav-links a.active{opacity:1;}
.nav-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--sage-deep);}
@media(max-width:860px){
  .nav-links{position:fixed;top:64px;left:0;right:0;background:var(--white);flex-direction:column;gap:0;padding:0.5rem 1.5rem 1.5rem;transform:translateY(-110%);transition:transform .25s ease;border-bottom:1px solid #c1e6d0;}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:0.7rem 0;border-top:1px solid #c1e6d0;opacity:1;}
  .nav-toggle{display:block;}
}

/* PAGE HERO (interior pages) */
.page-hero{padding:9rem clamp(1.5rem,6vw,6rem) 3rem;background:var(--sage);}
.page-hero .eyebrow-sm{margin-bottom:0.6rem;color:var(--white);}
.page-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.2rem);color:var(--white);white-space:nowrap;}
@media(max-width:1100px){.page-hero h1{font-size:2.2rem;}}
@media(max-width:820px){.page-hero h1{white-space:normal;font-size:2rem;}}

/* SECTION SHARED */
section{padding:clamp(3.5rem,9vw,7rem) clamp(1.5rem,6vw,6rem);}
.section-inner{max-width:1100px;margin:0 auto;}
.eyebrow-sm{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;margin-bottom:0.8rem;}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);max-width:none;color:#408c77;}
.char{display:inline-block;opacity:0;transform:translateY(0.5em);transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--char-index)*20ms);}
.is-visible .char{opacity:1;transform:translateY(0);}

p.lead{color:#408c77;max-width:none;font-size:1.02rem;}
.cta{display:inline-block;margin-top:1.6rem;padding:0.9rem 1.8rem;background:var(--sage-deep);color:var(--white);font-size:0.85rem;letter-spacing:0.04em;border-radius:2px;transition:background .2s;}
.cta:hover{background:var(--sage);}
.cta.outline{background:transparent;color:var(--sage-deep);border:1px solid var(--sage-deep);}
.cta.outline:hover{background:var(--sage-deep);color:var(--white);}

/* TEASER GRID (home) */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem;}
.teaser-card{background:var(--cream);border-radius:4px;padding:2rem;border:1px solid #c1e6d0;transition:transform .2s;}
.teaser-card:hover{transform:translateY(-4px);}
.teaser-card h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:0.6rem 0 0.6rem;color:#408c77;}
.teaser-card p{color:#408c77;font-size:0.9rem;margin-bottom:1rem;}
.teaser-card a{font-size:0.8rem;color:var(--sage-deep);font-weight:600;}
@media(max-width:820px){.teaser-grid{grid-template-columns:1fr;}}

/* PRODUCT LIST */
.product-list{list-style:none;margin-top:1.4rem;}
.product-list li{padding:0.7rem 0;border-top:1px solid #c1e6d0;color:#408c77;font-size:0.95rem;}
.product-list li:first-child{border-top:none;}

/* INGREDIENTES */
.ing-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.5rem;}
.ing-card{background:var(--sage-deep);padding:2.2rem;border-radius:4px;border:none;}
.ing-card .tag{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage);font-weight:600;}
.ing-card h3{font-family:var(--font-display);font-weight:700;font-size:1.4rem;margin:0.6rem 0 0.8rem;color:var(--white);}
.ing-card p{color:var(--white);font-size:0.92rem;opacity:0.95;}
@media(max-width:720px){.ing-grid{grid-template-columns:1fr;}}

/* TECNOLOGIA */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.5rem;}
.tech-item .num{font-family:var(--font-display);font-size:2.2rem;color:var(--sage-deep);}
.tech-item h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin:0.6rem 0 0.6rem;color:#408c77;}
.tech-item p{color:#408c77;font-size:0.92rem;max-width:42ch;}
@media(max-width:720px){.tech-grid{grid-template-columns:1fr;}}

/* GALERIA */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem;}
.gallery-item{aspect-ratio:16/9;background:linear-gradient(160deg,var(--sage) 0%, var(--sage-deep) 100%);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-display);font-size:0.9rem;text-align:center;opacity:0.9;transition:transform .25s,opacity .25s;overflow:hidden;position:relative;}
.gallery-item video{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-item:hover{transform:scale(1.02);opacity:1;}
@media(max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.gallery-grid{grid-template-columns:1fr;}}

/* PRODUCT LAYOUT (Image 2 style) */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media(max-width:820px){
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-info-column {
    padding-left: 0 !important;
  }
}
.product-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-main-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  background-color: var(--cream);
}
.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.product-thumbnail-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  background-color: var(--cream);
}
.product-thumbnail-img:hover, .product-thumbnail-img.active {
  border-color: var(--sage-deep);
}
.product-info-column {
  padding-left: 1rem;
}
.product-info-column .eyebrow-sm {
  margin-bottom: 0.5rem;
}
.product-info-column h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}
@media(max-width: 1200px) {
  .product-info-column h1 {
    font-size: 1.8rem;
  }
}
@media(max-width: 990px) {
  .product-info-column h1 {
    font-size: 1.5rem;
  }
}
@media(max-width: 820px) {
  .product-info-column h1 {
    white-space: normal;
    font-size: 2rem;
  }
}
.product-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--sage-deep);
  margin-bottom: 1.5rem;
}
.product-desc {
  font-size: 0.95rem;
  color: var(--sage-deep);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.product-benefits-section {
  margin-bottom: 2rem;
}
.product-benefits-section h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.product-benefits-list {
  list-style-position: inside;
  font-size: 0.92rem;
  line-height: 1.7;
}
.product-buy-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.product-qty {
  width: 65px;
  padding: 0.8rem;
  border: 1px solid var(--sage);
  border-radius: 2px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--sage-deep);
  outline: none;
}
.product-add-btn {
  flex-grow: 1;
  padding: 0.9rem;
  background: var(--sage-deep);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}
.product-add-btn:hover {
  background: #34705f;
}
.product-accordions {
  border-top: 1px solid #E4E7E2;
  padding-top: 1.5rem;
}
.product-accordions details {
  margin-bottom: 1rem;
  border-bottom: 1px solid #E4E7E2;
  padding-bottom: 1rem;
}
.product-accordions details[open] {
  border-bottom: 1px solid #E4E7E2;
}
.product-accordions summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sage-deep);
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-accordions summary::-webkit-details-marker {
  display: none;
}
.product-accordions summary::after {
  content: '▼';
  font-size: 0.7rem;
  transition: transform 0.2s;
}
.product-accordions details[open] summary::after {
  transform: rotate(180deg);
}
.product-accordion-content {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 0.8rem;
  color: var(--sage-deep);
}

/* SHOP */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;margin-top:2.5rem;align-items:start;}
.shop-image{aspect-ratio:1/1;background:linear-gradient(135deg,var(--sage) 0%, var(--sage-deep) 70%);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-display);text-align:center;padding:2rem;}
.price{font-family:var(--font-display);font-size:1.8rem;margin:1rem 0;color:var(--sage-deep);}
@media(max-width:820px){.shop-grid{grid-template-columns:1fr;}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-top:2.5rem;}
.form-field{margin-bottom:1.2rem;}
.form-field label{display:block;font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;margin-bottom:0.4rem;}
.form-field input,.form-field textarea{width:100%;padding:0.8rem;border:1px solid #c1e6d0;border-radius:2px;font-family:var(--font-body);font-size:0.95rem;background:var(--white);}
.form-field textarea{min-height:120px;resize:vertical;}
.faq-item{padding:1.2rem 0;border-top:1px solid #c1e6d0;}
.faq-item:first-child{border-top:none;}
.faq-item h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:0.4rem;}
.faq-item p{color:#408c77;font-size:0.9rem;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* FOOTER */
footer{background:var(--sage-deep);color:var(--white);padding:1rem clamp(1.5rem,6vw,6rem);}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:1rem;max-width:1100px;margin:0 auto;}
footer .wordmark{color:var(--sage);}
footer h5{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.6;margin-bottom:0.3rem;color:#408c77;}
footer ul{list-style:none;}
footer li{margin-bottom:0.2rem;font-size:0.8rem;opacity:0.85;}
footer li a:hover{opacity:0.7;}
footer p.credit{font-size:0.75rem;opacity:0.5;margin-top:2.4rem;text-align:center;max-width:1100px;margin-left:auto;margin-right:auto;}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .char{transition:none !important;opacity:1 !important;transform:none !important;}
}

/* VIDEO DE FONDO */
.has-bg-video {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #C2E2CE 0%, var(--white) 15%, var(--white) 85%, var(--cream) 100%);
  padding-top: 10rem;
  padding-bottom: 6rem;
}
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}
.has-bg-video .section-inner {
  position: relative;
  z-index: 1;
}

/* FONDO PILARES */
.pilares-bg {
  position: relative;
  background: linear-gradient(to bottom, var(--sage) 0%, var(--cream) 120px, var(--cream) 100%);
  padding-top: 4rem;
}
.pilares-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(246, 247, 245, 0.4), rgba(246, 247, 245, 0.4)),
    url('assets/bg-pilares.webp');
  background-size: cover, cover;
  background-position: center, center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  z-index: 0;
}
.pilares-bg .section-inner {
  position: relative;
  z-index: 1;
}

/* FONDO GALERIA */
.gallery-section-bg {
  position: relative;
  background: linear-gradient(to bottom, var(--sage) 0%, var(--white) 120px, var(--white) 100%);
}
.gallery-section-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(246, 247, 245, 0.55), rgba(246, 247, 245, 0.55)),
    url('assets/galeria-seccion-bg.jpg');
  background-size: cover, cover;
  background-position: center, center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  z-index: 0;
}
.gallery-section-bg .section-inner {
  position: relative;
  z-index: 1;
}

/* WHATSAPP BUBBLE & CART DRAWER */
.whatsapp-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: var(--sage-deep);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(64, 140, 119, 0.3);
  z-index: 999;
  transition: transform 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}
.whatsapp-bubble:hover {
  transform: scale(1.08);
  background-color: #34705f;
}
.whatsapp-bubble svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* Cart Nav Icon */
.cart-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.cart-nav-icon {
  width: 20px;
  height: 20px;
  fill: var(--sage-deep);
  opacity: 0.65;
  transition: opacity 0.2s;
}
.cart-nav-item:hover .cart-nav-icon, .cart-nav-item.active .cart-nav-icon {
  opacity: 1;
}
.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: var(--sage-deep);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Cart Overlay & Drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background-color: var(--white);
  z-index: 1001;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.open {
  transform: translateX(0);
}
.cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--sage);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--sage-deep);
  text-transform: uppercase;
}
.cart-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--sage-deep);
}
.cart-items {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.cart-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(193, 230, 208, 0.3);
}
.cart-item-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
}
.cart-item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-item-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sage-deep);
}
.cart-item-price {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--sage-deep);
}
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.cart-qty-btn {
  background: none;
  border: 1px solid var(--sage);
  color: var(--sage-deep);
  width: 24px;
  height: 24px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
}
.cart-item-qty {
  font-size: 0.9rem;
  min-width: 20px;
  text-align: center;
}
.cart-item-remove {
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: auto;
}
.cart-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--sage);
  background-color: var(--cream);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sage-deep);
  margin-bottom: 1.5rem;
}
.cart-checkout-btn {
  width: 100%;
  padding: 1rem;
  background-color: var(--sage-deep);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
  display: block;
}
.cart-checkout-btn:hover {
  background-color: #34705f;
}
.cart-empty-msg {
  text-align: center;
  color: var(--sage-deep);
  opacity: 0.7;
  margin-top: 3rem;
  font-size: 0.95rem;
}