/*
Theme Name: Hello Elementor MOX Child
Theme URI: https://agenciacentauro.cl
Description: Child theme de Hello Elementor para MOX — tienda de accesorios TCG (Deckbox 3D, Playmats, Protectores, Proxys/Tokens). Desarrollado por Centauro Marketing Digital.
Author: Centauro Marketing Digital
Author URI: https://agenciacentauro.cl
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-mox-child
License: GNU General Public License v3 or later
*/

/* ==========================================================================
   MOX — Variables de marca
   ========================================================================== */
:root {
  --mox-bg: #0B0B0D;
  --mox-card: #141416;
  --mox-border: #26262B;
  --mox-primary: #C0632A;   /* cobre gema MOX */
  --mox-accent: #E8843B;    /* cobre brillante / glow */
  --mox-text: #FFFFFF;
  --mox-body: #B4B4BC;
  --mox-muted: #7A7A85;
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--mox-bg);
}

/* Color de selección de texto en cobre */
::selection {
  background: var(--mox-primary);
  color: #0B0B0D;
}

/* ==========================================================================
   Scrollbar personalizada (cobre sobre oscuro)
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0B0B0D;
}
::-webkit-scrollbar-thumb {
  background: var(--mox-primary);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mox-accent);
}

/* ==========================================================================
   Helpers de movimiento — añade estas clases en Elementor
   (Avanzado → Avanzado → Clases de CSS)
   ========================================================================== */

/* .mox-hover-card  → eleva la tarjeta y le da glow cobre al pasar el mouse */
.mox-hover-card {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mox-hover-card:hover {
  transform: translateY(-8px);
  border-color: var(--mox-primary) !important;
  box-shadow: 0 16px 40px rgba(192, 99, 42, 0.25);
}

/* .mox-zoom-img → hace zoom suave a la imagen dentro de la tarjeta en hover */
.mox-zoom-img img {
  transition: transform .5s ease;
}
.mox-zoom-img:hover img {
  transform: scale(1.06);
}

/* .mox-glow-btn → brillo pulsante en botones destacados (CTA) */
.mox-glow-btn .elementor-button,
.mox-glow-btn a {
  transition: transform .25s ease, box-shadow .25s ease;
}
.mox-glow-btn .elementor-button:hover,
.mox-glow-btn a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(232, 132, 59, 0.6);
}

/* .mox-link-underline → subrayado animado en enlaces de menú */
.mox-link-underline a {
  position: relative;
}
.mox-link-underline a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--mox-accent);
  transition: width .3s ease;
}
.mox-link-underline a:hover::after {
  width: 100%;
}

/* ==========================================================================
   WooCommerce — ajustes mínimos para coherencia con el tema oscuro
   (se afina mejor en vivo dentro de Elementor)
   ========================================================================== */
.woocommerce ul.products li.product .price {
  color: var(--mox-accent);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--mox-primary);
  color: #0B0B0D;
  border-radius: 8px;
  transition: background .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--mox-accent);
}