/* ==========================================================================
   GRED / SALUD · Páginas de detalle de cada línea de acción
   Reutiliza los componentes existentes:
     ln-*  -> ../lineas.css      (portada, secciones, tarjetas, pasos, CTA)
     dx-*  -> dinamico.css       (cifras animadas, cinta, barra de progreso)
     r3/reto -> juv-lineas.css   (tarjetas que giran y reto con anillo)
   Aquí solo se define la paleta de cada línea y la portada.
   ========================================================================== */

/* ---------- Paleta por línea ---------- */
body.l-gred1 { --ac:#D0070F; --ac2:#FF5A5F; --ac-osc:#5c0006; --ac-suave:#FDE8E9; }
body.l-gred2 { --ac:#E0581B; --ac2:#FF9A4D; --ac-osc:#4a1a04; --ac-suave:#FDEEE2; }
body.l-gred3 { --ac:#2F5D8C; --ac2:#5C9BD1; --ac-osc:#0b2138; --ac-suave:#E7F0F9; }
body.l-gred4 { --ac:#4E7A2E; --ac2:#8CBE5E; --ac-osc:#152608; --ac-suave:#EDF5E4; }
body.l-gred5 { --ac:#B3122B; --ac2:#F04E63; --ac-osc:#47000c; --ac-suave:#FCE7EB; }
body.l-sal1  { --ac:#7B4BB7; --ac2:#B08CE0; --ac-osc:#1e0f33; --ac-suave:#F0E9FA; }
body.l-sal2  { --ac:#1F9D6B; --ac2:#54D6A0; --ac-osc:#05291c; --ac-suave:#E4F7EF; }
body.l-sal3  { --ac:#0090C8; --ac2:#4CC3F0; --ac-osc:#003243; --ac-suave:#E6F6FD; }
body.l-sal4  { --ac:#1E6FD9; --ac2:#5FA8FF; --ac-osc:#061a38; --ac-suave:#E7F1FE; }

/* ---------- Portada ---------- */
.ln-hero.gs {
    padding: 6.8rem 1.5rem 6.4rem;
    background:
        radial-gradient(900px 520px at 84% 38%, color-mix(in srgb, var(--ac2) 42%, transparent), transparent 70%),
        radial-gradient(600px 380px at 8% 100%, color-mix(in srgb, var(--ac) 55%, transparent), transparent 70%),
        linear-gradient(155deg, var(--ac-osc) 0%, var(--ac) 70%, var(--ac2) 145%);
}
.ln-hero.gs h1 { text-wrap: balance; }

/* Medalla: círculo de vidrio con el ícono de la línea (sin imágenes extra) */
.gs-medalla {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(300px, 68%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 62%),
        rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow:
        0 0 0 14px rgba(255, 255, 255, 0.08),
        0 30px 60px rgba(0, 0, 0, 0.42),
        inset 0 0 60px rgba(255, 255, 255, 0.12);
    animation: lnFlota 6s ease-in-out infinite;
}
.gs-medalla span {
    font-size: clamp(4.2rem, 9vw, 6.2rem);
    line-height: 1;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.gs-medalla::after {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    animation: gsGira 26s linear infinite;
}
@keyframes gsGira { to { transform: rotate(360deg); } }

/* ---------- Ajustes finos de los componentes reutilizados ---------- */
.dx-marquee { margin-top: 2.4rem; }
.ln-lineas { align-items: stretch; }
.ln-linea { height: 100%; }

/* Tres líneas = tres columnas en escritorio (si no, la última queda sola) */
@media (min-width: 1000px) {
    #acciones .ln-lineas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* En tablet las 4 cifras se salían de la pantalla */
@media (max-width: 900px) {
    .dx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ln-linea-icono { background: var(--ac-suave); }
.reto-anillo .prog { stroke: var(--ac); }
.reto-anillo .centro { color: var(--ac-osc); }

@media (max-width: 900px) {
    .ln-hero.gs { padding: 6.4rem 1.2rem 5.6rem; }
    .gs-medalla { order: -1; width: 176px; margin-top: 0.6rem; }
    .gs-medalla::after { inset: -14px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-medalla,
    .gs-medalla::after { animation: none; }
}