/* ============================================================
   Home — COLECTA IASD Francisco Bolognesi
   Depende de theme.css (tokens + componentes)
   ============================================================ */

/* --------------------------- Banner de video --------------------------- */
.video-banner{position:relative;overflow:hidden;min-height:calc(100vh - var(--header-h));display:flex;}
.video-banner__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.video-banner__overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center; background: linear-gradient(180deg, #102a377a, #00000042);}
.video-banner__caption{position:relative;z-index:2;text-align:center;color:#fff;max-width:60rem;margin:0;padding:var(--space-8) var(--space-5) var(--space-10);}
.video-banner__eyebrow{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.92;margin-bottom:var(--space-4); text-shadow: 0 0 5px #009688, 0 0 10px #009688, 0 0 20px #009688; font-family: sans-serif;}
.video-banner__title{font-family:var(--font-head);font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:0 0 var(--space-6);font-size:clamp(2.1rem,6vw,4.2rem); text-shadow: 0 0 5px #009688, 0 0 10px #009688, 0 0 20px #009688;}
.video-banner__title em{font-style:normal;color:var(--accent);}
.video-banner__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3);}
@media (max-width:640px){
    .video-banner{min-height:80vh;}
    .video-banner__title{font-size:clamp(1.8rem,8vw,2.6rem);}
}
@media (prefers-reduced-motion:reduce){
    .video-banner__video{display:none;}
    .video-banner{background:var(--brand-dark);}
}

/* --------------------------- Hero --------------------------- */
.hero{
    position:relative;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(0,137,123,.10), transparent 60%),
        linear-gradient(180deg, var(--brand-50), var(--bg));
    padding:var(--space-10) 0 var(--space-8);
    overflow:hidden;
}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-8);align-items:center;}
.hero__title{font-size:var(--fs-3xl);font-weight:700;margin:0 0 var(--space-4);}
.hero__title em{color:var(--brand);font-style:normal;}
.hero__lead{font-size:var(--fs-lg);color:var(--muted);margin-bottom:var(--space-5);max-width:34rem;}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5);}
.hero__media{display:flex;flex-direction:column;gap:var(--space-5);}

/* Tarjeta de avance de la meta */
.goal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6);}
.goal-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);}
.goal-card__period{font-family:var(--font-head);font-weight:600;font-size:var(--fs-xs);color:var(--brand);text-transform:uppercase;letter-spacing:.1em;}
.goal-card__pct{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg);color:var(--brand-dark);font-variant-numeric:tabular-nums;line-height:1;}
.goal-card__raised{display:flex;align-items:baseline;gap:.18em;margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,6vw,2.8rem);line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.goal-card__raised .cur{font-size:.45em;font-weight:700;color:var(--muted);}
.goal-card__sub{margin:var(--space-2) 0 var(--space-4);font-size:var(--fs-sm);color:var(--muted);}
.goal-card__sub strong{color:var(--text);font-weight:700;}
.goal-card__foot{margin:var(--space-3) 0 0;font-size:var(--fs-sm);color:var(--muted);text-align:center;}
.goal-card__foot strong{color:var(--accent-dark);font-weight:700;}

/* --------------------------- Pagos / Donar --------------------------- */
.donate{background:var(--surface-2);}
.pay-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-5);}
.pay-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--space-6);text-align:center;}
.pay-card h3{font-size:var(--fs-lg);color:var(--brand-dark);margin-bottom:var(--space-4);}
.pay-card .bank-logo{height:46px;width:auto;margin:0 auto var(--space-4);object-fit:contain;}
.pay-card .qr{width:170px;height:170px;margin:0 auto var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);object-fit:cover;}
.pay-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px dashed var(--border);text-align:left;}
.pay-row:first-of-type{border-top:0;}
.pay-row .k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.pay-row .v{font-family:var(--font-head);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);}
.pay-card .phone{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg);color:var(--brand-dark);letter-spacing:.02em;}

/* --------------------------- Versículo / banda --------------------------- */
.verse{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;text-align:center;}
.verse blockquote{max-width:52rem;margin:0 auto;font-family:var(--font-head);font-weight:500;font-size:var(--fs-xl);line-height:1.4;}
.verse cite{display:block;margin-top:var(--space-4);font-style:normal;font-size:var(--fs-md);color:rgba(255,255,255,.8);}

/* --------------------------- Transparencia --------------------------- */
.transparency .card{display:flex;flex-direction:column;}
.transparency .card .btn{margin-top:auto;align-self:flex-start;}

/* --------------------------- Testimonios --------------------------- */
.testimonials{background:var(--surface-2);}
.testimonial{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.testimonial .media-embed{border-radius:0;box-shadow:none;}
.testimonial__name{font-family:var(--font-head);font-weight:600;text-align:center;padding:var(--space-4);color:var(--brand-dark);}

@media(max-width:760px){
    .hero__grid{grid-template-columns:1fr;}
    .pay-grid{grid-template-columns:1fr;}
    .hero__cta .btn{flex:1;}
}