/*
Theme Name: Savia
Theme URI: https://example.com/savia
Author: Savia
Author URI: https://example.com
Description: Tema profesional para tienda de suplementos y nutrición, con panel de "datos" estilo etiqueta nutricional, pago en línea y pago contra entrega vía WooCommerce. Editable desde el Personalizador y el editor de WordPress.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savia
Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* =========================================================
   1. TOKENS
========================================================= */
:root{
  --ink:#14201A;
  --forest:#1F3D2B;
  --forest-2:#274A34;
  --parchment:#EFEAD9;
  --cream:#FAF8F1;
  --gold:#D98E2B;
  --gold-2:#C97C1D;
  --sage:#7C9473;
  --sage-light:#DCE5D6;
  --line: rgba(20,32,26,0.14);
  --radius: 2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; line-height:1.1; letter-spacing:-0.01em; margin:0;}
p{margin:0;}
ul{list-style:none; margin:0; padding:0;}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.screen-reader-text{position:absolute; left:-9999px;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-2); font-weight:600; display:inline-block;
}
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:10px;}
.section-head p{margin-top:14px; color:rgba(20,32,26,.68); font-size:15.5px;}

/* =========================================================
   2. BOTONES (compatibles con WooCommerce .button)
========================================================= */
.btn, .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button,
.woocommerce-Button, .wp-block-button__link{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px !important; font-size:14.5px !important; font-weight:600 !important;
  border-radius:var(--radius) !important; border:1px solid transparent !important;
  cursor:pointer; font-family:'Work Sans', sans-serif !important;
  background:var(--forest) !important; color:var(--cream) !important;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  text-transform:none;
}
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover{
  background:var(--forest-2) !important;
}
.btn-gold, .woocommerce a.checkout-button, .woocommerce #payment #place_order,
.woocommerce a.added_to_cart{ background:var(--gold) !important; color:var(--ink) !important; }
.btn-gold:hover, .woocommerce a.checkout-button:hover, .woocommerce #payment #place_order:hover{
  background:var(--gold-2) !important;
}
.btn-outline{ background:transparent !important; border-color:rgba(250,248,241,.4) !important; color:var(--cream) !important; }
.btn-outline:hover{ border-color:var(--cream) !important; }
.btn-ghost{ background:transparent !important; border-color:var(--line) !important; color:var(--ink) !important; }
.btn-ghost:hover{ border-color:var(--forest) !important; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 16px !important; font-size:13px !important; }

/* =========================================================
   3. HEADER
========================================================= */
#site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(239,234,217,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}
.site-logo{display:flex; align-items:center; gap:10px;}
.site-logo img{max-height:40px; width:auto;}
.logo-mark{width:38px; height:38px;}
.logo-word{font-family:'Fraunces', serif; font-weight:700; font-size:21px; letter-spacing:.01em; color:var(--ink);}
.logo-tag{font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.16em; color:var(--sage); display:block; margin-top:-2px;}
#primary-menu{display:flex; gap:32px; font-size:14.5px; font-weight:500;}
#primary-menu li a{padding:4px 0; color:var(--ink);}
#primary-menu li a:hover, #primary-menu li.current-menu-item a{color:var(--forest); border-bottom:2px solid var(--gold);}
.nav-actions{display:flex; align-items:center; gap:16px;}
.icon-btn{width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; position:relative;}
.cart-count{position:absolute; top:-6px; right:-6px; background:var(--gold); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
@media (max-width:860px){ #primary-menu{display:none;} }

/* =========================================================
   4. HERO
========================================================= */
.hero{ background:var(--forest); color:var(--cream); padding:88px 0 0; overflow:hidden; }
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,64px); color:var(--cream);}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:500;}
.hero p.lead{margin-top:20px; font-size:17px; max-width:44ch; color:rgba(250,248,241,.82);}
.hero-badges{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px;}
.hero-badges span{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sage-light); display:flex; align-items:center; gap:8px;}
.hero-badges span::before{content:''; width:6px; height:6px; background:var(--gold); border-radius:50%; display:inline-block;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-plant{position:relative; height:420px;}
.hero-strip{margin-top:64px; border-top:1px solid rgba(250,248,241,.14); padding:22px 0;}
.hero-strip .wrap{display:flex; gap:46px; flex-wrap:wrap; justify-content:space-between;}
.hero-strip .stat b{font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--gold); display:block;}
.hero-strip .stat span{font-size:12px; color:rgba(250,248,241,.7); font-family:'IBM Plex Mono',monospace;}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} .hero-plant{height:260px; order:-1;} }

/* =========================================================
   5. POR QUÉ (bloques)
========================================================= */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.why-card{background:var(--cream); padding:34px 30px;}
.why-card .num{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--sage);}
.why-card h3{font-size:19px; margin-top:14px; font-weight:600;}
.why-card p{margin-top:10px; font-size:14.5px; color:rgba(20,32,26,.68);}
@media (max-width:760px){ .why-grid{grid-template-columns:1fr;} }

/* =========================================================
   6. PRODUCTOS — WooCommerce loop (ul.products / li.product)
========================================================= */
.woocommerce ul.products, ul.products{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)) !important;
  gap:24px !important; margin:0 !important;
}
.woocommerce ul.products li.product, ul.products li.product{
  background:var(--cream); border:1px solid var(--line); padding:0 !important;
  display:flex; flex-direction:column; width:100% !important; margin:0 !important;
  transition:box-shadow .18s ease, transform .18s ease; position:relative;
}
.woocommerce ul.products li.product:hover{ box-shadow:0 14px 30px -18px rgba(20,32,26,.35); transform:translateY(-2px); }
.woocommerce ul.products li.product a img{
  aspect-ratio:1/.86; object-fit:cover; border-bottom:3px double var(--ink); background:linear-gradient(160deg, var(--sage-light), var(--parchment));
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16.5px !important; font-weight:600; font-family:'Fraunces',serif; padding:18px 20px 0; color:var(--ink);
}
.woocommerce ul.products li.product .price{
  font-family:'IBM Plex Mono',monospace !important; font-size:20px !important; font-weight:600;
  color:var(--forest) !important; padding:6px 20px 0; display:block;
}
.woocommerce ul.products li.product .price del{ color:rgba(20,32,26,.4); font-size:12px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button{ margin:12px 20px 20px !important; }
.woocommerce span.onsale{
  position:absolute; top:10px; left:10px; background:var(--forest); color:var(--cream);
  font-family:'IBM Plex Mono',monospace; font-size:10px; padding:4px 8px; border-radius:0;
  min-height:0; min-width:0; line-height:1; top:10px; left:10px;
}
.woocommerce .star-rating{ display:none; }

/* Tarjeta con "panel de datos" (firma visual) inyectada vía savia_product_facts() */
.savia-facts{ border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:8px 0; margin:10px 20px 0;
  font-family:'IBM Plex Mono', monospace; font-size:11px; }
.savia-facts div{ display:flex; justify-content:space-between; padding:3px 0; border-top:1px solid var(--line); }
.savia-facts div:first-child{ border-top:none; }
.savia-tag{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--sage); padding:14px 20px 0; display:block; }
.savia-actions{ display:flex; flex-direction:column; gap:8px; margin:10px 20px 20px; }

/* =========================================================
   7. PÁGINA DE PRODUCTO INDIVIDUAL
========================================================= */
.woocommerce div.product{ margin-top:20px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family:'IBM Plex Mono',monospace !important; font-size:26px !important; color:var(--forest) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description{ margin-top:16px; color:rgba(20,32,26,.75); }
.woocommerce div.product form.cart{ margin-top:24px; }
.woocommerce div.product .quantity input.qty{
  border:1px solid var(--line); background:var(--parchment); padding:11px 10px; font-family:'IBM Plex Mono',monospace; width:70px; height:auto;
}
.woocommerce-tabs ul.tabs li{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.woocommerce-tabs ul.tabs li a{ padding:10px 16px; }
.woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--gold); }

/* =========================================================
   8. PAGOS (bloque informativo)
========================================================= */
.pay-section{ background:var(--forest); color:var(--cream); }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(250,248,241,.14); border:1px solid rgba(250,248,241,.14); margin-top:10px; }
.pay-card{ background:var(--forest-2); padding:36px 32px; }
.pay-card .eyebrow{ color:var(--gold); }
.pay-card h3{ color:var(--cream); font-size:22px; margin-top:12px; }
.pay-card p{ margin-top:12px; font-size:14.5px; color:rgba(250,248,241,.78); }
.pay-marks{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.pay-mark{ font-family:'IBM Plex Mono',monospace; font-size:11px; border:1px solid rgba(250,248,241,.3); padding:6px 10px; color:rgba(250,248,241,.85); }
@media (max-width:760px){ .pay-grid{grid-template-columns:1fr;} }

/* =========================================================
   9. TESTIMONIOS
========================================================= */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{ border-left:2px solid var(--gold); padding-left:18px; }
.quote p{ font-family:'Fraunces',serif; font-style:italic; font-size:17px; }
.quote span{ display:block; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(20,32,26,.6); }
@media (max-width:760px){ .quote-grid{grid-template-columns:1fr;} }

/* =========================================================
   10. NEWSLETTER / FOOTER
========================================================= */
.cta-band{ background:var(--gold); color:var(--ink); text-align:center; }
.cta-band h2{ font-size:clamp(26px,3.6vw,38px); }
.cta-band p{ margin-top:12px; color:rgba(20,32,26,.75); }
.cta-band form{ display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.cta-band input[type=email]{ padding:13px 16px; border:1px solid var(--ink); background:var(--cream); min-width:280px; font-family:'Work Sans',sans-serif; font-size:14px; }

#site-footer{ background:var(--ink); color:rgba(250,248,241,.7); padding:60px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
#site-footer h4{ color:var(--cream); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; margin-bottom:16px; text-transform:uppercase; }
#site-footer li{ margin-bottom:9px; font-size:14px; }
#site-footer li a:hover{ color:var(--gold); }
.foot-bottom{ border-top:1px solid rgba(250,248,241,.12); margin-top:46px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; font-family:'IBM Plex Mono',monospace; }
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* =========================================================
   11. CARRITO / CHECKOUT / MI CUENTA — estilos base
========================================================= */
.woocommerce table.shop_table{ border:1px solid var(--line); border-collapse:collapse; width:100%; font-size:14px; }
.woocommerce table.shop_table th{ background:var(--cream); font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:12px; text-align:left; border-bottom:1px solid var(--line); }
.woocommerce table.shop_table td{ padding:14px 12px; border-bottom:1px solid var(--line); }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-form-row input, .woocommerce-form-row select, .woocommerce-form-row textarea{
  border:1px solid var(--line) !important; background:var(--cream) !important; padding:11px 12px !important; font-family:'Work Sans',sans-serif !important; width:100%;
}
.woocommerce-checkout #payment{ background:var(--cream); border:1px solid var(--line); padding:20px; }
.woocommerce-checkout #payment ul.payment_methods li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments{
  border-top-color:var(--gold) !important; background:var(--cream); padding:14px 18px; font-size:14px;
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--gold) !important; }

/* =========================================================
   12. MODAL "pagar contra entrega" (JS en assets/js/savia.js)
========================================================= */
.modal-overlay{ position:fixed; inset:0; background:rgba(20,32,26,.55); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--cream); max-width:460px; width:100%; padding:34px; position:relative; border-top:4px solid var(--gold); }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); }
.modal h3{ font-size:22px; margin-bottom:6px; }
.modal p.sub{ font-size:13.5px; color:rgba(20,32,26,.65); margin-bottom:20px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-family:'IBM Plex Mono',monospace; margin-bottom:6px; color:rgba(20,32,26,.7); }
.field input{ width:100%; padding:11px 12px; border:1px solid var(--line); background:var(--parchment); font-family:'Work Sans',sans-serif; font-size:14px; }
.modal-note{ font-size:12px; color:rgba(20,32,26,.55); margin-top:14px; text-align:center; }

/* =========================================================
   13. ENTRADAS Y PÁGINAS ESTÁNDAR
========================================================= */
.content-area{ padding:88px 0; }
.content-area .entry-title{ font-size:36px; margin-bottom:24px; }
.content-area .entry-content{ font-size:16px; color:rgba(20,32,26,.8); }
.content-area .entry-content > * + *{ margin-top:18px; }