/* =====================================================================
   TEMA ACTUAL · Opción A "VOLT" + categorías de la opción C  (atlético-tecnológico: WHOOP, Nike, Gymshark)
   Negro puro + UN acento lima eléctrico para acciones. Grotesca
   semicondensada en minúscula, botones píldora, tarjetas planas
   con borde fino y brillo lima sutil al pasar el mouse.
   Se carga DESPUÉS de estilos.css. No toca el HTML.
   Contraste: texto #09090B sobre lima #C6F432 = 15,5:1 · lima sobre fondo = 15,5:1
   Logo: pedir versión blanco + lima (#C6F432), sin barra roja.
   ===================================================================== */

/* ---------- 1. Variables (marca + Kadence) ---------- */
html:root {
	--ss-bg: #09090B; --ss-surface: #131316; --ss-surface2: #1C1C21; --ss-border: #2A2A31;
	--ss-text: #FAFAFA; --ss-muted: #A1A1AA; --ss-img: #F4F4F5;
	--ss-red: #C6F432;        /* acento principal (lima) */
	--ss-red-dark: #B2DE1F;   /* hover */
	--ss-yellow: #C6F432;     /* enlaces destacados = mismo acento */
	--ss-purple: #7CF5FF;     /* acento secundario (cian) */
	--ss-on-accent: #09090B;  /* texto sobre lima */
	--ss-glow: 0 0 0 1px rgba(198, 244, 50, .55), 0 12px 40px rgba(198, 244, 50, .14);
	--ss-titulos: "Archivo", "Inter", system-ui, sans-serif;
	--ss-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--global-palette1: #C6F432; --global-palette2: #B2DE1F;
	--global-palette-btn-bg: #C6F432; --global-palette-btn-bg-hover: #B2DE1F;
	--global-palette-btn: #09090B; --global-palette-btn-hover: #09090B;
}

/* ---------- 2. Tipografía: minúscula, apretada, semicondensada ---------- */
h1, h2, h3, .product_title, .entry-title, .woocommerce-loop-category__title {
	font-family: var(--ss-titulos); font-weight: 800; font-stretch: 87.5%;
	text-transform: none; letter-spacing: -0.025em; line-height: 1.02;
}
h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.8vw, 48px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
.single-product .product_title { font-size: clamp(30px, 3.4vw, 44px); }
@media (max-width: 767px) { h1 { font-size: 36px; letter-spacing: -0.02em; } h2 { letter-spacing: -0.015em; } }

/* ---------- 3. Header ---------- */
.site-top-header-wrap .site-header-row-container-inner { background: var(--ss-surface) !important; border-bottom: 1px solid var(--ss-border); }
.site-top-header-wrap, .site-top-header-wrap a { color: var(--ss-text) !important; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.site-main-header-wrap .site-header-row-container-inner { background: rgba(9, 9, 11, .92) !important; }
.main-navigation .primary-menu-container > ul > li.menu-item > a { text-transform: none; font-weight: 500; font-size: 15px; }
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a { color: var(--ss-red); }
.menu-destacado > a { color: var(--ss-red) !important; }
.header-cart-total, .header-cart-button .header-cart-total { background: var(--ss-red) !important; color: var(--ss-on-accent) !important; font-weight: 700; }
#mobile-drawer .mobile-navigation ul li > a, #mobile-drawer .mobile-navigation ul li > .drawer-nav-drop-wrap { text-transform: none; font-weight: 600; }

/* ---------- 4. Botones: píldora lima, texto oscuro, sin sombra roja ---------- */
.wp-block-button__link, .button, button.single_add_to_cart_button,
.woocommerce button.button, .woocommerce a.button, .woocommerce button.button.alt,
.ss-btn {
	border-radius: 999px !important; text-transform: none; letter-spacing: -0.005em;
	font-family: var(--ss-texto); font-weight: 700 !important; box-shadow: none;
	transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.wp-block-button__link, .button, button.single_add_to_cart_button,
.woocommerce button.button, .woocommerce a.button, .woocommerce button.button.alt,
.ss-btn.ss-btn--rojo {
	background: var(--ss-red) !important; color: var(--ss-on-accent) !important;
}
.wp-block-button__link:hover, .button:hover, button.single_add_to_cart_button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .ss-btn.ss-btn--rojo:hover {
	background: var(--ss-red-dark) !important; color: var(--ss-on-accent) !important;
	box-shadow: 0 8px 28px rgba(198, 244, 50, .28); transform: translateY(-1px);
}
.ss-btn.ss-btn--borde { border: 1px solid rgba(250, 250, 250, .35); color: var(--ss-text) !important; background: rgba(255, 255, 255, .04); }
.ss-btn.ss-btn--borde:hover { background: var(--ss-text); color: var(--ss-bg) !important; border-color: var(--ss-text); }
/* WhatsApp sigue verde (se re-declara porque la regla general de arriba lo pisaría) */
.ss-btn.ss-btn--wa, .btn-wa-producto a.button, .btn-wa-producto a.button:hover { background: #25D366 !important; color: #09090B !important; box-shadow: none; }

/* ---------- 5. Pastillas, badges, listas ---------- */
.pill { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; padding: 6px 14px; }
.pill--morado { background: rgba(198, 244, 50, .1); color: var(--ss-red); border: 1px solid rgba(198, 244, 50, .45); }
.pill--amarillo { background: var(--ss-red); color: var(--ss-on-accent); }
.woocommerce span.onsale { background: var(--ss-red); color: var(--ss-on-accent); text-transform: none; font-weight: 700; letter-spacing: 0; }
.lista-check li::before { content: "✓"; color: var(--ss-red); }
.ss-pastillas a { text-transform: none; font-weight: 600; background: transparent; }
.ss-pastillas a.activa { background: var(--ss-red); border-color: var(--ss-red); color: var(--ss-on-accent); }
.ss-pastillas a:focus-visible { outline-color: var(--ss-red); }

/* ---------- 6. Tarjetas de producto: planas + brillo lima ---------- */
.woocommerce ul.products li.product { border-radius: 20px; box-shadow: none; padding: 10px; }
.woocommerce ul.products li.product:hover { border-color: transparent; box-shadow: var(--ss-glow); transform: translateY(-3px); }
.woocommerce ul.products li.product .woocommerce-loop-image-link,
.woocommerce ul.products li.product a img { border-radius: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 500; }
.woocommerce ul.products li.product .price,
.single-product div.product p.price, .single-product div.product span.price {
	color: var(--ss-text) !important; font-family: var(--ss-titulos); font-weight: 800; font-stretch: 87.5%; letter-spacing: -0.02em;
}

/* ---------- 7. Página de producto ---------- */
.single-product .woocommerce-product-gallery { border-radius: 24px; }
.caja-confianza { border-left: 1px solid var(--ss-border); border-radius: 16px; background: linear-gradient(180deg, rgba(198, 244, 50, .06), transparent 70%), var(--ss-surface); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { text-transform: none; font-weight: 600; }

/* ---------- 8. Portada ---------- */
.ss-hero::before { background: linear-gradient(90deg, rgba(9, 9, 11, .95) 0%, rgba(9, 9, 11, .6) 50%, rgba(9, 9, 11, .05) 100%); }
.ss-hero__bajada { color: #D4D4D8; }
@media (max-width: 767px) { .ss-hero--movil::before { background: linear-gradient(0deg, rgba(9, 9, 11, .98) 0%, rgba(9, 9, 11, .7) 45%, rgba(9, 9, 11, .1) 75%); } }

/* Beneficios: tira oscura con iconos lima (en vez del bloque amarillo) */
.ss-beneficios { background: var(--ss-surface); color: var(--ss-text); border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); }
.ss-beneficio svg { color: var(--ss-red); }
.ss-beneficio strong { text-transform: none; font-weight: 700; }
.ss-beneficio span { color: var(--ss-muted); }

/* Categorías: se conservan los colores, pero con look más limpio */
/* Categorías: estilo "Studio" (opción C) que escogió el dueño — tarjeta oscura,
   foto sobre fondo claro y el color de la categoría como línea inferior de 6 px
   (el degradado viene en el style inline de cada ficha). */
.ss-cat { border-radius: 16px; box-shadow: none; border: 1px solid var(--ss-border); background-size: 100% 6px !important; background-position: bottom !important; background-repeat: no-repeat !important; background-color: var(--ss-surface) !important; }
.ss-cat:hover { border-color: #52525B; transform: none; box-shadow: none; }
.ss-cat img { border-radius: 12px; background: var(--ss-img); width: 100%; height: 140px; padding: 10px; }
.ss-cat__nombre { font-family: var(--ss-titulos); font-weight: 700; text-transform: none; letter-spacing: -0.02em; font-size: 18px; color: var(--ss-text); }
.ss-cat--todo { border-style: dashed; }
.ss-cat--todo .ss-cat__nombre { color: var(--ss-text); }
@media (max-width: 767px) { .ss-cat img { height: 104px; } .ss-cat__nombre { font-size: 16px; } }

/* Objetivos: lima / cian / rosa */
.ss-objetivo { border-radius: 24px; border-bottom: 0; box-shadow: inset 0 -3px 0 var(--color); }
.ss-objetivo:nth-child(1) { --color: #C6F432 !important; }
.ss-objetivo:nth-child(2) { --color: #7CF5FF !important; }
.ss-objetivo:nth-child(3) { --color: #FF5C8A !important; }
.ss-objetivo h3 { font-size: clamp(28px, 3vw, 36px); }
.ss-objetivo .ss-enlace { text-transform: none; font-weight: 700; }

.ss-original { border-top: 0; border: 1px solid var(--ss-border); border-radius: 24px; }
.ss-marca { font-family: var(--ss-titulos); font-weight: 800; font-stretch: 87.5%; text-transform: none; letter-spacing: -0.01em; border-radius: 999px; }
.ss-marca:hover { border-color: var(--ss-red); }
.ss-paso { border-radius: 20px; }
.ss-paso__num { font-weight: 900; font-stretch: 75%; color: var(--ss-red); }
.ss-cabecera a { text-transform: none; font-weight: 600; color: var(--ss-red); }

/* CTA: fondo oscuro con resplandor lima (en vez del degradado rojo-morado) */
.ss-cta { background: radial-gradient(60% 120% at 50% 120%, rgba(198, 244, 50, .32) 0%, rgba(198, 244, 50, 0) 70%), var(--ss-surface); border-top: 1px solid var(--ss-border); }
.ss-cta p { color: #D4D4D8; }

/* ---------- 9. Footer ---------- */
.site-footer { border-top: 1px solid var(--ss-border); border-image: none; }
.ss-footer h2, .site-footer h2, .site-footer .widget-title { font-family: var(--ss-titulos); font-weight: 800; font-stretch: 87.5%; text-transform: none; letter-spacing: -0.01em; }
.ss-footer a:hover { color: var(--ss-red); }

/* ---------- 10. Accesibilidad ---------- */
:focus-visible { outline: 2px solid var(--ss-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ss-btn, .button, .wp-block-button__link, .ss-cat, .ss-objetivo, .woocommerce ul.products li.product { transition: none !important; transform: none !important; }
}