/* ============================================================
   COMPONENTES DE CONTENIDO — Fundo Maranatha
   Estilos compartidos de los componentes de los posts y fichas (tablas, tarjetas,
   pestañas, comparativas, diagramas, tiras de productos…). Antes vivían repetidos
   en un <style> dentro de cada página; ahora hay una sola fuente.
   · Colores: usar SIEMPRE las variables de :root (style.css).
     Fondo claro → --brown, --cocoa, --text-muted, --text-soft, --gold-label
     Fondo oscuro → --gold, --caramel, --light-brown, --cream
   · Un post nuevo no debe llevar <style> propio: reutiliza estas clases.
   ============================================================ */
.not-found-section { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8rem 2rem 4rem; gap: 0; }
.not-found-code { font-family: 'Playfair Display', serif; font-size: clamp(6rem, 18vw, 11rem); font-weight: 600; color: var(--border); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.not-found-title { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 400; color: var(--brown); margin-bottom: 1rem; }
.not-found-sub { font-size: 0.92rem; color: var(--text-muted); max-width: 420px; line-height: 1.7; margin-bottom: 2.5rem; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.not-found-btn { display: inline-block; padding: 0.75rem 1.6rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all 0.2s; }
.not-found-btn-primary { background: var(--brown); color: var(--cream); }
.not-found-btn-primary:hover { background: var(--cocoa); }
.not-found-btn-secondary { border: 1.5px solid var(--border); color: var(--brown); }
.not-found-btn-secondary:hover { border-color: var(--brown); }
.not-found-divider { width: 40px; height: 1px; background: var(--border); margin: 1.5rem auto; }
.bstat .bstat .bstat .antox-chart { margin:1.5rem 0;background:var(--surface);border-radius:12px;padding:1.4rem 1.5rem; }
.antox-title { font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:1.1rem;font-weight:600; }
.antox-row { display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem; }
.antox-label { min-width:110px;font-size:.85rem;color:var(--brown);font-weight:500; }
.antox-bar-wrap { flex:1;background:var(--line);border-radius:20px;height:16px;overflow:hidden; }
.antox-bar { height:100%;border-radius:20px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.antox-bar.cacao { background:var(--caramel); }
.antox-bar.arandanos { background:#7A4A55; }
.antox-bar.te-verde { background:#6C8B4F; }
.antox-bar.vino { background:#8A4A3A; }
.antox-val { font-size:.78rem;font-weight:700;color:var(--text-soft);min-width:36px;text-align:right; }
.antox-source { font-size:.72rem;color:#9a8a80;margin-top:.6rem; }
.benefit-accordion { margin:1.5rem 0; }
.benefit-item { border:1px solid var(--line);border-radius:8px;margin-bottom:.5rem;overflow:hidden;transition:box-shadow .2s; }
.benefit-item.open { box-shadow:0 4px 14px rgba(61,43,31,.08); }
.benefit-header { display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;cursor:pointer;background:#fff;user-select:none;transition:background .15s; }
.benefit-header:hover { background:var(--surface); }
.benefit-num { width:28px;height:28px;background:var(--caramel);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0; }
.benefit-icon { font-size:1.2rem;flex-shrink:0; }
.benefit-title { flex:1;font-size:.93rem;font-weight:600;color:var(--brown);margin:0; }
.benefit-chevron { font-size:.7rem;color:var(--caramel);transition:transform .25s;flex-shrink:0; }
.benefit-item.open .benefit-chevron { transform:rotate(180deg); }
.benefit-body { max-height:0;overflow:hidden;transition:max-height .35s ease; }
.benefit-item.open .benefit-body { max-height:400px; }
.benefit-body-inner { padding:.1rem 1.1rem 1rem 1.1rem;font-size:.88rem;color:var(--text-soft);line-height:1.6; }
.benefit-body-inner ul { margin:.4rem 0 0;padding-left:1.2rem; }
.benefit-body-inner li { margin-bottom:.3rem; }
.daily-use-scroll { display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem;scrollbar-width:thin;scrollbar-color:var(--caramel) #f0e8e0;margin:1rem 0; }
.daily-use-scroll::-webkit-scrollbar { height:4px; }
.daily-use-scroll::-webkit-scrollbar-thumb { background:var(--caramel);border-radius:2px; }
.use-chip { min-width:190px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;flex-shrink:0;transition:border-color .2s,transform .2s; }
.use-chip:hover { border-color:var(--caramel);transform:translateY(-3px); }
.use-chip .uc-icon { font-size:1.6rem;margin-bottom:.4rem; }
.use-chip h4 { margin:0 0 .25rem;font-size:.88rem;color:var(--brown);font-weight:600; }
.use-chip p { margin:0;font-size:.82rem;color:var(--text-soft);line-height:1.45; }
.bstat .bstat .farm-svg-wrap { background:#2A1E14;border-radius:16px;padding:1.4rem 1rem 1rem;margin:1.5rem 0;overflow:hidden; }
.farm-svg-title { font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#C8A56A;text-align:center;margin-bottom:1rem;font-weight:600; }
.farm-svg { width:100%;max-width:440px;display:block;margin:0 auto; }
.poly-line { stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s ease; }
.poly-node { opacity:0;transform:scale(0);transform-origin:center;transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1); }
.poly-label { opacity:0;transition:opacity .5s ease; }
.farm-svg-wrap.visible .poly-line { stroke-dashoffset:0; }
.farm-svg-wrap.visible .poly-node { opacity:1;transform:scale(1); }
.farm-svg-wrap.visible .poly-label { opacity:1; }
.poly-node-1 { transition-delay:.1s; }
.poly-node-2 { transition-delay:.3s; }
.poly-node-3 { transition-delay:.5s; }
.poly-node-4 { transition-delay:.7s; }
.poly-node-5 { transition-delay:.9s; }
.poly-label-1 { transition-delay:.6s; }
.poly-label-2 { transition-delay:.8s; }
.poly-label-3 { transition-delay:1s; }
.poly-label-4 { transition-delay:1.2s; }
.poly-label-5 { transition-delay:1.4s; }
.poly-center { opacity:0;transform:scale(0);transform-origin:center;transition:opacity .5s ease 0s,transform .5s cubic-bezier(.34,1.56,.64,1) 0s; }
.farm-svg-wrap.visible .poly-center { opacity:1;transform:scale(1); }
.flavor-chart { margin:1.5rem 0;background:var(--surface);border-radius:12px;padding:1.4rem 1.5rem; }
.flavor-chart-title { font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:1.1rem;font-weight:600; }
.flavor-legend { display:flex;gap:1.2rem;margin-bottom:1rem;flex-wrap:wrap; }
.flavor-legend-item { display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-soft); }
.flavor-legend-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.flavor-row { margin-bottom:1rem; }
.flavor-row-label { font-size:.83rem;color:var(--brown);font-weight:500;margin-bottom:.35rem; }
.flavor-bars { display:flex;flex-direction:column;gap:.3rem; }
.flavor-bar-wrap { display:flex;align-items:center;gap:.7rem; }
.flavor-bar-bg { flex:1;background:var(--line);border-radius:20px;height:10px;overflow:hidden; }
.flavor-bar-fill { height:100%;border-radius:20px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.flavor-bar-poly { background:linear-gradient(90deg,var(--caramel),#e8a84c); }
.flavor-bar-mono { background:#9a8a80; }
.flavor-bar-val { font-size:.75rem;font-weight:700;color:var(--text-soft);min-width:28px;text-align:right; }
.flavor-source { font-size:.7rem;color:#9a8a80;margin-top:.6rem; }
.plants-scroll { display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem;scrollbar-width:thin;scrollbar-color:var(--caramel) #f0e8e0;margin:1rem 0; }
.plants-scroll::-webkit-scrollbar { height:4px; }
.plants-scroll::-webkit-scrollbar-thumb { background:var(--caramel);border-radius:2px; }
.plant-card { min-width:150px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem;flex-shrink:0;transition:border-color .2s,transform .2s;text-align:center; }
.plant-card:hover { border-color:var(--caramel);transform:translateY(-3px); }
.plant-card .pc-icon { font-size:1.9rem;margin-bottom:.4rem; }
.plant-card h4 { margin:0 0 .2rem;font-size:.85rem;color:var(--brown);font-weight:600; }
.plant-card .pc-flavor { font-size:.76rem;color:var(--caramel);font-weight:600;margin-bottom:.15rem; }
.plant-card p { margin:0;font-size:.76rem;color:var(--text-soft);line-height:1.4; }
.ing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.5rem 0; }
@media(max-width:560px) {
  .ing-grid { grid-template-columns:repeat(2,1fr); }
}
.ing-card { background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem .85rem;text-align:center; }
.ing-qty { font-size:1.3rem;font-weight:700;color:var(--caramel);display:block;line-height:1; }
.ing-name { font-size:.8rem;color:var(--brown);margin-top:.3rem;display:block;line-height:1.35;font-weight:500; }
.ing-note { font-size:.72rem;color:#7a6a60;display:block;margin-top:.15rem; }
.bsteps { display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin:1.5rem 0; }
@media(max-width:540px) {
  .bsteps { grid-template-columns:1fr; }
}
.bstep { background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem 1rem 1rem 1.2rem;position:relative;overflow:hidden; }
.bstep::before { content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--caramel); }
.bstep-hd { display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem; }
.bstep-n { width:26px;height:26px;background:var(--caramel);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;flex-shrink:0; }
.bstep h4 { margin:0;font-size:.88rem;color:var(--brown);font-weight:600; }
.bstep p { margin:0;font-size:.83rem;color:var(--text-soft);line-height:1.5; }
.tips-row { display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.5rem 0; }
@media(max-width:540px) {
  .tips-row { grid-template-columns:1fr; }
}
.tip-box { background:var(--surface);border-radius:10px;padding:.85rem 1rem;border:1px solid var(--line); }
.tip-icon { font-size:1.3rem;margin-bottom:.3rem;display:block; }
.tip-box h4 { margin:0 0 .25rem;font-size:.86rem;color:var(--brown); }
.tip-box p { margin:0;font-size:.82rem;color:var(--text-soft);line-height:1.5; }
.kv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2.5rem auto; max-width:760px; padding:0 1rem; }
.kv-stat { text-align:center; padding:1.4rem 1rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 12px rgba(61,43,31,.05); }
.kv-label { display:block; font-size:.78rem; color:#777; margin-top:.45rem; line-height:1.35; }
.nut-chart { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.8rem; margin:2rem auto; max-width:740px; padding-left: max(1.8rem, 1rem); padding-right: max(1.8rem, 1rem); }
.nut-heading { font-family:'Playfair Display',serif; font-size:1rem; color:var(--brown); margin:0 0 1.4rem; }
.nut-row { display:grid; grid-template-columns:110px 1fr 90px; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.nut-label { font-size:.86rem; color:#555; font-weight:500; }
.nut-bar-wrap { height:10px; background:#f0ebe5; border-radius:6px; overflow:hidden; }
.nut-bar { height:100%; border-radius:6px; width:0; transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.nut-val { font-size:.76rem; color:#888; font-weight:600; white-space:nowrap; }
.nut-source { font-size:.7rem; color:#bbb; margin:.9rem 0 0; text-align:right; font-style:italic; }
.dc-section { margin:2.5rem auto; max-width:900px; padding:0 1rem; }
.dc-section-title { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--brown); margin:0 0 1rem; }
.dc-wrap { position:relative; }
.dc-track { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
.dc-track::-webkit-scrollbar { display:none; }
.dc-card { scroll-snap-align:center; flex:0 0 min(260px,80vw); border-radius:16px; padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; border:1.5px solid transparent; transition:transform .25s ease,box-shadow .25s ease; }
.dc-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.dc-keto { background:linear-gradient(145deg,#F7F4EC,#EEECDD); border-color:#C3B78E; }
.dc-vegan { background:linear-gradient(145deg,#F4F2E9,#E7EBDC); border-color:#A6BE8F; }
.dc-plant { background:linear-gradient(145deg,#F5F1E7,#EBE3D3); border-color:#B79C74; }
.dc-icon { font-size:2.2rem; line-height:1; }
.dc-name { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:600; margin:0; color:#4A5A34; }
.dc-tag { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.18rem .55rem; border-radius:20px; align-self:flex-start; background:#C3B78E; color:#4A3A22; }
.dc-vegan .dc-tag { background:#A6BE8F; color:#3C4A2C; }
.dc-plant .dc-tag { background:#B79C74; color:#4A3A22; }
.dc-points { list-style:none; padding:0; margin:.3rem 0 0; font-size:.84rem; color:#444; display:flex; flex-direction:column; gap:.28rem; }
.dc-points li::before { content:'✓ '; color:#7A8A4E; font-weight:700; }
.dc-nav { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:.9rem; }
.dc-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #C3B78E; background:#fff; color:var(--brown); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.dc-btn:hover { background:var(--brown); color:#fff; border-color:var(--brown); }
.dc-dots { display:flex; gap:.5rem; }
.dc-dot { width:8px; height:8px; border-radius:50%; background:#DAD0BE; transition:background .25s; }
.dc-dot.active { background:#7A8A4E; }
.anim-table tbody tr.row-visible { opacity:1; transform:none; }
.anim-table td.cell-good { color:#4F6D38; font-weight:600; }
.anim-table td.cell-bad { color:#9A4A2F; }
.anim-table td.cell-warn { color:#b87000; }
.dt-section { margin:2.5rem 0; }
.dt-header { display:flex; gap:0; border-bottom:2px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.dt-header::-webkit-scrollbar { display:none; }
.dt-btn { flex:0 0 auto; padding:.65rem 1.1rem; border:none; background:transparent; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:500; color:#999; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .2s,border-color .2s; }
.dt-btn.active { color:var(--brown); border-bottom-color:var(--caramel); }
.dt-panel { display:none; padding:1.4rem 0 .5rem; animation:dtUp .3s ease; }
.dt-panel.active { display:block; }
@keyframes dtUp { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;} }
.dt-content { background:var(--surface); border-radius:14px; padding:1.4rem 1.6rem; border:1px solid var(--line); }
.dt-content h4 { font-family:'Playfair Display',serif; font-size:.95rem; color:var(--brown); margin:0 0 .65rem; }
.dt-content ul { padding-left:1.3rem; margin:0; }
.dt-content li { font-size:.9rem; color:#444; line-height:1.65; margin-bottom:.3rem; }
.dt-content li strong { color:var(--cocoa); }
@media (max-width:520px) {
  .nut-row { grid-template-columns:85px 1fr 76px; gap:.4rem; }
  .nut-label { font-size:.78rem; }
}
.proc-wrap { background:var(--brown);border-radius:14px;padding:1.4rem 1rem 1.2rem;margin:1.5rem 0; }
.proc-title { color:var(--caramel);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:1.1rem;font-weight:600; }
.proc-row { display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem; }
.proc-row:last-child { margin-bottom:0; }
.proc-lbl { color:#9a8a80;font-size:.68rem;width:100%;margin-bottom:.15rem; }
.proc-node { background:#2a1e14;color:#d4c4b8;border-radius:6px;padding:.3rem .55rem;font-size:.75rem;white-space:nowrap; }
.proc-arr { color:var(--caramel);font-size:.9rem;flex-shrink:0; }
.proc-end-g { background:#33402A;color:#B7CE96;border-radius:8px;padding:.35rem .7rem;font-size:.8rem;font-weight:700; }
.proc-end-r { background:#40281E;color:#E0A48C;border-radius:8px;padding:.35rem .7rem;font-size:.8rem;font-weight:700; }
.cvc-table { width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.86rem; }
.cvc-table th { padding:.6rem .75rem;text-align:left;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600; }
.cvc-table td { padding:.6rem .75rem;border-bottom:1px solid #f0e8e0;vertical-align:top;line-height:1.45; }
.cvc-table tr:last-child td { border-bottom:none; }
.cvc-table tr:nth-child(even) td { background:var(--surface); }
.th-cat { background:#f5ede4;color:var(--brown); }
.th-cacao { background:#33402A;color:#B7CE96; }
.th-cocoa { background:#40281E;color:#E0A48C; }
.cvc-g { color:#4F6D38;font-weight:500; }
.cvc-r { color:#9A4A2F; }
.kv-chips { display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0; }
.kv-chip { flex:1 1 120px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem .8rem;text-align:center; }
.kv-lbl { font-size:.74rem;color:var(--text-soft);margin-top:.3rem;display:block;line-height:1.3; }
.choc-tabs { margin:1.5rem 0; }
.choc-tab-nav { display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:1rem;flex-wrap:wrap; }
.choc-tab-btn { padding:.55rem 1.1rem;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;font-family:inherit;font-size:.88rem;color:#7a6a60;transition:all .2s;font-weight:500; }
.choc-tab-btn.active { color:var(--caramel);border-bottom-color:var(--caramel); }
.choc-tab-btn:hover { color:var(--caramel); }
.choc-tab-pane { display:none;animation:fadeInTab .3s ease; }
.choc-tab-pane.active { display:block; }
@keyframes fadeInTab { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
.ingredient-list { list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem; }
@media(max-width:600px) {
  .ingredient-list { grid-template-columns:1fr; }
}
.ingredient-list li { display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .8rem;background:var(--surface);border-radius:6px;font-size:.88rem;line-height:1.4; }
.ingredient-list li::before { content:'';display:inline-block;width:7px;height:7px;min-width:7px;background:var(--caramel);border-radius:50%;margin-top:.35rem; }
.process-flow-wrap { margin:2rem 0;background:var(--brown);border-radius:12px;padding:1.4rem 1rem 1.8rem;overflow-x:auto; }
.process-flow-title { color:var(--caramel);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:1rem; }
.process-flow-svg { display:block;margin:0 auto;min-width:480px; }
.pf-el { opacity:0;animation:pfIn .45s ease forwards; }
@keyframes pfIn { from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)} }
.recipe-steps { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0; }
@media(max-width:600px) {
  .recipe-steps { grid-template-columns:1fr; }
}
.recipe-step::before { content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--caramel); }
.recipe-step .sth { display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem; }
.recipe-step .sn { width:28px;height:28px;background:var(--caramel);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0; }
.recipe-step .si { font-size:1.3rem; }
.recipe-step h4 { margin:0;font-size:.92rem;color:var(--brown);font-weight:600; }
.recipe-step p { margin:0;font-size:.86rem;color:var(--text-soft);line-height:1.55; }
.step-badge { display:inline-block;background:#fff0e0;color:var(--caramel);border-radius:4px;padding:.12rem .45rem;font-size:.78rem;font-weight:600;margin-top:.4rem; }
.var-track { display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:var(--caramel) #f0e8e0; }
.var-track::-webkit-scrollbar { height:4px; }
.var-track::-webkit-scrollbar-thumb { background:var(--caramel);border-radius:2px; }
.var-card { min-width:210px;scroll-snap-align:start;background:linear-gradient(135deg,var(--brown),#5a3e2e);border-radius:12px;padding:1.3rem;color:#fff;flex-shrink:0; }
.var-card .vi { font-size:1.8rem;margin-bottom:.5rem; }
.var-card h4 { margin:0 0 .4rem;color:var(--caramel);font-size:.95rem; }
.var-card p { margin:0;font-size:.83rem;color:#d4c4b8;line-height:1.5; }
.carousel-hint { text-align:center;font-size:.75rem;color:#9a8a80;margin-top:.3rem; }
.tips-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0; }
@media(max-width:600px) {
  .tips-grid { grid-template-columns:1fr; }
}
.tip-card { background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:default; }
.tip-card:hover { transform:translateY(-4px);box-shadow:0 8px 20px rgba(61,43,31,.1);border-color:var(--caramel); }
.tip-card .ti { font-size:1.4rem;margin-bottom:.35rem; }
.tip-card h4 { margin:0 0 .25rem;color:var(--brown);font-size:.9rem; }
.tip-card p { margin:0;font-size:.84rem;color:var(--text-soft);line-height:1.5; }
.vs-card.bad-card { background: #F7EDE6; border: 1.5px solid #D9B49E; }
.vs-card.good-card { background: #F1F3E9; border: 1.5px solid #AFC191; }
.vs-card-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; }
.vs-card.bad-card .vs-card-title { color: #9A4A2F; }
.vs-card.good-card .vs-card-title { color: #4F6D38; }
.vs-item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.93rem; line-height: 1.5; }
.vs-item .vs-dot { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; margin-top: 2px; }
.vs-card.bad-card .vs-dot { background: #E2C4B2; color: #9A4A2F; }
.vs-card.good-card .vs-dot { background: #C2CFA5; color: #4F6D38; }
.vs-divider { display: flex; align-items: center; justify-content: center; padding: 0 1rem; }
.vs-badge { background: var(--dark-brown, var(--brown)); color: #fff; font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
@media (max-width: 620px) {
  .vs-divider { padding: 0.5rem 0; }
}
.feature-callout { display: flex; align-items: center; gap: 1.5rem; background: linear-gradient(135deg, var(--brown) 0%, #5c3d28 100%); color: #fff; border-radius: 14px; padding: 2rem 2rem; margin: 2.5rem 0; }
.feature-callout-icon { font-size: 2.8rem; flex-shrink: 0; }
.feature-callout-text h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin: 0 0 0.4rem; color: #f5e6d3; }
.feature-callout-text p { margin: 0; font-size: 0.95rem; opacity: 0.9; line-height: 1.6; }
@media (max-width: 540px) {
  .feature-callout { flex-direction: column; gap: 0.75rem; text-align: center; }
}
.blog-img-caption { display: block; font-size: 0.8rem; color: #888; text-align: center; margin-top: 0.5rem; font-style: italic; }
.blog-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.blog-img-row img { width: 100%; height: 240px; object-fit: cover; border-radius: 10px; }
@media (max-width: 580px) {
  .blog-img-row { grid-template-columns: 1fr; }
  .blog-img-row img { height: 200px; }
}
.origin-banner { background: #fdf8f2; border-left: 4px solid #c8874a; border-radius: 0 10px 10px 0; padding: 1.5rem 1.75rem; margin: 2rem 0; font-size: 1rem; line-height: 1.7; }
.origin-banner strong { color: var(--brown); }
.temp-gauge-wrap { margin:1.5rem 0;background:var(--surface);border-radius:12px;padding:1.3rem 1.5rem; }
.temp-gauge-title { font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:1rem;font-weight:600; }
.temp-gauge-svg { width:100%;height:auto;display:block; }
.ready-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.7rem;margin:1rem 0; }
.ready-card { background:#F4EEE3;border:1px solid #E0D3BC;border-left:3px solid #6C8B4F;border-radius:8px;padding:.9rem;text-align:center;transition:transform .2s,border-color .2s; }
.ready-card:hover { transform:translateY(-3px);border-left-color:#4f6d38; }
.ready-card .rc-icon { font-size:1.8rem;margin-bottom:.35rem; }
.ready-card h4 { margin:0 0 .2rem;font-size:.86rem;color:var(--brown);font-weight:600; }
.ready-card p { margin:0;font-size:.78rem;color:var(--text-soft);line-height:1.4; }
.mistake-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:.7rem;margin:1rem 0; }
.mistake-card { background:#F6ECDF;border:1px solid #E6D2BE;border-left:3px solid #B4552F;border-radius:8px;padding:1rem;display:flex;gap:.7rem;align-items:flex-start;transition:box-shadow .2s; }
.mistake-card:hover { box-shadow:0 4px 14px rgba(180,85,47,.14); }
.mistake-card .mc-icon { font-size:1.3rem;flex-shrink:0;margin-top:.1rem; }
.mistake-card h4 { margin:0 0 .2rem;font-size:.86rem;color:#8A3B25;font-weight:600; }
.mistake-card p { margin:0;font-size:.8rem;color:var(--text-soft);line-height:1.4; }
.roast-prod-scroll { display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem;scrollbar-width:thin;scrollbar-color:var(--caramel) #f0e8e0;margin:1rem 0; }
.roast-prod-scroll::-webkit-scrollbar { height:4px; }
.roast-prod-scroll::-webkit-scrollbar-thumb { background:var(--caramel);border-radius:2px; }
.roast-prod-card { min-width:200px;scroll-snap-align:start;background:var(--brown);border-radius:12px;padding:1.2rem;flex-shrink:0;transition:transform .2s; }
.roast-prod-card:hover { transform:translateY(-3px); }
.roast-prod-card .rpc-icon { font-size:1.8rem;margin-bottom:.4rem; }
.roast-prod-card h4 { margin:0 0 .25rem;font-size:.9rem;color:#fff;font-weight:600; }
.roast-prod-card p { margin:0 0 .65rem;font-size:.8rem;color:#d4c4b8;line-height:1.4; }
.roast-prod-card a { display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--caramel);font-weight:600;text-decoration:none; }
.roast-prod-card a:hover { color:#e09a50; }
.blog-table tr:last-child td { border-bottom: none; }
.blog-table tr:nth-child(even) td { background: var(--surface); }
.emprender-stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.emprender-stat { flex: 1 1 180px; background: var(--surface); border-left: 4px solid var(--caramel); border-radius: 6px; padding: 1rem 1.2rem; }
.emprender-stat .stat-num { font-size: 2rem; font-weight: 700; color: var(--caramel); line-height: 1.1; }
.emprender-stat .stat-label { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.25rem; }
.emprender-step { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0; padding: 1rem 1.2rem; background: #fff8f5; border-radius: 8px; border: 1px solid var(--line); }
.emprender-step .step-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.emprender-step .step-text h4 { margin: 0 0 0.3rem; color: var(--brown); font-size: 1rem; }
.emprender-step .step-text p { margin: 0; font-size: 0.92rem; color: var(--text-soft); }
.b2b-formats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.b2b-card { flex: 1 1 200px; background: var(--brown); color: #fff; border-radius: 10px; padding: 1.2rem 1.4rem; text-align: center; }
.b2b-card .b2b-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.b2b-card .b2b-title { font-size: 1.2rem; font-weight: 700; color: var(--caramel); margin-bottom: 0.4rem; }
.b2b-card .b2b-desc { font-size: 0.85rem; color: #d4c4b8; line-height: 1.5; }
.diferenciador-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.diferenciador-item { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; }
.diferenciador-item .dif-emoji { font-size: 1.6rem; margin-bottom: 0.4rem; }
.diferenciador-item h4 { margin: 0 0 0.4rem; color: var(--brown); font-size: 0.95rem; }
.diferenciador-item p { margin: 0; font-size: 0.88rem; color: var(--text-soft); }
.product-carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 22px rgba(61, 43, 31, 0.08); transition: transform 0.2s ease; }
.product-card:hover { transform: translateY(-4px); }
.product-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.product-card-body { padding: 1rem; }
.product-card-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--brown); font-weight: 700; margin-bottom: 0.65rem; }
.product-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.product-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #4d3c33; }
.decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.decision-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1rem; box-shadow: 0 6px 16px rgba(61, 43, 31, 0.06); }
.decision-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--brown); color: #fff; font-size: 1.2rem; margin-bottom: 0.75rem; }
.decision-card h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.decision-card p { margin: 0; line-height: 1.5; color: #4d3c33; }
@media (max-width: 480px) {
  .product-carousel { grid-template-columns: repeat(2, 1fr); }
}
.hist-timeline { display:flex;flex-direction:column;gap:0;margin:2rem 0 2.5rem;padding:0 .5rem;position:relative; }
.hist-timeline::before { content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--line),#c8874a,var(--brown)); }
.ht-item { display:grid;grid-template-columns:26px 130px 1fr;align-items:start;gap:.5rem .8rem;padding:.5rem 0; }
.ht-dot { width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #c8a882;margin-top:3px;position:relative;z-index:1; }
.ht-active .ht-dot { background:#c8874a;border-color:var(--brown);box-shadow:0 0 0 3px rgba(200,135,74,.2); }
.ht-date { font-family:'Playfair Display',serif;font-size:.82rem;font-weight:600;color:var(--brown);line-height:1.4;padding-top:1px; }
.ht-label { font-size:.84rem;color:#555;line-height:1.5; }
.ht-active .ht-date { color:#c8874a; }
.ht-active .ht-label { color:var(--brown);font-weight:500; }
@media(max-width:520px) {
  .ht-item { grid-template-columns:26px 90px 1fr;gap:.35rem .5rem; }
}
.hist-pullquote { border-left:4px solid #c8874a;margin:1.5rem 0;padding:.9rem 1.4rem;background:var(--surface);border-radius:0 12px 12px 0; }
.hist-pullquote p { margin:0;font-family:'Playfair Display',serif;font-size:1rem;color:var(--brown);font-style:italic;line-height:1.65; }
.bstat .bstat .bean-anatomy-wrap { background:var(--brown);border-radius:16px;padding:1.6rem 1.2rem 1.2rem;margin:1.5rem 0;overflow:hidden; }
.bean-anatomy-title { font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--caramel);text-align:center;margin-bottom:1rem;font-weight:600; }
.bean-svg { width:100%;max-width:420px;display:block;margin:0 auto; }
.bean-line { stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1s ease; }
.bean-label { opacity:0;transition:opacity .6s ease; }
.bean-anatomy-wrap.visible .bean-line { stroke-dashoffset:0; }
.bean-anatomy-wrap.visible .bean-label { opacity:1; }
.bean-label-1 { transition-delay:.8s; }
.bean-label-2 { transition-delay:1.1s; }
.bean-label-center { transition-delay:1.4s; }
.zero-tag { display:inline-flex;align-items:center;gap:.4rem;background:#33402A;color:#B7CE96;border-radius:20px;font-size:.78rem;font-weight:600;padding:.3rem .8rem;margin-top:.7rem; }
.brew-tabs { display:flex;gap:.5rem;margin:1.5rem 0 0;flex-wrap:wrap; }
.brew-tab { flex:1 1 auto;min-width:0;padding:.6rem .9rem;background:#fff;border:1.5px solid var(--line);border-radius:8px;font-size:.85rem;font-weight:500;color:var(--text-soft);cursor:pointer;transition:all .2s;white-space:nowrap; }
.brew-tab.active { background:var(--brown);color:#fff;border-color:var(--brown); }
.brew-tab:hover:not(.active) { border-color:var(--caramel);color:var(--brown); }
.brew-panel { display:none;background:var(--surface);border-radius:0 0 12px 12px;padding:1.2rem 1.3rem;border:1.5px solid var(--line);border-top:none;animation:fadeTab .25s ease; }
.brew-panel.active { display:block; }
@keyframes fadeTab { from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
.brew-steps { list-style:none;margin:0;padding:0;counter-reset:brew; }
.brew-steps li { counter-increment:brew;display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.7rem;font-size:.88rem;color:var(--text-soft);line-height:1.5; }
.brew-steps li::before { content:counter(brew);min-width:22px;height:22px;background:var(--caramel);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:.1rem; }
.brew-tip { font-size:.82rem;color:var(--cocoa);background:#fff3e6;border-left:3px solid var(--caramel);border-radius:0 6px 6px 0;padding:.5rem .8rem;margin-top:.8rem; }
.compare-table-wrap { margin:1.5rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--line); }
.compare-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.compare-table thead { background:var(--brown);color:var(--cream); }
.compare-table thead th { padding:.75rem 1rem;text-align:left;font-weight:500;font-size:.8rem;letter-spacing:.04em; }
.compare-table tbody tr { border-bottom:1px solid var(--line);transition:background .15s; }
.compare-table tbody tr:hover { background:var(--surface); }
.compare-table tbody tr:last-child { border-bottom:none; }
.compare-table td { padding:.7rem 1rem;color:var(--text-soft);vertical-align:middle; }
.compare-table td:first-child { font-weight:600;color:var(--brown); }
.ct-badge { display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.72rem;font-weight:600; }
.ct-high { background:#EDF0E2;color:#4F6D38; }
.ct-med { background:#fff8e1;color:#b07d00; }
.ct-low { background:#F6E7DF;color:#9A4A2F; }
.ct-none { background:#F0EBE5;color:var(--text-muted); }
.ct-highlight { background:#fdf5e8; }
.ct-highlight td:first-child { color:var(--caramel); }
.uses-scroll { display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem;scrollbar-width:thin;scrollbar-color:var(--caramel) #f0e8e0;margin:1rem 0; }
.uses-scroll::-webkit-scrollbar { height:4px; }
.uses-scroll::-webkit-scrollbar-thumb { background:var(--caramel);border-radius:2px; }
.use-card:hover { border-color:var(--caramel);transform:translateY(-3px); }
.bstat .bstat .skin-diagram-wrap { background:linear-gradient(135deg,#2a1a10 0%,var(--brown) 100%);border-radius:16px;padding:1.6rem 1.2rem 1.4rem;margin:1.5rem 0;overflow:hidden;position:relative; }
.skin-diagram-title { font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--caramel);text-align:center;margin-bottom:1rem;font-weight:600; }
.skin-svg { width:100%;max-width:460px;display:block;margin:0 auto; }
.flav-dot { opacity:0;transform:translateY(-10px); }
.skin-diagram-wrap.visible .flav-dot { opacity:1;transform:translateY(0); }
.flav-dot:nth-child(1) { transition:opacity .4s ease .2s,transform .4s ease .2s; }
.flav-dot:nth-child(2) { transition:opacity .4s ease .4s,transform .4s ease .4s; }
.flav-dot:nth-child(3) { transition:opacity .4s ease .6s,transform .4s ease .6s; }
.flav-dot:nth-child(4) { transition:opacity .4s ease .8s,transform .4s ease .8s; }
.flav-dot:nth-child(5) { transition:opacity .4s ease 1s,transform .4s ease 1s; }
.flav-dot:nth-child(6) { transition:opacity .4s ease 1.2s,transform .4s ease 1.2s; }
.skin-glow { opacity:0;transition:opacity 1s ease 1.4s; }
.skin-diagram-wrap.visible .skin-glow { opacity:1; }
.mask-carousel-wrap { margin:1.5rem 0; }
.mask-carousel-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem; }
.mask-carousel-header h3 { margin:0;font-size:1rem;color:var(--brown);font-family:'Playfair Display',serif; }
.mask-nav { display:flex;gap:.5rem; }
.mask-btn { width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--brown);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1; }
.mask-btn:hover { background:var(--brown);color:#fff;border-color:var(--brown); }
.mask-btn:disabled { opacity:.35;cursor:not-allowed; }
.mask-carousel { overflow:hidden;border-radius:12px; }
.mask-track { display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1); }
.mask-slide { min-width:100%;padding:1.4rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-sizing:border-box; }
.mask-slide-top { display:flex;align-items:center;gap:.9rem;margin-bottom:1rem; }
.mask-slide-icon { width:52px;height:52px;border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:1.9rem;flex-shrink:0; }
.mask-slide-meta h3 { margin:0 0 .2rem;font-size:1rem;color:var(--brown);font-weight:600; }
.mask-slide-meta p { margin:0;font-size:.82rem;color:var(--text-soft);font-weight:500; }
.mask-slide-desc { font-size:.87rem;color:var(--text-soft);line-height:1.6;margin:0 0 1rem; }
.mask-ingr-title { font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:#9a8a80;margin-bottom:.5rem;font-weight:600; }
.mask-ingr-list { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem; }
.mask-ingr-tag { background:var(--surface);border:1px solid var(--line);border-radius:20px;font-size:.78rem;color:var(--brown);padding:.2rem .65rem;font-weight:500; }
.mask-ingr-tag.highlight { background:var(--caramel);color:#fff;border-color:var(--caramel); }
.mask-time-info { display:flex;gap:1.2rem;font-size:.8rem;color:#9a8a80;padding-top:.8rem;border-top:1px solid #f0e8e0; }
.mask-time-info span { display:flex;align-items:center;gap:.3rem; }
.mask-dots { display:flex;gap:.5rem;justify-content:center;margin-top:.9rem; }
.mask-dot { width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s;cursor:pointer; }
.mask-dot.active { background:var(--caramel);transform:scale(1.3); }
.skin-benefits-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;margin:1.5rem 0; }
.skin-benefit-card { background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem .9rem;text-align:center;transition:border-color .2s,transform .2s; }
.skin-benefit-card:hover { border-color:var(--caramel);transform:translateY(-3px); }
.skin-benefit-card .sbc-icon { font-size:1.8rem;margin-bottom:.5rem; }
.skin-benefit-card h4 { margin:0 0 .3rem;font-size:.85rem;color:var(--brown);font-weight:600; }
.skin-benefit-card p { margin:0;font-size:.77rem;color:var(--text-muted);line-height:1.4; }
.ingr-table-wrap { margin:1.5rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--line); }
.ingr-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.ingr-table thead { background:var(--brown);color:var(--cream); }
.ingr-table thead th { padding:.7rem 1rem;text-align:left;font-weight:500;font-size:.79rem;letter-spacing:.04em; }
.ingr-table tbody tr { border-bottom:1px solid var(--line);transition:background .15s; }
.ingr-table tbody tr:hover { background:var(--surface); }
.ingr-table tbody tr:last-child { border-bottom:none; }
.ingr-table td { padding:.65rem 1rem;color:var(--text-soft);vertical-align:middle; }
.ingr-table td:first-child { font-weight:600;color:var(--brown); }
.it-benefit { color:#4F6D38;font-size:.8rem;font-weight:500; }
.prod-timeline { margin:1.5rem 0;overflow-x:auto;padding-bottom:.5rem; }
.prod-flow { display:flex;align-items:flex-start;gap:0;min-width:520px; }
.prod-step { display:flex;flex-direction:column;align-items:center;flex:1;position:relative;opacity:0; }
.prod-step.pf-visible { animation:pf-in .5s forwards; }
.prod-step:not(:last-child)::after { content:'→';position:absolute;right:-12px;top:18px;font-size:1.2rem;color:var(--caramel);font-weight:700;z-index:1; }
@keyframes pf-in { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
.prod-icon { width:52px;height:52px;border-radius:50%;background:var(--caramel);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 3px 10px rgba(200,135,58,.3); }
.prod-step-num { font-size:.65rem;font-weight:700;color:#7A4E0E;margin:.4rem 0 .15rem;text-transform:uppercase;letter-spacing:.06em; }
.prod-step-label { font-size:.78rem;color:var(--brown);font-weight:600;text-align:center;max-width:80px;line-height:1.3; }
.prod-step-sub { font-size:.67rem;color:#6b5a50;text-align:center;max-width:80px;margin-top:.2rem;line-height:1.3; }
.nutr-chart { margin:1.5rem 0;background:var(--surface);border-radius:12px;padding:1.4rem 1.5rem; }
.nutr-chart-title { font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:1.1rem;font-weight:600; }
.nutr-row { display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem; }
.nutr-label { min-width:130px;font-size:.85rem;color:var(--brown);font-weight:500; }
.nutr-bar-wrap { flex:1;background:var(--line);border-radius:20px;height:16px;overflow:hidden; }
.nutr-bar { height:100%;border-radius:20px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.nutr-bar.mag { background:var(--caramel); }
.nutr-bar.fibra { background:#6C8B4F; }
.nutr-bar.hierro { background:#7A4A55; }
.nutr-bar.prot { background:#6E8792; }
.nutr-val { font-size:.78rem;font-weight:700;color:var(--text-soft);min-width:52px;text-align:right; }
.nutr-note { font-size:.72rem;color:#9a8a80;margin-top:.6rem; }
.use-card .uc-num { width:24px;height:24px;background:var(--caramel);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;margin-bottom:.4rem; }
.quality-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin:1rem 0; }
.quality-card { background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;display:flex;gap:.7rem;align-items:flex-start;transition:box-shadow .2s; }
.quality-card:hover { box-shadow:0 4px 14px rgba(61,43,31,.08); }
.quality-card .qc-icon { font-size:1.4rem;flex-shrink:0;margin-top:.1rem; }
.quality-card h4 { margin:0 0 .2rem;font-size:.88rem;color:var(--brown);font-weight:600; }
.quality-card p { margin:0;font-size:.8rem;color:var(--text-soft);line-height:1.4; }
.fp-section { margin:2rem auto; max-width:900px; padding:0 1rem; }
.fp-heading { font-family:'Playfair Display',serif; font-size:1rem; color:var(--brown); margin:0 0 1.2rem; }
.fp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.fp-panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.2rem 1rem; }
.fp-panel-title { font-family:'Playfair Display',serif; font-size:.9rem; font-weight:600; color:var(--brown); margin:0 0 .9rem; display:flex; align-items:center; gap:.4rem; }
.fp-row { display:grid; grid-template-columns:70px 1fr 26px; align-items:center; gap:.45rem; margin-bottom:.6rem; }
.fp-label { font-size:.75rem; color:#666; font-weight:500; }
.fp-bar-wrap { height:8px; background:#f0ebe5; border-radius:5px; overflow:hidden; }
.fp-bar { height:100%; border-radius:5px; width:0; transition:width 1s cubic-bezier(.4,0,.2,1); }
.fp-val { font-size:.72rem; color:#aaa; font-weight:600; text-align:right; }
.fp-legend { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1rem; padding:0 .2rem; }
.fp-legend-item { display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:#666; }
.fp-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.rc-section { margin:2.5rem auto; max-width:900px; padding:0 1rem; }
.rc-section-title { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--brown); margin:0 0 1rem; }
.rc-wrap { position:relative; }
.rc-track { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
.rc-track::-webkit-scrollbar { display:none; }
.rc-card { scroll-snap-align:center; flex:0 0 min(250px,78vw); border-radius:16px; padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; border:1.5px solid transparent; transition:transform .25s ease,box-shadow .25s ease; }
.rc-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.rc-mousse { background:linear-gradient(145deg,#fdf4e8,#f5e2c8); border-color:#e8c97a; }
.rc-helado { background:linear-gradient(145deg,#F3F1EA,#E6EAE6); border-color:#AEC1C2; }
.rc-ensalada { background:linear-gradient(145deg,#F2F3EA,#E5EBDA); border-color:#AFC191; }
.rc-name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:600; margin:0; color:var(--brown); }
.rc-tag { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.18rem .55rem; border-radius:20px; align-self:flex-start; }
.rc-mousse .rc-tag { background:#e8c97a; color:#7a5500; }
.rc-helado .rc-tag { background:#AEC1C2; color:#3A4749; }
.rc-ensalada .rc-tag { background:#AFC191; color:#41502F; }
.rc-meta { display:flex; flex-wrap:wrap; gap:.3rem .8rem; margin:.1rem 0; }
.rc-meta-item { font-size:.78rem; color:#666; display:flex; align-items:center; gap:.25rem; }
.rc-key { font-size:.82rem; color:#555; line-height:1.5; margin:0; font-style:italic; }
.rc-nav { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:.9rem; }
.rc-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #c8a882; background:#fff; color:var(--brown); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.rc-btn:hover { background:var(--brown); color:#fff; border-color:var(--brown); }
.rc-dots { display:flex; gap:.5rem; }
.rc-dot { width:8px; height:8px; border-radius:50%; background:#d4c0ae; transition:background .25s; }
.rc-dot.active { background:#c8874a; }
.anim-table td.cell-mid { color:#c8874a; font-weight:600; }
.rt-section { margin:2.5rem 0; }
.rt-header { display:flex; gap:0; border-bottom:2px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.rt-header::-webkit-scrollbar { display:none; }
.rt-btn { flex:0 0 auto; padding:.65rem 1.1rem; border:none; background:transparent; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:500; color:#999; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .2s,border-color .2s; }
.rt-btn.active { color:var(--brown); border-bottom-color:#c8874a; }
.rt-panel { display:none; padding:1.4rem 0 .5rem; animation:rtUp .3s ease; }
.rt-panel.active { display:block; }
@keyframes rtUp { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;} }
.rt-content { background:#fdf8f2; border-radius:14px; padding:1.4rem 1.6rem; border:1px solid var(--line); }
.rt-content h4 { font-family:'Playfair Display',serif; font-size:.95rem; color:var(--brown); margin:0 0 .65rem; }
.rt-content ul { padding-left:1.3rem; margin:0; }
.rt-content li { font-size:.9rem; color:#444; line-height:1.65; margin-bottom:.3rem; }
.rt-content li strong { color:var(--brown); }
@media (max-width:600px) {
  .fp-grid { grid-template-columns:1fr; }
  .fp-row { grid-template-columns:65px 1fr 24px; }
}
.energy-chart-wrap { max-width: 760px; margin: 2.5rem auto; padding: 1.75rem 1.5rem 1rem; background: #fff; border: 1px solid #ede5db; border-radius: 16px; box-shadow: 0 4px 24px rgba(61,43,31,.07); }
.energy-chart-title { text-align: center; font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--brown); margin: 0 0 1rem; font-weight: 600; }
.energy-svg { width: 100%; height: auto; display: block; }
.energy-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: .75rem; font-size: .88rem; }
.energy-legend span { display:flex; align-items:center; gap:.45rem; font-weight:500; }
.el-coffee::before { content:''; display:inline-block; width:28px; height:3px; background:#A6472E; border-radius:2px; }
.el-cacao::before { content:''; display:inline-block; width:28px; height:3px; background:#6C8B4F; border-radius:2px; }
.el-coffee { color:#A6472E; }
.el-cacao { color:#4F6D38; }
.energy-path { stroke-dasharray: 9999; stroke-dashoffset: 9999; }
.mc-wrap { position:relative; margin: 2rem 0; }
.mc-track { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
.mc-track::-webkit-scrollbar { display:none; }
.mc-card { scroll-snap-align: center; flex: 0 0 min(260px, 78vw); border-radius: 16px; padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; cursor: default; transition: transform .25s ease, box-shadow .25s ease; }
.mc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,.12); }
.mc-card-coffee { background: linear-gradient(145deg, #F7EDE6, #F1E3DA); border:1.5px solid #DBB9A6; }
.mc-card-theo { background: linear-gradient(145deg, #F2F3E9, #E6EDDC); border:1.5px solid #B3C398; }
.mc-card-anand { background: linear-gradient(145deg, #fdf8ee, #faecd4); border:1.5px solid #e8c97a; }
.mc-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:600; margin:0; }
.mc-card-coffee .mc-name { color:#9A4A2F; }
.mc-card-theo .mc-name { color:#4F6D38; }
.mc-card-anand .mc-name { color:#8a6200; }
.mc-tag { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:20px; align-self:flex-start; }
.mc-card-coffee .mc-tag { background:#DBB9A6; color:#9A4A2F; }
.mc-card-theo .mc-tag { background:#B3C398; color:#41502F; }
.mc-card-anand .mc-tag { background:#e8c97a; color:#7a5500; }
.mc-facts { list-style:none; padding:0; margin:.2rem 0 0; display:flex; flex-direction:column; gap:.35rem; }
.mc-facts li { display:flex; align-items:flex-start; gap:.4rem; font-size:.88rem; line-height:1.4; }
.mc-facts li::before { content:'·'; font-size:1rem; font-weight:700; flex-shrink:0; margin-top:.02rem; }
.mc-card-coffee .mc-facts li::before { color:#A6472E; }
.mc-card-theo .mc-facts li::before { color:#6C8B4F; }
.mc-card-anand .mc-facts li::before { color:#c49a00; }
.mc-nav { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:1rem; }
.mc-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid #c8a882; background:#fff; color:var(--brown); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
.mc-btn:hover { background:var(--brown); color:#fff; border-color:var(--brown); }
.mc-dots { display:flex; gap:.5rem; }
.mc-dot { width:8px; height:8px; border-radius:50%; background:#d4c0ae; transition:background .25s; }
.mc-dot.active { background:var(--brown); }
.anim-table .col-coffee { color:#A6472E; font-weight:500; }
.when-section { margin: 2.5rem 0; }
.when-section > h2 { margin-bottom: .75rem; }
.when-tabs-header { display: flex; gap: .5rem; margin-bottom: 0; border-bottom: 2px solid var(--line); }
.wt-btn { padding: .65rem 1.25rem; border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 500; color: #888; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.wt-btn.active { color: var(--brown); border-bottom-color: var(--brown); }
.wt-panel { display: none; padding: 1.5rem 0 .5rem; animation: fadePanel .3s ease; }
.wt-panel.active { display: block; }
@keyframes fadePanel { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.wt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.wt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.wt-card-icon { font-size:1.6rem; }
.wt-card strong { font-size:.9rem; color:var(--brown); }
.wt-card span { font-size:.82rem; color:#666; line-height:1.4; }
.wt-panel-coffee .wt-card { border-left:3px solid #A6472E; }
.wt-panel-cacao .wt-card { border-left:3px solid #6C8B4F; }
.gcap { position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(25,8,2,.68));color:#f5ede4;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;padding:1.6rem .75rem .5rem;pointer-events:none;line-height:1; }

/* ── Páginas simples: FAQ, devoluciones, galería (antes con style="" en el HTML) ── */
.page-intro { font-size: 0.97rem; line-height: 1.8; color: var(--text-muted); max-width: 640px; margin-bottom: 3rem; }
.page-intro a:where(:not([class])) { color: var(--gold-label); }
.page-cta { background: white; padding: 5rem; text-align: center; border-top: 1px solid var(--border); }
.page-cta .section-title { font-size: 1.8rem; margin-bottom: 1rem; }
.legal-text { max-width: 760px; margin-top: 2rem; line-height: 1.9; }
.legal-text .legal-subtitle { font-weight: 600; margin-top: 1.5rem; }
.galeria-cta { text-align: center; padding: 3rem 1.5rem 4rem; background: var(--dark); }
.btn-secondary.btn-on-dark { border-color: var(--light-brown); color: var(--cream); }
.not-found-sub.not-found-lugar { margin-bottom: 0; font-size: 0.8rem; }
@media (max-width: 900px) { .page-cta { padding: 4rem 1.5rem; } }

/* ── Piezas de posts (antes con style="" en el HTML) ── */
.blog-body img.blog-img-centrada { max-width: 420px; display: block; margin: 1.5rem auto; }
.blog-img-inline.blog-video-vertical { max-width: 360px; margin: 0 auto 1.5rem; border-radius: 12px; }
.blog-cta-centro { text-align: center; margin: 1.5rem 0 2.5rem; }
.btn-primary.btn-grande { font-size: 1rem; padding: 0.85rem 1.75rem; }
.nut-nota { font-size: .75rem; color: #7a6a60; font-style: italic; font-family: 'DM Sans', sans-serif; }
.blog-tip-box a:where(:not([class])) { color: #1a3d1a; font-weight: 600; }

/* ── Octógono de advertencia peruano (Ley N° 30021), negro con filete blanco ── */
.octogono { --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); position: relative; display: block; width: 6rem; aspect-ratio: 1; margin: 0 auto .75rem; background: #000; clip-path: var(--oct); }
.octogono::before { content: ''; position: absolute; inset: 3px; background: #fff; clip-path: var(--oct); }
.blog-icon-card .octogono > span { position: absolute; inset: 5px; display: grid; place-items: center; padding: 0 .35rem; background: #000; clip-path: var(--oct); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.12; letter-spacing: .03em; text-align: center; text-transform: uppercase; }