/* Componentes de la Red Tlahuilli (se suman a styles.css) */
main { min-height: 60vh; }
[hidden] { display: none !important; }
.aviso-demo { background: #eef2ff; color: #3730a3; text-align: center; font-size: 0.82rem; padding: 6px 16px; border-bottom: 1px solid #c7d2fe; }
.aviso-correo { background: #fff6e0; border-bottom: 1px solid #f3c969; color: #7a5200; padding: 10px 20px; text-align: center; font-size: 0.88rem; }
.aviso-correo .enlace { font-size: 0.88rem; }
.anexo { border: 2px solid #f3c969; background: #fffaf0; border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.info-box { display: block; }
.centro { text-align: center; }
.derecha { text-align: right; }
.margen { margin-top: 18px; }
.gris { color: var(--texto-claro); }
.rojo { color: #c0392b; }
.blanco { color: #fff !important; }
.chico { font-size: 0.85rem; }
.sin-arriba { padding-top: 0; }
.subtitulo { color: var(--primario); margin: 22px 0 10px; }
.sr { position: absolute; left: -9999px; }
.form-container.angosto { max-width: 480px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fila-evento { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef2f8; }
.fila-evento:last-child { border-bottom: none; }
.fila-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fila-inline input, .fila-inline select { padding: 9px 12px; border: 1.5px solid #dde3ec; border-radius: 8px; font: inherit; }
.en-linea { display: inline; }
.enlace { background: none; border: none; color: var(--primario); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0; }
.lista-simple { list-style: none; }
.lista-simple li { padding: 6px 0; border-bottom: 1px dashed #e3e9f3; font-size: 0.9rem; }
.burbuja { background: var(--acento); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 0.75rem; margin-left: 4px; }
.form-salir { display: inline; }
.form-salir button { background: none; border: none; color: rgba(255,255,255,0.85); font: inherit; font-size: 0.9rem; padding: 8px 16px; cursor: pointer; border-radius: 8px; }
.form-salir button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.logo-area img.logo-club { height: 77px; max-width: 264px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
.hero-club { background: linear-gradient(135deg, var(--primario) 0%, var(--secundario-club, #7b2fbe) 100%); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filtros input, .filtros select { padding: 10px 12px; border: 1.5px solid #dde3ec; border-radius: 8px; font: inherit; min-width: 180px; flex: 1; }
.card.opcion { text-decoration: none; color: inherit; display: block; }
.card.opcion:hover { border-color: var(--primario); }
.card.centro { text-align: center; }
.tag.azul { background: rgba(0,87,200,.1); }
.info-box a, .alerta-box a, .error-box a { color: inherit; font-weight: 700; }
.error-box .btn { margin-left: 8px; }

/* Clubes */
.clubes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: center; gap: 14px; }
.club-tarjeta { background: #fff; border-radius: 14px; padding: 18px; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; align-items: center; gap: 6px; border-top: 5px solid var(--c); text-align: center; }
.club-tarjeta img { height: 72px; max-width: 100%; object-fit: contain; }
.club-inicial { width: 60px; height: 60px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; }
.club-tarjeta small { color: var(--texto-claro); }
.club-inst { font-size: 0.85rem; line-height: 1.3; color: var(--texto); }
.seccion-titulo h2.blanco { color: #fff; }

/* Evento y sesiones */
.taller-opcion.estatico { cursor: default; }
.sesiones-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { background: rgba(0,137,61,.1); color: #0b6b33; padding: 4px 10px; border-radius: 16px; font-size: 0.8rem; font-weight: 600; }
.chip.lleno { background: #f1f1f1; color: #888; text-decoration: line-through; }
.meta-item.alerta { color: #a93226; font-weight: 600; }
.sesiones-lista { display: grid; gap: 8px; margin-top: 10px; }
.sesion-fila { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1.5px solid #dde3ec; border-radius: 10px; }
.sesion-fila.llena { opacity: .6; background: #fafafa; }
.sesion-quien { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { border: 1.5px solid #dde3ec; border-radius: 16px; padding: 4px 10px; font-size: 0.85rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip-check:has(input:checked) { border-color: var(--secundario); background: rgba(0,176,80,.08); }
.chip-check:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Familia */
.integrante { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef2f8; }
.premios { display: flex; flex-wrap: wrap; gap: 10px; }
.premio { border: 2px dashed var(--naranja); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; min-width: 120px; }
.premio strong { color: var(--naranja); }

/* Carta y firma */
.carta { background: #fbfcfe; border: 1px solid #e3e9f3; border-radius: 10px; padding: 18px 20px; max-height: 360px; overflow-y: auto; font-size: 0.88rem; line-height: 1.6; margin-bottom: 18px; }
.carta p, .carta li { margin-bottom: 8px; }
.carta ol { padding-left: 20px; }
.firma-caja { margin: 14px 0; }
.firma-caja .error-campo { font-size: 0.85rem; color: #c0392b; font-weight: 600; margin-bottom: 6px; }
.firma-etiqueta { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.firma-lienzo { width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; border: 2px dashed #9fb0cc; border-radius: 10px; background: #fff; touch-action: none; display: block; }
.firma-acciones { display: flex; justify-content: space-between; align-items: center; max-width: 600px; margin-top: 6px; gap: 10px; }
.grupo-check .checkbox-grupo { width: 100%; }

/* Credenciales */
.qr-mediano { width: 180px; height: 180px; display: block; margin: 10px auto; }
.codigo-grande { font-family: Consolas, monospace; font-size: 1.5rem; font-weight: 800; color: var(--primario); letter-spacing: 2px; }

/* Solicitudes */
.solicitud { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1.5px solid rgba(255,140,0,.4); background: rgba(255,140,0,.05); border-radius: 12px; margin-bottom: 10px; }
.bloque { border: 1.5px solid #dde3ec; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.form-bloque { border-top: 2px solid #eef2f8; padding-top: 14px; }

/* Escáner */
.escaner-video { position: relative; background: #111; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; display: none; }
.escaner.activo .escaner-video { display: block; }
.escaner-video video { width: 100%; height: 100%; object-fit: cover; }
.escaner-guia { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.escaner-botones { display: flex; gap: 10px; margin: 12px 0; }
.escaner-manual label { font-size: 0.85rem; font-weight: 600; display: block; margin: 8px 0 6px; }
.escaner-resultado { margin-top: 12px; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 1.05rem; min-height: 1em; }
.escaner-resultado:empty { display: none; }
.escaner-resultado.ok { background: rgba(0,176,80,.12); color: #0b6b33; }
.escaner-resultado.mal { background: rgba(231,76,60,.12); color: #a93226; }
.escaner-historial { list-style: none; margin-top: 10px; max-height: 220px; overflow-y: auto; font-size: 0.85rem; }
.escaner-historial li { padding: 4px 0; border-bottom: 1px dashed #e3e9f3; }
.escaner-historial li.mal { color: #a93226; }
.lista-asistencia { list-style: none; }
.lista-asistencia li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eef2f8; }
.lista-asistencia li.presente { color: #0b6b33; font-weight: 600; }
.lista-asistencia li.ausente { color: #a93226; }

/* Verificación */
.verificado { border-radius: 12px; padding: 16px; margin: 16px 0; }
.verificado.ok { background: rgba(0,176,80,.08); border: 2px solid rgba(0,176,80,.4); }
.verificado.viejo { background: rgba(243,156,18,.08); border: 2px solid rgba(243,156,18,.4); }
.sello { font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla-datos th { text-align: left; width: 32%; color: var(--texto-claro); font-weight: 600; padding: 7px 8px; vertical-align: top; }
.tabla-datos td { padding: 7px 8px; border-bottom: 1px solid #eef2f8; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .sesion-fila { grid-template-columns: 1fr; }
  .fila-evento, .solicitud { flex-direction: column; align-items: flex-start; }
  .logo-area img.logo-club { height: 48px; max-width: 108px; }
}

/* Portada de la Red y páginas de club: eventos en preparación, historial y clubes hermanos */
.evento-proximo { opacity: 0.85; border-left: 4px dashed #b8c4d6; }
.evento-proximo .evento-accion .chico { color: var(--texto-claro); font-size: 0.85rem; }
.evento-info p a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.club-ir { font-size: 0.8rem; color: var(--c); font-weight: 600; margin-top: 4px; }
.club-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.club-tarjeta { transition: transform 0.15s, box-shadow 0.15s; }
.etiqueta-enlace { text-decoration: none; display: inline-block; }
.etiqueta-enlace:hover { background: rgba(255,255,255,0.3); }
.tabla-realizados { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 0.92rem; }
.tabla-realizados th, .tabla-realizados td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e3e9f3; }
.tabla-realizados th { background: #f3f6fb; color: var(--primario); font-weight: 700; }
.tabla-realizados a { color: var(--primario); }
@media (max-width: 600px) { .tabla-realizados th, .tabla-realizados td { padding: 8px; font-size: 0.85rem; } }

/* Selector de rol (cuentas con varios roles) */
.nav-rol { position: relative; }
.selector-rol summary { list-style: none; cursor: pointer; color: #fff; font-size: 0.85rem; padding: 8px 12px; background: rgba(255,255,255,0.14); border-radius: 8px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-rol summary::-webkit-details-marker { display: none; }
.selector-rol summary:hover, .selector-rol[open] summary { background: rgba(255,255,255,0.26); }
.selector-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); min-width: 260px; max-width: 90vw; padding: 8px; z-index: 50; display: flex; flex-direction: column; }
.selector-menu a { color: var(--texto); text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: 0.9rem; }
.selector-menu a:hover { background: #f0f4fa; }
.selector-menu a.actual { background: #e8f0fd; font-weight: 700; color: var(--primario); }
.selector-menu .marca { float: right; }
.selector-menu .agregar { border-top: 1px solid #e3e9f3; margin-top: 4px; color: var(--primario); font-weight: 600; }
.selector-tit { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-claro); padding: 4px 12px; margin: 0; }
@media (max-width: 768px) { .selector-rol summary { max-width: 220px; } .selector-menu { right: auto; left: 50%; transform: translateX(-50%); } }
.turno-chip { display: inline-block; background: #eef3fb; border-radius: 6px; padding: 1px 7px; margin: 2px 3px 2px 0; font-size: 0.8rem; white-space: nowrap; }
.aviso-ok { background: #e7f7ee; border: 1px solid #b6e3c8; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* Diseño de constancias */
.diseno-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.diseno-form h3 { margin: 18px 0 8px; color: var(--primario); font-size: 1.05rem; }
.diseno-form h3:first-of-type { margin-top: 0; }
.diseno-previa { position: sticky; top: 12px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.previa-barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.previa-pdf { width: 100%; aspect-ratio: 11 / 8.5; border: 1px solid #e3e9f3; border-radius: 8px; background: #f3f6fb; }
.esquina { border: 1px solid #e3e9f3; border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.esquina legend { font-weight: 700; font-size: 0.9rem; padding: 0 6px; }
.galeria-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin-bottom: 6px; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid #e3e9f3; border-radius: 10px; cursor: pointer; background: #fff; padding: 4px; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile img { width: 100%; height: 100%; object-fit: contain; }
.tile .ninguna { font-size: 0.7rem; color: var(--texto-claro); text-align: center; }
.tile:has(input:checked) { border-color: var(--primario); background: #e8f0fd; box-shadow: 0 0 0 2px rgba(0,87,200,0.15); }
.tile:has(input:focus-visible) { outline: 2px solid var(--primario); outline-offset: 2px; }
@media (max-width: 900px) { .diseno-grid { grid-template-columns: 1fr; } .diseno-previa { position: static; } }

/* Gafetes verticales para portagafete (54 × 85.6 mm al imprimir). Todo en em: en pantalla 1em = 16px
   (gafete de 240 × 380 px) y al imprimir 1em = 3.6 mm (54 × 85.6 mm), así se ve igual en ambos. */
.gafetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; justify-items: center; }
.gafetes.una { grid-template-columns: 1fr; }
.gafete-envoltura { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gafete { font-size: 16px; width: 15em; height: 23.78em; box-sizing: border-box;
  background: linear-gradient(170deg, #0057c8 0%, #0057c8 36%, #ffffff 36.2%); color: #0d1b3e;
  border-radius: 0.9em; padding: 0.6em 0.75em 0.5em; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); overflow: hidden; border: 1px solid #dfe6f2; }
.gafete-tallerista { background: linear-gradient(170deg, #00804a 0%, #00804a 36%, #ffffff 36.2%); }
.gafete-cabecera { display: flex; align-items: center; gap: 0.4em; color: #fff; width: 100%; }
.gafete-logo { height: 1.9em; background: #fff; border-radius: 0.4em; padding: 0.12em; }
.gafete-red { font-size: 0.55em; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2; text-align: left; }
.gafete-tipo { color: #fff; font-weight: 800; font-size: 0.8em; letter-spacing: 0.15em; text-transform: uppercase; margin: 0.35em 0 0.35em; }
.gafete-foto { width: 5.6em; height: 5.6em; border-radius: 50%; overflow: hidden; background: #e8eef8; border: 0.25em solid #fff;
  box-shadow: 0 0.2em 0.6em rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 1em; flex-shrink: 0; }
.gafete-foto span { font-size: 2.6em; }
.gafete-foto img { width: 100%; height: 100%; object-fit: cover; }
.gafete-nombre { font-weight: 800; font-size: 0.95em; line-height: 1.15; margin-top: 0.35em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gafete-nivel { display: inline-block; background: #ffc107; color: #2a1a00; font-weight: 700; font-size: 0.66em; border-radius: 0.4em; padding: 0.05em 0.5em; margin: 0.3em 0 0.15em; }
.gafete-linea { font-size: 0.64em; color: #5a6a8a; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gafete-pie { margin-top: auto; display: flex; flex-direction: column; align-items: center; padding-top: 0.25em; }
.gafete-qr { width: 5em; height: 5em; background: #fff; display: block; }
.gafete-sin-foto { display: flex; align-items: center; justify-content: center; text-align: center; color: #8a4b00; background: #fff4e5;
  border-radius: 0.4em; font-size: 0.6em; width: 8.3em; height: 8.3em; font-weight: 700; line-height: 1.2; padding: 0.3em; box-sizing: border-box; }
.gafete-codigo { font-family: monospace; font-weight: 700; font-size: 0.68em; letter-spacing: 0.06em; margin-top: 0.1em; }
.cred-alerta { background: #fff4e5; color: #8a4b00; border-radius: 8px; padding: 6px 10px; font-size: 0.85rem; margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.gafete-envoltura label { cursor: pointer; }
@media print {
  @page { margin: 8mm; }
  .gafetes { display: flex; flex-wrap: wrap; gap: 5mm; }
  .gafete { font-size: 3.6mm; box-shadow: none; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header, footer, .aviso-demo, .aviso-correo, .mensajes, .no-imprimir { display: none !important; }
}
.nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 2px solid rgba(255,255,255,0.8); margin-right: 2px; }
.perfil-foto { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; background: #e8eef8; display: flex; align-items: center; justify-content: center; font-size: 3rem; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.perfil-foto.grande { width: 160px; height: 160px; }
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.firma-actual { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f3f6fb; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.firma-actual .ayuda { width: 100%; margin: 0; }
.firma-muestra { max-height: 70px; max-width: 220px; background: #fff; border-radius: 6px; padding: 4px; }
.separador { border: 0; border-top: 1px solid #e3e9f3; margin: 18px 0 12px; }
/* Menú: los botones nunca parten su texto en dos renglones; si no caben, pasan completos al renglón de abajo */
nav ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
nav a, .form-salir button, .selector-rol summary { white-space: nowrap; }
nav li { flex-shrink: 0; }
form:has(input[name=respaldo][value=firma]:checked) .solo-sello, form:has(input[name=respaldo][value=sello]:checked) .solo-firma { display: none; }

/* Íconos 3D (Fluent Emoji de Microsoft, licencia MIT; ver static/iconos/LICENCIA.txt) */
.ico { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.28em; display: inline-block; }
.ico-titulo { width: 1.25em; height: 1.25em; vertical-align: -0.2em; margin-right: 0.1em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); }
.ico-grande { width: 64px; height: 64px; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.card-icono .ico-grande { display: block; margin: 0 auto; }
.ico-relleno { width: 55% !important; height: 55% !important; object-fit: contain !important; opacity: 0.75; }
.btn .ico, nav .ico { width: 1.2em; height: 1.2em; }

/* =====================================================================
   IDENTIDAD RED TLAHUILLI — logo 3D, personajes y plantas (static/branding/)
   Animaciones suaves; se desactivan si la persona prefiere menos movimiento.
   ===================================================================== */
:root { --noche: #13215c; --noche2: #2a1766; --oro: #ffc93c; --madera: #8a5a2b; --hoja: #3fa34d; }

/* Encabezado: cielo nocturno con la palabra Tlahuilli en madera */
header { background: linear-gradient(100deg, var(--noche) 0%, #1d2f7a 55%, var(--noche2) 100%); }
/* En las páginas de un club, la barra superior toma sus colores (oscurecidos para que el texto blanco se lea) */
header.con-tema { background: linear-gradient(100deg, color-mix(in srgb, var(--primario) 55%, #000) 0%,
  color-mix(in srgb, var(--primario) 85%, #000) 55%, color-mix(in srgb, var(--secundario-club) 60%, #000) 100%); }
header.con-tema nav a.btn-registro { background: var(--secundario-club); }
header.con-tema nav a.btn-registro:hover { background: color-mix(in srgb, var(--secundario-club) 80%, #000); }
.logo-area img.logo-palabra { height: 58px; width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.logo-area img.logo-orbe { height: 52px; width: 52px; }
.logo-texto p { color: #ffe29a; }

/* Portada */
.hero.hero-tlahuilli { background: radial-gradient(ellipse at 70% 30%, #3b2a9a 0%, var(--noche) 45%, #0c1440 100%);
  text-align: left; padding: 56px 24px 0; }
.hero-tlahuilli .cielo { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 70%, #ffe8a3 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 80% 60%, #cfe3ff 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 25%, #ffe8a3 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 45%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 85%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 20% 90%, #cfe3ff 50%, transparent 51%);
  animation: titila 6s ease-in-out infinite alternate; }
.hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; position: relative; z-index: 1; }
.hero-tlahuilli .hero-content { margin: 0; }
.hero-tlahuilli .hero-botones { justify-content: flex-start; }
.hero-tlahuilli h2 span { color: var(--oro); }
.hero-tlahuilli p { margin-left: 0; }
.hero-tlahuilli .significado { font-size: .9rem; opacity: .75; margin: 18px 0 0; }
.hero-logo { position: relative; text-align: center; }
.logo-grande { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.hero-tlahui { position: absolute; width: 110px; height: auto; top: -10px; right: 2%; filter: drop-shadow(0 0 18px rgba(255,201,60,.7)); }
.hero-elenco { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-top: 18px; height: 190px; overflow: hidden; }
.hero-elenco .personaje { height: 230px; width: auto; margin: 0 -14px; transform: translateY(40px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); transition: transform .35s ease; }
.hero-elenco .personaje:hover { transform: translateY(8px); }

/* Los Guías Tlahuilli (clases internas "guardian*" se conservan) */
.guardianes { background: linear-gradient(180deg, #fff8e6 0%, var(--fondo) 100%); position: relative; }
.guardianes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.guardian { position: relative; background: #fff; border-radius: 24px; padding: 18px 18px 22px; text-align: center; text-decoration: none; color: var(--texto);
  box-shadow: 0 10px 30px rgba(19,33,92,.10); border: 2px solid transparent; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; overflow: hidden; }
.guardian::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: radial-gradient(circle at 50% 80%, #fff3c4 0%, transparent 70%); }
.guardian:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(19,33,92,.18); border-color: var(--oro); }
.guardian:hover .guardian-img { transform: translateY(-6px) scale(1.04); }
.guardian-img { position: relative; height: 230px; width: auto; max-width: 100%; object-fit: contain; transition: transform .35s ease; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.guardian-esfera { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; z-index: 1; }
.guardian h3 { margin-top: 6px; color: var(--noche); font-size: 1.25rem; }
.guardian-disc { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--madera); }
.guardian p { font-size: .88rem; color: var(--texto-claro); margin-top: 8px; font-style: italic; }

/* Personaje guía con globo de diálogo */
.guia { display: flex; align-items: flex-end; gap: 6px; margin: -20px 0 18px; }
.guia-derecha { flex-direction: row-reverse; justify-content: flex-start; }
.guia-arriba { justify-content: center; margin-top: 0; }
.guia .guia-img { height: 150px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.guia-globo { position: relative; background: #fff; border: 2px solid #ffe29a; border-radius: 18px; padding: 12px 16px; max-width: 420px; margin-bottom: 40px;
  box-shadow: 0 8px 22px rgba(19,33,92,.10); font-size: .92rem; }
.guia-globo strong { display: block; color: var(--madera); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.guia-globo::after { content: ""; position: absolute; bottom: 14px; width: 16px; height: 16px; background: #fff; border: 2px solid #ffe29a; border-top: 0; border-right: 0; }
.guia-derecha .guia-globo::after { right: -9px; transform: rotate(-135deg); }
.guia:not(.guia-derecha) .guia-globo::after { left: -9px; transform: rotate(45deg); }

/* Esferas de disciplina */
.esfera { display: inline-block; vertical-align: middle; }
.esfera-mini { width: 24px; height: 24px; margin-right: 2px; }
.taller-card { position: relative; }
.esfera-card { position: absolute; top: -14px; right: -10px; width: 58px; height: 58px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.area-esferas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.area-esfera { display: flex; flex-direction: column; align-items: center; width: 92px; text-decoration: none; color: var(--texto); font-size: .75rem; text-align: center; }
.area-esfera .esfera { width: 58px; height: 58px; transition: transform .25s ease; }
.area-esfera:hover .esfera, .area-esfera.activa .esfera { transform: scale(1.15) rotate(-6deg); }
.area-esfera.activa span { font-weight: 700; color: var(--noche); }

/* Encabezados de las páginas internas */
.form-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--noche) 0%, #2d3fa0 55%, var(--noche2) 100%); }
.form-hero::before, .form-hero::after { content: ""; position: absolute; bottom: -12px; width: 150px; height: 150px; background-size: contain; background-repeat: no-repeat; opacity: .9; pointer-events: none; }
.form-hero::before { left: 2%; background-image: url("branding/plantas/enredadera.webp"); transform: rotate(-8deg); }
.form-hero::after { right: 2%; background-image: url("branding/plantas/jacaranda.webp"); }
.form-hero h2, .form-hero p { position: relative; z-index: 1; }

/* Llamado final con personajes */
.cta-final { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--noche) 0%, #4b2aa0 60%, #8a2d8f 100%); }
.cta-personaje { position: absolute; bottom: -10px; height: 240px; width: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.cta-izq { left: 3%; } .cta-der { right: 3%; }

/* Pie de página con plantas */
footer { position: relative; background: #0b1336; padding-top: 70px; }
.footer-plantas { position: absolute; top: -70px; left: 0; right: 0; height: 120px; pointer-events: none; }
.footer-plantas .planta, .footer-plantas .personaje { position: absolute; bottom: 0; height: 110px; width: auto; }
.fp-rama { left: 1%; height: 90px !important; }
.fp-flor { left: 14%; }
.fp-tlahui { left: 48%; height: 70px !important; bottom: 40px !important; filter: drop-shadow(0 0 14px rgba(255,201,60,.8)); }
.fp-nopal { right: 16%; }
.fp-jacaranda { right: 2%; height: 130px !important; }
.footer-palabra { height: 44px; width: auto; margin-bottom: 6px; }

/* Botón principal en tonos de la marca */
.btn-primario { background: linear-gradient(180deg, #ffd45c, var(--oro)); color: #3a2400; box-shadow: 0 4px 0 #d79c12; }
.btn-primario:hover { background: linear-gradient(180deg, #ffe08a, #ffcf50); box-shadow: 0 6px 18px rgba(255,201,60,.45); }

/* ---- Animaciones ---- */
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes revolotear { 0% { transform: translate(0, 0) rotate(-4deg); } 25% { transform: translate(-18px, -14px) rotate(4deg); }
  50% { transform: translate(-30px, 6px) rotate(-2deg); } 75% { transform: translate(-10px, 14px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(-4deg); } }
@keyframes mecer { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes titila { from { opacity: .45; } to { opacity: .85; } }
@keyframes asomar { from { transform: translateY(120px); } to { transform: translateY(40px); } }
@keyframes girar-suave { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }
.flota { animation: flotar 5s ease-in-out infinite; }
.flota-lento { animation: flotar 7s ease-in-out infinite; }
.revolotea { animation: revolotear 9s ease-in-out infinite; }
.mece { transform-origin: 50% 100%; animation: mecer 4s ease-in-out infinite; }
.mece-lento { transform-origin: 50% 100%; animation: mecer 6s ease-in-out infinite; }
.gira-suave { animation: girar-suave 6s ease-in-out infinite; }
.hero-elenco .asoma { animation: asomar .9s cubic-bezier(.2,.9,.3,1.3) both; }
.hero-elenco .a1 { animation-delay: .1s } .hero-elenco .a2 { animation-delay: .2s } .hero-elenco .a3 { animation-delay: .3s }
.hero-elenco .a4 { animation-delay: .4s } .hero-elenco .a5 { animation-delay: .5s } .hero-elenco .a6 { animation-delay: .6s } .hero-elenco .a7 { animation-delay: .7s }
.js .aparece { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--retraso, 0) * 80ms); }
.js .aparece.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-tlahuilli .hero-botones { justify-content: center; }
  .hero-tlahuilli { text-align: center; }
  .logo-grande { max-width: 380px; }
  .hero-elenco { height: 130px; } .hero-elenco .personaje { height: 160px; margin: 0 -18px; }
  .cta-personaje, .form-hero::before, .form-hero::after { display: none; }
  .guia .guia-img { height: 110px; }
  .fp-rama, .fp-nopal { display: none; }
  .logo-area img.logo-palabra { height: 40px; }
}
@media (max-width: 560px) { .hero-elenco .personaje:nth-child(n+6) { display: none; } .guia-globo { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) {
  .flota, .flota-lento, .revolotea, .mece, .mece-lento, .gira-suave, .hero-tlahuilli .cielo, .hero-elenco .asoma { animation: none !important; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
}
.quienes-somos { background: linear-gradient(120deg, var(--noche) 0%, #263c9e 60%, var(--noche2) 100%); }
.seccion-titulo h2 { color: var(--noche); }
.guardianes-grid { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1080px; margin: 0 auto; }
.guardianes-grid .guardian { flex: 0 1 240px; }

/* ── Página personalizada de cada club ── */
.hero-club { background: linear-gradient(135deg, var(--primario) 0%, var(--secundario-club, #7b2fbe) 100%); text-align: left; padding: 56px 24px 64px; }
.hero-club.con-portada { background: linear-gradient(100deg, color-mix(in srgb, var(--primario) 92%, #000) 0%, color-mix(in srgb, var(--primario) 70%, transparent) 45%, rgba(0,0,0,.15) 100%), var(--portada) center / cover no-repeat; }
.hero-club::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(transparent, rgba(0,0,0,.12)); pointer-events: none; }
.hero-club-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; position: relative; z-index: 1; }
.hero-club-texto p { margin-left: 0; margin-bottom: 12px; }
.hero-club-texto .hero-botones { justify-content: flex-start; margin-top: 18px; }
.club-logo-grande { display: block; width: fit-content; background: #fff; border-radius: 18px; padding: 10px 14px; margin: 14px 0 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.club-logo-grande img { display: block; max-height: 144px; max-width: min(504px, 80vw); width: auto; object-fit: contain; }
.club-institucion { font-size: 1rem !important; opacity: .85; text-transform: none; }
.club-lema { font-size: 1.3rem !important; font-style: italic; font-weight: 600; opacity: 1 !important; color: #fff6c9; }
.hero-club-deco { position: relative; height: 340px; }
.hero-club-deco .deco-personaje { position: absolute; bottom: -64px; height: 300px; width: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.hero-club-deco .p1 { left: 28%; z-index: 3; } .hero-club-deco .p2 { left: 2%; height: 250px; z-index: 2; } .hero-club-deco .p3 { right: 0; height: 250px; z-index: 2; }
.hero-club-deco .deco-propia { position: absolute; max-height: 200px; max-width: 46%; width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.hero-club-deco .deco-propia.d1 { top: 0; left: 0; } .hero-club-deco .deco-propia.d2 { top: 10px; right: 0; }
.hero-club-deco .deco-tlahui { position: absolute; top: 0; right: 30%; height: 90px; width: auto; filter: drop-shadow(0 0 18px rgba(255,201,60,.7)); }
@keyframes asomarClub { from { transform: translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }
.asoma-club { animation: asomarClub .9s cubic-bezier(.2,.9,.3,1.2) both; }
.hero-club-deco .p2 { animation-delay: .15s; } .hero-club-deco .p3 { animation-delay: .3s; }
.temporada-chip { position: absolute; right: 16px; top: 14px; z-index: 2; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); border-radius: 999px; padding: 4px 12px; font-size: .8rem !important; margin: 0 !important; }
.club-quienes { background: #fff; }
.club-quienes-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.club-quienes-grid h2 { color: var(--primario); margin: 4px 0 10px; }
.club-quienes-grid p { font-size: 1.05rem; }
.deco-propia-grande { max-height: 260px; max-width: 100%; justify-self: center; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
.club-numeros { padding-top: 36px; padding-bottom: 36px; background: color-mix(in srgb, var(--primario) 7%, #fff); }
.club-numeros .stat-card .numero { color: var(--primario); }
.club-eventos { position: relative; }
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.galeria-foto { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #e8eef8; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria-foto:hover img { transform: scale(1.05); }
.galeria-foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; color: #fff; font-size: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.deco-franja { display: flex; justify-content: center; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding: 10px 16px 0; }
.deco-franja img { max-height: 150px; max-width: 30vw; width: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); }
@media (max-width: 900px) {
  .hero-club { text-align: center; }
  .hero-club-grid, .club-quienes-grid { grid-template-columns: 1fr; }
  .hero-club-texto .hero-botones { justify-content: center; }
  .hero-club-texto p { margin-left: auto; margin-right: auto; }
  .hero-club-deco { height: 220px; } .hero-club-deco .deco-personaje { height: 200px; bottom: -64px; } .hero-club-deco .p2, .hero-club-deco .p3 { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .asoma-club { animation: none !important; } .galeria-foto img { transition: none; } }

/* Pie de página del club */
.footer-logo-club { max-height: 84px; max-width: 264px; width: auto; background: #fff; border-radius: 10px; padding: 6px 8px; margin-bottom: 10px; }
.footer-parte { margin-top: 12px; font-size: .85rem; opacity: .85; }
.footer-parte a { color: inherit; text-decoration: underline; }
.footer-palabra-mini { height: 22px; width: auto; vertical-align: middle; margin-right: 4px; }

/* Editor de la página del club (coordinación) */
.personalizar-form h3 { margin: 22px 0 10px; color: var(--primario); font-size: 1.1rem; display: flex; align-items: center; gap: 6px; }
.personalizar-form h3:first-of-type { margin-top: 0; }
.opciones-decoracion { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.opcion-deco { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid #e3e9f3; border-radius: 12px; padding: 10px; cursor: pointer; text-align: center; font-size: .9rem; }
.opcion-deco input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-deco:has(input:checked) { border-color: var(--primario); background: #e8f0fd; }
.opcion-deco-img { display: flex; align-items: flex-end; justify-content: center; height: 70px; gap: 2px; }
.opcion-deco-img .personaje.mini { height: 70px; width: auto; }
.elegir-personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 6px; }
.tile-personaje { aspect-ratio: auto; flex-direction: column; padding: 6px 4px; font-size: .75rem; }
.tile-personaje .personaje { height: 80px; width: auto; }
.elegir-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tile-foto { aspect-ratio: auto; flex-direction: column; padding: 4px; font-size: .7rem; gap: 4px; }
.tile-foto img { height: 90px; width: 100%; object-fit: cover; border-radius: 6px; }
.imagenes-propias { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.imagenes-propias figure { margin: 0; border: 1px solid #e3e9f3; border-radius: 10px; padding: 6px; text-align: center; background: repeating-conic-gradient(#f2f4f8 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.imagenes-propias img { height: 80px; width: 100%; object-fit: contain; }
.dos-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
a.blanco { color: #fff; text-decoration: underline; }
.personalizar-form input[type="color"] { height: 46px; width: 100%; max-width: 160px; padding: 4px; cursor: pointer; }
.personalizar-form .esquina .ayuda { font-size: .8rem; }
.form-container + .form-nota, .form-container .form-nota { margin-bottom: 60px; }

/* Logo de club PNG sin fondo: sin recuadro blanco, con una sombra suave para que se lea sobre cualquier color */
.club-logo-grande.sin-recuadro { background: none; box-shadow: none; padding: 0; }
.club-logo-grande.sin-recuadro img { max-height: 216px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)) drop-shadow(0 0 2px rgba(255,255,255,.6)); }
.logo-area img.logo-club.sin-recuadro, .footer-logo-club.sin-recuadro { background: none; padding: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* ---------- Una iniciativa apoyada por: (logos de instituciones) ---------- */
.apoyos { position: relative; z-index: 1; background: #fff; margin: 0 -24px 0; padding: 20px 24px 22px; text-align: center;
  box-shadow: inset 0 6px 12px -8px rgba(0,0,0,.25); }
.apoyos-titulo { color: #4a5675; font-size: 0.85rem; letter-spacing: 0.04em; margin: 0 0 12px; }
.apoyos-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.apoyos-logos li { display: flex; align-items: center; padding: 4px 10px; transition: transform .2s ease; }
.apoyos-logos li:hover { transform: translateY(-2px); }
.apoyos-logos a { display: flex; align-items: center; }
/* Franja blanca de lado a lado con los logos en sus colores originales (decisión de Víctor) */
.apoyos-logos img { height: 48px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.apoyo-texto { color: #0b1336; font-weight: 700; }
@media (max-width: 600px) { .apoyos-logos img { height: 38px; max-width: 140px; } .apoyos-logos li { padding: 4px 8px; } }
@media (prefers-reduced-motion: reduce) { .apoyos-logos li { transition: none; } }

/* ---------- Contactos de familias ---------- */
.escaner-ficha { list-style: none; margin: 10px 0 0; padding: 10px 12px; background: #fff; border-radius: 10px; color: var(--texto); font-weight: 600; text-align: left; }
.escaner-ficha li + li { margin-top: 4px; }
.ver-contacto summary { list-style: none; cursor: pointer; display: inline-block; }
.ver-contacto summary::-webkit-details-marker { display: none; }
.ver-contacto form { display: grid; gap: 6px; min-width: 220px; }
.contacto-visto { border-left: 5px solid var(--primario); }

/* ---------- Patrocinios ---------- */
.patrocinadores-evento { background: #fff; border-radius: 16px; padding: 18px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.donativo { border-left: 4px solid var(--primario); }
.evidencias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.evidencias-grid figure { margin: 0; background: #f6f8fc; border-radius: 10px; padding: 6px; font-size: .8rem; }
.evidencias-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; display: block; }
.logo-patrocinador { max-height: 60px; max-width: 160px; object-fit: contain; }

/* ---------- Caja ---------- */
.tabla td.rojo, .tabla td:nth-child(4) { white-space: nowrap; }
.caja-form[open] { flex-basis: 100%; }
.checkbox-grupo input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--secundario); }
#smtp { border: 1px solid #d7deea; border-radius: 12px; padding: 12px 16px; } #smtp legend { padding: 0 6px; }
/* Credencial de coordinación (club y Red): todos los cargos, en renglones que pueden partirse */
.gafete-coordinacion { background: linear-gradient(170deg, #1d2b6b 0%, #3a2a7a 36%, #ffffff 36.2%); }
.gafete-coordinacion .gafete-foto { border-color: #f2c14e; }
.gafete-cargos { margin-top: 0.3em; display: flex; flex-direction: column; gap: 0.18em; max-width: 100%; }
.gafete-cargos div { font-size: 0.58em; line-height: 1.2; color: #1d2b6b; font-weight: 600; background: #f4f1fb;
  border-radius: 0.4em; padding: 0.15em 0.45em; overflow-wrap: anywhere; }
.gafete-coordinacion > * { flex-shrink: 0; }
.gafete-coordinacion .gafete-foto { width: 4.6em; height: 4.6em; }
.gafete-coordinacion .gafete-qr { width: 4.3em; height: 4.3em; }
.gafete-coordinacion .gafete-cargos div { font-size: 0.54em; padding: 0.12em 0.4em; }
/* Página pública del evento: portada y descripción con formato */
.portada-evento { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin: 0 0 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.descripcion-evento { font-size: 1.05rem; line-height: 1.6; margin-bottom: 16px; }
.descripcion-evento p { margin: 0 0 .7em; }
.descripcion-evento ul { margin: 0 0 .8em 1.2em; padding: 0; }
.descripcion-evento li { margin: .2em 0; }
.descripcion-evento strong { color: var(--primario, #0057c8); }