/* =========================================================
   SERVICE-DESIGN-B  ·  familia "read-only" (barra lateral)
   Capa de marca Brújula Tech sobre la plantilla read-only.
   Cambiar aquí = cambian TODAS las páginas del diseño B.
========================================================= */

/* Tipografía de marca (identidad común con la portada) */
body, input, textarea, select{font-family:'Inter',system-ui,sans-serif}
h1,h2,h3,h4,#logo a{font-family:'Sora',sans-serif;letter-spacing:-.01em}

/* Matiz de mapa (rejilla trazada + brújula) sobre el contenido claro */
#main{
  background-color:#ffffff;
  background-image:
    radial-gradient(900px 520px at 90% -4%, rgba(20,224,216,.06), transparent 60%),
    radial-gradient(820px 540px at -8% 104%, rgba(123,97,255,.06), transparent 55%),
    linear-gradient(rgba(20,40,92,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,40,92,.035) 1px, transparent 1px);
  background-size:auto, auto, 48px 48px, 48px 48px;
  background-attachment:fixed}

/* Marca / branding */
#header .image.avatar img{border-radius:14px}

/* Atribución de plantilla (condición de licencia CC BY 3.0): se mantiene en
   el documento pero muy discreta, casi imperceptible sobre el fondo claro. */
#footer .copyright li:last-child{border-left:0;font-size:.68em}
#footer .copyright li:last-child,#footer .copyright li:last-child a{color:#ececec !important}

/* Bloque de pregunta en la FAQ (mismo componente en todas las B) */
.faq-q-ro{font-weight:600;color:#3d4449;margin-top:1.6em}

/* Etiqueta "otros servicios" */
.otros-serv a{display:inline-block;margin:0 .25em .35em 0}

/* --- 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:inherit;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}

/* =========================================================
   CAPA "PORTADA" — fondo hero azul (mapa + brújula) sobre la
   barra lateral y la barra superior móvil de la plantilla
   read-only, con logo visible y menú de servicios desplegable.
========================================================= */

/* --- Barra lateral con fondo hero (azul + colores + rejilla) --- */
#header{
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    radial-gradient(680px 380px at 28% 7%, rgba(123,97,255,.42), transparent 60%),
    radial-gradient(600px 360px at 84% 20%, rgba(20,224,216,.28), transparent 55%),
    radial-gradient(560px 440px at 50% 104%, rgba(255,101,132,.20), transparent 60%),
    linear-gradient(160deg,#0a1030,#0a1440 55%,#0c1a52) !important;
  color:#cdd8ef !important;
}
#header>header,#header>nav,#header>footer{position:relative;z-index:2}
#header .bt-deco{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:300px;height:300px;max-width:86%;z-index:0;pointer-events:none;opacity:.9;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 88%);mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 88%)}
#header .bt-deco svg{width:100%;height:100%;display:block}

/* branding en la barra lateral */
#header .image.avatar img{border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 0 1px rgba(20,224,216,.28)}
#header>header h1 a{background:linear-gradient(115deg,#FFD75E,#2EE6DE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#header>header p{color:#a7b6d8 !important;font-style:normal}

/* navegación de la barra lateral sobre fondo navy */
#header>nav ul li{border-top:1px solid rgba(255,255,255,.09)}
#header>nav ul li a{color:#dbe4f7 !important;font-weight:500}
#header>nav ul li a.active{background:linear-gradient(135deg,rgba(20,224,216,.22),rgba(123,97,255,.22)) !important;color:#fff !important;box-shadow:inset 3px 0 0 #14E0D8}
#header>footer .icons li a{color:#9fb0d0 !important}
#header>footer .icons li a:hover{color:#14E0D8 !important}

/* --- Menú "Servicios" desplegable (como en la portada) --- */
.nav-sub{position:relative}
.nav-sub-toggle{width:100%;background:transparent;border:0;color:#fff;font-family:'Sora',sans-serif;font-weight:600;font-size:1em;cursor:pointer;padding:.85em 0;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.nav-sub-toggle .nav-caret{transition:transform .25s;font-size:.78em;color:#14E0D8}
.nav-sub.open .nav-sub-toggle .nav-caret{transform:rotate(180deg)}
.nav-sub-menu{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .38s ease;background:rgba(4,8,22,.5)}
.nav-sub.open .nav-sub-menu{max-height:680px}
.nav-sub-menu li{border-top:1px solid rgba(255,255,255,.06) !important}
.nav-sub-menu li a{display:flex !important;align-items:center;gap:10px;justify-content:flex-start !important;text-align:left;padding:.62em 1.3em !important;font-size:.9em !important;color:#cdd8ef !important;font-weight:500}
.nav-sub-menu li a:hover{background:rgba(20,224,216,.10);color:#fff !important}
.nav-sub-menu .nm-ic{font-size:1.05em;width:1.4em;text-align:center;flex:0 0 auto}

/* --- Barra superior móvil (portada + logo arriba izquierda) --- */
#titleBar.bt-titlebar{
  background:
    radial-gradient(420px 130px at 12% 0%, rgba(123,97,255,.5), transparent 72%),
    radial-gradient(420px 130px at 88% 100%, rgba(20,224,216,.42), transparent 72%),
    linear-gradient(120deg,#0a1030,#0a1440 60%,#0c1a52) !important;
  box-shadow:0 3px 16px rgba(5,10,35,.42)}
#titleBar.bt-titlebar .title{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;color:#fff}
#titleBar.bt-titlebar .title .tb-logo{width:28px;height:28px;border-radius:8px;box-shadow:0 0 0 1px rgba(20,224,216,.42);flex:0 0 auto}
#titleBar.bt-titlebar .title a{color:#fff !important;font-weight:700}
#titleBar .toggle:before{background:linear-gradient(135deg,#14E0D8,#7B61FF) !important}

/* =========================================================
   TÍTULOS Y CAJAS DEL CONTENIDO — más color y diseño,
   con buen contraste (también en móvil).
========================================================= */
#main h2,#main h3{color:#0b1440 !important;letter-spacing:-.015em}
#main .major h2{font-size:2.15em;line-height:1.12}
#main .major h2::after{content:"";display:block;width:88px;height:5px;margin-top:.55rem;border-radius:4px;background:linear-gradient(90deg,#14E0D8,#7B61FF 62%,#FF6584)}
#main>section h3{position:relative;display:inline-block;padding-bottom:.42rem}
#main>section h3::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:4px;border-radius:3px;background:linear-gradient(90deg,#14E0D8,#7B61FF)}
.faq-q-ro{color:#122a5e !important}

/* banner de portada (ilustración) con borde suave */
#main .image.main{box-shadow:inset 0 -60px 60px -50px rgba(10,16,48,.55)}

/* cajitas de "¿Te suena?" / "Cómo te ayudamos" con diseño */
#main ul.feature-icons{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.7em 0 0;padding:0;list-style:none}
#main ul.feature-icons li{width:auto;margin:0;background:linear-gradient(162deg,#ffffff,#eef3fd);border:1px solid #e3ebf9;border-radius:16px;box-shadow:0 12px 26px rgba(16,26,64,.07);padding:1.35em 1.25em 1.3em 4.5em;color:#33415c;vertical-align:top}
#main ul.feature-icons li strong{color:#0b1440}
#main ul.feature-icons li:before{background:linear-gradient(135deg,#14E0D8,#7B61FF) !important;box-shadow:0 8px 18px rgba(123,97,255,.32);left:1.15em;top:1.2em;width:2.4em;height:2.4em;line-height:2.4em;font-size:1.05em}

/* tarjetas de sector (ilustraciones SVG) enmarcadas */
#main .features article .image img{border-radius:16px;box-shadow:0 14px 30px rgba(16,26,64,.16);border:1px solid rgba(20,224,216,.16)}

/* botones de acción con degradado de marca */
#main .button.primary{background-image:linear-gradient(135deg,#14E0D8,#7B61FF);background-color:#7B61FF;border:0;box-shadow:0 12px 26px rgba(123,97,255,.3)}
#main .button.primary:hover{filter:brightness(1.06)}
.otros-serv a{color:#5b3fd6;font-weight:600}

@media screen and (max-width:736px){
  #main ul.feature-icons{grid-template-columns:1fr}
  #main .major h2{font-size:1.85em}
}
@media screen and (max-width:480px){
  #main .features article .image,#main .features article .inner{display:block;width:100%;padding-right:0}
  #main .features article .image{margin:0 0 1em}
}