/*
Theme Name: Nidia — Sazonador Natural
Theme URI: https://sazonnidia.com
Author: Sazonador Natural Nidia
Description: Tema de una sola página para Sazonador Natural Nidia. Todo el contenido (textos, precios, ingredientes, FAQ y número de WhatsApp) se edita desde Apariencia → Personalizar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nidia
Tags: one-page, business, custom-colors
*/

:root{
  --bg:#faf8f2;
  --bg-white:#ffffff;
  --bg-warm:#f0ece1;
  --green:#1b5e2a;
  --green-deep:#123f1c;
  --green-soft:#3d7a45;
  --red:#c1121f;
  --gold:#d8a520;
  --ink:#141310;
  --ink-mid:#57544b;
  --ink-light:#8d8a7e;
  --line:#e3ded1;
  --font-display:'Bebas Neue','Impact',sans-serif;
  --font-ed:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{color:inherit}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,248,242,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.brand b{font-family:var(--font-display);font-size:27px;letter-spacing:.06em;color:var(--red);line-height:1}
.brand span{font-family:var(--font-ed);font-style:italic;font-size:14px;color:var(--ink-mid)}
.nav__links{display:flex;gap:28px;font-size:14px;color:var(--ink-mid)}
.nav__links a{text-decoration:none}
.nav__links a:hover{color:var(--green)}
@media(max-width:860px){.nav__links{display:none}}

.wa{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--green);color:#fff;text-decoration:none;
  font-size:14px;font-weight:500;
  padding:11px 20px;border-radius:999px;
  box-shadow:0 2px 0 var(--green-deep), 0 8px 20px rgba(27,94,42,.22);
  transition:transform .16s ease, box-shadow .16s ease;
}
.wa:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--green-deep),0 14px 30px rgba(27,94,42,.3)}
.wa:active{transform:translateY(1px);box-shadow:0 1px 0 var(--green-deep)}
.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
.wa--ghost{background:transparent;color:var(--green);border:1px solid var(--green);box-shadow:none}
.wa--ghost:hover{background:rgba(27,94,42,.06);box-shadow:none}
.wa--lg{font-size:16px;padding:16px 30px}
.wa--white{background:#fff;color:var(--green-deep);box-shadow:0 2px 0 rgba(0,0,0,.18),0 10px 26px rgba(0,0,0,.18)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 0}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line);max-width:90px}
h1{
  font-family:var(--font-display);
  font-size:clamp(46px,7.2vw,92px);
  line-height:.92;letter-spacing:.005em;
  color:var(--ink);text-wrap:balance;
}
h1 em{font-style:normal;color:var(--red);display:block}
.hero__sub{
  font-family:var(--font-ed);font-style:italic;
  font-size:clamp(19px,2.1vw,25px);
  color:var(--ink-mid);margin:22px 0 30px;max-width:30ch;line-height:1.45;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__note{font-size:13px;color:var(--ink-light);margin-top:18px}

.label-stage{position:relative;display:grid;place-items:center;padding:10px}
.label-stage::before{
  content:"";position:absolute;inset:6% ;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(216,165,32,.28), rgba(27,94,42,.10) 55%, transparent 72%);
  filter:blur(14px);
}
.label{
  position:relative;width:min(100%,430px);border-radius:50%;display:block;
  box-shadow:0 26px 60px rgba(18,63,28,.28), 0 3px 0 rgba(0,0,0,.06);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-14px) rotate(1.2deg)}
}
@media(prefers-reduced-motion:reduce){.label{animation:none}}
.badge{
  position:absolute;z-index:3;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:500;
  box-shadow:0 10px 24px rgba(0,0,0,.10);white-space:nowrap;
}
.badge b{color:var(--green);font-weight:700}
.badge--a{top:4%;left:-6%}
.badge--b{bottom:12%;right:-4%}
@media(max-width:980px){
  .hero{padding-top:46px}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .label-stage{order:-1}
  .badge--a{left:0}.badge--b{right:0}
}

/* ---------- MARQUEE STRIP ---------- */
.strip{background:var(--green);color:#fff;margin-top:70px;overflow:hidden;padding:14px 0}
.strip__track{display:flex;gap:44px;white-space:nowrap;animation:slide 28s linear infinite;font-family:var(--font-display);font-size:19px;letter-spacing:.08em}
.strip__track span{opacity:.92}
.strip__track i{font-style:normal;color:var(--gold)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:14px;
}
h2{font-family:var(--font-display);font-size:clamp(38px,5.4vw,64px);line-height:.96;letter-spacing:.01em}
h3{font-family:var(--font-body);font-weight:700;font-size:17px;letter-spacing:-.01em}
.lead{font-family:var(--font-ed);font-style:italic;font-size:20px;color:var(--ink-mid);max-width:52ch;margin-top:16px}

/* trust row */
.trust{background:var(--bg-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0}
.trust__row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.trust__item{padding:0 20px;text-align:center;border-right:1px dashed var(--line)}
.trust__item:last-child{border-right:0}
.trust__ico{width:38px;height:38px;margin:0 auto 12px;color:var(--green)}
.trust__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.trust__item p{font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.35}
@media(max-width:800px){
  .trust__row{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .trust__item{border-right:0}
}

/* ingredients */
.ing{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.ing__list{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ing__item{background:var(--bg-white);padding:22px 20px}
.ing__item b{display:block;font-size:15px;margin-bottom:4px}
.ing__item span{font-size:13px;color:var(--ink-light);line-height:1.45;display:block}
.ing__item:nth-child(4n+1),.ing__item:nth-child(4n+4){background:#fdfcf8}
@media(max-width:860px){.ing{grid-template-columns:1fr;gap:32px}}

/* usage */
.use{background:var(--bg-warm)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:46px}
.step{background:var(--bg-white);border:1px solid var(--line);padding:30px 26px 26px;position:relative}
.step:nth-child(1){border-radius:20px 4px 20px 4px}
.step:nth-child(2){border-radius:4px 20px 4px 20px;margin-top:22px}
.step:nth-child(3){border-radius:20px 4px 20px 4px}
.step__n{font-family:var(--font-display);font-size:52px;line-height:.8;color:var(--gold);margin-bottom:14px;display:block}
.step p{font-size:14.5px;color:var(--ink-mid);margin-top:8px}
@media(max-width:860px){.steps{grid-template-columns:1fr}.step{margin-top:0!important}}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:end}
.tier{background:var(--bg-white);border:1px solid var(--line);border-radius:16px;padding:32px 26px;display:flex;flex-direction:column;gap:14px}
.tier--pop{border:2px solid var(--green);box-shadow:0 20px 44px rgba(27,94,42,.14);padding:44px 26px}
.tier__tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--red)}
.tier__size{font-family:var(--font-display);font-size:40px;line-height:1}
.tier__price{font-size:26px;font-weight:700;letter-spacing:-.02em}
.tier__price small{font-size:13px;font-weight:400;color:var(--ink-light)}
.tier__desc{font-size:13.5px;color:var(--ink-mid);flex:1}
.tier .wa{justify-content:center;width:100%}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}

/* wholesale */
.mayor{background:var(--green-deep);color:#fff;border-radius:26px;padding:66px 56px;position:relative;overflow:hidden}
.mayor::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,165,32,.32),transparent 68%);
}
.mayor h2{color:#fff;max-width:14ch}
.mayor p{color:rgba(255,255,255,.82);max-width:46ch;margin:18px 0 30px;font-size:15.5px}
.mayor .kicker{color:var(--gold)}
@media(max-width:700px){.mayor{padding:44px 26px}}

/* faq */
.faq{max-width:760px;margin:44px auto 0}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-size:21px;line-height:1;flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--ink-mid);font-size:14.5px;max-width:62ch}

/* final cta */
.final{
  background:linear-gradient(135deg,#d9c39a 0%,#c9ab77 48%,#ab8a52 100%);
  border-radius:26px;padding:88px 40px;text-align:center;position:relative;overflow:hidden;
}
.final h2{color:#fff;text-shadow:0 2px 16px rgba(80,55,15,.25)}
.final p{font-family:var(--font-ed);font-style:italic;font-size:21px;color:rgba(255,255,255,.94);margin:16px auto 32px;max-width:34ch}

footer{padding:56px 0 44px;border-top:1px solid var(--line);margin-top:96px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--ink-light)}
.foot a{color:var(--green);text-decoration:none}

.reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* ---------- THEME ADJUSTMENTS ----------
   Everything above is the original design stylesheet, unchanged. Additions the
   WordPress build needs go here so the two stay easy to tell apart. */

/* The markup carries width/height on the product image so the browser can
   reserve its box before the file loads (no layout shift). Those attributes are
   presentational hints: .label sets width, which overrides the width hint, but
   nothing overrode the height hint, so the image rendered 430x620 instead of
   430x430. height:auto hands the height back to the intrinsic aspect ratio. */
.label{height:auto}

/* The trust icons are drawn as open strokes with curved joins; without round
   caps the leaf tip and the steam wisps end in hard miters that read as noise
   at 38px. The design's own icons were simple enough not to need this. */
.trust__ico svg{stroke-linecap:round;stroke-linejoin:round}

/* The marquee only loops seamlessly if the track is exactly its content wide
   and its two halves are identical -- the -50% keyframe then lands the second
   half precisely where the first began. The design left the track at container
   width with a flex gap between the halves, so the -50% fell half a gap short
   and the strip ran out of words on wide screens. Move the spacing inside each
   half so both stay identical. */
.strip__track{width:max-content;gap:0}
.strip__track span{padding-right:44px}

/* ---------- BRAND PALETTE — 2026 labels ----------
   Sampled directly off the Sazón Nidia label: the green and gold rings, the
   cream field, and the darker gold hairline the label itself uses inside the
   outer ring -- which is where --gold-ink comes from. Those labels carry no red, so the three red accents move
   to the colours the labels actually use — green for the wordmark and the tier
   tags (the label sets its small caps in green), gold for the hero's emphasis
   word, mirroring the gold "transforma" on the label.

   Two golds, because the label's antique gold is a print ink and fails contrast
   as web text. --gold stays for gold-on-dark-green (the strip separators and the
   wholesale kicker, 4.9:1); --gold-ink is the darkened version for gold on light
   backgrounds (3.6:1 on cream, 3.9:1 on white — both pass at the large sizes it
   is used at, where the original 2.5:1 did not). */
:root{
  --bg:#f7f1e2;
  --bg-warm:#ece2ca;
  --green:#162d13;
  --green-deep:#0d1c0b;
  --green-soft:#3a4d2c;
  --gold:#c39a4d;
  --gold-ink:#937624;
  --line:#ded3b8;
}
.brand b{color:var(--green)}      /* the label sets NIDIA in green, not red */
h1 em{color:var(--gold-ink)}
.tier__tag{color:var(--green)}
.step__n{color:var(--gold-ink)}   /* on white: the light gold failed contrast */

/* ---------- PRÓXIMAMENTE ----------
   A teaser for a product that is not on sale yet, so it has to read as an
   announcement rather than a third offer: cream card and a gold hairline
   instead of the solid green the wholesale band and final CTA use, and a ghost
   button so it never competes with "Pedir ahora". */
.prox{padding-top:0}
.prox__card{
  border:1px solid var(--gold);
  border-radius:18px;
  background:var(--bg-white);
  padding:46px 48px;
  display:flex;align-items:center;gap:46px;
}
.prox__label{
  width:280px;flex:none;border-radius:50%;display:block;height:auto;
  box-shadow:0 18px 40px rgba(13,28,11,.18);
}
.prox__body{min-width:0}
.prox__kicker{color:var(--gold-ink)}
.prox__card h2{margin-top:10px}
.prox__card p{
  max-width:520px;margin:16px 0 0;
  color:var(--ink-mid);font-size:17px;
}
.prox__card .wa{margin-top:26px}

/* Below the two-column breakpoint the label stacks above the copy and the whole
   card centres, matching how the rest of the page collapses. */
@media(max-width:860px){
  .prox__card{flex-direction:column;text-align:center;gap:30px;padding:38px 22px}
  .prox__label{width:210px}
  .prox__card p{margin-left:auto;margin-right:auto}
}

/* The footer was built for two items; the contact email makes three, so let it
   wrap and centre on narrow screens instead of squeezing. */
.foot{flex-wrap:wrap;gap:10px 26px}
@media(max-width:640px){.foot{justify-content:center;text-align:center}}