/* ═══════════════════════════════════════════════
   BINTI NATURALES — Hoja de estilos compartida
   ═══════════════════════════════════════════════ */

:root {
  /* Verde oliva — color identidad Binti */
  --olive-dark:   #3a4c1a;
  --olive:        #5e7032;
  --olive-mid:    #7a9040;
  --olive-light:  #a8bc6f;
  --olive-pale:   #eaf0d8;

  /* Cálidos */
  --cream:        #fdf8f0;
  --beige:        #f0e0c6;
  --brown-light:  #c4a882;
  --brown:        #8b6347;
  --brown-dark:   #3d2b1f;
  --gold:         #c8a96e;

  /* Texto */
  --white:        #ffffff;
  --text:         #2c1f14;
  --text-muted:   #7a6553;

  --font-serif:   'Playfair Display', serif;
  --font-sans:    'Lato', sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { text-decoration:none; }

/* ══════════════════════════════
   NAVBAR
══════════════════════════════ */
nav {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:20px 70px;
  display:flex; justify-content:space-between; align-items:center;
  transition:all .35s ease;
}
/* Sobre hero: transparente */
nav.transparent .nav-logo { color:var(--white); }
nav.transparent .nav-links a { color:rgba(255,255,255,.88); }
nav.transparent .nav-ig { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.88); }

/* Scrolled / solid: fondo oliva oscuro */
nav.scrolled, nav.solid {
  background:var(--olive-dark);
  box-shadow:0 3px 30px rgba(0,0,0,.3);
  padding:12px 70px;
}
nav.scrolled .nav-logo, nav.solid .nav-logo { color:var(--white); }
nav.scrolled .nav-links a, nav.solid .nav-links a { color:rgba(255,255,255,.78); }
nav.scrolled .nav-ig, nav.solid .nav-ig { border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.78); }

.nav-logo {
  font-family:var(--font-serif);
  font-size:1.9rem; font-weight:700; letter-spacing:4px; color:var(--white);
  transition:color .3s;
}
.nav-links { display:flex; gap:34px; list-style:none; align-items:center; }
.nav-links a {
  font-size:.76rem; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:400; transition:color .3s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-5px; left:0;
  width:0; height:2px; background:var(--olive-light); transition:width .3s;
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--olive-light) !important; }
.nav-ig {
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid; padding:7px 16px;
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase; transition:all .3s;
}
.nav-ig:hover { background:var(--olive-light); border-color:var(--olive-light); color:var(--olive-dark) !important; }

/* ══════════════════════════════
   PAGE HERO (subpages)
══════════════════════════════ */
.page-hero {
  height:52vh; min-height:320px;
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04); transition:transform 8s ease;
}
.page-hero:hover .page-hero-bg { transform:scale(1); }
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(150deg,rgba(58,76,26,.72) 0%,rgba(61,43,31,.28) 100%);
}
.page-hero-content {
  position:relative; text-align:center; color:var(--white); padding:0 24px;
  animation:fadeInUp .9s ease both;
}
.page-hero-content .section-tag { color:rgba(255,255,255,.7); margin-bottom:12px; }
.page-hero-content h1 {
  font-family:var(--font-serif);
  font-size:clamp(2.4rem,6vw,4.5rem); font-weight:700; line-height:1.1;
  text-shadow:0 3px 30px rgba(0,0,0,.2);
}

/* ══════════════════════════════
   STRIP CLAIM
══════════════════════════════ */
.strip-claim {
  background:var(--olive); color:var(--white);
  padding:17px 60px;
  display:flex; justify-content:center; align-items:center; gap:40px; flex-wrap:wrap;
}
.strip-item { display:flex; align-items:center; gap:9px; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; opacity:.92; }
.strip-item .icon { font-size:1.1rem; }
.strip-sep { color:rgba(255,255,255,.3); font-size:1.3rem; }

/* ══════════════════════════════
   SECTION HELPERS
══════════════════════════════ */
.section-tag {
  display:inline-block; font-size:.7rem;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--olive); margin-bottom:14px; font-weight:700;
}
.section-title {
  font-family:var(--font-serif);
  font-size:clamp(2rem,3.5vw,3rem); color:var(--brown-dark); line-height:1.22;
}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn-primary {
  display:inline-block; padding:16px 46px;
  background:var(--olive); color:var(--white);
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; transition:all .3s;
}
.btn-primary:hover { background:var(--olive-dark); transform:translateY(-3px); }
.btn-gold {
  display:inline-block; padding:16px 46px;
  background:var(--gold); color:var(--brown-dark);
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; transition:all .3s;
}
.btn-gold:hover { background:var(--white); transform:translateY(-3px); }
.btn-outline {
  display:inline-block; padding:15px 42px;
  border:1.5px solid var(--olive); color:var(--olive);
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; transition:all .3s;
}
.btn-outline:hover { background:var(--olive); color:var(--white); }
.btn-outline-light {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.45); color:var(--white);
  padding:14px 34px;
  font-size:.78rem; letter-spacing:2.5px; text-transform:uppercase; transition:all .3s;
}
.btn-outline-light:hover { background:var(--olive-light); border-color:var(--olive-light); color:var(--olive-dark); }
.btn-wa {
  display:inline-flex; align-items:center; gap:12px;
  background:#25D366; color:var(--white); padding:17px 44px;
  font-size:.8rem; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; transition:all .3s;
}
.btn-wa:hover { background:#1fb855; transform:translateY(-3px); box-shadow:0 12px 32px rgba(37,211,102,.35); }
.btn-wa svg { width:22px; height:22px; fill:white; flex-shrink:0; }

/* ══════════════════════════════
   PRODUCT CARD
══════════════════════════════ */
.product-card { position:relative; overflow:hidden; cursor:pointer; }
.product-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.product-card:hover img { transform:scale(1.07); }
.product-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(58,76,26,.92) 0%,transparent 55%);
  opacity:0; transition:opacity .4s; display:flex; align-items:flex-end; padding:28px;
}
.product-card:hover .product-overlay { opacity:1; }
.product-info h3 { font-family:var(--font-serif); color:var(--white); font-size:1.2rem; margin-bottom:5px; }
.product-info p { color:rgba(255,255,255,.72); font-size:.82rem; letter-spacing:1px; }
.product-tag {
  position:absolute; top:18px; left:18px;
  background:var(--olive); color:var(--white);
  font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; padding:5px 14px; font-weight:700;
}

/* ══════════════════════════════
   ANMAT BADGE
══════════════════════════════ */
.anmat-badge {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--olive-pale); border:1.5px solid var(--olive-light);
  padding:13px 22px; margin-top:28px;
}
.anmat-dot { width:9px; height:9px; border-radius:50%; background:var(--olive); flex-shrink:0; animation:pulse 2.2s infinite; }
.anmat-badge span { font-size:.78rem; color:var(--olive-dark); font-weight:700; }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer {
  background:var(--olive-dark);
  padding:60px 70px 30px;
}
.footer-main {
  display:grid; grid-template-columns:1fr 1.6fr 1fr;
  gap:60px; align-items:center;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}

/* Nav links col */
.footer-col-links { list-style:none; display:flex; flex-direction:column; gap:14px; }
.footer-col-links a {
  color:rgba(255,255,255,.55); font-size:.95rem; transition:color .3s;
}
.footer-col-links a:hover { color:var(--olive-light); }

/* Info center col */
.footer-info { text-align:center; }
.footer-brand-name {
  font-family:var(--font-serif); font-size:1.7rem; font-weight:700;
  color:var(--white); letter-spacing:4px; display:block; margin-bottom:18px;
}
.footer-info p {
  color:rgba(255,255,255,.55); font-size:.9rem; line-height:2;
}
.footer-info a { color:rgba(255,255,255,.55); transition:color .3s; }
.footer-info a:hover { color:var(--olive-light); }

/* Icons right col */
.footer-icons { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.footer-icon-sq {
  width:54px; height:54px; background:rgba(255,255,255,.08);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); transition:all .3s;
}
.footer-icon-sq:hover { background:var(--olive-mid); color:var(--white); }
.footer-icon-sq svg { width:22px; height:22px; fill:currentColor; }
.footer-icon-circle {
  width:54px; height:54px; border:1.5px solid rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font-size:.75rem; letter-spacing:0; transition:all .3s;
}
.footer-icon-circle:hover { border-color:var(--olive-light); color:var(--olive-light); }

/* Bottom bar */
.footer-bottom {
  padding-top:24px; text-align:center;
}
.footer-copy { font-size:.75rem; color:rgba(255,255,255,.28); }

/* ══════════════════════════════
   WHATSAPP FLOTANTE
══════════════════════════════ */
.wa-float {
  position:fixed; bottom:28px; right:28px;
  width:62px; height:62px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.45); z-index:9999; transition:all .3s;
  animation:waPulse 3s infinite;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 36px rgba(37,211,102,.65); }
.wa-float svg { width:32px; height:32px; fill:white; }

/* ══════════════════════════════
   REVEAL
══════════════════════════════ */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════
   KEYFRAMES
══════════════════════════════ */
@keyframes fadeInUp { from{opacity:0;transform:translateY(44px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.45)} 50%{box-shadow:0 4px 44px rgba(37,211,102,.8)} }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-12px)} }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:960px){
  nav, nav.scrolled, nav.solid { padding:13px 24px; }
  .nav-links { display:none; }
  .strip-claim { padding:16px 24px; gap:18px; }
  .strip-sep { display:none; }
  footer { padding:44px 24px 24px; }
  .footer-main { grid-template-columns:1fr; gap:36px; text-align:center; }
  .footer-icons { flex-direction:row; justify-content:center; }
}