/* Iglesia Cristiana Shalom — estilos del sitio y del panel */
/* Paleta tomada del logo oficial: azul Shalom, paloma roja-naranja, trazos verde lima y celeste */
:root {
  --azul: #1d71b8;          /* azul del texto del logo */
  --azul-osc: #14548c;
  --acento: #e8432e;        /* rojo-naranja de la paloma: botones y llamados a la acción */
  --celeste: #29abe2;       /* trazo celeste */
  --celeste-claro: #a5dcf6;
  --verde-lima: #8dc63f;    /* trazo verde */
  --verde-texto: #4d8a1d;
  --crema: #f6f9fc;         /* fondo claro y limpio, como el logo sobre blanco */
  --tinta: #22303c;
  --suave: #64748b;
  --blanco: #ffffff;
  --rojo: #e8432e;
  --verde: #4d8a1d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--crema);
  color: var(--tinta);
  line-height: 1.55;
}
a { color: var(--azul); }

/* ---------- Barra superior ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: var(--blanco);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 10px rgba(22, 50, 79, .08);
  flex-wrap: wrap;
}
.marca { font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--azul); display: flex; align-items: center; gap: 8px; }
.logo-barra { height: 48px; width: auto; display: block; }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barra nav a {
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 8px 14px; border-radius: 999px; color: var(--azul);
}
.barra nav a.activo, .barra nav a:hover { background: var(--crema); }
.menu-boton { display: none; font-size: 1.7rem; color: var(--azul); cursor: pointer; padding: 2px 10px; line-height: 1; user-select: none; }
/* En pantallas chicas: menú de hamburguesa (el menú completo no cabe) */
@media (max-width: 1180px) {
  .menu-boton { display: block; }
  .barra nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 8px 0 4px; border-top: 1px solid #e6edf3; margin-top: 8px; }
  .barra nav a { padding: 12px 14px; font-size: 1.02rem; }
  #menu-abierto:checked ~ nav { display: flex; }
}

/* ---------- Héroe ---------- */
.hero {
  background:
    linear-gradient(160deg, rgba(16, 55, 96, .68) 0%, rgba(9, 36, 66, .8) 75%),
    url('/img/fotos/culto-alabanza.jpg?v=2') center 60% / cover no-repeat;
  color: #fff; text-align: center;
  padding: 64px 20px 72px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.hero-sobre { letter-spacing: .25em; font-size: .8rem; color: var(--celeste-claro); text-transform: uppercase; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); margin: 8px 0 4px; }
.hero-lema { font-size: 1.15rem; color: var(--celeste-claro); font-weight: 600; margin-bottom: 18px; }
.hero-versiculo { max-width: 640px; margin: 0 auto 26px; font-style: italic; opacity: .92; }
.hero-versiculo span { font-style: normal; color: var(--celeste-claro); }
.hero-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; background: var(--acento); color: #fff;
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; font-size: 1rem;
  transition: transform .12s, box-shadow .12s;
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 67, 46, .35); }
.boton-suave { background: transparent; color: inherit; border: 2px solid currentColor; }
.boton-vivo { background: var(--rojo); color: #fff; animation: latido 1.6s infinite; }
.boton-chico { padding: 8px 16px; font-size: .9rem; }
.boton-rojo { background: transparent; color: var(--rojo); border: 2px solid var(--rojo); }
@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .5); } 50% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); } }
.punto-vivo {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #ff4b3e; margin-right: 4px; animation: parpadeo 1.2s infinite;
}
@keyframes parpadeo { 50% { opacity: .35; } }

/* ---------- Bloques y tarjetas ---------- */
.bloque { padding: 56px 18px; max-width: 1080px; margin: 0 auto; }
.bloque-claro { background: var(--blanco); max-width: none; }
.bloque-claro > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.bloque-oscuro { background: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 80%); color: #fff; max-width: none; }
.bloque-oscuro > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.sobre-titulo { letter-spacing: .22em; font-size: .78rem; font-weight: 700; color: var(--celeste); text-align: center; text-transform: uppercase; }
.bloque h2 { text-align: center; font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin: 6px auto 26px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tarjeta {
  background: var(--blanco); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 2px 14px rgba(22, 50, 79, .07);
}
.tarjeta h3 { color: var(--azul); margin-bottom: 8px; }
.tarjeta p + p { margin-top: 8px; }
/* Los bordes de las tarjetas alternan los 4 colores del logo */
.horarios .tarjeta:nth-child(4n+1) { border-top: 4px solid var(--azul); }
.horarios .tarjeta:nth-child(4n+2) { border-top: 4px solid var(--verde-lima); }
.horarios .tarjeta:nth-child(4n+3) { border-top: 4px solid var(--celeste); }
.horarios .tarjeta:nth-child(4n+4) { border-top: 4px solid var(--acento); }
.centrado { text-align: center; margin-top: 22px; }
.suave { color: var(--suave); font-size: .95rem; }
.bloque-oscuro .suave { color: #c7d3de; }
.chip {
  display: inline-block; background: var(--blanco); border-radius: 999px;
  padding: 6px 14px; margin: 4px 2px; font-size: .88rem;
  box-shadow: 0 1px 8px rgba(22, 50, 79, .08);
}

/* ---------- Avisos ---------- */
.franja-avisos { background: var(--verde-lima); padding: 10px 18px; }
.aviso { max-width: 1080px; margin: 4px auto; color: #1e3a12; font-size: .98rem; }

/* ---------- Videos ---------- */
.predicas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tarjeta.video { padding: 0; overflow: hidden; cursor: pointer; }
.video-media { position: relative; padding-top: 56.25%; background: #000; }
.video-media img, .video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-media .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.video-titulo { font-weight: 700; padding: 12px 16px 0; }
.video-fecha { color: var(--suave); font-size: .85rem; padding: 2px 16px 14px; }
.resumen-predica { margin: 0 16px 16px; }
.resumen-predica summary {
  background: var(--crema); border-radius: 10px; padding: 9px 14px;
  font-size: .9rem; font-weight: 700; color: var(--azul); cursor: pointer;
}
.resumen-texto { padding: 12px 6px 4px; font-size: .95rem; line-height: 1.9; }
@media (prefers-color-scheme: dark) {
  .resumen-predica summary { background: #131b28; }
}
.marco-video { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(22, 50, 79, .25); }
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
.formulario input, .formulario textarea, .formulario select,
.formulario-linea input, .formulario-linea select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #d5dde4;
  font: inherit; background: var(--blanco); color: var(--tinta);
}
.formulario textarea { resize: vertical; }
.casilla { display: flex; gap: 8px; align-items: center; font-size: .95rem; }
.casilla input { width: auto; }
.gracias { text-align: center; background: rgba(141, 198, 63, .18); color: var(--verde-texto); border-radius: 10px; padding: 14px; font-weight: 600; margin: 10px auto; max-width: 560px; }
.error { color: var(--rojo); font-weight: 600; margin-bottom: 8px; }

/* ---------- Pie y WhatsApp ---------- */
.pie { text-align: center; padding: 30px 18px 40px; color: var(--suave); font-size: .92rem; }
.btn-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  font-size: 26px; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* ---------- Casos de la vida real ---------- */
.caso h3, .caso-teaser h3 { color: var(--azul); font-size: 1.25rem; margin-bottom: 6px; }
.caso-situacion { margin-bottom: 14px; }
.opcion-caso {
  display: block; width: 100%; text-align: left; margin: 8px 0;
  background: var(--crema); border: 2px solid #dbe5ee; border-radius: 12px;
  padding: 12px 16px; font: inherit; cursor: pointer; color: var(--tinta);
  transition: border-color .12s, transform .12s;
}
.opcion-caso:hover:not(:disabled) { border-color: var(--celeste); transform: translateY(-1px); }
.opcion-caso:disabled { opacity: .55; cursor: default; }
.opcion-caso strong { color: var(--azul); margin-right: 6px; }
.resultado { margin: 10px 0; }
.resultado-cab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.barra-fondo { background: #e4ecf3; border-radius: 999px; height: 12px; overflow: hidden; }
.barra-relleno { background: linear-gradient(90deg, var(--celeste), var(--azul)); height: 100%; border-radius: 999px; transition: width .6s; }
.caso-ensenanza { background: rgba(141, 198, 63, .12); border-left: 4px solid var(--verde-lima); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
.caso-ensenanza p + p { margin-top: 8px; }
.caso-versiculo { font-weight: 700; color: var(--verde-texto); }
.caso-teaser { max-width: 680px; margin: 0 auto; border-top: 4px solid var(--azul); }
.boton-escuchar {
  background: var(--crema); border: 1px solid #dbe5ee; border-radius: 999px;
  font-size: .8rem; font-weight: 700; padding: 5px 12px; cursor: pointer;
  vertical-align: 3px; margin-left: 8px; color: var(--azul);
}
.caso-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 14px; }
.caso-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caso-jesus { background: rgba(29, 113, 184, .08); border-left: 4px solid var(--azul); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.caso-jesus p + p { margin-top: 8px; }
.caso-citas { background: var(--crema); border-left: 4px solid var(--celeste); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.caso-citas .cita { margin-top: 8px; font-style: italic; color: #3b4b5a; }

/* ---------- Sopa de letras ---------- */
.sopa { max-width: 560px; margin: 24px auto 0; }
.sopa-tema { text-align: center; margin-bottom: 10px; }
.sopa-grid { display: grid; gap: 3px; }
.sopa-celda {
  aspect-ratio: 1; border: 1px solid #d5dde4; border-radius: 6px; background: var(--blanco);
  font: inherit; font-weight: 700; font-size: clamp(.7rem, 2.6vw, 1rem); color: var(--tinta);
  cursor: pointer; padding: 0; user-select: none;
}
.sopa-celda.sopa-sel { background: var(--celeste); color: #fff; border-color: var(--celeste); }
.sopa-celda.sopa-ok { background: var(--verde-lima); color: #1e3a12; border-color: var(--verde-lima); }
.sopa-ayuda { text-align: center; color: var(--suave); font-size: .9rem; margin: 12px 0; }
.sopa-palabras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sopa-palabra { background: var(--blanco); border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: .85rem; box-shadow: 0 1px 6px rgba(22,50,79,.1); }
.sopa-palabra.sopa-tachada { text-decoration: line-through; opacity: .45; }
.sopa-progreso { text-align: center; font-weight: 700; color: var(--azul); margin: 12px 0; }

/* ---------- Centro de juegos ---------- */
.menu-juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 900px; margin: 20px auto 0; }
.juego-boton { display: grid; gap: 2px; text-align: center; cursor: pointer; font: inherit; border: 2px solid transparent; color: var(--tinta); }
.juego-boton span { font-size: 1.8rem; }
.juego-boton small { color: var(--suave); }
.juego-boton.activo-juego { border-color: var(--celeste); }
.caja-juego { max-width: 640px; margin: 16px auto 0; }
.versiculo-texto { font-size: 1.15rem; line-height: 2; text-align: center; margin: 16px 0; }
.hueco { color: var(--celeste); font-weight: 700; letter-spacing: 2px; }
.palabra-ok { color: var(--verde-texto); font-weight: 700; }
.banco-palabras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.chip-palabra { background: var(--blanco); border: 2px solid #dbe5ee; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; color: var(--tinta); }
.chip-palabra:hover { border-color: var(--celeste); }
.chip-mal { border-color: var(--rojo) !important; animation: sacudir .3s; }
@keyframes sacudir { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.memorama { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .memorama { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.carta { aspect-ratio: 3/2; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; padding: 6px; background: var(--azul); color: transparent; transition: background .2s; }
.carta span { visibility: hidden; }
.carta.volteada, .carta.lograda { background: var(--blanco); color: var(--tinta); box-shadow: 0 2px 10px rgba(22, 50, 79, .15); }
.carta.volteada span, .carta.lograda span { visibility: visible; }
.carta.lograda { background: rgba(141, 198, 63, .25); }
.dato-memorama { text-align: center; background: var(--crema); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.orden-lista { display: grid; gap: 8px; margin: 14px 0; }
.orden-item { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--blanco); border: 2px solid #dbe5ee; border-radius: 10px; padding: 10px 14px; font: inherit; cursor: pointer; color: var(--tinta); }
.orden-item.elegido { border-color: var(--azul); }
.orden-num { min-width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.orden-num.vacio-num { background: #dbe5ee; color: var(--suave); }
.resultado-juego { margin-top: 12px; }
.aventura-texto { background: var(--blanco); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 14px rgba(22, 50, 79, .07); line-height: 1.65; }
.aventura-consecuencia { border-left: 4px solid var(--rojo); background: rgba(232, 67, 46, .06); }
.aventura-opcion { text-align: left; font: inherit; cursor: pointer; color: var(--tinta); border: 2px solid transparent; }
.aventura-opcion:hover { border-color: var(--celeste); }
.ranking-caja { background: var(--blanco); border-radius: 14px; padding: 16px 18px; margin-top: 16px; box-shadow: 0 2px 14px rgba(22, 50, 79, .08); }
.ranking-lista { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.ranking-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--crema); }
.ranking-pos { min-width: 30px; text-align: center; font-weight: 700; }
.ranking-nombre { flex: 1; font-weight: 600; }
.ranking-yo { outline: 2px solid var(--celeste); }
@media (prefers-color-scheme: dark) {
  .ranking-caja { background: #1a2331; }
  .ranking-lista li { background: #131b28; }
}
@media (prefers-color-scheme: dark) {
  .chip-palabra, .orden-item { background: #141c29; border-color: #2c3a4d; }
  .carta.volteada, .carta.lograda { background: #1a2331; }
  .carta.lograda { background: rgba(141, 198, 63, .2); }
  .dato-memorama { background: #131b28; }
  .orden-num.vacio-num { background: #2c3a4d; }
}

/* ---------- Predicador en la tarjeta de video ---------- */
.video-predicador {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: .82rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.mini-video { width: 80px; border-radius: 8px; }
.galeria-predicadores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.predicador { text-align: center; font-size: .85rem; }
.predicador img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 4px; }
.enlace-rojo { background: none; border: 0; color: var(--rojo); cursor: pointer; font-size: .8rem; }

/* ==================== JÓVENES: EMBAJADORES DE PAZ ==================== */
/* Identidad propia del ministerio: fondo oscuro, naranja, corona geométrica */
.jovenes { --naranja: #f26b21; --cobre: #c98e5a; background: #0c1322; color: #f2ede8; }
.boton-cobre { background: linear-gradient(135deg, #b87d4b, #dca76e); color: #241505; }
.boton-cobre:hover { box-shadow: 0 6px 18px rgba(201, 142, 90, .4); }
.jovenes-hero {
  text-align: center; padding: 80px 20px 70px;
  background: linear-gradient(rgba(10, 15, 26, .78), rgba(13, 20, 32, .95)),
    url('/img/jovenes/embajadores_20.jpg') center 30%/cover no-repeat;
}
.jovenes .corona { width: 96px; color: var(--cobre); margin-bottom: 12px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.jovenes-hero h1, .jovenes-bloque h2 { font-family: 'Josefin Sans', 'Segoe UI', sans-serif; text-transform: uppercase; }
.jovenes-sobre { letter-spacing: .3em; font-size: .78rem; font-weight: 700; color: var(--cobre); text-transform: uppercase; text-align: center; }
.jovenes-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .14em; font-weight: 700; margin: 8px 0 6px; }
.jovenes-lema { color: #cfc4ba; font-style: italic; max-width: 560px; margin: 0 auto 24px; }
.boton-naranja { background: var(--naranja, #f26b21); color: #fff; }
.boton-naranja:hover { box-shadow: 0 6px 18px rgba(242, 107, 33, .4); }
.boton-borde-naranja { background: transparent; color: #f26b21; border: 2px solid #f26b21; }
.jovenes-bloque { max-width: 760px; }
.jovenes-bloque h2 { color: #fff; }
.jovenes-texto { text-align: center; color: #cfc4ba; max-width: 620px; margin: 0 auto 14px; }
.jovenes-fecha { text-align: center; font-weight: 700; color: var(--naranja); margin-bottom: 16px; }
.jovenes-fecha a { color: var(--naranja); }
.jovenes-formularios { max-width: 520px; margin: 0 auto; }
/* NO RANDOM: lema en palabras grandes + fichas de datos escaneables */
.camp-palabras { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 14px 0 16px; flex-wrap: wrap; font-family: 'Josefin Sans', sans-serif; }
.camp-palabras span { font-size: clamp(1.05rem, 3.2vw, 1.6rem); font-weight: 700; letter-spacing: .18em; color: var(--naranja); }
.camp-palabras i { color: #5a6a78; font-style: normal; font-weight: 700; }
.fichas-camp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 700px; margin: 18px auto 10px; }
.ficha-camp { background: #151d2e; border: 1px solid #2c3a4d; border-radius: 12px; padding: 14px 10px; text-align: center; display: grid; gap: 2px; }
.ficha-camp span { font-size: 1.4rem; }
.ficha-camp strong { color: #fff; }
.ficha-camp small { color: #9aa8b8; }
.jovenes .formulario-linea input { background: #211d1a; border-color: #3a332d; color: #f2ede8; }
.jovenes-redes { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.jovenes-redes .jovenes-red { width: 190px; }
.jovenes-red {
  background: #1d1916; color: #f2ede8; text-decoration: none; text-align: center;
  display: grid; gap: 2px; border: 1px solid #2c2520;
}
.jovenes-red span { font-size: 1.6rem; }
.jovenes-red small { color: #a99c8f; }
.jovenes-red:hover { border-color: var(--naranja); }
.jovenes-podcast { max-width: 560px; margin: 20px auto 0; }
.jovenes-final { padding-bottom: 70px; }
.tarjeta-jovenes { background: #131313; color: #f2ede8; }
.tarjeta-jovenes h3 { color: #f26b21; }

/* ==================== PANEL ==================== */
.fondo-panel { background: #eef1f5; }
.caja-entrar {
  max-width: 360px; margin: 12vh auto; background: var(--blanco);
  border-radius: 16px; padding: 34px 30px; text-align: center;
  box-shadow: 0 8px 40px rgba(22, 50, 79, .12);
}
.caja-entrar h1 { color: var(--azul); margin-bottom: 4px; }
.caja-entrar form { display: grid; gap: 12px; margin-top: 18px; }
.caja-entrar input { padding: 12px 14px; border-radius: 10px; border: 1px solid #d5dde4; font: inherit; }

.barra-panel { background: #1d71b8; }
.barra-panel .marca { color: #fff; }
.enlace-suave { background: none; border: 0; cursor: pointer; color: #c7d3de; font: inherit; text-decoration: none; margin-left: 10px; }
.enlace-suave:hover { color: #fff; }

.pestañas {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 16px; justify-content: center;
  max-width: 940px; margin: 0 auto;
}
.pestañas a {
  text-decoration: none; font-weight: 700; white-space: nowrap;
  padding: 12px 22px; border-radius: 12px; color: var(--azul); background: var(--blanco);
  box-shadow: 0 1px 6px rgba(22, 50, 79, .08); font-size: 1rem;
}
.pestañas a.activo { background: #1d71b8; color: #fff; }
.globo {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--rojo); color: #fff; border-radius: 999px;
  font-size: .78rem; padding: 1px 6px; vertical-align: 2px;
}
.contenido-panel { max-width: 900px; margin: 0 auto; padding: 10px 16px 60px; }
.contenido-panel h2 { color: var(--azul); margin: 14px 0 8px; }
.lista { display: grid; gap: 12px; margin-top: 14px; }
.apagada { opacity: .55; }
.peticion-texto { font-size: 1.05rem; margin-bottom: 6px; }
.tarjeta .botonera { display: flex; gap: 8px; margin-top: 10px; }
.tarjeta.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vacio { text-align: center; color: var(--suave); padding: 30px 0; font-size: 1.05rem; }
.plegable { margin-top: 14px; }
.plegable summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: 8px 0; }
.plegable.destacado summary { color: var(--verde); }
.formulario-linea { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.formulario-linea input { flex: 1 1 180px; }
.formulario-linea select { flex: 0 1 auto; }
.persona-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.etiqueta {
  display: inline-block; font-size: .78rem; font-weight: 700;
  background: #e4ecf3; color: var(--azul); border-radius: 999px; padding: 3px 10px;
}
.etiqueta-oro { background: rgba(232, 67, 46, .12); color: #b33325; }
.etiqueta-roja { background: rgba(192, 57, 43, .14); color: var(--rojo); }
.etiqueta-ambar { background: rgba(230, 150, 20, .16); color: #a06508; }
.campo { display: grid; gap: 4px; }
.campo span { font-weight: 700; font-size: .92rem; color: var(--azul); }

/* ==================== MODO OSCURO (automático según el dispositivo) ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --crema: #0f1520;
    --blanco: #1a2331;
    --tinta: #e6ecf3;
    --suave: #97a8ba;
    --azul: #5aa7e8;
    --azul-osc: #14548c;
  }
  body { background: var(--crema); }
  .barra { background: #141c29; box-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
  .logo-barra { background: #fff; border-radius: 8px; padding: 3px 8px; }
  .barra nav a { color: #cfe0f0; }
  .barra nav a.activo, .barra nav a:hover { background: #1f2a3a; }
  .tarjeta { box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
  .bloque-claro { background: #131b28; }
  .formulario input, .formulario textarea, .formulario select,
  .formulario-linea input, .formulario-linea select, .campo textarea, .caja-entrar input {
    background: #141c29; border-color: #2c3a4d; color: var(--tinta);
  }
  .opcion-caso { background: #141c29; border-color: #2c3a4d; }
  .chip, .sopa-palabra { background: #1a2331; color: var(--tinta); }
  .sopa-celda { background: #1a2331; border-color: #2c3a4d; color: var(--tinta); }
  .barra-fondo { background: #263242; }
  .caso-citas { background: #131b28; }
  .caso-citas .cita { color: #b9c6d4; }
  .caso-jesus { background: rgba(90, 167, 232, .1); }
  .boton-escuchar { background: #141c29; border-color: #2c3a4d; }
  .fondo-panel { background: #0d1420; }
  .pestañas a { background: #1a2331; color: #cfe0f0; box-shadow: none; }
  .pestañas a.activo { background: var(--azul-osc); color: #fff; }
  .mini-video { opacity: .9; }
}
.campo textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #d5dde4; font: inherit; resize: vertical; }

/* ---------- Comunidad: muro y testimonios ---------- */
.testimonio { border-left: 4px solid var(--verde-lima); }
.testimonio-texto { font-style: italic; margin-bottom: 8px; }
.fila-ore { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.boton-ore:disabled { background: #e4ecf3; color: var(--suave); cursor: default; transform: none; box-shadow: none; }
.instagram { justify-items: center; }
.enlace-ig { font-weight: 700; text-decoration: none; font-size: .92rem; }
.redes-min { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.evento { border-top: 4px solid var(--celeste); position: relative; }
/* Sello circular del ministerio de jóvenes en su evento (lleva a /jovenes) */
.sello-jovenes {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px;
  border-radius: 50%; background: #0c1322; border: 2px solid #c98e5a;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s; z-index: 2;
}
.sello-jovenes:hover { transform: scale(1.1); }
.corona-sello { width: 30px; color: #c98e5a; display: block; }
.evento-fecha { font-weight: 700; color: var(--azul); margin: 4px 0 8px; }
/* Evento con su afiche de fondo (overlay oscuro para que siga legible) */
.evento-con-fondo {
  background-size: cover; background-position: center;
  color: #f2f5f9; border-top: 4px solid var(--acento);
}
.evento-con-fondo h3 { color: #fff; }
.evento-con-fondo .evento-fecha { color: var(--celeste-claro); }
.evento-con-fondo .suave { color: #cfdbe8; }
.evento-con-fondo .plegable summary { color: var(--celeste-claro); }

/* ---------- Galería de Instagram de los jóvenes ---------- */
.galeria-ig {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 16px auto 0; max-width: 940px;
}
@media (max-width: 620px) { .galeria-ig { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.foto-ig { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid #2c3a4d; }
.foto-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; display: block; }
.foto-ig:hover img { transform: scale(1.06); }
.foto-ig span {
  position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #fff; font-size: .8rem; font-weight: 700; padding: 20px 10px 10px; text-align: center;
  opacity: 0; transition: opacity .2s;
}
.foto-ig:hover span { opacity: 1; }

/* Galería de Instagram en fondo claro (portada) */
.galeria-ig-clara .foto-ig { border-color: #d5dde4; box-shadow: 0 2px 12px rgba(22, 50, 79, .08); }

/* Pasos visuales: entender sin leer (célula: mapa → WhatsApp → casa) */
.pasos-visuales { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px auto 6px; }
.paso {
  background: var(--blanco); border-radius: 14px; padding: 16px 18px; text-align: center;
  display: grid; gap: 2px; min-width: 150px; box-shadow: 0 2px 14px rgba(22, 50, 79, .09);
}
.paso span { font-size: 2rem; }
.paso strong { color: var(--azul); }
.paso small { color: var(--suave); }
.paso-flecha { align-self: center; font-size: 1.5rem; color: var(--celeste); font-weight: 700; }
@media (max-width: 560px) { .paso-flecha { display: none; } .paso { flex: 1 1 100%; } }

/* ---------- Portada más viva: ondas del logo + puertas de colores ---------- */
.ondas-hero { display: block; width: 100%; height: 46px; margin: 34px auto -20px; max-width: 900px; opacity: .95; }
.puertas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 760px; margin: 6px auto 0;
}
@media (max-width: 560px) { .puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.puerta {
  border-radius: 16px; padding: 20px 14px; text-align: center; color: #fff;
  text-decoration: none; display: grid; gap: 3px; justify-items: center;
  transition: transform .15s, box-shadow .15s;
}
.puerta:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(22, 50, 79, .22); }
.puerta span { font-size: 2.3rem; line-height: 1; }
.puerta strong { font-size: 1.02rem; }
.puerta small { opacity: .88; font-size: .8rem; }
.puerta-azul { background: linear-gradient(150deg, #1d71b8, #29abe2); }
.puerta-verde { background: linear-gradient(150deg, #6faf2c, #8dc63f); }
.puerta-celeste { background: linear-gradient(150deg, #29abe2, #6fc5ec); }
.puerta-naranja { background: linear-gradient(150deg, #e8432e, #f2814e); }
.puerta-morada { background: linear-gradient(150deg, #6b3fa0, #9a6fd8); }
.puerta-navy { background: linear-gradient(150deg, #0c1322, #27405e); border: 1.5px solid #c98e5a; }
.puerta-navy strong { color: #dca76e; }

/* Tintes suaves para que las secciones se distingan entre sí */
.bloque-tinte-celeste { background: linear-gradient(180deg, #eef7fd, #f9fcff); }
.bloque-tinte-verde { background: linear-gradient(180deg, #f2f9ea, #fbfdf8); }

/* Lema del año (del Programa General ICS) */
.lema-anual {
  display: inline-block; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: 8px 18px; font-size: .92rem; margin-bottom: 22px; color: #dff0fb;
}
.lema-anual strong { color: #fff; }

/* Crédito del desarrollador (tarjeta con intención: puede traer proyectos) */
.credito-vera { margin-top: 10px; font-size: .8rem; opacity: .75; }
.credito-vera a { color: var(--suave); font-weight: 700; text-decoration: none; }
.credito-vera a:hover { color: var(--azul); }

/* Tarjeta del crédito Vera */
a.credito-vera {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  background: var(--blanco); border: 1px solid #dde5ec; border-radius: 12px;
  padding: 10px 16px; text-decoration: none; text-align: left;
  transition: transform .15s, box-shadow .15s; opacity: 1;
}
a.credito-vera:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 60, 55, .15); }
a.credito-vera img { border-radius: 8px; display: block; }
a.credito-vera strong { color: #0d3c37; font-size: .88rem; }
a.credito-vera small { color: var(--suave); font-size: .76rem; }

/* Sección de oración con la foto real de la congregación orando */
.bloque-foto-oracion {
  background:
    linear-gradient(160deg, rgba(16, 55, 96, .72) 0%, rgba(9, 36, 66, .82) 80%),
    url('/img/fotos/congregacion-orando.jpg?v=2') center 55% / cover no-repeat;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* Cabecera del Muro de Oración con la foto real de la hermana orando */
.cabecera-muro {
  background:
    linear-gradient(160deg, rgba(16, 55, 96, .58) 0%, rgba(9, 36, 66, .76) 85%),
    url('/img/fotos/oracion.jpg') center 65% / cover no-repeat;
  border-radius: 18px; padding: 46px 20px 40px; margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ---------- Playlist de canciones (lista con miniaturas) ---------- */
.titulo-playlist { text-align: center; color: var(--azul); margin: 26px 0 6px; font-size: 1.05rem; }
.lista-canciones { list-style: none; max-width: 700px; margin: 0 auto; display: grid; gap: 8px; }
.fila-cancion {
  display: flex; align-items: center; gap: 12px; background: var(--blanco);
  border-radius: 12px; padding: 8px 14px 8px 10px; cursor: pointer;
  box-shadow: 0 1px 8px rgba(22, 50, 79, .07); transition: transform .12s, box-shadow .12s;
}
.fila-cancion:hover { transform: translateX(4px); box-shadow: 0 4px 14px rgba(22, 50, 79, .13); }
.fila-cancion img { width: 84px; height: 47px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.numero-cancion { width: 22px; text-align: center; color: var(--suave); font-weight: 700; flex-shrink: 0; }
.titulo-cancion { font-weight: 600; font-size: .93rem; line-height: 1.3; }
.icono-sonando { margin-left: auto; visibility: hidden; }
.fila-cancion.sonando { background: #e8f4fd; box-shadow: inset 0 0 0 2px var(--celeste); }
.fila-cancion.sonando .icono-sonando { visibility: visible; animation: parpadeo 1.2s infinite; }
.fila-domingo { box-shadow: inset 0 0 0 2px var(--verde-lima), 0 1px 8px rgba(22, 50, 79, .07); }

/* "Te toca a ti" — llamado a interactuar */
.te-toca {
  display: inline-block; background: var(--acento); color: #fff; font-weight: 800;
  border-radius: 999px; padding: 7px 18px; font-size: .9rem; letter-spacing: .04em;
  animation: latido 1.8s infinite;
}

/* ---------- Modo oscuro: componentes nuevos ---------- */
@media (prefers-color-scheme: dark) {
  .fila-cancion.sonando { background: #17324a; }
  a.credito-vera { border-color: #2c3a4d; }
  a.credito-vera strong { color: #8fd8c8; }
  .bloque-tinte-celeste { background: linear-gradient(180deg, #0f1d2b, #121a26); }
  .bloque-tinte-verde { background: linear-gradient(180deg, #14211a, #121a26); }
  .galeria-ig-clara .foto-ig { border-color: #2c3a4d; }
  .paso, .fila-cancion { box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
  .paso-flecha { color: #4a90c9; }
  .opcion-caso strong { color: var(--azul); }
  .menu-boton { color: #cfe0f0; }
  .barra nav { border-top-color: #2c3a4d; }
  .resumen-predica summary { background: #10202e; }
  .evento-fecha { color: var(--azul); }
}

/* Video del caso en portada: portada visible + play grande encima hasta que arranca */
.video-caso-marco { position: relative; margin-bottom: 12px; cursor: pointer; }
.play-encima {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(232, 67, 46, .92);
  color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center;
  padding-left: 5px; pointer-events: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.video-caso-marco.reproduciendo .play-encima { display: none; }

/* Cartas del memorama con dibujo + nombre */
.carta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.carta-emoji { font-size: 1.9rem; line-height: 1; }
.carta-nombre { font-size: .78rem; line-height: 1.15; }

/* Botoncitos de habilidades del formulario del directorio */
.chips-habilidades { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-hab {
  font: inherit; font-size: .86rem; cursor: pointer;
  background: var(--crema); border: 1.5px solid #d5dde4; border-radius: 999px;
  padding: 11px 16px; color: var(--tinta); transition: all .12s;
}
.chip-hab.elegida { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .chip-hab { background: #141c29; border-color: #2c3a4d; }
  .chip-hab.elegida { background: var(--azul); border-color: var(--azul); color: #08243c; }
}

/* Buscador de la Palabra predicada */
.buscador-palabra { display: flex; gap: 10px; max-width: 620px; margin: 6px auto 0; flex-wrap: wrap; justify-content: center; }
.buscador-palabra input {
  flex: 1 1 300px; padding: 13px 18px; border-radius: 999px; border: 2px solid #cfdde9;
  font: inherit; background: var(--blanco); color: var(--tinta);
}
.buscador-palabra input:focus { outline: none; border-color: var(--celeste); }
mark { background: rgba(141, 198, 63, .45); border-radius: 3px; padding: 0 2px; }
@media (prefers-color-scheme: dark) {
  .buscador-palabra input { background: #141c29; border-color: #2c3a4d; }
  mark { background: rgba(141, 198, 63, .3); color: #e6ecf3; }
}

/* Formulario del directorio organizado en secciones */
.formulario-directorio { max-width: 620px; gap: 22px; }
.seccion-form {
  background: var(--blanco); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 2px 14px rgba(22, 50, 79, .08); text-align: left;
  display: grid; gap: 14px; border-top: 4px solid var(--celeste);
}
.seccion-form:nth-of-type(2) { border-top-color: var(--verde-lima); }
.seccion-form:nth-of-type(3) { border-top-color: var(--azul); }
.seccion-form:nth-of-type(4) { border-top-color: var(--acento); }
.seccion-form h3 { color: var(--azul); font-size: 1.08rem; display: flex; align-items: center; gap: 8px; margin: 0; }
.seccion-form h3 span { font-size: 1.35rem; }
.campo-dir { display: grid; gap: 5px; }
.campo-dir > span { font-weight: 600; font-size: .9rem; color: var(--tinta); }
.campo-dir .obligatorio { color: var(--acento); font-style: normal; font-weight: 700; font-size: .8rem; }
.pista-seccion { color: var(--suave); font-size: .88rem; margin: 0; }
@media (prefers-color-scheme: dark) {
  .seccion-form { box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
  .campo-dir .obligatorio { color: #ff8a76; }
}

/* ---------- La Espera ---------- */
.espera-cabeza { padding-bottom: 10px; }
.espera-intro { max-width: 620px; margin: 0 auto; text-align: center; font-size: 1.05rem; }
.espera-titulo-historia { text-align: center; color: var(--azul); font-size: 1.3rem; margin-bottom: 8px; }
.espera-linea { max-width: 640px; position: relative; }
.espera-tramo {
  position: relative; padding: 26px 0 26px 96px; border-left: 3px solid var(--celeste-claro);
  margin-left: 34px; min-height: 90px;
}
.espera-tramo p { max-width: 480px; }
.espera-año {
  position: absolute; left: -34px; top: 24px; width: 116px; text-align: center;
  background: var(--azul); color: #fff; font-weight: 800; border-radius: 999px;
  padding: 8px 4px; font-size: .92rem; box-shadow: 0 3px 12px rgba(29, 113, 184, .35);
}
.espera-pausa {
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 90%); color: #fff;
  border-radius: 18px; padding: 34px 24px; text-align: center; font-size: 1.1rem;
  margin: 30px 0 30px 34px; line-height: 1.8;
}
.espera-final {
  background: var(--blanco); border-radius: 18px; padding: 26px 24px; margin: 26px 0 0 34px;
  box-shadow: 0 3px 18px rgba(22, 50, 79, .1); border-top: 4px solid var(--verde-lima);
}
.espera-final p + p { margin-top: 12px; }
.espera-cita { font-style: italic; color: var(--suave); }
.espera-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.espera-resultado { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; }
.espera-animo { text-align: center; font-weight: 700; color: var(--azul); }
.espera-personaje h3 { margin-bottom: 8px; }
.espera-fin { color: var(--verde-texto); font-weight: 600; margin-top: 8px; }
@media (max-width: 560px) {
  .espera-tramo { padding-left: 20px; margin-left: 12px; padding-top: 56px; }
  .espera-año { left: -14px; top: 8px; }
  .espera-pausa, .espera-final { margin-left: 12px; }
}
@media (prefers-color-scheme: dark) {
  .espera-fin { color: #9fd66b; }
}

/* ---------- Donaciones ---------- */
.donacion-tarjeta { max-width: 480px; margin: 0 auto; border-top: 4px solid var(--verde-lima); display: grid; gap: 12px; }
.donacion-banco { color: var(--azul); }
.donacion-nombre { font-weight: 700; font-size: 1.05rem; }
.donacion-dato {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--crema); border-radius: 12px; padding: 10px 14px;
}
.donacion-dato small { display: block; color: var(--suave); font-size: .78rem; }
.donacion-dato strong { font-size: 1.12rem; letter-spacing: .5px; }
@media (prefers-color-scheme: dark) {
  .donacion-dato { background: #131b28; }
}
.espera-imagen { display: block; width: 100%; max-width: 640px; margin: 0 auto 26px; border-radius: 16px; box-shadow: 0 6px 24px rgba(22, 50, 79, .18); }
.predica-destacada { max-width: 560px; margin: 0 auto; }
.predica-destacada .tarjeta.video { box-shadow: 0 8px 30px rgba(22, 50, 79, .16); }

/* ---------- Intro animado del logo (video) ---------- */
#intro-logo {
  position: fixed; inset: 0; background: #fff; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s;
}
#intro-logo[hidden] { display: none; }
#intro-logo.intro-fuera { opacity: 0; pointer-events: none; }
#intro-video { width: min(96vw, 900px); max-height: 80vh; }
#intro-saltar { position: absolute; bottom: 26px; right: 26px; color: var(--suave); }
@media (prefers-color-scheme: dark) {
  #intro-logo { background: #fff; } /* el logo es sobre blanco: el intro se queda blanco a propósito */
}