/* ===============================
SONPETIT UI/UX TRANSFORMER
(NO cambia estructura / SOLO estilo)
=============================== */
/* 1) Tokens */
:root{
–sp-bg: #fbfaf7;
–sp-text: #1f2328;
–sp-muted: #5b616a;
–sp-line: rgba(31,35,40,.12);
–sp-shadow: 0 18px 60px rgba(0,0,0,.10);
–sp-shadow2: 0 10px 30px rgba(0,0,0,.08);
–sp-radius: 22px;
–sp-radius2: 16px;
/* Marca (ajusta si quieres) */
–sp-brand: #b08a62;
–sp-accent: #d7a16a;
}
/* 2) Base look (sin romper theme) */
body{
background:
radial-gradient(1200px 600px at 15% 0%, rgba(216,195,165,.45), transparent 55%),
radial-gradient(900px 520px at 85% 8%, rgba(176,138,98,.18), transparent 60%),
linear-gradient(180deg, var(–sp-bg), #ffffff 70%) !important;
color: var(–sp-text);
}
body, button, input, textarea, select{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
}
a{ text-decoration: none; }
p{ color: var(–sp-muted); line-height: 1.55; }
h1,h2,h3{ letter-spacing: -0.3px; }
h1{ letter-spacing: -0.6px; }
/* 3) “Premium spacing” general para secciones (Elementor + Gutenberg + themes) */
.elementor-section,
.wp-block-group,
.wp-block-cover,
section{
scroll-margin-top: 90px;
}
/* 4) Cards/boxes (sin cambiar layout) */
.elementor-widget-container,
.wp-block-group__inner-container,
.wp-block-column,
.wp-block-media-text,
.woocommerce .product,
.woocommerce-page .product{
border-radius: var(–sp-radius);
}
.elementor .elementor-widget-container{
/* solo suaviza donde ya existan cajas */
}
/* 5) Botones (Woo + theme + Elementor) */
button,
input[type=»submit»],
.wp-element-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
border-radius: 999px !important;
border: 1px solid var(–sp-line) !important;
font-weight: 800 !important;
box-shadow: var(–sp-shadow2) !important;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover,
input[type=»submit»]:hover,
.wp-element-button:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
transform: translateY(-1px);
}
/* Botón primario (si tu theme marca primary con clases comunes) */
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.elementor-button.elementor-button-link{
background: linear-gradient(135deg, rgba(176,138,98,.92), rgba(215,161,106,.92)) !important;
border-color: rgba(176,138,98,.35) !important;
color: #fff !important;
}
/* 6) Header / menú: look “glass” (sin reestructurar) */
header,
.site-header,
.elementor-location-header{
position: sticky;
top: 0;
z-index: 9999;
background: rgba(251,250,247,.72) !important;
backdrop-filter: blur(14px);
border-bottom: 1px solid var(–sp-line);
}
header a,
.site-header a{
font-weight: 800;
}
nav a{
border-radius: 999px;
padding: 10px 12px;
}
nav a:hover{
background: rgba(255,255,255,.78);
border: 1px solid var(–sp-line);
padding: 9px 11px;
}
/* 7) Inputs / buscador / forms */
input[type=»text»], input[type=»search»], input[type=»email»], input[type=»tel»], input[type=»password»],
textarea, select{
border-radius: 999px !important;
border: 1px solid var(–sp-line) !important;
background: rgba(255,255,255,.90) !important;
box-shadow: var(–sp-shadow2) !important;
padding: 12px 14px !important;
outline: none !important;
}
/* 8) WooCommerce: grid + producto más “boutique” (NO cambia contenido) */
.woocommerce ul.products{
gap: 16px !important;
}
.woocommerce ul.products li.product{
border: 1px solid var(–sp-line) !important;
border-radius: var(–sp-radius) !important;
background: rgba(255,255,255,.88) !important;
box-shadow: var(–sp-shadow2) !important;
padding: 14px !important;
transition: transform .15s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
}
.woocommerce ul.products li.product a img{
border-radius: var(–sp-radius2) !important;
margin-bottom: 10px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-weight: 950 !important;
letter-spacing: -0.2px;
}
.woocommerce ul.products li.product .price{
font-weight: 950 !important;
color: var(–sp-text) !important;
}
/* 9) Footer: limpio */
footer, .site-footer{
border-top: 1px solid var(–sp-line);
background: rgba(255,255,255,.55);
backdrop-filter: blur(12px);
}
/* 10) Ajuste “anti-ruido”: reduce bordes agresivos y sombras feas de algunos themes */
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}