/*
Theme Name:  LaborPro Index
Theme URI:   https://laborproindex.es
Author:      LaborPro Index S.L.
Description: Tema hijo de Storefront para la tienda online de ropa laboral y EPI de LABORPRO INDEX S.L.
Template:    storefront
Version:     1.0.0
Text Domain: laborpro-index
Tags:        woocommerce, e-commerce, custom-colors, custom-typography
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — TOKENS DE MARCA LPI
   ============================================================ */
:root {
  --lpi-azul-marino:  #003087;
  --lpi-dorado:       #C9A84C;
  --lpi-azul-noche:   #0D1B3E;
  --lpi-blanco:       #FFFFFF;
  --lpi-plata:        #B8B8C8;
  --lpi-naranja:      #FF5F00;
  --lpi-gris-claro:   #F8F9FC;
  --lpi-texto:        #2D3748;

  --lpi-font-titulos: 'Montserrat', 'Arial Black', Arial, sans-serif;
  --lpi-font-cuerpo:  'Open Sans', Helvetica, Arial, sans-serif;

  --lpi-radio-btn:    4px;
  --lpi-sombra-card:  0 2px 16px rgba(0, 48, 135, 0.10);
  --lpi-transicion:   0.25s ease;
}

/* ============================================================
   BASE GLOBAL
   ============================================================ */
body {
  font-family: var(--lpi-font-cuerpo);
  color: var(--lpi-texto);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lpi-font-titulos);
  color: var(--lpi-azul-marino);
  line-height: 1.2;
  font-weight: 800;
}

a {
  color: var(--lpi-azul-marino);
  transition: color var(--lpi-transicion);
}
a:hover { color: var(--lpi-dorado); }

/* ============================================================
   CABECERA / HEADER
   ============================================================ */
.site-header,
.storefront-primary-navigation {
  background-color: var(--lpi-azul-noche) !important;
  border-bottom: 3px solid var(--lpi-dorado) !important;
}

.site-header .site-title a,
.site-header .site-description {
  color: var(--lpi-blanco) !important;
}

/* Menú de navegación */
.main-navigation ul li a,
.storefront-primary-navigation .main-navigation ul li a {
  color: var(--lpi-blanco) !important;
  font-family: var(--lpi-font-titulos);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--lpi-transicion);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--lpi-dorado) !important;
}

/* Submenú */
.main-navigation ul ul {
  background-color: var(--lpi-azul-marino) !important;
  border-top: 2px solid var(--lpi-dorado) !important;
}
.main-navigation ul ul li a {
  color: var(--lpi-blanco) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
}
.main-navigation ul ul li a:hover {
  background-color: var(--lpi-azul-noche) !important;
  color: var(--lpi-dorado) !important;
}

/* Botón carrito en header */
.storefront-header-cart .cart-contents,
.storefront-handheld-footer-bar .cart-contents {
  color: var(--lpi-dorado) !important;
}

/* ============================================================
   BLOQUES GUTENBERG — SEPARADOR (divisor dorado)
   ============================================================ */
.wp-block-separator {
  border-color: var(--lpi-dorado) !important;
  height: 3px !important;
  border-top: none !important;
  margin: 16px auto !important;
  max-width: 80px !important;
}
.wp-block-separator.is-style-wide {
  max-width: 80px !important;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
.button {
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--lpi-radio-btn) !important;
  transition: background-color var(--lpi-transicion), color var(--lpi-transicion), transform var(--lpi-transicion) !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

/* ============================================================
   SECCIONES PERSONALIZADAS — CLASES LPI
   ============================================================ */

/* Hero */
.lpi-hero .wp-block-cover__inner-container {
  padding: 80px 20px;
}
.lpi-hero h1 em,
.lpi-hero h1 span { color: var(--lpi-dorado); font-style: normal; }

/* Trust Bar */
.lpi-trust-bar .wp-block-column {
  position: relative;
}
.lpi-trust-bar .wp-block-column + .wp-block-column::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: rgba(201, 168, 76, 0.4);
}

/* Cards de sectores */
.lpi-sectors .wp-block-column {
  transition: transform var(--lpi-transicion), box-shadow var(--lpi-transicion);
  border-radius: 4px;
  overflow: hidden;
}
.lpi-sectors .wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Cards de marcas */
.lpi-brands .wp-block-column {
  box-shadow: var(--lpi-sombra-card);
  transition: box-shadow var(--lpi-transicion), transform var(--lpi-transicion);
}
.lpi-brands .wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 48, 135, 0.18);
}

/* Barra de contacto */
.lpi-contact-bar {
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}

/* ============================================================
   WOOCOMMERCE — PALETA DE MARCA
   ============================================================ */

/* Botones primarios WC */
.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 {
  background-color: var(--lpi-azul-marino) !important;
  color: var(--lpi-blanco) !important;
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--lpi-radio-btn) !important;
  transition: background-color var(--lpi-transicion), transform var(--lpi-transicion) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--lpi-dorado) !important;
  color: var(--lpi-azul-noche) !important;
  transform: translateY(-1px) !important;
}

/* Botón "Añadir al carrito" */
.woocommerce .single_add_to_cart_button,
.woocommerce #payment #place_order {
  background-color: var(--lpi-dorado) !important;
  color: var(--lpi-azul-noche) !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #payment #place_order:hover {
  background-color: var(--lpi-azul-marino) !important;
  color: var(--lpi-blanco) !important;
}

/* Precio */
.woocommerce .price,
.woocommerce .amount {
  color: var(--lpi-azul-marino) !important;
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 800 !important;
}
.woocommerce .price del .amount {
  color: var(--lpi-plata) !important;
  font-weight: 400 !important;
}
.woocommerce .price ins .amount {
  color: var(--lpi-naranja) !important;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
  color: var(--lpi-plata);
  font-size: 0.8rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--lpi-azul-marino);
}

/* Cabecera de la tienda */
.woocommerce-products-header,
.woocommerce-shop-title {
  color: var(--lpi-azul-marino);
  font-family: var(--lpi-font-titulos);
}

/* Badge "Oferta" / "Sale" */
.woocommerce span.onsale {
  background-color: var(--lpi-naranja) !important;
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  min-height: auto !important;
  padding: 4px 8px !important;
  line-height: 1.4 !important;
}

/* Tarjeta de producto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 1px solid #EEF0F5;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow var(--lpi-transicion), transform var(--lpi-transicion);
  background-color: var(--lpi-blanco);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--lpi-sombra-card);
  transform: translateY(-3px);
  border-color: var(--lpi-dorado);
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 700 !important;
  color: var(--lpi-azul-marino) !important;
  font-size: 0.95rem !important;
}

/* Imagen del producto */
.woocommerce ul.products li.product img {
  border-bottom: 2px solid var(--lpi-gris-claro);
  transition: opacity var(--lpi-transicion);
}
.woocommerce ul.products li.product:hover img { opacity: 0.9; }

/* Rating estrellas */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--lpi-dorado) !important; }

/* Campo de búsqueda WC */
.woocommerce-product-search input[type="search"]:focus,
.woocommerce-product-search button:focus {
  border-color: var(--lpi-azul-marino) !important;
  outline: 2px solid rgba(0,48,135,0.2) !important;
}

/* Filtros / Widgets de tienda */
.widget_price_filter .ui-slider {
  background-color: var(--lpi-plata) !important;
}
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--lpi-azul-marino) !important;
}

/* Notificaciones WC */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--lpi-azul-marino) !important;
}
.woocommerce-message::before {
  color: var(--lpi-azul-marino) !important;
}
.woocommerce-error {
  border-top-color: var(--lpi-naranja) !important;
}

/* Tabla del carrito */
.woocommerce table.cart td.actions .coupon .input-text:focus,
.woocommerce #coupon_code:focus {
  border-color: var(--lpi-azul-marino) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--lpi-azul-noche) !important;
  color: var(--lpi-plata) !important;
  border-top: 3px solid var(--lpi-dorado) !important;
}
.site-footer a { color: var(--lpi-dorado) !important; }
.site-footer a:hover { color: var(--lpi-blanco) !important; }
.site-footer h1, .site-footer h2,
.site-footer h3, .site-footer h4 {
  color: var(--lpi-blanco) !important;
}
.site-footer .widget-title {
  color: var(--lpi-dorado) !important;
  font-family: var(--lpi-font-titulos) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8rem !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3) !important;
  padding-bottom: 10px !important;
}
.site-info {
  background-color: var(--lpi-azul-noche) !important;
  color: var(--lpi-plata) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
  font-size: 0.8rem !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .lpi-hero .wp-block-cover__inner-container { padding: 48px 20px; }
  .lpi-trust-bar .wp-block-column + .wp-block-column::before { display: none; }
  .lpi-sectors .wp-block-columns,
  .lpi-brands .wp-block-columns { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
}