/* ====================================================================
   BAJLUM DIVI — identidad visual
   Solo estilos globales + clases utilitarias para usar en el campo
   "Clase CSS" de cualquier módulo Divi. El layout (hero, carousel,
   secciones) se arma en el Divi Builder, no aquí.
   ==================================================================== */

:root{
	--bajlum-bg:#0a0a0a;
	--bajlum-ink:#e0d5c0;
	--bajlum-amber:#ffaa00;
	--bajlum-stone:#8b7355;
	--bajlum-lava:#ff6600;
	--bajlum-ease:cubic-bezier(0.25,0.46,0.45,0.94);

	/* acentos mayas — uno por colección */
	--bajlum-oro:#c9a227;
	--bajlum-jade:#3b7a57;
	--bajlum-terracota:#a04a32;
	--bajlum-azul:#4e9fb5;
	--bajlum-obsidiana:#6e5e80;
}

/* ==================== BASE ==================== */
body{
	background:var(--bajlum-bg);
	color:var(--bajlum-ink);
}

/* ==================== CONSISTENCIA DE FONDO (páginas clásicas de WooCommerce) ====================
   Producto, Carrito, Checkout y Mi Cuenta renderizan su contenido
   dentro del wrapper clásico de Divi (#main-content) y del módulo de
   Tabs (.et_pb_all_tabs / .et_pb_tabs_controls) — ambos con fondo
   blanco/gris claro por defecto, que rompe la identidad oscura del
   sitio en esas páginas (las construidas 100% en el Builder, como
   Tienda o La Historia, no se ven afectadas). */
#main-content,
.et_pb_all_tabs,
.et_pb_tabs_controls{
	background-color:var(--bajlum-bg) !important;
}

/* Tablas y formularios de WooCommerce (carrito, checkout, mi cuenta) */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-MyAccount-content,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single{
	background-color:rgba(255,255,255,.04) !important;
	color:var(--bajlum-ink) !important;
	border-color:rgba(139,115,85,.3) !important;
}
h1, h2, h3, h4, h5, h6,
.et_pb_module_header{
	font-family:Georgia,'Times New Roman',serif;
	letter-spacing:.04em;
}

/* ==================== BOTONES DIVI ==================== */
.et_pb_button,
.et_pb_promo_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit{
	background:rgba(255,170,0,.1) !important;
	border:1px solid rgba(255,170,0,.45) !important;
	color:var(--bajlum-amber) !important;
	letter-spacing:.14em;
	text-transform:uppercase;
	transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.et_pb_button:hover,
.et_pb_promo_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
	background:rgba(255,170,0,.22) !important;
	border-color:var(--bajlum-amber) !important;
	box-shadow:0 0 24px rgba(255,170,0,.25);
}

/* ==================== TARJETAS DE PRODUCTO (módulo Shop) ==================== */
.woocommerce ul.products li.product,
.et_pb_shop .product{
	transition:transform .5s var(--bajlum-ease), box-shadow .5s ease;
}
.woocommerce ul.products li.product:hover,
.et_pb_shop .product:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 22px rgba(255,170,0,.14);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.et_pb_shop .product .woocommerce-loop-product__title{
	font-family:Georgia,serif;
	color:var(--bajlum-ink);
}
.woocommerce ul.products li.product .price,
.et_pb_shop .product .price{
	color:var(--bajlum-amber) !important;
	font-family:'Courier New',monospace;
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before{
	color:var(--bajlum-amber);
}

/* ==================== UTILIDAD: elemento apagado que cobra vida al pasar el cursor ====================
   Uso: agrega la clase "bajlum-dim-hover" en el campo "Clase CSS" de
   cualquier módulo Divi (Blurb, Columna, Shop, Imagen, etc.). Combínala
   con un acento de colección para que el destello use ese color:
   bajlum-dim-hover bajlum-accent-jade */
.bajlum-dim-hover{
	--bajlum-accent:var(--bajlum-amber);
	filter:grayscale(1) brightness(.45);
	transition:filter .6s var(--bajlum-ease), transform .6s var(--bajlum-ease), box-shadow .6s ease;
	position:relative;
}
.bajlum-dim-hover:hover,
.bajlum-dim-hover:focus-within{
	filter:grayscale(0) brightness(1);
	transform:translateY(-6px);
	box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 22px var(--bajlum-accent);
}

/* Acentos de colección — cambian solo el color del destello */
.bajlum-accent-oro{        --bajlum-accent:var(--bajlum-oro); }
.bajlum-accent-jade{       --bajlum-accent:var(--bajlum-jade); }
.bajlum-accent-terracota{  --bajlum-accent:var(--bajlum-terracota); }
.bajlum-accent-azul{       --bajlum-accent:var(--bajlum-azul); }
.bajlum-accent-obsidiana{  --bajlum-accent:var(--bajlum-obsidiana); }

/* ==================== PARTÍCULAS DORADAS ==================== */
/* El canvas lo inyecta bajlum-cursor.js; cubre el viewport completo,
   no captura clics y queda por debajo del cursor jaguar. */
.bajlum-fx-canvas{
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:100001; /* por encima del header de Divi (99999) */
}

/* ==================== CURSOR JAGUAR ==================== */
.bajlum-cursor-logo{
	position:fixed;
	top:0; left:0;
	width:44px; height:44px;
	margin:-22px 0 0 -22px;
	pointer-events:none;
	z-index:100030; /* por encima del header de Divi (99999) y de la intro */
	opacity:0;
	transition:opacity .5s ease, width .25s var(--bajlum-ease), height .25s var(--bajlum-ease), margin .25s var(--bajlum-ease);
	filter:drop-shadow(0 0 10px rgba(255,170,0,.55));
	will-change:transform;
}
.bajlum-cursor-logo svg,
.bajlum-cursor-logo img{
	position:absolute; inset:0;
	width:100%; height:100%;
	display:block;
	transition:opacity .5s ease;
}
/* Solo en la portada, mientras corre la intro: el cursor tiene dos
   gráficos superpuestos (cincel / jaguar) que se cruzan al terminar.
   En el resto del sitio solo existe el <img> del jaguar, así que estas
   reglas no aplican y no cambian nada. */
.bajlum-cursor-logo .bajlum-cursor-jaguar{ opacity:0; }
.bajlum-cursor-logo.jaguar-mode .bajlum-cursor-chisel{ opacity:0; }
.bajlum-cursor-logo.jaguar-mode .bajlum-cursor-jaguar{ opacity:1; }
/* retroceso del cincel con cada golpe de tallado */
.bajlum-cursor-logo.kick .bajlum-cursor-chisel{ animation:bajlumChiselKick .16s ease-out; }
@keyframes bajlumChiselKick{
	0%{ transform:translate(4px,4px) rotate(7deg); }
	100%{ transform:translate(0,0) rotate(0deg); }
}
.bajlum-cursor-logo.active{ opacity:1; }
/* suspendido: sobre la barra de admin de WP vuelve el cursor nativo */
.bajlum-cursor-logo.suspended{ opacity:0 !important; }
#wpadminbar, #wpadminbar *{ cursor:auto !important; }
.bajlum-cursor-logo.hovering{
	width:60px; height:60px; margin:-30px 0 0 -30px;
	filter:drop-shadow(0 0 18px rgba(255,170,0,.85));
}
body.bajlum-cursor-on,
body.bajlum-cursor-on a,
body.bajlum-cursor-on button{ cursor:none; }

@media (hover:none){
	.bajlum-cursor-logo{ display:none !important; }
	.bajlum-dim-hover{ filter:none; }
}
@media (prefers-reduced-motion:reduce){
	.bajlum-cursor-logo, .bajlum-dim-hover{ transition:none; }
}