/**
* Un-MAJU — CSS MÍNIMO.
*
* PRINCIPIO: integración nativa con Elementor. Colores, fuentes, tamaños,
* espacios y animaciones se definen DENTRO de Elementor:
* - Paleta y fuentes: Elementor > Ajustes del sitio > Colores/Fuentes globales.
* - Estilo por bloque: pestaña "Estilo" de cada widget.
* - Espaciado: margin/padding de cada widget/contenedor.
* - Animaciones: Avanzado > Efectos en movimiento > Animación de entrada.
*
* Aquí solo vive lo que Elementor NO puede hacer de forma nativa. Cada regla
* indica la CLASE que debe llevar el widget (Avanzado > Clases CSS).
*/
:root {
--um-gold: #b89455;
--um-gold-light: #d4b27a;
--um-green: #7a9a7a;
--um-green-light: #a8c8a8;
--um-purple: #7a7a9a;
--um-purple-light: #a8a8c8;
--um-black: #080808;
--um-white: #f2f0eb;
--um-gray-light: #c8c4bc;
}
/* 1) TEXTO CON CONTORNO (outline). Clase de widget: um-outline
Elementor no expone -webkit-text-stroke de forma nativa. */
.um-outline .elementor-heading-title {
color: transparent !important;
-webkit-text-stroke: 1px rgba(255, 255, 255, .22);
}
/* 2) CURSOR PERSONALIZADO (no existe en Elementor).
Lo activa custom.js añadiendo .um-cursor-on al
(solo en puntero fino y sin prefers-reduced-motion). */
@media (hover: hover) and (pointer: fine) {
body.um-cursor-on,
body.um-cursor-on a,
body.um-cursor-on button { cursor: none; }
}
.um-cursor {
position: fixed; top: 0; left: 0; width: 6px; height: 6px;
border-radius: 50%; background: var(--um-gold);
pointer-events: none; z-index: 9999; display: none;
}
.um-cursor-ring {
position: fixed; top: 0; left: 0; width: 28px; height: 28px;
border: 1px solid var(--um-gold); border-radius: 50%;
pointer-events: none; z-index: 9998; opacity: .5;
transition: width .3s, height .3s, opacity .3s; display: none;
}
body.um-cursor-on .um-cursor,
body.um-cursor-on .um-cursor-ring { display: block; }
/* 3) CABECERA: fondo sólido al hacer scroll.
El header (plantilla de Elementor) es "sticky" NATIVO; Elementor añade la clase
.elementor-sticky--effects al hacer scroll. Aquí solo definimos el fondo de ese
estado (un cambio de fondo por scroll no es configurable de forma nativa). */
.elementor-location-header .elementor-sticky--effects {
background: rgba(8, 8, 8, .96) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(184, 148, 85, .12);
}
/* 3b) CABECERA MÓVIL/TABLET: el desplegable de la hamburguesa se superpone a
todo el ancho DEBAJO de la cabecera, sin empujar el contenido.
El desplegable de Elementor ya es position:absolute, pero se anclaba al
widget del menú (pequeño y a la derecha), por lo que abría descolocado/empujando.
Lo anclamos al contenedor de la cabecera (.e-con, que es position:relative) y lo
estiramos a todo el ancho. Solo afecta a ≤1024px (donde aparece la hamburguesa);
en escritorio el menú es horizontal y no usa este desplegable. */
@media (max-width: 1024px) {
/* el widget del menú deja de ser el ancla del desplegable */
.elementor-location-header .elementor-widget-nav-menu {
position: static;
}
/* El desplegable de Elementor SOLO es position:absolute si el widget tiene la
clase --stretch (opción "Stretch"), que aquí NO está activa. Por eso en móvil
era estático: empujaba el contenido hacia abajo y su ancho se limitaba al
widget (estrecho), recortando "COLECCIÓN". Lo forzamos a overlay absoluto a
todo el ancho del header, justo debajo. */
.elementor-location-header .elementor-nav-menu--dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
/* items a todo el ancho, centrados y sin recortar */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
white-space: normal;
text-align: center;
}
}
/* 4) MARCOS DE GALERÍA POR SERIE (rejilla de productos). Clase del widget Products: um-products
No es posible por widget porque depende de la CATEGORÍA de cada producto;
se usan las clases que WooCommerce añade a cada (product_cat-*). */
.um-products ul.products li.product {
position: relative;
background: var(--um-black);
padding: 1.4rem 1.4rem 1.6rem;
text-align: center;
transition: box-shadow .4s, transform .4s;
}
/* Título de la obra: la rejilla usa el shortcode [products] (no el widget
Products), por lo que su título no es estilizable desde la pestaña Estilo.
Lo igualamos al ".atitle" de la plantilla (Cormorant itálica). */
.um-products li.product .woocommerce-loop-product__title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 1.5rem;
line-height: 1.1;
color: var(--um-white);
padding: .2rem 0 .4rem;
}
/* Precio. */
.um-products li.product .price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; display: block; margin-bottom: 1.2rem; color: var(--um-gold-light); }
/* Botón "Ver colección": dentro del marco, centrado y separado de la línea inferior. */
.um-products li.product .button {
display: inline-block;
text-align: center !important;
margin: .2rem 0 .3rem;
border: 1px solid rgba(255, 255, 255, .18) !important;
background: transparent !important;
color: var(--um-white) !important;
padding: .7rem 1.5rem !important;
font-family: 'Montserrat', sans-serif !important;
font-size: .6rem !important;
letter-spacing: .25em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
transition: all .3s !important;
}
.um-products li.product .button:hover { border-color: var(--um-gold) !important; color: var(--um-gold) !important; }
/* Marco POR SERIE (según la leyenda): Gallery=dorado, Limitada=verde,
Permanente=índigo. El color se decide por la categoría de cada producto,
usando las clases product_cat-* que WooCommerce añade a cada .
Por defecto (sin serie reconocida) = dorado. */
.um-products ul.products li.product { border: 2px solid var(--um-gold); box-shadow: 0 0 0 1px rgba(184,148,85,.12), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(184,148,85,.22); }
.um-products ul.products li.product:hover { box-shadow: 0 0 0 1px rgba(184,148,85,.28), 0 20px 70px rgba(184,148,85,.1), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(184,148,85,.38); }
/* Limitada → verde (#7a9a7a). */
.um-products ul.products li.product.product_cat-limitada { border-color: #7a9a7a; box-shadow: 0 0 0 1px rgba(122,154,122,.12), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(122,154,122,.22); }
.um-products ul.products li.product.product_cat-limitada:hover { box-shadow: 0 0 0 1px rgba(122,154,122,.28), 0 20px 70px rgba(122,154,122,.1), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(122,154,122,.38); }
/* Permanente → índigo (#7a7a9a). */
.um-products ul.products li.product.product_cat-permanente { border-color: #7a7a9a; box-shadow: 0 0 0 1px rgba(122,122,154,.12), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(122,122,154,.22); }
.um-products ul.products li.product.product_cat-permanente:hover { box-shadow: 0 0 0 1px rgba(122,122,154,.28), 0 20px 70px rgba(122,122,154,.1), inset 0 0 0 8px #0a0a0a, inset 0 0 0 9px rgba(122,122,154,.38); }
/* Imagen de la obra: completa y centrada DENTRO del cuadrado (no recortada). */
.um-products ul.products li.product .woocommerce-loop-product__link img,
.um-products ul.products li.product img {
width: 100% !important;
height: 150px !important;
max-height: 150px !important;
object-fit: contain !important;
object-position: center;
margin: 0 auto .6rem !important;
transition: transform .5s ease;
}
.um-products li.product:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .um-products ul.products li.product img { height: 130px !important; max-height: 130px !important; } }
/* Tarjetas de IGUAL ALTURA en móvil con el botón "Ver colección" alineado abajo.
ul.products ya es flex con align-items:stretch (las tarjetas de una fila igualan
altura), pero cada li.product no era flex, así que un título de 2 líneas dejaba
precio/botón más abajo que en uno de 1 línea. Hacemos la tarjeta una columna
flex, reservamos 2 líneas para el título (cuadra el precio) y anclamos el botón
abajo. Solo móvil/tablet (≤900px); el escritorio no se toca. */
@media (max-width: 900px) {
.um-products ul.products { align-items: stretch; }
.um-products ul.products li.product { display: flex; flex-direction: column; }
.um-products li.product .woocommerce-loop-product__title { min-height: 3.3rem; }
/* el botón no se estira a todo el ancho (queda según su texto y centrado) */
.um-products li.product .button { margin-top: auto; align-self: center; }
}
/* 5) FOTO "NOSOTRAS" con marco dorado sutil. Clase de widget: um-sobre-photo */
.um-sobre-photo img {
border: 1px solid rgba(184, 148, 85, .25);
box-shadow: 0 0 0 8px #0a0a0a, 0 0 0 9px rgba(184, 148, 85, .15), 0 20px 60px rgba(0, 0, 0, .5);
}
/* 5b) Texto "Nosotras": énfasis en línea (como en la plantilla). Clase: um-sobre-body
El color de / dentro del texto enriquecido no es estilizable por
widget; reproduce el "strong=blanco, em=dorado itálica" del mockup. */
.um-sobre-body strong { color: var(--um-white); font-weight: 400; }
.um-sobre-body em { color: var(--um-gold); font-style: italic; }
/* 5c) Manifiesto (hero): bloque de texto centrado y con ancho máximo.
El widget es un item flex dentro de la columna; los márgenes automáticos lo
centran horizontalmente (el ancho propio no basta). Clase: um-poem */
.um-poem {
max-width: 750px;
margin-left: auto !important;
margin-right: auto !important;
}
/* 6) Ergonomía: que el header fijo no tape el destino de las anclas (#inicio, …). */
[id] { scroll-margin-top: 90px; }
/* 6b) "Ver la colección": línea vertical dorada (degradado) debajo del texto.
Una línea vertical con degradado no es un widget nativo. Clase: um-scroll-cue */
.um-scroll-cue .elementor-heading-title::after {
content: '';
display: block;
width: 1px;
height: 46px;
margin: 1.2rem auto 0;
background: linear-gradient(to bottom, var(--um-gold), transparent);
}
/* 7) FILTRO DE COLECCIÓN. Clase de widget (botones): um-filter
El filtrado in-page del widget Products no es posible de forma nativa; los
botones llevan la clase um-filter y custom.js muestra/oculta los productos por
su categoría. Aquí solo el aspecto de los botones y el estado activo. */
.um-filter .elementor-button {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
padding: .5rem .8rem;
transition: all .3s;
}
/* Color del texto: forzado y también sobre el span interno, porque el kit/tema
pinta el texto de .elementor-button con más prioridad (salía en negro). */
.um-filter .elementor-button,
.um-filter .elementor-button .elementor-button-text {
color: var(--um-white) !important;
}
.um-filter .elementor-button:hover,
.um-filter .elementor-button:hover .elementor-button-text,
.um-filter.is-active .elementor-button,
.um-filter.is-active .elementor-button .elementor-button-text {
color: var(--um-gold) !important;
}
.um-filter .elementor-button:hover,
.um-filter.is-active .elementor-button {
border-color: var(--um-gold);
background: transparent !important;
}
/* Disposición HORIZONTAL de los filtros.
Elementor NO vuelca al DOM la clase CSS de las columnas internas (sí la de los
widgets), así que no podemos depender de una clase en la columna. Detectamos el
contenedor por los propios botones: el .elementor-widget-wrap que contiene
widgets .um-filter se convierte en una fila. */
.elementor-widget-wrap:has(> .elementor-element.um-filter) {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: flex-end;
gap: .5rem;
height: 100%;
}
/* Cada botón ocupa solo su contenido (en columnas legacy el widget es 100%). */
.elementor-element.um-filter { width: auto; max-width: none; margin: 0 !important; }
@media (max-width: 767px) {
/* Todos los filtros en UNA sola fila (no envolver) y centrados; botones más
compactos para que quepan TODAS · GALLERY · LIMITADA · PERMANENTE en el
ancho del móvil sin que PERMANENTE caiga a otra línea. */
.elementor-widget-wrap:has(> .elementor-element.um-filter) {
flex-wrap: nowrap;
justify-content: center;
gap: .3rem;
}
.um-filter .elementor-button {
font-size: 10px;
letter-spacing: .5px;
padding: .4rem .45rem;
}
}
/* ============================================================
10) CARRITO Y CHECKOUT (bloques de WooCommerce) — estética de marca
Los bloques se renderizan con JS; se estilizan por sus clases conocidas.
Solo aplican en las páginas de carrito/checkout (donde existen esas clases).
============================================================ */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: var(--um-white); }
/* Títulos y textos */
.wc-block-cart__totals-title,
.wc-block-components-title,
.wc-block-checkout__actions + *,
.wp-block-woocommerce-checkout h2 {
font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--um-white);
}
.wc-block-components-product-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25rem; color: var(--um-white) !important; }
.wc-block-components-product-price, .wc-block-components-totals-item__value, .wc-block-formatted-money-amount { color: var(--um-gold-light); }
.wc-block-cart-items__header, .wc-block-components-totals-item__label, .wc-block-components-product-metadata { color: var(--um-gray-light); }
/* Bordes y separadores */
.wc-block-cart-items, .wc-block-cart-item__wrap,
table.wc-block-cart-items td, table.wc-block-cart-items th,
.wc-block-components-totals-wrapper, .wc-block-components-totals-item {
border-color: rgba(184,148,85,.18) !important;
}
/* Botones de los bloques: estética de marca (transparente + borde dorado) */
.wc-block-components-button:not(.wc-block-components-product-add-to-cart),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
background: transparent !important;
color: var(--um-gold) !important;
border: 1px solid var(--um-gold) !important;
border-radius: 0 !important;
font-family: 'Montserrat', sans-serif !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
font-size: .68rem !important;
box-shadow: none !important;
transition: all .3s !important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
background: var(--um-gold) !important;
color: var(--um-black) !important;
}
/* Campos de formulario (cupón, checkout) en oscuro */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout select {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: var(--um-white) !important;
border-radius: 0 !important;
}
.wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout textarea:focus,
.wp-block-woocommerce-checkout select:focus { border-color: var(--um-gold) !important; outline: none !important; }
.wc-block-components-text-input label,
.wp-block-woocommerce-checkout label { color: var(--um-gray-light) !important; }
/* Selector de cantidad */
.wc-block-components-quantity-selector { border: 1px solid rgba(255,255,255,.14) !important; border-radius: 0 !important; }
.wc-block-components-quantity-selector__input { background: transparent !important; color: var(--um-white) !important; }
.wc-block-components-quantity-selector__button { color: var(--um-gold) !important; background: transparent !important; }
/* Enlaces (eliminar, editar, cupón) */
.wc-block-cart-item__remove-link,
.wc-block-components-totals-coupon-link,
.wp-block-woocommerce-cart a, .wp-block-woocommerce-checkout a { color: var(--um-gold); }
.wc-block-cart-item__remove-link:hover { color: var(--um-gold-light); }
/* Imagen del producto en el carrito */
.wc-block-cart-item__image img { border: 1px solid rgba(184,148,85,.18); background: #0a0a0a; }
/* Avisos / mensajes */
.wc-block-components-notice-banner { background: rgba(184,148,85,.06) !important; border-color: rgba(184,148,85,.3) !important; color: var(--um-white) !important; }