/* ============================================================ ux.css — CC&A StratEx · Etapa 2: UX / Conversión Archivo nuevo. Agregar en el de TODAS las páginas: (después de accessibility.css) ============================================================ */ /* ── BARRA DE PROGRESO DE LECTURA ────────────────────────────── Línea dorada fija en la parte superior que crece al scrollear */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #c8953a, #e8b96a); z-index: 10000; transition: width .08s linear; pointer-events: none; } /* ── BOTÓN VOLVER ARRIBA ─────────────────────────────────────── Aparece al bajar 500px, flotante sobre el WhatsApp */ .back-to-top { position: fixed; bottom: 5.75rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; background: #162135; border: 1px solid rgba(200,149,58,.25); color: #c8953a; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s, background .2s, color .2s; z-index: 997; line-height: 1; } .back-to-top.visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: #c8953a; color: #000; border-color: #c8953a; transform: translateY(-3px); } /* ── BREADCRUMBS ─────────────────────────────────────────────── Ruta de navegación generada automáticamente por ux.js en todas las páginas internas */ .breadcrumb-nav { padding: .65rem 2rem; position: relative; z-index: 1; } .breadcrumb { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; max-width: 1160px; margin: 0 auto; font-size: .78rem; } .breadcrumb-item { display: flex; align-items: center; gap: .35rem; color: #8a95a8; } .breadcrumb-item + .breadcrumb-item::before { content: '›'; font-size: .85rem; color: #3d4860; } .breadcrumb-item a { color: #c8953a; text-decoration: none; transition: opacity .2s; } .breadcrumb-item a:hover { opacity: .75; text-decoration: underline; text-underline-offset: 3px; } .breadcrumb-item.bc-active { color: #f0ece4; font-weight: 600; } /* ── CONTADORES ANIMADOS ─────────────────────────────────────── Pulso sutil cuando el número termina de contar */ @keyframes cntPulse { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } } .counter-done { animation: cntPulse .45s ease; } /* ── CTA HERO: PULSO DE ATENCIÓN ─────────────────────────────── Anillo de luz en el botón principal del hero para llamar la atención del visitante. Se detiene al hacer hover. */ @keyframes ctaRing { 0%,100% { box-shadow: 0 0 0 0 rgba(200,149,58,.45); } 60% { box-shadow: 0 0 0 12px rgba(200,149,58,0); } } .hero-actions .btn-primary, .page-hero-grid .btn-primary, .cta-band .btn-primary { animation: ctaRing 3.5s ease infinite 2.5s; } .hero-actions .btn-primary:hover, .page-hero-grid .btn-primary:hover, .cta-band .btn-primary:hover { animation: none; } /* ── NÚMEROS/STATS: HOVER MICRO-ANIMACIÓN ────────────────────── Los números grandes se elevan levemente al pasar el cursor */ .intro-metric-card strong, .commitment-card strong, .metric-card-primary strong, .experience-mini-stat strong { display: inline-block; transition: transform .2s ease; } .intro-metric-card:hover strong, .commitment-card:hover strong, .metric-card-primary:hover strong, .experience-mini-stat:hover strong { transform: translateY(-3px) scale(1.04); } /* ── INDICADOR DE PROGRESO DE FORMULARIO ─────────────────────── Barra de progreso en los formularios de diagnóstico */ .form-progress { display: flex; gap: 6px; margin-bottom: 1.5rem; align-items: center; } .form-progress-step { flex: 1; height: 3px; background: rgba(200,149,58,.15); border-radius: 3px; transition: background .35s ease; } .form-progress-step.fp-active { background: #c8953a; } /* ── LINK ACTIVO EN NAV SEGÚN SECCIÓN VISIBLE ────────────────── Resalta el ítem de nav que corresponde a la sección actualmente visible al scrollear en index.html */ .site-nav a.nav-section-active { color: #f0ece4 !important; background: rgba(255,255,255,.06); border-radius: 6px; } /* ── FAST-SERVICE CARD: BADGE DESTACADO ──────────────────────── Añade un badge "30 días" visible sobre las cards de servicio */ .fast-service-card { position: relative; } /* ── RESPONSIVE ────────────────────────────────────────────────*/ @media (max-width: 768px) { .back-to-top { bottom: 5rem; right: 1.1rem; width: 36px; height: 36px; font-size: .9rem; } .breadcrumb-nav { padding: .55rem 1rem; } }