/* ============================================================
   KIRIA · TOKENS
   ------------------------------------------------------------
   Colores, tipografías y tamaños de toda la web.
   Cambia un valor aquí y cambia en todas las páginas.

   Los NOMBRES de los tokens son los mismos de siempre, solo
   cambian los valores. Por eso el resto del CSS sigue
   funcionando sin tocar una línea.
   ============================================================ */

:root{

  /* --- El lienzo ---
     El crema deja de ser el fondo de todo y pasa a ser una
     banda de sección ocasional. Sobre blanco, las fotos de
     producto se leen más cálidas, no menos: la calidez se
     percibe por contraste. */
  --kiria-papel:      #FFFFFF;   /* fondo de página, los dos mundos */
  --kiria-hueso:      #FAF7F2;   /* banda alterna, apenas cálida */
  --kiria-crema:      #F7F0E6;   /* banda de acento, uso puntual */
  --kiria-arcilla:    #EBDCCA;   /* acento cálido, uso puntual */
  --kiria-tierra:     #241A11;   /* bandas oscuras, barra y pie */

  /* --- Texto --- */
  --kiria-carbon:     #1C1C1A;   /* texto principal */
  --kiria-carbon-suave:#6B6560;  /* texto secundario */
  --kiria-linea:      rgba(28,28,26,.12);

  /* --- Dorado ---
     El de marca para detalles. El de acción para botones con
     texto blanco: 5,31 de contraste, por encima del mínimo. */
  --kiria-oro:        #A89070;
  --kiria-oro-hondo:  #7E6847;
  --kiria-oro-accion: #7E6847;
  --kiria-oro-accion-hover:#6B5739;

  /* --- Las cinco familias de sensación ---
     Son los colores de las etiquetas de las ceras, y ahora
     también identifican cada categoría de la tienda.
     IMPORTANTE: funcionan como FONDO con texto oscuro encima
     (6,5 a 10,6 de contraste). Como texto sobre blanco no
     llegan ni a 2,7: nunca los uses para escribir. */
  --kiria-calma:      #C4B5D4;
  --kiria-arraigo:    #B89B7A;
  --kiria-activacion: #E8956A;
  --kiria-apertura:   #E8B4C4;
  --kiria-dulzura:    #E8C97A;

  /* Color de la categoría en la que estamos.
     Por defecto neutro; cada categoría lo redefine. */
  --kiria-familia:    var(--kiria-oro);

  /* --- Tipografías ---
     DM Serif Text tiene un solo peso y es de titular:
     solo encabezados, nunca párrafos.
     Montserrat lleva todo el texto. */
  --kiria-display: "DM Serif Text", Georgia, serif;
  --kiria-texto:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Medidas --- */
  --kiria-radio:   2px;
  --kiria-radio-boton: 2px;
  --kiria-medida:  34rem;   /* ancho cómodo de lectura */
}


/* ============================================================
   ESCALA TIPOGRÁFICA
   ------------------------------------------------------------
   El cuerpo sube de 17 a 18 px y el interlineado a 1.75.
   Ese aire entre líneas es la mitad de la sensación de limpio.
   ============================================================ */

html body{
  font-family: var(--kiria-texto) !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--kiria-carbon);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.woocommerce-loop-product__title,
.product_title,
.wp-block-heading{
  font-family: var(--kiria-display) !important;
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: -.015em;
}

h1, .page-title, .product_title{
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
}

h2{
  font-size: clamp(1.85rem, 4vw, 3rem);
}

h3, .woocommerce-loop-product__title{
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.25;
}

/* Los títulos van en mayúscula solo inicial.
   Kadence los pone en Mayúscula Inicial En Cada Palabra,
   que es una convención inglesa. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.woocommerce-loop-product__title,
.product_title,
.widget-title,
.wp-block-heading{
  text-transform: none !important;
}

/* Botones y elementos de acción: sin mayúsculas forzadas.
   Se leen mejor y ya no necesitan el recurso de las
   versalitas para destacar. */
.button,
.wp-block-button__link,
.kb-button,
.single_add_to_cart_button,
.checkout-button,
.kiria-puerta > a{
  font-family: var(--kiria-texto) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Menú y textos pequeños */
.main-navigation a,
.header-navigation a{
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 0;
}

.kiria-barra{
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Precio y datos de producto */
.woocommerce .price{
  font-size: 16.5px;
  font-weight: 500;
}

.kiria-datos-producto{
  font-size: 15px !important;
}