:root{
    --bg:#faf6ef;
    --bg-elevated:#ffffff;
    --text:#2b2420;
    --text-muted:#6b5f52;
    --accent:#8a6a34;
    --accent-2:#b98a2e;
    --border:#e8dcc8;
    --shadow: 0 18px 40px -20px rgba(60,45,20,0.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#16130f;
      --bg-elevated:#221d17;
      --text:#f2ece1;
      --text-muted:#c9bda9;
      --accent:#d3ab5f;
      --accent-2:#e6c377;
      --border:#3a3226;
      --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#16130f;
    --bg-elevated:#221d17;
    --text:#f2ece1;
    --text-muted:#c9bda9;
    --accent:#d3ab5f;
    --accent-2:#e6c377;
    --border:#3a3226;
    --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
html{scroll-behavior:smooth;scroll-padding-top:64px;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Playfair Display',Georgia,'Times New Roman',serif; margin:0 0 .4em 0; font-weight:700;}

  .snap{
    height:100vh;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
  }
  .page{
    min-height:100vh;
    width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:48px 20px 80px;
  }
  .wrap{width:100%; max-width:720px; margin:0 auto;}

  .eyebrow{
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.72rem;
    font-weight:600;
    color:var(--accent);
    text-align:center;
    margin-bottom:10px;
  }
  h1.title{
    text-align:center;
    font-size:clamp(1.6rem,5vw,2.4rem);
    line-height:1.15;
    margin-bottom:.15em;
  }
  .subtitle{
    text-align:center;
    color:var(--text-muted);
    font-size:1rem;
    margin-bottom:28px;
  }

  .hero-img-frame{
    width:100%;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
  }
  .hero-img-frame img{
    display:block;
    width:100%;
    height:auto;
  }
  .caption{
    text-align:center;
    font-size:.85rem;
    color:var(--text-muted);
    margin-top:12px;
    font-style:italic;
  }
  .note{
    margin-top:22px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-left:4px solid var(--accent);
    border-radius:10px;
    padding:14px 16px;
    font-size:.9rem;
    color:var(--text-muted);
    line-height:1.5;
  }
  .desc{
    margin-top:26px;
    font-size:1.02rem;
    line-height:1.65;
    text-align:center;
    color:var(--text);
  }
  .desc strong{color:var(--accent);}

  .scrolldown{
    margin-top:38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--accent);
    font-weight:600;
    font-size:.95rem;
  }
  .scrolldown .arrow{
    width:34px;height:34px;border-radius:50%;
    border:1.5px solid var(--accent);
    display:flex;align-items:center;justify-content:center;
    animation: bob 1.8s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

  .page2-intro{
    text-align:center;
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.6;
    margin-bottom:32px;
  }

  .card{
    width:100%;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 22px 24px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
  }
  .card h2{
    font-size:1.15rem;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .card-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;height:28px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:.85rem;
    font-weight:700;
    flex-shrink:0;
  }
  .card p{
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.55;
    margin:8px 0 14px;
  }
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .chip{
    flex:1 1 auto;
    min-width:150px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 12px;
    font-size:.88rem;
    text-align:center;
    color:var(--text);
  }
  .chip .ic{font-size:1.3rem; display:block; margin-bottom:6px;}

  .placeholder-box{
    margin-top:6px;
    border:1.5px dashed var(--accent);
    border-radius:12px;
    padding:16px;
    background:var(--bg);
  }
  .placeholder-box .label{
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    margin-bottom:6px;
  }
  .placeholder-box .value{
    font-size:1.15rem;
    font-weight:700;
    color:var(--text);
    letter-spacing:.02em;
  }
  .placeholder-box .value.todo{
    color:var(--text-muted);
    font-weight:500;
    font-style:italic;
    font-size:.95rem;
  }

  .contact-line{
    font-size:.9rem;
    color:var(--text-muted);
    font-style:italic;
  }

  footer{
    margin-top:12px;
    text-align:center;
    font-size:.8rem;
    color:var(--text-muted);
  }
  .back-top{
    display:inline-block;
    margin-top:18px;
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    font-size:.85rem;
  }

  .dots{
    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:10;
  }
  .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--border);
    border:none;
    cursor:pointer;
    padding:0;
  }
  .dot.active{background:var(--accent);}

  @media (max-width:480px){
    .page{padding:34px 16px 64px;}
    .card{padding:18px;}
  }

.copy{
  margin-top:12px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 14px;
  font:600 .85rem 'Inter',sans-serif;
  cursor:pointer;
}
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg-elevated);
  color:var(--text);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:12px 18px;
  font-size:.92rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:20;
  max-width:90vw;
  text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- Página única ---- */
.snap{height:auto; overflow:visible; scroll-snap-type:none;}
.page{min-height:0; scroll-snap-align:none; padding:48px 20px 24px;}
.wrap{max-width:720px;}
.wrap.wide{max-width:980px;}
img{max-width:100%;}

.nav{
  position:sticky; top:0; z-index:15;
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:10px 12px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav a{
  color:var(--text-muted); text-decoration:none; font-weight:600; font-size:.85rem;
  padding:6px 12px; border-radius:999px;
}
.nav a:hover{color:var(--accent); background:var(--bg-elevated);}

.gallery{display:grid; gap:14px; margin-top:14px; grid-template-columns:1fr;}
@media (min-width:700px){ .gallery{grid-template-columns:1fr 1fr;} }
.figure{margin:0;}
.figure .hero-img-frame{position:relative;}
.badge{
  position:absolute; left:10px; top:10px;
  background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
}

.section-title{text-align:center; font-size:clamp(1.4rem,4vw,1.9rem); margin-bottom:.3em;}
.divider{width:60px; height:2px; background:var(--accent-2); margin:6px auto 22px; border-radius:2px;}

.oracion{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); padding:28px 26px; line-height:1.7; font-size:1.02rem;
}
.oracion p{margin:0 0 14px;}
.oracion .amen{font-weight:700; color:var(--accent); margin-bottom:0;}
.oracion .firma{margin-top:18px; text-align:center; color:var(--text-muted); font-size:.82rem; font-style:italic;}

/* Formulario de aporte espiritual */
.tipos{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 14px;}
.tipo{flex:1 1 130px; position:relative;}
.tipo input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.tipo span{
  display:block; text-align:center; padding:12px 10px; border-radius:10px;
  background:var(--bg); border:1.5px solid var(--border); font-size:.9rem; color:var(--text);
}
.tipo .ic{font-size:1.3rem; display:block; margin-bottom:4px;}
.tipo input:checked + span{border-color:var(--accent); background:var(--bg-elevated); box-shadow:0 0 0 2px var(--accent) inset;}
.tipo input:focus-visible + span{outline:2px solid var(--accent-2); outline-offset:2px;}
textarea.intencion{
  width:100%; min-height:90px; resize:vertical; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font:inherit; font-size:.95rem; line-height:1.5;
}
textarea.intencion:focus{outline:2px solid var(--accent-2); outline-offset:1px;}
.form-row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap;}
.hint{font-size:.8rem; color:var(--text-muted);}
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:999px; padding:11px 22px;
  font:600 .95rem 'Inter',sans-serif; cursor:pointer;
}
.btn:disabled{opacity:.55; cursor:default;}
.btn.ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent);}
.form-error{color:#b3412e; font-size:.85rem; margin-top:8px; min-height:1.2em;}
.contador{margin-top:16px; padding-top:14px; border-top:1px solid var(--border); text-align:center; font-size:.85rem; color:var(--text-muted);}
.contador strong{color:var(--accent);}
.gracias{text-align:center; padding:10px 0;}
.gracias .big{font-size:2rem;}
.gracias h3{font-size:1.2rem; margin:.3em 0;}
.gracias p{margin:8px 0 14px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Datos bancarios */
.datos{display:grid; gap:8px; margin-top:6px;}
.dato{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px;
}
.dato .k{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700;}
.dato .v{font-size:1rem; font-weight:600; word-break:break-word;}
.dato.destacado{border:1.5px dashed var(--accent);}
.dato .copy{margin:0; flex-shrink:0;}
.dato .copy[hidden]{display:none;}
.dato[hidden]{display:none;}

.lema{
  text-align:center;
  margin:.2em 0 .5em;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.05rem,3.2vw,1.35rem);
  color:var(--accent);
}

.ofrenda{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:16px; padding:14px 16px;
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--accent-2); border-radius:10px;
}
.ofrenda .ic{font-size:1.5rem; line-height:1;}
.ofrenda p{margin:0; font-size:.88rem; line-height:1.55; color:var(--text-muted);}
.ofrenda strong{color:var(--accent);}
.campo{display:block; font-size:.82rem; font-weight:600; color:var(--text-muted); margin-bottom:12px;}
.campo input[type=text], .campo input[type=tel]{
  display:block; width:100%; margin-top:5px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:.95rem; font-weight:400;
}
.campo input:focus{outline:2px solid var(--accent-2); outline-offset:1px;}
.campo textarea{margin-top:5px; min-height:60px;}