/* =====================================================================
   Aluxe GS · Estilo del sitio público
   ---------------------------------------------------------------------
   Una sola hoja que le da el mismo aire a todo el sitio: tarjetas
   redondeadas, sombras suaves, vidrio esmerilado y botones sobrios.

   Se carga después de Tailwind, así que ajusta lo que haga falta sin
   tener que reescribir cada vista.
   ===================================================================== */

:root {
    /* Esquinas: suaves pero no infantiles */
    --radio-chico: 12px;
    --radio: 18px;
    --radio-grande: 24px;

    /* Sombras: se sienten, no se ven */
    --sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
    --sombra-2: 0 2px 6px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .10);
    --sombra-oscura: 0 20px 60px rgba(0, 0, 0, .35);

    --linea: rgba(15, 23, 42, .08);
    --tinta-suave: #475569;
}

/* ===================== TIPOGRAFÍA ===================== */
h1, h2, h3, .titulo-seccion {
    letter-spacing: -.02em;
}

h1 { letter-spacing: -.03em; }

/* ===================== TARJETAS ===================== */
/* Productos del inicio y de la tienda */
.product-card,
.reel-card {
    border-radius: var(--radio) !important;
    border: 1px solid var(--linea);
    background: #fff;
    box-shadow: var(--sombra-1);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.product-card:hover,
.reel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: rgba(15, 23, 42, .14);
}

.product-card .image-wrap {
    border-radius: 0 !important;
    background: #f8fafc;
}

/* Las tarjetas de Tailwind que ya traen esquinas, se emparejan */
.rounded-xl { border-radius: var(--radio-chico) !important; }
.rounded-2xl { border-radius: var(--radio) !important; }
.rounded-3xl { border-radius: var(--radio-grande) !important; }

/* Sombras duras de Tailwind → sombras suaves */
.shadow-lg { box-shadow: var(--sombra-1) !important; }
.shadow-xl { box-shadow: var(--sombra-2) !important; }
.shadow-2xl { box-shadow: var(--sombra-2) !important; }

/* ===================== BOTONES ===================== */
/* Píldora, sin degradados chillones, con un levantamiento sutil */
main a[class*="bg-gradient-to-r"],
main button[class*="bg-gradient-to-r"] {
    background-image: none !important;
    background-color: var(--color-cta-button, #16a34a) !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, .25);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

main a[class*="bg-gradient-to-r"]:hover,
main button[class*="bg-gradient-to-r"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* ===================== SECCIONES ===================== */
/* Los fondos con degradados de tres colores se calman a uno solo */
main section[class*="from-gray-900"] {
    background-image: none !important;
    background-color: #070b14 !important;
}

/* Las manchas de color difuminadas que "decoraban" el fondo */
main section .blur-3xl,
main section .mix-blend-multiply {
    display: none !important;
}

/* Vidrio esmerilado para las cajas sobre fondo oscuro */
main .backdrop-blur-md,
main .backdrop-blur-sm {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
}

/* ===================== ETIQUETAS Y PÍLDORAS ===================== */
/* Las etiquetas de colores fuertes bajan a tonos sobrios */
main .bg-blue-100 { background-color: rgba(15, 23, 42, .06) !important; }
main .text-blue-700 { color: var(--tinta-suave) !important; }

/* ===================== IMÁGENES ===================== */
main img { border-radius: inherit; }

/* ===================== DETALLES ===================== */
/* La animación de pulso constante cansa la vista */
main .animate-pulse { animation: none !important; }

/* Separadores más finos */
main hr,
main .border-t,
main .border-b { border-color: var(--linea) !important; }