/* ============================================================ assets/css/styles.css Hoja de estilos personalizada — Sociedad Astronómica de Zacatecas ============================================================ CONTENIDO: 1. Variables de color y tipografía (modo claro) 2. Variables de modo oscuro 3. Base y tipografía 4. Skip link (accesibilidad) 5. Topbar 6. Navbar / Surface de navegación 7. Hero 8. Títulos de sección y acentos 9. Secciones alternadas 10. Surface cards 11. Placeholders de imagen 12. Fechas de noticias 13. Links con acento 14. Aviso / notice box 15. Footer 16. Botón scroll-to-top 17. Tarjetas de miembro (foto circular) 18. Convocatorias activas/inactivas 19. Card hover 20. Responsive ============================================================ */ /* ───────────────────────────────────────────────────────────── 1. VARIABLES DE COLOR Y TIPOGRAFÍA — MODO CLARO Para personalizar la paleta, modifica estos valores. Los colores están basados en el logo de la SAZ (azul profundo + acentos celestes). ───────────────────────────────────────────────────────────── */ :root { --bg-dark: #081226; --bg-dark-2: #0f1e3c; --surface: #ffffff; --surface-alt: #f3f6fb; --text-main: #14213d; --text-light: #e8efff; --accent: #4db6ff; --accent-2: #7dd3fc; --border-soft: #dce3ef; --font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* ───────────────────────────────────────────────────────────── 2. VARIABLES DE MODO OSCURO Bootstrap 5.3 aplica [data-bs-theme="dark"] en . Aquí sobreescribimos nuestras variables custom. ───────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { --surface: #15202b; --surface-alt: #1a2a3a; --text-main: #e0e8f5; --border-soft: #2a3a4e; } [data-bs-theme="dark"] body { background: #0d1520; color: var(--text-main); } [data-bs-theme="dark"] .topbar { background: #0f1a2a; } [data-bs-theme="dark"] .topbar-link { color: #b0c4de; } [data-bs-theme="dark"] .surface-nav { background: rgba(15, 26, 42, 0.96); } [data-bs-theme="dark"] .surface-card { background: rgba(21, 32, 43, 0.95); border-color: var(--border-soft); } [data-bs-theme="dark"] .section-alt { background: rgba(20, 30, 45, 0.9); } [data-bs-theme="dark"] .section-title { color: #e0e8f5; } [data-bs-theme="dark"] .section-alt .section-title, [data-bs-theme="dark"] .surface-card .section-title { color: #e0e8f5; } [data-bs-theme="dark"] .news-date { color: #7da7cc; } [data-bs-theme="dark"] .placeholder-image { background: linear-gradient(135deg, #1a2a3a, #15202b); border-color: #2a3a4e; color: #7da7cc; } [data-bs-theme="dark"] .link-accent { color: var(--accent); } [data-bs-theme="dark"] .notice-box { background: #1a2a3a; border-color: #2a4060; color: #b0c4de; } /* ───────────────────────────────────────────────────────────── 3. BASE Y TIPOGRAFÍA Fuente principal: Inter (Google Fonts). Para cambiar la fuente, modifique --font-family arriba y el link en base.php. ───────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-family); color: var(--text-main); background: rgba(243, 246, 251, 0.9); /* Sticky footer: el body ocupa al menos toda la pantalla */ display: flex; flex-direction: column; min-height: 100vh; } /* El main crece para empujar el footer al fondo */ #contenido-principal { flex: 1; } /* ───────────────────────────────────────────────────────────── 4. SKIP LINK (ACCESIBILIDAD) Enlace oculto que aparece al presionar Tab. ───────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 16px; background: #fff; border: 1px solid #000; padding: 0.5rem 0.75rem; z-index: 1100; } .skip-link:focus { top: 12px; } /* ───────────────────────────────────────────────────────────── 5. TOPBAR Barra superior con accesos rápidos (Quiénes somos, Suscribirse, Contacto, LavNet). ───────────────────────────────────────────────────────────── */ .topbar { background: #ffffff; } .topbar-link { color: #2c3e67; text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color 0.2s ease; } .topbar-link:hover, .topbar-link:focus-visible { color: var(--accent); } /* ───────────────────────────────────────────────────────────── 6. NAVBAR / SURFACE DE NAVEGACIÓN Barra sticky con glassmorphism (blur + transparencia). ───────────────────────────────────────────────────────────── */ .surface-nav { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); } /* ───────────────────────────────────────────────────────────── 7. HERO Sección principal con gradiente radial oscuro y texto claro. Para cambiar la imagen de fondo, agregue background-image. ───────────────────────────────────────────────────────────── */ .hero-section { color: var(--text-light); background: radial-gradient(circle at 15% 20%, rgba(24, 53, 106, 0.9), rgba(8, 18, 38, 0.9)); } /* ───────────────────────────────────────────────────────────── 8. TÍTULOS DE SECCIÓN Y ACENTOS ───────────────────────────────────────────────────────────── */ .text-accent { color: var(--accent-2); letter-spacing: 0.08em; font-weight: 600; } .section-title { font-weight: 700; color: var(--text-main); } .section-alt .section-title, .surface-card .section-title { color: #0f1e3c; } /* ───────────────────────────────────────────────────────────── 9. SECCIONES ALTERNADAS Fondo ligeramente diferente para alternar visualmente entre secciones contiguas. ───────────────────────────────────────────────────────────── */ .section-alt { background: rgba(243, 246, 251, 0.9); } /* ───────────────────────────────────────────────────────────── 10. SURFACE CARDS Tarjetas con borde suave, sombra sutil y esquinas redondeadas. Son el componente visual principal para agrupar contenido. ───────────────────────────────────────────────────────────── */ .surface-card { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border-soft); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 8px 18px rgba(5, 20, 50, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* ───────────────────────────────────────────────────────────── 11. PLACEHOLDERS DE IMAGEN Componentes visuales que indican dónde irá una imagen. Tres tamaños: hero (16:9), card (4:3), mini (3:2). ───────────────────────────────────────────────────────────── */ .placeholder-image { display: grid; place-items: center; width: 100%; border: 2px dashed #8fb3d9; border-radius: 0.75rem; color: #1f3f72; text-align: center; font-weight: 600; background: linear-gradient(135deg, #e8f3ff, #d7e8fb); padding: 0.5rem; } .placeholder-hero { aspect-ratio: 16 / 9; min-height: 220px; } .placeholder-card { aspect-ratio: 4 / 3; } .placeholder-mini { aspect-ratio: 3 / 2; } /* ───────────────────────────────────────────────────────────── 12. CAROUSEL DE ACTIVIDADES Imágenes y placeholders del carousel en páginas de actividades. ───────────────────────────────────────────────────────────── */ .actividad-carousel-img { object-fit: cover; height: 360px; } .actividad-carousel-placeholder { height: 360px; background: linear-gradient(135deg, #e8f3ff, #d7e8fb); border: 2px dashed #8fb3d9; color: #1f3f72; font-weight: 600; } @media (max-width: 576px) { .actividad-carousel-img, .actividad-carousel-placeholder { height: 220px; } } /* ───────────────────────────────────────────────────────────── 13. FECHAS DE NOTICIAS Formato compacto con color diferenciado para meta-datos. ───────────────────────────────────────────────────────────── */ .news-date { font-size: 0.85rem; color: #55729f; font-weight: 600; } /* ───────────────────────────────────────────────────────────── 14. LINKS CON ACENTO Para enlaces destacados (ver más, ver todas, etc.). ───────────────────────────────────────────────────────────── */ .link-accent { color: #0b5ed7; text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .link-accent:hover, .link-accent:focus-visible { text-decoration: underline; } [data-bs-theme="dark"] .link-accent:hover { color: var(--accent-2); } /* ───────────────────────────────────────────────────────────── 14. AVISO / NOTICE BOX Para alertas institucionales o mensajes informativos. ───────────────────────────────────────────────────────────── */ .notice-box { background: #eaf3ff; border: 1px solid #bfd7ff; color: #103668; } /* ───────────────────────────────────────────────────────────── 15. FOOTER Gradiente oscuro con texto claro. ───────────────────────────────────────────────────────────── */ footer { background: linear-gradient(180deg, var(--bg-dark-2), #09162e); color: var(--text-light); } .footer-link { color: #cfe2ff; text-decoration: none; transition: color 0.2s ease; } .footer-link:hover, .footer-link:focus-visible { color: #ffffff; text-decoration: underline; } /* ───────────────────────────────────────────────────────────── 16. BOTÓN SCROLL-TO-TOP Flotante fijo en esquina inferior derecha. ───────────────────────────────────────────────────────────── */ .scroll-top-btn { position: fixed; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 999px; display: none; z-index: 1040; } .scroll-top-btn.show { display: inline-flex; align-items: center; justify-content: center; } /* ───────────────────────────────────────────────────────────── 17. TARJETAS DE MIEMBRO (FOTO CIRCULAR) Placeholder circular para foto de perfil de miembros. Tres tamaños: estándar, grande (perfil individual), pequeño. ───────────────────────────────────────────────────────────── */ .member-photo-placeholder { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e8f3ff, #d7e8fb); border: 2px dashed #8fb3d9; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #1f3f72; } .member-photo-placeholder-lg { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, #e8f3ff, #d7e8fb); border: 3px dashed #8fb3d9; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: #1f3f72; } /*.member-photo-placeholder-sm { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #e8f3ff, #d7e8fb); border: 2px dashed #8fb3d9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem; color: #1f3f72; } [data-bs-theme="dark"] .member-photo-placeholder, [data-bs-theme="dark"] .member-photo-placeholder-lg, [data-bs-theme="dark"] .member-photo-placeholder-sm { background: linear-gradient(135deg, #1a2a3a, #15202b); border-color: #2a3a4e; color: #7da7cc; }*/ .member-photo-img-sm { width: 80px; height: 80px; border-radius: 50%; object-ratio: 1 / 1; object-fit: cover; border: 2px solid #8fb3d9; } [data-bs-theme="dark"] .member-photo-img-sm { border-color: #2a3a4e; } /* Clase para la imagen real dentro del contenedor */ .member-photo-img-lg { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; /* Evita que la foto se deforme */ border: 3px solid #8fb3d9; /* Mismo color que placeholder*/ } [data-bs-theme="dark"] .member-photo-img-lg { border-color: #2a3a4e; } /* ───────────────────────────────────────────────────────────── 18. CONVOCATORIAS ACTIVAS / INACTIVAS Estilo visual diferenciado para estado de convocatorias. ───────────────────────────────────────────────────────────── */ .convocatoria-activa { border-left: 4px solid #198754; } .convocatoria-inactiva { border-left: 4px solid #adb5bd; opacity: 0.75; } /* ───────────────────────────────────────────────────────────── 19. CARD HOVER Efecto sutil de elevación al pasar el cursor. Aplicar la clase .card-hover a cualquier .surface-card. ───────────────────────────────────────────────────────────── */ .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(5, 20, 50, 0.12); } .card-hover { cursor: pointer; } /* ───────────────────────────────────────────────────────────── 20. GALERÍA RESPONSIVE (IMAGE GRID) Grid tipo masonry con CSS columns. Se adapta automáticamente: 1 col (móvil), 2 col (tablet), 3 col (desktop). ───────────────────────────────────────────────────────────── */ .gallery-grid { columns: 3; column-gap: 1.25rem; } .gallery-grid-item { break-inside: avoid; margin-bottom: 1.25rem; } @media (max-width: 991.98px) { .gallery-grid { columns: 2; } } @media (max-width: 575.98px) { .gallery-grid { columns: 1; } } /* ───────────────────────────────────────────────────────────── 21. ACORDEÓN DE PROGRAMA (Semana de la Astronomía) Acordeón Bootstrap personalizado con la paleta SAZ. ───────────────────────────────────────────────────────────── */ .accordion-programa .accordion-item { border: 1px solid var(--border-soft); border-radius: 0.75rem !important; overflow: hidden; margin-bottom: 0.75rem; box-shadow: 0 4px 12px rgba(5, 20, 50, 0.06); } .accordion-programa .accordion-button { background: linear-gradient(135deg, #0f1e3c, #162d5a); color: var(--text-light); font-weight: 700; font-size: 1.05rem; padding: 1rem 1.25rem; border: none; box-shadow: none !important; } .accordion-programa .accordion-button:not(.collapsed) { background: linear-gradient(135deg, #0b1628, #0f1e3c); color: #fff; } .accordion-programa .accordion-button::after { filter: invert(1) brightness(2); } .accordion-programa .accordion-button .badge.bg-accent { background: var(--accent) !important; color: #081226; font-weight: 600; font-size: 0.72rem; padding: 0.3em 0.65em; vertical-align: middle; } .programa-dia-label { display: flex; align-items: center; gap: 0.25rem; } [data-bs-theme="dark"] .accordion-programa .accordion-item { border-color: #2a3a4e; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .accordion-programa .accordion-button { background: linear-gradient(135deg, #0b1628, #111f3a); } [data-bs-theme="dark"] .accordion-programa .accordion-button:not(.collapsed) { background: linear-gradient(135deg, #081220, #0d1a30); } /* ───────────────────────────────────────────────────────────── 22. TABLA DE PROGRAMA (Semana de la Astronomía) Tabla temática que combina con la paleta SAZ (azul profundo y acentos celestes). Se envuelve en una .surface-card. ───────────────────────────────────────────────────────────── */ .table-programa { --tp-head-bg: linear-gradient(135deg, #0f1e3c, #162d5a); --tp-head-color: #e8efff; --tp-day-bg: rgba(77, 182, 255, 0.08); --tp-day-color: #0f1e3c; --tp-border: #dce3ef; --tp-hover: rgba(77, 182, 255, 0.06); } .table-programa thead th { background: var(--bg-dark-2); color: var(--tp-head-color); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; border-bottom: 2px solid var(--accent); padding: 0.85rem 1rem; white-space: nowrap; } .table-programa tbody td { padding: 0.75rem 1rem; border-color: var(--tp-border); vertical-align: middle; font-size: 0.92rem; } .table-programa tbody tr:not(.table-programa-day):hover { background: var(--tp-hover); } /* Day separator rows */ .table-programa-day td { background: var(--tp-day-bg); color: var(--tp-day-color); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.6rem 1rem !important; border-bottom: 2px solid rgba(77, 182, 255, 0.25); } .table-programa-day .bi-star-fill { color: var(--accent); font-size: 0.7rem; vertical-align: middle; } /* Venue sub-header rows */ .table-programa-venue td { background: rgba(15, 30, 60, 0.04); color: #2c3e67; font-weight: 600; font-size: 0.84rem; padding: 0.45rem 1rem !important; border-bottom: 1px dashed rgba(77, 182, 255, 0.3); } .table-programa-venue .bi-pin-map { color: var(--accent); } /* Break / receso rows */ .table-programa-break td { background: rgba(255, 193, 7, 0.06); color: #7a6a2f; font-weight: 600; font-size: 0.84rem; font-style: italic; padding: 0.4rem 1rem !important; border-bottom: 1px solid rgba(255, 193, 7, 0.15); } .table-programa-break .bi-cup-hot, .table-programa-break .bi-pause-circle { color: #d4a017; } /* ── Dark mode overrides ── */ [data-bs-theme="dark"] .table-programa { --tp-day-bg: rgba(77, 182, 255, 0.06); --tp-day-color: #7dd3fc; --tp-border: #2a3a4e; --tp-hover: rgba(77, 182, 255, 0.08); } [data-bs-theme="dark"] .table-programa thead th { background: #0b1628; } [data-bs-theme="dark"] .table-programa tbody td { color: #d0ddf0; } [data-bs-theme="dark"] .table-programa-day .bi-star-fill { color: var(--accent-2); } [data-bs-theme="dark"] .table-programa-venue td { background: rgba(77, 182, 255, 0.04); color: #7da7cc; } [data-bs-theme="dark"] .table-programa-break td { background: rgba(255, 193, 7, 0.04); color: #c9b458; } [data-bs-theme="dark"] .table-programa-break .bi-cup-hot, [data-bs-theme="dark"] .table-programa-break .bi-pause-circle { color: #e0c85a; } /* ───────────────────────────────────────────────────────────── 22. RESPONSIVE Ajustes para pantallas pequeñas. ───────────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { .hero-section .display-5 { font-size: 1.8rem; } .member-photo-placeholder-lg { width: 100px; height: 100px; font-size: 2.5rem; } } /* ───────────────────────────────────────────────────────────── 23. ASTROFOTOGRAFÍA — MENÚ DE CATEGORÍAS (índice) Lista vertical con icono circular, título y flecha de acceso. ───────────────────────────────────────────────────────────── */ /* Lista contenedora */ .astro-menu-list { border-radius: 1rem; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 8px 24px rgba(5, 20, 50, 0.07); } /* Cada fila de categoría */ .astro-menu-row { color: var(--text-main); transition: background 0.2s ease, transform 0.15s ease; border-color: var(--border-soft) !important; min-height: 80px; } .astro-menu-row:hover { background: rgba(77, 182, 255, 0.04) !important; transform: translateX(4px); } .astro-menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Icono circular temático */ .astro-menu-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; transition: transform 0.2s ease; } .astro-menu-row:hover .astro-menu-icon { transform: scale(1.1); } /* Badge contador de fotos */ .astro-menu-badge { font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.3em 0.75em; } /* Flecha de acceso */ .astro-menu-arrow { transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.6; } .astro-menu-row:hover .astro-menu-arrow { transform: translateX(4px); opacity: 1; } /* Modo oscuro — menú */ [data-bs-theme="dark"] .astro-menu-list { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } [data-bs-theme="dark"] .astro-menu-row:hover { background: rgba(77, 182, 255, 0.06) !important; } /* ───────────────────────────────────────────────────────────── 24. ASTROFOTOGRAFÍA — GALERÍA DINÁMICA Cuadrícula masonry, imágenes y placeholder de categoría. ───────────────────────────────────────────────────────────── */ /* Badge de categoría en encabezado de galería */ .astro-cat-badge { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } /* Imagen dentro de la tarjeta de galería */ .astro-gallery-img { display: block; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.3s ease; } .card-hover:hover .astro-gallery-img { transform: scale(1.03); } /* Placeholder cuando no hay imagen */ .astro-placeholder-img { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #0d1a2e, #0f2040); min-height: 180px; } [data-bs-theme="dark"] .astro-placeholder-img { background: linear-gradient(135deg, #08101e, #0a1628); } /* ───────────────────────────────────────────────────────────── 25. ASTROFOTOGRAFÍA — MODAL FICHA TÉCNICA Modal de pantalla completa con imagen a la izquierda y metadatos astronómicos a la derecha. ───────────────────────────────────────────────────────────── */ .astro-modal .modal-content { border: 1px solid var(--border-soft); border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } .astro-modal-header { background: var(--surface); padding: 1rem 1.5rem; } /* Imagen en el modal: cubre toda la columna izquierda */ .astro-modal-img { display: block; object-fit: cover; min-height: 300px; max-height: 70vh; } /* Placeholder cuando no hay imagen en el modal */ .astro-modal-placeholder { background: linear-gradient(135deg, #0a1628, #0d1e38); min-height: 300px; } /* Columna de la ficha técnica */ .astro-ficha { background: var(--surface-alt); overflow-y: auto; max-height: 70vh; } /* Separador de sección dentro de la ficha */ .astro-ficha-section { border-bottom: 1px solid var(--border-soft); padding-bottom: 1rem; } .astro-ficha-section:last-child { border-bottom: none; padding-bottom: 0; } /* Encabezado de grupo de metadatos */ .astro-ficha-heading { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.6rem; } /* Lista clave-valor de metadatos */ .astro-ficha-dl { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0.25rem 0.75rem; font-size: 0.875rem; } .astro-ficha-dl dt { color: var(--text-main); font-weight: 600; opacity: 0.7; align-self: start; } .astro-ficha-dl dd { color: var(--text-main); margin: 0; word-break: break-word; } /* Footer del modal con descripción */ .astro-modal-footer { background: var(--surface); border-top: 1px solid var(--border-soft); padding: 0.75rem 1.5rem; } /* Modo oscuro — modal */ [data-bs-theme="dark"] .astro-modal .modal-content { background: #111d2e; border-color: #1e3050; } [data-bs-theme="dark"] .astro-modal-header, [data-bs-theme="dark"] .astro-modal-footer { background: #0e1828; } [data-bs-theme="dark"] .astro-ficha { background: #0d1825; } [data-bs-theme="dark"] .astro-ficha-section { border-color: #1e3050; } [data-bs-theme="dark"] .astro-modal-img { filter: brightness(0.95); } /* ───────────────────────────────────────────────────────────── 26. ASTROFOTOGRAFÍA — PAGINACIÓN Paginación con estado activo usando el color de la categoría. Usa las variables CSS de Bootstrap para integrarse bien. ───────────────────────────────────────────────────────────── */ .astro-pagination .page-link { border-radius: 0.5rem !important; margin: 0 2px; border: 1px solid var(--border-soft); color: var(--text-main); font-weight: 500; transition: background 0.2s, color 0.2s, border-color 0.2s; min-width: 38px; text-align: center; } .astro-pagination .page-link:hover { background: rgba(77, 182, 255, 0.1); border-color: var(--accent); color: var(--accent); } .astro-pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--bg-dark-2), #1e3a6e); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(77, 182, 255, 0.25); } .astro-pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; } [data-bs-theme="dark"] .astro-pagination .page-link { background: #0e1828; border-color: #1e3050; color: #b0c8e8; } [data-bs-theme="dark"] .astro-pagination .page-link:hover { background: rgba(77, 182, 255, 0.12); border-color: var(--accent); color: var(--accent); } [data-bs-theme="dark"] .astro-pagination .page-item.active .page-link { background: linear-gradient(135deg, #0d1e38, #132a55); border-color: var(--accent); color: #e0f0ff; } /* ───────────────────────────────────────────────────────────── HONEYPOT ANTI-BOT Campo trampa invisible para detectar bots automáticos. No mover, no modificar, no quitar. ───────────────────────────────────────────────────────────── */ .saz-honeypot { display: none !important; position: absolute; left: -9999px; visibility: hidden; pointer-events: none; }