:root{--cuarzo:#fcfaed;--onice:#1d1d1b;--jaspe:#f47174;--chapter-header-height:84px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cuarzo);color:var(--onice);font:16px/1.5 Parkinsans,sans-serif}
p,h1,h2,h3{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #7549ff;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:10px;z-index:10;padding:10px 18px;background:var(--cuarzo);color:var(--onice)}
.skip-link:focus{top:10px}
.chapter-header{background:var(--cuarzo);padding:20px 50px}
.header-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;max-width:1440px;margin:auto;gap:16px}
.chapter-brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:#000;text-decoration:none;white-space:nowrap}
.chapter-brand img{display:block;flex-shrink:0}
.scene-nav{display:flex;gap:11px;justify-content:center}
.scene-nav a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:.75px solid #9d9d9d;border-radius:27px}
.scene-nav a[aria-current]{border-color:var(--jaspe)}
.scene-nav a:hover{background:#f4717414}
.scene-nav img,.header-actions img{display:block}
.header-actions{display:flex;gap:24px;justify-content:flex-end;align-items:center}
.conversation{border:1px solid var(--onice);border-radius:52px;background:none;padding:8px 20px;color:var(--onice);font-size:14px;font-weight:600;white-space:nowrap}
.menu-toggle{display:flex;align-items:center;justify-content:center;width:41px;height:44px;border:0;background:none;cursor:pointer;padding:10px 0}
.scene{position:relative;isolation:isolate;height:100svh;min-height:640px;overflow:hidden;background:var(--scene-color)}
.intro{--scene-color:#b1c8d8;height:calc(100svh - var(--chapter-header-height))}
.huerto{--scene-color:#b2cda0}.tienda{--scene-color:#d49b8a}.jesus{--scene-color:#97b1d6}.habita{--scene-color:#b49ccc}.closing{--scene-color:#afcadd}
.scene-art{position:absolute;inset:0;display:block;z-index:-1}
.water-canvas{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;pointer-events:none;display:none}
.water-ready .water-canvas{display:block}
.water-ready .scene-image{opacity:0}
.water-ready>.display-title{opacity:0}
.water-ready>.water-canvas{z-index:0}
.water-ready>:not(.scene-art):not(.water-canvas){z-index:1}
.scene-image{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.12);transform-origin:50% 50%}
.display-title{position:absolute;top:4%;left:0;width:100%;font-size:clamp(80px,min(13.5vw,23svh),240px);letter-spacing:.1em;line-height:1;font-weight:400;text-align:center;white-space:nowrap;color:#1f1f1d}
.script{font-family:"Petit Formal Script",cursive;font-weight:400}
.intro-copy{position:absolute;left:16%;top:10%;font-size:clamp(26px,3.6svh,44px);line-height:1.5}
.intro .display-title{top:auto;bottom:9%}
.intro-middle{position:absolute;right:13%;top:43%;width:180px}
.scene-note{font-size:clamp(14px,1.65svh,18px);line-height:1.5}
.marker{display:flex;align-items:center;gap:10px;color:#1e3a8a;font-size:13px;font-weight:700;margin-bottom:14px;white-space:nowrap}
.marker img{display:block;flex-shrink:0}
.note-row{position:absolute;left:4%;top:26%;width:200px}
.huerto .note-row{left:13%}
.tienda .marker{color:#9d342b}
.jesus .marker,.habita .marker{color:#3949ab}
.annotations{position:absolute;inset:0;pointer-events:none}
.annotation{position:absolute;width:180px;font-size:clamp(14px,1.65svh,18px);line-height:1.5;pointer-events:auto}
.annotation.first{left:19%;top:43%}
.annotation.second{right:15%;top:47%}
.annotation.third{left:29%;top:68%}
.huerto .annotation.first{left:15%;width:220px}
.huerto .annotation.second{width:220px}
.tienda .annotation.second{right:13%}
.jesus .annotation.second{right:8%}
.habita .note-row{width:300px;top:29%}
.habita .annotation.first{left:16%;top:47%}
.habita .annotation.second{right:15%;top:47%}
.habita .annotation.third{top:76%}
.scene-quote{position:absolute;left:6%;right:6%;bottom:10%;font-size:clamp(20px,2.7svh,32px);text-align:center;line-height:1.5;color:#1f1f1d}
.scene-quote span{font-family:Parkinsans,sans-serif}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #000;border-radius:52px;background:var(--onice);color:#fff;padding:12px 24px;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap}
.scene>.pill{position:absolute;bottom:3%;left:50%;transform:translateX(-50%)}
.pill img,.text-action img{display:block;flex-shrink:0}
button:disabled{opacity:1;cursor:default}
.text-action{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0;font-size:14px;font-weight:600;color:var(--onice);text-decoration:underline;white-space:nowrap}
.scene-spacer{display:none}
.scene-kicker{position:absolute;top:4%;left:0;width:100%;text-align:center;font-size:clamp(24px,3svh,36px)}
.habita .display-title,.closing .display-title{top:10%}
.closing .scene-kicker{text-align:center;left:0;width:100%}
.closing-content{position:absolute;left:16%;bottom:18%;width:220px}
.closing-note{font-size:16px;line-height:1.5}
.closing-note .pill{margin-top:20px}
@media(min-width:701px) and (max-width:1100px){
.chapter-header{padding:16px 24px}.header-inner{grid-template-columns:1fr auto 1fr}
.chapter-brand{font-size:16px}.header-actions{gap:12px}.conversation{display:none}
.annotation{width:150px}.annotation.first{left:10%}.annotation.second{right:7%}
.habita .annotation.first{left:9%}.habita .annotation.second{right:7%}
.note-row{width:170px}.huerto .note-row{left:6%}.habita .note-row{width:240px}
}
@media(max-width:700px),(orientation:portrait){
.scene-image{object-fit:cover;transform:scale(1.06)}
.intro{--scene-color:#b1c8da}.closing{--scene-color:#afcadd}
.scene{min-height:780px}
.intro{min-height:700px}
.display-title{top:5%;font-size:clamp(42px,14vw,110px);letter-spacing:.055em}
.note-row,.huerto .note-row{top:18%;left:6%;width:70%}
.scene-note{font-size:14px;line-height:1.45}
.marker{gap:8px;font-size:12px;margin-bottom:8px}
.annotation,.huerto .annotation.first,.huerto .annotation.second{font-size:13px;width:27%;line-height:1.4}
.annotation.first,.huerto .annotation.first{left:5%;top:43%}
.annotation.second,.tienda .annotation.second,.jesus .annotation.second{right:4%;top:46%}
.jesus .annotation.second{top:35%}
.annotation.third{left:9%;top:66%;width:38%}
.scene-quote{left:6%;right:6%;bottom:10%;font-size:clamp(18px,4.5vw,26px);line-height:1.55}
.jesus .scene-quote br{display:none}
.pill{font-size:13px;padding:10px 20px;gap:8px}
.scene>.pill{bottom:3%}
.intro-copy{left:9%;top:8%;font-size:clamp(27px,6vw,38px)}
.intro .display-title{bottom:17%;font-size:clamp(56px,16vw,120px)}
.intro-middle{top:auto;right:auto;left:9%;bottom:6%;width:70%}
.habita .scene-kicker,.closing .scene-kicker{top:4%;left:0;width:100%;text-align:center;font-size:26px}
.habita .display-title,.closing .display-title{top:10%}
.habita .note-row{top:21%;left:6%;width:85%}
.habita .annotation{width:25%}
.habita .annotation.first{left:4%;top:44%}
.habita .annotation.second{right:3%;top:47%}
.habita .annotation.third{left:9%;top:73%;width:50%}
.text-action{font-size:12px;gap:6px;padding:6px 0}
.closing-content{left:9%;bottom:10%;width:75%}
.closing-note{font-size:15px}
}
@media(max-width:700px){
.chapter-header{padding:16px 20px}
.header-inner{grid-template-columns:1fr auto;gap:16px}
.chapter-brand{font-size:18px}.header-actions{gap:10px}.conversation{display:none}
.scene-nav{grid-column:1/-1;grid-row:2;gap:16px}
.scene-nav a{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Comportamiento del header alineado con El conocimiento nace de la relación. */
html{scroll-padding-top:var(--chapter-header-height)}
main{padding-top:var(--chapter-header-height)}
.chapter-header{position:fixed;inset:0 0 auto;z-index:100;height:84px;display:flex;align-items:center;justify-content:center;padding:20px clamp(24px,3.5vw,50px);border-bottom:1px solid #1d1d1b14}
.header-inner{width:100%;max-width:1340px;grid-template-columns:1fr auto 1fr;gap:24px}
.scene-nav{gap:10px;grid-column:auto;grid-row:auto}
.scene-nav a{width:auto;height:38px;padding:9px;gap:0;border:1px solid #bdbdb8;border-radius:40px;color:#9d9d9d;flex-shrink:0;text-decoration:none;transition:color .25s,border-color .25s,padding .25s}
.scene-nav img{filter:grayscale(1);opacity:.75;flex-shrink:0}
.scene-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:700;text-transform:uppercase;transition:max-width .3s,opacity .2s,margin .3s}
.scene-nav a[aria-current],.scene-nav a:hover,.scene-nav a:focus-visible{color:#f47174;border-color:#f47174;padding-inline:14px;background:none}
.scene-nav a[aria-current]:not(:first-child) .scene-label,.scene-nav a:hover .scene-label,.scene-nav a:focus-visible .scene-label{max-width:210px;opacity:1;margin-left:9px}
.scene-nav a[aria-current] img,.scene-nav a:hover img,.scene-nav a:focus-visible img{filter:brightness(0) saturate(100%) invert(65%) sepia(25%) saturate(2040%) hue-rotate(309deg) brightness(101%) contrast(91%);opacity:1}
@media(width < 1100px){
.chapter-header{height:64px;padding:10px 12px}
.header-inner{grid-template-columns:34px 1fr 30px;gap:8px}
.chapter-brand{width:30px}.chapter-brand span,.conversation{display:none}
.chapter-brand img{width:28px;height:28px;object-fit:contain}
.header-actions{width:30px;gap:0;justify-content:flex-end}
.menu-toggle{width:28px}
.scene-nav{justify-content:center;gap:5px}
.scene-nav a,.scene-nav a:hover,.scene-nav a[aria-current],.scene-nav a:focus-visible{width:33px;height:33px;padding:7px}
.scene-label{display:none}
}
@media(min-width:761px) and (width < 1100px){
.scene-nav a,.scene-nav a:hover,.scene-nav a[aria-current],.scene-nav a:focus-visible{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.scene-nav a,.scene-label{transition:none}}

/* Visor del capítulo en la URL habitual. */
.visor-mode,.visor-mode body{height:100%;overflow:hidden;overscroll-behavior:none}
.visor-mode main{position:fixed;inset:var(--chapter-header-height) 0 0;padding:0;overflow:hidden;touch-action:pan-x}
.visor-mode .visor-panel{display:none}
.visor-mode main>.scene{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.visor-mode .visor-panel.is-current,.visor-mode .visor-panel.is-entering{display:block}
.visor-mode .is-entering{z-index:3;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.visor-mode .is-entering>:not(.scene-art):not(.water-canvas){opacity:0}
.visor-mode .is-current{z-index:1}
.visor-mode.visor-travel .is-current>:not(.scene-art):not(.water-canvas){opacity:0;transition:opacity .18s}
.visor-controls{position:fixed;right:24px;bottom:20px;z-index:110;display:flex;align-items:center;gap:12px;padding:8px;border:1px solid #1d1d1b20;border-radius:40px;background:#fcfaeddd;backdrop-filter:blur(8px)}
.visor-controls button{width:36px;height:36px;border:0;border-radius:50%;background:none;color:#1d1d1b;font-size:22px;cursor:pointer}
.visor-controls button:hover{background:#1d1d1b10}
.visor-controls button:disabled{opacity:.3;cursor:default}
.visor-count{font-size:12px;font-weight:600;min-width:38px;text-align:center}
.visor-mode footer.visor-footer{position:fixed;inset:var(--chapter-header-height) 0 0;height:calc(100svh - var(--chapter-header-height));min-height:0;z-index:2;overflow-y:auto;padding-bottom:110px}
.visor-mode .mobile-prayer-shortcut{left:16px;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media(max-width:700px){
.visor-controls{bottom:12px;right:12px;gap:6px;padding:5px}
.visor-controls button{width:32px;height:32px}
.visor-mode .intro .display-title{bottom:22%}
.visor-mode .intro-middle{bottom:12%}
.visor-mode .collection-tag{bottom:5%}
.visor-mode .scene-note{font-size:13px}
.visor-mode .scene-quote{font-size:18px}
.visor-mode .closing-content{bottom:17%}
}




/* El footer continúa con scroll después de la última escena. */
.visor-mode .visor-footer{display:none}
.visor-mode.visor-final main{overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.visor-mode.visor-final main>.closing.is-current{position:relative;height:calc(100svh - var(--chapter-header-height));flex-shrink:0}
.visor-mode.visor-final footer.visor-footer{display:block;position:relative;inset:auto;height:auto;min-height:0;overflow:visible;padding-bottom:100px}


/* Altura dinámica y lectura móvil sin comprimir el contenido. */
.visor-mode main{height:calc(100dvh - var(--chapter-header-height));bottom:auto}
.visor-controls{right:13%;bottom:4.5%}
.visor-mode.visor-final main>.closing.is-current{height:calc(100dvh - var(--chapter-header-height))}
@media(max-width:700px){
.visor-controls{display:none}
.visor-mode main{touch-action:pan-y}
.visor-mode .scene-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;z-index:1}
.visor-mode .scene-content{position:relative;min-height:max(880px,calc(100dvh - var(--chapter-header-height)));width:100%}
.visor-mode .intro .scene-content,.visor-mode .closing .scene-content{min-height:0;height:calc(100dvh - var(--chapter-header-height))}
.visor-mode .intro .scene-art{top:-10%}
.visor-mode .intro-copy{top:5%}
.visor-mode .intro .display-title{bottom:29%}
.visor-mode .intro-middle{bottom:15%}
.visor-mode .collection-tag{bottom:5%;left:9%}
.visor-mode .scene-quote{bottom:5%;font-size:20px}
.visor-mode .annotation.third{top:65%}
.visor-mode .habita .annotation.third{top:66%}
.visor-mode .closing .scene-scroll{overflow:hidden}
.visor-mode .mobile-prayer-shortcut{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
.visor-mode main[data-visor-scene="centro"]~.mobile-prayer-shortcut{display:none}
@media(max-width:700px){
.visor-mode .jesus .scene-content,.visor-mode .habita .scene-content{min-height:max(960px,calc(100dvh - var(--chapter-header-height)))}
.visor-mode .jesus .annotation.third,.visor-mode .habita .annotation.third{top:68%}
}


/* Móvil: composición completa sin desplazamiento interno. */
.visor-mode main{height:calc(var(--visor-height,100dvh) - var(--chapter-header-height))}
.visor-mode.visor-final main>.closing.is-current{height:calc(var(--visor-height,100dvh) - var(--chapter-header-height))}
@media(max-width:700px){
.visor-mode main>.scene{width:100%;min-height:0}
.visor-mode .scene-art{inset:0;width:100%;height:100%}
.visor-mode .scene-image{width:100%;height:100%;object-fit:cover}
.visor-mode .intro .scene-art{top:-7%}
.visor-mode .scene-quote{bottom:7%;font-size:clamp(15px,2.6dvh,20px);line-height:1.4}
.visor-mode .annotation,.visor-mode .habita .annotation{font-size:clamp(11px,1.65dvh,13px);line-height:1.35}
.visor-mode .text-action{font-size:11px;padding:4px 0}
.visor-mode .jesus .annotation.third,.visor-mode .habita .annotation.third{top:64%;width:46%}
.visor-mode .scene-note{font-size:clamp(11px,1.7dvh,13px)}
.visor-mode .intro .display-title{bottom:28%}
}

/* Fondo móvil a altura máxima; contenido independiente en el área visible. */
@media(max-width:700px){
.visor-mode main{height:calc(max(100lvh,var(--visor-height,100dvh)) - var(--chapter-header-height))}
.visor-mode .scene-ui{position:absolute;inset:0 0 auto;height:calc(var(--visor-height,100dvh) - var(--chapter-header-height));z-index:1}
.visor-mode .mobile-prayer-shortcut{left:auto;right:16px}
.visor-mode.visor-final main{height:calc(var(--visor-height,100dvh) - var(--chapter-header-height))}
}

/* Líneas sutiles entre las anotaciones y los elementos del Huerto. */
.scene-connections{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.scene-connections path{fill:none;stroke:#fcfaed;stroke-opacity:.6;stroke-width:1;vector-effect:non-scaling-stroke}
.huerto .annotation{will-change:transform}
@media(max-width:700px){.scene-connections path{stroke-opacity:.45;stroke-width:.8}}
@media(prefers-reduced-motion:reduce){.huerto .annotation{will-change:auto}}


.scene-connections circle{fill:#fff;fill-opacity:.35;stroke:#fff;stroke-opacity:.45;stroke-width:.8;vector-effect:non-scaling-stroke}

.scene .annotation,.scene .intro-middle,.scene .closing-content{will-change:transform}
@media(prefers-reduced-motion:reduce){.scene .annotation,.scene .intro-middle,.scene .closing-content{will-change:auto}}


.text-emphasis{font-family:Parkinsans,sans-serif;font-weight:700;font-style:normal}


button:not(:disabled),a,[role="button"]{cursor:pointer}
button:disabled{cursor:default}
.explore-hint{position:absolute;right:13%;bottom:4.5%;display:flex;align-items:center;justify-content:center;gap:18px;color:#fcfaed;font-family:Parkinsans,sans-serif;font-size:16px;font-weight:700;pointer-events:none}
.explore-hint::before,.explore-hint::after{content:"";width:clamp(35px,6vw,110px);height:1px;background:currentColor;opacity:.65}
@media(max-width:700px){
.explore-hint{left:6%;right:6%;bottom:3%;gap:12px;font-size:12px}
.explore-hint::before,.explore-hint::after{flex:1;width:auto}
.explore-hint svg{width:19px;height:19px}
.visor-mode .intro .collection-tag{bottom:10%}
.visor-mode .intro-middle{bottom:18%}
}

:root{--section-blue:#1e3a8a}
.scene .marker{color:var(--section-blue)}
.scene .marker img{filter:brightness(0) saturate(100%) invert(20%) sepia(43%) saturate(2315%) hue-rotate(205deg) brightness(89%) contrast(96%)}
.explore-hint{border:0;background:none;padding:0;line-height:1.5}
@media(min-width:701px){
.explore-hint{color:var(--section-blue);border:1px solid #1e3a8a55;border-radius:40px;background:#fcfaedb3;padding:12px 22px;pointer-events:auto;cursor:pointer}
.explore-hint::before,.explore-hint::after{display:none}
.explore-hint:hover{background:#fcfaed}
}
@media(max-width:700px){.explore-hint{pointer-events:none}}

/* Portada móvil: título completo antes de la figura. */
@media(max-width:700px){
.visor-mode .intro .display-title{top:calc(5% + clamp(27px,6vw,38px)*3 + 16px);bottom:auto;left:9%;width:82%;text-align:left;font-size:clamp(48px,14vw,90px);letter-spacing:.055em}
}

/* Espaciado de la portada móvil. */
@media(max-width:700px){
.visor-mode .intro .display-title{top:calc(5% + clamp(27px,6vw,38px)*3 + 2px)}
.visor-mode .intro-middle{bottom:24%}
.visor-mode .intro .collection-tag{bottom:16%}
}

/* Énfasis con separación legible entre las dos familias tipográficas. */
.scene-quote .text-emphasis{margin-inline:.12em}
.closing-note p{margin-bottom:24px}
@media(max-width:700px){
.visor-mode .tienda .annotation.first{top:35%;left:5%;width:31%}
.visor-mode .tienda .annotation.second{top:36%;right:5%;width:29%}
.visor-mode .tienda .annotation.third{top:66%;left:25%;width:50%;text-align:center}
.visor-mode .jesus .annotation.first{top:43%;left:5%;width:29%}
.visor-mode .jesus .annotation.second{top:29%;right:5%;width:30%}
.visor-mode .jesus .annotation.third{top:65%;left:25%;width:50%;text-align:center}
.visor-mode .habita .annotation.first{top:35%;left:5%;width:31%}
.visor-mode .habita .annotation.second{top:43%;right:4%;width:29%}
.visor-mode .habita .annotation.third{top:69%;left:22%;width:56%;text-align:center}
.visor-mode .annotation.third .text-action{margin-inline:auto}
.visor-mode .jesus .scene-quote{bottom:8%;line-height:1.6}
.visor-mode .closing-content{bottom:7%;left:9%;width:82%}
.visor-mode .closing-note p{margin-bottom:22px}
.visor-mode .closing .scene-kicker{top:6%}
.visor-mode .closing .display-title{top:13%}
}
@media(max-width:700px) and (max-height:720px){
.visor-mode .tienda .annotation.first{top:35%}
.visor-mode .habita .annotation.first{top:36%}
.visor-mode .jesus .annotation.third{top:63%}
.visor-mode .jesus .scene-quote{bottom:6%;font-size:15px;line-height:1.45}
.visor-mode .closing-note p{margin-bottom:14px}
}

/* Ser Humano: aprovechar el espacio inferior sin frase de cierre. */
@media(max-width:700px){
.visor-mode .habita .annotation.second{top:57%;right:4%;width:33%}
.visor-mode .habita .annotation.third{top:81%;left:17%;width:66%}
}

.explore-hint{pointer-events:auto;cursor:pointer}


/* Relleno curvo animado de los botones principales. */
.pill,.prayer-start{position:relative;isolation:isolate;overflow:hidden;transition:color .35s,border-color .35s}
.pill::before,.prayer-start::before{content:"";position:absolute;z-index:-1;left:-30%;top:0;width:160%;height:190%;border-radius:48% 52% 0 0;background:#fcfaed;transform:translateY(110%) rotate(-8deg);transition:transform .65s cubic-bezier(.22,.7,.2,1);pointer-events:none}
.pill:hover,.pill:focus-visible,.prayer-start:hover,.prayer-start:focus-visible{color:#1e3a8a;background:#1d1d1b}
.pill:hover::before,.pill:focus-visible::before,.prayer-start:hover::before,.prayer-start:focus-visible::before{transform:translateY(-22%) rotate(0)}
.pill img{transition:filter .35s}
.pill:hover img,.pill:focus-visible img{filter:brightness(0) saturate(100%) invert(20%) sepia(43%) saturate(2315%) hue-rotate(205deg) brightness(89%) contrast(96%)}
@media(min-width:701px){
.explore-hint{isolation:isolate;overflow:hidden;transition:color .35s,border-color .35s}
.explore-hint::before{display:block;content:"";position:absolute;z-index:-1;left:-30%;top:0;width:160%;height:190%;border-radius:48% 52% 0 0;opacity:1;background:#1d1d1b;transform:translateY(110%) rotate(-8deg);transition:transform .65s cubic-bezier(.22,.7,.2,1)}
.explore-hint:hover,.explore-hint:focus-visible{color:#fcfaed;border-color:#1d1d1b;background:#fcfaed}
.explore-hint:hover::before,.explore-hint:focus-visible::before{transform:translateY(-22%) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.pill,.prayer-start,.explore-hint,.pill::before,.prayer-start::before,.explore-hint::before{transition:none}}

.prayer-start:hover,.prayer-start:focus-visible{color:#1e3a8a!important}



.text-action{transition:color .25s}
.text-action img{transition:transform .3s ease,filter .25s}
.text-action:hover,.text-action:focus-visible{color:#1e3a8a}
.text-action:hover img,.text-action:focus-visible img{transform:translateX(5px);filter:brightness(0) saturate(100%) invert(20%) sepia(43%) saturate(2315%) hue-rotate(205deg) brightness(89%) contrast(96%)}
@media(prefers-reduced-motion:reduce){.text-action,.text-action img{transition:none}.text-action:hover img,.text-action:focus-visible img{transform:none}}

.conversation{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;transition:color .35s,border-color .35s}
.conversation::before{content:"";position:absolute;z-index:-1;left:-30%;top:0;width:160%;height:190%;border-radius:48% 52% 0 0;background:#fcfaed;transform:translateY(110%) rotate(-8deg);transition:transform .65s cubic-bezier(.22,.7,.2,1);pointer-events:none}
.conversation:hover,.conversation:focus-visible{color:#1e3a8a;border-color:#1e3a8a55}
.conversation:hover::before,.conversation:focus-visible::before{transform:translateY(-22%) rotate(0)}
@media(prefers-reduced-motion:reduce){.conversation,.conversation::before{transition:none}}

/* Variante móvil con poco alto visible: textos fuera del centro de la figura. */
@media(max-width:700px){
.visor-mode.mobile-short .tienda .annotation.third{left:6%;top:68%;width:43%;text-align:left}
.visor-mode.mobile-short .jesus .annotation.third{left:auto;right:5%;top:65%;width:43%;text-align:left}
.visor-mode.mobile-short .habita .annotation.third{left:6%;top:79%;width:65%;text-align:left}
.visor-mode.mobile-short .habita .annotation.second{right:4%;top:62%;width:36%}
.visor-mode.mobile-short .annotation.third .text-action{margin-inline:0}
}

/* Posiciones indicadas para celulares con poca altura visible. */
@media(max-width:700px){
.visor-mode.mobile-short .jesus .annotation.first{top:32%;left:5%;width:29%}
.visor-mode.mobile-short .jesus .annotation.third{top:65%;left:5%;right:auto;width:29%;text-align:left}
.visor-mode.mobile-short .tienda .annotation.third{top:68%;left:5%;width:27%;text-align:left}
.visor-mode.mobile-short .habita .annotation.second{top:35%;right:5%;width:31%}
.visor-mode.mobile-short .habita .annotation.third{top:79%;left:5%;width:34%;text-align:left}
}

@media(max-width:700px){
.visor-mode.mobile-short .closing-content{bottom:3%}
}