/* =============================================================================
   VISTIENDO IDENTIDADES - Custom Styles
   ============================================================================= */

/* Brand Colors as CSS Custom Properties (From Logo) */
:root {
    --color-primary: #D20A7B;   /* Fucsia/Magenta */
    --color-secondary: #9DCB3C; /* Verde Claro */
    --color-accent: #FAB800;    /* Amarillo/Dorado */
    --color-neutral-light: #F5F0E8;
    --color-neutral-dark: #2C2C2C;
}

/* Custom utility classes */
.text-brand-primary {
    color: var(--color-primary);
}

.text-brand-secondary {
    color: var(--color-secondary);
}

.text-brand-accent {
    color: var(--color-accent);
}

.bg-brand-primary {
    background-color: var(--color-primary);
}

.bg-brand-secondary {
    background-color: var(--color-secondary);
}

.bg-brand-accent {
    background-color: var(--color-accent);
}

.bg-brand-light {
    background-color: var(--color-neutral-light);
}

.bg-brand-dark {
    background-color: var(--color-neutral-dark);
}

/* Gradient backgrounds */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.bg-gradient-warm {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

/* Smooth transitions */
.transition-brand {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card hover effect */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* WhatsApp floating button animation */
@keyframes pulse-whatsapp {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.whatsapp-pulse {
    animation: pulse-whatsapp 2s ease-in-out infinite;
}

/* Hero section text shadow for readability */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Form input styles */
.input-brand {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.input-brand:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(196, 92, 38, 0.1);
    outline: none;
}

/* Button styles */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #a94d1f;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #234a31;
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}

/* =========================================
   COMPONENT: Hero Buttons (SOLID Refactor)
   ========================================= */

/* Primary Action Button */
.btn-hero-primary {
    background-color: var(--color-primary);
    color: white;
    border: 2px solid var(--color-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-primary:hover {
    background-color: white;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(196, 92, 38, 0.3);
}

/* Glass/Secondary Action Button */
.btn-hero-glass {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-glass:hover {
    background-color: white;
    color: var(--color-neutral-dark);
    /* Using defined brand dark color */
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Icon Animation Handling within buttons */
.btn-hero-primary .icon-arrow,
.btn-hero-glass .icon-whatsapp {
    transition: transform 0.3s ease;
}

.btn-hero-primary:hover .icon-arrow {
    transform: translateX(4px);
}

.btn-hero-glass:hover .icon-whatsapp {
    transform: scale(1.1);
}


.btn-whatsapp:hover {
    background-color: #1ebe57;
    transform: translateY(-1px);
}

/* Line clamp - with standard property for compatibility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   PREMIUM VISUAL ENHANCEMENTS
   ========================================= */

/* 1. Cultural Pattern Background */
.bg-pattern-cultural {
    background-color: var(--color-neutral-light);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='%23C45C26' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* 2. [REMOVED] Marquee Animation - Component no longer used */

/* 3. Glassmorphism */
.card-glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.15);
}

/* 4. Floating Animation */
.floating {
    animation: floating 6s ease-in-out infinite;
}

.floating-delay-1 {
    animation: floating 7s ease-in-out 1s infinite;
}

.floating-delay-2 {
    animation: floating 8s ease-in-out 2s infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* 5. Image Hover Zoom Effect */
.img-zoom-container {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.img-zoom {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.group:hover .img-zoom {
    transform: scale(1.05);
    /* Reduced scale */
}

/* 6. Text Selection Color */
::selection {
    background-color: var(--color-primary);
    color: white;
}