/* Estilos de la página del Viaje Apostólico */
:root{
  color-scheme: dark;
  --noche:#121733;      /* fondo: azul noche de la imagen de Montevideo */
  --panel:#1b2146;
  --linea:#2d3566;
  --blanco:#f5f6fb;     /* sotana papal */
  --gris:#a3abd0;
  --oro:#d6b25e;        /* bordados de la casulla */
  --vivo:#e8394f;
  --donar:#d0102e;      /* rojo del botón Donar */
  --uy:#4a7fd4; --ar:#8cc0ea; --pe:#d91023;
  --serif:"Alegreya", Georgia, "Times New Roman", serif;
  --sans:"Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-padding-top:5.5rem}
body{margin:0;background:var(--noche);color:var(--blanco);font:400 1.0625rem/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px}

/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:78% 30%;transition:opacity .6s ease}
.btn .i{width:1.15em;height:1.15em;flex:none}
.hero-media img.fading{opacity:0}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,23,51,.94) 0%,rgba(18,23,51,.82) 38%,rgba(18,23,51,.25) 62%,rgba(18,23,51,0) 75%),
             linear-gradient(0deg,var(--noche) 0%,rgba(18,23,51,0) 22%)}
.hero-inner{max-width:var(--max);margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 6.25rem) clamp(1rem,4vw,2.5rem) 3rem}
.hero-col{width:min(720px,57%);transition:width .35s ease}
h1{font:700 clamp(2rem,4.2vw,3.4rem)/1.04 var(--serif);margin:0;letter-spacing:-.01em;text-wrap:balance}
.sub{margin:.6rem 0 1.6rem;color:var(--gris);font-size:1.15rem}

.player{background:#000;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  border:1px solid rgba(214,178,94,.35)}
.ratio{position:relative;aspect-ratio:16/9;background:#05070f}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aviso{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:1.5rem;color:var(--gris);font-size:.95rem}
.aviso b{color:var(--blanco);display:block;font-size:1.05rem;margin-bottom:.3rem}
.ahora{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1.1rem;background:var(--panel);min-height:4.2rem}
.ahora .txt{flex:1;min-width:0}
.ahora .lbl{font-weight:700;font-size:.95rem;color:var(--oro)}
.ahora.envivo .lbl{color:var(--vivo)}
.ahora .tit{font-weight:500;line-height:1.3}
.ahora .det{color:var(--gris);font-size:.92rem}
.ahora .tu-hora{color:var(--blanco)}
.ahora .det .bandera{width:16px;height:11px;margin-right:.45em;vertical-align:-1px}
.ahora .acc{flex:none;align-self:center}

.pulso{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--vivo);margin-right:.4em;vertical-align:.05em;
  box-shadow:0 0 0 0 rgba(232,57,79,.7);animation:pulso 1.8s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 .55em rgba(232,57,79,0)}100%{box-shadow:0 0 0 0 rgba(232,57,79,0)}}
@media (prefers-reduced-motion:reduce){.pulso{animation:none}.hero-media img,.hero-col{transition:none}}

.btn{text-decoration:none;display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--oro);background:transparent;color:var(--oro);
  padding:.45em .95em;border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--oro);color:var(--noche)}
.btn.rojo{border-color:var(--vivo);background:var(--vivo);color:#fff}
.btn.rojo:hover{filter:brightness(1.1)}

/* ---------- DÍAS ---------- */
.dias-wrap{position:sticky;top:0;z-index:5;background:rgba(18,23,51,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--noche)}
.dias{max-width:var(--max);margin:0 auto;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  padding:.7rem clamp(1rem,4vw,2.5rem) .55rem;scroll-snap-type:x proximity}
.dias::-webkit-scrollbar{display:none}
.dia{flex:1 0 4.4rem;text-decoration:none;display:block;scroll-snap-align:center;background:none;border:0;border-radius:8px;padding:.35rem .3rem .5rem;cursor:pointer;
  text-align:center;position:relative;color:var(--gris)}
.dia .sem{display:block;font-size:.82rem}
.dia .num{display:block;font:700 1.45rem/1.1 var(--serif);color:var(--blanco)}
.bandera{display:inline-block;width:21px;height:14px;border-radius:2px;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(128,134,170,.55);vertical-align:-2px}
.dia .banderas{display:flex;justify-content:center;gap:4px;margin-top:.4rem;height:14px}
.dia .banderas.dos .bandera{width:18px;height:12px;margin-top:1px}
.dia.pasado{opacity:.5}
.dia:hover{background:rgba(255,255,255,.05)}
.dia[aria-selected="true"]{background:var(--blanco);color:var(--noche);opacity:1}
.dia[aria-selected="true"] .num{color:var(--noche)}
.dia .punto{position:absolute;top:.35rem;right:.45rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--vivo)}
.leyenda{max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) .55rem;display:flex;gap:1.1rem;font-size:.82rem;color:var(--gris)}
.leyenda span{display:inline-flex;align-items:center;gap:.4em}
.leyenda .bandera{width:15px;height:10px;vertical-align:0}

/* ---------- PROGRAMA ---------- */
main{max-width:var(--max);margin:0 auto;padding:2rem clamp(1rem,4vw,2.5rem) 3rem}
.dia-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem 2rem;margin-bottom:1.4rem}
.dia-cab h2{font:700 clamp(1.6rem,3vw,2.2rem)/1.1 var(--serif);margin:0}
.dia-cab .ruta{color:var(--oro);margin:.25rem 0 0;font-size:1.1rem}
.zona{color:var(--gris);font-size:.92rem;margin:.25rem 0 0}
.filtro{display:flex;align-items:center;gap:.5rem;color:var(--gris);font-size:.95rem;cursor:pointer;user-select:none}
.filtro input{accent-color:var(--oro);width:1.05rem;height:1.05rem}

.lista{list-style:none;margin:0;padding:0;position:relative}
.ev{display:grid;grid-template-columns:7.2rem 2.2rem 1fr auto;gap:0 1rem;align-items:start;padding:1rem 0;position:relative;
  transition:opacity .3s}
.ev + .ev{border-top:1px solid var(--linea)}
.ev .hora{font:700 1.3rem/1.2 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.ev .local{display:block;font:400 .82rem/1.3 var(--sans);color:var(--gris);margin-top:.15rem}
.ev .ico{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linea);color:var(--oro)}
.ev .ico svg{width:1.1rem;height:1.1rem}
.ev h3{font:500 1.15rem/1.3 var(--sans);margin:.05rem 0 .15rem;text-wrap:pretty}
.ev .lugar{color:var(--gris);margin:0;font-size:.98rem}
.ev .lugar .bandera{width:16px;height:11px;margin-right:.45em;vertical-align:-1px}
.ev .nota{color:var(--oro);margin:.15rem 0 0;font-size:.95rem}
.ev .estado{align-self:center;text-align:right;font-size:.9rem;color:var(--gris)}
.ev.menor h3{font-size:1.02rem;color:#d3d7ec}
.ev.menor .ico{color:var(--gris)}

.ev.pasada{opacity:.42}
.ev.pasada:hover,.ev.pasada:focus-within{opacity:.8}
.ev.envivo{background:linear-gradient(90deg,rgba(232,57,79,.16),rgba(232,57,79,0) 70%);border-radius:10px;border-top-color:transparent}
.ev.envivo + .ev{border-top-color:transparent}
.ev.envivo .ico{background:var(--vivo);border-color:var(--vivo);color:#fff}
.ev.envivo .hora{color:#ff9aa8}
.ev.proxima .estado{color:var(--oro);font-weight:700}
.ocultar-menores .ev.menor{display:none}
.vacio{color:var(--gris);padding:2rem 0}

footer{max-width:var(--max);margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem) 3rem;color:var(--gris);font-size:.88rem;border-top:1px solid var(--linea)}


.btn.oro{background:var(--oro);color:var(--noche)}
.btn.oro:hover{filter:brightness(1.08)}
.btn.claro{background:var(--blanco);border-color:var(--blanco);color:var(--noche)}
.btn.claro:hover{background:#fff;border-color:#fff}
.btn.sutil{border-color:rgba(245,246,251,.35);color:var(--blanco)}
.btn.sutil:hover{background:rgba(245,246,251,.12);color:var(--blanco)}
.btn.grande{font-size:1.05rem;padding:.6em 1.3em}

/* ---------- BARRA: LOGO Y DONAR ---------- */
.barra{position:absolute;inset:0 0 auto;z-index:4;padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(180deg,rgba(18,23,51,.8) 0%,rgba(18,23,51,.45) 60%,rgba(18,23,51,0) 100%)}
.barra-in{max-width:var(--max);margin:0 auto;padding:1rem clamp(1rem,4vw,2.5rem) 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:block;flex:none}
.logo img{height:clamp(34px,3.6vw,46px);width:auto}
.barra-acc{display:flex;gap:.5rem;align-items:center}
.barra .btn{font-size:1.08rem;padding:.6em 1.35em;border-width:2px}
.barra .btn .i{width:1.2em;height:1.2em}
.barra .btn.donar{padding:.38em 1.35em .38em .38em}
/* Donar: rojo con brillo que cruza, anillo que late alrededor del corazón y realce al pasar el mouse
   (mismo efecto que el botón VER AHORA del anuncio) */
.btn.donar{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-color:#ff8a98;
  padding-left:.4em;gap:.55em;letter-spacing:.02em;
  background:linear-gradient(180deg,#ff6b7d 0%,#e3213f 38%,#b00c27 72%,#e8455a 100%);
  box-shadow:0 0 0 2px rgba(255,170,180,.45),0 .35em 1.1em rgba(10,5,40,.6),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 1px rgba(90,0,15,.45);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.btn.donar::after{content:"";position:absolute;z-index:-1;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);
  animation:barrido 1.1s ease-in-out .6s 1 both}
.btn.donar .latido{position:relative;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#8e0a22,#4d0412);box-shadow:inset 0 0 0 1.5px rgba(255,190,198,.75)}
.btn.donar .latido .i{width:1em;height:1em;color:#ffd9de}
.btn.donar .latido::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,225,230,.9);
  animation:anillo 1.8s ease-out .4s 1 both}
.btn.donar:hover,.btn.donar:focus-visible{color:#fff;transform:scale(1.06);filter:brightness(1.07);
  box-shadow:0 0 0 2px rgba(255,190,198,.9),0 0 1.4em rgba(255,80,105,.55),0 .45em 1.3em rgba(10,5,40,.6),inset 0 1px 0 rgba(255,255,255,.55)}
@keyframes anillo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
/* el brillo cruza una sola vez al cargar; al pasar el mouse vuelve a cruzar una vez */
@keyframes barrido{0%{left:-60%}100%{left:130%}}
@keyframes barrido-hover{0%{left:-60%}100%{left:130%}}
.btn.donar:hover::after{animation:barrido-hover .8s ease-in-out 1 both}
@media (prefers-reduced-motion:reduce){
  .btn.donar,.btn.donar::after,.btn.donar .latido::after{animation:none;transition:none}
  .btn.donar::after{display:none}
}
.zelle-btn{border-color:rgba(245,246,251,.6);color:var(--blanco);background:rgba(18,23,51,.35)}
.compartir-btn{border-color:rgba(245,246,251,.6);color:var(--blanco);background:rgba(18,23,51,.35)}
.compartir-btn:hover{background:rgba(245,246,251,.12);color:var(--blanco)}
.zelle-btn:hover{background:rgba(245,246,251,.12);color:var(--blanco)}

/* ---------- DEBAJO DEL VIDEO ---------- */
.player-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ampliar .i + .i,.ampliar[aria-pressed="true"] .i:first-child{display:none}
.ampliar[aria-pressed="true"] .i + .i{display:block}

/* Video ampliado (solo computadora) */
@media (min-width:821px){
  .cine .hero-col{width:100%}
  .cine .player{width:min(100%,calc((100svh - 11rem) * 16 / 9))}
  .cine .hero-media img{opacity:.28}
  .cine .hero-media img.fading{opacity:0}
}

/* Botón flotante hacia el programa */
.flotante{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.45em;padding:.7em 1.2em;border-radius:999px;background:var(--blanco);color:var(--noche);
  font-weight:700;text-decoration:none;box-shadow:0 10px 30px -8px rgba(0,0,0,.7);white-space:nowrap}
.flotante .i{width:1.15em;height:1.15em}
.flotante[hidden]{display:none}

/* ---------- APOYO (DONAR EN LA PÁGINA PRINCIPAL) ---------- */
.apoyo{border-top:1px solid var(--linea);background:linear-gradient(180deg,var(--panel),var(--noche))}
.apoyo-in{max-width:var(--max);margin:0 auto;padding:3rem clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1fr minmax(0,26rem);gap:2rem 4rem;align-items:start}
.apoyo h2{font:700 clamp(1.6rem,3vw,2.2rem)/1.1 var(--serif);margin:0 0 .6rem}
.apoyo-txt p{color:var(--gris);margin:0 0 1.4rem;max-width:34rem}
.apoyo h3{font:700 1.2rem/1.2 var(--sans);margin:0 0 .3rem}

/* ---------- ZELLE ---------- */
.z-pasos{color:var(--gris);font-size:.95rem;margin:0 0 .9rem}
.zelle-lista{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.zelle-lista li{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border:1px solid var(--linea);border-radius:10px;background:rgba(18,23,51,.55)}
.z-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.z-para{font-size:.85rem;color:var(--gris)}
.z-correo{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere;user-select:all}
.z-nombre{font-size:.85rem;color:var(--gris)}
.copiar{flex:none}
.z-mas{margin:1rem 0 0;font-size:.95rem}
.z-mas a{color:var(--oro)}

.dlg{border:1px solid var(--linea);background:var(--panel);color:var(--blanco);border-radius:14px;padding:0;
  width:min(28rem,calc(100% - 2rem));box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.dlg::backdrop{background:rgba(8,10,25,.72)}
.dlg-in{padding:1.5rem 1.4rem 1.4rem;position:relative}
.dlg h2{font:700 1.5rem/1.15 var(--serif);margin:0 2.5rem .5rem 0}
.cerrar{position:absolute;top:.8rem;right:.8rem;width:2.3rem;height:2.3rem;border-radius:50%;border:0;background:transparent;
  color:var(--gris);display:grid;place-items:center;cursor:pointer}
.cerrar:hover{background:rgba(255,255,255,.08);color:var(--blanco)}
.cerrar .i{width:1.3rem;height:1.3rem}

.aviso-copia{position:fixed;z-index:30;left:50%;bottom:calc(4.5rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,.5rem);
  background:var(--blanco);color:var(--noche);padding:.55em 1em;border-radius:8px;font-size:.92rem;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 2rem);text-align:center}
.aviso-copia.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- PÁGINA DONAR ---------- */
.hero-corto .hero-media::after{background:linear-gradient(90deg,rgba(18,23,51,.95) 0%,rgba(18,23,51,.85) 45%,rgba(18,23,51,.35) 75%,rgba(18,23,51,.2) 100%),
  linear-gradient(0deg,var(--noche) 0%,rgba(18,23,51,0) 35%)}
.hero-corto .hero-inner{padding-top:calc(env(safe-area-inset-top,0px) + 7.5rem);padding-bottom:3.5rem}
.hero-corto .hero-col{width:min(620px,60%)}
.hero-corto .sub{margin-bottom:0}
main.donar{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.5rem;align-items:start;padding-top:.5rem}
.donar-lado{display:grid;gap:1.5rem}
.tarjeta{border-radius:14px;padding:1.6rem}
.tarjeta h2{font:700 1.45rem/1.15 var(--serif);margin:0 0 .5rem}
.tarjeta p{margin:0 0 1rem}
.oscura{background:var(--panel);border:1px solid var(--linea)}
.oscura > p{color:var(--gris)}
.form-dona{background:#fff;color:#1b2146;color-scheme:light;min-height:30rem}
.form-dona .nota-seg{color:#5a6185;font-size:.95rem}
.cargando{color:#5a6185;padding:2rem 0;text-align:center}
.dona:has(iframe) .cargando,.dona:has(form) .cargando{display:none}

/* ---------- MÓVIL ---------- */
@media (max-width:820px){
  .hero-media{position:relative;inset:auto;aspect-ratio:16/10;z-index:0}
  .hero-media img{object-position:82% 25%}
  .hero-media::after{background:linear-gradient(0deg,var(--noche) 0%,var(--noche) 18%,rgba(18,23,51,.82) 42%,rgba(18,23,51,0) 72%)}
  /* el contenido sube sobre la parte baja de la imagen */
  .hero-inner{padding-top:0;margin-top:calc(-1 * clamp(4.5rem,31vw,10rem));position:relative;z-index:1;padding-bottom:1.25rem}
  .hero-col{width:100%}
  h1{font-size:clamp(1.65rem,7vw,2.3rem)}
  .sub{margin:.35rem 0 .9rem;font-size:1rem}
  .barra-in{padding:.7rem 1rem 1.2rem}
  .logo img{height:30px}
  .barra .btn{padding:.5em 1em;font-size:.98rem}
  .barra .btn.donar{padding:.3em 1em .3em .3em}
  .player-bar{margin-top:.8rem}
  .player-bar .btn.claro{flex:1;justify-content:center;padding:.65em 1em;font-size:1rem}
  .player-bar .ampliar{display:none}
  .ev{grid-template-columns:5.3rem 1fr;gap:0 .9rem;padding:.9rem .4rem}
  .ev .ico{display:none}
  .ev .hora{font-size:1.08rem;text-align:left;white-space:nowrap}
  .ev .estado{grid-column:2;text-align:left;margin-top:.5rem}
  .ahora{flex-wrap:wrap}
  .ahora .acc{align-self:flex-start}
  .apoyo-in{grid-template-columns:1fr;padding-block:2.25rem}

  /* página Donar */
  .hero-corto .hero-media{position:absolute;inset:0;aspect-ratio:auto}
  .hero-corto .hero-media::after{background:linear-gradient(0deg,var(--noche) 0%,rgba(18,23,51,.88) 45%,rgba(18,23,51,.55) 100%)}
  .hero-corto .hero-inner{margin-top:0;padding-top:calc(env(safe-area-inset-top,0px) + 5.5rem);padding-bottom:2rem}
  .hero-corto .hero-col{width:100%}
  main.donar{grid-template-columns:1fr}
  .tarjeta{padding:1.25rem}
  .barra .btn span:not(.latido){display:none}
}
@media (max-width:820px) and (min-width:380px){ .barra .btn span:not(.latido){display:inline} }
@media (max-width:480px){
  .copiar span{display:none}
  .copiar{padding:.55em;border-radius:50%}
  .copiar .i{width:1.2em;height:1.2em}
  .z-correo{font-size:1rem}
}
@media (min-width:821px){
  /* en computadora el botón flotante va a la derecha, lejos de los controles del video */
  .flotante{left:auto;right:clamp(1rem,4vw,2.5rem);transform:none}
}

/* ---------- COMPARTIR ---------- */
.redes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.red{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1em;border-radius:10px;font-weight:700;
  text-decoration:none;color:#fff;border:1px solid transparent}
.red:hover{filter:brightness(1.1)}
.red-whatsapp{background:#1f9e55}
.red-facebook{background:#1b62d6}
.red-x{background:#000;border-color:#3a4270}
.red-correo{background:transparent;border-color:var(--linea);color:var(--blanco)}
.red-correo:hover{background:rgba(255,255,255,.06)}
.enlace-copiar{display:flex;align-items:center;gap:.8rem;padding:.6rem .6rem .6rem .9rem;border:1px solid var(--linea);border-radius:10px;background:rgba(18,23,51,.55)}
.enlace-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gris);font-size:.95rem}
@media (max-width:820px){
  /* en el celular Compartir es solo el ícono, para que quepan los tres botones */
  .barra .compartir-btn{padding:.5em;border-radius:50%;width:2.6em;height:2.6em;justify-content:center}
  .barra .compartir-btn .txt-compartir{display:none !important}
  .barra-acc{gap:.4rem}
}
@media (max-width:400px){
  .logo img{height:26px}
  .barra-in{gap:.5rem}
  .barra .btn{font-size:.92rem}
  .barra .zelle-btn{padding-inline:.8em}
}