/* ============================================
   CSS MAESTRO — Tienda (belleza + hogar/otros)
   Paleta:  teal #468C98 · rosa #F4C2C2 · casi-blanco #FAFAFA
   Fuentes: Montserrat (títulos) · Lato (texto)
   Fondo por defecto: casi-blanco
   Rosa: reservado exclusivamente para categoría Belleza
   ============================================ */

/* --- Fuentes de Google --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Lato:wght@400;700&display=swap');

/* --- Variables de marca --- */
:root {
    --teal: #468C98;
    --teal-oscuro: #2C7DA0;
    --rosa: #F4C2C2;
    --casi-blanco: #FAFAFA;
    --texto: #2E2718;
    --gris-suave: #ECECEC;
    --gris-precio-viejo: #B0B0B0;
    --gris-titulo: #333333;
    --gris-texto: #6B6B6B;
}

/* --- Fondo por defecto de todo el sitio --- */
body {
    background-color: var(--casi-blanco);
    color: var(--texto);
}

/* --- Tipografía global --- */
body,
p, span, a, li, input, textarea, button, .btn {
    font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* --- Clases utilitarias de color (para reutilizar en el HTML) --- */
.bg-teal   { background-color: var(--teal) !important; }
.bg-claro  { background-color: var(--casi-blanco) !important; }
.txt-teal  { color: var(--teal) !important; }
.txt-claro { color: var(--casi-blanco) !important; }

/* --- Rosa: SOLO para elementos de la categoría Belleza --- */
.bg-belleza    { background-color: var(--rosa) !important; }
.txt-belleza   { color: var(--rosa) !important; }
.badge-belleza {
    background-color: var(--rosa) !important;
    color: var(--teal) !important;
}

/* ============================================
   Galería de productos (product-gallery)
   Selectores reales de sitiosimple
   ============================================ */

/* Quita el borde por defecto del contenedor de la galería */
.gallery-ss,
#catalogPage,
#ss-custom-component {
    border-style: none !important;
    box-shadow: none !important;
}

/* --- Tarjeta de producto --- */
.gallery-ss .single-product {
    background-color: #FFFFFF !important;
    border: 1px solid var(--gris-suave);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gallery-ss .single-product:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* --- Imagen del producto: mismo alto y recorte parejo --- */
.gallery-ss .product-image {
    background-color: #FFFFFF;
    border-radius: 8px;
    aspect-ratio: 1 / 1;      /* cuadrado uniforme para todas */
}
.gallery-ss .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* muestra el producto completo */
}

/* --- Nombre del producto: Montserrat, gris oscuro (NO teal) --- */
.gallery-ss .single-product h4.title,
.gallery-ss .single-product .title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: var(--gris-titulo) !important;
    font-size: 16px;
    line-height: 1.3;
    min-height: 42px;         /* alinea tarjetas con nombres de 1 o 2 líneas */
}

/* --- Precio activo: teal, protagonista --- */
.gallery-ss .single-product .price {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--teal) !important;
}

/* --- Precio anterior: tachado y apagado --- */
.gallery-ss .single-product .price-without-discount {
    font-family: 'Lato', sans-serif !important;
    color: var(--gris-precio-viejo) !important;
    text-decoration: line-through !important;
    margin-left: 6px;
}

/* --- Texto general de la galería --- */
.gallery-ss .single-product,
.gallery-ss .single-product p,
.gallery-ss .single-product span,
.gallery-ss .single-product a {
    font-family: 'Lato', sans-serif;
}

/* --- Corazón / favoritos: teal (anula el azul de Bootstrap) --- */
.gallery-ss .btn-outline-primary {
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}
.gallery-ss .btn-outline-primary:hover {
    background-color: var(--teal) !important;
    color: #FFFFFF !important;
}
.gallery-ss .btn-outline-primary .fa-heart {
    color: inherit !important;
}

/* --- Flechas de navegación: teal --- */
.gallery-ss .control .prev,
.gallery-ss .control .next,
.gallery-ss .fa-angle-left,
.gallery-ss .fa-angle-right {
    color: var(--teal) !important;
}

/* --- Puntos (dots) de paginación: teal --- */
.gallery-ss .tns-nav button {
    background-color: #D0D0D0 !important;
    border: none;
}
.gallery-ss .tns-nav button.tns-nav-active {
    background-color: var(--teal) !important;
}

/* ============================================
   Sección de contacto (fondo teal)
   Fuerza la paleta de marca sobre las variables de Bootstrap
   ============================================ */

/* Fondo teal de toda la sección de contacto */
.seccion-contacto {
    background-color: var(--teal) !important;
}

/* Título, subtítulo y textos → casi-blanco sobre el teal */
.seccion-contacto h2,
.seccion-contacto h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--casi-blanco) !important;
}
.seccion-contacto p,
.seccion-contacto .ssc-form-field-label {
    font-family: 'Lato', sans-serif !important;
    color: var(--casi-blanco) !important;
}
.seccion-contacto .ssc-form-field-label {
    font-weight: 700;
}

/* Líneas divisorias → claras sobre el teal */
.seccion-contacto hr {
    border-color: var(--casi-blanco) !important;
    opacity: 0.6;
}

/* Campos de entrada → blancos, texto oscuro */
.seccion-contacto .form-control {
    font-family: 'Lato', sans-serif !important;
    background-color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;
    color: var(--texto) !important;
}
.seccion-contacto .form-control:focus {
    border-color: var(--teal-oscuro) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
    outline: none !important;
}
.seccion-contacto .form-control::placeholder {
    color: #A5A5A5 !important;
}

/* Botón enviar → blanco con texto teal (resalta sobre el fondo teal) */
.seccion-contacto .ssc-form-button-full-width {
    background-color: var(--casi-blanco) !important;
    color: var(--teal) !important;
    border: 1px solid var(--casi-blanco) !important;
    border-radius: 8px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
    letter-spacing: 2px;
}
.seccion-contacto .ssc-form-button-full-width:hover {
    background-color: #FFFFFF !important;
    color: var(--teal-oscuro) !important;
}

/* Ícono de redes → claro sobre el teal */
.seccion-contacto .fa-instagram {
    color: var(--casi-blanco) !important;
}

/* ============================================
   Botones coherentes en todo el sitio
   ============================================ */
.btn {
    border-radius: 8px;
}
.btn-teal {
    background-color: var(--teal) !important;
    color: var(--casi-blanco) !important;
    border: 1px solid var(--teal-oscuro) !important;
}
/* Botón de belleza (usar solo en esa categoría) */
.btn-belleza {
    background-color: var(--rosa) !important;
    color: var(--teal) !important;
    border: 1px solid var(--rosa) !important;
}