/* Home visual inspired by the approved desktop/mobile reference. */
:root { --page-width:1160px; --home-navy:#073856; --home-gold:#bb811c; }
html { scroll-behavior:smooth; }
body { background:#edf1f4; }
.site-frame { width:100%; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; overflow:hidden; min-height:100vh; }
.top-header { min-height:88px; padding:14px 32px; gap:25px; border-bottom:1px solid #e8edf0; }
.brand { flex:0 1 295px; min-width:180px; }
.brand-logo { width:100%; max-width:295px; max-height:60px; }
.desktop-journey-nav { display:flex; align-items:center; justify-content:center; gap:23px; margin-left:auto; white-space:nowrap; }
.desktop-journey-nav a,.desktop-journey-nav button { background:none; border:0; color:#163f5c; font:600 12px/1.3 Arial,sans-serif; text-decoration:none; padding:18px 0; cursor:pointer; }
.desktop-journey-nav [data-home-nav] { border-bottom:2px solid #ca931f; }
.header-actions { gap:16px; }
.header-account { display:flex; flex:0 0 36px; width:36px; min-height:40px; padding:8px; border:0; order:-1; }
.header-account-copy,.header-account-avatar { display:none; }
.header-account::after { content:'♙'; font-size:25px; }
.header-actions .donate-button { white-space:nowrap; font-size:11px; padding:13px 18px; }
.main-nav { display:none; }
.devotee-main { padding:0 28px 24px; }
.page-title { display:none; }
.welcome-hero { max-width:none; border:0; border-radius:0; box-shadow:none; margin:0 -28px; height:360px; display:block; background:linear-gradient(90deg,rgba(255,252,245,.94),rgba(255,252,245,.8) 30%,rgba(255,252,245,0) 66%),url('../img/fatima-hero.png') center 57%/cover; }
.welcome-copy { padding:42px 7%; max-width:75%; }
.welcome-copy .welcome-eyebrow { font:16px Georgia,serif; color:#315065; margin:0 0 12px; }
.welcome-copy h1 { font:700 clamp(30px,3.4vw,46px)/1.03 Georgia,serif; letter-spacing:-1.2px; color:#083956; }
.welcome-copy h1::after { display:none; }
.welcome-copy h1 em { color:#bd851f; font-weight:400; }
.welcome-copy blockquote { display:block; margin:18px 0 0; max-width:400px; }
.welcome-copy blockquote p { font:italic 15px/1.45 Georgia,serif; color:#31475a; margin:0 0 7px; }
.welcome-copy cite { color:#4c5960; font:12px Georgia,serif; }
.welcome-hero > img { position:absolute; height:390px; width:auto; right:7%; bottom:-48px; opacity:1; filter:drop-shadow(0 3px 8px #46432825); }
.journey-shortcuts { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:15px; margin:-12px -8px 28px; z-index:3; background:#fff; border-radius:12px; box-shadow:0 -3px 15px #11344f08; }
.journey-shortcuts button,.journey-shortcuts a { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 12px; border:1px solid #e8edf1; border-radius:9px; background:linear-gradient(#fff,#fafcfe); text-decoration:none; color:#0a3b5c; cursor:pointer; }
.journey-shortcuts span { width:43px; height:43px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:26px; background:#e4f1fc; color:#0c527a; }
.journey-shortcuts a span { background:#fff0d8; color:#be851c; }
.journey-shortcuts strong { font:700 14px Georgia,serif; }
.journey-shortcuts small { display:block; color:#577087; font:11px/1.4 Arial,sans-serif; margin-top:5px; }
.resources { max-width:none; }
.section-head { text-align:left; margin:0 0 15px; }
.section-head h2 { display:flex; align-items:center; gap:7px; margin:0; font:700 27px Georgia,serif; }
.section-head h2::after { display:inline-block; width:44px; height:2px; margin:4px 0 0 15px; }
.mobile-spiritual { display:none; }
.resource-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.resource-card { position:relative; isolation:isolate; min-height:156px; padding:18px 14px; display:grid; grid-template-columns:27px minmax(0,1fr) 9px; align-items:end; gap:10px; border:0; border-radius:8px; overflow:hidden; color:#fff; background:#253c43; box-shadow:0 3px 8px #13354915; }
.resource-card::before { content:''; position:absolute; inset:0; z-index:-2; background-image:url('../img/devotional-atlas.png'); background-size:400% 300%; background-position:var(--tile-x,0%) var(--tile-y,0%); transition:filter .2s; }
.resource-card::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#091e2aeb, #091e2a75 40%, #091e2a00 85%); }
.resource-card:hover::before { filter:brightness(1.13); }
.resource-card .resource-icon { background:none; color:#fff; height:34px; width:27px; margin-bottom:9px; }
.resource-icon svg { width:25px; height:25px; }
.resource-card .resource-copy strong { color:#fff; font:500 16px/1.16 Georgia,serif; }
.resource-card .resource-copy small { color:#f2f5f6; font:11px/1.35 Arial,sans-serif; margin-top:5px; }
.resource-arrow { color:#fff; align-self:end; padding-bottom:16px; }
.resource-card[data-open-resource=terco] { --tile-x:33.333%; }
.resource-card[data-open-resource=oracao] { --tile-x:66.666%; }
.resource-card[data-open-resource=vela] { --tile-x:100%; }
.resource-card[data-open-resource=novenas] { --tile-y:50%; }
.resource-card[data-open-resource=leitura] { --tile-x:33.333%; --tile-y:50%; }
.resource-card[data-open-resource=evangelize] { --tile-x:66.666%; --tile-y:50%; }
.resource-card[data-open-resource=espiritualidade] { --tile-x:100%; --tile-y:50%; }
.resource-card[data-open-resource=consagracao] { --tile-y:100%; }
.resource-card[data-open-resource=coracao] { --tile-x:33.333%; --tile-y:100%; }
.resource-card[data-open-resource=carne] { --tile-x:66.666%; --tile-y:100%; order:11; }
.resource-card[data-open-resource=chat] { --tile-x:100%; --tile-y:100%; order:12; }
.blessing-banner { display:grid; grid-template-columns:25% 1fr 30%; max-width:none; border:1px solid #f6e6cd; border-radius:10px; overflow:hidden; margin:24px 0 0; min-height:184px; padding:0; gap:24px; background:linear-gradient(100deg,#fff5e7,#fffcf6); }
.blessing-banner::before { display:none; }
.donation-photo { align-self:stretch; background:url('../img/devotional-atlas.png') 66.666% 50%/400% 300%; }
.donation-copy { padding:20px 0; }
.donation-copy h2 { font:700 24px/1.06 Georgia,serif; color:#073e65; margin:0 0 8px; }
.blessing-banner .donation-copy p { font:12px/1.5 Arial,sans-serif; margin:0 0 13px; display:block; color:#4d6578; }
.blessing-banner .banner-donate { display:inline-block; padding:11px 17px; font-size:11px; }
.blessing-banner blockquote { border-left:1px solid #e8d5b6; padding:22px 26px; margin:0; font:italic 18px/1.4 Georgia,serif; color:#a66e16; }
.blessing-banner cite { display:block; font:11px Arial,sans-serif; margin-top:12px; }
.site-footer { padding:25px 32px; }
.site-footer .footer-logo-card { background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; }
.site-footer .footer-logo { content:url('../img/logo-rodape.svg'); }
.mobile-mission,.devoto-bottom-nav { display:none; }
body:is(.bible-page-open,.rosary-page-open,.devotion-page-open,.guided-page-open,.app-resource-page-open,.account-page-open) .home-only { display:none; }
button:focus-visible,a:focus-visible { outline:3px solid #cb972b; outline-offset:3px; }
@media(max-width:1100px) and (min-width:821px) {
 .desktop-journey-nav { gap:14px; } .desktop-journey-nav a,.desktop-journey-nav button { font-size:11px; }
 .brand { flex-basis:230px; } .top-header { gap:15px; padding:12px 22px; }
 .header-actions { gap:7px; } .journey-shortcuts { gap:8px; } .journey-shortcuts button,.journey-shortcuts a { padding:12px 8px; gap:8px; }
 .journey-shortcuts strong { font-size:12px; } .resource-card { min-height:140px; }
}
@media(max-width:820px) {
 body { background:#fff; padding-bottom:68px; }
 .site-frame { margin:0; border-radius:0; min-height:100vh; width:100%; }
 .top-header { min-height:68px; padding:10px 16px; gap:12px; position:relative; display:flex; justify-content:space-between; }
 .desktop-journey-nav { display:none; }
 .brand { flex:0 1 240px; min-width:0; order:1; margin:0 auto; }
 .brand-logo { max-height:43px; width:100%; }
 .mobile-nav-toggle { display:flex; order:0; margin:0; flex:0 0 32px; }
 .header-actions { display:flex; order:2; flex:0 0 32px; }
 .header-actions .donate-button { display:none; }
 .header-account { display:flex; min-width:32px; width:32px; padding:3px; }
 body.mobile-menu-open .main-nav { display:flex; position:relative; background:#fff; z-index:5; }
 .devotee-main { padding:0 16px 20px; }
 .welcome-hero { margin:0 -16px; height:275px; background-position:58% 50%; background-image:linear-gradient(90deg,rgba(244,249,250,.93),rgba(244,249,250,.5) 52%,transparent 80%),url('../img/fatima-hero.png'); }
 .welcome-copy { padding:30px 23px; max-width:69%; }
 .welcome-copy .welcome-eyebrow { margin-bottom:10px; font:700 20px Georgia,serif; color:#083b61; }
 .welcome-copy h1 { font:400 21px/1.12 Georgia,serif; letter-spacing:-.3px; }
 .welcome-copy h1 em { color:#87662d; }
 .welcome-copy blockquote { margin-top:14px; max-width:205px; }
 .welcome-copy blockquote p { font-size:11px; line-height:1.4; }
 .welcome-copy cite { font-size:10px; }
 .welcome-hero > img { height:278px; right:-13px; bottom:-21px; max-width:43%; object-fit:contain; object-position:bottom; }
 .journey-shortcuts { display:none; }
 .mobile-mission { display:flex; align-items:center; gap:13px; position:relative; margin:-9px 0 22px; padding:13px; color:#fff; background:linear-gradient(110deg,#d3a648,#b87a13); border:6px solid #fff9ee; border-radius:10px; box-shadow:0 4px 12px #80581b25; text-decoration:none; }
 .mobile-mission > span { flex:0 0 43px; height:43px; display:grid; place-items:center; border-radius:50%; background:#fff8e8; color:#c58b2d; font-size:25px; }
 .mobile-mission strong { font:700 14px Georgia,serif; text-transform:uppercase; }
 .mobile-mission small { display:block; font:11px/1.3 Georgia,serif; text-transform:none; margin-top:4px; }
 .mobile-mission b { font-size:26px; margin-left:auto; }
 .section-head h2 { display:block; font-size:22px; line-height:1.15; letter-spacing:-.5px; }
 .section-head h2::after { display:block; margin:9px 0 0; width:44px; }
 .desktop-spiritual { display:none; } .mobile-spiritual { display:inline; }
 .resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
 .resource-card { min-height:108px; padding:12px 5px 10px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; background:linear-gradient(145deg,#fff,#f4f8fd); border:1px solid #edf1f5; box-shadow:0 2px 6px #17374f05; text-align:center; border-radius:9px; }
 .resource-card::before,.resource-card::after { display:none; }
 .resource-card .resource-icon { flex:0 0 37px; width:37px; height:37px; margin:0; border-radius:50%; background:#ffefd3; color:#0d527d; }
 .resource-icon svg { width:23px; height:23px; }
 .resource-card .resource-copy strong { color:#083e67; font:600 11px/1.2 Arial,sans-serif; }
 .resource-card .resource-copy small,.resource-arrow { display:none; }
 .blessing-banner { margin-top:20px; grid-template-columns:1fr; gap:0; background:#fff8ec; }
 .donation-photo { height:128px; background-position:66.666% 50%; }
 .donation-copy { padding:16px; }
 .donation-copy h2 { font-size:23px; }
 .blessing-banner .donation-copy p { font-size:12px; }
 .blessing-banner .banner-donate { display:block; text-align:center; padding:12px; }
 .blessing-banner blockquote { display:none; }
 .site-footer { padding:23px 18px; }
 .devoto-bottom-nav { display:flex; position:fixed; z-index:40; bottom:0; left:0; right:0; background:#fff; padding:6px 8px max(7px,env(safe-area-inset-bottom)); border-top:1px solid #e9edf0; box-shadow:0 -4px 15px #1638520b; }
 .devoto-bottom-nav a,.devoto-bottom-nav button { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:47px; background:none; border:0; color:#526b81; font:10px Arial,sans-serif; text-decoration:none; cursor:pointer; }
 .devoto-bottom-nav span { font-size:23px; line-height:1; color:#b28027; }
 .devoto-bottom-nav [aria-current=page] { color:#a97013; font-weight:700; }
}
@media(max-width:360px) {
 .brand { max-width:210px; } .welcome-copy { padding-left:17px; } .welcome-copy h1 { font-size:21px; }
 .welcome-copy .welcome-eyebrow { font-size:20px; } .section-head h2 { font-size:20px; }
 .resource-card { min-height:104px; } .resource-card .resource-copy strong { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .resource-card { transition:none; } }

.journey-shortcuts svg,.devoto-bottom-nav svg,.account-symbol svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.header-account::after { display:none; }
.account-symbol { color:#23485e; display:flex; }

[hidden] { display:none !important; }
.guided-plan-card:disabled { opacity:.65; cursor:default; }

/* Full-width portal with comfortable content widths on large displays. */
@media(min-width:821px) {
 :root { --page-width:1440px; }
 .top-header { min-height:104px; padding:20px max(32px,calc((100% - 1440px)/2)); }
 .brand { flex-basis:340px; }.brand-logo { max-width:340px; max-height:68px; }
 .desktop-journey-nav { gap:28px; }.desktop-journey-nav a,.desktop-journey-nav button { font-size:14px; }
 .header-actions .donate-button { font-size:12px; padding:16px 22px; }
 .devotee-main { padding:0 32px 48px; }
 .welcome-hero { margin:0 -32px; height:460px; }
 .welcome-copy { padding:68px max(48px,calc((100vw - 1440px)/2)); max-width:78%; }
 .welcome-copy h1 { font-size:clamp(40px,3.3vw,58px); line-height:1.08; }
 .welcome-copy .welcome-eyebrow { font-size:19px; }.welcome-copy blockquote p { font-size:17px; }
 .welcome-hero > img { height:485px; right:max(8%,calc((100vw - 1320px)/2)); bottom:-48px; }
 .journey-shortcuts { max-width:1440px; margin:-20px auto 40px; padding:20px; gap:18px; }
 .journey-shortcuts button,.journey-shortcuts a { padding:20px 16px; }.journey-shortcuts strong { font-size:16px; }.journey-shortcuts small { font-size:12px; }
 .resources { max-width:1440px; margin:0 auto; }.section-head { margin-bottom:22px; }.section-head h2 { font-size:32px; }
 .resource-grid { gap:20px; }.resource-card { min-height:190px; padding:22px 18px; }.resource-card .resource-copy strong { font-size:18px; }.resource-card .resource-copy small { font-size:12px; }
 .blessing-banner { max-width:1440px; margin:32px auto 0; min-height:200px; }
 .site-footer { padding:36px max(32px,calc((100% - 1440px)/2)); }
 .donation-page { max-width:1280px; }.donation-layout { grid-template-columns:360px minmax(0,1fr); }
}
@media(min-width:821px) and (max-width:1100px) {
 .brand { flex-basis:255px; }.desktop-journey-nav { gap:16px; }.desktop-journey-nav a,.desktop-journey-nav button { font-size:12px; }
 .welcome-copy { padding-left:42px; }.welcome-hero > img { right:3%; }
 .journey-shortcuts { gap:10px; padding:14px; }.journey-shortcuts button,.journey-shortcuts a { padding:14px 10px; }
 .resource-card .resource-copy strong { font-size:16px; }.resource-card { min-height:170px; }
}

/* Account is the primary action in the header. */
.top-header .header-account { display:flex; align-items:center; gap:11px; flex:0 0 auto; width:auto; min-width:206px; min-height:60px; padding:10px 14px; border:1px solid #d5e1e9; border-radius:12px; background:#f7fafc; text-align:left; cursor:pointer; transition:background .15s,border-color .15s; }
.top-header .header-account:hover { background:#eef5fa; border-color:#aabfce; }
.top-header .header-account.is-connected { background:#f1f7fb; border-color:#c7dce8; }
.top-header .header-account-copy { display:grid; gap:5px; min-width:0; }
.top-header .header-account-copy strong { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 16px/1.15 Arial,sans-serif; color:#083d60; text-transform:capitalize; }
.top-header .header-user-status { display:flex; align-items:center; gap:5px; white-space:nowrap; font:400 11px/1.3 Arial,sans-serif; color:#667e8d; }
.top-header .is-connected .header-user-status { color:#28724d; }
.top-header .is-connected .header-user-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#31915e; flex-shrink:0; }
.header-user-initials { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:50%; background:#e5edf3; color:#476b85; font:700 15px Arial,sans-serif; }
.is-connected .header-user-initials { background:#0b4a71; color:#fff; box-shadow:0 0 0 3px #fff; }
.header-user-arrow { margin-left:auto; color:#557b95; font:24px/1 Arial,sans-serif; }
@media(max-width:1100px) and (min-width:821px) { .top-header { gap:16px; }.top-header .header-account { min-width:184px; padding:9px 11px; }.desktop-journey-nav { gap:14px; }.brand { flex-basis:230px; } }
@media(max-width:820px) {
 .top-header { gap:9px; }.top-header .brand { flex:1 1 auto; min-width:0; max-width:260px; }.top-header .brand-logo { max-width:100%; }
 .top-header .header-actions { flex:0 0 auto; }.top-header .header-account { min-width:0; min-height:47px; gap:7px; padding:7px 8px; border-radius:9px; }
 .header-user-initials { width:30px; height:30px; font-size:12px; }.top-header .header-account-copy strong { max-width:68px; font-size:12px; }
 .top-header .header-user-status { font-size:9px; max-width:76px; white-space:normal; }.header-user-arrow { display:none; }
}
@media(max-width:360px) { .top-header .header-account-copy { display:none; }.top-header .header-account { min-width:42px; }.header-user-initials { width:28px;height:28px; }.top-header .header-account.is-connected { border-color:#6bad87; } }