/** Shopify CDN: Minification failed
Line 23:0 All "@import" rules must come first
Line 133:0 Unexpected "<"
Line 239:1 Unexpected "4"
**/
:root {
--bg-color: #fff;
--text-color: #1a1a1a;
--card-bg: #f9f9f9;
--accent-color: #b8860b;
}
body.dark-mode {
--bg-color: #111;
--text-color: #fff;
--card-bg: #1e1e1e;
--accent-color: #d4af37;
}
/* === FUENTE ELEGANTE === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 600;
}
/* === DEGRADADO DE FONDO === */
body {
background: linear-gradient(180deg, #FADCD9 0%, #F8C2C0 100%);
}
/* === BOTONES GENERALES === */
.button,
.button--primary,
.shopify-payment-button__button {
background-color: #A67C52;
color: white;
border: none;
transition: all 0.3s ease;
}
.button:hover,
.button--primary:hover,
.shopify-payment-button__button:hover {
background-color: #D4AF37;
color: #121212;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);
}
/* === TARJETAS DE PRODUCTOS === */
.card {
border-radius: 16px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.15);
}
/* === BOTÓN VER TODO === */
.button-ver-todo {
background-color: #A67C52;
color: white;
padding: 12px 24px;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
border: none;
}
.button-ver-todo:hover {
background-color: #FFD700;
color: #121212;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}
/* === TEXTO SECUNDARIO === */
.texto-secundario {
color: #565555;
}
/* 1. CURSOR PERSONALIZADO */
body {
cursor: url('https://cdn-icons-png.flaticon.com/512/1828/1828817.png'), auto;
}
/* 2. HOVER CON EFECTO BRILLO EN IMÁGENES Y BOTONES */
.card, .button, .product-grid img {
transition: all 0.3s ease;
}
.card:hover, .button:hover, .product-grid img:hover {
transform: scale(1.03);
filter: brightness(1.08);
}
/* 3. LOADER ANIMADO CON LOGO */
/* HTML (en theme.liquid justo después de ):
*/
/* CSS */
#custom-loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #f8c2c0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#custom-loader img {
width: 100px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
/* JS para ocultar loader después de cargar */
/* En theme.liquid antes de cerrar */
/* 4. EFECTO DE ENTRADA A SECCIONES */
/* Usa la librería AOS.js ya instalada */
[data-aos] {
opacity: 0;
transition-property: opacity, transform;
transition-duration: 0.6s;
transition-timing-function: ease;
}
[data-aos].aos-animate {
opacity: 1;
}
[data-aos="fade-up"] {
transform: translateY(40px);
}
[data-aos="fade-up"].aos-animate {
transform: translateY(0);
}
#loader-wrapper {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: #f8c2c0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-logo img {
width: 120px;
animation: fadeInScale 1.2s ease-in-out infinite alternate;
}
@keyframes fadeInScale {
0% {
opacity: 0.4;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1.1);
}
}
body.loaded #loader-wrapper {
opacity: 0;
visibility: hidden;
}
.button--add-to-cart.clicked {
animation: pulseButton 0.4s ease;
box-shadow: 0 0 10px #a67c52;
}
@keyframes pulseButton {
0% {
transform: scale(1);
box-shadow: 0 0 0 transparent;
}
50% {
transform: scale(1.05);
box-shadow: 0 0 15px #a67c52;
}
100% {
transform: scale(1);
box-shadow: 0 0 0 transparent;
}
}
#sticky-cart {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.sticky-cart-button {
background-color: #a67c52;
color: #fff;
padding: 12px 20px;
font-weight: bold;
border-radius: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: background 0.3s ease;
}
.sticky-cart-button:hover {
background-color: #8a5c3c;
}
#scrollTopBtn {
position: fixed;
bottom: 30px;
right: 20px;
background-color: #A67C52;
color: white;
border-radius: 50%;
padding: 12px;
z-index: 998;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.3s ease;
}4
#scrollTopBtn:hover {
background-color: #8a633d;
}
.toggle-darkmode-btn {
position: fixed;
bottom: 150px; /* Para que no se encime con el botón de scroll */
right: 20px;
background-color: #a67c52;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
z-index: 9999;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.toggle-darkmode-btn:hover {
background-color: #8b5e3c;
transform: scale(1.1);
}
body.dark-mode {
background-color: #121212 !important;
color: #ffffff !important;
}
body.dark-mode a {
color: #f8c291 !important;
}
body.dark-mode .card-wrapper,
body.dark-mode .product-card-wrapper {
background-color: #1e1e1e !important;
}
/* Oculta el botón modo oscuro flotante (luna amarilla) */
button[aria-label="Toggle dark mode"],
button[data-mode-toggle],
button.mode-toggle,
button[class*="moon"],
button svg[data-icon="moon"],
button:has(svg[data-icon="moon"]) {
display: none !important;
}
/* Ocultar franja con cuenta regresiva y contenido residual */
div:has(span[class*="countdown"]),
div:has(.countdown-timer),
div:has-text("¡Envío gratis termina"),
div:has-text("Contenido aquí"),
div#countdown-bar,
div[class*="timer-bar"],
div[class*="countdown"] {
display: none !important;
}
footer:hover {
background-color: #c5a062 !important; /* Dorado elegante */
transition: background-color 0.5s ease;
}
footer {
transition: background-color 0.5s ease;
}
.promo-bar {
display: none !important;
}
body {
padding-top: 0px !important;
}
.promo-bar {
width: 100%;
background: linear-gradient(to right, #d4af37, #f7e8b5);
color: #1e1e1e;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.promo-timer {
margin-left: 8px;
font-family: monospace;
background: white;
padding: 2px 8px;
border-radius: 5px;
color: #d4af37;
}
/* Ajuste del espacio para que no tape el contenido */
body.template-index {
padding-top: 45px;
}
.promo-bar {
width: 100%;
background: linear-gradient(to right, #d4af37, #f7e8b5);
color: #1e1e1e;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.promo-timer {
margin-left: 8px;
font-family: monospace;
background: white;
padding: 2px 8px;
border-radius: 5px;
color: #d4af37;
}
body.template-index {
padding-top: 45px !important;
}
.promo-bar {
width: 100%;
background: linear-gradient(to right, #d4af37, #f7e8b5);
color: #1e1e1e;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.promo-timer {
margin-left: 8px;
font-family: monospace;
background: white;
padding: 2px 8px;
border-radius: 5px;
color: #d4af37;
}
body.template-index {
padding-top: 45px !important;
}
.collection-card {
border-radius: 20px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
background: #fff0;
border: 1px solid #d4af37; /* borde dorado suave */
}
.collection-card img {
transition: transform 0.4s ease;
border-radius: 0;
}
.collection-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
}
.collection-card:hover img {
transform: scale(1.05);
}
.view-all-button {
background: #d4af37;
color: white;
font-weight: bold;
padding: 12px 24px;
border-radius: 12px;
border: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease, transform 0.3s ease;
}
.view-all-button:hover {
background: #b58f2b;
transform: translateY(-2px);
}
.collection-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #fff;
border: 2px solid transparent;
transition: all 0.4s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.collection-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
padding: 2px;
background: linear-gradient(145deg, #d4af37, #f7e8b5);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: destination-out;
pointer-events: none;
transition: opacity 0.4s ease;
opacity: 0.6;
}
.collection-card img {
width: 100%;
height: auto;
transition: transform 0.4s ease;
display: block;
}
.collection-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.25);
}
.collection-card:hover::before {
opacity: 1;
}
.collection-card:hover img {
transform: scale(1.05);
}
