<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#0B1220" />
<meta name="description" content="Congreso 2026 Internacional - Levantémonos y Edifiquemos | Centro Evangélico Vida Nueva" />
<title>Congreso 2026 Internacional | Vida Nueva</title>
<!-- Favicon (usa tu OnlyCircle.png como assets/logo-circle.png) -->
<link rel="icon" type="image/png" href="./assets/logo-circle.png" />
<style>
:root{
--bg: #0B1220;
--bg2:#0F1A33;
--card:#101A2E;
--card2:#0D1627;
--text:#E9EEF8;
--muted:#A7B3C7;
--line: rgba(255,255,255,.12);
--accent:#7DD3FC;
--accent2:#A78BFA;
--good:#34D399;
--warn:#FBBF24;
--danger:#FB7185;
--radius: 18px;
--shadow: 0 18px 45px rgba(0,0,0,.35);
--shadow2: 0 10px 24px rgba(0,0,0,.25);
--max: 1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
background: radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.18), transparent 55%),
radial-gradient(900px 480px at 95% 10%, rgba(167,139,250,.16), transparent 52%),
linear-gradient(180deg, var(--bg), #070B13 100%);
color: var(--text);
line-height: 1.45;
overflow-x:hidden;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
/* Header / Nav */
.topbar{
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px);
background: rgba(7,11,19,.55);
border-bottom: 1px solid var(--line);
}
.topbar-inner{
display:flex; align-items:center; justify-content:space-between;
padding: 12px 0;
gap: 14px;
}
.brand{
display:flex; align-items:center; gap: 12px; min-width: 220px;
}
.brand img{ height: 34px; width:auto; }
.nav{
display:flex; align-items:center; gap: 16px;
}
.nav a{
font-size: 14px;
color: var(--muted);
padding: 10px 10px;
border-radius: 12px;
transition: .2s ease;
}
.nav a:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.cta{
display:flex; align-items:center; gap:10px;
}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.06);
color: var(--text);
font-weight: 650;
letter-spacing:.2px;
box-shadow: var(--shadow2);
cursor:pointer;
transition:.2s ease;
user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.btn.primary{
background: linear-gradient(135deg, rgba(125,211,252,.22), rgba(167,139,250,.20));
border: 1px solid rgba(255,255,255,.18);
}
.btn.ghost{ background: transparent; box-shadow:none; }
.btn.small{ padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.hamburger{
display:none;
width:44px; height:44px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.06);
align-items:center; justify-content:center;
cursor:pointer;
}
.hamburger span{
width:18px; height:2px; background: var(--text); display:block; position:relative;
}
.hamburger span::before,.hamburger span::after{
content:""; position:absolute; left:0; width:18px; height:2px; background: var(--text);
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top: 6px; }
.mobile-drawer{
display:none;
position: fixed;
inset: 64px 14px auto 14px;
background: rgba(12,18,32,.92);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 12px;
z-index: 60;
}
.mobile-drawer a{
display:block;
padding: 12px 12px;
border-radius: 14px;
color: var(--muted);
}
.mobile-drawer a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.mobile-drawer .divider{ height:1px; background: var(--line); margin: 8px 0; }
/* Hero */
.hero{
position: relative;
padding: 54px 0 30px;
}
.hero-grid{
display:grid;
grid-template-columns: 1.25fr .75fr;
gap: 22px;
align-items: stretch;
}
.hero-card{
position: relative;
border-radius: 26px;
overflow:hidden;
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(7,11,19,.15), rgba(7,11,19,.78)),
url("./assets/hero.jpg") center/cover no-repeat;
min-height: 360px;
box-shadow: var(--shadow);
padding: 26px;
display:flex;
flex-direction: column;
justify-content: flex-end;
gap: 14px;
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
display:inline-flex; align-items:center; gap:8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(7,11,19,.45);
color: var(--text);
font-size: 13px;
}
.hero h1{
margin: 0;
font-size: clamp(26px, 3.0vw, 44px);
line-height: 1.05;
letter-spacing: -0.6px;
}
.hero p{
margin: 0;
color: rgba(233,238,248,.88);
font-size: clamp(14px, 1.25vw, 16px);
max-width: 70ch;
}
.hero-actions{
display:flex; flex-wrap:wrap; gap:10px; margin-top: 6px;
}
.side{
display:flex;
flex-direction: column;
gap: 14px;
}
.panel{
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadow: var(--shadow2);
padding: 18px;
}
.panel h3{ margin: 0 0 10px; font-size: 16px; letter-spacing:-.2px; }
.panel .muted{ color: var(--muted); font-size: 14px; }
.kpi{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.kpi .box{
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(7,11,19,.35);
padding: 12px;
}
.kpi .box b{ display:block; font-size: 18px; }
.kpi .box span{ color: var(--muted); font-size: 13px; }
/* Sections */
section{ padding: 34px 0; }
.section-title{
display:flex; align-items:flex-end; justify-content:space-between;
gap: 14px;
margin-bottom: 14px;
}
.section-title h2{
margin:0;
font-size: clamp(18px, 2.0vw, 28px);
letter-spacing:-.4px;
}
.section-title p{
margin:0;
color: var(--muted);
font-size: 14px;
max-width: 70ch;
}
.grid{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
.card{
grid-column: span 6;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
padding: 16px;
box-shadow: var(--shadow2);
}
.card h3{ margin:0 0 8px; font-size: 16px; letter-spacing:-.2px; }
.card p{ margin:0; color: var(--muted); font-size: 14px; }
.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: stretch;
}
.img-card{
border: 1px solid var(--line);
border-radius: var(--radius);
overflow:hidden;
box-shadow: var(--shadow2);
background: rgba(255,255,255,.03);
min-height: 240px;
position: relative;
}
.img-card .bg{
position:absolute; inset:0;
background-position:center;
background-size: cover;
filter: saturate(1.05) contrast(1.02);
transform: scale(1.03);
}
.img-card .overlay{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(7,11,19,.18), rgba(7,11,19,.78));
}
.img-card .content{
position: relative;
padding: 16px;
display:flex;
height:100%;
flex-direction: column;
justify-content:flex-end;
gap: 10px;
}
.img-card .content h3{ margin:0; font-size: 16px; }
.img-card .content p{ margin:0; color: rgba(233,238,248,.85); font-size: 14px; }
/* Program */
.tabs{
display:flex; flex-wrap:wrap;
gap: 10px;
margin: 6px 0 14px;
}
.tab{
border: 1px solid var(--line);
background: rgba(255,255,255,.04);
color: var(--muted);
padding: 10px 12px;
border-radius: 999px;
cursor:pointer;
font-weight: 650;
font-size: 14px;
transition: .2s ease;
}
.tab[aria-selected="true"]{
color: var(--text);
background: linear-gradient(135deg, rgba(125,211,252,.18), rgba(167,139,250,.16));
border-color: rgba(255,255,255,.18);
}
.schedule{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
.session{
grid-column: span 6;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(7,11,19,.35);
padding: 14px;
box-shadow: var(--shadow2);
display:flex;
flex-direction: column;
gap: 10px;
}
.session .meta{
display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap;
}
.badge{
display:inline-flex; align-items:center; gap:8px;
font-size: 13px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: var(--text);
}
.session h4{ margin:0; font-size: 16px; letter-spacing:-.2px; }
.session .desc{ color: var(--muted); font-size: 14px; margin:0; }
.session .where{ color: rgba(233,238,248,.85); font-size: 13px; margin:0; }
.session .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 2px; }
/* Lists */
ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
li{ margin: 6px 0; }
/* Footer */
footer{
padding: 28px 0 42px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
}
/* Back to top */
.to-top{
position: fixed;
right: 14px;
bottom: 14px;
z-index: 70;
opacity: 0;
pointer-events:none;
transform: translateY(8px);
transition: .2s ease;
}
.to-top.show{
opacity: 1;
pointer-events:auto;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 980px){
.hero-grid{ grid-template-columns: 1fr; }
.brand{ min-width:auto; }
}
@media (max-width: 820px){
.nav, .cta{ display:none; }
.hamburger{ display:flex; }
.card{ grid-column: span 12; }
.session{ grid-column: span 12; }
.split{ grid-template-columns: 1fr; }
.kpi{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
.wrap{ width: min(var(--max), calc(100% - 28px)); }
.hero-card{ padding: 18px; min-height: 360px; }
.panel{ padding: 14px; }
.kpi{ grid-template-columns: 1fr; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.btn:hover{ transform:none; }
}
</style>
</head>
<body>
<!-- Sticky Nav -->
<header class="topbar">
<div class="wrap topbar-inner">
<a class="brand" href="#inicio" aria-label="Ir al inicio">
<img src="./assets/logo-horizontal.png" alt="Centro Evangélico Vida Nueva" loading="eager" />
</a>
<nav class="nav" aria-label="Navegación principal">
<a href="#programa">Programa</a>
<a href="#lobby">Lobby</a>
<a href="#cafeteria">Cafetería</a>
<a href="#kids">Vida Nueva Kids</a>
<a href="#bautismos">Bautismos</a>
<a href="#inscripcion">Inscripción</a>
</nav>
<div class="cta">
<a class="btn small ghost" href="#programa">Ver horarios</a>
<a class="btn small primary" href="#inscripcion">Comprar ticket</a>
</div>
<button class="hamburger" id="btnMenu" aria-label="Abrir menú" aria-expanded="false">
<span aria-hidden="true"></span>
</button>
</div>
<div class="mobile-drawer wrap" id="drawer" aria-label="Menú móvil">
<a href="#programa" data-close>Programa</a>
<a href="#lobby" data-close>Lobby</a>
<a href="#cafeteria" data-close>Cafetería</a>
<a href="#kids" data-close>Vida Nueva Kids</a>
<a href="#bautismos" data-close>Bautismos</a>
<div class="divider"></div>
<a href="#inscripcion" data-close><b>Comprar ticket</b></a>
</div>
</header>
<!-- Hero -->
<main id="inicio" class="hero">
<div class="wrap hero-grid">
<div class="hero-card" role="img" aria-label="Congreso 2026 Internacional: Levantémonos y Edifiquemos">
<div class="pill-row">
<span class="pill">Congreso 2026 Internacional</span>
<span class="pill">Levantémonos y Edifiquemos</span>
<span class="pill">4 días · 6 sesiones</span>
</div>
<h1>Horarios y lugares del Congreso</h1>
<p>
Esta página está pensada para consultarse desde el móvil (QR en la entrada). Aquí encontrarás el programa completo,
información del Lobby, Cafetería, Vida Nueva Kids, Bautismos, cenas especiales e inscripción.
</p>
<div class="hero-actions">
<a class="btn primary" href="#programa">Ver programa</a>
<a class="btn" href="#inscripcion">Ticket del Congreso</a>
<a class="btn" href="#lobby">Mesas del Lobby</a>
</div>
</div>
<aside class="side">
<div class="panel">
<h3>Resumen rápido</h3>
<div class="muted">Lugar general: Lobby y Salón del Hotel (según itinerario).</div>
<div class="kpi">
<div class="box">
<b>$75</b>
<span>Ticket del Congreso</span>
</div>
<div class="box">
<b>$40</b>
<span>Cena especial (opcional)</span>
</div>
<div class="box">
<b>4–12</b>
<span>Kids (3 servicios)</span>
</div>
<div class="box">
<b>6:00 PM</b>
<span>Cena Vie/Sáb</span>
</div>
</div>
</div>
<div class="panel">
<h3>Consejo práctico</h3>
<div class="muted">
Guarda esta página en tu móvil (compartir → “Añadir a pantalla de inicio”) para acceso rápido durante el Congreso.
</div>
</div>
</aside>
</div>
</main>
<!-- Programa -->
<section id="programa">
<div class="wrap">
<div class="section-title">
<div>
<h2>Programa (4 días · 6 sesiones)</h2>
<p>Selecciona un día para ver las sesiones. Cada tarjeta permite “Añadir al calendario”.</p>
</div>
</div>
<div class="tabs" role="tablist" aria-label="Días del congreso">
<button class="tab" role="tab" aria-selected="true" data-day="jueves">Jueves 5</button>
<button class="tab" role="tab" aria-selected="false" data-day="viernes">Viernes 6</button>
<button class="tab" role="tab" aria-selected="false" data-day="sabado">Sábado 7</button>
<button class="tab" role="tab" aria-selected="false" data-day="domingo">Domingo 8</button>
</div>
<div class="schedule" id="schedule"></div>
<div style="margin-top:14px; color: var(--muted); font-size: 13px;">
Nota: Los servicios se realizan en el <b>Salón del Hotel</b>. El Lobby está disponible para mesas informativas y recursos.
</div>
</div>
</section>
<!-- Lobby -->
<section id="lobby">
<div class="wrap">
<div class="section-title">
<div>
<h2>Lobby del Congreso</h2>
<p>Mesas informativas, recursos y orientación general para los asistentes.</p>
</div>
</div>
<div class="split">
<div class="img-card" aria-label="Lobby / Recepción">
<div class="bg" style="background-image:url('https://cdn.pixabay.com/photo/2015/03/16/18/03/reception-676337_1280.jpg');"></div>
<div class="overlay"></div>
<div class="content">
<h3>Mesa Informativa (Entrada)</h3>
<p>Orientación, indicaciones generales y apoyo a los asistentes durante el Congreso.</p>
</div>
</div>
<div class="grid" style="grid-template-columns: repeat(12, 1fr);">
<div class="card" style="grid-column: span 12;">
<h3>Mesa: Oración y Ayuno</h3>
<p>Recursos y herramientas para fortalecer la vida devocional.</p>
</div>
<div class="card" style="grid-column: span 12;">
<h3>Mesa: Matrimonio y Familia</h3>
<p>Material y recursos para edificar el hogar.</p>
</div>
<div class="card" style="grid-column: span 12;">
<h3>Mesa: Iglesia Virtual</h3>
<p>Información para integrarse y servir en la Iglesia Virtual (requisitos abajo).</p>
<ul>
<li>21 años o más.</li>
<li>Miembro por al menos 1 año (congregación o virtual).</li>
<li>Computadora y conocimiento básico.</li>
<li>WhatsApp o email.</li>
<li>Cuenta de Facebook.</li>
<li>Identificación (ID gubernamental o pasaporte).</li>
<li>Ser bautizado.</li>
</ul>
<p style="margin-top:10px; color: rgba(233,238,248,.86); font-size:13px;">
“Porque de la manera que en un cuerpo tenemos muchos miembros…” (Romanos 12:4–5)
</p>
</div>
<div class="card" style="grid-column: span 12;">
<h3>Conoce otros ministerios</h3>
<p>Video, música, ujieres, sonido y otros. Acércate al Lobby para más información.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Cafetería -->
<section id="cafeteria">
<div class="wrap">
<div class="section-title">
<div>
<h2>Cafetería</h2>
<p>Servicio disponible para los asistentes con opciones accesibles.</p>
</div>
</div>
<div class="split">
<div class="img-card" aria-label="Cafetería">
<div class="bg" style="background-image:url('https://cdn.pixabay.com/photo/2016/11/29/12/54/cafe-1869656_1280.jpg');"></div>
<div class="overlay"></div>
<div class="content">
<h3>Menú limitado</h3>
<p>Café, agua, refrescos, sándwiches y bollería.</p>
</div>
</div>
<div class="card">
<h3>Información</h3>
<p>Los precios serán accesibles a todos.</p>
<ul>
<li>Ideal para pausas entre sesiones.</li>
<li>Ubicación: área de Cafetería (ver señalización en el hotel).</li>
</ul>
<div style="margin-top:12px;">
<a class="btn small" href="#programa">Volver a horarios</a>
</div>
</div>
</div>
</div>
</section>
<!-- Vida Nueva Kids -->
<section id="kids">
<div class="wrap">
<div class="section-title">
<div>
<h2>Vida Nueva Kids</h2>
<p>Atención para niños de 4 a 12 años (solo en 3 servicios).</p>
</div>
</div>
<div class="grid">
<div class="card" style="grid-column: span 7;">
<h3>Cómo funciona</h3>
<ul>
<li>Niños desde 4 hasta 12 años.</li>
<li>Recibimos a los niños <b>15 minutos antes</b> de comenzar los servicios.</li>
<li>Es importante entregar y recoger a los niños en el tiempo establecido.</li>
<li>Antes del inicio del Congreso, el área de niños tendrá material para colorear y entretener.</li>
<li>Pueden traer una colcha/manta o sleeping.</li>
<li>En caso de situación o emergencia, se llamará a los padres por teléfono.</li>
</ul>
</div>
<div class="card" style="grid-column: span 5;">
<div style="display:flex; align-items:center; gap:12px;">
<img src="./assets/kids-logo.png" alt="Vida Nueva Kids" style="width:72px; height:auto;" loading="lazy" />
<div>
<h3 style="margin:0 0 6px;">Dirección de niños</h3>
<p style="margin:0; color: var(--muted);">Santiago Solari y Diane Sepúlveda</p>
</div>
</div>
<div style="margin-top:12px; padding:12px; border-radius: 16px; border:1px solid var(--line); background: rgba(7,11,19,.35);">
<b>Recordatorio</b>
<div style="color: var(--muted); font-size: 14px; margin-top: 6px;">
Kids funciona en <b>3 servicios</b> (ver en “Programa” cuáles aplican, según la organización del Congreso).
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bautismos -->
<section id="bautismos">
<div class="wrap">
<div class="section-title">
<div>
<h2>Bautismos</h2>
<p>Información y requisito previo para quienes se bautizarán.</p>
</div>
</div>
<div class="split">
<div class="img-card" aria-label="Bautismos">
<div class="bg" style="background-image:url('https://cdn.pixabay.com/photo/2017/03/20/12/25/baptismal-font-2158964_1280.jpg');"></div>
<div class="overlay"></div>
<div class="content">
<h3>Culto de Bautismos</h3>
<p>Sesión del sábado 7 (ver horario exacto en el Programa).</p>
</div>
</div>
<div class="card">
<h3>Requisito</h3>
<p>Si usted se bautizará, debe contactar a su líder para la clase bautismal.</p>
<ul>
<li>Consulta en la Mesa Informativa si tienes dudas.</li>
<li>Recomendación: llegar con antelación.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Cenas especiales -->
<section id="cenas">
<div class="wrap">
<div class="section-title">
<div>
<h2>Cena especial (opcional)</h2>
<p>Disponible viernes y sábado a las 6:00 PM en el Salón del Hotel.</p>
</div>
</div>
<div class="grid">
<div class="card" style="grid-column: span 12;">
<h3>Detalles</h3>
<ul>
<li>Viernes 6 — 6:00 PM (opcional)</li>
<li>Sábado 7 — 6:00 PM (opcional)</li>
<li>Precio: <b>$40</b></li>
<li>Se debe comprar el ticket por adelantado (igual que el ticket del Congreso).</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Inscripción -->
<section id="inscripcion">
<div class="wrap">
<div class="section-title">
<div>
<h2>Inscripción y costo</h2>
<p>Compra tu ticket por adelantado para el Congreso y, si deseas, la Cena especial.</p>
</div>
</div>
<div class="grid">
<div class="card" style="grid-column: span 7;">
<h3>Ticket del Congreso — $75</h3>
<p>Incluye:</p>
<ul>
<li>4 días / 6 servicios.</li>
<li>Cuidado de niños (4 a 12 años) en 3 servicios.</li>
<li>Acceso al Lobby con mesas informativas y recursos.</li>
<li>Acceso a la Cafetería.</li>
</ul>
<div style="margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;">
<!-- IMPORTANTE: deja tu URL real aquí -->
<a class="btn primary" href="https://www.ticketsource.us/centro-evangelico-vida-nueva/congreso-internacional-2026/e-zpjrox" target="_blank" rel="noopener noreferrer">
Comprar ticket del Congreso
</a>
<a class="btn" href="#cenas">Ver cena especial</a>
</div>
<p style="margin-top:12px; font-size:13px; color: var(--muted);">
Consejo: tras comprar, guarda el comprobante y/o captura de pantalla para mostrarlo en la entrada.
</p>
</div>
<div class="card" style="grid-column: span 5;">
<h3>¿Dónde será?</h3>
<p style="margin-bottom:10px;">
Lugar general: <b>Lobby y Salón del Hotel</b>.
</p>
<div style="padding:12px; border-radius: 16px; border:1px dashed rgba(255,255,255,.22); background: rgba(7,11,19,.25);">
<b>Falta por completar:</b>
<div style="margin-top:6px; color: var(--muted); font-size: 14px;">
Nombre del hotel + dirección + ciudad/estado (para añadir mapa y enlace “Cómo llegar”).
</div>
</div>
<div style="margin-top:12px;">
<a class="btn small" href="#lobby">Ver mesas del Lobby</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="wrap" style="display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;">
<div>
<b>Centro Evangélico Vida Nueva</b><br />
Congreso 2026 Internacional — “Levantémonos y Edifiquemos”
</div>
<div style="text-align:right;">
<span id="year"></span> · Landing informativa para asistentes (QR)
</div>
</div>
</footer>
<div class="to-top" id="toTop">
<a class="btn small" href="#inicio" aria-label="Volver arriba">↑ Arriba</a>
</div>
<script>
// ===== Menú móvil =====
const btnMenu = document.getElementById('btnMenu');
const drawer = document.getElementById('drawer');
function closeDrawer(){
drawer.style.display = 'none';
btnMenu.setAttribute('aria-expanded', 'false');
}
function toggleDrawer(){
const expanded = btnMenu.getAttribute('aria-expanded') === 'true';
btnMenu.setAttribute('aria-expanded', String(!expanded));
drawer.style.display = expanded ? 'none' : 'block';
}
btnMenu.addEventListener('click', toggleDrawer);
drawer.addEventListener('click', (e) => {
const a = e.target.closest('[data-close]');
if(a) closeDrawer();
});
window.addEventListener('resize', () => {
if(window.innerWidth > 820) closeDrawer();
});
// ===== Back to top =====
const toTop = document.getElementById('toTop');
window.addEventListener('scroll', () => {
if(window.scrollY > 700) toTop.classList.add('show');
else toTop.classList.remove('show');
});
// ===== Año en footer =====
document.getElementById('year').textContent = new Date().getFullYear();
// ===== Datos del programa (ajusta si confirmas ciudad/huso horario) =====
// Importante: sin la fecha real del año (solo “Jueves 5, Viernes 6...”), generamos ICS sin fecha por defecto.
// Si me confirmas mes/año exactos y ciudad/estado, lo dejo perfecto (con timezone y mapa).
const PROGRAM = {
jueves: [
{
title: "1ª Sesión — Inauguración",
time: "7:00 PM",
timeRange: "7:00 PM",
where: "Salón del Hotel",
notes: "Apertura del Congreso."
}
],
viernes: [
{
title: "2ª Sesión",
time: "10:00 AM – 1:00 PM",
timeRange: "10:00 AM – 1:00 PM",
where: "Salón del Hotel",
notes: "Sesión de mañana."
},
{
title: "Cena especial (Opcional)",
time: "6:00 PM",
timeRange: "6:00 PM",
where: "Salón del Hotel",
notes: "Ticket aparte: $40."
},
{
title: "3ª Sesión",
time: "8:00 PM",
timeRange: "8:00 PM",
where: "Salón del Hotel",
notes: "Sesión de noche."
}
],
sabado: [
{
title: "4ª Sesión — Culto de Bautismos",
time: "10:00 AM – 1:00 PM",
timeRange: "10:00 AM – 1:00 PM",
where: "Salón del Hotel",
notes: "Si usted se bautizará, contacte a su líder para la clase bautismal."
},
{
title: "Cena especial (Opcional)",
time: "6:00 PM",
timeRange: "6:00 PM",
where: "Salón del Hotel",
notes: "Ticket aparte: $40."
},
{
title: "5ª Sesión",
time: "8:00 PM",
timeRange: "8:00 PM",
where: "Salón del Hotel",
notes: "Sesión de noche."
}
],
domingo: [
{
title: "6ª Sesión — Clausura y Santa Cena",
time: "3:00 PM",
timeRange: "3:00 PM",
where: "Salón del Hotel",
notes: "Cierre del Congreso."
}
]
};
// ===== Tabs =====
const tabs = Array.from(document.querySelectorAll('.tab'));
const scheduleEl = document.getElementById('schedule');
function renderDay(dayKey){
scheduleEl.innerHTML = "";
const sessions = PROGRAM[dayKey] || [];
sessions.forEach((s, idx) => {
const el = document.createElement('article');
el.className = "session";
const badge = document.createElement('div');
badge.className = "badge";
badge.textContent = s.time;
const meta = document.createElement('div');
meta.className = "meta";
const h4 = document.createElement('h4');
h4.textContent = s.title;
meta.appendChild(badge);
const where = document.createElement('p');
where.className = "where";
where.textContent = "Lugar: " + s.where;
const desc = document.createElement('p');
desc.className = "desc";
desc.textContent = s.notes || "";
const actions = document.createElement('div');
actions.className = "actions";
const add = document.createElement('button');
add.className = "btn small";
add.type = "button";
add.textContent = "Añadir al calendario";
add.addEventListener('click', () => downloadICS(dayKey, s, idx));
const jump = document.createElement('a');
jump.className = "btn small ghost";
jump.href = "#inscripcion";
jump.textContent = "Ver tickets";
actions.appendChild(add);
actions.appendChild(jump);
el.appendChild(meta);
el.appendChild(h4);
el.appendChild(where);
el.appendChild(desc);
el.appendChild(actions);
scheduleEl.appendChild(el);
});
}
tabs.forEach(t => {
t.addEventListener('click', () => {
tabs.forEach(x => x.setAttribute('aria-selected', 'false'));
t.setAttribute('aria-selected', 'true');
renderDay(t.dataset.day);
});
});
// Render inicial
renderDay('jueves');
// ===== ICS generator (sin fecha fija) =====
function downloadICS(dayKey, session, idx){
// Si quieres que el ICS tenga fecha real, dime:
// - Año + mes del congreso
// - Ciudad/estado (timezone)
// y lo dejo perfecto.
const title = session.title.replace(/[\n\r]/g, " ");
const location = session.where || "";
const description = (session.notes || "").replace(/[\n\r]/g, " ");
const now = new Date();
const stamp = now.toISOString().replace(/[-:]/g, "").split(".")[0] + "Z";
const ics =
`BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Vida Nueva//Congreso 2026//ES
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
UID:vn-congreso-${dayKey}-${idx}-${stamp}@vidanueva
DTSTAMP:${stamp}
SUMMARY:${escapeICS(title)}
DESCRIPTION:${escapeICS(description)}
LOCATION:${escapeICS(location)}
END:VEVENT
END:VCALENDAR`;
const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `Congreso2026-${dayKey}-${idx+1}.ics`;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
function escapeICS(text){
return String(text)
.replace(/\\/g, "\\\\")
.replace(/;/g, "\\;")
.replace(/,/g, "\\,")
.replace(/\n/g, "\\n");
}
</script>
</body>
</html>
