/* ============================================================
KIRIA · LOS DOS MUNDOS
------------------------------------------------------------
Todo lo que separa el centro de la tienda cuelga de las
clases mundo-centro y mundo-tienda que pone functions.php
en la etiqueta .
ORDEN DEL ARCHIVO
1 · Lienzo y fondos
2 · Color de cada categoría
3 · Logo propio de la tienda
4 · Botones
5 · Barra de confianza y cabecera fija
6 · La cortina de cinco franjas
7 · Tienda: tarjetas de producto
8 · Tienda: ficha de producto
9 · Categorías: texto introductorio
10 · Páginas de relato
11 · Huecos de foto
12 · Cabecera: espaciado
13 · La cabecera fija, del color de su mundo
14 · Páginas del centro: servicios, puente, manifiesto
15 · Accesibilidad y movimiento
Los colores y tipografías NO están aquí:
viven en kiria-tokens.css
============================================================ */
/* Dorado de acción: el mismo tono de marca, más hondo, para
botones con texto blanco encima. El de marca (#A89070) da
3,05 de contraste y no llega al mínimo de 4,5. Este da 5,31.
Puedes moverlo a kiria-tokens.css si prefieres tenerlo todo
junto; funciona igual en los dos sitios. */
:root{
--kiria-oro-accion: #7E6847;
--kiria-oro-accion-hover: #6F5C3E;
}
/* ============================================================
1 · FONDOS DE CADA MUNDO
============================================================ */
body.mundo-centro,
body.mundo-tienda{
background-color: var(--kiria-papel);
}
/* La cabecera acompaña al fondo, sólida.
Estuvo un tiempo al 92% de opacidad y se veía translúcida
al principio de la página, antes de activarse la fija. */
body.mundo-centro .site-header,
body.mundo-centro #masthead,
body.mundo-tienda .site-header,
body.mundo-tienda #masthead{
background-color: var(--kiria-papel);
}
/* Sin cajas blancas flotando sobre el fondo arcilla */
body.mundo-tienda .content-bg,
body.mundo-tienda .entry-content-wrap,
body.mundo-tienda .content-area{
background-color: transparent;
}
/* ============================================================
2b · COLOR DE CADA CATEGORÍA
------------------------------------------------------------
Las cinco familias identifican también cada categoría.
WooCommerce pone en el una clase con el slug, y de
ahí lo cogemos. Colección Aromas no lleva un color sino los
cinco, porque los contiene todos.
COMPRUEBA LOS SLUGS en Productos → Categorías.
============================================================ */
body.term-velas-kiria { --kiria-familia: var(--kiria-arraigo); }
body.term-accesorios { --kiria-familia: var(--kiria-calma); }
body.term-packs { --kiria-familia: var(--kiria-dulzura); }
body.term-items-kiria { --kiria-familia: var(--kiria-activacion); }
body.term-aromas { --kiria-familia: var(--kiria-arraigo); }
/* Franja de color bajo el título de página o categoría.
Es el mismo gesto en toda la web, todas a la misma medida
para que se lea como un elemento de diseño fijo, no como
una casualidad del contenido de cada una.
- Página normal (Tienda, Carrito, Cómo lo hacemos...):
dorado de marca, discreto, dice "estás en la web".
- Categoría de producto: color de familia, dice en qué
categoría estás.
- Colección Aromas: las cinco familias, porque las
contiene todas. */
.entry-hero .entry-title::after,
.entry-hero h1.page-title::after{
content: "";
display: block;
width: 190px;
height: 4px;
margin-top: 22px;
background: var(--kiria-oro);
border-radius: 2px;
}
body.tax-product_cat h1.page-title::after{
background: var(--kiria-familia);
}
body.term-aromas h1.page-title::after{
background: linear-gradient(90deg,
var(--kiria-calma) 0 20%,
var(--kiria-arraigo) 20% 40%,
var(--kiria-activacion) 40% 60%,
var(--kiria-apertura) 60% 80%,
var(--kiria-dulzura) 80% 100%);
}
/* Bandas de sección. Se ponen desde el editor de WordPress,
en Avanzado -> clases CSS adicionales del bloque. */
.kiria-banda-hueso{ background-color: var(--kiria-hueso); }
.kiria-banda-crema{ background-color: var(--kiria-crema); }
.kiria-banda-oscura{
background-color: var(--kiria-tierra);
color: #EDE4D6;
}
.kiria-banda-oscura h1,
.kiria-banda-oscura h2,
.kiria-banda-oscura h3{ color: #F7F1E6; }
/* ============================================================
2 · LOGO PROPIO DE LA TIENDA
------------------------------------------------------------
El logo de Kiria Esencia está puesto como bloque HTML en la
cabecera, y ese bloque se pinta en toda la web. Aquí se
decide cuál de los dos se ve en cada mundo.
Cubre las dos cabeceras: la de escritorio y la móvil, que en
Kadence son elementos distintos.
============================================================ */
.kiria-solo-tienda{
display: none;
}
body.mundo-tienda .kiria-solo-tienda,
body.mundo-tienda #mobile-header .kiria-solo-tienda{
display: inline-block;
}
body.mundo-centro .kiria-solo-tienda,
body.mundo-centro #mobile-header .kiria-solo-tienda{
display: none !important;
}
body.mundo-tienda .site-branding,
body.mundo-tienda .custom-logo-link{
display: none !important;
}
/* ============================================================
3 · BOTONES DE CRUCE Y DORADO ÚNICO
------------------------------------------------------------
Kadence pintaba sus botones con #C39A5F, un dorado distinto
al de marca. Aquí se unifica todo.
============================================================ */
/* --- Botones principales, dorado sólido --- */
.button,
.wp-block-button__link,
.kb-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.wc-block-components-button,
.kiria-puerta > a{
background-color: var(--kiria-oro-accion) !important;
border-color: var(--kiria-oro-accion) !important;
color: #FFFFFF !important;
}
.button:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.kiria-puerta > a:hover{
background-color: var(--kiria-oro-accion-hover) !important;
border-color: var(--kiria-oro-accion-hover) !important;
}
/* --- El botón "Tienda" --- */
.kiria-puerta > a{
display: inline-block;
padding: 11px 22px;
border-radius: var(--kiria-radio-boton);
transition: background-color .3s ease, transform .3s ease;
}
.kiria-puerta > a:hover{
transform: translateY(-1px);
}
/* --- El botón "El centro" es secundario a propósito ---
Solo contorno, para no competir con el dorado sólido.
Hereda el color del texto de alrededor, así funciona igual
en la cabecera clara y en el cajón móvil oscuro. */
.kiria-puerta--volver > a{
background-color: transparent !important;
color: inherit !important;
border: 1px solid color-mix(in srgb, currentColor 38%, transparent) !important;
opacity: .9;
}
.kiria-puerta--volver > a:hover{
background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
opacity: 1;
}
/* --- Etiqueta de oferta --- */
.onsale,
span.onsale,
.woocommerce span.onsale{
background-color: var(--kiria-oro-accion) !important;
color: #FFFFFF !important;
}
/* --- Enlaces de texto --- */
.entry-content a:not(.button):not(.wp-block-button__link),
.kiria-relato a{
color: var(--kiria-oro-hondo);
}
/* ============================================================
4 · BARRA DE CONFIANZA Y CABECERA FIJA
------------------------------------------------------------
La barra se queda pegada arriba, y la cabecera fija de
Kadence cae justo debajo.
IMPORTANTE: la barra de confianza SOLO existe en la tienda.
Por eso cada mundo necesita su propio valor de "top":
· tienda → la cabecera baja para dejar sitio a la barra
· centro → la cabecera va pegada arriba del todo
Si se aplica el mismo valor a los dos, en el centro queda
un hueco transparente del grosor exacto de la barra, que
solo se ve estando en lo más alto de la página.
Los valores son fijos a propósito: Kadence calcula el hueco
contando la barra de administrador de WordPress, que solo
ve quien ha iniciado sesión.
============================================================ */
.kiria-barra{
background: var(--kiria-tierra);
color: #E9DFCE;
text-align: center;
padding: 9px 20px;
font-size: .72rem;
letter-spacing: .1em;
position: sticky;
top: 0;
z-index: 999;
}
/* --- Visitante normal --- */
body.mundo-tienda .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 37px !important;
}
body.mundo-centro .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 0 !important;
}
@media (max-width: 820px){
.kiria-barra{
font-size: .64rem;
letter-spacing: .06em;
padding: 8px 14px;
}
body.mundo-tienda .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 33px !important;
}
body.mundo-centro .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 0 !important;
}
}
/* --- Compensación de la barra negra de administrador --- */
body.admin-bar .kiria-barra{
top: 32px;
}
body.admin-bar.mundo-tienda .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 69px !important;
}
body.admin-bar.mundo-centro .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 32px !important;
}
@media (max-width: 782px){
body.admin-bar .kiria-barra{
top: 46px;
}
body.admin-bar.mundo-tienda .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 79px !important;
}
body.admin-bar.mundo-centro .site-header-inner-wrap.kadence-sticky-header.item-is-fixed{
top: 46px !important;
}
}
/* ============================================================
5 · LA CORTINA DE CINCO FRANJAS
------------------------------------------------------------
La animación al cruzar de mundo. Va en dos tiempos porque
hay recarga de página: al salir tapa, al entrar se retira.
Los colores son las cinco familias de sensación.
============================================================ */
.kiria-paso{
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
pointer-events: none;
}
.kiria-paso span{
flex: 1;
transform: scaleY(0);
transform-origin: bottom;
}
.kiria-paso span:nth-child(1){ background: var(--kiria-calma); }
.kiria-paso span:nth-child(2){ background: var(--kiria-arraigo); }
.kiria-paso span:nth-child(3){ background: var(--kiria-activacion); }
.kiria-paso span:nth-child(4){ background: var(--kiria-dulzura); }
.kiria-paso span:nth-child(5){ background: var(--kiria-apertura); }
.kiria-paso.saliendo span{
animation: kiria-subir .5s cubic-bezier(.76,0,.24,1) forwards;
}
.kiria-paso.saliendo span:nth-child(2){ animation-delay: .05s; }
.kiria-paso.saliendo span:nth-child(3){ animation-delay: .10s; }
.kiria-paso.saliendo span:nth-child(4){ animation-delay: .15s; }
.kiria-paso.saliendo span:nth-child(5){ animation-delay: .20s; }
@keyframes kiria-subir{
from{ transform: scaleY(0); transform-origin: bottom; }
to { transform: scaleY(1); transform-origin: bottom; }
}
.kiria-paso.entrando span{
transform: scaleY(1);
transform-origin: top;
animation: kiria-retirar .55s cubic-bezier(.76,0,.24,1) forwards;
}
.kiria-paso.entrando span:nth-child(2){ animation-delay: .05s; }
.kiria-paso.entrando span:nth-child(3){ animation-delay: .10s; }
.kiria-paso.entrando span:nth-child(4){ animation-delay: .15s; }
.kiria-paso.entrando span:nth-child(5){ animation-delay: .20s; }
@keyframes kiria-retirar{
from{ transform: scaleY(1); transform-origin: top; }
to { transform: scaleY(0); transform-origin: top; }
}
/* ============================================================
6 · TIENDA · TARJETAS DE PRODUCTO
------------------------------------------------------------
Kadence escondía el botón de añadir hasta pasar el ratón.
En pantalla táctil eso significa que no existe.
============================================================ */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap{
opacity: 1 !important;
visibility: visible !important;
position: static !important;
transform: none !important;
pointer-events: auto !important;
}
/* JERARQUÍA VISUAL
En el listado hay 16 botones a la vez. Si los 16 van en
dorado sólido, la página se llena de manchas y ninguno
destaca. Aquí van en contorno, y el dorado sólido se
reserva para el botón de la ficha, que es donde se compra.
¿Los quieres sólidos como estaban? Borra este bloque
entero y volverán al dorado de la sección 3. */
.woocommerce ul.products li.product .button{
display: block;
width: 100%;
min-height: 44px;
margin-top: 12px;
border-radius: var(--kiria-radio-boton);
background-color: transparent !important;
border: 1px solid rgba(45,45,45,.24) !important;
color: var(--kiria-carbon) !important;
}
.woocommerce ul.products li.product .button:hover{
background-color: var(--kiria-oro-accion) !important;
border-color: var(--kiria-oro-accion) !important;
color: #FFFFFF !important;
}
/* Línea de datos que añade el bloque 12 de functions.php:
aroma, peso o material. Sin esto, dos productos parecidos
al mismo precio son indistinguibles en el listado. */
.kiria-datos-producto{
display: block;
font-size: .78rem;
line-height: 1.5;
color: var(--kiria-carbon-suave);
margin: 4px 0 8px;
letter-spacing: .01em;
}
/* ============================================================
7 · TIENDA · FICHA DE PRODUCTO
============================================================ */
/* El SKU estaba en gris #989898: contraste 2,88, ilegible. */
.product_meta,
.product_meta a,
.sku_wrapper,
.posted_in,
.tagged_as{
color: var(--kiria-carbon-suave);
font-size: .82rem;
line-height: 1.7;
}
.product_meta a:hover{
color: var(--kiria-oro-hondo);
}
/* Las etiquetas ocupaban más espacio que la descripción */
.tagged_as{
display: block;
margin-top: 10px;
font-size: .75rem;
opacity: .75;
}
/* Bloque de garantías que añade el bloque 14 de functions.php */
.kiria-garantias-ficha{
margin: 26px 0 0;
padding: 20px 22px;
border-left: 3px solid var(--kiria-familia);
background: var(--kiria-hueso);
}
.kiria-garantias-ficha p{
margin: 0 0 10px;
font-size: .87rem;
line-height: 1.6;
color: var(--kiria-carbon-suave);
}
.kiria-garantias-ficha p:last-child{
margin-bottom: 0;
}
.kiria-garantias-ficha strong{
color: var(--kiria-carbon);
font-weight: 400;
}
/* ============================================================
8 · CATEGORÍAS · TEXTO INTRODUCTORIO
------------------------------------------------------------
Kadence lo pinta encima de la foto de cabecera, donde no se
lee. Lo escondemos ahí y el bloque 11 de functions.php lo
vuelve a imprimir justo antes de los productos.
============================================================ */
.entry-hero .archive-description{
display: none;
}
.kiria-intro-categoria{
max-width: 62ch;
margin: 0 0 44px;
}
.kiria-intro-categoria p{
font-size: 1.02rem;
line-height: 1.7;
color: var(--kiria-carbon-suave);
margin-bottom: 14px;
}
.kiria-intro-categoria p:last-child{
margin-bottom: 0;
}
/* ============================================================
9 · PÁGINAS DE RELATO
------------------------------------------------------------
Se usa envolviendo el contenido en:
…
Sirve para "Cómo lo hacemos" y para las páginas legales.
============================================================ */
.kiria-relato{
max-width: 66ch;
margin: 0 auto;
}
.kiria-relato h2{
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
margin: 68px 0 24px;
padding-top: 30px;
border-top: 1px solid var(--kiria-linea);
}
.kiria-relato h2:first-child{
margin-top: 0;
padding-top: 0;
border-top: none;
}
.kiria-relato h3{
font-size: 1.28rem;
margin: 36px 0 14px;
}
.kiria-relato p{
font-size: 1.06rem;
line-height: 1.75;
margin-bottom: 20px;
}
.kiria-relato ul,
.kiria-relato ol{
margin: 0 0 22px 22px;
}
.kiria-relato li{
margin-bottom: 9px;
line-height: 1.7;
}
/* El primer párrafo entra con más peso */
.kiria-relato h2:first-child + p{
font-family: var(--kiria-display);
font-size: 1.34rem;
line-height: 1.5;
color: var(--kiria-carbon);
}
/* Frase destacada */
.kiria-relato blockquote{
border: 0;
margin: 52px 0;
padding: 0;
}
.kiria-relato blockquote p{
font-family: var(--kiria-display);
font-size: clamp(1.5rem, 3vw, 2.1rem);
line-height: 1.25;
color: var(--kiria-oro-hondo);
margin: 0;
}
/* La firma */
.kiria-relato > p:last-child{
font-family: var(--kiria-display);
font-style: italic;
font-size: 1.2rem;
color: var(--kiria-oro-hondo);
margin-top: 44px;
}
@media (max-width: 820px){
.kiria-relato h2{ margin-top: 52px; }
}
/* Política de cookies: Complianz genera el texto al vuelo y no
se le puede poner la clase desde el editor, así que se le da
el mismo tratamiento apuntando a su propio contenedor. */
.cmplz-document{
max-width: 66ch;
margin: 0 auto;
}
.cmplz-document h2{
font-family: var(--kiria-display);
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2.1rem);
margin: 52px 0 18px;
padding-top: 26px;
border-top: 1px solid var(--kiria-linea);
}
.cmplz-document h3{
font-family: var(--kiria-display);
font-weight: 300;
font-size: 1.28rem;
margin: 32px 0 12px;
}
.cmplz-document p,
.cmplz-document li{
font-size: 1.02rem;
line-height: 1.7;
}
.cmplz-document p{
margin-bottom: 16px;
}
.cmplz-document a{
color: var(--kiria-oro-hondo);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
10 · HUECOS DE FOTO
------------------------------------------------------------
Marcos con la proporción exacta de cada foto, para diseñar
antes de tenerlas. Cuando llegue la foto, se cambia el div
de la etiqueta por un ![]()
y el marco se queda igual.
============================================================ */
.kiria-foto{
position: relative;
border-radius: var(--kiria-radio);
overflow: hidden;
margin: 40px 0;
background: repeating-linear-gradient(135deg,#D9C6A8,#D9C6A8 14px,#CDB794 14px,#CDB794 28px);
display: flex;
align-items: center;
justify-content: center;
}
.kiria-foto img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kiria-foto-etq{
background: rgba(41,28,14,.85);
color: #F7EFE0;
text-align: center;
padding: 10px 18px;
border-radius: 3px;
font-size: .8rem;
line-height: 1.5;
}
.kiria-foto-etq b{
display: block;
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--kiria-oro);
margin-bottom: 4px;
}
.kiria-foto--ancha{ aspect-ratio: 16/9; }
.kiria-foto--vertical{ aspect-ratio: 3/4; }
.kiria-tira-fotos{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin: 40px 0;
}
.kiria-tira-fotos .kiria-foto{
margin: 0;
aspect-ratio: 1/1;
}
.kiria-retrato-cierre{
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 40px;
align-items: center;
margin-top: 20px;
}
.kiria-retrato-cierre .kiria-foto{
margin: 0;
aspect-ratio: 4/5;
}
@media (max-width: 700px){
.kiria-tira-fotos{ grid-template-columns: 1fr 1fr; }
.kiria-retrato-cierre{ grid-template-columns: 1fr; }
}
/* ============================================================
11 · CABECERA · ESPACIADO
============================================================ */
.site-header .site-branding,
.site-header .header-html{
margin-right: 18px;
}
/* Por debajo de 1100 px el menú no cabe con los iconos
sociales. Están también en el pie y en Contacto. */
@media (max-width: 1100px){
.header-social-wrap{
display: none;
}
}
@media (max-width: 820px){
body{ overflow-x: hidden; }
}
/* ============================================================
14 · PÁGINAS DEL CENTRO: SERVICIOS, PUENTE, MANIFIESTO
------------------------------------------------------------
Piezas reutilizables para reconstruir la home, Sobre
nosotros y Lo que hacemos con el lenguaje nuevo. Se pegan
como bloques de HTML personalizado desde el editor.
============================================================ */
/* --- Lista editorial de servicios ---
Sustituye a las cuatro tarjetas cuadradas. Una lista con
reglas se lee como un índice, no como catálogo, y de paso
deja sitio para decir precio y duración. */
.kiria-servicios{
border-top: 1px solid var(--kiria-linea);
margin-top: 44px;
}
.kiria-servicio{
display: grid;
grid-template-columns: minmax(0,18rem) 1fr auto;
gap: 28px;
align-items: baseline;
padding: 32px 0;
border-bottom: 1px solid var(--kiria-linea);
}
.kiria-servicio h3{
margin: 0;
}
.kiria-servicio p{
font-size: 17px;
color: var(--kiria-carbon-suave);
margin: 0;
}
.kiria-servicio .kiria-dato{
font-size: 14.5px;
color: var(--kiria-oro-hondo);
white-space: nowrap;
font-weight: 500;
}
@media (max-width: 780px){
.kiria-servicio{
grid-template-columns: 1fr;
gap: 8px;
padding: 26px 0;
}
.kiria-servicio .kiria-dato{
margin-top: 2px;
}
}
/* --- Manifiesto en banda oscura --- */
.kiria-manifiesto{
text-align: center;
}
.kiria-manifiesto p{
font-family: var(--kiria-display);
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
line-height: 1.3;
color: #F7F1E6;
max-width: 22ch;
margin: 0 auto;
}
.kiria-firma-color{
display: flex;
gap: 6px;
justify-content: center;
margin-top: 40px;
}
.kiria-firma-color i{
width: 40px;
height: 3px;
border-radius: 2px;
display: block;
}
/* --- Puente partido: foto + texto, a partes iguales --- */
.kiria-split{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(30px, 5vw, 76px);
}
@media (max-width: 900px){
.kiria-split{
grid-template-columns: 1fr;
}
}
/* --- Contenedor y separación estándar, para un bloque de
HTML personalizado que no hereda ya el del tema --- */
.kiria-wrap{
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(22px, 5vw, 72px);
}
.kiria-seccion{
padding: clamp(64px, 9vw, 130px) 0;
}
/* ============================================================
16 · PORTAL DE CATEGORÍAS
------------------------------------------------------------
/tienda deja de ser el listado de WooCommerce y pasa a ser
un portal: tarjetas grandes, una por categoría madre, cada
una con su color de familia y su resumen. El listado real
de productos sigue viviendo en /tienda/productos.
============================================================ */
.kiria-portal-cats{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 2.2vw, 26px);
margin-top: 56px;
}
.kiria-portal-cat{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
text-align: left;
background: var(--kiria-papel);
border: 1px solid var(--kiria-linea);
overflow: hidden;
transition: border-color .3s ease, transform .3s ease;
}
.kiria-portal-cat:hover{
border-color: var(--kiria-familia-cat, var(--kiria-oro));
transform: translateY(-3px);
}
.kiria-portal-cat .kiria-espina{
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--kiria-familia-cat, var(--kiria-oro));
z-index: 2;
}
.kiria-portal-cat .kiria-foto{
margin: 0;
aspect-ratio: 4/3;
}
.kiria-portal-cat-txt{
padding: 24px 26px 28px 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.kiria-portal-cat-txt h3{
margin-bottom: 8px;
}
.kiria-portal-cat-txt p{
font-size: 15.5px;
color: var(--kiria-carbon-suave);
margin: 0;
}
.kiria-portal-cat-hijas{
font-size: 13.5px;
color: var(--kiria-oro-hondo);
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--kiria-linea);
line-height: 1.6;
}
.kiria-portal-cat-n{
font-size: 13px;
color: var(--kiria-carbon-suave);
margin-top: auto;
padding-top: 14px;
}
/* Colección Aromas lleva el degradado de las cinco familias */
.kiria-portal-cat--aromas .kiria-espina{
background: linear-gradient(180deg,
var(--kiria-calma) 0 20%,
var(--kiria-arraigo) 20% 40%,
var(--kiria-activacion) 40% 60%,
var(--kiria-apertura) 60% 80%,
var(--kiria-dulzura) 80% 100%);
}
/* --- Cruce hacia servicios, al pie del portal --- */
.kiria-cruce{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 40px;
}
.kiria-cruce a{
display: block;
background: var(--kiria-hueso);
padding: 32px 30px 34px;
transition: background-color .3s ease;
}
.kiria-cruce a:hover{
background: var(--kiria-crema);
}
.kiria-cruce h3{
margin: 10px 0 8px;
}
.kiria-cruce p{
font-size: 15.5px;
color: var(--kiria-carbon-suave);
margin: 0;
}
.kiria-cruce .kiria-flecha{
display: block;
margin-top: 16px;
font-size: 14px;
color: var(--kiria-oro-hondo);
font-weight: 500;
}
@media (max-width: 780px){
.kiria-cruce{ grid-template-columns: 1fr; }
}
/* --- Franja de garantías, al pie del portal --- */
.kiria-garantias-portal{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
text-align: center;
}
.kiria-garantias-portal h3{
font-size: 1.05rem;
margin-bottom: 8px;
}
.kiria-garantias-portal p{
font-size: 15px;
color: var(--kiria-carbon-suave);
margin: 0;
}
/* ============================================================
17 · FILTROS DE SUBCATEGORÍA
------------------------------------------------------------
Se usan dentro de la página de una categoría, entre el texto
introductorio y la rejilla de productos.
============================================================ */
.kiria-filtros{
margin-top: 36px;
}
.kiria-filtros .kiria-filtros-et{
display: block;
font-size: 13px;
color: var(--kiria-oro-hondo);
margin-bottom: 12px;
font-weight: 500;
}
.kiria-chips{
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.kiria-chip{
font-size: 14.5px;
padding: 10px 20px;
border: 1px solid var(--kiria-linea);
color: var(--kiria-carbon-suave);
background: var(--kiria-papel);
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.kiria-chip:hover{
border-color: var(--kiria-familia, var(--kiria-oro));
}
.kiria-chip.kiria-chip-on{
background: var(--kiria-carbon);
border-color: var(--kiria-carbon);
color: var(--kiria-papel);
}
/* Los bloques del portal son enlaces enteros (la tarjeta,
el cruce a servicios). Sin esto, el navegador subraya por
defecto cualquier texto dentro de un . */
.kiria-portal-cat,
.kiria-portal-cat *,
.kiria-cruce a,
.kiria-cruce a *{
text-decoration: none !important;
}
/* ============================================================
17 · PIE DE MARCA
------------------------------------------------------------
Fila que se añade justo encima del pie legal que ya
funciona (menú de Apariencia → Menús → Pie de página).
No lo sustituye: se pone delante, con el mismo fondo
oscuro, para que se lea como un único pie más completo.
============================================================ */
.kiria-pie-marca{
background: var(--kiria-tierra);
color: #EDE4D6;
padding: 60px 0 36px;
}
.kiria-pie-marca-in{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: space-between;
align-items: flex-start;
}
.kiria-pie-marca-nombre{
font-family: var(--kiria-display);
font-size: 1.5rem;
color: #F7F1E6;
line-height: 1;
}
.kiria-pie-marca-nombre small{
display: block;
font-family: var(--kiria-texto);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .14em;
color: var(--kiria-oro);
margin-top: 8px;
}
.kiria-pie-marca-tagline{
font-size: 13.5px;
color: rgba(237,228,214,.55);
margin-top: 16px;
}
.kiria-pie-marca-nav ul{
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 22px;
margin: 0;
padding: 0;
}
.kiria-pie-marca-nav a{
font-size: 15px;
color: #EDE4D6;
text-decoration: none;
}
.kiria-pie-marca-nav a:hover{
color: var(--kiria-oro-hondo);
}
/* --- Hero a sangre ---
Ocupa todo el ancho de la ventana aunque esté dentro del
contenedor del tema. El texto va abajo a la izquierda, no
centrado: se lee antes y deja la foto respirar arriba.
La foto se pone en el style del propio bloque HTML, así
puedes cambiarla desde el editor sin tocar el CSS. */
.kiria-hero{
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
min-height: min(86vh, 760px);
display: flex;
align-items: flex-end;
background-color: #3A2A1C;
background-size: cover;
background-position: center;
overflow: hidden;
}
.kiria-hero::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(36,26,17,.15), rgba(36,26,17,.72));
}
.kiria-hero-in{
position: relative;
z-index: 2;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(22px,5vw,72px) clamp(52px,8vw,96px);
}
.kiria-hero h1{
color: #FFFFFF;
max-width: 16ch;
}
.kiria-hero p{
color: rgba(255,255,255,.88);
max-width: 30rem;
margin-top: 24px;
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.6;
}
.kiria-hero-botones{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 36px;
}
/* Botón secundario sobre foto: contorno blanco */
.kiria-hero .kiria-btn-linea{
background-color: transparent !important;
border: 1px solid rgba(255,255,255,.7) !important;
color: #FFFFFF !important;
}
.kiria-hero .kiria-btn-linea:hover{
background-color: #FFFFFF !important;
border-color: #FFFFFF !important;
color: var(--kiria-carbon) !important;
}
@media (max-width: 780px){
.kiria-hero{
min-height: min(78vh, 560px);
}
.kiria-hero-botones .button{
width: 100%;
text-align: center;
}
}
/* --- Grises heredados de la paleta de Kadence ---
Quedaban dos colores del diseño anterior metidos en varias
secciones desde el editor: #F5F5F5 y #EBE8E5. No pertenecen
a la paleta nueva y son lo que hacía que la home no acabara
de cuadrar con el resto.
En vez de ir sección por sección en el editor, se remapean
aquí las dos entradas de paleta. Así se corrigen de golpe
en todas las páginas que las usen. */
.has-theme-palette8-background-color{
background-color: var(--kiria-hueso) !important;
}
.has-theme-palette7-background-color{
background-color: var(--kiria-papel) !important;
}
/* ============================================================
16 · CUANDO LA PÁGINA TERMINA EN BANDA OSCURA
------------------------------------------------------------
Kadence deja aire después del contenido, pensado para
cuando la última pieza no llega al borde. Si la última
pieza es una banda oscura a sangre completa, ese aire se
ve como un hueco crema entre dos fondos oscuros.
Esto quita el aire SOLO cuando la banda oscura es
literalmente lo último de la página.
============================================================ */
.entry-content:has(> .kiria-banda-oscura:last-child) .kiria-banda-oscura:last-child{
padding-bottom: 0;
margin-bottom: -32px;
}
.content-area:has(.kiria-banda-oscura:last-child){
margin-bottom: 0 !important;
}
/* ============================================================
17 · LAS BANDAS, A SANGRE COMPLETA
------------------------------------------------------------
Kadence mete el contenido de la página dentro de un
contenedor con ancho máximo. El hero ya rompía ese límite;
estas tres clases se quedaron sin el mismo tratamiento, y
por eso se veían encajonadas con márgenes blancos a los
lados en pantallas anchas.
============================================================ */
.kiria-banda-hueso,
.kiria-banda-crema,
.kiria-banda-oscura{
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* ============================================================
18 · ENLACES LEGALES Y COPYRIGHT, EN EL PIE DE MARCA
------------------------------------------------------------
Antes vivían en el menú "Pie de página" de WordPress, en su
propio bloque, con otro estilo y otro ancho. Ahora se
generan aquí dentro, con la misma tipografía y el mismo
ancho que el resto del pie: un solo sitio, no puede
descuadrarse entre dos.
============================================================ */
.kiria-pie-legal{
border-top: 1px solid rgba(237,228,214,.12);
margin-top: 44px;
padding-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 20px 26px;
justify-content: space-between;
align-items: center;
}
.kiria-pie-legal-enlaces{
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.kiria-pie-legal-enlaces a{
font-size: 13.5px;
color: rgba(237,228,214,.6);
}
.kiria-pie-legal-enlaces a:hover{
color: var(--kiria-oro);
}
.kiria-pie-legal-copy{
font-size: 13px;
color: rgba(237,228,214,.45);
white-space: nowrap;
}
@media (max-width: 700px){
.kiria-pie-legal{
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
19 · ACCESIBILIDAD Y MOVIMIENTO
============================================================ */
@media (prefers-reduced-motion: reduce){
.kiria-paso{ display: none !important; }
*,
*::before,
*::after{
animation-duration: .001s !important;
transition-duration: .001s !important;
}
}