/* Catedral San Juan Bautista — diseño editorial crema y dorado. Capa única de personalización. */
:root{--fino-cream:#fffaf4;--fino-gold:#b78b50;--fino-ink:#34251b;--fino-muted:#75685c}
body{background:var(--fino-cream);color:var(--fino-ink)}
.site-header{height:76px;min-height:76px;background:rgba(255,252,247,.985);border-bottom:1px solid #ead8bc;box-shadow:none;position:sticky;top:0;z-index:90}
.header-layout{width:min(1280px,calc(100% - 64px));height:76px;margin:auto;display:flex;align-items:center;gap:24px}
.brand-refined{display:flex;align-items:center;flex-shrink:0}
.brand-refined .brand-logo{filter:none}
.brand-refined .brand-text{display:flex;flex-direction:column;gap:0}
.brand-refined .brand-overline{font:500 13px/1.1 'Cinzel',serif;letter-spacing:.22em;color:#51402d}
.brand-refined strong{font:500 29px/1 'Cormorant Garamond',serif;letter-spacing:.01em;color:#37271f}
.brand-refined small{font:600 8px/1.5 'DM Sans',sans-serif;letter-spacing:.29em;margin-top:5px;color:#a37b49}
.brand-refined small i{font-style:normal;font-size:9px;padding:0 5px}
.site-nav{display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.35vw,23px);margin-left:auto;flex:1}
.site-nav a{font:600 10px/1.3 'DM Sans',sans-serif;letter-spacing:.065em;white-space:nowrap;color:#584a40;padding:30px 0 25px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a.active{color:#986b35;border-bottom-color:#c39c68}
.header-actions{display:flex;gap:15px;align-items:center;margin-left:auto}
.visit-refined{display:inline-flex;gap:11px;align-items:center;justify-content:center;white-space:nowrap;border-radius:40px;border:1px solid #d9b880;padding:11px 16px;color:#fff;background:linear-gradient(100deg,#cda461,#a97834);font:700 10px 'DM Sans',sans-serif;letter-spacing:.08em;box-shadow:0 4px 15px #8c602520}
.visit-refined svg{width:13px;height:13px;stroke-width:1.5}.visit-refined:hover{transform:translateY(-2px)}
.header-search{width:36px;height:36px;border:1px solid #ddc5a5;border-radius:50%;display:grid;place-items:center;color:#926b38}
.header-search svg{width:17px;height:17px}.menu-toggle{display:none}
/* Hero: every detail stays above facade roofline */
.fino-hero{position:relative;height:clamp(365px,39vw,520px);overflow:hidden;background:#382418;isolation:isolate}
.fino-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;image-rendering:auto}
.fino-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,24,.18) 0%,rgba(10,15,22,.04) 45%,rgba(31,16,7,.16) 100%)}
.fino-hero-title{position:relative;text-align:center;z-index:1;padding:23px 16px 0;color:#fff8e9;text-shadow:0 2px 16px #24120470}
.fino-hero-title h1{font:500 clamp(36px,4vw,58px)/.88 'Cormorant Garamond',serif;letter-spacing:-.025em;margin:0}
.fino-hero-title em{font-weight:400;color:#f3d3a0}
.fino-ornament{display:flex;align-items:center;justify-content:center;gap:8px;color:#e5c088;margin-top:11px}
.fino-ornament i{height:1px;width:34px;background:currentColor;opacity:.65}.fino-ornament svg{width:13px;height:13px}
/* Lightweight ribbon just touches hero edge, not facade */
.fino-shortcuts{position:relative;z-index:5;margin-top:-42px;padding:0 20px}
.fino-shortcut-panel{width:min(815px,100%);margin:auto;background:#fffdf9;padding:9px 9px 10px;border:1px solid #e9d1ab;border-radius:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;box-shadow:0 9px 26px #5e351426}
.fino-shortcut{min-width:0;position:relative;border:1px solid #ead3ae;background:linear-gradient(180deg,#fffdf8,#fffaf2);border-radius:82px 82px 11px 11px;overflow:hidden;display:flex;align-items:center;flex-direction:column;transition:transform .3s,box-shadow .3s}
.fino-shortcut:hover{transform:translateY(-5px);box-shadow:0 9px 20px #714b2620}
.fino-arch{height:95px;width:100%;display:block;overflow:hidden;border-radius:82px 82px 0 0;background:#dfcbb1}
.fino-arch img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.fino-shortcut:hover img{transform:scale(1.05)}
.fino-round-icon{width:32px;height:32px;border:2px solid #fffdf7;background:#b28a54;color:white;border-radius:50%;display:grid;place-items:center;margin-top:-16px;position:relative;z-index:1;box-shadow:0 2px 8px #5f3b1d2b}
.fino-round-icon svg{width:16px;height:16px;stroke-width:1.35;fill:none}
.fino-shortcut-name{font:600 19px/1.05 'Cormorant Garamond',serif;text-align:center;min-height:35px;display:grid;place-items:center;padding:3px 5px 7px;color:#35261d}
/* Prayer: rich photo on right, legible text on left, fixed compact height */
.fino-prayer{position:relative;isolation:isolate;overflow:hidden;margin:27px auto 0;width:min(1280px,calc(100% - 64px));min-height:355px;border-radius:18px;background:#2b1b13;box-shadow:0 6px 22px #45241017}
.fino-prayer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 51%}
.fino-prayer-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,18,11,.94) 0%,rgba(34,19,10,.85) 26%,rgba(34,19,10,.4) 47%,transparent 85%)}
.fino-prayer-copy{position:relative;z-index:1;padding:28px 38px 25px;color:#fff8ed;width:min(465px,56%)}
.fino-kicker{font:700 9px 'DM Sans',sans-serif;letter-spacing:.24em;color:#a47a45;display:inline-flex;align-items:center;gap:7px}
.fino-kicker.light{color:#e5c388}.fino-kicker svg{width:12px;height:12px}
.fino-prayer h2{margin:10px 0 7px;font:500 clamp(32px,3.1vw,44px)/1 'Cormorant Garamond',serif;color:white}
.fino-gold-line{display:block;width:92px;height:1px;background:#e0bd82;margin:13px 0 19px}
.fino-prayer blockquote{font:italic clamp(17px,1.7vw,23px)/1.31 'Cormorant Garamond',serif;margin:0 0 16px;max-height:190px;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin}
.fino-prayer-reference{font:italic 16px 'Cormorant Garamond',serif;color:#f4d6a0;margin:0 0 12px}
.fino-button{display:inline-flex;align-items:center;gap:19px;border-radius:30px;border:1px solid #e7c58e;background:linear-gradient(110deg,#cda15c,#a67b36);color:white;padding:9px 17px;font:700 11px 'DM Sans',sans-serif;white-space:nowrap;transition:transform .2s}
.fino-button:hover{transform:translateY(-2px)}.fino-button svg{width:15px;height:15px}.fino-button.tiny{padding:9px 14px;margin-top:12px;font-size:10px;gap:14px}.fino-button.secondary{color:#976d35;background:#fffaf2;border-color:#dfbf91}
/* Community: 2 modest editorial cards */
.fino-life{padding:35px 24px 75px;background:radial-gradient(circle at 0 45%,#f9ecdb80,transparent 32%),radial-gradient(circle at 100% 42%,#f8ecd980,transparent 32%),#fffaf4}
.fino-life-heading{text-align:center;margin:0 auto 23px}.fino-life-heading h2{font:500 clamp(29px,3.1vw,44px)/1.02 'Cormorant Garamond',serif;margin:7px 0 5px;letter-spacing:-.015em;color:#322318}.fino-life-heading p{color:#857366;font-size:12px;margin:0}.fino-heading-rule{display:block;width:75px;height:1px;background:linear-gradient(90deg,transparent,#cda56c,transparent);margin:13px auto 0}
.fino-life-grid{width:min(1280px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:21px}
.fino-life-card{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;border:1px solid #e5c9a4;min-height:220px;padding:27px 24px;background-color:#fffdf8;box-shadow:0 5px 17px #39240e0a}
.fino-life-card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.15;background-position:center right;background-size:cover}
.fino-schedule:before{background-image:linear-gradient(90deg,#fffdf9 39%,#fffdf999 100%),url('../img/misa-principal.jpg')}
.fino-notices:before{background-image:linear-gradient(90deg,#fffdf9 39%,#fffdf999 100%),url('../img/contacto.jpg')}
.fino-life-intro{display:flex;gap:16px;align-items:flex-start}.fino-line-icon{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#faf1e5;color:#b18346;border:1px solid #eddac0}.fino-line-icon svg{width:23px;height:23px;stroke-width:1.25;fill:none}
.fino-life-card h3{font:600 30px/1 'Cormorant Garamond',serif;margin:5px 0 6px;color:#37271f}.fino-life-card .fino-life-intro p{max-width:330px;font-size:12px;line-height:1.55;color:#7d6a5a;margin:0}.fino-disclaimer{font-size:10px;color:#a18c78;margin:19px 0 0 62px}
/* Footer */
.site-footer{background:#2d1e16;color:#f5e7d0;padding-top:35px}.site-footer .footer-inner{display:grid;grid-template-columns:1.05fr .9fr 1.45fr;gap:22px;align-items:center;padding-bottom:23px}.site-footer .brand-logo{filter:brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(703%) hue-rotate(349deg);width:43px}.footer-brand-text{display:flex;flex-direction:column}.footer-brand-text span{font:500 11px 'Cinzel',serif;letter-spacing:.17em;color:#e9c591}.footer-brand-text strong{font:500 25px 'Cormorant Garamond',serif;color:#fff}.footer-brand-text small{font-size:8px;letter-spacing:.2em;color:#deb983}.site-footer .footer-verse{font:italic 27px/1 'Cormorant Garamond',serif;text-align:center;color:#e5c18b}.site-footer .footer-verse small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:.2em;margin-top:9px}.site-footer .footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px 17px;font-size:11px}.site-footer .footer-bottom{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #d4b88726;font-size:10px;color:#c9b092}
/* Subtle non-blocking reveal. Readable before JS executes. */
@media(prefers-reduced-motion:no-preference){.fino-reveal{transition:opacity .7s ease,transform .7s ease}.js-reveal-ready .fino-reveal:not(.is-visible){opacity:.5;transform:translateY(10px)}}
/* Responsive */
@media(max-width:1020px){.site-nav{gap:10px}.site-nav a{font-size:9px}.header-layout{width:calc(100% - 38px);gap:10px}.brand-refined{min-width:0}.brand-refined strong{font-size:26px}.visit-refined{padding:10px 11px}.fino-life-grid{gap:14px}}
@media(max-width:840px){.site-header,.header-layout{height:69px;min-height:69px}.site-nav{display:none;position:absolute;left:0;right:0;top:69px;background:#fffaf3;border-bottom:1px solid #e1cfb4;flex-direction:column;align-items:stretch;gap:0;padding:9px 24px;box-shadow:0 15px 20px #35220f17}.site-nav.open{display:flex}.site-nav a{padding:12px 8px;font-size:12px;border-bottom:1px solid #eadfce}.menu-toggle{display:block;border:0;background:none;padding:9px}.menu-toggle span{display:block;width:21px;height:1.5px;background:#885f30;margin:5px}.header-search{display:none}.header-actions{gap:5px}.fino-hero{height:420px}.fino-prayer{width:calc(100% - 38px)}.fino-life{padding-inline:19px}}
@media(max-width:650px){.header-layout{width:calc(100% - 25px)}.brand-refined .brand-logo{filter:none}.brand-refined{min-width:0;gap:8px}.brand-refined .brand-overline{font-size:9px}.brand-refined strong{font-size:22px}.brand-refined small{font-size:6.5px;letter-spacing:.13em}.visit-refined{padding:8px 10px;gap:5px;font-size:9px}.visit-refined svg{width:10px}.fino-hero{height:340px}.fino-hero-title{padding-top:30px}.fino-hero-title h1{font-size:35px}.fino-shortcuts{margin-top:-32px;padding:0 11px}.fino-shortcut-panel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:8px;border-radius:17px;padding:8px}.fino-shortcut{min-width:112px;flex:0 0 112px;scroll-snap-align:center}.fino-arch{height:75px}.fino-shortcut-name{font-size:16px;min-height:33px}.fino-round-icon{width:28px;height:28px;margin-top:-14px}.fino-round-icon svg{width:14px;height:14px}.fino-prayer{margin-top:23px;width:calc(100% - 22px);min-height:360px}.fino-prayer-image{object-position:65% center}.fino-prayer-shade{background:linear-gradient(90deg,#201309eb 0%,#201309c2 55%,#20130957 100%)}.fino-prayer-copy{width:100%;max-width:390px;padding:29px 22px}.fino-prayer h2{font-size:37px}.fino-prayer blockquote{font-size:20px;max-height:167px}.fino-life{padding:34px 12px 50px}.fino-life-heading h2{font-size:35px}.fino-life-grid{grid-template-columns:1fr;gap:12px}.fino-life-card{min-height:188px;padding:22px 19px}.fino-life-card h3{font-size:28px}.fino-disclaimer{margin-left:0}.site-footer .footer-inner{grid-template-columns:1fr;text-align:center;padding:26px 0 20px}.site-footer .brand-footer,.site-footer .footer-links{justify-content:center}.site-footer .footer-bottom{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){.fino-reveal,.fino-shortcut,.fino-shortcut img{transition:none!important}}

/* ================================================================
   Edición final: fondo arena-marfil y acentos fotográficos discretos.
   Mantiene el diseño actual, las dimensiones y la oración del día.
   ================================================================ */
:root {
  --fino-cream: #f4ecdf;
  --fino-gold: #b48b53;
  --fino-ink: #33271e;
  --fino-muted: #736457;
}
body {
  background: #f4ecdf;
  background-image: radial-gradient(ellipse at 5% 30%, #fffaf3 0, transparent 44%),
                    radial-gradient(ellipse at 95% 60%, #eddec9 0, transparent 48%);
  background-attachment: fixed;
}
.site-header { background: rgba(255,251,245,.975); }
/* The existing hero and prayer imagery remain untouched. */
.fino-shortcuts { background: transparent; }
.fino-shortcut-panel { background: #fffdf8; box-shadow: 0 11px 33px #6340201d; }
.fino-prayer { box-shadow: 0 13px 36px #4d311a22; }
.fino-life {
  background: radial-gradient(ellipse at 11% 18%, rgba(255,252,245,.90), transparent 39%),
              radial-gradient(ellipse at 92% 76%, rgba(221,192,155,.22), transparent 43%),
              #f4ecdf;
  border-top: 1px solid #e6d5bd;
}
.fino-life-heading h2 { color: #35271d; }
.fino-life-heading p { color: #76685c; }
.fino-heading-rule { background: linear-gradient(90deg,transparent,#b9925a,transparent); }
.fino-life-card {
  background: #fffcf7;
  border-color: #dcc19c;
  box-shadow: 0 12px 32px rgba(89,57,24,.075);
}
/* Make the photography legible as a gentle feature, never behind copy. */
.fino-life-card::before { opacity: 1; background-position: center right; background-size: cover; }
.fino-schedule::before {
  background-image: linear-gradient(90deg,#fffcf7 0%,#fffcf7 45%,rgba(255,252,247,.93) 63%,rgba(255,252,247,.72) 83%,rgba(255,252,247,.56) 100%),
                    url('../img/misa-principal.jpg');
}
.fino-notices::before {
  background-image: linear-gradient(90deg,#fffcf7 0%,#fffcf7 43%,rgba(255,252,247,.93) 64%,rgba(255,252,247,.73) 85%,rgba(255,252,247,.57) 100%),
                    url('../img/contacto.jpg');
}
.fino-line-icon { background: #f8eedf; border-color: #e8ceb0; }
.fino-life-card h3 { color:#39291f; }
.fino-life-card .fino-life-intro p { color:#705d4c; }
.fino-button.tiny { margin-top: 15px; }
/* Restore natural lettering and give the footer room to breathe. */
.site-footer { background: linear-gradient(110deg,#291b12,#39261b); }
.site-footer .footer-inner {
  grid-template-columns: 1.15fr .8fr 1.3fr;
  gap: 30px;
  padding-block: 30px 27px;
}
.site-footer .brand-footer { gap: 13px; }
.footer-brand-text { gap: 2px; }
.footer-brand-text strong,
.site-footer .footer-brand-text strong {
  font: 500 27px/1.08 'Cormorant Garamond',Georgia,serif;
  letter-spacing: .018em;
  white-space: normal;
}
.site-footer .footer-brand-text span { letter-spacing: .14em; }
.site-footer .footer-brand-text small { letter-spacing: .17em; margin-top: 5px; }
.site-footer .footer-links { gap: 12px 21px; }
@media(max-width:840px) {
  .site-footer .footer-inner { grid-template-columns:1fr; justify-items:center; gap:22px; text-align:center; }
  .site-footer .brand-footer,.site-footer .footer-links { justify-content:center; }
}
@media(max-width:650px) {
  body { background-attachment: scroll; }
  .fino-life { background:#f4ecdf; }
  .fino-life-card { background:#fffcf7; }
  .fino-schedule::before,.fino-notices::before {
    background-image:linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.96) 67%,rgba(255,252,247,.82) 100%);
  }
}


/* Ajuste solicitado: menú superior un poco más grande solo en escritorio */
@media (min-width: 841px){
  .site-nav{gap:clamp(10px,1.45vw,25px);}
  .site-nav a{font-size:12.5px; letter-spacing:.075em; padding:30px 0 25px;}
}
@media (min-width: 1100px){
  .site-nav a{font-size:13px;}
}

/* ================================================================
   ACCESOS PRINCIPALES - DISEÑO PREMIUM DEFINITIVO
   Una sola versión, sin reglas duplicadas.
================================================================ */

.catedral-access{
    position:relative;
    z-index:8;
    width:100%;
    padding:0 28px 78px;
    box-sizing:border-box;
    background:linear-gradient(180deg,#fffaf4 0%,#fdf8f1 100%);
}

/* ================================================================
   PANEL DE PRESENTACIÓN
================================================================ */

.catedral-feature-wrap{
    position:relative;
    z-index:20;
    width:min(1360px,100%);
    margin:-58px auto 34px;
}

.catedral-feature-panel{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(310px,.7fr);
    gap:42px;
    align-items:center;
    padding:42px 46px;
    overflow:hidden;
    border:1px solid rgba(191,142,75,.22);
    border-radius:30px;
    background:
        linear-gradient(135deg,rgba(255,253,249,.99) 0%,rgba(255,247,237,.98) 100%);
    box-shadow:
        0 26px 64px rgba(66,39,20,.12),
        0 8px 22px rgba(66,39,20,.05),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.catedral-feature-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 10%,rgba(207,158,87,.14),transparent 31%),
        linear-gradient(90deg,rgba(255,255,255,.22),transparent 38%);
}

.catedral-feature-panel::after{
    content:"";
    position:absolute;
    top:0;
    left:46px;
    width:150px;
    height:3px;
    border-radius:0 0 99px 99px;
    background:linear-gradient(90deg,#b8782d,#d9b77d,#b8782d);
}

.catedral-feature-copy,
.catedral-feature-side{
    position:relative;
    z-index:2;
}

.catedral-feature-kicker{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    margin:0 0 16px;
    padding:0 16px;
    border:1px solid rgba(184,120,45,.13);
    border-radius:999px;
    background:rgba(184,120,45,.07);
    font-family:"DM Sans",sans-serif;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#9f6424;
}

.catedral-feature-copy h2{
    margin:0;
    max-width:880px;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(50px,4.8vw,78px);
    line-height:.92;
    font-weight:600;
    letter-spacing:-.034em;
    color:#2d1a11;
}

.catedral-feature-copy h2 span{
    position:relative;
    display:inline-block;
    margin-left:6px;
    color:#b87427;
    font-style:italic;
    font-weight:500;
}

.catedral-feature-copy h2 span::after{
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    bottom:2px;
    height:5px;
    border-radius:999px;
    background:rgba(197,142,67,.16);
    z-index:-1;
}

.catedral-feature-copy p{
    width:min(720px,100%);
    margin:19px 0 0;
    font-family:"DM Sans",sans-serif;
    font-size:16px;
    line-height:1.75;
    color:#6d584a;
}

.catedral-feature-side{
    display:grid;
    grid-template-columns:1px 1fr;
    gap:24px;
    align-items:center;
}

.catedral-feature-line{
    width:1px;
    height:116px;
    background:linear-gradient(180deg,transparent,rgba(182,121,50,.78),transparent);
}

.catedral-feature-meta{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.catedral-feature-meta strong{
    font-family:"DM Sans",sans-serif;
    font-size:10px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.23em;
    text-transform:uppercase;
    color:#a46b2c;
}

.catedral-feature-meta small{
    max-width:330px;
    font-family:"DM Sans",sans-serif;
    font-size:13.5px;
    line-height:1.72;
    font-weight:400;
    color:#6c584a;
}

/* ================================================================
   TARJETAS DE ACCESO
================================================================ */

.catedral-access-grid{
    width:min(1420px,100%);
    margin:0 auto;
    padding:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    box-sizing:border-box;
}

.catedral-access-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    text-decoration:none!important;
    color:inherit;
    background:#fff;
    border:1px solid rgba(183,136,74,.27);
    border-radius:24px;
    box-shadow:0 13px 34px rgba(64,39,22,.08);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.catedral-access-card:hover{
    transform:translateY(-8px);
    border-color:rgba(183,136,74,.58);
    box-shadow:0 23px 48px rgba(64,39,22,.14);
}

.catedral-access-photo{
    position:relative;
    display:block;
    width:100%;
    height:190px;
    overflow:hidden;
    background:#ede2d5;
}

.catedral-access-photo img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    border:0;
    border-radius:0;
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}

.catedral-access-card:hover .catedral-access-photo img{
    transform:scale(1.055);
}

.catedral-access-photo-overlay{
    position:absolute;
    inset:0;
    display:block;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(30,18,10,0) 15%,rgba(30,18,10,.04) 50%,rgba(30,18,10,.27) 100%);
}

.catedral-access-icon{
    position:absolute;
    z-index:10;
    top:160px;
    left:25px;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:50%;
    box-sizing:border-box;
    color:#fff;
    background:linear-gradient(145deg,#d1a45f,#a87233);
    border:4px solid #fff;
    box-shadow:0 8px 20px rgba(74,45,23,.24);
    transition:transform .3s ease;
}

.catedral-access-card:hover .catedral-access-icon{
    transform:scale(1.08);
}

.catedral-access-icon svg{
    display:block!important;
    position:static!important;
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    max-width:21px!important;
    max-height:21px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    color:#fff!important;
    fill:none!important;
    stroke:#fff!important;
    stroke-width:1.7!important;
}

.catedral-access-icon svg path,
.catedral-access-icon svg circle,
.catedral-access-icon svg line,
.catedral-access-icon svg polyline,
.catedral-access-icon svg rect{
    stroke:#fff!important;
}

.catedral-access-icon svg path{
    fill:none!important;
}

.catedral-access-body{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    padding:42px 24px 25px;
    box-sizing:border-box;
    text-align:left;
}

.catedral-access-title{
    display:block;
    margin:0 0 9px;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:25px;
    line-height:1.05;
    font-weight:600;
    color:#302017;
}

.catedral-access-description{
    display:block;
    min-height:42px;
    margin:0;
    font-family:"DM Sans",sans-serif;
    font-size:12.5px;
    line-height:1.65;
    font-weight:400;
    color:#7d6b5e;
}

.catedral-access-more{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:20px;
    font-family:"DM Sans",sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
    color:#9f6b31;
    transition:gap .25s ease;
}

.catedral-access-card:hover .catedral-access-more{
    gap:11px;
}

.catedral-access-more svg{
    display:block!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    max-width:14px!important;
    max-height:14px!important;
    fill:none!important;
    stroke:currentColor!important;
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media(max-width:1200px){
    .catedral-access-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:1000px;
    }
}

@media(max-width:980px){
    .catedral-access{
        padding:0 18px 62px;
    }

    .catedral-feature-wrap{
        margin:-48px auto 30px;
    }

    .catedral-feature-panel{
        grid-template-columns:1fr;
        gap:24px;
        padding:34px 30px;
    }

    .catedral-feature-panel::after{
        left:30px;
    }

    .catedral-feature-copy h2{
        font-size:clamp(44px,7vw,64px);
    }

    .catedral-feature-copy p{
        font-size:15px;
    }

    .catedral-feature-side{
        grid-template-columns:70px 1fr;
        gap:18px;
    }

    .catedral-feature-line{
        width:70px;
        height:1px;
        background:linear-gradient(90deg,rgba(182,121,50,.78),transparent);
    }

    .catedral-feature-meta small{
        max-width:600px;
    }
}

@media(max-width:820px){
    .catedral-access-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:700px;
    }

    .catedral-access-photo{
        height:180px;
    }

    .catedral-access-icon{
        top:150px;
    }
}

@media(max-width:560px){
    .catedral-access{
        padding:0 14px 52px;
    }

    .catedral-feature-wrap{
        margin:-34px auto 24px;
    }

    .catedral-feature-panel{
        padding:26px 21px 24px;
        border-radius:22px;
        gap:18px;
    }

    .catedral-feature-panel::after{
        left:21px;
        width:110px;
    }

    .catedral-feature-kicker{
        min-height:30px;
        margin-bottom:12px;
        padding:0 12px;
        font-size:8.5px;
        letter-spacing:.20em;
    }

    .catedral-feature-copy h2{
        font-size:42px;
        line-height:.96;
    }

    .catedral-feature-copy h2 span{
        display:block;
        margin:3px 0 0;
    }

    .catedral-feature-copy p{
        margin-top:14px;
        font-size:13.5px;
        line-height:1.68;
    }

    .catedral-feature-side{
        grid-template-columns:44px 1fr;
        gap:13px;
    }

    .catedral-feature-line{
        width:44px;
    }

    .catedral-feature-meta strong{
        font-size:8.5px;
        letter-spacing:.16em;
    }

    .catedral-feature-meta small{
        font-size:12px;
        line-height:1.6;
    }

    .catedral-access-grid{
        grid-template-columns:1fr;
        width:100%;
        max-width:420px;
        gap:18px;
    }

    .catedral-access-photo{
        height:220px;
    }

    .catedral-access-icon{
        top:190px;
    }

    .catedral-access-body{
        padding:43px 24px 26px;
    }

    .catedral-access-title{
        font-size:29px;
    }

    .catedral-access-description{
        min-height:0;
        font-size:13px;
    }
}

/* ================================================================
   VERSÍCULO DESTACADO CON MOVIMIENTO
================================================================ */

.catedral-verse{
    position:relative;
    max-width:460px;
    padding:20px 10px 20px 32px;
}

.catedral-verse::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:2px;
    background:linear-gradient(180deg,transparent 0%,#c58a3a 20%,#c58a3a 80%,transparent 100%);
    transform:scaleY(0);
    transform-origin:top center;
    animation:catedralLineaEntrada .8s ease forwards;
}

.catedral-verse-mark{
    display:block;
    height:32px;
    margin-bottom:4px;
    font-family:"Cormorant Garamond",serif;
    font-size:72px;
    line-height:.7;
    color:rgba(184,117,39,.30);
    opacity:0;
    transform:translateX(-10px) translateY(4px);
    animation:catedralComillaEntrada .7s ease .25s forwards;
}

.catedral-verse blockquote{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(24px,2vw,31px);
    line-height:1.22;
    font-weight:500;
    font-style:italic;
    color:#382116;
    opacity:0;
    transform:translateY(18px);
    animation:catedralTextoEntrada .9s cubic-bezier(.22,.8,.25,1) .45s forwards;
}

.catedral-verse-reference{
    display:block;
    margin-top:15px;
    font-family:"DM Sans",sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:#ad6e27;
    opacity:0;
    transform:translateY(12px);
    animation:catedralTextoEntrada .8s ease .8s forwards;
}

@keyframes catedralLineaEntrada{
    from{transform:scaleY(0);opacity:.4;}
    to{transform:scaleY(1);opacity:1;}
}

@keyframes catedralComillaEntrada{
    from{opacity:0;transform:translateX(-10px) translateY(4px);}
    to{opacity:1;transform:translateX(0) translateY(0);}
}

@keyframes catedralTextoEntrada{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
}

.catedral-feature-side:hover .catedral-verse blockquote{
    color:#4a2b1c;
    transition:color .35s ease;
}

.catedral-feature-side:hover .catedral-verse::before{
    filter:brightness(1.08);
    transition:filter .35s ease;
}

@media(max-width:560px){
    .catedral-verse{max-width:100%;padding:14px 6px 14px 22px;}
    .catedral-verse-mark{font-size:56px;height:24px;}
    .catedral-verse blockquote{font-size:24px;line-height:1.25;}
    .catedral-verse-reference{margin-top:12px;font-size:9px;letter-spacing:.20em;}
}

@media(prefers-reduced-motion:reduce){
    .catedral-verse::before,
    .catedral-verse-mark,
    .catedral-verse blockquote,
    .catedral-verse-reference{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* ================================================================
   VERSÍCULO A TODO EL ANCHO DEL PANEL
   Quita el bloque izquierdo y convierte el versículo en protagonista.
================================================================ */

.catedral-feature-panel-verse{
    display:block;
    padding:42px 54px;
}

.catedral-feature-side-full{
    display:block;
    width:100%;
}

.catedral-verse-full{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding:28px 36px 28px 42px;
}

.catedral-verse-full blockquote{
    max-width:1180px;
    margin:0 auto;
    font-size:clamp(30px,2.7vw,46px);
    line-height:1.18;
    text-align:center;
}

.catedral-verse-full .catedral-verse-mark{
    height:42px;
    margin:0 auto 8px;
    text-align:center;
    font-size:88px;
}

.catedral-verse-full .catedral-verse-reference{
    margin-top:18px;
    text-align:center;
    font-size:11px;
    letter-spacing:.28em;
}

.catedral-verse-full::before{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:auto;
    height:2px;
    background:linear-gradient(90deg,transparent 0%,#c58a3a 18%,#c58a3a 82%,transparent 100%);
    transform:scaleX(0);
    transform-origin:center;
    animation:catedralLineaHorizontalEntrada .9s ease forwards;
}

@keyframes catedralLineaHorizontalEntrada{
    from{transform:scaleX(0);opacity:.35;}
    to{transform:scaleX(1);opacity:1;}
}

@media(max-width:980px){
    .catedral-feature-panel-verse{
        padding:34px 30px;
    }

    .catedral-verse-full{
        padding:22px 22px 24px;
    }

    .catedral-verse-full blockquote{
        font-size:clamp(28px,5vw,38px);
    }
}

@media(max-width:560px){
    .catedral-feature-panel-verse{
        padding:28px 20px;
    }

    .catedral-verse-full{
        padding:18px 8px 22px;
    }

    .catedral-verse-full .catedral-verse-mark{
        font-size:64px;
        height:30px;
    }

    .catedral-verse-full blockquote{
        font-size:26px;
        line-height:1.22;
    }

    .catedral-verse-full .catedral-verse-reference{
        font-size:9px;
        letter-spacing:.22em;
    }
}

/* ================================================================
   VERSÍCULO EDITORIAL 10/10
   Más compacto, con profundidad y entrada por líneas.
================================================================ */

.catedral-feature-wrap{
    margin:-46px auto 28px;
}

.catedral-feature-panel-verse{
    position:relative;
    display:block;
    padding:30px 54px 28px;
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 18%,rgba(205,151,77,.11) 0%,rgba(205,151,77,0) 43%),
        linear-gradient(135deg,rgba(255,253,249,.995) 0%,rgba(255,248,239,.985) 100%);
    box-shadow:
        0 22px 52px rgba(66,39,20,.10),
        0 7px 18px rgba(66,39,20,.04),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.catedral-feature-panel-verse::after{
    left:50%;
    top:0;
    width:118px;
    height:2px;
    transform:translateX(-50%);
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,#c88935 25%,#dcb66d 50%,#c88935 75%,transparent);
}

.catedral-feature-side-full{
    display:block;
    width:100%;
}

.catedral-verse-full{
    position:relative;
    width:100%;
    max-width:1220px;
    margin:0 auto;
    box-sizing:border-box;
    padding:18px 56px 22px;
    text-align:center;
}

/* halo muy sutil detrás del texto */
.catedral-verse-full::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    top:50%;
    width:min(760px,78%);
    height:150px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(207,157,88,.10) 0%,rgba(207,157,88,.035) 42%,transparent 72%);
    filter:blur(3px);
    pointer-events:none;
}

/* comilla convertida en elemento gráfico */
.catedral-verse-full .catedral-verse-mark{
    position:absolute;
    left:12px;
    top:-2px;
    width:auto;
    height:auto;
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:118px;
    line-height:.72;
    font-weight:500;
    color:rgba(183,117,40,.16);
    text-align:left;
    opacity:0;
    transform:translate(-16px,-4px) scale(.92);
    animation:catedralComillaEditorial .9s cubic-bezier(.22,.8,.25,1) .18s forwards;
}

.catedral-verse-full blockquote{
    position:relative;
    z-index:2;
    max-width:1040px;
    margin:0 auto;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(28px,2.35vw,40px);
    line-height:1.18;
    font-weight:500;
    font-style:italic;
    letter-spacing:-.012em;
    color:#3a2116;
    text-align:center;
    opacity:1;
    transform:none;
    animation:none;
}

.catedral-verse-line{
    display:block;
    opacity:0;
    filter:blur(4px);
    transform:translateY(18px);
    animation:catedralLineaTextoEditorial .9s cubic-bezier(.18,.8,.25,1) forwards;
}

.catedral-verse-line-one{
    animation-delay:.35s;
}

.catedral-verse-line-two{
    margin-top:2px;
    animation-delay:.58s;
}

.catedral-verse-full .catedral-verse-reference{
    position:relative;
    display:inline-block;
    margin-top:16px;
    padding:0 16px;
    font-family:"DM Sans",sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.27em;
    text-transform:uppercase;
    color:#a76822;
    opacity:0;
    transform:translateY(10px);
    animation:catedralReferenciaEditorial .7s ease .92s forwards;
}

.catedral-verse-full .catedral-verse-reference::before,
.catedral-verse-full .catedral-verse-reference::after{
    content:"";
    position:absolute;
    top:50%;
    width:42px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(182,118,39,.65));
}

.catedral-verse-full .catedral-verse-reference::before{
    right:100%;
}

.catedral-verse-full .catedral-verse-reference::after{
    left:100%;
    transform:rotate(180deg);
}

/* elimina la línea larga del diseño anterior y la sustituye por un remate corto */
.catedral-verse-full::before{
    content:"";
    position:absolute;
    left:50%;
    right:auto;
    top:auto;
    bottom:0;
    width:150px;
    height:1px;
    background:linear-gradient(90deg,transparent,#c88935 22%,#c88935 78%,transparent);
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    animation:catedralLineaCortaEditorial .8s ease 1.05s forwards;
}

@keyframes catedralComillaEditorial{
    from{
        opacity:0;
        transform:translate(-16px,-4px) scale(.92);
    }
    to{
        opacity:1;
        transform:translate(0,0) scale(1);
    }
}

@keyframes catedralLineaTextoEditorial{
    from{
        opacity:0;
        filter:blur(4px);
        transform:translateY(18px);
    }
    to{
        opacity:1;
        filter:blur(0);
        transform:translateY(0);
    }
}

@keyframes catedralReferenciaEditorial{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes catedralLineaCortaEditorial{
    from{
        opacity:.2;
        transform:translateX(-50%) scaleX(0);
    }
    to{
        opacity:1;
        transform:translateX(-50%) scaleX(1);
    }
}

@media(max-width:980px){
    .catedral-feature-wrap{
        margin:-38px auto 26px;
    }

    .catedral-feature-panel-verse{
        padding:26px 30px 24px;
    }

    .catedral-verse-full{
        padding:18px 38px 22px;
    }

    .catedral-verse-full .catedral-verse-mark{
        left:2px;
        font-size:96px;
    }

    .catedral-verse-full blockquote{
        font-size:clamp(27px,4.3vw,36px);
    }
}

@media(max-width:560px){
    .catedral-feature-wrap{
        margin:-28px auto 22px;
    }

    .catedral-feature-panel-verse{
        padding:22px 16px 20px;
        border-radius:22px;
    }

    .catedral-verse-full{
        padding:18px 12px 20px;
    }

    .catedral-verse-full .catedral-verse-mark{
        left:-2px;
        top:2px;
        font-size:72px;
    }

    .catedral-verse-full blockquote{
        max-width:310px;
        font-size:24px;
        line-height:1.22;
    }

    .catedral-verse-line-two{
        margin-top:5px;
    }

    .catedral-verse-full .catedral-verse-reference{
        margin-top:14px;
        font-size:9px;
        letter-spacing:.21em;
    }

    .catedral-verse-full .catedral-verse-reference::before,
    .catedral-verse-full .catedral-verse-reference::after{
        width:26px;
    }
}

@media(prefers-reduced-motion:reduce){
    .catedral-verse-full .catedral-verse-mark,
    .catedral-verse-line,
    .catedral-verse-full .catedral-verse-reference,
    .catedral-verse-full::before{
        animation:none !important;
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
    }

    .catedral-verse-full::before{
        transform:translateX(-50%) !important;
    }
}


/* ================================================================
   TRANSICIÓN SIN TARJETAS
   Banner → versículo → oración del día
================================================================ */

.catedral-access{
    padding-bottom:34px !important;
}

.catedral-feature-wrap{
    margin-bottom:0 !important;
}

@media(max-width:980px){
    .catedral-access{
        padding-bottom:28px !important;
    }
}

@media(max-width:560px){
    .catedral-access{
        padding-bottom:22px !important;
    }
}

/* ================================================================
   AJUSTE FINAL ANCHO VERSICULO
   Hace que el cuadro del versículo acompañe el ancho del banner
================================================================ */

.catedral-feature-wrap{
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin:-1px auto 28px !important;
}

.catedral-feature-panel{
    width:100% !important;
    padding:42px 70px !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
}

.catedral-verse{
    width:min(1250px,100%) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:20px 45px !important;
    text-align:center !important;
}

@media(max-width:980px){

    .catedral-feature-wrap{
        width:calc(100% - 28px) !important;
    }

    .catedral-feature-panel{
        padding:34px 36px !important;
    }

    .catedral-verse{
        padding:18px 20px !important;
    }

}

@media(max-width:560px){

    .catedral-feature-wrap{
        width:calc(100% - 20px) !important;
        margin:0 auto 22px !important;
    }

    .catedral-feature-panel{
        padding:28px 18px !important;
        border-radius:18px !important;
    }

    .catedral-verse{
        width:100% !important;
        padding:12px 8px !important;
    }

}

/* ================================================================
   FONDO DECORATIVO RELIGIOSO PARA EL VERSÍCULO
================================================================ */

.catedral-feature-panel{
    position:relative !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,252,247,.985) 0%,
            rgba(255,248,239,.975) 100%
        ) !important;
}


/* BRILLO SUAVE GENERAL */

.catedral-feature-panel::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201,154,84,.11) 0%,
            rgba(201,154,84,.055) 19%,
            rgba(201,154,84,0) 43%
        ),
        radial-gradient(
            circle at 82% 34%,
            rgba(212,176,117,.09) 0%,
            rgba(212,176,117,.035) 18%,
            rgba(212,176,117,0) 42%
        );

    pointer-events:none;
    z-index:0;
}


/* FIGURAS RELIGIOSAS SUTILES:
   - arcos de iglesia
   - resplandor eucarístico
   - cruz
*/

.catedral-feature-panel::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23d7b98e' stroke-width='2.2' opacity='0.16'%3E%3Cpath d='M55 255V145c0-58 47-105 105-105s105 47 105 105v110'/%3E%3Cpath d='M92 255V160c0-38 30-68 68-68s68 30 68 68v95'/%3E%3Cpath d='M128 255v-70c0-18 14-32 32-32s32 14 32 32v70'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23d0a66d' stroke-width='2.2' opacity='0.14'%3E%3Ccircle cx='110' cy='110' r='30'/%3E%3Cpath d='M110 36v24M110 160v24M36 110h24M160 110h24M58 58l17 17M145 145l17 17M58 162l17-17M145 75l17-17'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23d0a66d' stroke-width='2.4' opacity='0.14'%3E%3Cpath d='M65 24v82'/%3E%3Cpath d='M43 46h44'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat:no-repeat, no-repeat, no-repeat;

    background-position:
        left 70px center,
        right 95px top 52px,
        left 115px top 58px;

    background-size:
        250px auto,
        120px auto,
        54px auto;

    pointer-events:none;
    z-index:0;
}


/* ASEGURAR QUE EL CONTENIDO QUEDE ENCIMA */

.catedral-verse{
    position:relative !important;
    z-index:2 !important;
}


/* COMILLA MÁS SUTIL Y ELEGANTE */

.catedral-verse-mark{
    color:rgba(197,138,58,.24) !important;
}


/* REMATE DORADO INFERIOR */

.catedral-verse::after{
    content:"";
    display:block;

    width:170px;
    height:1px;

    margin:20px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(197,138,58,.75),
            transparent
        );
}


/* TABLET */

@media(max-width:980px){

    .catedral-feature-panel::after{
        background-position:
            left 24px center,
            right 30px top 34px,
            left 42px top 38px;

        background-size:
            180px auto,
            92px auto,
            44px auto;
    }

}


/* CELULAR */

@media(max-width:560px){

    .catedral-feature-panel::after{
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23d7b98e' stroke-width='2' opacity='0.10'%3E%3Cpath d='M30 185V110c0-44 36-80 80-80s80 36 80 80v75'/%3E%3Cpath d='M58 185v-63c0-28 24-52 52-52s52 24 52 52v63'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23d0a66d' stroke-width='2.1' opacity='0.10'%3E%3Ccircle cx='65' cy='65' r='18'/%3E%3Cpath d='M65 18v16M65 96v16M18 65h16M96 65h16'/%3E%3C/g%3E%3C/svg%3E");

        background-repeat:no-repeat, no-repeat;

        background-position:
            left 8px center,
            right 12px top 18px;

        background-size:
            120px auto,
            62px auto;
    }

    .catedral-verse::after{
        width:110px;
        margin-top:16px;
    }

}

/* ================================================================
   ORACIÓN DEL DÍA — TARJETA ELEGANTE
================================================================ */

.oracion-card-section{
    padding:50px 28px 68px;

    background:
        linear-gradient(
            180deg,
            #f3ecdf 0%,
            #fbf8f2 100%
        );
}


.oracion-card-scene{
    position:relative;

    width:min(1480px,100%);
    min-height:560px;

    margin:0 auto;

    overflow:hidden;

    border-radius:32px;

    border:
        1px solid
        rgba(188,136,61,.40);

    box-shadow:
        0 24px 65px rgba(53,32,18,.13);

    background:#24140c;
}


/* ================================================================
   FOTO
================================================================ */

.oracion-card-background{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transform:scale(1.015);
}


.oracion-card-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(32,17,9,.30) 0%,
            rgba(32,17,9,.10) 45%,
            rgba(32,17,9,.02) 100%
        );
}


/* ================================================================
   TARJETA
================================================================ */

.oracion-card{
    position:relative;
    z-index:3;

    width:min(520px,calc(100% - 80px));

    margin-left:54px;
    margin-top:50px;
    margin-bottom:50px;

    padding:
        40px
        42px
        38px;

    box-sizing:border-box;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,252,246,.94),
            rgba(250,242,231,.90)
        );

    border:
        1px solid
        rgba(196,145,76,.40);

    box-shadow:
        0 22px 55px rgba(49,28,14,.22),
        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
}


/* DETALLE DORADO SUPERIOR */

.oracion-card::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:120px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c18a3d,
            transparent
        );
}


/* ================================================================
   ENCABEZADO
================================================================ */

.oracion-card-kicker{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    font-family:"DM Sans",sans-serif;

    font-size:10px;
    font-weight:700;

    letter-spacing:.24em;

    color:#a56825;

    text-transform:uppercase;
}


.oracion-card-kicker svg{
    width:14px !important;
    height:14px !important;
}


.oracion-card h2{
    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,4vw,65px);

    line-height:.96;

    font-weight:500;

    letter-spacing:-.025em;

    color:#301b12;
}


/* ================================================================
   LÍNEA
================================================================ */

.oracion-card-rule{
    display:block;

    width:90px;
    height:1px;

    margin:
        18px
        0
        23px;

    background:
        linear-gradient(
            90deg,
            #bb8133,
            rgba(187,129,51,.12)
        );
}


/* ================================================================
   ORACIÓN
================================================================ */

.oracion-card blockquote{
    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(23px,1.8vw,29px);

    line-height:1.48;

    font-style:italic;

    font-weight:500;

    color:#513325;
}


.oracion-card-reference{
    margin:
        20px
        0
        0;

    font-family:"DM Sans",sans-serif;

    font-size:10px;
    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#a76b28;
}


/* ================================================================
   BOTÓN
================================================================ */

.oracion-card-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    margin-top:27px;

    padding:
        13px
        22px;

    border-radius:999px;

    border:
        1px solid
        rgba(180,122,43,.50);

    background:
        linear-gradient(
            180deg,
            #c99440,
            #b97b29
        );

    box-shadow:
        0 9px 22px rgba(140,89,27,.22);

    color:#fffdf9;

    font-family:"DM Sans",sans-serif;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        gap .25s ease;
}


.oracion-card-button:hover{
    transform:translateY(-2px);

    gap:14px;

    box-shadow:
        0 13px 27px rgba(140,89,27,.30);
}


.oracion-card-button svg{
    width:15px !important;
    height:15px !important;
}


/* ================================================================
   TABLET
================================================================ */

@media(max-width:900px){

    .oracion-card-section{
        padding:
            38px
            18px
            56px;
    }


    .oracion-card-scene{
        min-height:620px;
    }


    .oracion-card{
        width:min(500px,calc(100% - 60px));

        margin-left:30px;
        margin-top:40px;
        margin-bottom:40px;
    }

}


/* ================================================================
   CELULAR
================================================================ */

@media(max-width:560px){

    .oracion-card-section{
        padding:
            28px
            12px
            44px;
    }


    .oracion-card-scene{
        min-height:650px;

        border-radius:22px;
    }


    .oracion-card-background{
        object-position:58% center;
    }


    .oracion-card-shade{
        background:
            linear-gradient(
                180deg,
                rgba(31,17,9,.05),
                rgba(31,17,9,.25)
            );
    }


    .oracion-card{
        position:absolute;

        left:14px;
        right:14px;
        bottom:14px;

        width:auto;

        margin:0;

        padding:
            28px
            22px
            26px;

        border-radius:21px;
    }


    .oracion-card h2{
        font-size:44px;
    }


    .oracion-card blockquote{
        font-size:22px;
    }


    .oracion-card-button{
        width:100%;

        box-sizing:border-box;
    }

}

/* ================================================================
   ORACIÓN DEL DÍA — FOTO REAL DEL SANTÍSIMO
================================================================ */

.oracion-card-visual{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
    background:#2b170c;
}

.oracion-card-background-blur{
    position:absolute;
    inset:-34px;
    width:calc(100% + 68px);
    height:calc(100% + 68px);
    object-fit:cover;
    object-position:center 48%;
    display:block;

    filter:
        blur(22px)
        brightness(.72)
        saturate(.92);

    transform:scale(1.08);
    opacity:.92;
}

.oracion-card-background-main{
    position:absolute;
    top:0;
    right:5.5%;

    height:100%;
    width:auto;
    max-width:56%;

    display:block;
    object-fit:contain;
    object-position:center;

    filter:
        brightness(.98)
        contrast(1.03)
        saturate(.96);

    box-shadow:
        -32px 0 54px rgba(40,20,8,.18);

    transform:scale(1.01);
    transform-origin:center;
}


/* DEGRADADO PARA FUNDIR LA FOTO CON LA TARJETA */

.oracion-card-shade{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(37,20,10,.34) 0%,
            rgba(37,20,10,.20) 31%,
            rgba(37,20,10,.08) 52%,
            rgba(37,20,10,.03) 100%
        );
}


/* LA TARJETA SIEMPRE POR ENCIMA */

.oracion-card{
    z-index:3;
}


/* ================================================================
   TABLET
================================================================ */

@media(max-width:900px){

    .oracion-card-background-main{
        right:2%;
        max-width:66%;
        opacity:.94;
    }

    .oracion-card-background-blur{
        filter:
            blur(20px)
            brightness(.68)
            saturate(.90);
    }

}


/* ================================================================
   CELULAR
================================================================ */

@media(max-width:560px){

    .oracion-card-background-main{
        top:0;
        right:50%;

        height:58%;
        width:auto;
        max-width:none;

        transform:
            translateX(50%)
            scale(1.02);
    }

    .oracion-card-background-blur{
        filter:
            blur(18px)
            brightness(.70)
            saturate(.88);
    }

    .oracion-card-shade{
        background:
            linear-gradient(
                180deg,
                rgba(34,18,10,.04) 0%,
                rgba(34,18,10,.18) 48%,
                rgba(34,18,10,.28) 100%
            );
    }

}

/* ================================================================
   FOTO DEL SANTÍSIMO A TODO EL CUADRO
================================================================ */

.oracion-card-scene{
    position:relative;

    width:min(1480px,100%);
    min-height:560px;

    margin:0 auto;

    overflow:hidden;

    border-radius:32px;

    border:
        1px solid
        rgba(188,136,61,.40);

    box-shadow:
        0 24px 65px rgba(53,32,18,.13);

    background:#24140c;
}


/* IMAGEN A TODO EL FONDO */

.oracion-card-background{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /* Mantiene el Santísimo visible y bien encuadrado */
    object-position:68% center !important;

    transform:none !important;
}


/* DEGRADADO PARA QUE LA TARJETA SE LEA BIEN */

.oracion-card-shade{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(32,20,13,.42) 0%,
            rgba(32,20,13,.20) 32%,
            rgba(32,20,13,.04) 58%,
            rgba(32,20,13,0) 100%
        );
}


/* TARJETA ENCIMA DE LA FOTO */

.oracion-card{
    position:relative;

    z-index:3;

    width:min(520px,calc(100% - 80px));

    margin:
        50px
        0
        50px
        54px;
}


/* ================================================================
   TABLET
================================================================ */

@media(max-width:900px){

    .oracion-card-background{
        object-position:65% center !important;
    }

}


/* ================================================================
   CELULAR
================================================================ */

@media(max-width:560px){

    .oracion-card-scene{
        min-height:680px;

        border-radius:22px;
    }

    .oracion-card-background{
        object-position:57% center !important;
    }

    .oracion-card-shade{
        background:
            linear-gradient(
                180deg,
                rgba(30,18,11,.03) 0%,
                rgba(30,18,11,.10) 45%,
                rgba(30,18,11,.32) 100%
            );
    }

}


/* ================================================================
   CORRECCIÓN DEFINITIVA — UNA SOLA FOTO DEL SANTÍSIMO
================================================================ */

.oracion-card-scene{
    position:relative !important;
    overflow:hidden !important;
    background:#2b170c !important;
}

.oracion-card-background{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;

    /* Ajusta el enfoque para conservar el Santísimo visible */
    object-position:66% 50% !important;

    transform:none !important;

    filter:
        brightness(.92)
        contrast(1.03)
        saturate(.97) !important;
}

.oracion-card-shade{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(31,19,12,.32) 0%,
            rgba(31,19,12,.17) 28%,
            rgba(31,19,12,.05) 52%,
            rgba(31,19,12,0) 100%
        ) !important;
}

.oracion-card{
    position:relative !important;
    z-index:3 !important;
}

/* Anula cualquier estilo viejo de la versión con doble imagen */
.oracion-card-visual,
.oracion-card-background-blur,
.oracion-card-background-main{
    display:none !important;
}

@media(max-width:900px){

    .oracion-card-background{
        object-position:63% 50% !important;
    }

}

@media(max-width:560px){

    .oracion-card-background{
        object-position:58% 48% !important;
    }

    .oracion-card-shade{
        background:
            linear-gradient(
                180deg,
                rgba(30,18,11,.03) 0%,
                rgba(30,18,11,.10) 42%,
                rgba(30,18,11,.30) 100%
            ) !important;
    }

}

/* ================================================================
   INICIO — FONDOS ACTUALIZADOS: HORARIOS Y AVISOS
================================================================ */

.fino-schedule::before{
    background-image:
        linear-gradient(
            90deg,
            #fffcf7 0%,
            #fffcf7 42%,
            rgba(255,252,247,.96) 58%,
            rgba(255,252,247,.72) 78%,
            rgba(255,252,247,.34) 100%
        ),
        url('../img/horarios-misa.jpg') !important;

    background-position:center right !important;
    background-size:cover !important;
}

.fino-notices::before{
    background-image:
        linear-gradient(
            90deg,
            #fffcf7 0%,
            #fffcf7 42%,
            rgba(255,252,247,.96) 58%,
            rgba(255,252,247,.76) 76%,
            rgba(255,252,247,.38) 100%
        ),
        url('../img/avisos-home.jpg') !important;

    background-position:center right !important;
    background-size:cover !important;
}

/* Acento azul/dorado para integrar las tarjetas con la identidad actual */
.fino-schedule,
.fino-notices{
    border-color:rgba(15,63,111,.24) !important;
    box-shadow:
        0 12px 30px rgba(15,63,111,.07),
        0 3px 10px rgba(176,116,42,.05) !important;
}

.fino-schedule .fino-line-icon,
.fino-notices .fino-line-icon{
    background:linear-gradient(145deg,#f9f4eb,#edf3f8) !important;
    border-color:rgba(15,63,111,.24) !important;
    color:#0f3f6f !important;
}

.fino-schedule .fino-kicker,
.fino-notices .fino-kicker{
    color:#0f3f6f !important;
}

@media(max-width:650px){

    .fino-schedule::before{
        background-image:
            linear-gradient(
                90deg,
                #fffcf7 0%,
                rgba(255,252,247,.98) 55%,
                rgba(255,252,247,.78) 100%
            ),
            url('../img/horarios-misa.jpg') !important;
        background-position:60% center !important;
    }

    .fino-notices::before{
        background-image:
            linear-gradient(
                90deg,
                #fffcf7 0%,
                rgba(255,252,247,.98) 58%,
                rgba(255,252,247,.80) 100%
            ),
            url('../img/avisos-home.jpg') !important;
        background-position:63% center !important;
    }
}