/* ============================================================
   LOVEFOOT - ESTILOS PERSONALIZADOS
   ============================================================
   Este archivo contiene únicamente los estilos que NO se pueden
   lograr con clases de Tailwind (fuentes, colores de marca,
   scrollbar, transiciones, etc.)

   Índice:
   1. Tipografía base
   2. Paleta de colores Lovefoot (clases .bg-pastel-*, .text-pastel-*)
   3. Transiciones/animaciones
   4. Scrollbar personalizado
   ============================================================ */

/* ------------------------------------------------------------
   1. TIPOGRAFÍA BASE
   ------------------------------------------------------------ */
body {
    background-color: #FFF5F6;
    scroll-behavior: smooth;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

html, #main-wrapper {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

/* Protección anti-desbordamiento en móviles para inputs, selects y botones */
input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

input[type="date"], input[type="time"], input[type="datetime-local"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box !important;
    appearance: none;
    -webkit-appearance: none;
}

/* ------------------------------------------------------------
   2. PALETA DE COLORES LOVEFOOT
   Cambiar aquí los valores hexadecimales actualiza el color de
   marca en TODA la página.
   ------------------------------------------------------------ */
.bg-pastel-pink { background-color: #FFF0F2; }
.bg-pastel-card { background-color: #FFFFFF; }
.bg-pastel-dark { background-color: #5C3E43; }
.text-pastel-dark { color: #5C3E43; }
.text-pastel-accent { color: #D48C98; }
.border-pastel { border-color: #FCE4E6; }

/* ------------------------------------------------------------
   3. TRANSICIONES / ANIMACIONES
   ------------------------------------------------------------ */
.transition-soft {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   4. SCROLLBAR PERSONALIZADO
   ------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FFF5F6;
}
::-webkit-scrollbar-thumb {
    background: #FCE4E6;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D48C98;
}

/* ------------------------------------------------------------
   5. BACKGROUND IMPACTANTE (IMAGEN + OVERLAY)
   ------------------------------------------------------------ */
.animated-bg {
    position: relative;
    min-height: 100vh;
    background-color: #FFF5F6;
}

.animated-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 240, 242, 0.6)), url('/static/img/lovefoot-pure-nature-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Optimización especial del fondo en dispositivos móviles (320px - 768px)
   Evita que el fondo en landscape se estire, se vea excesivamente borroso o con zoom */
@media (max-width: 768px) {
    .animated-bg::before {
        background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 240, 242, 0.55)), url('/static/img/lovefoot-pure-nature-bg.jpg');
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
        background-repeat: no-repeat;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }
}

/* ------------------------------------------------------------
   5.5. GLASSMORPHISM (GIRLY & PREMIUM)
   ------------------------------------------------------------ */
.glass-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px -10px rgba(236, 172, 187, 0.4);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(236, 172, 187, 0.6);
    background: rgba(255, 255, 255, 0.95);
}
.glass-panel-soft {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.4s ease;
}
.glass-panel-soft:hover {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------
   6. ANIMACIONES DE SCROLL (REVEAL)
   ------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.97);
    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delays para escalonar animaciones */
.reveal.delay-100 { transition-delay: 100ms; }
.reveal.delay-200 { transition-delay: 200ms; }
.reveal.delay-300 { transition-delay: 300ms; }