. El JS
navbar.js hacia menu.removeAttribute('hidden') al init. Si por
cualquier razon el JS no llegaba a ejecutarse (race condition,
error de script previo, CSP, cache parcial del preview), el panel
quedaba con UA [hidden] aplicado, GANANDO contra el CSS author
(porque [hidden] = display:none de specs y aunque el media query
tiene display:flex !important, ALGUNOS contextos lo respetan mal).
2) El transform: translateX(0) del .is-open NO tenia !important, asi
que era vulnerable a overrides accidentales.
3) El color de los links era muted (bajo contraste).
Fix iter. 2 (este commit):
- HTML: removido el atributo [hidden] de las 9 paginas con nav (no
depende mas del JS para visibilidad inicial)
- CSS: bloque defensivo con !important en TODOS los puntos criticos
del panel (display, position, transform, color)
- El JS de navbar.js sigue funcionando igual (toggle de clase .is-open)
*/
/* Base fuera de media: panel oculto en desktop (sin attr hidden) */
.nav-mobile {
display: none;
}
@media (max-width: 768px) {
/* Panel mobile: SIEMPRE renderizado, controlado solo por transform.
iter. 3 (fix bug device real reportado por Andres 2026-05-25):
- background hardcoded SIN var() porque algunas CSS vars no resuelven
en iOS Safari cuando el panel hace transform (stacking context propio)
- isolation: isolate fuerza stacking context propio (evita que el
backdrop con backdrop-filter:blur del design-tokens lo eclipse)
- background-color extra como fallback duro
- opaque background-color SIN transparencia para garantizar visibilidad
*/
.nav-mobile {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: min(82vw, 340px) !important;
background: #0D2137 !important;
background-color: #0D2137 !important;
border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.7) !important;
padding: 88px 20px 24px !important;
transform: translateX(100%);
transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9500 !important;
gap: 2px;
overflow-y: auto;
overflow-x: hidden;
visibility: visible !important;
opacity: 1 !important;
isolation: isolate !important;
will-change: transform;
}
/* Estado abierto: slide-in lateral (blindado con !important) */
.nav-mobile.is-open {
transform: translateX(0) !important;
}
/* Links del panel: contraste AAA + tamanio tactil >=44px + color hardcoded */
.nav-mobile a {
display: flex !important;
align-items: center;
padding: 14px 16px !important;
border-radius: 8px;
font-size: 1rem !important;
font-weight: 600 !important;
color: #F5F7FA !important;
text-decoration: none !important;
background: transparent !important;
transition: background 180ms;
min-height: 44px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-mobile a:hover,
.nav-mobile a:active,
.nav-mobile a:focus-visible {
color: #2DBFA8 !important;
background: #132D47 !important;
}
.nav-mobile a.active {
color: #2DBFA8 !important;
background: rgba(45, 191, 168, 0.10) !important;
}
/* Backdrop: blindado.
iter. 3 fix: removido backdrop-filter (creaba stacking context
conflictivo en iOS Safari que tapaba el panel). Mantener solo
overlay oscuro con opacity. isolation: isolate para que NO se
mezcle con el stacking context del panel.
*/
.nav-backdrop {
position: fixed !important;
inset: 0 !important;
background: rgba(10, 25, 41, 0.78) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 9400 !important;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
isolation: isolate !important;
}
.nav-backdrop.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Hamburger garantizado visible y clicable encima de todo */
.nav-hamburger {
display: block !important;
position: relative;
z-index: 9600 !important;
}
}
/* ─── [J] DIAGNÓSTICO EV — sección con batería animada ────────────────── */
/*
Ajuste 2026-05-25: la animacion de bateria con carga + porcentaje
estaba en el hero original (commit base da9a7fc) y fue removida en
refactor(hero) cfb5e5b. La reubicamos en una seccion dedicada al
servicio de Diagnostico EV, donde tiene mas sentido narrativo.
El JS js/hero-charge.js sigue buscando #hero-charge-anim sin cambios.
*/
.diag-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: center;
max-width: 1080px;
margin: 0 auto;
}
.diag-visual {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(127, 217, 61, 0.10), transparent 70%);
border-radius: var(--vl-radius-xl, 32px);
padding: 2rem;
min-height: 320px;
}
.diag-battery {
width: 140px;
height: 260px;
filter: drop-shadow(0 0 32px rgba(45, 191, 168, 0.35));
}
.diag-body {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.diag-body .section-title {
text-align: left;
margin: 0;
}
.diag-lead {
font-size: 1rem;
color: var(--vl-muted, #7B93B0);
line-height: 1.6;
margin: 0;
}
.diag-checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.diag-checks li {
font-size: 0.92rem;
display: flex;
gap: 0.6rem;
align-items: flex-start;
color: var(--vl-light, #F5F7FA);
}
.diag-checks li::before {
content: "✓";
color: var(--vl-success, #00D084);
font-weight: 700;
flex-shrink: 0;
}
.diag-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--vl-border, rgba(255, 255, 255, 0.09));
flex-wrap: wrap;
}
.diag-price {
font-family: var(--vl-font-mono, 'JetBrains Mono', monospace);
font-weight: 900;
font-size: 2.2rem;
color: var(--vl-warning, #FFB800);
line-height: 1;
}
.diag-ctas {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
}
.diag-ctas .btn {
min-width: 150px;
justify-content: center;
}
@media (max-width: 900px) {
.diag-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.diag-visual {
min-height: 240px;
padding: 1.5rem;
}
.diag-battery {
width: 120px;
height: 220px;
}
.diag-body .section-title {
text-align: center;
}
.diag-checks {
text-align: left;
max-width: 400px;
margin: 0 auto;
}
.diag-price-row {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.diag-ctas {
justify-content: center;
}
.diag-ctas .btn {
flex: 1;
}
}
/* ─── [K] VOLTY MASCOT — FAB prominente + tooltip + WhatsApp ─────────── */
/*
Ajuste 2026-05-25: Volty pasa de FAB discreto/inactivo a presencia
constante en todas las paginas activas (excepto legales). Tamano +
pulse + tooltip invitador + click->WhatsApp.
Estructura inyectada por js/volty.js dentro de
:
...
*/
/*
iter. 3 (ajuste pre-lanzamiento 2026-06-08):
El stack .vl-floating-stack del WhatsApp legacy quedó vacío en todas
las páginas activas (live-chat.js fue desreferenciado el 2026-05-25).
Volty es ahora el único FAB visible, así que se ancla limpio a la
esquina inferior derecha (bottom:24px right:24px) en vez del bottom:100px
que compensaba el WhatsApp FAB que ya no existe.
*/
#volty-mascot {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9000;
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 0.6rem;
pointer-events: none;
}
#volty-mascot > * {
pointer-events: auto;
}
/* T18-2 (2026-07-07): cuando #volty-mascot vive dentro de .vl-floating-stack
(coexistencia Volty + WhatsApp), el stack ya maneja el anclado fijo. El
mascot pasa a `relative` para que Volty quede abajo y el botón de
WhatsApp arriba (column-reverse). */
.vl-floating-stack #volty-mascot {
position: relative;
bottom: auto;
right: auto;
z-index: auto;
gap: 0.6rem;
}
.vl-volty-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(127, 217, 61, 0.18), rgba(27, 110, 194, 0.08));
border: 2px solid rgba(127, 217, 61, 0.45);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 32px rgba(45, 191, 168, 0.30);
cursor: pointer;
text-decoration: none;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms;
outline: none;
isolation: isolate;
}
.vl-volty-btn:hover,
.vl-volty-btn:focus-visible {
transform: translateY(-3px) scale(1.04);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.55),
0 0 48px rgba(127, 217, 61, 0.55);
}
.vl-volty-svg-host {
width: 62px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.vl-volty-svg-host svg {
width: 100%;
height: 100%;
display: block;
}
/* Pulse: anillo que se expande para llamar la atencion */
.vl-volty-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(127, 217, 61, 0.55);
pointer-events: none;
z-index: -1;
animation: vlVoltyPulse 2.4s ease-out infinite;
}
@keyframes vlVoltyPulse {
0% { transform: scale(1); opacity: 0.75; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.vl-volty-pulse { animation: none; }
}
/* Tooltip invitador */
.vl-volty-tooltip {
position: relative;
max-width: 260px;
background: var(--vl-card, #0F2640);
color: var(--vl-light, #F5F7FA);
border: 1px solid var(--vl-border, rgba(255, 255, 255, 0.12));
border-radius: 14px;
padding: 12px 36px 12px 14px;
font-size: 0.88rem;
font-weight: 500;
line-height: 1.4;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translateY(8px) scale(0.96);
transform-origin: bottom right;
transition: opacity 260ms ease, transform 260ms ease;
pointer-events: none;
}
.vl-volty-tooltip.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.vl-volty-tooltip::after {
content: "";
position: absolute;
right: 28px;
bottom: -8px;
width: 14px;
height: 14px;
background: var(--vl-card, #0F2640);
border-right: 1px solid var(--vl-border, rgba(255, 255, 255, 0.12));
border-bottom: 1px solid var(--vl-border, rgba(255, 255, 255, 0.12));
transform: rotate(45deg);
}
.vl-volty-tooltip-msg {
display: block;
}
.vl-volty-tooltip-close {
position: absolute;
top: 6px;
right: 8px;
background: transparent;
border: none;
color: var(--vl-muted, #7B93B0);
font-size: 0.85rem;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
transition: color 160ms, background 160ms;
}
.vl-volty-tooltip-close:hover {
color: var(--vl-light, #F5F7FA);
background: rgba(255, 255, 255, 0.06);
}
/* Mobile: anclado a la esquina con padding 16px (vs 24px desktop). */
@media (max-width: 768px) {
#volty-mascot {
bottom: 16px !important;
right: 16px !important;
}
.vl-volty-btn {
width: 68px;
height: 68px;
}
.vl-volty-svg-host {
width: 52px;
height: 60px;
}
.vl-volty-tooltip {
max-width: 220px;
font-size: 0.82rem;
}
}
/* Media queries mobile-first ya incluidas arriba en [H] · breakpoints 768/1024 */
/* ─── [L] CONTRASTE ACCESIBLE WCAG AA · 2026-06-08 ─────────────────── */
/*
Auditoría de contraste 2026-06-08 (sobre v6.10 en producción):
- Calculadora ahorro: valor EV/mes #1B6EC2 sobre #132D47 = 2.6 (fail)
- Calculadora labels: --vl-muted #7B93B0 sobre #132D47 = 4.39 (borderline)
- Formulario: placeholders UA #757575 sobre input semitransparente = 2.97
- Formulario: bordes rgba(255,255,255,0.09) = 1.31 (invisibles)
- Sin estilos :focus-visible globales (a11y por teclado)
Verificación ratios resultantes (texto / fondo real):
- #2DBFA8 / #132D47 = 6.12 ✓ AAA (EV/mes value, edit inline en index.html)
- #A9BDD2 / #132D47 = 7.13 ✓ AAA (label en savings-result-card)
- #A9BDD2 / #0D2137 = 7.53 ✓ AAA (label slider en savings-section)
- #9AADC2 / #182F48 = 5.95 ✓ AA (placeholder en input semitransparente sobre card)
- Borde rgba(255,255,255,0.22) sobre #0F2640 = visible (UI no-text, sin umbral 4.5)
*/
.savings-result-card .label,
.savings-label {
color: #A9BDD2;
}
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
color: #9AADC2;
opacity: 1;
}
.field input,
.field select,
.field textarea,
.form-control {
border-color: rgba(255, 255, 255, 0.22);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid #2DBFA8;
outline-offset: 2px;
}
/* Opciones de