/* ========================================================= CECATI 106 — MEJORAS UX/UI (capa aditiva) --------------------------------------------------------- Componentes nuevos: barra de progreso de lectura, botón flotante de WhatsApp, franja de confianza y soporte de teclado para galerías. Se carga al final del . 100% REVERSIBLE: quitar este archivo + js/enhancements.js + sus etiquetas en index.html deja el sitio igual que antes. No modifica ni pisa estilos existentes. ========================================================= */ /* --------------------------------------------------------- 1. BARRA DE PROGRESO DE LECTURA --------------------------------------------------------- */ #reading-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--accent-gold), var(--primary-red)); z-index: 1500; transition: width 0.1s linear; pointer-events: none; } /* --------------------------------------------------------- 2. BOTÓN FLOTANTE DE WHATSAPP (apilado sobre el chat FAB) --------------------------------------------------------- */ #whatsapp-fab { position: fixed; left: 20px; bottom: 97px; /* apilado sobre el botón de accesibilidad (abajo-izquierda) */ width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5); z-index: 1000; text-decoration: none; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, opacity 0.25s; animation: waPop 0.45s var(--ease-spring) both; } #whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.65); } #whatsapp-fab i { font-size: 34px; line-height: 1; } #whatsapp-fab .wa-tooltip { position: absolute; left: 72px; white-space: nowrap; background: #111; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; font-family: 'Montserrat', sans-serif; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } #whatsapp-fab:hover .wa-tooltip { opacity: 1; transform: translateX(0); } @keyframes waPop { from { opacity: 0; transform: scale(0.4) translateY(20px); } to { opacity: 1; transform: none; } } /* Ocultar WhatsApp mientras el panel de accesibilidad está abierto (evita solaparse) */ body:has(.a11y-panel:not([hidden])) #whatsapp-fab { opacity: 0; pointer-events: none; transform: scale(0.6); } @media (max-width: 600px) { #whatsapp-fab { left: 15px; bottom: 80px; width: 52px; height: 52px; } #whatsapp-fab i { font-size: 28px; } #whatsapp-fab .wa-tooltip { display: none; } } @media (prefers-reduced-motion: reduce) { #whatsapp-fab { animation: none; } } /* --------------------------------------------------------- 3. FRANJA DE CONFIANZA (bajo el hero) — datos reales del sitio --------------------------------------------------------- */ .trust-band { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); } .trust-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 20px 0; } .trust-item { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 8px 18px; text-align: left; } .trust-item + .trust-item { border-left: 1px solid var(--border-soft); } .trust-item i { width: 50px; height: 50px; border-radius: 50%; background: var(--primary-tint); color: var(--primary-red); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .trust-item strong { display: block; color: var(--text-dark); font-size: 1.02rem; line-height: 1.2; } .trust-item span { color: var(--text-grey); font-size: 0.85rem; } @media (max-width: 768px) { .trust-band-grid { grid-template-columns: repeat(2, 1fr); padding: 6px 0; } .trust-item { padding: 14px 10px; } .trust-item:nth-child(odd) { border-left: none; } .trust-item:nth-child(3), .trust-item:nth-child(4) { border-top: 1px solid var(--border-soft); } .trust-item { gap: 10px; } .trust-item i { width: 40px; height: 40px; font-size: 1.15rem; } .trust-item strong { font-size: 0.92rem; } .trust-item span { font-size: 0.78rem; } } /* La franja coopera con los modos oscuro / alto contraste */ body.a11y-dark .trust-band { background: #181818; border-color: #2a2a2a; } body.a11y-dark .trust-item strong { color: #fff; } body.a11y-dark .trust-item span { color: #bbb; } body.a11y-dark .trust-item + .trust-item { border-color: #2a2a2a; } body.a11y-dark .trust-item i { background: #2a1416; color: #ff8a98; } body.a11y-contrast .trust-band { background: #000 !important; border-color: #fff; } body.a11y-contrast .trust-item strong, body.a11y-contrast .trust-item span { color: #fff !important; } body.a11y-contrast .trust-item i { color: #ff0 !important; background: transparent !important; } body.a11y-contrast .trust-item, body.a11y-contrast .trust-item + .trust-item { border-color: #fff !important; } /* --------------------------------------------------------- 4. GALERÍAS / TARJETAS ACCESIBLES POR TECLADO (js/enhancements.js marca con data-kbd los elementos que abren el lightbox) --------------------------------------------------------- */ [data-kbd="lightbox"] { cursor: pointer; } [data-kbd="lightbox"]:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 3px; } /* --------------------------------------------------------- 5. APARICIÓN SUAVE DE IMÁGENES AL CARGAR (premium) js/enhancements.js y js/redesign.js añaden .img-fade y, al cargar, .is-loaded. Si el usuario prefiere menos movimiento, se muestran de inmediato. --------------------------------------------------------- */ .img-fade { opacity: 0; transition: opacity 0.6s ease; } .img-fade.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .img-fade { opacity: 1; transition: none; } }