Para que hable el rojo de marca en vez de violeta,
cambiá el style a: --tct-radar-accent: var(--primary);
========================================================= */
.tct-radar{
position:relative;
width:100%; height:100%;
min-height:260px;
background-color:#09090b;
background-image:
linear-gradient(rgba(139,92,246,.1) .1em, transparent .1em),
linear-gradient(90deg, rgba(139,92,246,.1) .1em, transparent .1em);
background-size:3em 3em;
overflow:hidden;
border-radius:20px;
}
.tct-radar::before{
content:"";
position:absolute;
top:50%; left:50%;
width:150%; height:150%;
transform:translate(-50%,-50%);
background:repeating-radial-gradient(circle, transparent 0, transparent 2.9em, rgba(139,92,246,.2) 3em);
z-index:1;
}
.tct-radar::after{
content:"";
position:absolute;
top:50%; left:50%;
width:40em; height:40em;
margin-top:-20em; margin-left:-20em;
border-radius:50%;
background:conic-gradient(from 0deg, transparent 75%, var(--tct-radar-accent, #8b5cf6) 100%);
animation:tct-radar-spin 4s linear infinite;
z-index:2;
}
.tct-radar-center{
position:absolute; top:50%; left:50%;
width:1em; height:1em;
transform:translate(-50%,-50%);
background-color:var(--tct-radar-accent, #a78bfa);
border-radius:50%;
z-index:3;
animation:tct-pulse-dot 2s ease-in-out infinite;
}
@keyframes tct-radar-spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@keyframes tct-pulse-dot{
0%, 100%{ box-shadow:0 0 .8em .2em rgba(139,92,246,.6); }
50%{ box-shadow:0 0 2em .5em rgba(139,92,246,1); }
}
/* =========================================================
3b) RADAR COMO FONDO DE SECCIÓN COMPLETA
Esto es lo que va en Cobertura: el radar detrás de TODO
el contenido de la sección, no como panel aparte.
Uso: agregá la clase directo a la sección:
...tu contenido normal...
No hace falta tocar nada más del HTML: el color de texto
ya queda en blanco/gris claro para que se lea sobre el
fondo oscuro, y usa el rojo de marca en el barrido.
========================================================= */
.radar-field{
position:relative;
overflow:hidden;
background-color:#0c0708;
background-image:
linear-gradient(rgba(225,38,28,.08) .1em, transparent .1em),
linear-gradient(90deg, rgba(225,38,28,.08) .1em, transparent .1em);
background-size:3em 3em;
color:#EDE0DE;
}
.radar-field::before{
content:"";
position:absolute;
top:50%; left:50%;
width:220%; height:220%;
transform:translate(-50%,-50%);
background:repeating-radial-gradient(circle, transparent 0, transparent 2.6em, rgba(225,38,28,.14) 2.9em);
z-index:0;
pointer-events:none;
}
.radar-field::after{
content:"";
position:absolute;
top:50%; left:50%;
width:70em; height:70em;
margin-top:-35em; margin-left:-35em;
border-radius:50%;
background:conic-gradient(from 0deg, transparent 80%, rgba(225,38,28,.55) 100%);
animation:tct-radar-spin 7s linear infinite;
z-index:0;
pointer-events:none;
}
.radar-field > .wrap{ position:relative; z-index:2; }
.radar-field h1, .radar-field h2, .radar-field h3{ color:#fff; }
.radar-field p{ color:#C9BCB9; }
.radar-field .tag{ color:var(--primary-light, #FF6B5B); }
.radar-field .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.radar-field .btn-ghost:hover{ border-color:var(--primary); color:var(--primary-light, #FF6B5B); }
.radar-field .hero-stats div b{ color:#fff; }
.radar-field .hero-stats div span{ color:#C9BCB9; }
@media (prefers-reduced-motion: reduce){
.radar-field::after{ animation:none; }
}
/* =========================================================
4) TÍTULO NEÓN "TECTELIN"
El rojo del efecto (#f00) coincide con tu --primary,
así que queda coherente con la marca tal cual.
HTML sugerido (por ejemplo, arriba del todo del hero,
o como intro de página completa):