/*
Theme Name: Natural Smarts Demo
Theme URI: https://naturalsmarts.softepu.com/
Author: Softepu
Description: Propuesta visual demostrativa para Natural Smarts, orientada a catálogo y ventas por WhatsApp.
Version: 1.0.0
Text Domain: natural-smarts-demo
*/

:root {
  --ns-lime: #98ae3c;
  --ns-green: #4aae4c;
  --ns-leaf: #64b445;
  --ns-deep: #026838;
  --ns-charcoal: #24302a;
  --ns-gray: #575756;
  --ns-mist: #f2f6ee;
  --ns-white: #ffffff;
  --ns-radius: 28px;
  --ns-shadow: 0 24px 60px rgba(2, 104, 56, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ns-charcoal);
  background: #fbfdf9;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.ns-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ns-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  color: var(--ns-deep); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .76rem;
}
.ns-kicker::before { content: ""; width: 28px; height: 2px; background: var(--ns-lime); }
.ns-section { padding: 100px 0; }
.ns-section-title { max-width: 680px; margin-bottom: 46px; }
.ns-section-title h2 { margin: 0 0 16px; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.045em; }
.ns-section-title p { margin: 0; color: #657068; font-size: 1.05rem; }

.ns-demo-bar { padding: 9px 20px; text-align: center; background: var(--ns-deep); color: white; font-size: .78rem; letter-spacing: .04em; }
.ns-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(2,104,56,.09); background: rgba(251,253,249,.93); backdrop-filter: blur(16px); }
.ns-nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ns-brand { display: flex; align-items: center; gap: 12px; font-weight: 900; color: var(--ns-deep); font-size: 1.2rem; }
.ns-brand img { width: 168px; height: 62px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.ns-menu { display: flex; align-items: center; gap: 30px; font-size: .92rem; font-weight: 700; }
.ns-menu a:hover { color: var(--ns-deep); }
.ns-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--ns-deep); color: white; font-weight: 800; cursor: pointer;
  box-shadow: 0 14px 30px rgba(2,104,56,.18); transition: transform .2s ease, box-shadow .2s ease;
}
.ns-button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(2,104,56,.26); }
.ns-button--light { color: var(--ns-deep); background: white; box-shadow: none; }
.ns-button--ghost { color: var(--ns-deep); background: transparent; border: 1px solid rgba(2,104,56,.22); box-shadow: none; }
.ns-mobile-toggle { display: none; border: 0; background: transparent; font-size: 1.6rem; color: var(--ns-deep); }

.ns-hero { position: relative; overflow: hidden; padding: 72px 0 94px; }
.ns-hero::before { content: ""; position: absolute; width: 650px; height: 650px; right: -190px; top: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(152,174,60,.18), transparent 68%); }
.ns-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.ns-hero h1 { margin: 0 0 22px; max-width: 720px; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .94; letter-spacing: -.065em; }
.ns-hero h1 span { color: var(--ns-deep); }
.ns-hero-copy > p { max-width: 620px; margin: 0 0 32px; color: #66716a; font-size: 1.12rem; }
.ns-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ns-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 42px; color: #637067; font-size: .86rem; font-weight: 700; }
.ns-trust span::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: #e3efda; color: var(--ns-deep); }
.ns-hero-art { position: relative; min-height: 570px; display: grid; place-items: center; }
.ns-orbit { position: absolute; width: 480px; height: 480px; border: 1px solid rgba(2,104,56,.13); border-radius: 50%; }
.ns-orbit::before, .ns-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--ns-lime); }
.ns-orbit::before { width: 18px; height: 18px; left: 35px; top: 92px; }
.ns-orbit::after { width: 11px; height: 11px; right: 12px; bottom: 140px; background: var(--ns-deep); }
.ns-product-stage { position: relative; z-index: 2; width: 370px; min-height: 480px; border-radius: 190px 190px 50px 50px; background: linear-gradient(150deg, #eef6e5, #dcebcf); box-shadow: var(--ns-shadow); display: grid; place-items: center; }
.ns-bottle { position: relative; width: 185px; height: 310px; border-radius: 36px 36px 46px 46px; background: linear-gradient(90deg, #f7f7f2, #fff 45%, #e7e8df); box-shadow: 0 30px 55px rgba(36,48,42,.18); transform: rotate(6deg); }
.ns-bottle::before { content: ""; position: absolute; width: 124px; height: 48px; left: 30px; top: -35px; border-radius: 12px 12px 7px 7px; background: var(--ns-deep); }
.ns-bottle-label { position: absolute; inset: 75px 0 55px; display: grid; place-content: center; text-align: center; color: var(--ns-deep); background: linear-gradient(135deg, #eff8e8, #dbeabe); border-top: 1px solid rgba(2,104,56,.14); border-bottom: 1px solid rgba(2,104,56,.14); }
.ns-bottle-label strong { font-family: Georgia, serif; font-size: 1.55rem; }
.ns-bottle-label small { text-transform: uppercase; letter-spacing: .18em; font-size: .54rem; }
.ns-float-card { position: absolute; z-index: 3; padding: 16px 18px; border-radius: 18px; background: white; box-shadow: 0 18px 40px rgba(2,104,56,.13); font-size: .82rem; font-weight: 800; }
.ns-float-card--one { top: 98px; left: 0; }
.ns-float-card--two { right: -8px; bottom: 90px; }
.ns-float-card b { display: block; color: var(--ns-deep); font-size: 1.2rem; }

.ns-values { margin-top: -42px; position: relative; z-index: 4; }
.ns-value-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid rgba(2,104,56,.1); border-radius: 24px; background: white; box-shadow: 0 20px 55px rgba(36,48,42,.08); }
.ns-value { padding: 28px; border-right: 1px solid rgba(2,104,56,.09); }
.ns-value:last-child { border-right: 0; }
.ns-value strong { display: block; margin-bottom: 5px; color: var(--ns-deep); }
.ns-value span { color: #738078; font-size: .86rem; }

.ns-categories { background: var(--ns-mist); }
.ns-category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ns-category { min-height: 245px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--ns-radius); color: white; overflow: hidden; position: relative; }
.ns-category::before { content: ""; position: absolute; width: 170px; height: 170px; right: -48px; top: -55px; border: 36px solid rgba(255,255,255,.12); border-radius: 50%; }
.ns-category:nth-child(1) { background: #026838; }
.ns-category:nth-child(2) { background: #4aae4c; }
.ns-category:nth-child(3) { background: #7d9630; }
.ns-category:nth-child(4) { background: #4e6255; }
.ns-category small { opacity: .76; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.ns-category h3 { margin: 8px 0 0; font-size: 1.5rem; line-height: 1.1; }

.ns-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.ns-filter button { padding: 10px 17px; border: 1px solid rgba(2,104,56,.16); border-radius: 999px; background: white; color: var(--ns-gray); font-weight: 800; cursor: pointer; }
.ns-filter button.is-active { background: var(--ns-deep); color: white; }
.ns-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ns-product { overflow: hidden; border: 1px solid rgba(2,104,56,.1); border-radius: 25px; background: white; transition: transform .2s ease, box-shadow .2s ease; }
.ns-product:hover { transform: translateY(-6px); box-shadow: var(--ns-shadow); }
.ns-product-visual { min-height: 270px; display: grid; place-items: center; position: relative; background: linear-gradient(145deg, #f0f5e8, #e0ead8); }
.ns-product:nth-child(2n) .ns-product-visual { background: linear-gradient(145deg, #edf7ef, #d8eadc); }
.ns-product:nth-child(3n) .ns-product-visual { background: linear-gradient(145deg, #f6f4e9, #e7e2c9); }
.ns-mini-bottle { width: 104px; height: 164px; border-radius: 20px 20px 27px 27px; position: relative; background: white; box-shadow: 0 20px 34px rgba(36,48,42,.16); }
.ns-mini-bottle::before { content: ""; position: absolute; width: 70px; height: 27px; left: 17px; top: -19px; border-radius: 8px 8px 4px 4px; background: var(--ns-deep); }
.ns-mini-bottle::after { content: "Natural\A Smarts"; white-space: pre; position: absolute; inset: 45px 0 35px; display: grid; place-content: center; text-align: center; color: var(--ns-deep); background: #e9f2d9; font-family: Georgia, serif; font-weight: 800; line-height: 1.05; }
.ns-tag { position: absolute; left: 18px; top: 18px; padding: 6px 10px; border-radius: 999px; background: white; color: var(--ns-deep); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.ns-product-body { padding: 24px; }
.ns-product-body small { color: var(--ns-green); font-weight: 800; }
.ns-product-body h3 { margin: 6px 0 8px; font-size: 1.3rem; }
.ns-product-body p { margin: 0 0 18px; color: #727d76; font-size: .9rem; }
.ns-product-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ns-product-action strong { color: var(--ns-deep); }
.ns-product-action .ns-button { min-height: 42px; padding: 0 17px; font-size: .82rem; }

.ns-process { background: var(--ns-deep); color: white; }
.ns-process .ns-kicker { color: #dce9ad; }
.ns-process .ns-section-title p { color: rgba(255,255,255,.68); }
.ns-process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ns-step { padding: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.05); }
.ns-step b { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 42px; border-radius: 50%; background: var(--ns-lime); color: var(--ns-deep); }
.ns-step h3 { margin: 0 0 9px; }
.ns-step p { margin: 0; color: rgba(255,255,255,.66); font-size: .92rem; }

.ns-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.ns-about-art { min-height: 500px; border-radius: 38px; position: relative; overflow: hidden; background: linear-gradient(145deg, #b8d17a, #297f42); }
.ns-about-art::before { content: ""; position: absolute; inset: 12% 18%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(-22deg); }
.ns-about-art::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 8rem; text-shadow: 0 20px 50px rgba(0,0,0,.16); }
.ns-about-copy h2 { margin: 0 0 22px; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.05em; }
.ns-about-copy p { color: #69746d; }
.ns-points { display: grid; gap: 14px; margin: 28px 0 34px; }
.ns-point { display: flex; gap: 13px; align-items: flex-start; }
.ns-point i { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e7f1dc; color: var(--ns-deep); font-style: normal; font-weight: 900; }

.ns-faq { background: var(--ns-mist); }
.ns-faq-list { max-width: 820px; }
.ns-faq details { padding: 22px 0; border-bottom: 1px solid rgba(2,104,56,.14); }
.ns-faq summary { cursor: pointer; font-weight: 850; font-size: 1.06rem; }
.ns-faq details p { color: #69746d; }
.ns-cta { padding: 80px 0; }
.ns-cta-box { padding: 58px; border-radius: 35px; color: white; background: linear-gradient(120deg, var(--ns-deep), #238642); display: flex; align-items: center; justify-content: space-between; gap: 35px; overflow: hidden; position: relative; }
.ns-cta-box::after { content: ""; position: absolute; width: 270px; height: 270px; right: 18%; bottom: -210px; border: 40px solid rgba(255,255,255,.09); border-radius: 50%; }
.ns-cta h2 { max-width: 620px; margin: 0 0 10px; font-size: clamp(2rem,4vw,3.7rem); line-height: 1; letter-spacing: -.045em; }
.ns-cta p { margin: 0; color: rgba(255,255,255,.72); }
.ns-footer { padding: 70px 0 28px; background: #17251e; color: white; }
.ns-footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 50px; }
.ns-footer h3 { color: #c9dc8a; }
.ns-footer p, .ns-footer a { color: rgba(255,255,255,.64); }
.ns-footer a:hover { color: white; }
.ns-footer-links { display: grid; gap: 8px; }
.ns-footer-bottom { margin-top: 55px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.42); font-size: .78rem; }
.ns-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: white; font-weight: 900; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.ns-toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translate(-50%, 140%); width: min(520px, calc(100% - 32px)); padding: 18px 20px; border-radius: 16px; background: #17251e; color: white; box-shadow: 0 18px 50px rgba(0,0,0,.25); transition: transform .25s ease; }
.ns-toast.is-visible { transform: translate(-50%, 0); }
.ns-toast strong { color: #c9dc8a; }

@media (max-width: 980px) {
  .ns-menu { display: none; position: absolute; top: 100%; left: 20px; right: 20px; padding: 22px; flex-direction: column; align-items: flex-start; background: white; border-radius: 20px; box-shadow: var(--ns-shadow); }
  .ns-menu.is-open { display: flex; }
  .ns-mobile-toggle { display: block; }
  .ns-header .ns-nav > .ns-button { display: none; }
  .ns-hero-grid, .ns-about-grid { grid-template-columns: 1fr; }
  .ns-hero-copy { text-align: center; }
  .ns-hero-copy > p { margin-inline: auto; }
  .ns-actions, .ns-trust { justify-content: center; }
  .ns-hero-art { min-height: 500px; }
  .ns-value-grid, .ns-category-grid { grid-template-columns: repeat(2,1fr); }
  .ns-value:nth-child(2) { border-right: 0; }
  .ns-value:nth-child(-n+2) { border-bottom: 1px solid rgba(2,104,56,.09); }
  .ns-products { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .ns-container { width: min(100% - 26px, 1180px); }
  .ns-section { padding: 72px 0; }
  .ns-brand img { width: 135px; }
  .ns-hero { padding-top: 45px; }
  .ns-hero h1 { font-size: clamp(2.8rem, 15vw, 4.3rem); }
  .ns-hero-art { min-height: 420px; transform: scale(.88); margin: -20px -25px; }
  .ns-product-stage { width: 330px; min-height: 420px; }
  .ns-orbit { width: 385px; height: 385px; }
  .ns-value-grid, .ns-category-grid, .ns-products, .ns-process-grid, .ns-footer-grid { grid-template-columns: 1fr; }
  .ns-value { border-right: 0; border-bottom: 1px solid rgba(2,104,56,.09); }
  .ns-value:last-child { border-bottom: 0; }
  .ns-cta-box { padding: 38px 28px; flex-direction: column; align-items: flex-start; }
  .ns-about-art { min-height: 360px; }
}