/* =========================================================
   SERVICE-DESIGN-C  ·  familia "onix" (clara, agencia)
   Usa componentes reales de onix (section-heading, .our-services .item)
   con la identidad de marca Brújula Tech.
========================================================= */

body{font-family:'Inter',system-ui,sans-serif;color:#1e1e1e;
  background-color:#eef3fd;
  background-image:
    radial-gradient(920px 540px at 88% -6%, rgba(20,224,216,.08), transparent 60%),
    radial-gradient(820px 560px at -6% 106%, rgba(123,97,255,.08), transparent 55%),
    linear-gradient(rgba(20,40,92,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,40,92,.04) 1px, transparent 1px);
  background-size:auto, auto, 48px 48px, 48px 48px;
  background-attachment:fixed}

/* Marca de agua de brújula sobre el fondo claro (mapa trazado) */
.bt-mapwm{position:fixed;bottom:-60px;right:-40px;width:min(52vw,520px);height:min(52vw,520px);z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 82%);mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 82%)}
.bt-mapwm svg{width:100%;height:100%;display:block}
.c-nav,section,footer,.container{position:relative;z-index:1}
h1,h2,h3,h4,h5,.section-heading h2{font-family:'Sora',sans-serif;letter-spacing:-.01em}

/* --- Acento de marca sobre el coral/azul de onix --- */
/* La etiqueta de seccion venia como un texto decorativo enorme (30px, semi-
   transparente) que, con el margen negativo del h2, se solapaba con el titulo
   y parecia un fallo. La convertimos en un "eyebrow" pequeno y legible encima. */
.section-heading{display:flex;flex-direction:column-reverse;align-items:center}
.section-heading span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#08b5ae;opacity:1;margin:0 0 12px;line-height:1.3}
.our-services .section-heading h2,.section-heading h2{margin:0}
.section-heading h2 em{color:inherit;font-style:normal}
.section-heading h2 span{color:inherit}

/* --- Cabecera de marca (común a la web) --- */
.c-nav{position:sticky;top:0;z-index:200;background:rgba(8,14,41,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.c-nav .inner{max-width:1140px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.c-nav .logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Sora';font-weight:800;font-size:1.2rem}
.c-nav .logo .mk{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#14E0D8,#7B61FF);color:#fff}
.c-nav .links{display:flex;align-items:center;gap:22px}
.c-nav .links a{color:#dbe4f7;font-size:.92rem;font-weight:500}
.c-nav .links a:hover{color:#14E0D8}
.c-burger{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
@media(max-width:900px){.c-nav .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#0a1030;padding:8px 0}
  .c-nav .links.open{display:flex}.c-nav .links a{padding:13px 24px;border-bottom:1px solid rgba(255,255,255,.06)}.c-burger{display:block}}

/* --- Botones de marca --- */
.btn-brand{background:linear-gradient(135deg,#FFC63D,#FF6584);color:#3a1200;font-weight:600;border:0;border-radius:30px;padding:12px 26px;display:inline-flex;align-items:center;gap:8px;transition:.25s;text-decoration:none}
.btn-brand:hover{transform:translateY(-2px);color:#3a1200}
.btn-ghost2{border:1.5px solid #7B61FF;color:#7B61FF;background:#fff;border-radius:30px;padding:12px 26px;display:inline-flex;align-items:center;gap:8px;transition:.25s;text-decoration:none}
.btn-ghost2:hover{background:#7B61FF;color:#fff}

/* --- Hero claro con toque de marca --- */
.c-hero{padding:90px 0 64px;text-align:center;background:radial-gradient(900px 420px at 50% -10%,rgba(20,224,216,.14),transparent 60%),radial-gradient(700px 360px at 80% 10%,rgba(123,97,255,.12),transparent 60%)}
.c-hero .ey{display:inline-flex;align-items:center;gap:8px;background:rgba(20,224,216,.14);border:1px solid rgba(20,224,216,.4);color:#08b5ae;padding:7px 16px;border-radius:30px;font-size:.78rem;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
.c-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:#080E29;line-height:1.1;margin-bottom:18px}
.c-hero h1 .g{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;-webkit-text-fill-color:currentColor}
.c-hero p.lead{max-width:640px;margin:0 auto 30px;font-size:1.12rem;color:#4a5578}
.c-hero .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- Tarjeta de servicio de onix con icono FontAwesome --- */
.our-services{padding:70px 0}
.our-services .item{height:100%}
.our-services .item .icon{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#14E0D8,#7B61FF);color:#fff;font-size:1.6rem;margin:0 auto 6px}
.our-services .item h4{margin-bottom:18px}
.our-services .item{transition:transform .3s,box-shadow .3s}
.our-services .item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,20,60,.12)}
.our-services.alt{background:#fff}

/* --- Bloque "qué incluye" y "antes/después" --- */
.c-panel{background:#fff;border-radius:20px;padding:34px;box-shadow:0 14px 34px rgba(11,20,60,.07);max-width:960px;margin:0 auto}
.c-panel ul{list-style:none;padding:0;margin:0}
.c-panel li{padding:9px 0;color:#3a4468}
.c-panel li i{color:#08b5ae;margin-right:8px}
.c-ad{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:960px;margin:0 auto}
.c-ad .col{background:#fff;border-radius:18px;padding:28px;box-shadow:0 12px 30px rgba(11,20,60,.07)}
.c-ad .tag{display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:30px;margin-bottom:12px}
.c-ad .antes .tag{background:rgba(255,101,132,.14);color:#e0466b}
.c-ad .despues .tag{background:linear-gradient(135deg,#14E0D8,#7B61FF);color:#fff}
.c-ad .antes li::before{content:"✕";color:#e0466b;margin-right:9px;font-weight:700}
.c-ad .despues li::before{content:"✓";color:#0b8f7f;margin-right:9px;font-weight:800}
@media(max-width:720px){.c-ad{grid-template-columns:1fr}}

/* --- FAQ (acordeón bootstrap con marca) --- */
.c-faq{max-width:820px;margin:0 auto}
.accordion-button:not(.collapsed){color:#080E29;background:#eaf0ff;box-shadow:none}
.accordion-button:focus{box-shadow:none;border-color:rgba(123,97,255,.3)}

/* --- CTA y pie --- */
.c-cta{background:linear-gradient(160deg,#0a1030,#0c1650);color:#fff;text-align:center;padding:70px 0;border-radius:26px;max-width:1140px;margin:60px auto}
.c-cta h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px}
.c-cta p{color:#c9d4ee;max-width:520px;margin:0 auto 26px}
.c-foot{background:#080E29;color:#8a97b8;padding:40px 0;text-align:center;font-size:.85rem}
.c-foot a{color:#b9c4de}
.c-foot .fl{margin:0 .5em}

/* --- 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}

/* =========================================================
   Iconos: la plantilla onix trae Font Awesome 4, pero se usan
   nombres de FA5/6. Aquí mapeamos esos nombres a glifos de FA4
   para que no queden cuadraditos vacíos.
========================================================= */
.fa-robot:before{content:"\f17b"}
.fa-moon:before{content:"\f186"}
.fa-file-invoice:before{content:"\f0f6"}
.fa-file-lines:before{content:"\f0f6"}
.fa-receipt:before{content:"\f0f6"}
.fa-calendar-xmark:before{content:"\f133"}
.fa-calendar-check:before{content:"\f133"}
.fa-phone-volume:before{content:"\f095"}
.fa-circle-question:before{content:"\f059"}
.fa-comment-dots:before{content:"\f086"}
.fa-pizza-slice:before{content:"\f0f5"}
.fa-house-chimney:before{content:"\f015"}
.fa-cart-shopping:before{content:"\f07a"}
.fa-bag-shopping:before{content:"\f07a"}
.fa-wand-magic-sparkles:before{content:"\f0d0"}
.fa-brush:before{content:"\f1fc"}
.fa-hand-pointer:before{content:"\f0a6"}
.fa-mobile-screen:before{content:"\f10b"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-utensils:before{content:"\f0f5"}
.fa-dumbbell:before{content:"\f21e"}

/* =========================================================
   Menú "Servicios" desplegable (barra superior onix)
========================================================= */
.svc-dd{position:relative;display:inline-flex}
.svc-dd-btn{background:transparent;border:0;cursor:pointer;font:inherit;font-weight:500;color:#dbe4f7;display:inline-flex;align-items:center;gap:6px;padding:0}
.svc-dd-btn:hover{color:#14E0D8}
.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:14px;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;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}
.svc-dd-menu .nm-ic{width:1.3em;text-align:center;flex:0 0 auto}
@media(max-width:900px){
  .c-nav .svc-dd{display:block;width:100%}
  .c-nav .svc-dd-btn{width:100%;justify-content:space-between;padding:13px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
  .c-nav .svc-dd-menu{position:static;transform:none;width:100%;min-width:0;margin:0;opacity:1;visibility:hidden;max-height:0;overflow:hidden;background:rgba(4,8,22,.45);border:0;border-radius:0;box-shadow:none;padding:0;transition:max-height .3s}
  .c-nav .svc-dd.open .svc-dd-menu{visibility:visible;max-height:640px;transform:none}
  .c-nav .svc-dd-menu a{padding:12px 34px;border-bottom:1px solid rgba(255,255,255,.06)}
}