/*
 * TiendaLibro — Sistema DESTELLO
 * Estilos globales de marca para WordPress + WooCommerce
 * v1.0.0
 */

/* ── Variables de color ─────────────────────────────────────────────────────── */
:root {
  --tl-void:     #080B1A;   /* Fondo absoluto */
  --tl-nocturno: #0D1128;   /* Fondos sección */
  --tl-profundo: #141A3A;   /* Superficies elevadas */
  --tl-destello: #FF4800;   /* Acento primario, CTAs */
  --tl-ambar:    #FF8A38;   /* Acento secundario */
  --tl-luz:      #FFFFFF;   /* Texto primario */
  --tl-hielo:    #E4E8F8;   /* Texto suave */
  --tl-niebla:   #737EA2;   /* Texto secundario */
  --tl-borde:    #2C3462;   /* Bordes y separadores */
}

/* ── Tipografía global ──────────────────────────────────────────────────────── */
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
}

.site-title,
.site-title a {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
}

.site-description {
  font-family: 'Jura', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75em;
  color: var(--tl-niebla);
}

/* Subtítulos */
h2, h3 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
}

/* Labels, precios, etiquetas */
.price,
.amount,
label,
.widget-title,
.product-title,
.wp-block-post-title {
  font-family: 'Big Shoulders Display', sans-serif;
}

/* Navegación */
.main-navigation a,
.nav-menu a,
.primary-menu a,
.menu a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
}

/* ── Links ───────────────────────────────────────────────────────────────────── */
a {
  color: var(--tl-destello);
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--tl-ambar);
}

/* ── Botones globales ───────────────────────────────────────────────────────── */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── WooCommerce — Botones ──────────────────────────────────────────────────── */
.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 #respond input#submit.alt,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__place-order-button {
  background-color: var(--tl-destello) !important;
  color: var(--tl-luz) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

.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 input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__place-order-button:hover {
  background-color: var(--tl-ambar) !important;
  color: var(--tl-luz) !important;
}

/* ── WooCommerce — Precios ──────────────────────────────────────────────────── */
.woocommerce .price,
.woocommerce-Price-amount.amount,
.woocommerce span.price {
  color: var(--tl-destello) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
}

/* Precio tachado (antes del descuento) */
.woocommerce del .woocommerce-Price-amount,
.woocommerce del {
  color: var(--tl-niebla) !important;
  opacity: 0.7;
}

/* ── WooCommerce — Badges ──────────────────────────────────────────────────── */
.woocommerce span.onsale {
  background-color: var(--tl-destello) !important;
  color: var(--tl-luz) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 1.4 !important;
  padding: 4px 8px !important;
}

/* ── WooCommerce — Ratings ──────────────────────────────────────────────────── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--tl-ambar) !important;
}

/* ── WooCommerce — Tabs / Pestañas ─────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--tl-destello) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--tl-destello) !important;
}

/* ── WooCommerce — Add to cart ──────────────────────────────────────────────── */
.woocommerce .quantity input.qty {
  font-family: 'Outfit', sans-serif !important;
}

/* ── WooCommerce — Checkout ─────────────────────────────────────────────────── */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--tl-destello) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 72, 0, 0.2) !important;
}

/* ── WooCommerce — Order received ───────────────────────────────────────────── */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--tl-destello) !important;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--tl-destello) !important;
}

/* ── Bloques Gutenberg ─────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: var(--tl-destello) !important;
  color: var(--tl-luz) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.wp-block-button__link:hover {
  background-color: var(--tl-ambar) !important;
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */
.custom-logo,
.site-logo img {
  max-height: 60px;
  width: auto;
}

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

/* ── Acento visual DESTELLO — Línea naranja superior ───────────────────────── */
.site-header,
header.site-header,
#masthead {
  border-top: 4px solid var(--tl-destello);
}

/* ── Separadores ─────────────────────────────────────────────────────────────── */
hr,
.wp-block-separator {
  border-color: var(--tl-borde);
}