/* --- Candidate Section Redesign --- */

.candidate-section {
    position: relative;
    padding: 5rem 1rem;
    background-color: var(--surface-2);
    /* bg-slate-50 */
    overflow: hidden;
    font-family: var(--font-primary);
    /* Assuming Inter or similar sans-serif */
    color: var(--text-primary);
    /* text-slate-800 */
}

@media (min-width: 640px) {
    .candidate-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .candidate-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* --- Background Decor --- */
.candidate-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.candidate-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    /* blur-3xl */
}

.blob-1 {
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background-color: rgba(36, 80, 176, 0.15);
    /* --color-primario with opacity */
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.blob-2 {
    bottom: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background-color: rgba(37, 150, 190, 0.15);
    /* --color-secundario with opacity */
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* --- Container --- */
.candidate-container {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
}

/* --- Header --- */
.candidate-header {
    text-align: center;
    margin-bottom: 4rem;
}

.candidate-title {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 800;
    /* font-extrabold */
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    background: var(--gradiente-primario);
    /* Use theme gradient */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-secondary);
}

@media (min-width: 768px) {
    .candidate-title {
        font-size: 3rem;
        /* text-5xl */
    }
}

.candidate-subtitle {
    font-size: 1.125rem;
    /* text-lg */
    color: var(--text-secondary);
    /* text-slate-600 */
    max-width: 42rem;
    /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
}

/* --- Grid Layout --- */
.candidate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .candidate-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 
           We remove the fixed height (600px) to allow content to dictate height if needed,
           BUT we want the left column to stretch to match the right column's height.
           CSS Grid does this by default (stretch).
           We just need to ensure the children take up the available height.
        */
        align-items: stretch;
    }
}

/* --- Tilt Card Component --- */
.tilt-card {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.2s ease-out;
    height: 100%;
    /* Ensure it takes full height of grid cell */
}

.tilt-inner {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-xl);
    /* rounded-2xl */
    box-shadow: var(--shadow-main);
    /* shadow-xl */
    border: 1px solid var(--border-color-light);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    /* backdrop-blur-md */
    overflow: hidden;
    transform-style: preserve-3d;
    /* Transformation is handled by JS */
    display: flex;
    /* Ensure content stretches */
    flex-direction: column;
}

.tilt-spotlight {
    pointer-events: none;
    position: absolute;
    inset: -1px;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(37, 150, 190, 0.15), transparent 40%);
    z-index: 20;
}

/* --- Main Visual Column --- */
.candidate-col-main {
    /* On desktop, this needs to be full height */
    height: 100%;
    min-height: 500px;
    /* Minimum height for visual impact */
}

@media (min-width: 1024px) {
    .candidate-col-main {
        grid-column: span 1 / span 1;
        /* It will span 2 rows implicitly if the right side has 2 rows of items? 
           No, the right side is a single column with a grid inside it.
           So the main grid is 3 columns: 1 (left) + 2 (right wrapper).
        */
    }
}

.candidate-main-card {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    overflow: hidden;
    flex: 1;
    /* Grow to fill tilt-inner */
}

/* Main Card Background Image */
.main-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
}

.main-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This ensures the image covers the full area without distortion */
    object-position: center top;
    /* Focus on the face */
    transition: transform 0.7s ease;
}

.candidate-main-card:hover .main-card-bg img {
    transform: scale(1.1);
}

.main-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(36, 80, 176, 0.9), rgba(36, 80, 176, 0.4), transparent);
    /* --color-primario based */
}

/* Main Card Content */
.main-card-content {
    position: relative;
    z-index: 10;
    color: var(--color-blanco);
    transform: translateY(0.5rem);
    transition: transform 0.3s ease;
}

.candidate-main-card:hover .main-card-content {
    transform: translateY(0);
}

.diagnosis-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(37, 150, 190, 0.2);
    /* --color-secundario */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(37, 150, 190, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-secundario);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #cffafe;
    /* text-cyan-100 */
    text-transform: uppercase;
}

.main-card-title {
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-family: var(--font-secondary);
}

.main-card-desc {
    font-size: 0.875rem;
    /* text-sm */
    color: #dbeafe;
    /* text-blue-100 */
    margin-bottom: 1.5rem;
    line-height: 1.625;
}

.btn-evaluacion {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-blanco);
    color: var(--color-primario);
    font-weight: 700;
    border-radius: var(--radius-md);
    /* rounded-xl */
    box-shadow: var(--shadow-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-evaluacion:hover {
    background-color: #ecfeff;
    /* bg-cyan-50 */
    box-shadow: var(--shadow-primario);
    /* shadow-cyan-500/50 */
}

.btn-evaluacion svg {
    transition: transform 0.3s ease;
}

.btn-evaluacion:hover svg {
    transform: translateX(0.25rem);
}

/* --- Criteria Grid Column --- */
.candidate-col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    height: 100%;
}

@media (min-width: 768px) {
    .candidate-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .candidate-col-grid {
        grid-column: span 2 / span 2;
    }
}

/* Criteria Card */
.criteria-card {
    position: relative;
    padding: 1.5rem;
    height: 100%;
    min-height: 14rem;
    /* Reduced min-height slightly */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--card-bg);
}

@media (min-width: 768px) {
    .criteria-card {
        min-height: auto;
    }
}

.criteria-icon-wrapper {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    /* rounded-xl */
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

/* Icon Colors - Using Theme Variables */
.bg-blue {
    background-color: #dbeafe;
    color: var(--color-primario);
}

/* bg-blue-100 text-blue-600 */
.tilt-card:hover .bg-blue {
    background-color: var(--color-primario);
    color: white;
}

.bg-cyan {
    background-color: #cffafe;
    color: var(--color-secundario);
}

/* bg-cyan-100 text-cyan-600 */
.tilt-card:hover .bg-cyan {
    background-color: var(--color-secundario);
    color: white;
}

.bg-indigo {
    background-color: #e0e7ff;
    color: #4f46e5;
}

/* bg-indigo-100 text-indigo-600 */
.tilt-card:hover .bg-indigo {
    background-color: #4f46e5;
    color: white;
}

.bg-emerald {
    background-color: #d1fae5;
    color: #059669;
}

/* bg-emerald-100 text-emerald-600 */
.tilt-card:hover .bg-emerald {
    background-color: #059669;
    color: white;
}

.criteria-title {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    color: var(--text-primary);
    /* text-slate-800 */
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
    font-family: var(--font-secondary);
}

.tilt-card:hover .criteria-title {
    color: var(--color-primario);
}

/* Add other hover colors if needed, or rely on specific parent hovers */

.criteria-desc {
    font-size: 0.875rem;
    /* text-sm */
    color: var(--text-secondary);
    /* text-slate-500 */
    line-height: 1.625;
}

.criteria-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 3.75rem;
    /* text-6xl */
    font-weight: 900;
    color: var(--color-primario);
    /* text-slate-200 */
    opacity: 0.5;
    transition: color 0.3s ease;
    font-family: var(--font-secondary);
}

/* --- Footer --- */
.candidate-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.candidate-footer p {
    text-align: center;
    color: var(--text-secondary);
    /* text-slate-400 */
    font-size: 0.875rem;
}

.candidate-footer a {
    color: var(--color-secundario);
    /* text-blue-500 */
    font-weight: 600;
    text-decoration: none;
}

.candidate-footer a:hover {
    text-decoration: underline;
}