:root {
  --noche:#040824; --azul:#0A1150; --azul-2:#1E2E8A; --marino:#07106A;
  --oro:#C99A4E; --oro-osc:#99651E; --crema:#FBF7EF; --arena:#F3EBDD; --tinta:#1B1F3A; --suave:#5B6180;
  --serif:'Playfair Display', Georgia, serif; --sans:'Montserrat', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); color:var(--tinta); background:var(--crema); line-height:1.6; overflow-x:hidden; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
.wrap { width:min(1080px, 100% - 40px); margin-inline:auto; }

/* ---------- barra de navegación ---------- */
nav { position:fixed; inset:0 0 auto; z-index:30; transition:background .4s, box-shadow .4s; }
nav .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
/* el nombre solo aparece al deslizar (arriba ya se ve el logo o el título de la página) */
nav .marca { font-family:var(--serif); color:#fff; text-decoration:none; font-size:17px; letter-spacing:.01em; opacity:0; pointer-events:none; transition:opacity .4s; }
nav.fija .marca, nav.abierta .marca { opacity:1; pointer-events:auto; }
nav ul { list-style:none; display:flex; gap:28px; }
nav ul a { color:#E7EAF7; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:6px 0; border-bottom:1px solid transparent; }
nav ul a:hover { color:var(--oro); }
nav ul a[aria-current="page"] { color:var(--oro); border-bottom-color:var(--oro); }
nav.fija, nav.solida { background:rgba(4,8,36,.94); backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(255,255,255,.06); }
.menu-btn { display:none; width:44px; height:44px; border:0; background:none; color:#fff; cursor:pointer; place-items:center; }
.menu-btn svg { width:26px; height:26px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; }
@media (max-width:760px) {
  nav .marca { font-size:15px; }
  .menu-btn { display:grid; }
  nav ul { position:fixed; inset:68px 0 auto; flex-direction:column; gap:0; padding:8px 20px 24px; background:rgba(4,8,36,.97);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
  nav ul a { display:block; padding:16px 0; font-size:15px; border-bottom:1px solid rgba(255,255,255,.08); }
  nav ul a[aria-current="page"] { border-bottom-color:rgba(255,255,255,.08); }
  nav.abierta ul { opacity:1; transform:none; pointer-events:auto; }
  nav.abierta { background:rgba(4,8,36,.97); }
}

/* ---------- portada de inicio ---------- */
.portada { position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden;
  background:#040824; padding:100px 0 56px; isolation:isolate; }
/* cielo de fondo (foto o vídeo) con un velo azul para que el texto se lea */
.portada .cielo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:84% 40%; }
.portada::before { content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 55% at 50% 55%, rgba(4,8,36,.55) 0%, rgba(4,8,36,.25) 60%, rgba(4,8,36,.1) 100%),
              linear-gradient(180deg, rgba(4,8,36,.35) 0%, rgba(10,17,80,.1) 35%, rgba(4,8,36,.75) 100%); }
.paloma { mix-blend-mode:screen; object-fit:cover; background:#000; aspect-ratio:800/660; }
/* logo: la paloma va a la derecha de "Iglesia Cristiana", como en el logo original.
   Todo se mide en --w (ancho del texto) para que encaje igual en celular y en computadora. */
.logo-anim { --w:min(760px, 82vw); position:relative; width:var(--w); margin:calc(var(--w) * .25) auto 0; }
.logo-texto { width:100%; opacity:0; animation:aparece 1.6s ease forwards; }

/* nombre de la iglesia en tipografía real: antetítulo dorado, título blanco y "del Espíritu" en oro que brilla */
.titulo { display:flex; flex-direction:column; align-items:center; font-weight:400; }
.t-pre { display:flex; align-items:center; gap:.9em; font-family:var(--sans); font-weight:600; text-transform:uppercase;
  font-size:max(11px, calc(var(--w) * .026)); letter-spacing:.42em; padding-left:.42em; color:#E9C98A;
  text-shadow:0 1px 12px rgba(4,8,36,.8); opacity:0; animation:sube 1.2s cubic-bezier(.2,.7,.2,1) .1s forwards; }
.t-pre::before, .t-pre::after { content:""; width:calc(var(--w) * .07); height:1px; }
.t-pre::before { background:linear-gradient(90deg, transparent, #E9C98A); }
.t-pre::after { background:linear-gradient(90deg, #E9C98A, transparent); }
.t-main { font-family:var(--serif); font-weight:500; font-size:calc(var(--w) * .118); line-height:1.02; letter-spacing:-.005em; color:#fff;
  filter:drop-shadow(0 4px 24px rgba(4,8,36,.75)); opacity:0; animation:sube 1.4s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.t-main:first-of-type { margin-top:calc(var(--w) * .03); }
.t-oro { font-style:italic; font-weight:500; padding:0 .08em .06em;
  background:linear-gradient(100deg, #B9853A 0%, #F6DFA4 28%, #D4A452 46%, #FFF1CC 58%, #C99A4E 74%, #F3D58F 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sube 1.4s cubic-bezier(.2,.7,.2,1) .6s forwards, brillo 7s ease-in-out 2s infinite; }
@keyframes sube { from { opacity:0; transform:translateY(18px); filter:blur(6px) drop-shadow(0 4px 24px rgba(4,8,36,.75)); }
                  to { opacity:1; transform:none; filter:blur(0) drop-shadow(0 4px 24px rgba(4,8,36,.75)); } }
/* en celular el antetítulo es relativamente más ancho: se baja un poco para que la paloma no lo tape */
@media (max-width:600px) { .titulo { padding-top:calc(var(--w) * .13); } }
@keyframes brillo { 0%, 100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.portada .paloma { position:absolute; left:calc(var(--w) * .62); top:calc(var(--w) * -.26); width:calc(var(--w) * .48);
  opacity:0; animation:aparece 2s ease .3s forwards; }
.cita { margin-top:22px; font-family:var(--serif); font-style:italic; font-size:clamp(17px, 2.6vw, 22px); color:#DCE1F5; max-width:34ch; margin-inline:auto;
  opacity:0; animation:aparece 1.6s ease 1s forwards; }
.cita b { display:block; margin-top:8px; font-family:var(--sans); font-style:normal; font-weight:500; font-size:13px; letter-spacing:.22em; color:var(--oro); text-transform:uppercase; }
.portada .acciones { opacity:0; animation:aparece 1.4s ease 1.4s forwards; justify-content:center; }
@keyframes aparece { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- cabecera de páginas interiores ---------- */
.cabecera { position:relative; color:#fff; overflow:hidden; padding:130px 0 70px; background:#040824; isolation:isolate; }
.cabecera .cielo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:75% 40%; }
/* velo más oscuro a la izquierda, donde va el título */
.cabecera::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(4,8,36,.82) 0%, rgba(4,8,36,.55) 50%, rgba(4,8,36,.2) 100%),
              linear-gradient(180deg, rgba(4,8,36,.5) 0%, transparent 40%, rgba(4,8,36,.6) 100%); }
.cabecera .wrap { display:grid; gap:20px; align-items:center; }
@media (min-width:760px) { .cabecera .wrap { grid-template-columns:1fr 300px; } }
.cabecera .paloma { width:min(300px, 60vw); justify-self:end; margin:-20px 0 -40px; }
@media (max-width:759px) { .cabecera .paloma { position:absolute; right:-30px; top:58px; width:200px; opacity:.55; } }
.cabecera .eti { color:var(--oro); }
.cabecera h1 { margin-top:12px; font-family:var(--serif); font-weight:400; font-size:clamp(38px, 6vw, 60px); line-height:1.08; position:relative; }
.cabecera h1 em { color:var(--oro); }
.cabecera p { margin-top:14px; max-width:48ch; color:#C7CDE8; font-weight:300; font-size:17px; position:relative; }

/* ---------- botones ---------- */
.acciones { margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 24px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.04em; transition:transform .2s, background .2s; }
.btn:hover { transform:translateY(-1px); }
.btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn.oro { background:var(--oro); color:var(--noche); }
.btn.oro:hover { background:#D8AC63; }
.btn.linea { border:1px solid rgba(255,255,255,.35); color:#fff; }
.btn.linea:hover { background:rgba(255,255,255,.08); }
.claro .btn.linea, .btn.linea.claro { border-color:#D9CBB2; color:var(--marino); }
.claro .btn.linea:hover, .btn.linea.claro:hover { background:var(--arena); }

/* ---------- secciones ---------- */
section { padding:clamp(72px, 10vw, 116px) 0; }
.eti { font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--oro-osc); display:flex; align-items:center; gap:12px; }
.eti::before { content:""; width:28px; height:1px; background:currentColor; }
h2 { margin-top:14px; font-family:var(--serif); font-weight:400; font-size:clamp(30px, 4.6vw, 46px); line-height:1.14; color:var(--marino); }
h2 em { color:var(--oro-osc); }
.lead { margin-top:18px; font-size:17px; font-weight:300; color:var(--suave); max-width:58ch; }
.lead + .lead { margin-top:12px; }
.oscura { background:var(--noche); color:#fff; position:relative; overflow:hidden; }
.oscura::before { content:""; position:absolute; inset:-30% -10% auto auto; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,46,138,.55), transparent 65%); pointer-events:none; }
.oscura h2 { color:#fff; }
.oscura h2 em, .oscura .eti { color:var(--oro); }
.oscura .lead { color:#B9C0DE; }
.arena { background:var(--arena); }
.dos { display:grid; gap:44px; align-items:center; }
@media (min-width:860px) { .dos { grid-template-columns:1.05fr .95fr; } }

/* tarjetas de pilares */
.pilares { display:grid; gap:14px; }
.pilares.cuatro { margin-top:40px; }
@media (min-width:760px) { .pilares.cuatro { grid-template-columns:repeat(2,1fr); gap:18px; } }
.pilar { padding:22px 24px; background:#fff; border-radius:16px; box-shadow:0 1px 0 rgba(7,16,106,.06), 0 18px 40px -28px rgba(7,16,106,.35);
  display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; }
.pilar .ico, .dato .ico { display:grid; place-items:center; }
.pilar .ico { width:42px; height:42px; border-radius:12px; background:var(--arena); }
.pilar svg, .dato svg, .enlace svg { fill:none; stroke:var(--oro-osc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pilar svg { width:22px; height:22px; }
.pilar h3 { font-family:var(--serif); font-weight:500; font-size:20px; color:var(--marino); }
.pilar p { font-size:14.5px; color:var(--suave); margin-top:2px; }

/* horarios */
.dias { margin-top:44px; display:grid; gap:16px; position:relative; }
@media (min-width:760px) { .dias { grid-template-columns:repeat(3,1fr); } }
.dia { padding:30px 28px; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); }
.dia .nombre { font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--oro); }
.dia .hora { margin-top:10px; font-family:var(--serif); font-size:40px; line-height:1; }
.dia .hora small { font-family:var(--sans); font-size:15px; font-weight:500; margin-left:4px; color:#B9C0DE; }
.dia .hasta { margin-top:10px; font-size:14px; color:#B9C0DE; }
.dia .tipo { margin-top:6px; font-family:var(--serif); font-style:italic; font-size:18px; color:#E7EAF7; }
.dia .turno + .turno { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.dia.hoy { border-color:rgba(201,154,78,.6); box-shadow:0 0 0 1px rgba(201,154,78,.25) inset; }
.dia .marca-hoy { display:none; margin-top:14px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--noche); background:var(--oro); padding:4px 10px; border-radius:999px; width:max-content; }
.dia.hoy .marca-hoy { display:block; }

/* enlaces a otras páginas */
.enlaces { margin-top:40px; display:grid; gap:16px; }
@media (min-width:760px) { .enlaces { grid-template-columns:repeat(3,1fr); } }
.enlace { display:block; padding:28px 26px; background:#fff; border-radius:18px; text-decoration:none; transition:transform .25s, box-shadow .25s;
  box-shadow:0 1px 0 rgba(7,16,106,.06), 0 18px 40px -28px rgba(7,16,106,.35); }
.enlace:hover { transform:translateY(-3px); box-shadow:0 1px 0 rgba(7,16,106,.06), 0 26px 50px -28px rgba(7,16,106,.45); }
.enlace svg { width:26px; height:26px; }
.enlace h3 { margin-top:14px; font-family:var(--serif); font-weight:500; font-size:22px; color:var(--marino); }
.enlace p { margin-top:4px; font-size:14.5px; color:var(--suave); }
.enlace span { display:inline-block; margin-top:14px; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--oro-osc); }

/* versículo grande */
.verso { text-align:center; }
.verso .eti { justify-content:center; }
.verso .eti::after { content:""; width:28px; height:1px; background:currentColor; }
.verso blockquote { font-family:var(--serif); font-size:clamp(26px, 4.4vw, 42px); line-height:1.3; color:var(--marino); max-width:24ch; margin:22px auto 0; }
.verso cite { display:block; margin-top:18px; font-style:normal; font-size:13px; font-weight:600; letter-spacing:.24em; color:var(--oro-osc); text-transform:uppercase; }
.verso .lead { margin-inline:auto; text-align:center; }

/* lista de pasos */
.pasos { margin-top:36px; display:grid; gap:14px; counter-reset:paso; }
@media (min-width:760px) { .pasos { grid-template-columns:repeat(3,1fr); gap:18px; } }
.paso { padding:26px 24px; border-radius:16px; background:#fff; counter-increment:paso; box-shadow:0 1px 0 rgba(7,16,106,.06), 0 18px 40px -28px rgba(7,16,106,.35); }
.paso::before { content:counter(paso, decimal-leading-zero); font-family:var(--serif); font-size:30px; color:var(--oro); }
.paso h3 { margin-top:6px; font-family:var(--serif); font-weight:500; font-size:20px; color:var(--marino); }
.paso p { margin-top:4px; font-size:14.5px; color:var(--suave); }

.logo-tarjeta { width:100%; height:auto; border-radius:22px; padding:clamp(10px, 3vw, 28px);
  background:radial-gradient(70% 70% at 50% 45%, #1E2E8A 0%, #0A1150 55%, #040824 100%); box-shadow:0 30px 60px -36px rgba(7,16,106,.75); }
.pie-logo { width:200px; height:auto; }
.pie-nombre { margin-top:6px; font-family:var(--serif); font-size:15px; color:#C7CDE8; max-width:24ch; }

/* contacto */
.datos { margin-top:28px; display:grid; gap:18px; }
.dato { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; }
.dato .ico { width:44px; height:44px; border-radius:50%; border:1px solid #E5D6BC; }
.dato svg { width:20px; height:20px; }
.dato small { display:block; font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--suave); }
.dato a, .dato span { font-size:17px; color:var(--marino); text-decoration:none; font-weight:500; }
.mapa { border-radius:20px; overflow:hidden; aspect-ratio:4/3.4; background:#E9E4DA; box-shadow:0 30px 60px -36px rgba(7,16,106,.55); }
.mapa iframe { width:100%; height:100%; border:0; display:block; }

/* formulario de contacto */
.form-zona { align-items:start; }
.formulario { background:#fff; border-radius:22px; padding:clamp(22px, 4vw, 36px); display:grid; gap:16px;
  box-shadow:0 1px 0 rgba(7,16,106,.06), 0 30px 60px -36px rgba(7,16,106,.5); }
.formulario .fila { display:grid; gap:16px; }
@media (min-width:560px) { .formulario .fila { grid-template-columns:1fr 1fr; } }
.campo { display:grid; gap:6px; }
.campo label { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--suave); }
.campo label span { text-transform:none; letter-spacing:0; font-weight:400; }
.campo input, .campo select, .campo textarea { width:100%; font:inherit; font-size:16px; color:var(--tinta); background:var(--crema);
  border:1px solid #E5D6BC; border-radius:12px; padding:13px 14px; transition:border-color .2s, box-shadow .2s, background .2s; }
.campo textarea { resize:vertical; min-height:130px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline:none; background:#fff; border-color:var(--oro); box-shadow:0 0 0 4px rgba(201,154,78,.18); }
.campo.error input, .campo.error textarea { border-color:#C0392B; }
.formulario .btn { justify-self:start; border:0; cursor:pointer; font-family:inherit; }
.formulario .btn[disabled] { opacity:.6; cursor:wait; }
.aviso { font-size:14.5px; min-height:1.4em; color:var(--suave); }
.aviso.ok { color:#1E7A4C; font-weight:500; }
.aviso.mal { color:#C0392B; font-weight:500; }
.trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* pie */
footer { background:var(--noche); color:#9AA3C7; padding:52px 0 calc(36px + env(safe-area-inset-bottom)); }
footer .wrap { display:grid; gap:30px; }
@media (min-width:760px) { footer .wrap { grid-template-columns:1.3fr 1fr 1fr; } }
footer img { width:230px; }
footer h4 { font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin-bottom:10px; }
footer p, footer li { font-size:14px; line-height:1.9; }
footer ul { list-style:none; }
footer a { text-decoration:none; color:#C7CDE8; }
footer a:hover { color:var(--oro); }
footer .credito { grid-column:1/-1; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#6F79A6; }
footer .credito a { color:#AEB7DD; }

.rev { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.rev.ver { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity:1; transform:none; transition:none; }
  .portada .paloma, .logo-texto, .cita, .portada .acciones { animation:none; opacity:1; }
}