/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 26 2026 | 04:59:04 */
/* =========================================

   SECCIÓN: EL RADAR (LA SOLUCIÓN)

   ========================================= */



.radar-section {

    padding: 100px 5%;

    background-color: var(--bg-color); /* Usamos tu variable de fondo */

    position: relative;

    z-index: 2;

}



.text-center {

    text-align: center;

    margin-bottom: 20px;

}



.radar-title {

    font-family: var(--font-head);

    font-size: clamp(2.5rem, 5vw, 4rem);

    text-align: center;

    margin-bottom: 80px;

    text-transform: uppercase;

    line-height: 1.1;

}



.radar-title span {

    color: var(--accent-secondary); /* Cian para contrastar con el verde de arriba */

}



/* --- GRID DE LOS 4 PILARES --- */

.radar-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 30px;

    max-width: 1200px;

    margin: 0 auto;

}



/* --- TARJETAS TÁCTICAS --- */

.radar-card {

    background: rgba(10, 15, 30, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.05);

    padding: 40px 30px;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(5px);

    transition: transform 0.3s ease, border-color 0.3s ease;

}



.radar-card:hover {

    transform: translateY(-5px);

    border-color: rgba(0, 243, 255, 0.3);

}



/* Aseguramos que el contenido esté por encima de las animaciones de fondo */

.card-content {

    position: relative;

    z-index: 2;

}



/* --- ESQUINAS ESTILO "MIRA DE CÁMARA/FRANCOTIRADOR" --- */

.card-borders {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    pointer-events: none;

    z-index: 3;

}



.card-borders::before, .card-borders::after {

    content: '';

    position: absolute;

    width: 25px; height: 25px;

    transition: var(--transition);

}



/* Esquina superior izquierda */

.card-borders::before {

    top: 0; left: 0;

    border-top: 2px solid var(--accent-color);

    border-left: 2px solid var(--accent-color);

}



/* Esquina inferior derecha */

.card-borders::after {

    bottom: 0; right: 0;

    border-bottom: 2px solid var(--accent-color);

    border-right: 2px solid var(--accent-color);

}



.radar-card:hover .card-borders::before,

.radar-card:hover .card-borders::after {

    width: 40px; 

    height: 40px;

    border-color: var(--accent-secondary); /* Cambia a cian en hover */

}



/* --- EFECTO BARRIDO DE RADAR (Pura magia CSS) --- */

.radar-card::before {

    content: '';

    position: absolute;

    top: -50%; left: -50%;

    width: 200%; height: 200%;

    background: conic-gradient(

        from 0deg, 

        transparent 70%, 

        rgba(0, 243, 255, 0.05) 80%, 

        rgba(0, 243, 255, 0.4) 100%

    );

    animation: radar-spin 4s linear infinite;

    opacity: 0; 

    transition: opacity 0.5s ease;

    z-index: 1;

}



.radar-card:hover::before {

    opacity: 1; /* El radar empieza a girar cuando pasas el mouse */

}



@keyframes radar-spin {

    100% { transform: rotate(360deg); }

}



/* --- TEXTOS E INDICADORES --- */

.radar-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    padding-bottom: 15px;

}



.radar-header h3 {

    font-family: var(--font-head);

    font-size: 1.5rem;

    letter-spacing: 1px;

    margin: 0;

    color: #fff;

}



.radar-subtitle {

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--accent-color);

    margin-bottom: 10px;

}



.radar-desc {

    font-size: 1rem;

    color: #a0a0a0;

    line-height: 1.6;

}



/* Punto parpadeante de "Grabación/Activo" */

.blinking-dot {

    width: 10px;

    height: 10px;

    background-color: var(--accent-color);

    border-radius: 50%;

    box-shadow: 0 0 10px var(--accent-color);

    animation: blink 1.5s infinite;

}



.cyan-dot {

    background-color: var(--accent-secondary);

    box-shadow: 0 0 10px var(--accent-secondary);

}



@keyframes blink {

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

    50% { opacity: 0.4; transform: scale(0.8); }

}