:root{
  --color-fuego:#E63946;
  --color-terere:#FF7A00;
  --color-yerba:#2E7D32;
  --color-sand:#FFF7F2;
  --color-text:#1F2937;
  --color-muted:#6B7280;
  --color-border:#E5E7EB;
  --radius:12px;
  --shadow:0 10px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--color-text); background:var(--color-sand);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--color-fuego); text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, 92%); margin-inline:auto}
.center{text-align:center}
.mt-24{margin-top:24px}
.small{font-size:.9rem; color:var(--color-muted)}
.tiny{font-size:.8rem; color:var(--color-muted)}

/* Promo bar */
/* News ticker (editorial, sin venta) */
.news-ticker{position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px; padding:8px 12px; background:#111827; color:#fff; overflow:hidden}
.news-ticker .ticker-label{font-weight:700; color:#F59E0B}
.news-ticker .ticker-items{display:flex; gap:30px; white-space:nowrap; animation:ticker 30s linear infinite}
@keyframes ticker{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}

/* Header */
.site-header{position:sticky; top:36px; z-index:50; background:#fff; border-bottom:1px solid var(--color-border)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.logo{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--color-text)}
.logo-mark{font-size:22px}
.logo-text{font-family:Fraunces, serif; font-size:1.15rem}
.main-nav{display:none; gap:14px}
.nav-link{color:var(--color-text)}
@media(min-width:800px){.main-nav{display:flex}}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--radius); font-weight:600; border:1px solid transparent; transition:transform .08s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.12)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:12px 18px}
.btn-xl{padding:14px 22px; font-size:1.05rem}
.btn-sm{padding:8px 12px; font-size:.95rem}
.btn-alt{background:#fff; border-color:var(--color-border); color:var(--color-text)}
.btn-ghost{background:transparent}
.cta{background:linear-gradient(90deg,var(--color-fuego),var(--color-terere)); color:#fff}

/* Hero */
.hero{display:grid; grid-template-columns:1fr; align-items:center; gap:24px; padding:32px 0}
.hero-content h1{font-family:Fraunces,serif; font-size:2rem; margin:0 0 8px}
.hero .sub{color:var(--color-muted); margin:0 0 14px}
.hero .badge{margin-top:8px; color:var(--color-yerba); font-weight:600}
.hero-art{display:flex; justify-content:center}
@media(min-width:900px){.hero{grid-template-columns:1.1fr .9fr; padding:56px 0} .hero-content h1{font-size:2.6rem}}

/* Sections */
.section{padding:28px 0}
.section-head{margin-bottom:18px}
.section-head h2{font-family:Fraunces,serif; font-size:1.6rem; margin:0 0 6px}
.section-head .sub{color:var(--color-muted); margin:0}

/* Grids */
.grid-2{display:grid; gap:16px; grid-template-columns:1fr}
.grid-3{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}}

/* Cards */
.card{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:16px; box-shadow:0 2px 0 rgba(0,0,0,.02)}
.card:hover{transform:translateY(-4px); transition:transform .2s ease, box-shadow .25s ease; box-shadow:0 20px 40px rgba(0,0,0,.08)}
.benefit .icon{font-size:22px; display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:#FFF0EA}
.step{position:relative; padding-top:26px}
.step-num{position:absolute; inset:12px auto auto 12px; width:28px; height:28px; border-radius:10px; background:#FFF0EA; color:var(--color-terere); font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.testimonial .avatar{width:64px; height:64px; border-radius:16px; border:2px solid #fff; box-shadow:var(--shadow); margin-bottom:8px}
.post .thumb{width:100%; height:120px; border-radius:10px; background:#FFF0EA; display:flex; align-items:center; justify-content:center; font-size:40px; margin-bottom:10px}
.post:hover .thumb{background:linear-gradient(135deg,#FFE3D1,#FFF7F2)}

/* FAQ */
.faq details{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{color:var(--color-text)}

/* Footer */
.site-footer{margin-top:18px; border-top:1px solid var(--color-border); background:#fff}
.footer-grid{display:grid; gap:16px; grid-template-columns:1fr}
.footer-logo{margin-bottom:8px}
.list{list-style:none; padding:0; margin:0}
.list li{margin:6px 0}
@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}

/* Floating CTA */
.floating-cta{position:fixed; right:16px; bottom:16px; z-index:70}

/* Blog listing */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; border:1px solid var(--color-border); background:#fff; cursor:pointer}
.tag input{accent-color:var(--color-terere)}
.search{width:100%; max-width:520px; padding:10px 12px; border-radius:10px; border:1px solid var(--color-border); background:#fff}

/* Article */
.article-header h1{font-family:Fraunces,serif; font-size:2rem; margin:.2rem 0 .4rem}
.article-sub{color:var(--color-muted)}
.toc{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:14px; margin:14px 0}
.toc h4{margin:0 0 8px}
.toc a{display:block; padding:4px 0}
.prose{line-height:1.7}
.prose h2{font-size:1.3rem; margin:1.3rem 0 .5rem}
.prose h3{font-size:1.1rem; margin:1rem 0 .4rem}
.callout{border-left:4px solid var(--color-yerba); background:#F4FBF6; padding:12px; border-radius:8px}

/* Utilities */
.cta-group{display:flex; gap:10px; flex-wrap:wrap}

/* News layout */
.news-layout{display:grid; grid-template-columns:1fr; gap:18px}
.news-main{min-width:0}
.news-sidebar{display:grid; gap:14px}
@media(min-width:980px){.news-layout{grid-template-columns:2fr 1fr}}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; padding:6px 10px; border-radius:20px; border:1px solid var(--color-border); background:#fff; color:var(--color-text)}
.newsletter-card form{display:grid; grid-template-columns:1fr; gap:8px}
.meta{color:var(--color-muted)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:translateY(0)}

/* Hero SVG animations */
.flame{transform-origin:50% 100%; animation:flicker 2.2s ease-in-out infinite}
.bubble{opacity:.6; animation:rise var(--dur,6s) linear infinite}
.bubble.fast{--dur:4.5s}
.bubble.slow{--dur:7.5s; opacity:.4}
.heat{filter:blur(1px); opacity:.3; animation:heatwave 3s ease-in-out infinite}
.belly-flame{opacity:.85}
.body-silhouette{filter:drop-shadow(0 6px 16px rgba(0,0,0,.06))}
.slim-belly{transform-origin:center; animation:slim 3.2s ease-in-out infinite alternate}
.waist{stroke:var(--color-terere); stroke-width:3; stroke-linecap:round; opacity:.6; animation:waist 3.2s ease-in-out infinite alternate}

@keyframes flicker{0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-1px) scale(1.03)} 100%{transform:translateY(0) scale(1)}}
@keyframes rise{0%{transform:translateY(8px) scale(.9)} 100%{transform:translateY(-36px) scale(1.1); opacity:0}}
@keyframes heatwave{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}
@keyframes slim{0%{transform:scaleX(1.15)} 100%{transform:scaleX(0.85)}}
@keyframes waist{0%{transform:translateX(0)} 100%{transform:translateX(6px)}}