/* Web católico de Javier · San Juan Pablo II · Premium 2026
   Hoja común de las nueve páginas. Sin fuentes ni librerías externas. */
:root{--azul:#082b55;--azul2:#0d467d;--oro:#c89a3d;--oro-claro:#efd28b;--tinta:#253342;--gris:#5b6d7f;--borde:#dce6ef;--radio:24px;--sombra:0 18px 48px #082b5510;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:linear-gradient(180deg,#f0f6fc,#fff 55rem);color:var(--tinta);font:18px/1.8 Georgia,'Times New Roman',serif}img{max-width:100%;height:auto}a{color:var(--azul2);text-underline-offset:.2em;text-decoration-thickness:1px}a:hover{color:#865c18}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #be831b;outline-offset:5px}h1,h2,h3,p{overflow-wrap:break-word}h1,h2,h3{line-height:1.16;color:var(--azul);text-wrap:balance}h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 1rem}h3{font-size:1.45rem}button{cursor:pointer}p{margin:.7rem 0 1.2rem}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.6rem 1rem}.wrap,.site-head,.main-nav ul,.hero-inner,.page-hero>div,.topbar>div{width:min(calc(100% - 2.5rem),var(--max));margin-inline:auto}.topbar{background:#061e38;color:#d9e4ed;font:12px/1.5 Arial,sans-serif;letter-spacing:.03em}.topbar>div{display:flex;justify-content:space-between;padding:.55rem 0}.topbar a{color:#f0d79e;text-decoration:none}.site-head{display:flex;align-items:center;gap:1rem;padding:1.1rem 0}.logo{width:64px;height:64px;display:block;border-radius:50%;box-shadow:0 5px 18px #082b5526}.brand{line-height:1.25}.brand>a{display:block;font-size:1.55rem;font-weight:bold;text-decoration:none;color:var(--azul)}.brand>span{font:13px/1.7 Arial,sans-serif;color:var(--gris)}.head-subscribe{margin-left:auto;border:1px solid var(--borde);border-radius:30px;padding:.65rem 1rem;font:700 12px/1.4 Arial,sans-serif;text-decoration:none;white-space:nowrap}.main-nav{position:sticky;top:0;z-index:20;background:#fffffffa;border-block:1px solid var(--borde);box-shadow:0 4px 12px #082b5508}.main-nav ul{padding:.6rem 0;list-style:none;display:flex;gap:.2rem;overflow:auto;scrollbar-width:thin}.main-nav a{display:block;white-space:nowrap;padding:.62rem .8rem;border-radius:30px;font:700 13px/1.3 Arial,sans-serif;text-decoration:none;color:var(--azul)}.main-nav a:hover,.main-nav a[aria-current=page]{background:var(--azul);color:#fff}.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#061e38,#0b3765 60%,#175788);color:#fff}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 88% 30%,#efd28b38,transparent 45%),linear-gradient(115deg,transparent 62%,#ffffff08 62% 63%,transparent 63%)}.hero:after{content:'';position:absolute;right:5%;top:-38%;height:850px;width:600px;border:1px solid #efd28b26;border-radius:50%;z-index:-1;transform:rotate(25deg)}.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:4rem;padding:4rem 0}.eyebrow,.section-label{display:block;font:700 11px/1.5 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a601c;margin-bottom:.9rem}.eyebrow{color:var(--oro-claro);text-decoration:none}.hero h1{color:#fff;font-size:clamp(2.2rem,4vw,3.45rem);font-weight:normal;line-height:1.15;margin:.5rem 0 1.25rem}.hero h1 em{color:#f4dba5;font-weight:normal}.hero-name{font-size:1.5rem;font-weight:bold;margin:0}.lead{max-width:640px;font-size:1.1rem;color:#e2ecf6;margin:.8rem 0 1.7rem}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.78rem 1.1rem;border:1px solid var(--azul);background:var(--azul);color:#fff;text-decoration:none;border-radius:10px;font:700 13px/1.4 Arial,sans-serif;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 0 #041b34}.button:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 #041b34}.button.gold{background:linear-gradient(135deg,#f4dea9,#cda54f);color:#182b42;border-color:#e7ca87;box-shadow:0 4px 0 #88651f}.button.light{background:#ffffff0c;border-color:#ffffff66;box-shadow:none}.feast{font:13px/1.8 Arial,sans-serif;color:#e6edf5;margin:1.65rem 0 0}.feast>span{color:var(--oro-claro);padding-right:.5rem}.hero-portrait{position:relative;margin:0;justify-self:end;padding:12px;border:1px solid #efd28b88;border-radius:160px 160px 20px 20px;background:#ffffff07;box-shadow:0 25px 50px #0004}.hero-portrait img{display:block;width:274px;border-radius:145px 145px 10px 10px}.hero-portrait figcaption{position:relative;margin:-20px -25px -32px;padding:.8rem 1.2rem;background:#fffaf0;color:var(--azul);border:1px solid #d8bb76;border-radius:12px;box-shadow:0 9px 30px #0002;text-align:center;font:12px/1.6 Arial,sans-serif}.hero-portrait figcaption>span{display:block;font:italic 1.7rem/1.3 Georgia,serif}.breadcrumbs{padding:1.3rem 0 1.5rem;font:12px/1.8 Arial,sans-serif;color:var(--gris)}.breadcrumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;gap:.4rem}.breadcrumbs li+li:before{content:'›';display:inline-block;margin-right:.4rem;color:#8697a7}.breadcrumbs a{text-decoration:none}.intro-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;border:1px solid var(--borde);border-radius:var(--radio);padding:2.4rem;background:#fff;box-shadow:var(--sombra);margin:.25rem 0 3rem}.intro-card h2{margin:0}.intro-card p{margin:0;color:var(--gris);font-size:1rem}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.6rem}.section-title h2{margin:0}.section-note{font:12px/1.5 Arial,sans-serif;color:var(--gris)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}.feature-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:18px;padding:1.5rem;background:linear-gradient(155deg,#fff,#f4f8fc);color:var(--tinta);text-decoration:none;box-shadow:0 7px 22px #082b5506;transition:transform .2s,box-shadow .2s,border-color .2s}.feature-card:hover{transform:translateY(-5px);border-color:var(--oro);box-shadow:0 14px 32px #082b5519;color:var(--tinta)}.card-number{font:italic 2.7rem/1 Georgia,serif;color:#a4792e;margin-bottom:1.4rem}.feature-card h3{margin:0 0 .7rem;font-size:1.4rem}.feature-card p{font-size:.94rem;line-height:1.65;color:var(--gris);margin:0 0 1.5rem}.card-action{display:flex;justify-content:space-between;margin-top:auto;font:700 12px/1.5 Arial,sans-serif;color:var(--azul2)}.timeline-section{margin:3.3rem 0 2rem;padding:2.5rem;border-radius:var(--radio);background:#edf4fa;border:1px solid var(--borde)}.timeline{padding:0;margin:2rem 0 1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 2.3rem;list-style:none}.timeline li{border-top:2px solid #c5a15b;padding-top:1rem}.timeline strong{display:block;color:var(--azul);font:2.3rem/1.2 Georgia,serif}.timeline span{font:700 11px/1.5 Arial,sans-serif;color:#805b21;text-transform:uppercase;letter-spacing:.04em}.timeline p{font-size:.95rem;margin:.5rem 0 0}.source-note{font:12px/1.7 Arial,sans-serif;color:var(--gris);margin:1.8rem 0 0}.page-hero{background:linear-gradient(115deg,#061e38,#0d467d);padding:3rem 0;color:#e2ecf5;border-bottom:3px solid #c89a3d}.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.4rem);max-width:950px;margin:.5rem 0 1rem}.page-hero p{margin:0;font-size:1.1rem;color:#d7e4f0}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:1.8rem;align-items:start}.article,.side-card{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}.article{padding:clamp(1.3rem,4vw,3rem);overflow-wrap:anywhere}.article h2{font-size:1.65rem;margin:2.2rem 0 1rem}.article h3{font-size:1.35rem}.article p{margin:0 0 1.25rem}.article strong{color:var(--azul)}.article figure{clear:both;text-align:center;margin:1.8rem auto}.article figure img{max-height:500px;width:auto;border-radius:15px;box-shadow:0 8px 22px #082b5520}.article figcaption{margin-top:.6rem;font:12px/1.6 Arial,sans-serif;color:var(--gris)}.reading-meta{font:12px/1.7 Arial,sans-serif;color:var(--gris);border-bottom:1px solid var(--borde);padding-bottom:1rem;margin-bottom:1.7rem}.reading-meta span{margin-inline:.5rem}.toc{padding:1rem 1.25rem;background:#f0f6fb;border:1px solid var(--borde);border-radius:14px;margin:0 0 1.8rem;font:14px/1.7 Arial,sans-serif}.toc summary{cursor:pointer;font-weight:bold;color:var(--azul)}.toc ol{margin:.8rem 0 .2rem;padding-left:1.3rem}.toc li+li{margin-top:.3rem}.editor-note{font:13px/1.8 Arial,sans-serif;background:#fff8eb;border-left:3px solid var(--oro);padding:1rem;color:#66502b}.sidebar{display:grid;gap:1.3rem}.side-card{padding:1.3rem}.side-card img{display:block;width:150px;border-radius:85px 85px 12px 12px;margin:auto}.side-card h2{font-size:1.25rem}.side-feast{text-align:center;font:12px/1.5 Arial,sans-serif;margin:1.1rem 0}.side-card .button{width:100%;font-size:12px}.side-card ul{list-style:none;margin:0;padding:0;font:14px/1.6 Arial,sans-serif}.side-card li{border-top:1px solid var(--borde)}.side-card li a{display:block;padding:.65rem 0;text-decoration:none}.page-turn{border-top:1px solid var(--borde);display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.5rem;margin-top:2rem}.page-turn a{font-size:1rem;text-decoration:none}.page-turn a:last-child{text-align:right}.page-turn small{display:block;color:var(--gris);font:11px/1.8 Arial,sans-serif}.prayer{background:linear-gradient(135deg,#fffdf7,#fff)}.prayer>p{font-size:1.15rem;line-height:1.95}.prayer>p:first-of-type:first-letter{font-size:2rem;color:#906820}.subscribe{display:flex;align-items:center;gap:1.8rem;padding:2.3rem;border-radius:var(--radio);background:linear-gradient(115deg,#082b55,#155f92);color:#fff;box-shadow:var(--sombra);margin:3rem 0 1.5rem}.subscribe>img{width:88px;height:88px;flex:none;border:3px solid #fff;border-radius:50%}.subscribe h2{color:#fff;font-size:1.7rem;margin:0 0 .6rem}.subscribe .section-label{color:var(--oro-claro)}.subscribe p{font-size:1rem;color:#e4eef8;margin:.5rem 0 1rem}.channel-buttons,.share-buttons{display:flex;gap:.65rem;flex-wrap:wrap}.channel-buttons a,.share-buttons a,.share-buttons button{display:inline-flex;justify-content:center;align-items:center;border-radius:9px;min-height:44px;padding:.7rem 1.1rem;color:#fff;text-decoration:none;border:1px solid #ffffff55;font:700 13px/1.4 Arial,sans-serif}.whatsapp{background:#146b3c}.telegram{background:#0877ad}.facebook{background:#1764bf}.x{background:#151515}.channel-buttons a:hover,.share-buttons a:hover{color:#fff;filter:brightness(1.12)}.share{padding:1.8rem;border:1px solid var(--borde);border-radius:18px;text-align:center;background:#fff}.share h2{font-size:1.35rem}.share-buttons{justify-content:center}.share-buttons button{background:#edf3f8;border-color:#d3e0eb;color:var(--azul)}.share-status{font:13px/1.6 Arial,sans-serif;overflow-wrap:anywhere;margin:.6rem 0 0}.share-status:empty{display:none}.also-interest{margin:1.6rem 0 3rem;padding:2rem;border:1px solid var(--borde);border-radius:var(--radio);background:linear-gradient(135deg,#fff,#eef5fb)}.also-interest h2{font-size:1.7rem;text-align:center}.interest-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.interest-links a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid #ccdeec;padding:1rem 1.2rem;border-radius:12px;background:#fff;text-decoration:none;font:700 14px/1.5 Arial,sans-serif;box-shadow:0 5px 15px #082b5508}.interest-links a:hover{border-color:var(--oro)}.footer{background:#061e38;color:#c4d3e2;text-align:center;padding:2rem 1.25rem;font:13px/1.7 Arial,sans-serif}.footer p{margin:.3rem 0}.footer a{color:#e8f1f8}.backtop{display:inline-block;margin:.7rem 0 1.2rem}.footer nav{border-top:1px solid #ffffff26;padding-top:1rem;max-width:var(--max);margin:auto}
@media(min-width:1400px){.hero-inner{padding-block:4.5rem;gap:5rem}.hero h1{font-size:3.7rem}}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-inner{gap:2rem;grid-template-columns:minmax(0,1fr) 260px}.hero-portrait img{width:234px}.head-subscribe{display:none}.content-grid{grid-template-columns:minmax(0,1fr) 225px}.sidebar .side-card{padding:1rem}.intro-card{gap:1.5rem;padding:1.8rem}}
@media(max-width:760px){html{scroll-padding-top:78px}.site-head{padding:.8rem 0}.brand>a{font-size:1.25rem}.brand>span{font-size:11px}.logo{width:54px;height:54px}.hero-inner{grid-template-columns:1fr;text-align:center;padding:2.5rem 0 3rem;gap:2rem}.hero-inner>div{order:1}.hero-portrait{justify-self:center;width:208px;padding:9px;margin-bottom:.4rem}.hero-portrait img{width:188px}.hero-portrait figcaption{margin:-16px -20px -27px;padding:.5rem 1rem}.hero-portrait figcaption>span{font-size:1.4rem}.hero h1{font-size:clamp(2.1rem,6vw,3rem)}.hero-name{font-size:1.3rem}.lead{font-size:1rem;margin-inline:auto}.hero-actions{justify-content:center}.hero:after{right:-60%;top:-5%}.intro-card{grid-template-columns:1fr;gap:1.3rem}.section-title{display:block}.section-note{display:none}.content-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr 1fr}.side-card .section-label{text-align:center}.timeline-section{padding:1.6rem}.timeline{grid-template-columns:repeat(2,1fr);gap:1.5rem}.page-hero{padding:2rem 0}.page-hero h1{font-size:2.2rem}.page-hero p{font-size:1rem}.subscribe{padding:1.6rem;gap:1.2rem}.subscribe>img{width:70px;height:70px}.subscribe h2{font-size:1.45rem}.interest-links{grid-template-columns:1fr}.also-interest{padding:1.5rem}}
@media(max-width:480px){body{font-size:17px}.wrap,.site-head,.main-nav ul,.hero-inner,.page-hero>div,.topbar>div{width:calc(100% - 1.75rem)}.topbar>div{justify-content:center}.topbar span{display:none}.site-head{gap:.7rem}.brand>a{font-size:1.1rem}.brand>span{display:block;font-size:10px;max-width:240px}.logo{width:48px;height:48px}.main-nav a{font-size:12px;padding:.6rem .75rem}.hero-inner{padding-top:1.8rem}.hero h1{font-size:2.05rem}.hero-actions{display:grid}.feast{font-size:12px}.intro-card{padding:1.4rem;margin-bottom:2.3rem}.intro-card h2{font-size:1.8rem}.cards{gap:.8rem}.feature-card{padding:1.1rem}.feature-card h3{font-size:1.2rem}.feature-card p{font-size:.87rem}.card-number{font-size:2.2rem;margin-bottom:1.1rem}.card-action{font-size:11px}.timeline-section{padding:1.3rem;margin-top:2.3rem}.timeline p{font-size:.88rem}.timeline strong{font-size:2rem}.sidebar{grid-template-columns:1fr}.sidebar .side-card:first-child{display:none}.subscribe{display:block;text-align:center}.subscribe>img{margin-bottom:1rem}.channel-buttons{justify-content:center}.share{padding:1.4rem 1rem}.share-buttons a,.share-buttons button{flex:1 1 40%;padding:.7rem .6rem}.share-buttons button{flex-basis:100%}.also-interest h2{font-size:1.5rem}.article{padding:1.2rem;border-radius:18px}.page-hero h1{font-size:1.95rem}.article h2{font-size:1.45rem}.breadcrumbs{font-size:11px}.prayer>p{font-size:1.05rem}.footer nav a{display:inline-block;padding:.3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
@media print{body{background:#fff;color:#000;font-size:11pt}.topbar,.main-nav,.head-subscribe,.hero-portrait,.sidebar,.subscribe,.share,.also-interest,.footer,.page-turn,.skip,.hero-actions,.toc{display:none}.hero,.page-hero{background:#fff;color:#000;padding:1rem 0;border-bottom:1px solid #888}.hero h1,.hero h1 em,.hero-name,.hero p,.page-hero h1,.page-hero p,.eyebrow{color:#000}.hero-inner,.content-grid,.intro-card{display:block;padding:0}.article,.intro-card,.timeline-section{box-shadow:none;border:0;padding:0}.site-head{padding:.4rem 0}.cards{grid-template-columns:repeat(2,1fr)}.feature-card{box-shadow:none;break-inside:avoid}.article figure{break-inside:avoid}.article h2{break-after:avoid}a{color:#000}.hero-inner{width:100%}.wrap{width:100%}.feast{margin-top:.8rem}}
/* Identidad de la portada: el nombre del santo es el título principal. */
.hero h1{font-size:clamp(2.8rem,5vw,4.5rem);margin-bottom:1.1rem}.hero-motto{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.3;margin:0 0 1rem;color:#fff}.hero-motto em{color:#f4dba5}.hero-motto+h1{margin-top:0}@media(max-width:480px){.hero h1{font-size:2.7rem}.hero-motto{font-size:1.4rem}}