/**
 * como-certificar.css — Certification Process Funnel Page Styles
 * Complements Tailwind utility classes with custom animations & effects
 */
@layer pages {

/* ── Alpine.js cloak ── */
[x-cloak] {
    display: none !important;
}

/* ── Hero background grid ── */
.cc-hero .gc-living-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.35; }
}

/* ── Smooth section entrance ── */
.cc-hero,
.cc-stats,
.cc-process,
.cc-modalities,
.cc-requirements,
.cc-differentiators,
.cc-standards,
.cc-comparison,
.cc-cycle,
.cc-faq,
.cc-cta-final {
    position: relative;
}

/* ── Timeline progress bar animation ── */
.cc-process .transition-all {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Timeline step pulse ── */
@keyframes stepPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(166, 33, 38, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(166, 33, 38, 0); }
}

.cc-process button[aria-current="true"] > span:first-child {
    animation: stepPulse 2s ease-in-out infinite;
}

/* ── Comparison table zebra + hover ── */
.cc-comparison table tbody tr {
    transition: background-color 0.15s ease;
}

.cc-comparison table tbody tr:hover {
    background-color: rgba(166, 33, 38, 0.04);
}

/* ── Cycle connector line gradient ── */
.cc-cycle .absolute.h-1 {
    background: linear-gradient(
        to right,
        #a62126 0%,
        #a62126 25%,
        #3B82F6 25%,
        #3B82F6 75%,
        #10B981 75%,
        #10B981 100%
    );
}

/* ── FAQ accordion smooth expand ── */
.cc-faq [x-show] {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── CTA final background pattern shimmer ── */
.cc-cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(166, 33, 38, 0.03) 50%,
        transparent 100%
    );
    animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ── Stats bar counter animation ── */
.cc-stats .text-3xl,
.cc-stats .text-2xl {
    font-variant-numeric: tabular-nums;
}

/* ── Modality card hover lift ── */
.cc-modalities .rounded-2xl {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cc-modalities .rounded-2xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ── Standards grid card hover ── */
.cc-standards .rounded-xl {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cc-standards .rounded-xl:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ── Differentiator card glow on hover ── */
.cc-differentiators .rounded-2xl {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cc-differentiators .rounded-2xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(166, 33, 38, 0.08);
    border-color: rgba(166, 33, 38, 0.3);
}

/* ── Requirement badge shimmer ── */
.cc-requirements .bg-emerald-100 {
    position: relative;
    overflow: hidden;
}

.cc-requirements .bg-emerald-100::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ── Mini timeline dots in hero ── */
.cc-hero .flex.items-center.gap-3 .rounded-full {
    transition: transform 0.2s ease;
}

.cc-hero .flex.items-center.gap-3:hover .rounded-full {
    transform: scale(1.15);
}

/* ── Responsive adjustments ── */
@media (max-width: 640px) {
    .cc-process .flex.items-center.gap-1 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cc-process .flex.items-center.gap-1::-webkit-scrollbar {
        display: none;
    }

    .cc-comparison table {
        font-size: 0.875rem;
    }

    .cc-cycle .grid {
        gap: 1.5rem;
    }
}

/* ── Print styles ── */
@media print {
    .cc-hero,
    .cc-cta-final {
        background: #fff !important;
        color: #000 !important;
    }

    .cc-stats {
        border: 1px solid #ccc;
    }

    .cc-comparison table {
        page-break-inside: avoid;
    }
}

} /* end @layer pages */