/* ==========================================================================
   LÍNEAS DE ACCIÓN DE JUVENTUD — temas y widgets interactivos
   (Cuidado Ambiental / Innovación Social / Cultura de Paz)
   Se carga después de lineas.css y dinamico.css.
   ========================================================================== */
body.tema-ambiental { --ac:#2E8B57; --ac2:#7BD389; --ac-osc:#0F3D26; --ac-suave:#E6F6EC; }
body.tema-paz       { --ac:#0E7C9B; --ac2:#5CC8E0; --ac-osc:#08333F; --ac-suave:#E3F5FA; }

.juv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; font: 700 .95rem 'Inter',sans-serif; color: #fff; text-decoration: none; background: var(--ac); border: 2px solid var(--ac); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 18px color-mix(in srgb, var(--ac) 35%, transparent); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.juv-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px color-mix(in srgb, var(--ac) 40%, transparent); }
.juv-btn.sec { color: var(--ac-osc); background: #fff; box-shadow: none; }
.juv-btn.sec:hover { background: var(--ac-suave); }
.juv-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.juv-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* ---------- Tarjetas "qué hacemos" ---------- */
.juv-hace { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.juv-hace .ln-linea p { margin: .5rem 0 0; font-size: .96rem; line-height: 1.55; color: #4A5568; }

/* ---------- Las 3R (tarjetas que giran) ---------- */
.r3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.r3-card { perspective: 1000px; height: 290px; cursor: pointer; outline: none; }
.r3-int { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,.8,.3,1); transform-style: preserve-3d; }
.r3-card:hover .r3-int, .r3-card:focus-visible .r3-int, .r3-card.gira .r3-int { transform: rotateY(180deg); }
.r3-cara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.6rem; text-align: center; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.r3-frente { color: #fff; background: linear-gradient(150deg, var(--ac), var(--ac-osc)); box-shadow: 0 16px 34px color-mix(in srgb, var(--ac) 35%, transparent); }
.r3-frente .gran { font: 800 4.6rem/1 'Poppins','Inter',sans-serif; opacity: .95; }
.r3-frente h3 { margin: .3rem 0 0; font: 800 1.5rem 'Poppins','Inter',sans-serif; color: #fff; }
.r3-frente small { margin-top: .8rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.r3-dorso { transform: rotateY(180deg); background: #fff; border: 2px solid var(--ac); box-shadow: 0 16px 34px rgba(0,0,0,.1); }
.r3-dorso h4 { margin: 0 0 .6rem; font: 800 1.1rem 'Poppins','Inter',sans-serif; color: var(--ac-osc); }
.r3-dorso p { margin: 0; font-size: .96rem; line-height: 1.55; color: #3b4656; }

/* ---------- Reto ambiental ---------- */
.reto { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: start; margin-top: 2.2rem; }
.reto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.reto-lista label { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; background: #fff; border: 2px solid #E6ECF2; border-radius: 16px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.reto-lista label:hover { border-color: var(--ac); transform: translateX(5px); }
.reto-lista input { position: absolute; opacity: 0; pointer-events: none; }
.reto-lista .caja { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: transparent; font-weight: 800; background: #fff; border: 3px solid #C9D4DF; border-radius: 9px; transition: all .25s cubic-bezier(.3,1.6,.5,1); }
.reto-lista .caja::before { content: "✓"; }
.reto-lista .txt { flex: 1; font-size: .98rem; font-weight: 600; color: #2d3748; transition: color .2s ease; }
.reto-lista .ico { font-size: 1.5rem; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.reto-lista input:checked ~ .caja { color: #fff; background: var(--ac); border-color: var(--ac); transform: scale(1.12) rotate(-6deg); }
.reto-lista input:checked ~ .txt { color: var(--ac-osc); }
.reto-lista input:checked ~ .ico { transform: scale(1.3) rotate(-12deg); }
.reto-lista label:has(input:checked) { background: var(--ac-suave); border-color: var(--ac); }
.reto-lista input:focus-visible ~ .caja { outline: 3px solid var(--ac2); outline-offset: 2px; }
.reto-panel { position: sticky; top: 100px; padding: 1.8rem 1.5rem; text-align: center; background: #fff; border: 1px solid #E9ECEF; border-top: 6px solid var(--ac); border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.08); }
.reto-anillo { position: relative; width: 170px; height: 170px; margin: 0 auto 1rem; }
.reto-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reto-anillo circle { fill: none; stroke-width: 11; }
.reto-anillo .fondo { stroke: #E6ECF2; }
.reto-anillo .prog { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1), stroke .3s ease; }
.reto-anillo .centro { position: absolute; inset: 0; display: grid; place-content: center; font: 800 2.6rem/1 'Poppins','Inter',sans-serif; color: var(--ac-osc); }
.reto-anillo .centro small { display: block; margin-top: .2rem; font: 700 .85rem 'Inter',sans-serif; color: #6B7A8A; }
.reto-msg { min-height: 3.2em; margin: 0 0 1rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #2d3748; }
.reto-panel.completo { animation: juvBrinco .7s ease; }
.juv-confeti { position: fixed; z-index: 9998; top: -30px; pointer-events: none; font-size: 1.6rem; animation: juvCae linear forwards; }

/* ---------- Pasos de innovación ---------- */
.ino { margin-top: 2.2rem; }
.ino-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.4rem; }
.ino-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; font: 700 .93rem 'Inter',sans-serif; color: #1A2530; background: #fff; border: 2px solid #D9E2EC; border-radius: 999px; cursor: pointer; transition: all .2s ease; }
.ino-tab b { display: grid; place-items: center; width: 24px; height: 24px; font-size: .8rem; color: #fff; background: #A9B7C6; border-radius: 50%; transition: background .2s ease; }
.ino-tab:hover { border-color: var(--ac); transform: translateY(-3px); }
.ino-tab[aria-selected="true"] { color: #fff; background: var(--ac); border-color: var(--ac); box-shadow: 0 8px 18px color-mix(in srgb, var(--ac) 35%, transparent); }
.ino-tab[aria-selected="true"] b { color: var(--ac); background: #fff; }
.ino-tab.hecho b { background: var(--ac); }
.ino-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; max-width: 900px; margin: 0 auto; padding: 2rem 2.2rem; background: #fff; border: 1px solid #E9ECEF; border-left: 8px solid var(--ac); border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.07); }
.ino-panel[hidden] { display: none; }
.ino-panel:not([hidden]) { animation: juvPanel .5s ease; }
.ino-panel .ico { display: grid; place-items: center; width: 96px; height: 96px; font-size: 3rem; background: var(--ac-suave); border-radius: 26px; animation: juvFlota 3.5s ease-in-out infinite; }
.ino-panel h3 { margin: 0 0 .4rem; font: 800 1.45rem 'Poppins','Inter',sans-serif; color: #1A2530; }
.ino-panel p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.6; color: #4A5568; }
.ino-panel .guia { padding: .8rem 1rem; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--ac-osc); background: var(--ac-suave); border-radius: 12px; }
.ino-panel .num-fondo { position: absolute; right: 18px; top: -18px; font: 800 9rem/1 'Poppins','Inter',sans-serif; color: color-mix(in srgb, var(--ac) 8%, transparent); pointer-events: none; }
.ino-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; }
.ino-barra { flex: 0 1 260px; height: 8px; background: #E6ECF2; border-radius: 8px; overflow: hidden; }
.ino-barra i { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--ac), var(--ac2)); border-radius: 8px; transition: width .5s ease; }

/* ---------- Arma tu idea ---------- */
.idea { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; align-items: start; margin-top: 2.2rem; }
.idea-campos { display: grid; gap: 1rem; padding: 1.8rem; background: #fff; border: 1px solid #E9ECEF; border-radius: 22px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.idea-campos label { display: block; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-osc); }
.idea-campos input, .idea-campos textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .35rem; padding: .8rem 1rem; font: 500 .98rem 'Inter',sans-serif; color: #1A2530; background: #F8FAFC; border: 2px solid #E1E8EF; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.idea-campos textarea { min-height: 84px; resize: vertical; }
.idea-campos input:focus, .idea-campos textarea:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 18%, transparent); }
.idea-ejemplos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.idea-ejemplos small { font-weight: 700; color: #6B7A8A; }
.idea-ejemplos button { padding: .4rem .85rem; font: 600 .82rem 'Inter',sans-serif; color: var(--ac-osc); background: var(--ac-suave); border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: all .2s ease; }
.idea-ejemplos button:hover { background: var(--ac); color: #fff; transform: translateY(-2px); }
.idea-tarjeta { position: sticky; top: 100px; overflow: hidden; padding: 2rem 1.8rem; color: #fff; background: linear-gradient(150deg, var(--ac), var(--ac-osc)); border-radius: 24px; box-shadow: 0 22px 44px color-mix(in srgb, var(--ac) 40%, transparent); }
.idea-tarjeta::after { content: "💡"; position: absolute; right: -10px; bottom: -22px; font-size: 7rem; opacity: .13; }
.idea-tarjeta h3 { margin: 0 0 1rem; font: 800 .85rem 'Inter',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.idea-tarjeta p { position: relative; z-index: 1; margin: 0; font: 600 1.15rem/1.7 'Poppins','Inter',sans-serif; }
.idea-tarjeta b { padding: 0 .25rem; color: var(--ac-osc); background: #fff; border-radius: 6px; }
.idea-tarjeta b.vacio { color: rgba(255,255,255,.75); background: rgba(255,255,255,.16); border: 1px dashed rgba(255,255,255,.5); font-weight: 600; }
.idea-tarjeta .juv-acciones { position: relative; z-index: 1; margin-top: 1.5rem; }
.idea-tarjeta .juv-btn { color: var(--ac-osc); background: #fff; border-color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.idea-estado { min-height: 1.3em; margin-top: .8rem; font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.9); }

/* ---------- Comunicación no violenta ---------- */
.cnv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; margin-top: 2.4rem; counter-reset: cnv; }
.cnv-card { position: relative; overflow: hidden; padding: 1.8rem 1.5rem 1.5rem; background: #fff; border: 1px solid #E9ECEF; border-radius: 22px; box-shadow: 0 8px 22px rgba(0,0,0,.06); transition: transform .3s ease, box-shadow .3s ease; }
.cnv-card::before { counter-increment: cnv; content: counter(cnv); position: absolute; right: 12px; top: -14px; font: 800 6rem/1 'Poppins','Inter',sans-serif; color: color-mix(in srgb, var(--ac) 10%, transparent); }
.cnv-card .ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .9rem; font-size: 1.8rem; background: var(--ac-suave); border-radius: 18px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.cnv-card:hover .ico { transform: rotate(-10deg) scale(1.15); }
.cnv-card h3 { margin: 0 0 .4rem; font: 800 1.2rem 'Poppins','Inter',sans-serif; color: var(--ac-osc); }
.cnv-card p { margin: 0 0 .9rem; font-size: .94rem; line-height: 1.55; color: #4A5568; }
.cnv-card q { display: block; padding: .7rem .9rem; font-size: .9rem; font-style: italic; line-height: 1.45; color: var(--ac-osc); background: var(--ac-suave); border-left: 4px solid var(--ac); border-radius: 0 10px 10px 0; quotes: none; }
.js .rev.vis.cnv-card:hover { transform: translateY(-8px); box-shadow: 0 20px 38px rgba(0,0,0,.12); }

/* ---------- ¿Qué harías? ---------- */
.esce { max-width: 820px; margin: 2.2rem auto 0; padding: 2rem 2.2rem; background: #fff; border: 1px solid #E9ECEF; border-top: 7px solid var(--ac); border-radius: 24px; box-shadow: 0 18px 38px rgba(0,0,0,.08); }
.esce-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6B7A8A; }
.esce-puntos { display: flex; gap: .4rem; }
.esce-puntos i { width: 26px; height: 8px; background: #E1E8EF; border-radius: 8px; transition: background .3s ease; }
.esce-puntos i.on { background: var(--ac); }
.esce h3 { margin: 0 0 .5rem; font: 800 1.35rem/1.35 'Poppins','Inter',sans-serif; color: #1A2530; }
.esce .escena { margin: 0 0 1.2rem; font-size: 1.02rem; line-height: 1.6; color: #4A5568; }
.esce-ops { display: grid; gap: .7rem; }
.esce-op { display: flex; gap: .8rem; align-items: flex-start; width: 100%; padding: .9rem 1.1rem; text-align: left; font: 600 .98rem/1.45 'Inter',sans-serif; color: #2d3748; background: #F8FAFC; border: 2px solid #E1E8EF; border-radius: 14px; cursor: pointer; transition: all .2s ease; }
.esce-op b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: .85rem; color: #fff; background: #A9B7C6; border-radius: 50%; }
.esce-op:hover:not([disabled]) { border-color: var(--ac); transform: translateX(6px); }
.esce-op.ok { background: #E8F7EE; border-color: #2E9E5B; } .esce-op.ok b { background: #2E9E5B; }
.esce-op.medio { background: #FFF6E0; border-color: #E0A800; } .esce-op.medio b { background: #E0A800; }
.esce-op.mal { background: #FDECEC; border-color: #C62828; } .esce-op.mal b { background: #C62828; }
.esce-op[disabled] { cursor: default; }
.esce-fb { display: none; margin-top: 1rem; padding: 1rem 1.2rem; font-size: .96rem; line-height: 1.55; color: #1A2530; background: var(--ac-suave); border-left: 5px solid var(--ac); border-radius: 12px; }
.esce-fb.ver { display: block; animation: juvPanel .4s ease; }
.esce-pie { display: flex; justify-content: flex-end; margin-top: 1.2rem; }
.esce-fin { text-align: center; }
.esce-fin .gran { font-size: 4rem; animation: juvBrinco .8s ease; }
.esce-fin h3 { font-size: 1.6rem; }
.esce-fin .aviso911 { margin: 1.2rem 0 0; padding: .8rem 1rem; font-size: .9rem; color: #7a1414; background: #FDECEC; border-radius: 12px; }

/* ---------- Festival Drop In por la Paz ---------- */
.fest { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.fest a { position: relative; display: block; overflow: hidden; padding: 1.6rem 1.3rem; text-decoration: none; color: #fff; border-radius: 20px; background: linear-gradient(150deg, var(--ac), var(--ac-osc)); box-shadow: 0 14px 30px color-mix(in srgb, var(--ac) 30%, transparent); transition: transform .3s ease, box-shadow .3s ease; }
.fest a:nth-child(2) { background: linear-gradient(150deg, #7B2FA5, #3A1458); } .fest a:nth-child(3) { background: linear-gradient(150deg, #E4572E, #8E2A10); } .fest a:nth-child(4) { background: linear-gradient(150deg, #2E8B57, #0F3D26); }
.fest a:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 40px rgba(0,0,0,.25); }
.fest .em { display: block; margin-bottom: .6rem; font-size: 2.6rem; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.fest a:hover .em { transform: scale(1.25) rotate(-10deg); }
.fest h3 { margin: 0 0 .3rem; font: 800 1.15rem 'Poppins','Inter',sans-serif; color: #fff; }
.fest p { margin: 0; font-size: .9rem; line-height: 1.45; opacity: .92; }
.fest-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.fest-datos span { padding: .5rem 1rem; font-size: .9rem; font-weight: 700; color: var(--ac-osc); background: var(--ac-suave); border-radius: 999px; }

@keyframes juvBrinco { 0% { transform: scale(1); } 30% { transform: scale(1.08) rotate(-1.5deg); } 60% { transform: scale(.97) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes juvPanel { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes juvFlota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes juvCae { to { transform: translateY(110vh) rotate(540deg); opacity: .9; } }

@media (max-width: 860px) {
  .reto, .idea { grid-template-columns: 1fr; }
  .reto-panel, .idea-tarjeta { position: static; }
  .ino-panel { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; text-align: left; }
  .ino-panel .ico { width: 72px; height: 72px; font-size: 2.2rem; }
  .esce { padding: 1.4rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .r3-int, .ino-panel .ico, .reto-panel.completo, .esce-fin .gran, .juv-confeti { animation: none !important; transition: none !important; }
}