/* ============================================================
   Estilos personalizados para Agroruper
   Paleta: agro-300 #abd79d (primario) / agro-secondary #717a6e
   Tipografía: Raleway (400 / 500 / 600 / 900)
   ============================================================ */

/* Smooth scroll con offset para el header fijo */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem;
}

/* ============================================================
   ANIMACIONES DE SCROLL (reveal)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

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

/* Retardo escalonado para grids */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* Respeto por usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .ken-burns,
    .scroll-indicator,
    #whatsapp-btn { animation: none !important; }
}

/* ============================================================
   HERO
   ============================================================ */

/* Zoom lento del fondo (efecto Ken Burns) */
.ken-burns {
    animation: kenBurns 24s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Indicador de scroll del hero (incluye el centrado horizontal) */
.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50% { transform: translate(-50%, 0.6rem); opacity: 1; }
}

/* ============================================================
   HEADER
   ============================================================ */
#header {
    transition: box-shadow 0.3s ease;
}

#header.scrolled {
    box-shadow: 0 0.5rem 1.5rem rgba(47, 75, 40, 0.12);
}

.header-inner {
    transition: height 0.3s ease;
}

.header-logo {
    transition: height 0.3s ease;
}

/* Header compacto al hacer scroll */
#header.scrolled .header-inner { height: 4.5rem; }
#header.scrolled .header-logo { height: 3rem; }

/* Subrayado animado de la navegación */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background-color: #abd79d;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ============================================================
   TARJETAS DE SERVICIO
   ============================================================ */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1.25rem 2.5rem rgba(47, 75, 40, 0.14);
}

.service-card .service-icon {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-icon {
    background-color: #abd79d;
    color: #2f4b28;
    transform: scale(1.08);
}

/* ============================================================
   TARJETAS DE TESTIMONIO
   ============================================================ */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.25rem 2.5rem rgba(47, 75, 40, 0.18);
}

/* Patrón de hojas para la sección de testimonios */
.leaf-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M18 78 Q18 18 78 18 Q78 78 18 78 Z' fill='%23ffffff' fill-opacity='0.08'/%3E%3Cpath d='M18 78 Q40 56 62 34' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
input:focus, textarea:focus {
    outline: none;
}

/* ============================================================
   BOTÓN DE WHATSAPP FLOTANTE
   ============================================================ */
#whatsapp-btn {
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ============================================================
   ANIMACIONES GENÉRICAS
   ============================================================ */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hover effects para tarjetas (usado en tienda) */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #579143;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 1000;
    animation: slideIn 0.3s ease;
}

.toast-success { background-color: #579143; }
.toast-error { background-color: #dc2626; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}