/* === Voluntaria.do — acento AZUL (color real del logo) === */

/* Azules: profundo #0033A8 · principal #0044DB · brillante #2563EB */
.vd-hero { --fjx-accent: #0044DB; }
.fjx-hero.vd-hero { padding-top:180px !important; padding-bottom:44px !important; min-height:0 !important; }
.vd-hero .fjx-eyebrow { color:#0033B0 !important; }
.vd-hero .fjx-btn { background:#0033B0 !important; }
.vd-hero .fjx-btn:hover { background:#0033A8 !important; }
@media (max-width:760px){ .fjx-hero.vd-hero { padding-top:120px !important; } }

.vd-visual{position:relative;width:min(420px,78vw);aspect-ratio:1;margin:0 auto}
.vd-ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed rgba(0,68,219,.4);animation:vd-spin 50s linear infinite}
.vd-core{position:absolute;top:50%;left:50%;width:56%;height:56%;transform:translate(-50%,-50%);display:grid;place-items:center;animation:vd-float 5.5s ease-in-out infinite}
.vd-core img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 40px rgba(0,51,168,.3))}
@keyframes vd-spin{to{transform:rotate(360deg)}}
@keyframes vd-float{0%,100%{margin-top:0}50%{margin-top:-10px}}

/* programa: texto + panel de beneficios */
.vd-prog-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.vd-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 6px; }
.vd-pill { display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px; background:#e6edfd; color:#0033A8; font-weight:800; font-size:13px; border:1px solid rgba(0,68,219,.28); }
.vd-loc { color:#3d4a66; font-weight:600; font-size:14px; flex:1; min-width:220px; }
.vd-panel { background:#f6f8fc; border:1px solid rgba(16,42,67,.08); border-radius:24px; padding:28px; box-shadow:0 20px 50px rgba(16,42,67,.1); }
.vd-panel-label { display:block; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#0033B0; margin-bottom:14px; }
.vd-benef { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.vd-benef li { position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:#243044; font-weight:600; }
.vd-benef li::before { content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background:#0044DB; color:#fff; font-size:12px; font-weight:900; display:grid; place-items:center; }
@media (max-width:900px){ .vd-prog-grid { grid-template-columns:1fr; gap:28px; } }

/* formas de participar */
.vd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.vd-card { padding:22px 18px; border-radius:18px; background:#f6f8fc; border:1px solid rgba(16,42,67,.07); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.vd-card:hover { transform:translateY(-4px); background:#fff; box-shadow:0 14px 32px rgba(0,51,168,.14); }
.vd-card-ico { font-size:28px; }
.vd-card-title { font-family:"Outfit",sans-serif; font-weight:800; font-size:16px; line-height:1.25; margin:10px 0 8px; color:#0a1628; }
.vd-card-desc { font-size:13.5px; line-height:1.55; color:#4b5a75; margin:0; }
@media (max-width:980px){ .vd-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vd-grid { grid-template-columns:1fr; } }

/* fila CTA — degradado azul */
.fjx-cta-row { background:linear-gradient(135deg,#0033A8 0%, #0044DB 100%) !important; }
.fjx-cta-row .fjx-title { max-width:none !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; color:#fff !important; }
.fjx-cta-row .fjx-lead { margin-left:auto !important; margin-right:auto !important; text-align:center !important; max-width:62ch; }
.fjx-cta-row .fjx-btn-light { color:#0033A8 !important; }
.fjx-cta-row .fjx-btn-outline { color:#fff !important; border:2px solid rgba(255,255,255,.75) !important; background:transparent !important; }
.fjx-cta-row .fjx-btn-outline:hover { background:rgba(255,255,255,.16) !important; border-color:#fff !important; color:#fff !important; }