/*V 1.2 Shared Header Navigation - submenus desktop + acordeon mobile. Se carga DESPUES del CSS de pagina para poder corregir la cascada del nav sin editar los 22 CSS.*/

/* === 1. Correcciones sobre el nav existente: contenedor para el panel y sitio para los carets === */
.desktop-nav > ul > li {position:relative;}
.desktop-nav > ul {flex-wrap:nowrap;}
@media (min-width:1151px) and (max-width:1300px) {.desktop-nav > ul {gap:clamp(10px, 2.2vw, 40px);}}

/* === 2. Caret dibujado con bordes, no con Font Awesome, que se carga diferido y parpadearia === */
.nav-caret {display:inline-block; width:0; height:0; border-style:solid; border-width:5px 4px 0 4px; border-color:currentColor transparent transparent transparent; transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink:0;}

/* === 3. Desktop: cabecera del item con submenu === */
.desktop-nav .nav-has-sub {display:flex; align-items:center; gap:5px;}
.desktop-nav .nav-sub-toggle {background:none; border:none; padding:15px 2px; margin:0; cursor:pointer; color:var(--primary-black); line-height:0; display:flex; align-items:center; transition:color 0.3s;}
.desktop-nav .nav-has-sub:hover .nav-sub-toggle,
.desktop-nav .nav-has-sub.is-open .nav-sub-toggle,
.desktop-nav .nav-has-sub > a.active + .nav-sub-toggle {color:var(--color-nav-active, #209b41);}
.desktop-nav .nav-has-sub.is-open .nav-caret {transform:rotate(180deg);}
.desktop-nav .nav-sub-toggle:focus-visible {outline:3px solid var(--primary-black); outline-offset:-3px;}

/* === 4. Desktop: panel. Se pliega con max-height porque interpola siempre; el overflow:hidden propio no recorta la sombra === */
.desktop-nav .nav-sub {display:block; width:max-content; max-width:320px; min-width:240px; position:absolute; top:calc(100% + 1px); left:0; z-index:10; background-color:var(--primary-white); border-top:2px solid var(--primary-green); border-radius:0 0 6px 6px; box-shadow:0 10px 28px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06); padding:6px 0; margin:0; overflow:hidden; max-height:0; opacity:0; visibility:hidden; transition:max-height 0.18s ease-in, opacity 0.13s ease-in, visibility 0s linear 0.18s;}

/* El tope debe superar la altura del panel mas alto (Air Conditioning, 296px): subirlo si se anaden subservicios */
.desktop-nav .nav-has-sub.is-open > .nav-sub {max-height:360px; opacity:1; visibility:visible; transition:max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out, visibility 0s;}

/* Los items entran escalonados desde abajo, dentro de los 340ms del pliegue, para que sea un solo gesto */
.desktop-nav .nav-sub li {padding:0; opacity:0; transform:translateY(6px); transition:opacity 0.1s ease, transform 0.1s ease;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li {opacity:1; transform:translateY(0); transition:opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(1) {transition-delay:0.02s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(2) {transition-delay:0.04s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(3) {transition-delay:0.06s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(4) {transition-delay:0.07s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(5) {transition-delay:0.09s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(6) {transition-delay:0.10s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(7) {transition-delay:0.12s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(8) {transition-delay:0.13s;}

/* Neutraliza .desktop-nav a: sin mayusculas, sin el subrayado ::after, hover solo de color */
.desktop-nav .nav-sub a {display:block; padding:10px 18px; margin:0; font-size:14px; font-weight:600; line-height:1.35; text-transform:none; white-space:normal; color:var(--primary-black); position:static; transition:color 0.2s ease, background-color 0.2s ease;}
.desktop-nav .nav-sub a:after {display:none; content:none;}
.desktop-nav .nav-sub a:hover {color:var(--color-nav-active, #209b41); background-color:rgba(36, 229, 80, 0.08);}
.desktop-nav .nav-sub a:focus-visible {outline:3px solid var(--primary-black); outline-offset:-3px;}
.desktop-nav .nav-sub a.is-current {color:var(--color-nav-active, #209b41); background-color:rgba(36, 229, 80, 0.10); font-weight:700;}

/* Jerarquia dentro del panel: enlace al padre, separador, grupo Tesla y sus hijas indentadas */
.desktop-nav .nav-sub .nav-sub-parent {font-weight:700; text-transform:uppercase; font-size:13px;}
.desktop-nav .nav-sub .nav-sub-sep {border-bottom:1px solid var(--border-color); margin:6px 0;}
.desktop-nav .nav-sub .nav-sub-group {font-weight:700; text-transform:uppercase; font-size:13px; padding-bottom:6px;}
.desktop-nav .nav-sub .nav-sub-child {padding-left:34px; font-weight:500; position:relative;}
.desktop-nav .nav-sub .nav-sub-child:before {content:""; position:absolute; left:20px; top:50%; width:6px; height:1px; background-color:#b5b5b5; transform:translateY(-50%);}

/* === 5. Mobile: fila con el enlace a la izquierda y el toggle a la derecha, con area tactil de 52px === */
.mobile-nav .mnav-row {display:flex; align-items:center; justify-content:space-between; width:100%;}
.mobile-nav .mnav-row > a {flex:1 1 auto;}
.mobile-nav .mnav-toggle {background:none; border:none; margin:0; padding:0; cursor:pointer; color:var(--primary-white); flex:0 0 auto; width:52px; min-height:52px; display:flex; align-items:center; justify-content:center; border-left:1px solid rgba(255, 255, 255, 0.12); transition:background-color 0.2s ease, color 0.2s ease;}
.mobile-nav .mnav-toggle .nav-caret {border-width:6px 5px 0 5px;}
.mobile-nav .mnav-toggle[aria-expanded="true"] {color:var(--primary-green); background-color:rgba(255, 255, 255, 0.06);}
.mobile-nav .mnav-toggle[aria-expanded="true"] .nav-caret {transform:rotate(180deg);}
.mobile-nav .mnav-toggle:focus-visible {outline:3px solid var(--primary-green); outline-offset:-3px;}

/* Sin display:none para poder animar el pliegue; visibility saca los enlaces del orden de tabulacion al cerrar */
.mobile-nav .mnav-sub {background-color:rgba(255, 255, 255, 0.045); max-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-height 0.26s ease-out, opacity 0.14s ease-out, visibility 0s linear 0.26s;}
.mobile-nav .mnav-sub.is-open {max-height:460px; opacity:1; visibility:visible; transition:max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease-out, visibility 0s;}
.mobile-nav .mnav-sub li {border-bottom:1px solid rgba(255, 255, 255, 0.07);}
.mobile-nav .mnav-sub li:last-child {border-bottom:none;}
.mobile-nav .mnav-sub a {padding:13px 20px 13px 36px; font-size:15px; font-weight:500; text-transform:none; line-height:1.35;}
.mobile-nav .mnav-sub .mnav-sub-parent {font-weight:700; text-transform:uppercase; font-size:14px;}
.mobile-nav .mnav-sub .mnav-sub-group {font-weight:700; text-transform:uppercase; font-size:14px;}
.mobile-nav .mnav-sub .mnav-sub-child {padding-left:52px; position:relative;}
.mobile-nav .mnav-sub .mnav-sub-child:before {content:""; position:absolute; left:36px; top:50%; width:8px; height:1px; background-color:rgba(255, 255, 255, 0.35); transform:translateY(-50%);}
.mobile-nav .mnav-sub a.is-current {color:var(--primary-green); background-color:rgba(255, 255, 255, 0.09); font-weight:700;}

/* === 6. Pantallas muy estrechas: se recorta el toggle y la sangria para que quepa el texto === */
@media (max-width:360px) {.mobile-nav .mnav-toggle {width:46px;}
 .mobile-nav .mnav-sub a {padding-left:30px; font-size:14px;}
 .mobile-nav .mnav-sub .mnav-sub-child {padding-left:44px;}
 .mobile-nav .mnav-sub .mnav-sub-child:before {left:30px;}
}

/* === 7. Movimiento reducido: la animacion se ACORTA y pierde el desplazamiento, nunca se elimina === */
@media (prefers-reduced-motion: reduce) {.desktop-nav .nav-sub {transition:max-height 0.1s linear, opacity 0.1s linear, visibility 0s linear 0.1s;}
 .desktop-nav .nav-has-sub.is-open > .nav-sub {transition:max-height 0.14s linear, opacity 0.14s linear, visibility 0s;}
 .desktop-nav .nav-sub li,
 .desktop-nav .nav-has-sub.is-open > .nav-sub li {transform:none; transition:opacity 0.1s linear; transition-delay:0s;}
 .mobile-nav .mnav-sub {transition:max-height 0.1s linear, opacity 0.1s linear, visibility 0s linear 0.1s;}
 .mobile-nav .mnav-sub.is-open {transition:max-height 0.14s linear, opacity 0.14s linear, visibility 0s;}
 .nav-caret {transition:transform 0.12s linear;}
}