@import url('../styles.css');

:root{--es-card:rgba(255,255,255,.04);--es-border:rgba(255,255,255,.13);--es-muted:#c4d0e7;--es-gold:#ffd34f}
body.spanish-page{min-height:100vh}
.spanish-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(20px,5vw,72px);background:rgba(5,15,36,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.spanish-header .brand{min-width:max-content}.spanish-header .brand small{display:block}.spanish-header nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.spanish-header nav a{text-decoration:none;color:#d6dff1;font-weight:700;font-size:.92rem}.spanish-header nav a[aria-current="page"]{color:var(--es-gold)}.spanish-header .language-link{padding:8px 12px;border:1px solid var(--es-border);border-radius:999px}
.es-hero{padding:clamp(72px,9vw,118px) clamp(24px,7vw,100px) clamp(54px,7vw,82px);background:radial-gradient(circle at 78% 22%,rgba(40,103,240,.2),transparent 34%)}
.es-hero-inner{max-width:980px}.es-hero h1{font-size:clamp(3rem,7vw,6.3rem);line-height:.96;letter-spacing:-.055em;margin:8px 0 22px}.es-hero h1 span{color:#7898ff}.es-hero .lead{max-width:800px}.es-eyebrow{color:var(--es-gold);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800}.es-note{margin-top:24px;max-width:760px;padding:15px 18px;border-left:3px solid var(--es-gold);background:rgba(255,211,79,.06);border-radius:0 12px 12px 0;color:var(--es-muted)}
.es-section{padding:clamp(55px,8vw,90px) clamp(24px,7vw,100px)}.es-section-heading{max-width:800px;margin-bottom:30px}.es-section h2,.es-reader h2{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.08;margin:0 0 12px}.es-section p,.es-reader p,.es-reader li{color:var(--es-muted)}
.es-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1100px}.es-card{display:flex;flex-direction:column;min-height:270px;padding:28px;border:1px solid var(--es-border);border-radius:20px;background:linear-gradient(145deg,rgba(17,37,76,.9),rgba(10,24,54,.92));text-decoration:none;transition:transform .2s ease,border-color .2s ease}.es-card:hover,.es-card:focus-visible{transform:translateY(-3px);border-color:rgba(90,127,255,.65)}.es-card .type{color:var(--es-gold);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.es-card h3{font-size:1.55rem;line-height:1.18;margin:14px 0 10px}.es-card p{margin:0 0 20px}.es-card strong{margin-top:auto;color:#fff}
.es-reader-shell{max-width:980px;margin:0 auto;padding:clamp(54px,8vw,92px) clamp(22px,5vw,52px) 90px}.es-reader-hero{padding-bottom:34px;border-bottom:1px solid var(--es-border)}.es-reader-hero h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:.96;letter-spacing:-.05em;margin:8px 0 18px}.es-reader-hero .lead{max-width:790px}.es-meta{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.es-meta span{padding:7px 11px;border:1px solid var(--es-border);border-radius:999px;color:#dce5f7;font-size:.82rem;font-weight:700}.es-reader{display:grid;gap:18px;padding-top:28px}.es-reader section{padding:clamp(22px,4vw,34px);border:1px solid var(--es-border);border-radius:20px;background:var(--es-card)}.es-reader h2{font-size:clamp(1.45rem,3vw,2rem)}.es-reader h3{margin:20px 0 8px}.es-reader ul,.es-reader ol{padding-left:1.35rem}.es-reader li{margin:.55rem 0}.es-reader .highlight{border-color:rgba(255,211,79,.35);background:rgba(255,211,79,.055)}.es-reader .prayer{border-color:rgba(90,127,255,.42);background:rgba(40,103,240,.09)}.es-related{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--es-border)}
.es-footer{display:grid;gap:16px;padding:30px clamp(24px,7vw,100px);border-top:1px solid var(--es-border);color:var(--es-muted)}.es-footer-links{display:flex;gap:16px;flex-wrap:wrap}.es-footer a{text-decoration:none}.es-footer small{color:#98a8c5}.es-footer .legal{font-size:.84rem}
@media(max-width:850px){.spanish-header{position:relative;align-items:flex-start;flex-direction:column}.spanish-header nav{display:flex!important;position:static!important;inset:auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important}.spanish-header .brand small{display:block!important}}
@media(max-width:720px){.es-grid{grid-template-columns:1fr}.es-card{min-height:auto}.es-related{display:grid}.es-related .button{width:100%}}