/**
 * Homepage Premium Styles - ConectaTerapia
 * Overrides and enhancements for a cohesive premium look
 */

:root {
    /* Premium Shadows (matching testimonials & modal) */
    --ct-shadow-premium-sm: 0 4px 12px rgba(80, 164, 167, 0.08);
    --ct-shadow-premium-md: 0 10px 30px rgba(80, 164, 167, 0.12);
    --ct-shadow-premium-lg: 0 20px 40px rgba(80, 164, 167, 0.15);
    
    /* Premium Gradients */
    --ct-gradient-hero: linear-gradient(135deg, rgba(9, 27, 31, 0.9) 0%, rgba(23, 114, 117, 0.8) 100%);
    --ct-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%);
    --ct-gradient-accent: linear-gradient(135deg, #50A4A7 0%, #177275 100%);
}

/* ------------------------------------ */
/* Hero Section Enhancements            */
/* ------------------------------------ */

.ct-hero__overlay {
    background: var(--ct-gradient-hero) !important;
    backdrop-filter: blur(4px); /* Subtle blur for better text readability */
}

.ct-hero__title {
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ct-hero__subtitle {
    font-weight: 400;
    opacity: 0.9;
    max-width: 540px;
}

.ct-hero__search {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ct-hero__search input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}

.ct-hero__search input:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.ct-hero__metrics dd {
    color: #A2D5D6; /* Secondary color for pop */
    text-shadow: 0 2px 10px rgba(80, 164, 167, 0.3);
}

/* ------------------------------------ */
/* Steps Section Enhancements           */
/* ------------------------------------ */

.ct-step {
    background: #FFFFFF !important;
    border: 1px solid rgba(80, 164, 167, 0.1) !important;
    box-shadow: var(--ct-shadow-premium-sm) !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ct-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--ct-shadow-premium-lg) !important;
    border-color: rgba(80, 164, 167, 0.3) !important;
}

.ct-step__marker {
    background: var(--ct-gradient-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(80, 164, 167, 0.25);
    width: 64px !important;
    height: 64px !important;
    font-size: 1.5rem !important;
}

.ct-step__body h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #2D3748 !important;
}

.ct-step__body p {
    color: #4A5568 !important;
    font-size: 0.95rem !important;
}

/* ------------------------------------ */
/* Gift Section Enhancements            */
/* ------------------------------------ */

.ct-gift {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F7F8 100%) !important;
}

.ct-gift-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(80, 164, 167, 0.15) !important;
    box-shadow: var(--ct-shadow-premium-md) !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    transition: all 0.3s ease;
}

.ct-gift-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ct-shadow-premium-lg) !important;
}

.ct-gift-card h3 {
    color: #177275 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

.ct-gift-card ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: #4A5568 !important;
}

.ct-gift-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #50A4A7;
    font-weight: 800;
}

/* ------------------------------------ */
/* Global Button Polish                 */
/* ------------------------------------ */

.btn-primary {
    background: var(--ct-gradient-accent) !important;
    box-shadow: 0 4px 15px rgba(80, 164, 167, 0.3) !important;
    border-radius: 12px !important; /* More modern radius */
    padding: 1rem 2rem !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(80, 164, 167, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn-outline {
    border: 2px solid #50A4A7 !important;
    color: #177275 !important;
    border-radius: 12px !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
}

.btn-outline:hover {
    background: rgba(80, 164, 167, 0.08) !important;
}