/*
Theme Name:   LIBROLEX
Theme URI:    https://librolex.cl
Description:  Tema hijo de Blocksy con la identidad de LIBROLEX — librería jurídica online. Papel crema, serif editorial y acento por materia.
Author:       Esencia Digital
Author URI:   https://librolex.cl
Template:     blocksy
Version:      1.0.0
Text Domain:  librolex
*/

/* ============================================================
   1. TOKENS DE MARCA
   ============================================================ */
:root {
  /* Colores extraídos del logo */
  --llx-naranja:      #E47635;
  --llx-naranja-osc:  #C55F23;
  --llx-tinta:        #16181A;
  --llx-tinta-suave:  #4A4E52;

  /* Papel — el mismo crema de las portadas */
  --llx-papel:        #F5F1E7;
  --llx-papel-claro:  #FBF9F4;
  --llx-blanco:       #FFFFFF;
  --llx-linea:        #DFD9CB;
  --llx-gris:         #7A756C;

  /* Acentos por materia (coinciden con el lomo de cada portada) */
  --llx-codigos:      #D96D24;
  --llx-civil:        #1F4B54;
  --llx-procesal:     #8A3324;
  --llx-penal:        #6B2020;
  --llx-familia:      #2C4A6B;
  --llx-laboral:      #3D6B3A;
  --llx-tributario:   #8A6A14;
  --llx-administrativo:#2F4159;
  --llx-comercial:    #4A3A6B;
  --llx-tech:         #15697A;
  --llx-forense:      #A34D14;
  --llx-inmobiliario: #3A5F3A;

  /* Tipografía */
  --llx-serif: 'Lora', 'Georgia', 'Times New Roman', serif;
  --llx-sans:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --llx-radio: 2px;   /* esquinas casi rectas: lenguaje editorial, no app */
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  background-color: var(--llx-papel);
  color: var(--llx-tinta);
  font-family: var(--llx-sans);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--llx-serif) !important;
  font-weight: 600;
  color: var(--llx-tinta);
  letter-spacing: -0.01em;
}

h1, .product_title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.2; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; }

a { color: var(--llx-tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--llx-naranja-osc); }

/* Rótulos de sección: versalitas espaciadas, como en las portadas */
.llx-rotulo {
  font-family: var(--llx-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--llx-naranja);
}

/* ============================================================
   3. CABECERA
   ============================================================ */
.ct-header [data-id="logo"] .site-logo-container img {
  max-height: 46px;
  width: auto;
}

header.ct-header {
  background: var(--llx-papel-claro);
  border-bottom: 1px solid var(--llx-linea);
}

/* Línea naranja fina bajo el header — firma de marca */
header.ct-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--llx-naranja);
}

.ct-header .menu > li > a {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   4. GRILLA DE PRODUCTOS
   ============================================================ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--llx-blanco);
  border: 1px solid var(--llx-linea);
  border-radius: var(--llx-radio);
  padding: 0 0 18px;
  transition: box-shadow .18s ease, transform .18s ease;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(22, 24, 26, .10);
}

/* La portada ocupa el ancho completo de la tarjeta, sin margen */
.woocommerce ul.products li.product img {
  border-radius: 0;
  margin-bottom: 14px;
  display: block;
  width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.98rem !important;
  line-height: 1.35;
  padding: 0 16px;
  margin-bottom: 6px;
  /* máximo 3 líneas para que la grilla no se desalinee */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.woocommerce ul.products li.product .price {
  padding: 0 16px;
  font-family: var(--llx-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--llx-tinta);
}

.woocommerce ul.products li.product .price del {
  font-weight: 400;
  font-size: .88rem;
  color: var(--llx-gris);
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--llx-naranja-osc);
}

/* Editorial sobre el título — se inyecta desde functions.php */
.llx-editorial {
  display: block;
  padding: 0 16px;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--llx-gris);
}

/* Distintivo de disponibilidad */
.llx-badge {
  display: inline-block;
  margin: 8px 16px 0;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--llx-naranja-osc);
  background: rgba(228, 118, 53, .10);
  border: 1px solid rgba(228, 118, 53, .28);
  border-radius: var(--llx-radio);
}

/* ============================================================
   5. COLOR POR MATERIA
   Barra superior en cada tarjeta, igual al lomo de la portada.
   ============================================================ */
.woocommerce ul.products li.product { border-top: 3px solid var(--llx-linea); }

li.product.product_cat-codigos-y-constitucion               { border-top-color: var(--llx-codigos); }
li.product.product_cat-derecho-civil                        { border-top-color: var(--llx-civil); }
li.product.product_cat-derecho-procesal                     { border-top-color: var(--llx-procesal); }
li.product.product_cat-derecho-penal-y-procesal-penal       { border-top-color: var(--llx-penal); }
li.product.product_cat-derecho-de-familia                   { border-top-color: var(--llx-familia); }
li.product.product_cat-derecho-laboral-y-seguridad-social   { border-top-color: var(--llx-laboral); }
li.product.product_cat-derecho-tributario-y-aduanero        { border-top-color: var(--llx-tributario); }
li.product.product_cat-derecho-administrativo-y-publico     { border-top-color: var(--llx-administrativo); }
li.product.product_cat-derecho-comercial-y-economico        { border-top-color: var(--llx-comercial); }
li.product.product_cat-tecnologia-datos-y-legaltech         { border-top-color: var(--llx-tech); }
li.product.product_cat-practica-forense-y-litigacion        { border-top-color: var(--llx-forense); }
li.product.product_cat-inmobiliario-ambiental-y-recursos-naturales { border-top-color: var(--llx-inmobiliario); }

/* ============================================================
   6. BOTONES
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
  background: var(--llx-tinta);
  color: var(--llx-papel-claro);
  font-family: var(--llx-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--llx-tinta);
  border-radius: var(--llx-radio);
  padding: 12px 22px;
  transition: background .16s ease, border-color .16s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--llx-naranja);
  border-color: var(--llx-naranja);
  color: #fff;
}

.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
  background: var(--llx-naranja);
  border-color: var(--llx-naranja);
  color: #fff;
}
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--llx-naranja-osc);
  border-color: var(--llx-naranja-osc);
}

/* ============================================================
   7. FICHA DE PRODUCTO
   ============================================================ */
.woocommerce div.product .product_title { margin-bottom: 10px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--llx-sans);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--llx-tinta);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--llx-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--llx-tinta-suave);
  padding-left: 16px;
  border-left: 3px solid var(--llx-naranja);
}

.woocommerce div.product .images img {
  border: 1px solid var(--llx-linea);
  border-radius: var(--llx-radio);
}

/* Tabla de atributos: Autor / Editorial / Año / Disponibilidad */
.woocommerce table.shop_attributes {
  border: 1px solid var(--llx-linea);
  background: var(--llx-blanco);
}
.woocommerce table.shop_attributes th {
  font-family: var(--llx-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--llx-gris);
  background: var(--llx-papel-claro);
  width: 34%;
}
.woocommerce table.shop_attributes td { font-style: normal; }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--llx-naranja-osc); }

/* ============================================================
   8. CATEGORÍAS Y NAVEGACIÓN DE TIENDA
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--llx-gris);
}

.woocommerce .products header.woocommerce-products-header__title,
.woocommerce-page .page-title {
  font-family: var(--llx-serif);
  border-bottom: 1px solid var(--llx-linea);
  padding-bottom: 14px;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: .84rem;
  color: var(--llx-tinta-suave);
}

/* ============================================================
   9. PIE
   ============================================================ */
footer.ct-footer {
  background: var(--llx-tinta);
  color: #C9C4BA;
  border-top: 3px solid var(--llx-naranja);
}
footer.ct-footer a { color: #C9C4BA; }
footer.ct-footer a:hover { color: var(--llx-naranja); }
footer.ct-footer h3, footer.ct-footer .widget-title {
  color: var(--llx-papel-claro);
  font-family: var(--llx-serif);
  font-size: 1rem;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9rem !important; }
  .woocommerce div.product p.price { font-size: 1.5rem; }
  .ct-header [data-id="logo"] .site-logo-container img { max-height: 34px; }
}