@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root { color: #29323A; background: #FAF8F4; font-family: 'DM Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 5.4rem; padding: .85rem clamp(1.25rem, 6vw, 7rem); background: #FFFDF9; }
.brand { display: flex; align-items: center; gap: .7rem; color: #29323A; text-decoration: none; }
.brand img { width: 3rem; height: 3.85rem; object-fit: contain; }
.brand strong { display: block; font-family: 'Crimson Text', Georgia, serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.brand small { display: block; margin-top: .24rem; color: #64707A; font-family: 'DM Mono', monospace; font-size: .54rem; letter-spacing: .075em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.3rem); margin-left: auto; }
.site-nav a, .account-nav a { color: #29323A; font-size: .8rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .account-nav a:hover, .account-nav a:focus-visible { color: #1F3A5F; outline: none; }
.account-nav { display: flex; align-items: center; gap: .85rem; font-size: .8rem; }
.account-nav span { color: #64707A; font-size: .76rem; }
.account-nav .account-button { padding: .55rem .85rem; border: 1px solid #29323A; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.account-nav .account-button:hover, .account-nav .account-button:focus-visible { background: #29323A; color: #fff; }
.account-nav .settings-link { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.05rem; }.settings-link span { font-size: .72rem; }
.hero { position: relative; min-height: min(46rem, calc(100vh - 5.4rem)); display: grid; align-items: end; isolation: isolate; overflow: hidden; color: #fff; background: #1B2B3A url('../images/cristo-sja-portada.jpg') center / cover no-repeat; }
.hero::after { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(90deg, rgba(17, 32, 48, .88), rgba(17, 32, 48, .54) 45%, rgba(17, 32, 48, .13)); }
.hero-content { width: min(100% - 2.5rem, 56rem); padding: clamp(4rem, 10vw, 8.5rem) 0 clamp(4rem, 9vw, 7rem); margin-left: clamp(1.25rem, 12vw, 13rem); }
.eyebrow { margin: 0 0 1rem; color: #E0B65E; font-family: 'DM Mono', monospace; font-size: .67rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { font-family: 'Crimson Text', Georgia, serif; font-weight: 600; }
h1 { max-width: 48rem; margin: 0 0 1.2rem; font-size: clamp(3.25rem, 6.2vw, 6.6rem); line-height: .98; letter-spacing: -.045em; }
.hero-content > p:last-child { max-width: 37rem; margin: 0; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.6; }
.resources { max-width: 80rem; padding: clamp(4rem, 8vw, 7rem) 1.25rem; margin: 0 auto; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: 0 0 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #D8D4CC; }
.section-intro .eyebrow { margin: 0; color: #1F3A5F; }.section-intro h2 { max-width: 32rem; margin: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.07; }
.resource-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1rem; }
.resource-card { position: relative; display: flex; flex-direction: column; min-height: 23rem; padding: clamp(1.35rem, 2.5vw, 2.2rem); overflow: hidden; border-radius: .35rem; color: #29323A; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.resource-card:hover, a.resource-card:focus-visible { transform: translateY(-.35rem); box-shadow: 0 .8rem 1.7rem rgba(24, 49, 40, .18); outline: none; }
.resource-cantoral { color: #fff; background: #1F3A5F; }.resource-burning-fire { color: #fff; background: #E4002B; }.resource-liturgia { background: #E9E2D3; }.resource-coro { color: #fff; background: #536B78; }
.burning-fire-logo { width: min(9rem, 70%); max-height: 5rem; margin-bottom: auto; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.resource-card::before { position: absolute; right: -18%; bottom: -25%; width: 15rem; height: 15rem; border: 1px solid currentColor; border-radius: 50%; content: ''; opacity: .18; }
.resource-card::after { position: absolute; right: 9%; bottom: 8%; width: 7rem; height: 7rem; border: 1px solid currentColor; border-radius: 48% 52% 50% 46%; content: ''; opacity: .26; transform: rotate(35deg); }
.resource-icon { display: block; margin-bottom: auto; font-family: 'Crimson Text', Georgia, serif; font-size: 3rem; line-height: 1; opacity: .8; }
.resource-card h3 { position: relative; margin: 1.5rem 0 .35rem; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -.035em; }.resource-card p { position: relative; max-width: 15rem; margin: 0; font-size: .86rem; line-height: 1.55; }
.resource-action { position: relative; margin-top: 1.4rem; font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }.resource-action b { margin-left: .35rem; font-size: 1.1rem; }
.availability { position: absolute; top: 1.3rem; right: 1.3rem; padding: .25rem .5rem; border: 1px solid currentColor; border-radius: 999px; font-family: 'DM Mono', monospace; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.closing-note { max-width: 80rem; padding: 0 1.25rem 4.5rem; margin: 0 auto; color: #64707A; text-align: center; }.closing-note p { margin: 0 0 .4rem; font-family: 'Crimson Text', Georgia, serif; font-size: 1.25rem; font-style: italic; }.closing-note span { font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 52rem) { .site-header { min-height: 4.7rem; gap: 1rem; }.site-nav { display: none; }.account-nav { margin-left: auto; }.account-nav span, .settings-link span { display: none; }.brand small { display: none; }.hero { min-height: 34rem; background-position: 57% center; }.hero-content { padding: 4rem 0; margin-left: 1.25rem; }.resource-grid { grid-template-columns: 1fr; }.resource-card { min-height: 17rem; }.section-intro { display: block; }.section-intro h2 { margin-top: .8rem; } }