/*
Theme Name: FACTORY CAPILAR
Theme URI: https://factorycapilar.com/
Description: Tema hijo de Storefront con el sistema de diseño FACTORY CAPILAR (fase 2). Porta la paleta, tipografías y componentes de la web de fase 1 de Estudio Brío. Las plantillas de producto y catálogo se abordan en una iteración posterior, cuando exista el catálogo real.
Author: Estudio Brío
Author URI: https://estudiobrio.com
Template: storefront
Version: 0.3.0
Text Domain: systemfactory
*/

/* ==========================================================================
   FACTORY CAPILAR · Tema hijo — Sistema de diseño portado de la fase 1
   --------------------------------------------------------------------------
   Índice:
   1. Tipografías autoalojadas
   2. Variables del sistema de diseño (las mismas de la fase 1)
   3. Base: fondo, texto, enlaces, selección, foco
   4. Tipografía: titulares y cuerpo
   5. Botones
   6. Formularios
   7. Cabecera y navegación
   8. Pie de página
   9. Superficies y tarjetas genéricas
   10. Detalles WooCommerce transversales (avisos, badges, tablas)
   11. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TIPOGRAFÍAS AUTOALOJADAS (los mismos woff2 variables de la fase 1)
   ========================================================================== */

@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. VARIABLES DEL SISTEMA DE DISEÑO
   Idénticas a las de la fase 1 (assets/css/styles.css). Cambiar aquí un
   valor cambia toda la tienda. Documentación: README-TEMA.md
   ========================================================================== */

:root {
  /* Paleta clara. Los nombres dicen lo que contienen. Misma que la fase 1. */
  --fondo: #FFFFFF;            /* fondo principal de toda la tienda */
  --fondo-2: #F7F4EC;          /* superficies alternas (cabecera, bloques) */
  --fondo-3: #FCFBF7;          /* tarjetas y formularios */
  --acento: #A8802C;           /* dorado de la marca sobre fondo claro (AA) */
  --acento-claro: #C9A24B;     /* dorado del logotipo: degradados y detalles */
  --acento-oscuro: #7C5E1F;    /* dorado hundido: hovers y texto pequeño */
  --tinta: #14161A;            /* titulares y cuerpo (AA sobre claro) */
  --tinta-suave: #565B66;      /* texto secundario (AA sobre claro) */

  --f-titulo: 'Jost', 'Segoe UI', sans-serif;
  --f-cuerpo: 'Inter', 'Segoe UI', sans-serif;

  /* El degradado de botones arranca en #A9843A para mantener contraste AA
     del texto blanco en toda la superficie (igual que en fase 1) */
  --degradado-dorado: linear-gradient(100deg, var(--acento) 0%, var(--acento) 40%, var(--acento-claro) 60%, var(--acento) 100%);
  --linea-dorada: linear-gradient(90deg, rgba(168,128,44,0) 0%, var(--acento) 50%, rgba(168,128,44,0) 100%);
  --borde-sutil: 1px solid rgba(168, 128, 44, 0.3);

  --radio: 10px;
  --sombra: 0 18px 45px rgba(20, 22, 26, 0.12);
  --transicion: 0.25s ease;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

body,
body.woocommerce,
.site,
.site-content {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
}

a { color: var(--acento); transition: color var(--transicion); }
a:hover, a:focus { color: var(--acento-oscuro); }

::selection { background: var(--acento); color: var(--fondo); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--acento-claro);
  outline-offset: 3px;
}

hr {
  border: 0;
  height: 1px;
  background: var(--linea-dorada);
}

/* ==========================================================================
   4. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.alpha, .beta, .gamma, .delta {
  font-family: var(--f-titulo);
  font-weight: 500;
  color: var(--tinta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entry-title, .page-title { letter-spacing: 0.08em; }

p, li, td, th, dd, dt, label, .price {
  font-family: var(--f-cuerpo);
}

.site-content, .entry-content { color: var(--tinta); }

/* ==========================================================================
   5. BOTONES
   Cubre los tres sistemas de botón que conviven en WooCommerce/WordPress:
   clásicos (.button), bloques (.wp-element-button) y envíos de formulario.
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.added_to_cart,
.woocommerce #respond input#submit {
  font-family: var(--f-titulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--degradado-dorado);
  color: var(--fondo);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.button:hover, button:hover, input[type="submit"]:hover,
.wp-element-button:hover, .wp-block-button__link:hover,
.button:focus, input[type="submit"]:focus {
  background: var(--degradado-dorado);
  color: var(--fondo);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 162, 75, 0.35);
}

/* Botón principal de WooCommerce (alt): mismo dorado, sin variante gris */
.button.alt, .button.checkout, .single_add_to_cart_button {
  background: var(--degradado-dorado);
  color: var(--fondo);
}

/* Botón secundario "borde" — disponible con la clase .btn-borde */
.btn-borde, .button.btn-borde {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--acento);
}
.btn-borde:hover { background: rgba(168, 128, 44, 0.08); color: var(--acento-oscuro); }

/* ==========================================================================
   6. FORMULARIOS
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select,
.input-text {
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid rgba(20, 22, 26, 0.4);   /* 3:1 contraste no textual */
  border-radius: 4px;
  font-family: var(--f-cuerpo);
}

input:focus, textarea:focus, select:focus { border-color: var(--acento); }

::placeholder { color: rgba(86, 91, 102, 0.75); opacity: 1; }

label {
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--tinta);
}

fieldset, .woocommerce form.checkout, .woocommerce-billing-fields {
  border-color: rgba(168, 128, 44, 0.35);
}

/* ==========================================================================
   7. CABECERA Y NAVEGACIÓN
   ========================================================================== */

.site-header,
.storefront-handheld-footer-bar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: var(--borde-sutil);
}

.site-header .site-title a,
.site-header .site-title a:visited {
  font-family: var(--f-titulo);
  color: var(--tinta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-description { color: var(--tinta-suave); }

.main-navigation ul li a,
.secondary-navigation ul li a,
.site-header-cart .cart-contents,
.storefront-handheld-footer-bar a:not(.button) {
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--acento-oscuro); }

.main-navigation ul.menu > li > ul,
.main-navigation ul.nav-menu > li > ul {
  background: var(--fondo-2);
  border: var(--borde-sutil);
}

.storefront-breadcrumb { background: var(--fondo-2); border-bottom: var(--borde-sutil); }
.woocommerce-breadcrumb { color: var(--tinta-suave); }
.woocommerce-breadcrumb a { color: var(--acento); }

/* ==========================================================================
   8. PIE DE PÁGINA
   ========================================================================== */

.site-footer {
  background: var(--fondo-2);
  color: var(--tinta-suave);
  border-top: var(--borde-sutil);
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--acento);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
}
.site-footer a:not(.button) { color: var(--tinta-suave); }
.site-footer a:not(.button):hover { color: var(--acento-oscuro); }
.site-info { border-top: 1px solid rgba(20, 22, 26, 0.08); }

/* ==========================================================================
   9. SUPERFICIES Y TARJETAS GENÉRICAS
   ========================================================================== */

.hentry, .content-area .entry-content .wp-block-group,
.woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation,
#comments, .widget {
  color: var(--tinta);
}

.wp-block-group.has-background, .widget, .woocommerce-MyAccount-navigation ul {
  background: transparent;
}

/* Tarjeta genérica reutilizable (misma receta que las tarjetas de fase 1) */
.tarjeta-sf, .woocommerce-MyAccount-navigation ul {
  background: var(--fondo-3);
  border: var(--borde-sutil);
  border-radius: var(--radio);
}
.woocommerce-MyAccount-navigation ul li a { color: var(--tinta); font-family: var(--f-titulo); letter-spacing: 0.08em; }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--acento); }

/* ==========================================================================
   10. DETALLES WOOCOMMERCE TRANSVERSALES
   (avisos, precios, badges, tablas de carrito — no son plantillas de
   producto: son piezas globales que salen en toda la tienda)
   ========================================================================== */

.price, .woocommerce-Price-amount { color: var(--acento); font-weight: 600; }

.onsale {
  background: var(--degradado-dorado);
  color: var(--fondo);
  font-family: var(--f-titulo);
  letter-spacing: 0.1em;
  border-radius: 999px;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--fondo-3);
  color: var(--tinta);
  border: var(--borde-sutil);
  border-left: 3px solid var(--acento);
}
.woocommerce-error { border-left-color: #B3261E; }

.star-rating span::before, .star-rating::before { color: var(--acento); }

table, .shop_table {
  border-color: rgba(20, 22, 26, 0.12);
}
.shop_table th { color: var(--tinta); font-family: var(--f-titulo); letter-spacing: 0.08em; text-transform: uppercase; }
.shop_table td, .shop_table th { border-color: rgba(20, 22, 26, 0.1); }

.storefront-sorting, .woocommerce-result-count { color: var(--tinta-suave); }

/* ==========================================================================
   11. RESPONSIVE
   Storefront ya es responsive; aquí solo se corrigen los colores de sus
   piezas móviles para que no reaparezca el tema claro.
   ========================================================================== */

@media (max-width: 768px) {
  .storefront-handheld-footer-bar { background: var(--fondo-2); border-top: var(--borde-sutil); }
  .main-navigation ul.menu, .main-navigation ul.nav-menu { background: var(--fondo-2); }
  .storefront-primary-navigation { background: var(--fondo); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   12. TIENDA · TARJETAS DE PRODUCTO (listados y catálogo)
   ========================================================================== */

ul.products li.product {
  background: var(--fondo-3);
  border: var(--borde-sutil);
  border-radius: var(--radio);
  padding: 0 0 1.4rem;
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
  position: relative;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, 0.55);
  box-shadow: var(--sombra);
}
ul.products li.product img {
  margin-bottom: 1rem;
  border-bottom: var(--borde-sutil);
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 0 1.2rem;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Contenedor algo más ancho que el de serie de Storefront */
.col-full { max-width: 1280px; }

/* Sin flecha flotante de producto siguiente/anterior (rompe la estética) */
.storefront-product-pagination { display: none !important; }
ul.products li.product .price { padding: 0 1.2rem; display: block; }
ul.products li.product .button { margin: 0.8rem 1.2rem 0; }

/* Distintivos (mismo lenguaje que la fase 1) */
.sf-distintivo {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  font-family: var(--f-titulo);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--acento);
  color: var(--acento);
  background: rgba(255, 255, 255, 0.85);
}
.sf-distintivo--medida { border-color: var(--tinta-suave); color: var(--tinta); }
.single-product div.product > .sf-distintivo,
.summary .sf-distintivo { position: static; display: inline-block; margin-bottom: 0.8rem; }

/* ==========================================================================
   13. TIENDA · FICHA DE PRODUCTO
   ========================================================================== */

.single-product div.product .woocommerce-product-gallery {
  border: var(--borde-sutil);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-2);
}
.single-product div.product .product_title { font-size: 1.6rem; letter-spacing: 0.1em; }
.single-product div.product .summary .price { font-size: 1.35rem; }
.single-product div.product .summary del .woocommerce-Price-amount { color: var(--tinta-suave); font-weight: 400; }

/* Selector de variantes */
table.variations th.label { color: var(--acento); font-family: var(--f-titulo); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; }
table.variations select { min-width: 12rem; }
.reset_variations { color: var(--tinta-suave); font-size: 0.85rem; }
.woocommerce-variation-price { margin-bottom: 1rem; }

/* Pestañas Descripción / Ficha técnica */
.woocommerce-tabs ul.tabs li a { font-family: var(--f-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.woocommerce-tabs ul.tabs li.active a { color: var(--acento); }
.woocommerce-tabs .panel { color: var(--tinta); }
table.woocommerce-product-attributes th { color: var(--acento); font-family: var(--f-titulo); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; width: 10rem; }
table.woocommerce-product-attributes td { color: var(--tinta-suave); }
table.woocommerce-product-attributes th, table.woocommerce-product-attributes td { border-color: rgba(20, 22, 26, 0.1); }

/* Bloque «solo consulta» */
.sf-consulta {
  background: var(--fondo-3);
  border: 1px dashed rgba(201, 162, 75, 0.5);
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
  margin: 1.2rem 0;
}
.sf-consulta__nota { color: var(--tinta-suave); font-size: 0.92rem; margin-bottom: 1rem; }

/* Bloque profesional */
.sf-profesional {
  background: var(--fondo-3);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 0.9rem 1.2rem;
  margin: 1rem 0;
}
.sf-profesional__titulo {
  display: block;
  font-family: var(--f-titulo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}
.sf-profesional__detalle { color: var(--tinta-suave); font-size: 0.88rem; }
.sf-profesional--activo { border-left-color: #1F7A4D; }
.sf-profesional--activo .sf-profesional__titulo { color: #1F7A4D; }

/* ==========================================================================
   14. TIENDA · FILTROS LATERALES
   ========================================================================== */

.widget-area .widget { font-size: 0.92rem; }
.widget-area .widget h2.widget-title, .widget-area .widget .widget-title {
  font-size: 0.8rem;
  color: var(--acento);
  letter-spacing: 0.22em;
  border-bottom: 1px solid rgba(201, 162, 75, 0.25);
  padding-bottom: 0.6rem;
}
.widget_layered_nav ul li a, .widget_layered_nav_filters ul li a { color: var(--tinta-suave); }
.widget_layered_nav ul li.chosen a::before { color: var(--acento); }
.widget_layered_nav ul li a:hover { color: var(--acento-oscuro); }
.widget .count { color: var(--tinta-suave); opacity: 0.7; }

/* ==========================================================================
   15. TIENDA · CARRITO Y PAGO (componentes de bloques)
   ========================================================================== */

.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
  font-family: var(--f-titulo) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--degradado-dorado) !important;
  color: var(--fondo) !important;
  border-radius: 4px !important;
}
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-form .wc-block-components-select select {
  background: var(--fondo) !important;
  color: var(--tinta) !important;
  border-color: rgba(20, 22, 26, 0.4) !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label { color: var(--tinta-suave) !important; }
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--tinta); font-family: var(--f-titulo); letter-spacing: 0.08em; text-transform: uppercase; }
.wc-block-components-order-summary-item__description, .wc-block-components-product-name { color: var(--tinta); }
.wc-block-components-totals-item, .wc-block-components-totals-footer-item { color: var(--tinta); }
.wc-block-components-radio-control__label { color: var(--tinta); }
.wc-block-components-panel, .wc-block-components-sidebar .wc-block-components-panel__content { color: var(--tinta-suave); }
.wc-block-components-sale-badge { background: var(--degradado-dorado); color: var(--fondo); }

/* Confirmación de pedido */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  text-align: center;
  padding: 1.4rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--fondo-3);
}
/* El «recibo» de la confirmación por bloques tiene fondo BLANCO: texto oscuro */
ul.woocommerce-order-overview li { color: var(--tinta-suave); }
ul.woocommerce-order-overview li strong { color: var(--tinta); }
.wc-block-order-confirmation-summary * { color: var(--tinta); }
.wc-block-order-confirmation-summary .woocommerce-Price-amount { color: var(--acento); }

/* Carrito vacío */
.cart-empty.woocommerce-info, .wc-block-cart__empty-cart__title { color: var(--tinta); }
.sf-carrito-vacio { text-align: center; margin-top: 1.5rem; }

/* ==========================================================================
   16. TIENDA · ÁREA DE CLIENTE
   ========================================================================== */

.sf-panel-profesional {
  background: var(--fondo-3);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 1.6rem 1.8rem;
  margin: 1.4rem 0;
}
.sf-panel-profesional h3 { font-size: 1rem; letter-spacing: 0.16em; color: var(--acento); margin-bottom: 0.5rem; }
.sf-panel-profesional p { color: var(--tinta-suave); font-size: 0.92rem; }

/* ==========================================================================
   17. TIENDA · PÁGINA 404
   ========================================================================== */

.sf-404 .error-404 { text-align: center; padding: 4rem 1rem 5rem; }
.sf-404__codigo {
  font-family: var(--f-titulo);
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  background: var(--degradado-dorado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sf-404__titulo { margin-top: 0.4rem; }
.sf-404__texto { color: var(--tinta-suave); max-width: 460px; margin: 0.8rem auto 1.8rem; }
.sf-404__buscador { max-width: 380px; margin: 0 auto 1.6rem; }
.sf-404__salidas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   18. TIENDA · PORTADA (clases usadas por los bloques de la página de inicio)
   ========================================================================== */

.sf-hero-tienda {
  text-align: center;
  padding: 4.5rem 1.5rem;
  border-radius: var(--radio);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 162, 75, 0.13), transparent 70%),
    var(--fondo-2);
  border: var(--borde-sutil);
}
.sf-hueco {
  display: block;
  border: 1px dashed rgba(201, 162, 75, 0.5);
  border-radius: var(--radio);
  color: var(--acento-claro);
  background: rgba(201, 162, 75, 0.07);
  padding: 1.1rem 1.4rem;
  font-size: 0.9rem;
  text-align: center;
}
.sf-banda {
  background: var(--fondo-3);
  border: var(--borde-sutil);
  border-radius: var(--radio);
  padding: 2.2rem 2rem;
  text-align: center;
}
.sf-banda h3 { letter-spacing: 0.18em; }
.sf-banda p { color: var(--tinta-suave); }

/* La portada no muestra su propio título de página */
.home.page .entry-header, .home.page .entry-title { display: none; }

/* Tarjetas de colección de la portada */
.sf-coleccion {
  display: block;
  background: var(--fondo-3);
  border: var(--borde-sutil);
  border-radius: var(--radio);
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta);
  transition: transform var(--transicion), border-color var(--transicion);
}
.sf-coleccion:hover { transform: translateY(-4px); border-color: var(--acento); color: var(--acento-oscuro); }
.sf-coleccion small { display: block; margin-top: 0.5rem; font-family: var(--f-cuerpo); font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; color: var(--tinta-suave); }

/* Hueco marcado en línea (pie) */
.sf-hueco-inline { color: var(--acento-claro); border: 1px dashed rgba(201, 162, 75, 0.45); border-radius: 4px; padding: 0.1em 0.5em; font-size: 0.85em; }