/*
 Theme Name:   Astra Child
 Theme URI:    https://fathermotosport.com
 Description:  Child theme de Astra para FatherMotoSport
 Author:       FatherMotoSport
 Template:     astra
 Version:      1.0.0
*/

/* ============================================
   VARIABLES — Paleta FatherMotoSport
   ============================================ */
:root {
  --fms-black:      #080808;
  --fms-carbon:     #101010;
  --fms-steel:      #181818;
  --fms-red:        #FF1F1F;
  --fms-red-hover:  #FF4D4D;
  --fms-gold:       #FFD000;
  --fms-gold-hover: #FFE040;
  --fms-white:      #FFFFFF;
  --fms-white-dim:  #E0E0E0;
  --fms-gray:       #888888;
  --glow-red:       0 0 20px rgba(255, 31, 31, 0.5);
  --glow-gold:      0 0 20px rgba(255, 208, 0, 0.5);
  --transition:     all 0.25s ease;
}

/* ============================================
   BASE — Fondo y tipografía general
   ============================================ */
body {
  background-color: var(--fms-black) !important;
  color: var(--fms-white-dim) !important;
  font-family: 'Barlow', sans-serif !important;
}

/* ============================================
   NAVBAR
   ============================================ */
.site-header,
#masthead {
  background-color: rgba(8, 8, 8, 0.97) !important;
  border-bottom: 2px solid var(--fms-gold) !important;
  position: sticky !important;
  top: 0;
  z-index: 9999;
  transition: var(--transition);
}

/* Logo */
.site-branding .site-title a,
.ast-site-name-wrap .site-title a {
  color: var(--fms-white) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 4px !important;
  text-decoration: none !important;
}

/* Nav links */
.main-navigation a,
.ast-nav-menu > li > a,
#site-navigation a {
  color: #888 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  transition: var(--transition) !important;
  padding: 8px 14px !important;
}

.main-navigation a:hover,
.ast-nav-menu > li > a:hover,
.ast-nav-menu > li.current-menu-item > a {
  color: var(--fms-gold) !important;
  text-shadow: var(--glow-gold) !important;
}

/* Dropdown menus */
.main-navigation .sub-menu,
.ast-nav-menu .sub-menu {
  background-color: var(--fms-carbon) !important;
  border: 1px solid #1e1e1e !important;
  border-top: 2px solid var(--fms-red) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
}

.main-navigation .sub-menu a,
.ast-nav-menu .sub-menu a {
  color: var(--fms-gray) !important;
  border-bottom: 1px solid #1a1a1a !important;
  padding: 10px 18px !important;
}

.main-navigation .sub-menu a:hover,
.ast-nav-menu .sub-menu a:hover {
  color: var(--fms-gold) !important;
  background-color: #161616 !important;
}

/* ============================================
   BOTONES — Hover vívido
   ============================================ */

/* Botón primario (dorado) */
.ast-btn,
.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  background-color: var(--fms-gold) !important;
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 14px 28px !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
}

.ast-btn:hover,
.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--fms-gold-hover) !important;
  box-shadow: var(--glow-gold) !important;
  transform: translateY(-2px) !important;
  color: #000 !important;
}

/* Botón secundario / outline (rojo) */
.ast-btn.ast-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: transparent !important;
  color: var(--fms-red) !important;
  border: 1px solid var(--fms-red) !important;
}

.ast-btn.ast-btn-outline:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--fms-red) !important;
  color: #fff !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   TITULOS Y HEADINGS
   ============================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--fms-white) !important;
  letter-spacing: 3px !important;
}

h1 { font-size: 72px !important; line-height: 0.95 !important; }
h2 { font-size: 48px !important; }
h3 { font-family: 'Barlow Condensed', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: 2px !important; }

/* ============================================
   HERO / BANNER PRINCIPAL
   ============================================ */
.ast-hero-container,
.wp-block-cover,
.wp-block-group.has-background {
  background-color: var(--fms-carbon) !important;
}

/* Acento rojo en títulos destacados */
.hero-accent-red,
strong.red { color: var(--fms-red) !important; text-shadow: var(--glow-red); }

/* Acento dorado */
.hero-accent-gold,
strong.gold { color: var(--fms-gold) !important; text-shadow: var(--glow-gold); }

/* ============================================
   CARDS / PRODUCTOS WooCommerce
   ============================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--fms-steel) !important;
  border: 1px solid #222 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--fms-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(255, 208, 0, 0.1) !important;
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--fms-white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 12px 16px 4px !important;
}

/* Precio */
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: var(--fms-gold) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: 2px !important;
}

/* Precio tachado (antes) */
.woocommerce ul.products li.product .price del,
.woocommerce .price del {
  color: #444 !important;
  font-size: 16px !important;
}

/* Badge "En oferta" */
.woocommerce span.onsale {
  background-color: var(--fms-red) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  border-radius: 2px !important;
  box-shadow: var(--glow-red) !important;
}

/* ============================================
   LINKS GENERALES
   ============================================ */
a {
  color: var(--fms-white-dim) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--fms-gold) !important;
  text-decoration: none !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer,
#colophon {
  background-color: var(--fms-carbon) !important;
  border-top: 2px solid #1a1a1a !important;
  color: #555 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 1px !important;
}

.site-footer a,
#colophon a {
  color: #555 !important;
  transition: color 0.2s !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--fms-gold) !important;
}

/* ============================================
   INPUTS / FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  background-color: var(--fms-steel) !important;
  color: var(--fms-white) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 3px !important;
  font-family: 'Barlow', sans-serif !important;
  transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--fms-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 208, 0, 0.15) !important;
}

/* ============================================
   SCROLLBAR personalizado
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--fms-black); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fms-gold); }

/* ============================================
   FIX v2 — Eliminar fondos claros de Astra
   ============================================ */

/* Matar fondo verde/gris del hero y secciones */
body,
.ast-container,
.site,
.site-content,
#content,
.ast-page-builder-template,
.entry-content,
.wp-site-blocks,
.is-layout-flow,
.ast-separate-container .ast-article-single,
.ast-plain-container .ast-article-single {
  background-color: var(--fms-black) !important;
  background-image: none !important;
}

/* Hero / banner principal — fondo negro */
.wp-block-cover,
.wp-block-cover__inner-container,
.elementor-section,
.ast-hero-container,
[class*="elementor-section"],
.wp-block-group,
.wp-block-columns {
  background-color: transparent !important;
}

/* Secciones con fondo claro — forzar negro */
.has-white-background-color,
.has-light-background-color,
.has-pale-green-background-color,
.has-luminous-vivid-amber-background-color,
[style*="background-color:#f0f0f0"],
[style*="background-color: #f0f0f0"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#fafafa"],
[style*="background-color: #fafafa"] {
  background-color: var(--fms-carbon) !important;
}

/* Texto sobre fondos que se volvieron oscuros */
.has-white-background-color *,
.has-light-background-color * {
  color: var(--fms-white-dim) !important;
}

/* ============================================
   DORADO VÍVIDO — Más presencia y brillo
   ============================================ */

/* Título hero principal con glow dorado */
h1,
.entry-title,
.wp-block-heading.has-xxx-large-font-size,
.wp-block-heading,
.hero-title {
  color: var(--fms-white) !important;
  text-shadow: none !important;
}

/* Primera palabra o acento en h1 — dorado */
h1 strong,
h1 em,
.entry-title strong,
.wp-block-heading strong {
  color: var(--fms-gold) !important;
  font-style: normal !important;
  text-shadow: 0 0 30px rgba(255, 208, 0, 0.7),
               0 0 60px rgba(255, 208, 0, 0.3) !important;
}

/* Línea dorada animada bajo el h1 */
h1::after,
.entry-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--fms-gold);
  box-shadow: 0 0 12px rgba(255,208,0,0.8), 0 0 24px rgba(255,208,0,0.4);
  margin-top: 16px;
  border-radius: 2px;
  animation: goldPulse 2.5s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,208,0,0.8), 0 0 24px rgba(255,208,0,0.4); opacity: 1; }
  50%       { box-shadow: 0 0 20px rgba(255,208,0,1),   0 0 40px rgba(255,208,0,0.6); opacity: 0.85; }
}

/* Borde dorado superior del navbar más brillante */
.site-header,
#masthead {
  border-top: 3px solid var(--fms-gold) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 30px rgba(255, 208, 0, 0.15) !important;
}

/* Nav link activo — dorado con glow */
.ast-nav-menu > li.current-menu-item > a,
.ast-nav-menu > li.current-menu-ancestor > a {
  color: var(--fms-gold) !important;
  text-shadow: 0 0 16px rgba(255, 208, 0, 0.6) !important;
}

/* Precio del producto — dorado brillante */
.woocommerce ul.products li.product .price,
.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--fms-gold) !important;
  text-shadow: 0 0 10px rgba(255, 208, 0, 0.5) !important;
}

/* Botón primario — glow dorado al cargar */
.ast-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.button {
  box-shadow: 0 0 0px rgba(255,208,0,0) !important;
  animation: btnAppear 0.6s ease forwards !important;
}

@keyframes btnAppear {
  from { box-shadow: 0 0 0px rgba(255,208,0,0); }
  to   { box-shadow: 0 0 14px rgba(255,208,0,0.35); }
}

/* Separadores / dividers — línea dorada sutil */
hr,
.wp-block-separator {
  border-color: #1e1e1e !important;
  border-top: 1px solid #1e1e1e !important;
}

hr.is-style-wide,
.wp-block-separator.is-style-wide {
  border-color: var(--fms-gold) !important;
  opacity: 0.3 !important;
  box-shadow: 0 0 8px rgba(255,208,0,0.3) !important;
}

/* Icono carrito WooCommerce */
.ast-header-woo-cart .count,
.ast-cart-menu-wrap .count {
  background-color: var(--fms-red) !important;
  color: #fff !important;
  box-shadow: var(--glow-red) !important;
}

/* Hover en imágenes de productos */
.woocommerce ul.products li.product a img {
  transition: transform 0.3s ease, filter 0.3s ease !important;
  filter: brightness(0.9) !important;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04) !important;
  filter: brightness(1.05) !important;
}

/* ============================================
   FIX v3 — UAGB Bloques fondo azul/verde
   ============================================ */

/* Matar fondo azul/verde de todos los bloques UAGB */
.wp-block-uagb-container,
[class*="wp-block-uagb-"],
[class*="uagb-block-"],
.uagb-container-inner-blocks-wrap,
.uagb-ifb-content,
.uagb-infobox__content-wrap {
  background-color: transparent !important;
  background: none !important;
}

/* Fix específico para el hero (clase encontrada en DevTools) */
.uagb-block-dd9954d8,
.uagb-block-ddb9fa05,
.uagb-block-80e372f6,
.uagb-block-8c18556a {
  background-color: var(--fms-black) !important;
  background: var(--fms-black) !important;
}

/* Cualquier inline style con background claro en UAGB */
.wp-block-uagb-container[style*="background"],
[class*="uagb-block-"][style*="background"] {
  background-color: var(--fms-black) !important;
}

/* Título del hero (uagb-ifb-title) — blanco con glow */
.uagb-ifb-title,
h1.uagb-ifb-title {
  color: var(--fms-white) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 72px !important;
  letter-spacing: 3px !important;
  line-height: 0.95 !important;
  text-shadow: none !important;
}

/* Descripción del hero */
.uagb-ifb-desc,
p.uagb-ifb-desc {
  color: var(--fms-gray) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Forzar negro en TODAS las secciones de la página */
section,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
[class*="wp-block-"] {
  background-color: transparent !important;
}

/* Solo las secciones raíz (root containers) van en negro */
.uagb-is-root-container {
  background-color: var(--fms-black) !important;
}