/*
Theme Name:   Astra Child
Template:     astra
Version:      2.0.0
*/

/* ============================================================
   NATUBARK — Sistema de diseño global
   Aplica sobre Astra + WooCommerce en staging y producción
   ============================================================ */

/* ── 1. Variables ── */
:root {
  --cream:      #FFFFFF;
  --cream-2:    #F4EEE9;
  --paper:      #FFFFFF;
  --ink:        #1F1A18;
  --muted:      #7B736C;
  --green:      #211C1A;
  --green-2:    #E30613;
  --green-soft: #F0C9C0;
  --gold:       #E8A33E;
  --terra:      #E30613;
  --terra-2:    #F4231C;

  --radius:    26px;
  --radius-sm: 16px;
  --shadow:      0 24px 60px -28px rgba(33,28,26,.35);
  --shadow-soft: 0 14px 34px -20px rgba(33,28,26,.22);

  --font-display: "Newsreader", Georgia, serif;
  --font-body:    "Nunito Sans", system-ui, sans-serif;
  --font-brand:   "Baloo 2", "Nunito Sans", sans-serif;

  --maxw: 1240px;
}

/* ── 2. Reset suave ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  background: var(--cream) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }

/* ── 3. Tipografía ── */
h1, h2, h3,
.entry-title,
.page-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
p, li, td, th, label, input, textarea, select {
  font-family: var(--font-body) !important;
}
a { color: var(--terra); text-decoration: none; transition: color .2s; }
a:hover { color: var(--terra-2); }

/* ── 4. Eyebrow label ── */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--terra);
  display: inline-block;
  border-radius: 2px;
}

/* ── 5. Botones globales ── */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wp-block-button__link,
.elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border: 0 !important;
  cursor: pointer !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
  background: var(--terra) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -12px rgba(227,6,19,.5) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 34px -12px rgba(227,6,19,.6) !important;
  background: var(--terra-2) !important;
  color: #fff !important;
}

/* Botón secundario / outline */
.btn-ghost,
.woocommerce a.button.button-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 2px solid rgba(33,28,26,.2) !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.woocommerce a.button.button-secondary:hover {
  border-color: var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

/* Botón oscuro */
.btn-dark {
  background: var(--green) !important;
  color: #F4F1E8 !important;
  box-shadow: none !important;
}

/* ── 6. Header / Nav Astra ── */
#masthead,
.site-header,
.ast-primary-header-bar {
  background: var(--cream) !important;
  border-bottom: 1px solid rgba(33,28,26,.07) !important;
  box-shadow: 0 2px 18px -8px rgba(33,28,26,.1) !important;
}
.main-header-bar { padding: 0 28px !important; }

/* Logo */
.custom-logo { max-height: 52px !important; width: auto !important; }

/* Nav links */
.main-navigation a,
.ast-primary-menu a,
#site-navigation a {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  letter-spacing: .01em !important;
  transition: color .2s !important;
}
.main-navigation a:hover,
.ast-primary-menu a:hover,
#site-navigation a:hover {
  color: var(--terra) !important;
}
.ast-menu-toggle { color: var(--ink) !important; }

/* CTA en nav */
.ast-header-custom-widget .btn,
.header-widget-area .btn {
  font-size: 14px !important;
  padding: 11px 22px !important;
}

/* ── 7. Footer ── */
.site-footer,
#colophon,
.ast-footer-overlay {
  background: var(--green) !important;
  color: rgba(255,255,255,.72) !important;
  font-family: var(--font-body) !important;
}
.site-footer a,
#colophon a { color: rgba(255,255,255,.78) !important; }
.site-footer a:hover,
#colophon a:hover { color: #fff !important; }

/* ── 8. WooCommerce — Tienda ── */

/* Grid de productos */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products li.product {
  background: var(--paper) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow) !important;
}
.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 16px 18px 4px !important;
  font-size: 20px !important;
}
.woocommerce ul.products li.product .price {
  padding: 0 18px 8px !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.woocommerce ul.products li.product .price del {
  font-size: 16px !important;
  color: var(--muted) !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--terra) !important;
}
.woocommerce ul.products li.product .button {
  margin: auto 18px 18px !important;
  width: calc(100% - 36px) !important;
  justify-content: center !important;
}

/* Badges sale / featured */
.woocommerce span.onsale {
  background: var(--terra) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  top: 12px !important;
  left: 12px !important;
}

/* ── 9. WooCommerce — Página de producto ── */
.woocommerce div.product {
  font-family: var(--font-body) !important;
}
.woocommerce div.product .product_title {
  font-size: clamp(30px, 4vw, 46px) !important;
  margin-bottom: 12px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
}
.woocommerce div.product form.cart .qty {
  border: 2px solid rgba(33,28,26,.15) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 10px 14px !important;
}

/* ── 10. WooCommerce — Carrito ── */
.woocommerce-cart .woocommerce {
  font-family: var(--font-body) !important;
}
.woocommerce table.cart,
.woocommerce-page table.cart {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-soft) !important;
  border: none !important;
}
.woocommerce table.cart th,
.woocommerce-page table.cart th {
  background: var(--ink) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border: none !important;
}
.woocommerce table.cart td,
.woocommerce-page table.cart td {
  padding: 16px 20px !important;
  border-color: rgba(33,28,26,.06) !important;
  vertical-align: middle !important;
}
.woocommerce table.cart td.product-name a {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
}
.woocommerce table.cart td.product-price .amount,
.woocommerce table.cart td.product-subtotal .amount {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}
.woocommerce .cart-collaterals .cart_totals {
  background: var(--cream-2) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
}
.woocommerce .cart-collaterals h2 {
  font-size: 24px !important;
  margin-bottom: 20px !important;
}
.woocommerce .cart-collaterals table th,
.woocommerce .cart-collaterals table td {
  border-color: rgba(33,28,26,.08) !important;
  padding: 12px 0 !important;
}
.woocommerce .cart-collaterals .order-total .amount {
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--terra) !important;
}

/* ── 11. WooCommerce — Checkout ── */
.woocommerce-checkout .woocommerce {
  font-family: var(--font-body) !important;
}
.woocommerce-checkout #order_review {
  background: var(--cream-2) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
}
.woocommerce form .form-row label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  margin-bottom: 5px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 2px solid rgba(33,28,26,.12) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  transition: border-color .2s !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--terra) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1) !important;
}
.woocommerce #payment .payment_methods {
  border-radius: var(--radius-sm) !important;
  border: 2px solid rgba(33,28,26,.1) !important;
}
.woocommerce #payment .payment_methods li {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

/* ── 12. Notices / mensajes ── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--terra) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
}
.woocommerce-error {
  border-top-color: var(--terra) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── 13. Página de contenido (posts, páginas genéricas) ── */
.entry-content {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
}
.entry-content h2,
.entry-content h3 {
  margin-top: 2em !important;
  margin-bottom: .6em !important;
}

/* ── 14. Animaciones globales ── */
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%      { transform: translateY(-14px) rotate(calc(var(--r,0deg) + 5deg)); }
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* ── 15. Responsive ── */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
  }
  h1 { font-size: clamp(28px, 7vw, 42px) !important; }
  h2 { font-size: clamp(24px, 6vw, 38px) !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}