/* =========================================================
   SERVICE-DESIGN-A  ·  familia "nexusai" (oscura, navy)
   Capa de marca Brújula Tech sobre la plantilla nexusai.
   Cambiar aquí = cambian TODAS las páginas del diseño A.
========================================================= */

/* --- Paleta de marca (sobrescribe las variables de nexusai) --- */
:root{
  --bg:#080E29; --bg2:#0b1234; --bg3:#111a4a; --sf:#16205e;
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.16);
  --tx:#f0f4ff; --tx2:#b9c4de; --tx3:#8a97b8;
  --pur:#7B61FF; --blu:#14E0D8;
  --grad:linear-gradient(135deg,#14E0D8,#7B61FF);
}

/* --- Tipografía de marca (Sora + Inter) para dar identidad --- */
body{font-family:'Inter',system-ui,sans-serif}
h1,h2,h3,h4,h5,.stitle,.h1,.brand{font-family:'Sora',sans-serif;letter-spacing:-.02em}

/* --- Marca / branding --- */
.logo-i{background:var(--grad)}

/* --- Reveal siempre visible (no dependemos del JS de la plantilla) --- */
.rv{opacity:1 !important;transform:none !important}

/* --- Titulos de un solo color: la ultima palabra deja de ir en degradado
   y hereda el color del titulo (blanco sobre el fondo oscuro). --- */
.gt{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:inherit !important;-webkit-text-fill-color:currentColor !important}

/* --- Menú móvil --- */
#mbmenu{display:none;padding:14px 20px;background:var(--bg2);border-bottom:1px solid var(--bd)}
#mbmenu.open{display:block}

/* --- Botón dorado de marca ("Pide presupuesto") como firma --- */
.btn-brand{background:linear-gradient(135deg,#FFC63D,#FF6584);color:#3a1200;font-weight:600;border:0}
.btn-brand:hover{transform:translateY(-2px);color:#3a1200}

/* --- Selector de idioma ES/EN --- */
.langsw{display:inline-flex;border:1px solid rgba(255,255,255,.32);border-radius:30px;overflow:hidden;vertical-align:middle}
.langsw button{background:transparent;color:#dbe4f7;border:0;padding:5px 11px;font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.4}
.langsw button.on{background:linear-gradient(135deg,#14E0D8,#7B61FF);color:#fff}

/* =========================================================
   Menú "Servicios" desplegable (barra superior nexusai)
========================================================= */
.svc-dd{position:relative;display:inline-flex}
.svc-dd-btn{background:transparent;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:.95rem;color:var(--tx2);display:inline-flex;align-items:center;gap:6px;padding:8px 12px}
.svc-dd-btn:hover{color:var(--tx)}
.svc-dd-caret{font-size:.7em;transition:transform .25s;color:#14E0D8}
.svc-dd.open .svc-dd-caret{transform:rotate(180deg)}
.svc-dd-menu{position:absolute;top:100%;left:50%;margin-top:6px;transform:translateX(-50%) translateY(8px);min-width:240px;background:rgba(10,16,40,.98);backdrop-filter:blur(12px);border:1px solid rgba(20,224,216,.18);border-radius:14px;box-shadow:0 24px 48px rgba(0,0,0,.5);padding:8px;opacity:0;visibility:hidden;transition:.22s;z-index:400}
.svc-dd.open .svc-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.svc-dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#dbe4f7 !important;font-size:.9rem;font-weight:500;white-space:nowrap;text-decoration:none}
.svc-dd-menu a:hover{background:rgba(20,224,216,.12);color:#fff !important}
.svc-dd-menu .nm-ic{width:1.3em;text-align:center;flex:0 0 auto}
/* Variante en línea para el menú móvil (#mbmenu) */
.svc-dd-inline{display:block;width:100%}
.svc-dd-inline .svc-dd-btn{width:100%;justify-content:space-between;padding:8px 0}
.svc-dd-inline .svc-dd-menu{position:static;transform:none;min-width:0;width:100%;margin:0;opacity:1;visibility:hidden;max-height:0;overflow:hidden;padding:0 0 0 6px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;transition:max-height .3s ease}
.svc-dd-inline.open .svc-dd-menu{visibility:visible;max-height:640px;transform:none}
.svc-dd-inline .svc-dd-menu a{color:var(--tx2) !important}
.svc-dd-inline .svc-dd-menu a:hover{color:var(--tx) !important;background:transparent}