/* =====================================================================
   Vela y Oración · landing
   Dirección «Mandorlas»: noche de iglesia, oro, luz de vela y
   almendras de luz de colores. Mobile-first.
   ===================================================================== */

:root {
  color-scheme: dark;
  --night: #060403;
  --bg: #0b0806;
  --bg2: #110b07;
  --ink: #fff4dc;
  --ink2: rgba(255, 244, 220, .84);
  --ink3: rgba(255, 244, 220, .66);
  --gold: #ffd98e;
  --gold2: #ffe2a8;
  --gold3: #ffe9b8;
  --gold-d: #c48a2c;
  --line: rgba(255, 217, 142, .22);
  --line2: rgba(255, 217, 142, .4);
  --glow: 255, 180, 80;
  --disp: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --body: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --gut: 20px;
  --max: 1200px;
  --hdr: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* color de almendra por defecto (ámbar) */
  --l: #fff1c6; --m: #ffb232; --mm: #e58c0a; --d: #5c2a00; --c: 255, 170, 40;
  --almond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 1C88 26 92 70 50 99 8 70 12 26 50 1Z'/%3E%3C/svg%3E");
}

/* Paleta de almendras (la misma de la app) */
.m-ruby { --l: #ffd3dc; --m: #ff2d58; --mm: #e0143c; --d: #5a0014; --c: 255, 40, 80; }
.m-saph { --l: #d8e7ff; --m: #4f8dff; --mm: #2c63f0; --d: #081a66; --c: 70, 130, 255; }
.m-ambr { --l: #fff1c6; --m: #ffb232; --mm: #e58c0a; --d: #5c2a00; --c: 255, 170, 40; }
.m-emer { --l: #d2fbe6; --m: #30e890; --mm: #12b06a; --d: #033a20; --c: 30, 220, 140; }
.m-amet { --l: #f3ddff; --m: #b364ff; --mm: #9a3cf0; --d: #2a0750; --c: 180, 90, 255; }
.m-turq { --l: #d3fffa; --m: #30e8dc; --mm: #10b8b0; --d: #013a38; --c: 40, 220, 210; }
.m-rosa { --l: #ffdaf0; --m: #ff4fa8; --mm: #e81c8c; --d: #560030; --c: 255, 60, 150; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 500 20px/1.5 var(--body); font-kerning: normal; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--gold2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold3); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 217, 142, .35); color: #fff; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink3); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: #1a0f04; font: 700 14px var(--disp); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 820px; }

/* ---------- tipografía ---------- */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12px/1.3 var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow--sm { font-size: 11px; margin: 10px 0 6px; }
.dot { width: 10px; height: 14px; flex: none; border-radius: 50% / 50%; background: radial-gradient(circle at 40% 35%, var(--l), var(--m) 45%, var(--mm)); box-shadow: 0 0 12px rgba(var(--c), .9); transform: rotate(18deg); }
.h2 { font: 600 clamp(29px, 7.6vw, 54px)/1.1 var(--disp); letter-spacing: .015em; color: var(--ink); text-wrap: balance; margin-bottom: 18px; }
.h2 em, .hero__title em { display: inline; font: italic 600 1.12em/1 var(--body); letter-spacing: 0; color: var(--gold2); background: linear-gradient(180deg, var(--gold3), var(--gold) 55%, #e8a948); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.h2--xl { font-size: clamp(32px, 8.4vw, 64px); }
.h2--sm { font-size: clamp(26px, 6vw, 38px); }
.h3 { font: 600 clamp(22px, 5.4vw, 28px)/1.18 var(--disp); letter-spacing: .02em; margin-bottom: 10px; text-wrap: balance; }
.h4 { font: 700 15px/1.3 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink2); max-width: 36em; }
.fine { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--ink3); margin-top: 18px; }
.fine .ic { margin-top: 3px; color: var(--gold); }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font: 700 14px/1.2 var(--disp); letter-spacing: .12em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn--fire { border-color: var(--gold2); background: linear-gradient(180deg, #170d05, #050302); color: var(--gold3); text-shadow: 0 0 10px rgba(var(--glow), .7); box-shadow: 0 0 22px rgba(var(--glow), .55), inset 0 0 14px rgba(var(--glow), .25); }
.btn--fire:hover { color: #fff6df; box-shadow: 0 0 34px rgba(var(--glow), .8), inset 0 0 18px rgba(var(--glow), .35); }
.btn--gold { background: linear-gradient(180deg, #fff1cf 0%, #ffd27f 48%, #e3a443 100%); color: #1c1004; border-color: rgba(255, 240, 200, .9); box-shadow: 0 10px 30px -10px rgba(var(--glow), .9), 0 0 0 1px rgba(120, 70, 10, .35) inset; }
.btn--gold:hover { color: #1c1004; box-shadow: 0 14px 40px -10px rgba(var(--glow), 1), 0 0 26px rgba(var(--glow), .55); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line2); color: var(--ink); background: rgba(10, 6, 3, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--gold2); color: var(--gold3); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 12px; }
.btn--wide { width: 100%; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line2); background: rgba(8, 5, 3, .6); color: var(--gold2); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.iconbtn:hover { border-color: var(--gold2); background: rgba(40, 26, 10, .7); }
.iconbtn .ic { width: 22px; height: 22px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid; font: 700 11px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.chip--prod { color: #ffd98e; border-color: rgba(255, 217, 142, .6); background: rgba(60, 35, 5, .55); }
.chip--soon { color: #b4fbf5; border-color: rgba(48, 232, 220, .55); background: rgba(1, 40, 38, .55); }

/* ---------- cabecera ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0); }
.hdr.is-solid, .page-legal .hdr, .page-thanks .hdr { background: rgba(9, 6, 4, .82); border-bottom-color: var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.hdr__in { display: flex; align-items: center; gap: 10px; height: var(--hdr); max-width: 1320px; margin: 0 auto; padding: 0 12px 0 var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gold3); text-decoration: none; margin-right: auto; }
.brand__mark { width: 24px; height: 30px; filter: drop-shadow(0 0 6px rgba(var(--glow), .6)); }
.brand__name { font: 700 15px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.brand__name span { font-size: .8em; color: var(--gold); }
.lang { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 5, 3, .5); }
.lang__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; padding: 0 10px; border-radius: 999px; font: 700 12px var(--disp); letter-spacing: .12em; color: var(--ink3); text-decoration: none; }
.lang__opt:hover { color: var(--gold3); }
.lang__opt[aria-current="true"] { background: linear-gradient(180deg, #2a1c0c, #140c05); color: var(--gold3); box-shadow: inset 0 0 0 1px var(--line2), 0 0 10px rgba(var(--glow), .35); }
.lang--ftr { margin-top: 18px; }
.lang--ftr .lang__opt { font: 600 16px var(--body); letter-spacing: 0; }
.hdr__cta { display: none; }
.menu-btn { width: 44px; height: 44px; border-color: var(--line); }
.nav { position: fixed; left: 0; right: 0; top: calc(var(--hdr) + env(safe-area-inset-top, 0)); max-height: calc(100vh - var(--hdr)); overflow: auto; padding: 8px var(--gut) 24px; background: rgba(9, 6, 4, .97); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
.nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.nav ul { list-style: none; }
.nav li a { display: block; padding: 15px 2px; border-bottom: 1px solid rgba(255, 217, 142, .12); font: 600 17px var(--disp); letter-spacing: .1em; color: var(--ink); text-decoration: none; }
.nav li a:hover { color: var(--gold3); }
.nav__join { margin-top: 18px; }

@media (min-width: 560px) { .hdr__cta { display: inline-flex; } }
@media (min-width: 980px) {
  .menu-btn { display: none; }
  .nav { position: static; display: block; max-height: none; overflow: visible; padding: 0; background: none; border: 0; transform: none; opacity: 1; visibility: visible; margin-right: 6px; }
  .nav ul { display: flex; gap: 4px; }
  .nav li a { padding: 10px 12px; border: 0; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); border-radius: 999px; }
  .nav li a:hover { background: rgba(255, 217, 142, .08); }
  .nav__join { display: none; }
  .hdr__in { gap: 12px; padding-right: var(--gut); }
}

/* ---------- teléfono (mockup) ---------- */
.phone { --w: 260px; position: relative; display: block; margin: 0; width: var(--w); padding: 3.4%; border-radius: 15% / 7%; background: linear-gradient(150deg, #3a2f24 0%, #110d0a 22%, #070504 60%, #241c15 100%); box-shadow: 0 0 0 1px rgba(255, 217, 142, .32), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 4px #050403, 0 40px 70px -25px rgba(0, 0, 0, .95), 0 0 70px -12px rgba(var(--c), .5); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(90deg, #3c3127, #1a140f); }
.phone::before { right: -3px; top: 24%; height: 11%; }
.phone::after { left: -3px; top: 19%; height: 7%; box-shadow: 0 calc(var(--w) * .2) 0 #2a2119; }
.phone__body { position: relative; display: block; overflow: hidden; border-radius: 12% / 5.5%; background: #000; aspect-ratio: 400 / 866; }
.phone__body img { width: 100%; height: 100%; object-fit: cover; }
.phone__body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 26%, transparent 42%); pointer-events: none; }

/* halos */
.halo { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c), .55), rgba(var(--c), .18) 55%, transparent 75%); filter: blur(30px); pointer-events: none; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; isolation: isolate; padding: calc(var(--hdr) + 28px) 0 64px; display: flex; flex-direction: column; justify-content: center; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__door { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(.8) saturate(1.05); transform: scale(1.04); animation: doorBreath 18s ease-in-out infinite alternate; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 4, 3, .92) 0%, rgba(6, 4, 3, .78) 38%, rgba(6, 4, 3, .35) 62%, rgba(6, 4, 3, .55) 82%, var(--bg) 100%); }
.hero__crack { position: absolute; left: 50%; top: 58%; width: 70%; max-width: 560px; aspect-ratio: 1 / 1.3; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .38), rgba(255, 170, 70, .12) 55%, transparent 75%); filter: blur(16px); opacity: 0; animation: doorGlow 7s 0.4s ease-in-out infinite alternate; pointer-events: none; }
.hero__rays { position: absolute; inset: -20% -40%; background:
  linear-gradient(115deg, transparent 38%, rgba(255, 45, 88, .10) 42%, transparent 46%),
  linear-gradient(115deg, transparent 47%, rgba(79, 141, 255, .10) 50%, transparent 54%),
  linear-gradient(115deg, transparent 55%, rgba(48, 232, 144, .08) 58%, transparent 61%),
  linear-gradient(115deg, transparent 62%, rgba(255, 178, 50, .09) 65%, transparent 68%);
  mix-blend-mode: screen; animation: raysDrift 22s ease-in-out infinite alternate; }
.hero__in { position: relative; display: grid; gap: 34px; align-items: center; }
.hero__copy { max-width: 640px; }
.hero__title { font: 600 clamp(34px, 9.6vw, 74px)/1.06 var(--disp); letter-spacing: .01em; margin: 0 0 20px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.hero__title em { font-size: 1.1em; }
.hero__sub { font-size: 20px; line-height: 1.5; color: var(--ink2); max-width: 34em; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.hero__ctas { display: grid; gap: 12px; margin-top: 26px; }
.hero__note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 17px; color: var(--ink3); }
.hero__note .ic { color: var(--gold); }
.hero__stage { position: relative; display: flex; justify-content: center; padding: 10px 0 0; }
.hero__float { position: relative; display: flex; justify-content: center; }
.halo--hero { inset: -6% -10%; background: radial-gradient(closest-side, rgba(255, 196, 110, .55), rgba(255, 150, 60, .18) 55%, transparent 76%); }
.phone--hero { --w: min(66vw, 290px); }
.hero__scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 8px; font: 700 11px var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); text-decoration: none; }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent); animation: drip 2.2s ease-in-out infinite; }

/* motas de luz */
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffe7b0; box-shadow: 0 0 10px 2px rgba(var(--glow), .8); opacity: 0; animation: mote 14s linear infinite; }
.motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.motes i:nth-child(2) { left: 26%; animation-delay: 3s; animation-duration: 17s; }
.motes i:nth-child(3) { left: 41%; animation-delay: 6s; }
.motes i:nth-child(4) { left: 55%; animation-delay: 1.5s; animation-duration: 19s; }
.motes i:nth-child(5) { left: 67%; animation-delay: 8s; }
.motes i:nth-child(6) { left: 78%; animation-delay: 4.5s; animation-duration: 16s; }
.motes i:nth-child(7) { left: 88%; animation-delay: 10s; }
.motes i:nth-child(8) { left: 34%; animation-delay: 12s; animation-duration: 21s; }

@media (min-width: 560px) { .hero__ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 980px) {
  .hero { padding-bottom: 80px; }
  .hero__in { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  .hero__door { left: auto; width: 62%; object-position: 50% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  .hero__veil { background: linear-gradient(90deg, rgba(6, 4, 3, .96) 0%, rgba(6, 4, 3, .82) 38%, rgba(6, 4, 3, .2) 70%, rgba(6, 4, 3, .4) 100%), linear-gradient(180deg, rgba(6, 4, 3, .5), transparent 25%, transparent 75%, var(--bg)); }
  .hero__crack { left: 69%; top: 55%; width: 40%; }
  .phone--hero { --w: 330px; }
  .hero__scroll { display: flex; }
}

/* ---------- INTRO + anillo de almendras ---------- */
.intro { position: relative; padding: 64px 0 56px; overflow: clip; background: radial-gradient(ellipse 80% 60% at 50% 70%, #1a1009 0%, var(--bg) 70%); }
.intro__in { display: grid; gap: 30px; }
.status { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(20, 13, 7, .7); font-size: 17px; line-height: 1.45; color: var(--ink2); max-width: 36em; }
.status .ic { margin-top: 3px; color: var(--gold); }
.status strong { color: var(--gold3); font-weight: 700; }
.ring { display: flex; flex-direction: column; align-items: center; }
.ring__hint { text-align: center; font-style: italic; font-size: 18px; color: var(--ink3); max-width: 24em; }
.ring__stage { --size: min(90vw, 480px); --rad: calc(var(--size) * .3); position: relative; width: var(--size); height: var(--size); }
.ring__circle { position: absolute; inset: 3%; border-radius: 50%; border: 1.5px dotted rgba(255, 226, 168, .6); box-shadow: 0 0 40px rgba(var(--glow), .15), inset 0 0 40px rgba(var(--glow), .1); animation: spin 120s linear infinite; }
.ring__star { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .9; animation: starPulse 7s ease-in-out infinite; }
.mand { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 31%; height: 31%; margin: -15.5% 0 0 -15.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: #fff; transform: rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1)); transition: filter .3s; -webkit-tap-highlight-color: transparent; }
.mand__shape { position: absolute; inset: -20% 2%; rotate: var(--a); background: radial-gradient(ellipse 70% 55% at 42% 28%, var(--l) 0%, var(--m) 34%, var(--mm) 70%, var(--d) 130%); -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; animation: breathe 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); }
.mand::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c), .55), transparent 75%); filter: blur(10px); }
.mand .ic { position: relative; width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.mand__lbl { position: relative; max-width: 100%; font: 700 12px/1.15 var(--disp); letter-spacing: .1em; text-transform: uppercase; text-align: center; text-shadow: 0 0 2px #000, 0 1px 4px rgba(0, 0, 0, .9); }
.mand:hover, .mand:focus-visible { filter: brightness(1.12) drop-shadow(0 0 18px rgba(var(--c), .8)); }
.mand--1 { --a: -30deg; --i: 0; }
.mand--2 { --a: 30deg; --i: 1; }
.mand--3 { --a: 90deg; --i: 2; }
.mand--4 { --a: 150deg; --i: 3; }
.mand--5 { --a: 210deg; --i: 4; }
.mand--6 { --a: 270deg; --i: 5; }
@media (min-width: 980px) {
  .intro { padding: 120px 0 100px; }
  .intro__in { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .mand__lbl { font-size: 13px; }
  .mand .ic { width: 30px; height: 30px; }
}

/* ---------- capítulos ---------- */
.chapter { position: relative; isolation: isolate; overflow: clip; padding: 64px 0; }
.chapter__scene { position: absolute; inset: 0; z-index: -2; }
.chapter__scene img { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: saturate(1.05) blur(1px); }
.chapter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 45% at 50% 62%, rgba(var(--c), .2), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(11, 8, 6, .55) 18%, rgba(11, 8, 6, .72) 60%, var(--bg) 100%); }
.chapter__in { display: grid; gap: 0; }
.chapter__copy { display: contents; }
.chapter__copy > * { order: 1; }
.chapter__copy > :is(.altars, .ticks, .books, .soon, .fine, .aibox, .interest) { order: 3; }
.chapter__stage { order: 2; }
.chapter .eyebrow { color: var(--l); }
.chapter .lead { margin-bottom: 8px; }

.stage-3 { position: relative; display: grid; place-items: center; margin: 26px 0 34px; min-height: 440px; }
.stage-3 .phone--front { --w: min(54vw, 236px); position: relative; z-index: 3; }
.stage-3 .phone--back { --w: min(40vw, 176px); position: absolute; top: 50%; z-index: 1; filter: brightness(.62) saturate(.9); transition: filter .5s; }
.stage-3 .phone--left { left: 50%; transform: translate(-118%, -46%) rotate(-8deg); }
.stage-3 .phone--right { left: 50%; transform: translate(18%, -46%) rotate(8deg); }
.stage-3:hover .phone--back { filter: brightness(.8); }

/* altares */
.altars { list-style: none; display: grid; gap: 10px; margin: 18px 0 6px; counter-reset: alt; }
.altar { display: flex; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(14, 9, 5, .72); }
.altar img { width: 58px; height: 72px; flex: none; object-fit: cover; object-position: 50% 40%; border-radius: 12px / 14px; box-shadow: 0 0 16px -4px rgba(var(--c), .9); }
.altar b { display: block; font: 700 14px/1.25 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--gold3); margin-bottom: 2px; }
.altar span { font-size: 18px; line-height: 1.35; color: var(--ink2); }
.soon { display: grid; gap: 8px; justify-items: start; margin-top: 18px; padding: 14px 16px; border: 1px dashed rgba(255, 217, 142, .35); border-radius: 16px; background: rgba(30, 18, 6, .5); }
.soon p { margin: 0; font-size: 18px; color: var(--ink2); }
.soon b { color: var(--gold3); }

.ticks { list-style: none; display: grid; gap: 12px; margin: 18px 0 4px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; line-height: 1.4; color: var(--ink2); }
.ticks .ic { width: 34px; height: 34px; padding: 7px; flex: none; border-radius: 50%; color: #fff; background: radial-gradient(circle at 40% 30%, var(--m), var(--mm) 60%, var(--d)); box-shadow: 0 0 14px rgba(var(--c), .6); }
.ticks b { color: var(--ink); font-weight: 700; }
.ticks--compact li { align-items: center; }

.aibox { margin-top: 22px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 120, 140, .4); background: linear-gradient(180deg, rgba(60, 4, 16, .55), rgba(20, 6, 8, .7)); }
.aibox__t { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font: 700 13px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: #ffd3dc; }
.aibox p:last-child { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink2); }

.starburst { position: absolute; z-index: -1; right: -20%; top: 30%; width: 90vw; max-width: 760px; aspect-ratio: 1; background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .45; animation: spin 90s linear infinite; pointer-events: none; }

/* interés por función */
.interest { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 22px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(var(--c), .6); background: rgba(var(--c), .08); color: var(--l); font: 700 12.5px var(--disp); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s, box-shadow .25s, color .2s; }
.interest:hover { background: rgba(var(--c), .16); }
.interest[aria-pressed="true"] { color: #fff; background: radial-gradient(circle at 40% 30%, var(--m), var(--mm) 70%); border-color: var(--l); box-shadow: 0 0 22px rgba(var(--c), .6); }
.interest[aria-pressed="true"] .ic { fill: currentColor; }
.interest-hint { margin-top: 26px; text-align: center; font-style: italic; color: var(--ink3); }

@media (min-width: 700px) {
  .stage-3 { min-height: 560px; }
  .stage-3 .phone--front { --w: 270px; }
  .stage-3 .phone--back { --w: 210px; }
  .altars { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .chapter { padding: 130px 0; }
  .chapter__in { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .chapter__copy { display: block; }
  .chapter__in--flip .chapter__stage { order: -1; }
  .chapter__stage { margin: 0; }
  .chapter__scene img { opacity: .3; }
  .stage-3 { min-height: 640px; }
  .stage-3 .phone--front { --w: 300px; }
  .stage-3 .phone--back { --w: 230px; }
  .altars { grid-template-columns: 1fr; }
  .starburst { right: -8%; top: 10%; width: 60vw; }
}
@media (min-width: 1180px) { .altars { grid-template-columns: 1fr 1fr; } }

/* ---------- RELATOS ---------- */
.stories { position: relative; isolation: isolate; overflow: clip; padding: 90px 0 84px; background: radial-gradient(ellipse 90% 60% at 70% 20%, #1c0f22 0%, #0d0710 45%, var(--bg) 85%); }
.stories__sky { position: absolute; inset: 0 0 auto; height: 760px; z-index: -1; pointer-events: none; }
.stories__rays { position: absolute; left: 50%; top: 40px; width: 720px; height: 720px; transform: translateX(-50%); background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .55; animation: starPulse 9s ease-in-out infinite; }
.stories__fig { position: absolute; left: 50%; top: 0; width: min(88vw, 460px); height: auto; transform: translateX(-50%); opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }
.stories__head { position: relative; padding-top: 300px; max-width: 760px; }
.stories .eyebrow { color: #f3ddff; }
.shelf { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 14px; margin: 34px calc(var(--gut) * -1) 0; padding: 4px var(--gut) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.cover { position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; box-shadow: 0 0 0 1px rgba(var(--c), .5), 0 0 26px -6px rgba(var(--c), .7), 0 20px 40px -20px #000; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s var(--ease); }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .88)); }
.cover:hover img { transform: scale(1.05); }
.cover__t, .cover__n { position: relative; z-index: 1; }
.cover__t { font: 700 13.5px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000; }
.cover__n { font-size: 15px; color: var(--ink2); margin-top: 3px; }
.stories__row { display: grid; gap: 34px; margin-top: 30px; }
.stories__phones { position: relative; display: flex; justify-content: center; gap: 14px; }
.phone--md { --w: min(44vw, 230px); }
.phone--drop { margin-top: 46px; }
.stories__side .fine { display: block; }
.stories__side .chip { margin-right: 6px; vertical-align: 2px; }
@media (min-width: 700px) { .shelf { grid-auto-columns: 30%; } }
@media (min-width: 980px) {
  .stories { padding: 140px 0 120px; }
  .stories__sky { height: 100%; }
  .stories__fig { left: auto; right: 2%; top: 30px; transform: none; width: 520px; opacity: .62; }
  .stories__rays { left: auto; right: -80px; transform: none; top: 0; width: 900px; height: 900px; }
  .stories__head { padding-top: 0; }
  .shelf { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; margin: 50px 0 0; padding: 0; }
  .stories__row { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 60px; }
  .phone--md { --w: 250px; }

}

/* ---------- TRÍO ---------- */
.trio { padding: 64px 0; background: linear-gradient(180deg, var(--bg), #0e0907 50%, var(--bg)); }
.trio__grid { display: grid; gap: 22px; margin-top: 30px; }
.card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 24px; border-radius: 28px; border: 1px solid rgba(var(--c), .35); background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--c), .2), transparent 70%), linear-gradient(180deg, #120c08, #0b0806); overflow: clip; }
.card__stage { display: flex; justify-content: center; margin: 4px 0 24px; }
.phone--card { --w: min(56vw, 230px); }
.card p { font-size: 18.5px; line-height: 1.45; color: var(--ink2); }
.card .interest { margin-top: auto; }
@media (min-width: 700px) { .trio__grid { grid-template-columns: repeat(3, 1fr); } .phone--card { --w: min(26vw, 220px); } }
@media (min-width: 980px) { .trio { padding: 120px 0; } }

/* ---------- RECORRIDO ---------- */
.tour { padding: 84px 0 70px; background: radial-gradient(ellipse 70% 50% at 50% 60%, #1a1009, var(--bg) 75%); overflow: clip; }
.tour__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.tour__arrows { display: none; gap: 10px; }
.tour__filters { display: flex; gap: 8px; margin: 22px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; overflow-x: auto; scrollbar-width: none; }
.tour__filters::-webkit-scrollbar { display: none; }
.pill { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(14, 9, 5, .7); color: var(--ink2); font: 700 12px var(--disp); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pill.is-on { background: linear-gradient(180deg, #fff1cf, #ffd27f 50%, #e3a443); color: #1c1004; border-color: transparent; }
.tour__track { display: flex; gap: 18px; margin-top: 26px; padding: 10px var(--gut) 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: thin; scrollbar-color: rgba(255, 217, 142, .4) transparent; }
.tour__track:focus-visible { outline-offset: -4px; }
.tour__item { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 52vw; max-width: 236px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: center; }
.tour__item.is-hidden { display: none; }
.phone--tour { --w: 100%; transition: transform .4s var(--ease), box-shadow .4s; }
.tour__item:hover .phone--tour, .tour__item:focus-visible .phone--tour { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 217, 142, .55), 0 40px 70px -25px #000, 0 0 60px -10px rgba(var(--glow), .55); }
.tour__item:focus-visible { outline: none; }
.tour__cap { font-size: 17px; line-height: 1.3; color: var(--ink2); max-width: 15em; }
.tour__demo { font-size: 16px; color: var(--ink3); font-style: italic; margin: 0; }
.tour__count { font-style: normal; margin-left: 6px; }
@media (min-width: 700px) { .tour__item { width: 28vw; } .tour__arrows { display: flex; } }
@media (min-width: 980px) { .tour { padding: 120px 0 90px; } .tour__track { padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); scroll-padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); } .tour__filters { margin-left: 0; padding-left: 0; } }

/* lightbox */
.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(4, 3, 2, .94); color: var(--ink); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.phone--lb { --w: min(80vw, calc(80vh * .43)); }
.lightbox__fig figcaption { font-size: 19px; color: var(--ink2); text-align: center; padding: 0 20px; }
.lightbox__close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }

/* ---------- PARTICIPA ---------- */
.part { position: relative; isolation: isolate; overflow: clip; padding: 90px 0; background: linear-gradient(180deg, var(--bg), #120b05 40%, #0d0806); }
.part__glow { position: absolute; z-index: -1; left: 50%; top: 0; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 190, 90, .16), transparent 70%); pointer-events: none; }
.part__head { max-width: 860px; }
.part__info { display: grid; gap: 18px; margin-top: 30px; }
.funds, .next { padding: 22px 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(16, 10, 5, .72); }
.funds ul { list-style: none; display: grid; gap: 14px; }
.funds li { display: flex; gap: 14px; align-items: flex-start; }
.funds .ic { width: 38px; height: 38px; padding: 8px; flex: none; border-radius: 12px; color: var(--gold2); background: rgba(255, 217, 142, .1); border: 1px solid var(--line); }
.funds b { display: block; font: 700 14px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--gold3); }
.funds span { font-size: 18px; line-height: 1.4; color: var(--ink2); }
.next ol { list-style: none; counter-reset: n; display: grid; gap: 10px; }
.next li { counter-increment: n; display: flex; gap: 12px; align-items: baseline; font-size: 19px; color: var(--ink2); }
.next li::before { content: counter(n); flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); font: 700 13px var(--disp); color: var(--gold); transform: translateY(-2px); }
.next .fine { margin-top: 14px; font-style: italic; }
.options { display: grid; gap: 20px; margin-top: 34px; }
.opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 24px; border-radius: 28px; border: 1.5px solid; overflow: clip; }
.opt p { color: var(--ink2); font-size: 19px; line-height: 1.45; }
.opt .btn { margin-top: 10px; }
.opt__k { font: 700 11.5px var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.opt__fine { margin: 12px 0 0; font-size: 16.5px !important; color: var(--ink3) !important; }
.opt__fine--strong { font-size: 18px !important; color: var(--ink2) !important; margin: 0 0 6px; }
.opt--support { border-color: rgba(255, 217, 142, .6); background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255, 190, 90, .22), transparent 70%), linear-gradient(180deg, #1a1007, #0d0805); box-shadow: 0 0 50px -20px rgba(var(--glow), .7); }
.support-live [data-when="support-pending"], .support-pending [data-when="support-live"] { display: none !important; }
.honest { display: flex; gap: 12px; align-items: flex-start; margin: 24px auto 0; max-width: 46em; font-size: 17px; line-height: 1.45; color: var(--ink3); }
.honest .ic { margin-top: 3px; color: var(--gold); }

/* formulario */
.signup { display: grid; gap: 20px; margin-top: 50px; padding: 28px 20px; border-radius: 30px; border: 1px solid var(--line2); background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 190, 90, .12), transparent 70%), rgba(14, 9, 5, .85); box-shadow: 0 30px 80px -40px #000; scroll-margin-top: calc(var(--hdr) + 16px); }
.signup__copy p:last-child { color: var(--ink2); margin: 0; }
.form { display: grid; gap: 16px; }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.seg legend { padding: 0; margin-bottom: 8px; font: 700 12.5px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.seg__opt { position: relative; display: flex; }
.seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__opt span { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(8, 5, 3, .6); font-size: 19px; color: var(--ink2); cursor: pointer; transition: border-color .2s, background .2s; }
.seg__opt span::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line2); }
.seg__opt input:checked + span { border-color: var(--gold2); background: rgba(60, 38, 12, .55); color: var(--ink); }
.seg__opt input:checked + span::before { background: radial-gradient(circle, var(--gold3) 0 40%, transparent 45%); border-color: var(--gold2); box-shadow: 0 0 10px rgba(var(--glow), .6); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.field { display: grid; gap: 8px; }
.field label { font: 700 12.5px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.field input { width: 100%; min-height: 56px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--line2); background: #080503; color: var(--ink); font: 500 20px var(--body); }
.field input::placeholder { color: rgba(255, 244, 220, .4); }
.field input:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(255, 217, 142, .2); }
.field input[aria-invalid="true"] { border-color: #ff8a9c; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--ink2); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #e3a443; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { min-height: 1.4em; margin: 0; font-size: 18px; line-height: 1.4; }
.form__msg.is-ok { color: #a8f5c8; }
.form__msg.is-err { color: #ffb4be; }
.form__small { margin: 0; font-size: 16px; color: var(--ink3); }
.form.is-done .seg, .form.is-done .field, .form.is-done .check, .form.is-done [data-submit] { display: none; }
.form.is-done .form__msg { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(48, 232, 144, .45); background: rgba(3, 58, 32, .4); }
@media (min-width: 700px) { .part__info { grid-template-columns: 1fr 1fr; } .options { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) {
  .part { padding: 140px 0; }
  .signup { grid-template-columns: .9fr 1.1fr; gap: 50px; padding: 44px; align-items: start; }
  .opt { padding: 34px 32px 30px; }
}

/* ---------- FAQ ---------- */
.faq { padding: 84px 0; }
.faq__list { margin-top: 24px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 2px; list-style: none; cursor: pointer; font: 600 21px/1.3 var(--body); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line2); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa summary:hover { color: var(--gold3); }
.qa__a p { padding: 0 2px 20px; font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 40em; }
@media (min-width: 980px) { .faq { padding: 120px 0; } }

/* ---------- CIERRE ---------- */
.finale { position: relative; isolation: isolate; overflow: clip; padding: 110px 0; text-align: center; }
.finale__bg { position: absolute; inset: 0; z-index: -1; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.finale__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(11, 8, 6, .2), rgba(11, 8, 6, .85) 75%), linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.finale__star { position: absolute; left: 50%; top: 18%; width: 520px; height: 520px; transform: translateX(-50%); background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .5; animation: starPulse 8s ease-in-out infinite; }
.finale__in { display: flex; flex-direction: column; align-items: center; }
.finale__mark { width: 56px; height: 68px; margin-bottom: 22px; filter: drop-shadow(0 0 16px rgba(var(--glow), .8)); }
.finale .lead { margin: 0 auto; }
.finale__ctas { display: grid; gap: 12px; width: 100%; max-width: 420px; margin-top: 30px; }
@media (min-width: 560px) { .finale__ctas { display: flex; justify-content: center; max-width: none; } }
@media (min-width: 980px) { .finale { padding: 160px 0; } }

/* ---------- pie ---------- */
.ftr { border-top: 1px solid var(--line); background: #070504; padding: 56px 0 calc(30px + env(safe-area-inset-bottom, 0)); }
.ftr__in { display: grid; gap: 34px; }
.ftr__brand p { margin-top: 14px; font-size: 18px; color: var(--ink3); max-width: 24em; }
.ftr__h { font: 700 12.5px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.ftr ul { list-style: none; display: grid; gap: 4px; }
.ftr li a, .ftr__col p a { display: inline-block; padding: 6px 0; color: var(--ink2); text-decoration: none; font-size: 18px; }
.ftr li a:hover { color: var(--gold3); text-decoration: underline; }
.ftr__col p { font-size: 18px; color: var(--ink2); margin: 0; }
.social { display: flex !important; gap: 14px; margin-top: 12px; }
.ftr__fine { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 217, 142, .12); }
.ftr__fine p { font-size: 15.5px; line-height: 1.45; color: var(--ink3); margin-bottom: 8px; }
@media (min-width: 760px) { .ftr__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- CTA flotante móvil ---------- */
.sticky-cta { position: fixed; z-index: 40; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0)); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: linear-gradient(180deg, #fff1cf, #ffd27f 48%, #e3a443); color: #1c1004; font: 700 13.5px var(--disp); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 12px 34px -8px rgba(0, 0, 0, .9), 0 0 24px rgba(var(--glow), .5); transform: translateY(160%); transition: transform .45s var(--ease); }
.sticky-cta.is-on { transform: none; }
.sticky-cta:hover { color: #1c1004; }
@media (min-width: 980px) { .sticky-cta { display: none; } }

/* ---------- páginas sueltas ---------- */
.legal { padding: calc(var(--hdr) + 50px) 0 80px; }
.legal__body h1 { margin-bottom: 18px; }
.legal__body h2 { margin: 34px 0 12px; }
.legal__body p, .legal__body li { font-size: 19px; line-height: 1.55; color: var(--ink2); }
.legal__body ul { padding-left: 1.2em; display: grid; gap: 6px; margin-bottom: 1em; }
.legal__updated { margin-top: 40px; color: var(--ink3); font-size: 16px; }
.pending { display: inline-block; padding: 0 8px; border-radius: 6px; border: 1px dashed rgba(255, 140, 150, .7); background: rgba(120, 10, 30, .3); color: #ffc2ca; font-size: .9em; }
.solo { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 40px) 0 60px; text-align: center; overflow: clip; }
.solo__bg { position: absolute; inset: 0; z-index: -1; }
.solo__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.solo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(11, 8, 6, .3), var(--bg) 80%); }
.solo__in { display: flex; flex-direction: column; align-items: center; }
.solo .lead { margin: 0 auto 14px; }

/* ---------- aparición al hacer scroll ---------- */
.reveal { transition: opacity 1s var(--ease), translate 1s var(--ease); }
.reveal.is-pending { opacity: 0; translate: 0 22px; }
.hero .reveal { animation: rise 1.1s var(--ease) both; }
.hero .reveal:nth-child(2) { animation-delay: .12s; }
.hero .reveal:nth-child(3) { animation-delay: .24s; }
.hero .reveal:nth-child(4) { animation-delay: .36s; }
.hero .reveal:nth-child(5) { animation-delay: .48s; }
.hero__stage.reveal { animation-delay: .3s; }

/* ---------- animaciones ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14) saturate(1.1); } }
@keyframes starPulse { 0%, 100% { opacity: .55; scale: .96; rotate: 0deg; } 50% { opacity: .95; scale: 1.04; rotate: 8deg; } }
@keyframes doorGlow { from { opacity: .45; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes doorBreath { from { transform: scale(1.04); } to { transform: scale(1.1); } }
@keyframes raysDrift { from { transform: translateX(-4%); opacity: .7; } to { transform: translateX(4%); opacity: 1; } }
@keyframes mote { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .6; } 100% { transform: translateY(-85vh) translateX(30px); opacity: 0; } }
@keyframes drip { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal.is-pending { opacity: 1; translate: none; }
  .motes { display: none; }
  .hero__crack { opacity: .8; }
}

/* =====================================================================
   v2 · pantallas vivas, altares, velas, leer, juego, hitos y precio
   ===================================================================== */

/* Pantalla real de la app animada dentro del móvil (iframe 390×844 escalado) */
.phone__live { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; transform: scale(var(--k, 1)); pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); background: #000; }
.phone__live.is-on { opacity: 1; }
.phone__live.is-off { visibility: hidden; }

/* Pétalos táctiles sobre la pantalla de inicio real */
.hot { position: absolute; z-index: 2; width: 28%; height: 13%; transform: translate(-50%, -50%); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.hot:hover { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); }
.hot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hot--1 { left: 34.1%; top: 32.5%; }
.hot--2 { left: 65.9%; top: 32.5%; }
.hot--3 { left: 81.8%; top: 45.3%; }
.hot--4 { left: 65.9%; top: 58%; }
.hot--5 { left: 34.1%; top: 58%; }
.hot--6 { left: 18.2%; top: 45.3%; }

/* Un minuto con Dios: iglesia real */
.church { display: flex; flex-direction: column; align-items: center; }
.church__stage { position: relative; display: flex; justify-content: center; padding: 6px 0 10px; }
.phone--church { --w: min(78vw, 360px); }
.halo--church { inset: -4% -22%; background: radial-gradient(closest-side, rgba(255, 190, 110, .42), rgba(180, 90, 255, .16) 58%, transparent 78%); }

/* Hablar con Jesús: llamada y chat */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin: 26px 0 34px; }
.duo .halo { inset: 0 -12%; }
.duo__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.duo__item--b { margin-top: 46px; }
.phone--duo { --w: 100%; max-width: 270px; }
.duo__cap { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 13px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--l); }
.duo__note { grid-column: 1 / -1; text-align: center; margin: 2px 0 0; font-style: italic; font-size: 16.5px; color: var(--ink3); }

/* Galería de altares */
.gal__title { margin: 46px 0 18px; }
.altargal { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 64vw; gap: 16px; margin: 0 calc(var(--gut) * -1); padding: 6px var(--gut) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
.altargal::-webkit-scrollbar { display: none; }
.ag { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; border-radius: 26px; border: 1px solid rgba(var(--c), .42); background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--c), .22), transparent 70%), rgba(14, 9, 5, .82); }
.phone--ag { --w: 100%; margin-bottom: 6px; }
.ag__t { margin: 6px 0 0; font: 700 14px/1.25 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--l); }
.ag p { margin: 0; font-size: 17.5px; line-height: 1.42; color: var(--ink2); }

/* Tipos de velas */
.candles { display: grid; gap: 26px; margin-top: 30px; padding: 24px 20px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(ellipse 70% 60% at 85% 50%, rgba(255, 170, 40, .14), transparent 70%), rgba(16, 10, 5, .78); }
.candles__copy > p { color: var(--ink2); }
.cchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.cchips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--c), .5); background: rgba(var(--c), .1); font-size: 17px; color: var(--ink); }
.cchips li::before { content: ""; width: 8px; height: 12px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--l), var(--m) 45%, var(--mm)); box-shadow: 0 0 8px rgba(var(--c), .9); }
.candles__phone { display: flex; justify-content: center; }

/* Leer: libros */
.books { list-style: none; display: grid; gap: 10px; margin: 18px 0 4px; }
.books li { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(var(--c), .35); background: rgba(10, 7, 5, .72); }
.books .ic { width: 34px; height: 42px; padding: 9px; border-radius: 50% / 50%; color: #fff; background: radial-gradient(ellipse at 40% 30%, var(--l), var(--m) 40%, var(--mm) 75%, var(--d)); box-shadow: 0 0 14px rgba(var(--c), .55); }
.books b { display: block; font: 700 14px/1.25 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.books span { font-size: 17.5px; line-height: 1.35; color: var(--ink2); }

/* Aprender: juego (diseño conceptual) */
.learn { display: grid; gap: 26px; margin-top: 64px; padding: 26px 20px; border-radius: 30px; border: 1px solid rgba(var(--c), .45); background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(var(--c), .18), transparent 70%), linear-gradient(160deg, rgba(1, 40, 38, .62), rgba(8, 10, 10, .72)); scroll-margin-top: calc(var(--hdr) + 16px); }
.learn__phone { display: flex; justify-content: center; }
.phone--game { --w: min(64vw, 280px); }
.learn__chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.learn .eyebrow { color: var(--l); }
.learn .lead { font-size: 19.5px; }

/* Mi camino y calendario */
.card__body { display: flex; flex-direction: column; flex: 1; }
.miles__t { margin: 6px 0 10px; font: 700 12.5px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--l); }
.miles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }



@media (min-width: 700px) {
  .altargal { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
  .trio__grid--2 { grid-template-columns: 1.3fr 1fr; }
  .card--wide { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
  .card--wide .card__stage { margin: 0; }
}
@media (min-width: 980px) {
  .duo { margin: 0; gap: 22px; }
  .phone--duo { max-width: 280px; }
  .altargal { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .candles { grid-template-columns: 1.5fr .5fr; align-items: center; padding: 36px 44px; }
  .learn { grid-template-columns: auto 1fr; gap: 56px; padding: 44px 56px; align-items: center; }
  .phone--church { --w: 360px; }
}

/* =====================================================================
   v3 · correcciones de revisión
   ===================================================================== */

/* Móviles: la interfaz llena la pantalla (marco fino, sin franja negra) */
.phone { padding: 1.5%; border-radius: 13.5% / 6.3%; background: linear-gradient(150deg, #6b5944 0%, #2a2119 16%, #100c09 50%, #3d3226 100%); box-shadow: 0 0 0 1px rgba(255, 217, 142, .4), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -25px rgba(0, 0, 0, .95), 0 0 70px -12px rgba(var(--c), .5); }
.phone__body { border-radius: 12.6% / 5.9%; }

/* Iconos en forma de gema (lenguaje de la app) */
.gemi { position: relative; flex: none; width: 34px; height: 44px; display: grid; place-items: center; filter: drop-shadow(0 0 7px rgba(var(--c), .75)); }
.gemi::before, .gemi::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; }
.gemi::before { background: radial-gradient(ellipse 70% 55% at 40% 24%, #fff 0%, var(--l) 16%, var(--m) 44%, var(--mm) 76%, var(--d) 125%); }
.gemi::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 64%) 0 0 / 300% 100% no-repeat; animation: gemShine 6s ease-in-out infinite; }
.ticks li:nth-child(2) .gemi::after { animation-delay: 1.2s; }
.ticks li:nth-child(3) .gemi::after { animation-delay: 2.4s; }
.ticks li:nth-child(4) .gemi::after { animation-delay: 3.6s; }
.ticks li:nth-child(5) .gemi::after { animation-delay: 4.8s; }
.ticks .gemi .ic { position: relative; z-index: 1; width: 18px; height: 18px; padding: 0; color: #fff; background: none; box-shadow: none; border-radius: 0; stroke-width: 2; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
@keyframes gemShine { 0%, 70% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* Velas: maqueta central más grande */
.stage-3--big { min-height: 520px; }
.stage-3--big .phone--front { --w: min(66vw, 280px); }
@media (min-width: 700px) { .stage-3--big { min-height: 640px; } .stage-3--big .phone--front { --w: 320px; } }
@media (min-width: 980px) { .stage-3--big { min-height: 720px; } .stage-3--big .phone--front { --w: 340px; } }

/* Títulos de los altares */
.ag__t { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; font: 700 17px/1.2 var(--disp); letter-spacing: .07em; text-transform: uppercase; background: linear-gradient(180deg, #fff6dc 0%, var(--l) 45%, var(--m) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ag__gem { flex: none; width: 15px; height: 21px; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; background: radial-gradient(ellipse 70% 55% at 40% 26%, #fff, var(--l) 18%, var(--m) 50%, var(--mm)); animation: gemPulse 3.2s ease-in-out infinite; }
.ag:nth-child(2) .ag__gem { animation-delay: .8s; }
.ag:nth-child(3) .ag__gem { animation-delay: 1.6s; }
.ag:nth-child(4) .ag__gem { animation-delay: 2.4s; }
@keyframes gemPulse { 0%, 100% { opacity: .75; scale: .92; } 50% { opacity: 1; scale: 1.08; } }

/* Muchas velas: cirio protagonista */
.candles { gap: 10px; }
.candles__copy .lead { margin-bottom: 0; }
.candles__art { position: relative; display: flex; justify-content: center; margin: 0; padding: 10px 0 0; }
.candles__art::before { content: ""; position: absolute; left: 50%; top: -6%; width: min(130%, 520px); aspect-ratio: 1; translate: -50% 0; background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .7; animation: spin 90s linear infinite; pointer-events: none; }
.cirio { position: relative; width: min(64vw, 300px); height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.cirio__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flameFlick 2.8s ease-in-out infinite; }
.cirio__glow { transform-box: fill-box; transform-origin: 50% 50%; animation: flameGlow 3.4s ease-in-out infinite alternate; }
.cirio__gem { animation: gemPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flameFlick { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 25% { transform: scale(.97, 1.05) skewX(-2deg); } 55% { transform: scale(1.03, .97) skewX(1.5deg); } 80% { transform: scale(.99, 1.03) skewX(-1deg); } }
@keyframes flameGlow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@media (min-width: 980px) { .candles { grid-template-columns: 1.2fr .8fr; } .cirio { width: 300px; } }

/* Juego: texto antes que la maqueta */
@media (min-width: 980px) { .learn { grid-template-columns: 1fr auto; } }

/* Mi camino: hitos como medallas */
.miles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; margin: 4px 0 0; }
.mile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; text-align: center; border-radius: 20px; border: 1px solid rgba(var(--c), .35); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--c), .22), transparent 75%), rgba(10, 6, 4, .6); }
.mile__gem { position: relative; width: 38px; height: 50px; display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(var(--c), .7)); }
.mile__gem::before { content: ""; position: absolute; inset: 0; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; background: radial-gradient(ellipse 70% 55% at 40% 24%, #fff, var(--l) 16%, var(--m) 46%, var(--mm) 78%, var(--d) 125%); }
.mile__gem .ic { position: relative; width: 20px; height: 20px; color: #fff; stroke-width: 2; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
.mile b { font: 700 21px/1 var(--disp); color: var(--ink); }
.mile b small { display: block; margin-top: 2px; font: 700 10px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--l); }
.mile > span { font-size: 15.5px; line-height: 1.25; color: var(--ink2); }
.card__action { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--c), .25); }
.card__action .interest { margin-top: 0; color: #1c1004; border-color: transparent; background: linear-gradient(180deg, #fff1cf, #ffd27f 48%, #e3a443); box-shadow: 0 8px 22px -10px rgba(var(--glow), .9); }
.card__action .interest[aria-pressed="true"] { color: #fff; background: radial-gradient(circle at 40% 30%, var(--m), var(--mm) 70%); }

/* Participa: una sola fila con el destino del apoyo */
.funds--row { margin-top: 30px; }
@media (min-width: 980px) { .funds--row ul { grid-template-columns: repeat(4, 1fr); } }

/* Bloque de aportaciones */
.support { margin-top: 56px; scroll-margin-top: calc(var(--hdr) + 16px); }
.support__head { max-width: 760px; }
.paysafe { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 16.5px; color: var(--ink3); text-align: center; }
.paysafe .ic { color: var(--gold); }
.signup { margin-top: 60px; }

/* Carruseles con movimiento automático y arrastre */
[data-carousel].is-auto, [data-carousel].is-drag { scroll-snap-type: none !important; scroll-behavior: auto !important; }
@media (pointer: fine) { [data-carousel] { cursor: grab; } [data-carousel].is-drag { cursor: grabbing; user-select: none; } }
[data-carousel].is-drag * { pointer-events: none; }

/* Página de pago */
.checkout { position: relative; isolation: isolate; min-height: 100vh; padding: calc(var(--hdr) + 26px) 0 70px; overflow: clip; }
.checkout__bg { position: absolute; inset: 0; z-index: -1; }
.checkout__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.checkout__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(11, 8, 6, .4), var(--bg) 75%); }
.checkout__star { position: absolute; left: 50%; top: 4%; width: 560px; height: 560px; translate: -50% 0; background: url(/img/scenes/rayos.jpg) center / contain no-repeat; mix-blend-mode: screen; opacity: .35; animation: starPulse 9s ease-in-out infinite; }
.checkout__in { max-width: 560px; }
.co__back { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.co__card { position: relative; padding: 30px 22px 24px; border-radius: 30px; border: 1px solid var(--line2); background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 190, 90, .16), transparent 70%), rgba(14, 9, 5, .9); box-shadow: 0 40px 90px -40px #000; }
.co__badge { position: relative; width: 52px; height: 66px; display: grid; place-items: center; margin: -6px 0 12px; filter: drop-shadow(0 0 12px rgba(var(--c), .8)); }
.co__badge::before { content: ""; position: absolute; inset: 0; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; background: radial-gradient(ellipse 70% 55% at 40% 24%, #fff, var(--l) 16%, var(--m) 46%, var(--mm) 78%, var(--d) 125%); }
.co__badge .ic { position: relative; width: 24px; height: 24px; color: #fff; stroke-width: 2; }
.co__card .lead { font-size: 19px; }
.btn--lg { min-height: 60px; font-size: 15px; }
.co__foot { margin-top: 18px; text-align: center; }
.co__secure { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 16.5px; color: var(--ink2); margin-bottom: 10px; }
.co__secure .ic { color: var(--gold); }
.co__after, .co__terms { font-size: 15.5px; color: var(--ink3); margin-bottom: 6px; }

/* Tablas legales */
.legal__table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 16.5px; }
.legal__table th, .legal__table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink2); }
.legal__table th { font: 700 11.5px var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .gemi::after, .ag__gem, .cirio__flame, .cirio__glow, .cirio__gem, .candles__art::before { animation: none !important; } }
.btn.is-disabled { opacity: .55; }
[data-carousel] { scroll-snap-type: none !important; }
.stories__rays, .starburst, .ring__star, .finale__star, .checkout__star, .candles__art::before, .hero__rays { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.pending { display: inline; padding: 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.6; }

/* =====================================================================
   v4 · segunda revisión
   ===================================================================== */

/* Relatos: los dos móviles ya no se estiran (la pantalla llena el marco) */
.stories__phones { align-items: flex-start; }

/* Hablar con Jesús: «Llamar» y «Escribir» siempre legibles, con animación ligera */
.chapter--jesus .starburst { top: -12%; right: -35%; opacity: .32; }
.duo__item { z-index: 1; }
.duo__cap { position: relative; z-index: 2; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid rgba(255, 217, 142, .45); background: rgba(9, 6, 4, .94); color: #fff4dc; box-shadow: 0 8px 22px -10px #000; }
.duo__ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 40% 30%, var(--l), var(--m) 45%, var(--mm)); }
.duo__cap--chat .duo__ico { --l: #d8e7ff; --m: #4f8dff; --mm: #2c63f0; }
.duo__ico .ic { width: 15px; height: 15px; stroke-width: 2; }
.duo__ico i { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--m); opacity: 0; animation: callRing 2s ease-out infinite; }
.duo__dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.duo__dots i { width: 4px; height: 4px; border-radius: 50%; background: #8fb6ff; animation: typing 1.2s ease-in-out infinite; }
.duo__dots i:nth-child(2) { animation-delay: .15s; }
.duo__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes callRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Efectos animados sobre capturas (solo CSS, sin cargar la app) */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fx i, .fx b { position: absolute; display: block; }
/* Llama de la vela de Don Ernesto */
.fx--d4 i { left: 47.5%; top: 32.9%; width: 5.5%; height: 7.5%; background: url(/img/app/d4-720.jpg) 50.26% 35.57% / 1818.18% 1333.33% no-repeat; transform-origin: 50% 100%; animation: flameFlick 2.6s ease-in-out infinite; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); }
.fx--d4 b { left: 50.25%; top: 36.5%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(255, 160, 60, .14) 55%, transparent 75%); mix-blend-mode: screen; animation: flameGlow 3s ease-in-out infinite alternate; }
/* Cuenta actual del rosario */
.fx--r04 i { left: 86%; top: 30.5%; width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid #fff2c4; box-shadow: 0 0 10px rgba(255, 220, 150, .9); animation: beadPulse 1.6s ease-out infinite; }
.fx--r04 b { left: 86%; top: 30.5%; width: 16%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 120, .6), transparent 75%); mix-blend-mode: screen; animation: flameGlow 1.6s ease-in-out infinite alternate; }
@keyframes beadPulse { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
/* Mi camino: la corona de la semana respira y «Hoy» late */
.fx--m01 b { left: 49.75%; top: 30.5%; width: 72%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 45, 88, .35), rgba(79, 141, 255, .35), rgba(48, 232, 144, .35), rgba(255, 178, 50, .35), rgba(179, 100, 255, .35), rgba(255, 45, 88, .35)); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%); mask: radial-gradient(closest-side, #000 30%, transparent 75%); mix-blend-mode: screen; opacity: .85; animation: spin 14s linear infinite; }
.fx--m01 i { left: 62.3%; top: 43.2%; width: 12%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid #fff2c4; animation: beadPulse 2s ease-out infinite; }
/* Calendario: luces de colores en el rosetón y pantalla más viva */
.card__stage--cal img { filter: brightness(1.16) saturate(1.32) contrast(1.06); }
.fx--c01 b { left: 50%; top: 15.5%; width: 54%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 45, 88, .55), rgba(255, 178, 50, .5), rgba(48, 232, 144, .5), rgba(48, 232, 220, .5), rgba(79, 141, 255, .55), rgba(179, 100, 255, .55), rgba(255, 79, 168, .5), rgba(255, 45, 88, .55)); -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); mix-blend-mode: overlay; animation: spin 12s linear infinite; }
.fx--c01 i { left: 50%; top: 15.5%; width: 64%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 190, .4), transparent 70%); mix-blend-mode: screen; animation: flameGlow 2.8s ease-in-out infinite alternate; }

/* Vela protagonista (imagen) con llama animada */
.candles--photo { align-items: center; }
.vela { position: relative; width: min(92vw, 460px); margin: 6px auto 0; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 217, 142, .4), 0 40px 80px -30px #000, 0 0 80px -20px rgba(79, 141, 255, .45); }
.vela img { display: block; width: 100%; height: auto; }
.vela__flame { position: absolute; left: 47%; top: 5.8%; width: 5.6%; height: 13.6%; background: url(/img/scenes/vela-altar-900.webp) 49.79% 6.71% / 1785.7% 735.3% no-repeat; transform-origin: 50% 100%; animation: flameFlick 2.4s ease-in-out infinite; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 62%, transparent 100%); }
.vela__glow { position: absolute; left: 49.7%; top: 13%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 160, .5), rgba(255, 170, 70, .16) 50%, transparent 75%); mix-blend-mode: screen; animation: flameGlow 3.2s ease-in-out infinite alternate; pointer-events: none; }
@media (min-width: 980px) { .candles--photo { grid-template-columns: 1.1fr .9fr; } .vela { width: 460px; } }

/* Aprender: bloque propio */
.learnsec { position: relative; padding: 56px 0; background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(1, 58, 56, .35), transparent 70%), var(--bg); }
.learnsec .learn { margin-top: 0; }
.learnsec .learn .eyebrow { color: var(--l); }

/* Tu camino: indicador de progreso inspirado en la barra de la iglesia */
.prog { margin: 16px 0 8px; padding: 16px 16px 14px; border-radius: 22px; border: 1px solid rgba(var(--c), .38); background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(var(--c), .2), transparent 70%), rgba(10, 6, 4, .7); }
.prog__t { margin: 0 0 12px; font: 700 12px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--l); }
.prog__week { display: flex; justify-content: space-between; gap: 4px; padding: 10px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 217, 142, .22); }
.wk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk i { width: 18px; height: 24px; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; background: radial-gradient(ellipse at 40% 30%, #4a3c2c, #1d150e 70%); }
.wk--on i { background: radial-gradient(ellipse 70% 55% at 40% 26%, #fff, var(--l) 18%, var(--m) 48%, var(--mm) 80%); filter: drop-shadow(0 0 6px rgba(var(--c), .9)); }
.wk--now i { width: 24px; height: 24px; -webkit-mask: none; mask: none; border-radius: 50%; background: radial-gradient(circle, #6a5434, #1d150e 70%); box-shadow: 0 0 0 2px #fff0c8, 0 0 14px rgba(255, 200, 110, .8); animation: nowPulse 2.2s ease-in-out infinite; }
.wk b { font: 700 11px var(--disp); color: var(--ink3); }
.wk--on b, .wk--now b { color: var(--ink); }
@keyframes nowPulse { 0%, 100% { box-shadow: 0 0 0 2px #fff0c8, 0 0 8px rgba(255, 200, 110, .5); } 50% { box-shadow: 0 0 0 2px #fff0c8, 0 0 20px rgba(255, 200, 110, 1); } }
.prog__streak { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 10px; }
.prog__streak b { font: 700 40px/1 var(--disp); background: linear-gradient(180deg, #fff3cf, #ffd27f 50%, #e3a443); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(255, 180, 80, .45)); }
.prog__streak span { font-size: 18px; color: var(--ink2); }
.prog__bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); overflow: hidden; }
.prog__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; border-radius: inherit; background: linear-gradient(90deg, #ff2d58, #b364ff 30%, #4f8dff 55%, #30e890 78%, #ffd27f); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--ease); }
.prog__spark { position: absolute; top: 50%; left: 36%; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, rgba(255, 230, 170, .8) 40%, transparent 70%); opacity: 0; transition: opacity .6s 1.6s; animation: flameGlow 1.4s ease-in-out infinite alternate; }
.prog.is-on .prog__fill { transform: scaleX(1); }
.prog.is-on .prog__spark { opacity: 1; }
.prog__ends { display: flex; justify-content: space-between; margin-top: 6px; font: 700 11px var(--disp); color: var(--ink3); }
.prog__next { margin: 8px 0 0; font-size: 16.5px; font-style: italic; color: var(--ink2); }
.mile { position: relative; }
.mile--done { border-color: var(--l); box-shadow: 0 0 22px -8px rgba(var(--c), .9); }
.mile--next { border-style: dashed; border-color: var(--l); }
.mile__tag { margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--c), .22); font: 700 9.5px var(--disp); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--l); }
.mile--next .mile__tag { animation: gemPulse 2.4s ease-in-out infinite; }
.card--wide .interest { margin-top: 22px; }

/* Páginas legales mínimas */
.legal__company { margin: 26px 0 0; font: 700 clamp(22px, 5vw, 30px)/1.2 var(--disp); letter-spacing: .12em; color: var(--gold3); }

/* Botón de música ambiental (apagado por defecto) */
.music { position: fixed; z-index: 45; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0)); width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.music::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 217, 142, .5); opacity: 0; animation: callRing 3.2s ease-out infinite; pointer-events: none; }
.music__rim { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ff2d58, #ffb232, #30e890, #30e8dc, #4f8dff, #b364ff, #ff4fa8, #ff2d58); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); opacity: .5; transition: opacity .4s; }
.music__core { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #3d2b16, #0d0806 72%); box-shadow: inset 0 0 0 1px rgba(255, 217, 142, .35), 0 10px 26px -8px #000, 0 0 22px rgba(255, 180, 80, .22); }
.music__note { width: 22px; height: 22px; color: var(--gold2); }
.music__eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.music__eq i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #fff3cf, #e3a443); transform-origin: 50% 100%; animation: eq .9s ease-in-out infinite alternate; }
.music__eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.music__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.music__eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.music[aria-pressed="true"] .music__rim { opacity: 1; animation: spin 5s linear infinite; }
.music[aria-pressed="true"] .music__note { display: none; }
.music[aria-pressed="true"] .music__eq { display: flex; }
.music[aria-pressed="true"]::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .fx, .vela__flame, .vela__glow, .duo__ico i, .duo__dots i, .music::after, .music__rim, .music__eq i, .wk--now i, .prog__spark { animation: none !important; }
  .prog__fill { transition: none; }
}

/* =====================================================================
   v6 · revisión de encuadres en móvil
   ===================================================================== */
/* La foto de la vela no puede ensanchar la tarjeta (antes se salía por la derecha) */
.candles--photo > * { min-width: 0; }
.vela { width: 100%; max-width: 460px; }
/* Móviles laterales enteros dentro de la pantalla */
@media (max-width: 699px) {
  .stage-3 .phone--back { --w: min(36vw, 176px); }
}
/* Los dos móviles de «Hablar con Jesús» con el mismo tamaño */
.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 400px) { .duo__cap { font-size: 12px; letter-spacing: .12em; padding-right: 12px; } }
/* «Me interesa» con el mismo formato en todas las secciones */
.card .interest { align-self: flex-start; }
/* Que los botones flotantes no tapen el final del pie */
@media (max-width: 979px) { .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); } }

/* =====================================================================
   v7 · llamas vivas, destellos en
   «Tu semana» y «Tus hitos», Llamar en verde
   ===================================================================== */
/* Llamas: estiramiento, vaivén y parpadeo combinados (propiedades independientes) */
@keyframes flLick { 0%, 100% { scale: 1 1; } 11% { scale: .93 1.13; } 23% { scale: 1.05 .9; } 36% { scale: .96 1.2; } 48% { scale: 1.03 .94; } 61% { scale: .94 1.12; } 74% { scale: 1.06 .88; } 87% { scale: .97 1.16; } }
@keyframes flSway { 0%, 100% { rotate: 0deg; } 18% { rotate: -6deg; } 41% { rotate: 4deg; } 63% { rotate: -3deg; } 82% { rotate: 6deg; } }
@keyframes flBright { 0%, 100% { opacity: 1; } 27% { opacity: .8; } 52% { opacity: 1; } 76% { opacity: .87; } }
@keyframes flGlow { 0%, 100% { opacity: .55; scale: .92; } 30% { opacity: 1; scale: 1.1; } 55% { opacity: .7; scale: .98; } 80% { opacity: .95; scale: 1.06; } }
.fx--d4 i, .fx--p4 i, .fx--f3 i, .vela__flame { transform-origin: 50% 100%; animation: flLick .95s ease-in-out infinite, flSway 2.3s ease-in-out infinite, flBright 1.3s ease-in-out infinite; }
.fx--d4 b, .fx--p4 b, .fx--f3 b, .vela__glow { animation: flGlow 1.7s ease-in-out infinite; }
/* Bajo la llama que se mueve, la llama original difuminada (halo): así nunca se ve doble */
.fx--d4::before, .fx--p4::before, .fx--f3::before, .vela__haze { content: ""; position: absolute; filter: blur(3px); -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); pointer-events: none; }
.fx--d4::before { left: 44.9%; top: 31.65%; width: 11%; height: 9.5%; background: url(/img/app/d4-720.jpg) 50.45% 34.97% / 909.09% 1052.63% no-repeat; }
.fx--p4 i { left: 48%; top: 47.6%; width: 6.4%; height: 7.5%; background: url(/img/app/p4-720.jpg) 51.28% 51.46% / 1562.5% 1333.33% no-repeat; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); }
.fx--p4::before { left: 45.25%; top: 46.3%; width: 12%; height: 10%; background: url(/img/app/p4-720.jpg) 51.42% 51.44% / 833.33% 1000% no-repeat; }
.fx--p4 b { left: 51.25%; top: 51.3%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .5), rgba(255, 160, 60, .12) 55%, transparent 75%); mix-blend-mode: screen; }
.fx--f3 i { left: 49%; top: 41%; width: 5.2%; height: 6.6%; background: url(/img/app/f3-720.jpg) 51.69% 43.9% / 1923.08% 1515.15% no-repeat; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 60%, transparent 100%); }
.fx--f3::before { left: 46.45%; top: 39.8%; width: 10.5%; height: 9%; background: url(/img/app/f3-720.jpg) 51.9% 43.74% / 952.38% 1111.11% no-repeat; }
.fx--f3 b { left: 51.7%; top: 44.3%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .5), rgba(255, 160, 60, .12) 55%, transparent 75%); mix-blend-mode: screen; }
.vela__haze { left: 44.3%; top: 4.1%; width: 11%; height: 17%; background: url(/img/scenes/vela-altar-900.webp) 49.78% 4.94% / 909.09% 588.24% no-repeat; filter: blur(4px); }
.vela__flame { z-index: 1; }


/* Destellos solemnes: estrella de cuatro puntas reutilizable */
.prog, .miles { --star: radial-gradient(circle, #fff 0 1.3px, rgba(255, 246, 220, .6) 2px, transparent 3px), linear-gradient(90deg, transparent, rgba(255, 248, 225, .95) 50%, transparent) center / 100% 1.3px no-repeat, linear-gradient(transparent, rgba(255, 248, 225, .95) 50%, transparent) center / 1.3px 100% no-repeat; }
@keyframes twinkle { 0%, 64%, 100% { opacity: 0; scale: .2; rotate: 0deg; } 75% { opacity: 1; scale: 1; rotate: 45deg; } 88% { opacity: 0; scale: .4; rotate: 90deg; } }
/* Tu semana: una luz recorre los días rezados y el día de hoy tiene un aro de luz que gira */
.wk { position: relative; isolation: isolate; }
.wk--on::before { z-index: -1; }
.wk--on::before, .wk--now::before { content: ""; position: absolute; left: 50%; top: 12px; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.wk--on::before { width: 36px; height: 36px; background: radial-gradient(closest-side, rgba(var(--c), .8), rgba(var(--c), .22) 55%, transparent); opacity: 0; animation: wkGlow 5s ease-in-out infinite; }
.wk--on::after { content: ""; position: absolute; left: calc(50% + 7px); top: 2px; width: 12px; height: 12px; translate: -50% -50%; background: var(--star); opacity: 0; animation: twinkle 5s ease-in-out infinite; pointer-events: none; }
.wk--on:nth-child(2)::before, .wk--on:nth-child(2)::after { animation-delay: .45s; }
.wk--on:nth-child(3)::before, .wk--on:nth-child(3)::after { animation-delay: .9s; }
@keyframes wkGlow { 0%, 62%, 100% { opacity: 0; scale: .6; } 72% { opacity: 1; scale: 1.15; } 86% { opacity: .15; scale: 1; } }
.wk--now::before { width: 34px; height: 34px; background: conic-gradient(from 0deg, transparent 0 58%, rgba(255, 240, 200, .95) 76%, transparent 92%); -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 79%, #000 93%, transparent 100%); mask: radial-gradient(closest-side, transparent 74%, #000 79%, #000 93%, transparent 100%); animation: spin 3.4s linear infinite; }
/* Racha: un brillo cruza el número */
.prog__streak b { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fff3cf, #ffd27f 50%, #e3a443); -webkit-background-clip: text; background-clip: text; animation: textGlint 6s ease-in-out infinite 1.5s; }
@keyframes textGlint { 0%, 55% { background-position: 160% 0, 0 0; } 85%, 100% { background-position: -60% 0, 0 0; } }
/* Barra: un reflejo de luz recorre la parte conseguida */
.prog__fill { overflow: hidden; }
.prog__fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: translateX(-110%); animation: barSheen 3.8s ease-in-out infinite 2.2s; }
@keyframes barSheen { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(310%); } }
/* Hitos: ola de luz que cruza las tarjetas, gemas que flotan y centellean */
.mile { overflow: hidden; isolation: isolate; }
.mile::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 246, 220, .1) 40%, rgba(255, 255, 255, .22) 50%, rgba(255, 246, 220, .1) 60%, transparent); transform: translateX(-140%) skewX(-12deg); animation: mileSheen 7s ease-in-out infinite; pointer-events: none; }
@keyframes mileSheen { 0%, 70% { transform: translateX(-140%) skewX(-12deg); } 92%, 100% { transform: translateX(330%) skewX(-12deg); } }
.mile__gem { animation: gemFloat 5s ease-in-out infinite; }
.mile__gem::after { content: ""; position: absolute; right: -6px; top: -3px; width: 14px; height: 14px; background: var(--star); opacity: 0; animation: twinkle 4.8s ease-in-out infinite; pointer-events: none; }
@keyframes gemFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.mile:nth-child(2)::after, .mile:nth-child(2) .mile__gem, .mile:nth-child(2) .mile__gem::after { animation-delay: .6s; }
.mile:nth-child(3)::after, .mile:nth-child(3) .mile__gem, .mile:nth-child(3) .mile__gem::after { animation-delay: 1.2s; }
.mile:nth-child(4)::after, .mile:nth-child(4) .mile__gem, .mile:nth-child(4) .mile__gem::after { animation-delay: 1.8s; }
.mile:nth-child(5)::after, .mile:nth-child(5) .mile__gem, .mile:nth-child(5) .mile__gem::after { animation-delay: 2.4s; }
/* Hito conseguido: una luz dorada recorre su borde */
@property --mile-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mile--done::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--mile-a), transparent 0 60%, rgba(255, 243, 207, 0) 64%, #fff3cf 76%, rgba(255, 243, 207, 0) 88%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mileOrbit 6s linear infinite; pointer-events: none; }
@keyframes mileOrbit { to { --mile-a: 360deg; } }
/* Próximo hito: respira con su color */
.mile--next::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 18px rgba(var(--c), .45); opacity: .15; animation: nextBreath 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes nextBreath { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* Llamar en verde (como las gemas esmeralda de la web) */
.duo__cap--call { border-color: rgba(48, 232, 144, .55); }
.duo__cap--call .duo__ico { --l: #d6ffe9; --m: #22c97a; --mm: #0b8a4f; box-shadow: 0 0 14px rgba(34, 201, 122, .6); }

/* Pantalla «Hablar con Jesús» (héroe): destello de brillo que cruza las gemas Llamar y Escribir */
.fx--j01 i, .fx--j01 b { overflow: hidden; -webkit-mask: var(--almond) center / 100% 100% no-repeat; mask: var(--almond) center / 100% 100% no-repeat; }
.fx--j01 i { left: 11.8%; top: 53.9%; width: 29.2%; height: 19.6%; }
.fx--j01 b { left: 58.75%; top: 53.5%; width: 29.45%; height: 19.5%; }
.fx--j01 i::before, .fx--j01 b::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 70%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 28%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .2) 72%, transparent); transform: translateX(-140%) skewX(-16deg); animation: gemShine 3.2s ease-in-out infinite; }
.fx--j01 b::before { animation-delay: .55s; }
@keyframes gemShine { 0%, 42% { transform: translateX(-140%) skewX(-16deg); } 74%, 100% { transform: translateX(240%) skewX(-16deg); } }

/* =====================================================================
   v8 · imagen nueva de Jesús, botón bajo el móvil, relatos más llenos
   ===================================================================== */
/* Inicio: «Apoyar Vela y Oración» debajo del móvil */
.hero__stage { flex-direction: column; align-items: center; }
.hero__ctas--under { position: relative; z-index: 2; justify-content: center; margin-top: 30px; }
/* Historias de la Biblia: el contenido de las dos pantallas más cerca de sus bordes (menos margen vacío de la captura) */
.stories__phones .phone__body img { transform: scale(1.1); transform-origin: 50% 42%; }

/* =====================================================================
   v9 · aportaciones con Ko-fi y logo nuevo
   ===================================================================== */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.brand__mark { width: auto; height: 36px; filter: drop-shadow(0 0 6px rgba(var(--glow), .45)); }
.finale__mark { width: auto; height: 108px; }
.options--single { grid-template-columns: minmax(0, 560px) !important; justify-content: center; }
.kofi-steps { list-style: none; display: grid; gap: 10px; margin: 8px 0 16px; padding: 0; text-align: left; }
.kofi-steps li { display: flex; align-items: center; gap: 12px; font-size: 18.5px; line-height: 1.3; color: var(--ink); }
.kofi-steps span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 13px var(--disp); color: #1c1004; background: linear-gradient(180deg, #fff1cf, #ffd27f 48%, #e3a443); box-shadow: 0 0 14px -4px rgba(255, 190, 90, .8); }
.co__card .kofi-steps { margin: 18px 0 20px; }