/* style.css */

/* Animación de entrada suave */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideIn 0.5s ease-out forwards;
}

/* Ocultar secciones */
.hidden-section {
    display: none !important;
}

.page-section {
    display: none;
}

.page-section:not(.hidden-section) {
    display: block;
}

/* Asegurar espacio para el navbar fijo en las secciones internas */
#morfologia,
#nombres,
#comida {
    padding-top: 100px !important;
}

/* Efecto de pulso para botones CTA */
.btn-pulse:active {
    transform: scale(0.95);
}

/* --- CLASES DE COLORES DE PERROS (SIMULACIÓN) --- */

/* Fondo abstracto para el Hero */
.bg-hero-pattern {
    background-color: #111827;
    background-image: radial-gradient(#374151 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Blue Merle (Gris con manchas negras) */
.bg-blue-merle {
    background: radial-gradient(circle at 30% 30%, #000000 10%, transparent 15%),
        radial-gradient(circle at 70% 60%, #000000 8%, transparent 12%),
        #9CA3AF;
    /* Base gris */
}

/* Chocolate / Rojo (Marrón sólido) */
.bg-chocolate {
    background-color: #8B4513;
}

/* Red Merle (Crema con manchas marrones) */
.bg-red-merle {
    background: radial-gradient(circle at 40% 40%, #8B4513 10%, transparent 15%),
        radial-gradient(circle at 80% 20%, #8B4513 8%, transparent 12%),
        #FDE68A;
    /* Base crema/rubia */
}

/* Clases para el panel visual grande */
.visual-classic {
    background-color: #1a1a1a;
}

.visual-merle {
    background: radial-gradient(circle, #000 10%, #94a3b8 100%);
}

.visual-choco {
    background-color: #78350f;
}

.visual-redmerle {
    background: radial-gradient(circle, #78350f 10%, #fef3c7 100%);
}

.visual-ears {
    background-color: #f3f4f6;
    border: 4px dashed #3b82f6;
}

.visual-sable {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 50%, #ffffff 100%);
}

.visual-tricolor {
    background: linear-gradient(135deg, #000000 0%, #000000 40%, #d97706 60%, #ffffff 100%);
}

/* Estilos personalizados para el slider */
.slider-thumb::-webkit-slider-thumb {
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
}

.slider-thumb::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.6);
}

.slider-thumb::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
}

.slider-thumb::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.6);
}

/* Estilo para botón de actividad seleccionado */
.activity-selected {
    transform: scale(1.05);
}

.gender-selected {
    transform: scale(1.05);
}

/* Animación de scroll hacia abajo */
@keyframes scroll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(8px);
        opacity: 0;
    }
}

.animate-scroll {
    animation: scroll 1.5s ease-in-out infinite;
}

/* Animación de bounce lenta */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 2s infinite;
}

/* Mejorar transiciones del menú móvil */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}



/* Cursor pointer para botones del acordeón */
button[onclick^="toggleSection"] {
    cursor: pointer;
}

/* Animación del ícono de chevron */
button[onclick^="toggleSection"] i {
    transition: transform 0.3s ease;
}