/* ============================================
   URBÁLI 360 - CCA Protocol Section Styles
   "Contextualizar, Categorizar, Accionar"
   ============================================ */

.section-cca {
    position: relative;
    background-color: var(--color-background);
    overflow: hidden;
}

.cca-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cca-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.cca-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-light);
}

/* Steps Container */
.cca-steps-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-xl);
    position: relative;
}

/* Connecting Line (Desktop) */
.cca-steps-container::before {
    content: '';
    position: absolute;
    top: 50px;
    /* Adjust based on icon size/position */
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(103, 157, 243, 0.3) 20%,
            rgba(103, 157, 243, 0.3) 80%,
            transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Step Card Styles */
.cca-step {
    flex: 1;
    min-width: 250px;
    background: rgba(20, 15, 43, 0.6);
    border: 1px solid rgba(103, 157, 243, 0.2);
    /* Default Blueish border */
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all var(--transition-base);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cca-step:hover {
    border-color: var(--color-primary);
    /* Lima Green on Hover */
    box-shadow: 0 0 20px rgba(172, 254, 64, 0.15);
    background: rgba(20, 15, 43, 0.8);
    transform: translateY(-5px);
}

/* Step Number/Badge */
.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-background);
    border: 1px solid rgba(103, 157, 243, 0.5);
    color: var(--color-secondary);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    z-index: 2;
}

.cca-step:hover .step-number {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Icon Styles */
.step-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(103, 157, 243, 0.05);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    border: 1px solid transparent;
    /* Prepare for transition */
    transition: all var(--transition-base);
}

.step-icon {
    width: 40px;
    height: 40px;
    color: var(--color-secondary);
    /* #679DF3 */
    transition: all var(--transition-base);
}

.cca-step:hover .step-icon-wrapper {
    background: rgba(172, 254, 64, 0.1);
}

.cca-step:hover .step-icon {
    color: var(--color-primary);
    /* Change icon to Lima Green on hover too if desired, or keep blue. User said border lights up. Keeping icon blue usually looks good or switching. Let's Switch to highlight interaction. */
    color: var(--color-primary);
}

/* Text Styles */
.step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
    margin-bottom: var(--spacing-sm);
}

.step-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

/* Hidden Text Effect */
.improvisation-note {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    transform: translateY(10px);
}

.cca-step:hover .improvisation-note {
    max-height: 50px;
    /* Enough for 2 lines */
    opacity: 1;
    transform: translateY(0);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px dashed rgba(172, 254, 64, 0.3);
}

/* Responsive */
@media (max-width: 900px) {
    .cca-steps-container {
        flex-direction: column;
        align-items: center;
    }

    .cca-steps-container::before {
        width: 2px;
        height: auto;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(180deg,
                transparent 0%,
                rgba(103, 157, 243, 0.3) 10%,
                rgba(103, 157, 243, 0.3) 90%,
                transparent 100%);
    }

    .cca-step {
        width: 100%;
        max-width: 400px;
    }
}