/* ============================================================================
 *  assets/css/altares.css — Altares de cultos (nov. 2026)
 *  El altar se dibuja sobre un lienzo de 1000 × 780 px que se escala con --k
 *  (assets/js/altares.js) para que quepa en cualquier pantalla. En el móvil no
 *  baja de 0,62: el altar se desplaza de lado y además hay un selector de huecos.
 *  Colores de Velario: fondo #000, tarjetas #120b19 / #1b1124, bordes #2c2038,
 *  texto #f3eefa, dorado #f6d55c, crema #fff4d6, botón #54006a.
 * ========================================================================== */

.al { color: #f3eefa; margin: 10px 0 30px; }
.al a { color: #f6d55c; }
.al a:hover, .al a:focus-visible { color: #fff4d6; }
.al-aviso-previa { background: #3a2a05; border: 1px solid #f6d55c; color: #fff4d6; padding: 10px 14px; border-radius: 12px; margin: 0 0 14px; }
.al-migas { font-size: .9rem; margin: 0 0 12px; color: #b7aec4; }
.al-migas a { color: #d6cde3; }
.al-cab { text-align: center; margin: 4px auto 18px; max-width: 820px; }
.al-ante { margin: 0 0 4px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f6d55c; }
.al-h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: #fff4d6; }
.al-sub { margin: 8px 0 0; color: #d6cde3; font-size: 1.02rem; line-height: 1.55; }
.al-fechas { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.al-pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #1b1124; border: 1px solid #2c2038; color: #d6cde3; font-size: .88rem; }
.al-pastilla--oro { background: #f6d55c; border-color: #f6d55c; color: #120b19; font-weight: 700; }
.al-pastilla--verde { background: #173d27; border-color: #2e9a5a; color: #c9f2d8; }

/* ---------------------------------------------------------------- escenario */
.al-escena-marco { width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 20px; border: 1px solid #2c2038; background: #000; scrollbar-color: #5a4a6e #000; }
.al-escena { --k: 1; position: relative; width: calc(1000px * var(--k)); height: calc(780px * var(--k)); margin: 0 auto; }
.al-lienzo { position: absolute; left: 0; top: 0; width: 1000px; height: 780px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; background: #0b0507; }

/* Fondos */
.al-arco { position: absolute; left: 70px; top: 14px; width: 860px; height: 766px; box-sizing: border-box; border: 12px solid #8a6a2b; border-bottom: 0; border-radius: 430px 430px 0 0; background: #2a0a10; box-shadow: inset 0 0 0 8px #3d1018, inset 0 0 0 10px #6b5020, inset 0 40px 120px rgba(0, 0, 0, .55); }
.al-pilar { position: absolute; top: 300px; width: 26px; height: 470px; background: #6b5020; border-radius: 3px; box-shadow: inset 0 0 0 2px #8a6a2b, inset 8px 0 0 rgba(255, 244, 214, .08); }
.al-pilar--izq { left: 118px; }
.al-pilar--der { right: 118px; }
.al-remate { position: absolute; left: 470px; top: 0; width: 60px; height: 44px; border-radius: 30px 30px 6px 6px; background: #8a6a2b; box-shadow: inset 0 0 0 3px #6b5020; }
.al-remate::after { content: ''; position: absolute; left: 27px; top: -16px; width: 6px; height: 22px; background: #8a6a2b; box-shadow: -7px 7px 0 -1px #8a6a2b, 7px 7px 0 -1px #8a6a2b; }
.al-cortina { position: absolute; top: 0; width: 170px; height: 780px; background: #4a0d17; background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 10px, rgba(255, 255, 255, .03) 10px 22px, rgba(0, 0, 0, 0) 22px 34px); }
.al-cortina--izq { left: 0; border-radius: 0 0 90px 0; }
.al-cortina--der { right: 0; border-radius: 0 0 0 90px; }
.al-dosel { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: #5a1220; border-bottom: 6px solid #8a6a2b; }
.al-estrellas { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff4d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 47% 10%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 66% 30%, #fff4d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 82% 14%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 91% 48%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 8% 60%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 37% 24%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 74% 54%, #fff4d6 50%, transparent 51%); opacity: .8; }

.al-fondo--capilla { background: #0d0c0b; }
.al-fondo--capilla .al-arco { border-color: #7c7062; background: #2b2622; box-shadow: inset 0 0 0 8px #36302a, inset 0 0 0 10px #5d544a, inset 0 40px 120px rgba(0, 0, 0, .5); }
.al-fondo--capilla .al-pilar, .al-fondo--capilla .al-remate, .al-fondo--capilla .al-remate::after { background: #5d544a; box-shadow: inset 0 0 0 2px #7c7062; }
.al-fondo--gloria { background: #050913; }
.al-fondo--gloria .al-arco { border-color: #c9a64a; background: #13284d; box-shadow: inset 0 0 0 8px #0f2140, inset 0 0 0 10px #c9a64a, inset 0 40px 120px rgba(0, 0, 0, .35); }
.al-fondo--gloria .al-pilar { background: #b08f3a; box-shadow: inset 0 0 0 2px #c9a64a; }
.al-fondo--pasion { background: #07040b; }
.al-fondo--pasion .al-arco { background: #2c1240; box-shadow: inset 0 0 0 8px #24103a, inset 0 0 0 10px #6b5020, inset 0 40px 120px rgba(0, 0, 0, .5); }
.al-fondo--noche { background: #04060f; }
.al-fondo--terciopelo { background: #1a0509; }
.al-fondo--imagen { background-color: #000; background-size: cover; background-position: center; }
.al-fondo--imagen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 100%); }

/* Marco del titular */
.al-marco { position: absolute; left: 365px; top: 70px; width: 270px; height: 390px; margin: 0; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; }
.al-marco--hornacina { border: 3px solid rgba(246, 213, 92, .55); border-radius: 135px 135px 10px 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 40px rgba(0, 0, 0, .55); }
.al-marco--ovalado { border: 3px solid rgba(246, 213, 92, .55); border-radius: 50%; background: rgba(0, 0, 0, .28); }
.al-marco--rectangular { border: 3px solid rgba(246, 213, 92, .55); border-radius: 10px; background: rgba(0, 0, 0, .28); }
.al-marco img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.al-marco--ovalado img, .al-marco--hornacina img { border-radius: inherit; }
.al-marco-vacio { width: 120px; height: 170px; margin: auto; color: #f6d55c; opacity: .55; }

/* Candelería */
.al-candeleria { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; flex-direction: column; align-items: center; }
.al-fila { display: flex; flex-direction: column; align-items: center; margin-top: -34px; }
.al-fila:first-child { margin-top: 0; }
.al-huecos { display: flex; align-items: flex-end; }
.al-grada { height: 8px; background: #3b2a14; border-top: 2px solid #8a6a2b; }
.al-separa { flex: none; }
.al-sitio { position: relative; flex: none; width: 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.al-sitio:focus-visible { outline: 2px solid #f6d55c; outline-offset: 2px; border-radius: 6px; }
.al-cabeza { display: block; width: 13px; height: 29px; background-repeat: no-repeat; mix-blend-mode: screen; }
.al-cuerpo { display: block; width: 13px; background-repeat: no-repeat; }
.al-cuerpo--css { border-radius: 1px; background: #f1ebe0; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12); }
.al-llama-css { display: block; width: 8px; height: 16px; margin-bottom: 2px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #ffd36b; box-shadow: 0 0 10px 4px rgba(255, 186, 73, .5); }
.al-candelero { display: block; width: 22px; height: 9px; background: #c9c4d3; border-radius: 3px 3px 1px 1px; box-shadow: inset 0 -3px 0 #8f899c; }
.al-candelero--oro { background: #f6d55c; box-shadow: inset 0 -3px 0 #b8952a, 0 0 8px rgba(246, 213, 92, .6); }
.al-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-bottom: 4px; border-radius: 50%; border: 1.5px solid #f6d55c; background: #120b19; color: #f6d55c; font-size: 11px; font-weight: 700; line-height: 1; }
.al-num--punto { width: 12px; height: 12px; font-size: 0; }
.al-fantasma { display: block; width: 13px; border: 1px dashed rgba(246, 213, 92, .35); border-bottom: 0; border-radius: 2px 2px 0 0; background: rgba(255, 244, 214, .04); }
.al-libre:hover .al-num, .al-libre:focus-visible .al-num, .al-libre.al-elegido .al-num { background: #f6d55c; color: #120b19; }
.al-libre.al-elegido .al-fantasma { border-color: #f6d55c; background: rgba(246, 213, 92, .16); }
.al-cerrado .al-libre { cursor: default; }
.al-cerrado .al-libre .al-num { opacity: .35; }
.al-nueva .al-cabeza { animation: al-nueva 1.4s ease-in-out 3; }
@keyframes al-nueva { 50% { filter: brightness(1.8) drop-shadow(0 0 10px #ffd36b); } }
.al-completo .al-cabeza { filter: brightness(1.15); }

.al-mesa { position: absolute; left: 70px; right: 70px; bottom: 0; height: 70px; box-sizing: border-box; background: #b8a27a; border-top: 4px solid #8a6a2b; box-shadow: inset 0 10px 0 rgba(0, 0, 0, .18); }
.al-fondo--terciopelo .al-mesa, .al-fondo--noche .al-mesa, .al-fondo--imagen .al-mesa { left: 0; right: 0; }

@media (prefers-reduced-motion: reduce) { .al-nueva .al-cabeza { animation: none; } }

/* ---------------------------------------------------------------- panel bajo el altar */
.al-panel { margin-top: 16px; padding: 20px; border-radius: 20px; background: #120b19; border: 1px solid #2c2038; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.al-progreso { flex: 999 1 300px; min-width: 0; }
.al-progreso-cifra { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; color: #fff4d6; }
.al-progreso-cifra strong { color: #f6d55c; }
.al-barra { height: 10px; border-radius: 999px; background: #2c2038; overflow: hidden; }
.al-barra > span { display: block; height: 100%; background: #f6d55c; border-radius: 999px; }
.al-progreso-texto { margin: 8px 0 0; color: #d6cde3; font-size: .95rem; }
.al-acciones { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.al-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 0; background: #54006a; color: #fff !important; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.al-boton:hover, .al-boton:focus-visible { background: #6d0a8a; }
.al-boton:focus-visible { outline: 3px solid #f6d55c; outline-offset: 2px; }
.al-boton--oro { background: #f6d55c; color: #120b19 !important; }
.al-boton--oro:hover, .al-boton--oro:focus-visible { background: #ffe58a; }
.al-boton--claro { background: transparent; border: 1px solid #5a4a6e; color: #f3eefa !important; font-weight: 600; }
.al-boton--claro:hover, .al-boton--claro:focus-visible { background: #1b1124; }
.al-elegir-numero { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .95rem; color: #d6cde3; }
.al-elegir-numero select { min-height: 44px; border-radius: 10px; border: 1px solid #5a4a6e; background: #07050b; color: #f3eefa; padding: 0 10px; }
.al-leyenda { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; color: #b7aec4; font-size: .85rem; }
.al-leyenda li { display: flex; align-items: center; gap: 8px; }
.al-leyenda-num { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #f6d55c; color: #f6d55c; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.al-leyenda-vela { width: 8px; height: 18px; border-radius: 2px; background: #f1ebe0; }
.al-leyenda-vela--oro { box-shadow: 0 0 0 2px #f6d55c; }

/* Elegir color para el hueco y ficha de una vela encendida */
.al-elegir, .al-info, .al-mensaje { margin-top: 14px; padding: 18px 20px; border-radius: 18px; border: 1px solid #f6d55c; background: #1b1124; }
.al-info, .al-mensaje { border-color: #2c2038; }
.al-mensaje--ok { border-color: #2e9a5a; background: #10261a; }
.al-elegir-titulo { margin: 0 0 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; color: #fff4d6; }
.al-elegir-texto { margin: 0 0 14px; color: #d6cde3; }
.al-elegir-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.al-elegir-pie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.al-info { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.al-info p { margin: 0; flex: 1 1 260px; }
.al-cerrar { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: #d6cde3; font-size: 24px; line-height: 1; cursor: pointer; }
.al-cerrar:hover, .al-cerrar:focus-visible { background: #2c2038; color: #fff; }
.al-compartir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Texto bajo el altar */
.al-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin-top: 22px; }
.al-caja { padding: 22px; border-radius: 20px; background: #120b19; border: 1px solid #2c2038; }
.al-h2 { margin: 0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.4rem; color: #fff4d6; }
.al-caja p { color: #e6def0; line-height: 1.65; }
.al-oracion { font-style: italic; white-space: pre-line; }
.al-ultimas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.al-ultimas li { padding: 10px 12px; border-radius: 12px; background: #1b1124; border: 1px solid #2c2038; font-size: .92rem; }
.al-ultimas time { display: block; color: #b7aec4; font-size: .8rem; }
.al-nota { margin: 22px 0 0; color: #b7aec4; font-size: .85rem; text-align: center; }
.al-credito { color: #b7aec4; font-size: .85rem; margin: 10px 0 0; }

/* ---------------------------------------------------------------- lista de altares */
.al-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.al-tarjeta { border-radius: 20px; overflow: hidden; background: #120b19; border: 1px solid #2c2038; }
.al-tarjeta > a { display: flex; flex-direction: column; height: 100%; color: inherit !important; text-decoration: none !important; }
.al-tarjeta > a:hover .al-tarjeta-nombre, .al-tarjeta > a:focus-visible .al-tarjeta-nombre { color: #f6d55c; }
.al-tarjeta > a:focus-visible { outline: 3px solid #f6d55c; outline-offset: -3px; border-radius: 20px; }
.al-mini { position: relative; height: 210px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #2a0a10; border-bottom: 4px solid #8a6a2b; }
.al-mini img { position: relative; max-height: 190px; max-width: 70%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); }
.al-mini--capilla { background: #2b2622; border-color: #7c7062; }
.al-mini--gloria { background: #13284d; border-color: #c9a64a; }
.al-mini--pasion { background: #2c1240; }
.al-mini--noche { background: #04060f; }
.al-mini--terciopelo { background: #4a0d17; }
.al-mini--imagen { background-size: cover; background-position: center; }
.al-mini-velas { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; justify-content: space-between; padding: 0 12px; align-items: flex-end; pointer-events: none; }
.al-mini-velas span { width: 6px; background: #f1ebe0; border-radius: 1px; box-shadow: 0 -10px 0 -1px #ffd36b; }
.al-tarjeta-texto { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.al-tarjeta-nombre { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; color: #fff4d6; }
.al-tarjeta-lugar { margin: 0; color: #b7aec4; font-size: .9rem; }
.al-tarjeta-cifra { margin: 6px 0 0; font-size: .9rem; color: #d6cde3; }
.al-cta { margin-top: 26px; padding: 22px; border-radius: 20px; border: 1px dashed #5a4a6e; text-align: center; }
.al-cta p { color: #d6cde3; }
.al-vacio { color: #d6cde3; text-align: center; padding: 30px 10px; }

/* ---------------------------------------------------------------- franja de la portada y del santo */
.alf { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 26px 0 6px; padding: 22px 26px; border-radius: 20px; border: 1px solid #5a4423; background: #120b19; color: #f3eefa; }
.alf-img { flex: none; width: 74px; height: 96px; border-radius: 40px 40px 8px 8px; background: #2a0a10; border: 2px solid #8a6a2b; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.alf-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.alf-texto { flex: 1 1 22rem; min-width: 0; }
.alf-ante { margin: 0 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f6d55c; }
.alf-titulo { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #fff4d6; font-family: Georgia, 'Times New Roman', serif; }
.alf-desc { margin: 4px 0 8px; color: #d6cde3; font-size: .97rem; }
.alf .al-barra { max-width: 420px; }
@media (max-width: 575px) { .alf { padding: 18px; } .alf-img { display: none; } .alf .al-boton { width: 100%; } }

/* ---------------------------------------------------------------- formulario de solicitud */
.al-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.al-form .al-caja, .al-campo, .al-dos > * { min-width: 0; }
.al-campo input, .al-campo select, .al-campo textarea { width: 100%; box-sizing: border-box; max-width: 100%; }
.al-form .al-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.al-campo { display: flex; flex-direction: column; gap: 6px; }
.al-campo label, .al-campo legend { font-weight: 600; color: #f3eefa; }
.al-campo input[type=text], .al-campo input[type=email], .al-campo input[type=date], .al-campo select, .al-campo textarea { min-height: 44px; border-radius: 10px; border: 1px solid #5a4a6e; background: #07050b; color: #f3eefa; padding: 8px 12px; font: inherit; }
.al-campo textarea { min-height: 90px; resize: vertical; }
.al-ayuda { margin: 0; color: #b7aec4; font-size: .87rem; }
.al-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.al-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.al-opcion { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid #3d2a50; background: #1b1124; cursor: pointer; }
.al-opcion:has(input:checked) { border-color: #f6d55c; box-shadow: 0 0 0 1px #f6d55c; }
.al-opcion input { margin-top: 4px; accent-color: #f6d55c; }
.al-opcion small { display: block; color: #b7aec4; }
.al-check { display: flex; gap: 10px; align-items: flex-start; color: #e6def0; }
.al-check input { margin-top: 5px; width: 18px; height: 18px; accent-color: #f6d55c; flex: none; }
.al-errores { padding: 14px 18px; border-radius: 14px; border: 1px solid #c8323b; background: #2a0a10; color: #ffd9dc; }
.al-errores ul { margin: 6px 0 0; padding-left: 20px; }
.al-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }