/* ==========================================================================
   PÁGINAS DE LÍNEAS DE ACCIÓN (Juventud / Salud y Desarrollo Comunitario)
   Cada página define su color con una clase de tema en <body>.
   ========================================================================== */
body.tema-juventud { --ac:#C97A0E; --ac2:#F0A83F; --ac-osc:#6e3d04; --ac-suave:#FFF3E0; }
body.tema-salud    { --ac:#0090C8; --ac2:#4CC3F0; --ac-osc:#00455f; --ac-suave:#E6F6FD; }

.ln-cont { max-width: 1180px; margin: 0 auto; }
.ln-seccion { padding: 4.5rem 1.5rem; background: #fff; }
.ln-seccion.gris { background: #F8F9FA; }

/* ---------- Revelado al hacer scroll (solo si hay JS) ---------- */
.js .rev { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .rev.vis { opacity: 1; transform: none; }
.js .rev.d1 { transition-delay: .08s; } .js .rev.d2 { transition-delay: .16s; } .js .rev.d3 { transition-delay: .24s; }

/* ---------- HERO ---------- */
.ln-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 7.2rem 1.5rem 7rem; /* deja libre el header fijo */
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--ac-osc) 94%, #000) 0%, color-mix(in srgb, var(--ac-osc) 78%, transparent) 50%, rgba(0,0,0,.2) 100%),
        var(--foto) center / cover no-repeat,
        var(--ac-osc);
}
.ln-hero::before, .ln-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.ln-hero::before { width: 420px; height: 420px; top: -160px; right: -120px; }
.ln-hero::after  { width: 260px; height: 260px; bottom: -120px; left: 30%; }
.ln-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.5rem; align-items: center; }
.ln-volver { display: inline-block; margin-bottom: 1.6rem; color: rgba(255,255,255,.85); font-weight: 600; font-size: .92rem; text-decoration: none; }
.ln-volver:hover { color: #fff; text-decoration: underline; }
.ln-etiqueta { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; margin-bottom: 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; background: var(--ac); border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.ln-hero h1 { margin: 0 0 1rem; font-family: 'Poppins','Inter',sans-serif; font-size: clamp(2.2rem, 5.2vw, 3.8rem); line-height: 1.08; font-weight: 800; text-transform: none; text-shadow: 0 3px 18px rgba(0,0,0,.35); }
.ln-hero .ln-lead { max-width: 620px; margin: 0 0 1.6rem; font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,.95); }
.ln-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.ln-chips li { padding: .45rem 1rem; font-size: .85rem; font-weight: 700; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ln-botones { display: flex; flex-wrap: wrap; gap: .9rem; }
.ln-btn { display: inline-block; padding: .95rem 1.8rem; font-weight: 800; font-size: 1rem; border-radius: 999px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ln-btn:hover { transform: translateY(-3px); }
.ln-btn.claro { color: var(--ac-osc); background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.ln-btn.borde { color: #fff; border: 2px solid rgba(255,255,255,.7); }
.ln-btn.borde:hover { background: rgba(255,255,255,.15); }
.ln-medalla { position: relative; justify-self: center; width: min(320px, 70%); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,255,255,.18), 0 0 0 30px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.4); animation: lnFlota 6s ease-in-out infinite; }
.ln-medalla img { width: 78%; height: 78%; object-fit: contain; }
@keyframes lnFlota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ln-ola { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; }
.ln-ola svg { display: block; width: 100%; height: 70px; }

/* ---------- TÍTULOS DE SECCIÓN ---------- */
.ln-kicker { display: block; margin-bottom: .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
.ln-titulo { margin: 0 0 1rem; font-family: 'Poppins','Inter',sans-serif; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.2; font-weight: 800; color: #1A2530; }
.ln-sub { max-width: 680px; margin: 0 0 2.5rem; color: #4A5568; font-size: 1.05rem; line-height: 1.65; }
.ln-centro { text-align: center; } .ln-centro .ln-sub { margin-inline: auto; }

/* ---------- DE QUÉ TRATA ---------- */
.ln-trata { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.ln-trata p { margin: 0 0 1.1rem; color: #3b4656; font-size: 1.05rem; line-height: 1.75; }
.ln-trata strong { color: var(--ac-osc); }
.ln-destacado { position: relative; overflow: hidden; padding: 2.4rem 2rem; color: #fff; border-radius: 26px; background: linear-gradient(145deg, var(--ac-osc), var(--ac)); box-shadow: 0 22px 44px rgba(0,0,0,.18); }
.ln-destacado::after { content: ""; position: absolute; width: 200px; height: 200px; right: -60px; bottom: -70px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ln-destacado .emoji { display: block; margin-bottom: .6rem; font-size: 3rem; }
.ln-destacado h3 { margin: 0 0 .6rem; font-family: 'Poppins','Inter',sans-serif; font-size: 1.4rem; font-weight: 800; color: #fff; }
.ln-destacado p { margin: 0; position: relative; z-index: 1; color: rgba(255,255,255,.93); font-size: 1rem; line-height: 1.6; }

/* ---------- LÍNEAS DE ACCIÓN ---------- */
.ln-lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.6rem; }
.ln-linea { position: relative; overflow: hidden; padding: 2rem 1.8rem 1.8rem; background: #fff; border: 1px solid #E9ECEF; border-top: 6px solid var(--ac); border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease; }
.ln-linea:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(0,0,0,.12); }
.ln-linea-num { position: absolute; top: .4rem; right: 1.2rem; font-family: 'Poppins','Inter',sans-serif; font-size: 4.8rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ac) 30%, white); pointer-events: none; }
.ln-linea-icono { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.1rem; font-size: 1.9rem; background: var(--ac-suave); border-radius: 18px; transition: transform .3s ease; }
.ln-linea:hover .ln-linea-icono { transform: rotate(-8deg) scale(1.1); }
.ln-linea h3 { position: relative; margin: 0 0 .5rem; font-family: 'Poppins','Inter',sans-serif; font-size: 1.2rem; font-weight: 800; color: #1A2530; }
.ln-linea > p { position: relative; margin: 0 0 1rem; color: #4A5568; font-size: .96rem; line-height: 1.6; }
.ln-linea ul { list-style: none; margin: 0; padding: 0; }
.ln-linea li { position: relative; padding: .42rem 0 .42rem 1.9rem; font-size: .93rem; line-height: 1.45; color: #2d3748; border-top: 1px dashed #E2E8F0; }
.ln-linea li::before { content: "✓"; position: absolute; left: 0; top: .42rem; display: grid; place-items: center; width: 20px; height: 20px; font-size: .72rem; font-weight: 800; color: #fff; background: var(--ac); border-radius: 50%; }

/* ---------- BANDA DESTACADA (enlace extra) ---------- */
.ln-linea-mas { display: inline-block; margin-top: 1.1rem; font-weight: 700; font-size: .93rem; color: var(--ac); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease, transform .2s ease; }
.ln-linea-mas:hover { border-bottom-color: var(--ac); transform: translateX(4px); }
.ln-banda { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem; padding: 1.8rem 2rem; color: #fff; border-radius: 22px; background: linear-gradient(120deg, #8B0000, #E50914); box-shadow: 0 16px 34px rgba(229,9,20,.28); }
.ln-banda .emoji { font-size: 2.8rem; animation: latido 1.6s ease-in-out infinite; }
.ln-banda div { flex: 1; min-width: 220px; }
.ln-banda h3 { margin: 0 0 .3rem; font-family: 'Poppins','Inter',sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; }
.ln-banda p { margin: 0; color: rgba(255,255,255,.92); font-size: .98rem; line-height: 1.5; }

/* ---------- PASOS ---------- */
.ln-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem; counter-reset: paso; }
.ln-paso { position: relative; padding: 2.6rem 1.5rem 1.6rem; text-align: center; background: #fff; border: 1px solid #E9ECEF; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.ln-paso::before { counter-increment: paso; content: counter(paso); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 50px; height: 50px; font-family: 'Poppins','Inter',sans-serif; font-size: 1.4rem; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--ac2), var(--ac)); border-radius: 50%; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.ln-paso h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; color: #1A2530; }
.ln-paso p { margin: 0; font-size: .93rem; line-height: 1.55; color: #4A5568; }

/* ---------- LLAMADO FINAL ---------- */
.ln-cta { position: relative; overflow: hidden; padding: 4rem 1.5rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--ac-osc), var(--ac)); }
.ln-cta::before, .ln-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.ln-cta::before { width: 340px; height: 340px; top: -150px; left: -90px; } .ln-cta::after { width: 240px; height: 240px; bottom: -110px; right: -50px; }
.ln-cta > * { position: relative; z-index: 1; }
.ln-cta h2 { margin: 0 0 .8rem; font-family: 'Poppins','Inter',sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; color: #fff; }
.ln-cta p { max-width: 600px; margin: 0 auto 1.8rem; font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,.93); }
.ln-cta .ln-btn.claro { font-size: 1.1rem; padding: 1.05rem 2.3rem; animation: lnPulso 2.2s infinite; }
@keyframes lnPulso { 0% { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 18px rgba(255,255,255,0); } 100% { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(255,255,255,0); } }

/* ---------- CONTACTO Y RELACIONADOS ---------- */
.ln-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.ln-ctarjeta { padding: 1.6rem; background: #fff; border: 1px solid #E9ECEF; border-left: 6px solid var(--ac); border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.ln-ctarjeta h3 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 800; color: var(--ac-osc); }
.ln-ctarjeta p { margin: 0; font-size: .96rem; line-height: 1.55; color: #3b4656; }
.ln-relacionados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.ln-rel { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; text-decoration: none; color: #1A2530; background: #fff; border: 1px solid #E9ECEF; border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ln-rel:hover { transform: translateY(-4px); border-color: var(--ac); box-shadow: 0 12px 26px rgba(0,0,0,.1); }
.ln-rel .emoji { display: grid; place-items: center; width: 52px; height: 52px; font-size: 1.6rem; background: var(--ac-suave); border-radius: 14px; }
.ln-rel strong { display: block; font-size: .98rem; }
.ln-rel span.s { font-size: .85rem; color: #5a6676; }

/* ---------- MÓVIL ---------- */
@media (max-width: 900px) {
    .ln-hero { padding: 7rem 1.2rem 6rem; }
    .ln-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ln-medalla { order: -1; width: 190px; margin-top: .8rem; box-shadow: 0 0 0 9px rgba(255,255,255,.18), 0 0 0 20px rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.4); }
    .ln-medalla img { width: 78%; height: 78%; }
    .ln-hero .ln-lead { font-size: 1.05rem; }
    .ln-trata { grid-template-columns: 1fr; gap: 2rem; }
    .ln-seccion { padding: 3.2rem 1.2rem; }
    .ln-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ln-medalla, .ln-banda .emoji, .ln-cta .ln-btn.claro { animation: none; }
    .js .rev { opacity: 1; transform: none; transition: none; }
}

/* Temas de los otros dos programas */
body.tema-gred       { --ac:#D0070F; --ac2:#FF5A5F; --ac-osc:#6e0006; --ac-suave:#FDE8E9; }
body.tema-principios { --ac:#365F86; --ac2:#6F9CC4; --ac-osc:#0f1b27; --ac-suave:#E8EFF6; }

/* 5 líneas: 3 arriba y 2 centradas abajo (escritorio) */
@media (min-width: 981px) {
    .ln-lineas.n5 { grid-template-columns: repeat(6, 1fr); }
    .ln-lineas.n5 .ln-linea { grid-column: span 2; }
    .ln-lineas.n5 .ln-linea:nth-child(n+4) { grid-column: span 3; }
}

/* Pantallas muy pequeñas: medalla aún más compacta */
@media (max-width: 400px) {
    .ln-medalla { width: 168px; }
    .ln-hero h1 { font-size: 2rem; }
}