/* =====================================================================
   PÁGINAS DE SERVICIO (web.html, software-a-medida.html, …)
   ---------------------------------------------------------------------
   Usan la misma base que proyectos.html (galaxia.css): cielo, barras de
   sección, fases con línea de luz y botones. Aquí solo va lo propio:
   cabecera con dibujo, problemas, «qué incluye», herramientas, preguntas
   frecuentes y el resto de servicios.
   ===================================================================== */

/* ---------- Cabecera ---------- */
.sx-cab{padding:calc(118px + env(safe-area-inset-top,0px)) 0 clamp(30px,6vh,70px);}
.sx-cab .sec-bar{margin-bottom:clamp(18px,3.5vh,40px);}
.sx-cab-grid{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,80px);align-items:center;
}
.sx-volver{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(16px,3vh,28px);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);transition:color .25s ease;}
.sx-volver:hover{color:#eef3fc;}
.sx-volver .flecha{width:15px;height:15px;transition:transform .3s ease;}
.sx-volver:hover .flecha{transform:translateX(-3px);}
.sx-cab h1{margin:0;font-family:var(--f-display);font-weight:300;font-size:clamp(40px,4.9vw,84px);line-height:1;letter-spacing:-.05em;color:#f4f6fb;text-wrap:balance;}
.sx-lead{margin-top:clamp(18px,3vh,28px);color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.7;max-width:50ch;}
.sx-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(22px,4vh,36px);}
.sx-btn-sec{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13.5px;color:#eef3fc;border:1px solid rgba(214,228,255,.35);border-radius:999px;padding:14px 20px;transition:background .25s ease,color .25s ease;}
.sx-btn-sec:hover{background:#e9f0fd;color:#070910;}
.sx-btn-sec .flecha{width:15px;height:15px;}
.sx-vis{margin:0;}
.sx-vis-marco{position:relative;aspect-ratio:4/3;border:1px solid var(--panel-borde);background:rgba(7,9,15,.62);overflow:hidden;}
.sx-vis-marco::before,.sx-vis-marco::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:solid rgba(214,228,255,.7);z-index:2;}
.sx-vis-marco::before{left:-1px;top:-1px;border-width:1px 0 0 1px;}
.sx-vis-marco::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0;}
.sx-vis-marco svg{display:block;width:100%;height:100%;}
.sx-vis-pie{display:flex;justify-content:space-between;gap:16px;padding:12px 2px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d2d9e6;}
.sx-vis-pie span:last-child{color:var(--texto-3);white-space:nowrap;}

/* ---------- Secciones ---------- */
.sx-sec{padding:clamp(56px,10vh,120px) 0 0;}
.sx-in{max-width:var(--ancho);margin:0 auto;padding:clamp(16px,3vh,30px) var(--gutter) 0;}
.sx-h2{margin:0 0 clamp(22px,4vh,40px);font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.4vw,52px);line-height:1.04;letter-spacing:-.045em;color:#f3f6fc;text-wrap:balance;max-width:24ch;}

/* 01 · Problemas */
.sx-probs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.sx-prob{border:1px solid var(--panel-borde);background:var(--panel);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s ease,background .3s ease;}
.sx-prob:hover{border-color:var(--panel-borde-f);background:rgba(13,17,28,.8);}
.sx-prob-ico svg{display:block;width:26px;height:26px;fill:none;stroke:#ffc8b8;stroke-width:1.3;stroke-linecap:round;}
.sx-prob h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.03em;line-height:1.15;color:#f0f4fb;}
.sx-prob p{color:#a3adbf;font-size:15px;line-height:1.6;}

/* 02 · Qué incluye */
.sx-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);}
.sx-item{position:relative;scroll-margin-top:calc(100px + env(safe-area-inset-top,0px));}
.sx-item-in{
  position:relative;height:100%;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  border:1px solid var(--panel-borde);background:rgba(9,11,18,.84);padding:clamp(22px,2.4vw,30px);
  transition:border-color .4s ease,background .4s ease,box-shadow .6s ease;
}
.sx-item-in::before,.sx-item-in::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;border:solid rgba(214,228,255,.6);z-index:3;}
.sx-item-in::before{left:-1px;top:-1px;border-width:1px 0 0 1px;}
.sx-item-in::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0;}
.sx-item-n{font-size:12px;letter-spacing:.12em;color:var(--luz);}
.sx-item h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(21px,1.9vw,27px);line-height:1.1;letter-spacing:-.04em;color:#f2f5fb;}
.sx-item p{color:#aab3c4;font-size:15px;line-height:1.6;}
.sx-item:hover .sx-item-in{border-color:var(--panel-borde-f);background:rgba(12,15,25,.9);}
.sx-brillo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(170,200,255,.13),transparent 45%);}
.sx-item:hover .sx-brillo{opacity:1;}
/* Llegada desde una tarjeta de la home (web.html#tiendas…): la tarjeta se ilumina */
.sx-item:target .sx-item-in,.sx-item.destacado .sx-item-in{
  border-color:var(--luz);background:rgba(13,18,30,.94);
  box-shadow:0 0 0 1px rgba(156,192,255,.3),0 0 50px -10px rgba(156,192,255,.5);
}

/* 03 · Cómo (reutiliza .ruta y .fase de galaxia.css) */
.sx-como .ruta{margin-top:0;}

/* 04 · Herramientas */
.sx-tec-p{margin:-12px 0 20px;color:var(--ink-soft);font-size:16px;line-height:1.65;max-width:60ch;}
.sx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.sx-chips li{font-family:var(--f-mono);font-size:12.5px;border:1px solid var(--panel-borde);padding:7px 13px;color:#c6cfdd;border-radius:999px;background:rgba(9,11,18,.55);transition:border-color .3s ease,color .3s ease;}
.sx-chips li:hover{border-color:var(--panel-borde-f);color:#eef3fc;}

/* 05 · Preguntas frecuentes */
.sx-faq{max-width:980px;}
.sx-faq details{border-top:1px solid var(--trazo-suave);}
.sx-faq details:last-child{border-bottom:1px solid var(--trazo-suave);}
.sx-faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.25;color:#eef2f9;
}
.sx-faq summary::-webkit-details-marker{display:none;}
.sx-faq summary:focus-visible{outline:2px solid var(--luz);outline-offset:2px;}
.sx-mas{position:relative;flex:0 0 30px;height:30px;border:1px solid rgba(214,228,255,.3);border-radius:50%;transition:background .3s ease,border-color .3s ease;}
.sx-mas::before,.sx-mas::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#eef3fc;transition:transform .35s ease;}
.sx-mas::after{transform:rotate(90deg);}
.sx-faq details[open] .sx-mas{background:rgba(156,192,255,.14);border-color:var(--luz);}
.sx-faq details[open] .sx-mas::after{transform:rotate(0);}
.sx-faq summary:hover .sx-mas{border-color:var(--panel-borde-f);}
.sx-faq details p{padding:0 4px 24px;color:#aab3c4;font-size:15.5px;line-height:1.7;max-width:70ch;}

/* 06 · Más servicios */
.sx-otros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.sx-otros li{position:relative;z-index:0;}
.sx-otro{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;height:100%;min-height:150px;
  padding:20px 22px 22px;border:1px solid var(--panel-borde);background:rgba(9,11,18,.8);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s ease,background .4s ease,box-shadow .5s ease;
}
.sx-otro-top{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.sx-otro-n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);}
.sx-otro-t{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.08;letter-spacing:-.04em;color:#f2f5fb;}
.sx-otro:hover .cap-ir,.sx-otro:focus-visible .cap-ir{background:#e9f0fd;color:#070910;border-color:#e9f0fd;}
.sx-otro:focus-visible{outline:2px solid var(--luz);outline-offset:3px;}
@media (hover:hover){
  .sx-otros li:hover{z-index:2;}
  .sx-otro:hover{transform:scale(1.035);border-color:var(--panel-borde-f);background:rgba(11,14,23,.94);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 50px -14px rgba(156,192,255,.28);}
}

/* Llamada final */
.sx-cta-p{max-width:52ch;margin:-12px auto 30px;color:var(--ink-soft);font-size:16.5px;line-height:1.65;padding:0 var(--gutter);}

/* ---------- Pantallas más pequeñas ---------- */
@media (max-width:1000px){
  .sx-cab-grid{grid-template-columns:minmax(0,1fr);}
  .sx-vis{max-width:640px;}
  .sx-items,.sx-otros{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  .sx-probs,.sx-items{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:520px){
  .sx-otros{grid-template-columns:minmax(0,1fr);}
  .sx-otro{min-height:0;gap:18px;}
}
@media (prefers-reduced-motion:reduce){
  .sx-otro,.sx-mas::before,.sx-mas::after{transition:none;}
}

/* La línea de pasos se alinea a la izquierda como el resto de bloques */
.sx-como .ruta{max-width:var(--ancho);}
.sx-como .fase-c{max-width:880px;}

/* ---------- Páginas de grupo (presencia-digital.html, servicios-y-sistemas.html) ----------
   Reutilizan las tarjetas de la home (.cap en galaxia.css): seis por página, que caben
   en una pantalla al 100 % y se amplían al pasar el ratón. */
.hub-cab{padding:calc(100px + env(safe-area-inset-top,0px)) 0 clamp(16px,2.6vh,30px);}
.hub-cab .sec-bar{margin-bottom:clamp(10px,2vh,22px);}
.hub-cab .sx-volver{display:flex;width:max-content;margin-bottom:clamp(8px,1.4vh,14px);}
.hub-cab h1{font-size:clamp(38px,4.4vw,74px);}
.hub-cab p{font-size:clamp(15px,1.1vw,17px);line-height:1.6;}
.hub-tarjetas{--cap-h:clamp(200px,calc((100svh - 330px) / 2),330px);max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);}
.hub-otro{margin-top:clamp(16px,3vh,30px);}
@media (max-width:1000px){.hub-tarjetas{--cap-h:240px;}}
@media (max-width:600px){.hub-tarjetas{--cap-h:clamp(176px,52vw,210px);}}