/* =====================================================================
 * SPS · Capa visual compartida
 * Se carga en todas las páginas, después de Tailwind.
 * Contiene: tokens, fondo institucional, hero estático, componentes
 * comunes y reglas de accesibilidad.
 * ===================================================================== */

:root {
  --sps-abyss: #0b1b2e;
  --sps-deep: #0e2340;
  --sps-navy: #14294a;
  --sps-teal: #1f6f92;
  --sps-teal-soft: #3e93b5;
  --sps-copper: #c0703c;
  --sps-copper-soft: #db9257;
  --sps-surface: #f4f7fa;
  --sps-paper: #ffffff;
  --sps-text: #16202e;
  --sps-muted: #5b6b80;
  --sps-line: #dde5ee;
  --sps-radius: 20px;
  --sps-shadow: 0 18px 45px -22px rgba(11, 27, 46, 0.45);
}

html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------
   Fondo institucional: malla geométrica ESTÁTICA que recuerda las
   cuatro aspas del logotipo. Sin animación, sin cambio de color.
   --------------------------------------------------------------- */
.sps-bg {
  background-color: var(--sps-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231F6F92' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M70 22 L106 44 L106 88 L70 110 L34 88 L34 44 Z'/%3E%3Cpath d='M70 46 L88 57 L88 79 L70 90 L52 79 L52 57 Z'/%3E%3C/g%3E%3Ccircle cx='70' cy='68' r='2.4' fill='%23C0703C' fill-opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(circle at 12% 0%, rgba(31, 111, 146, 0.07), transparent 46%),
    radial-gradient(circle at 92% 30%, rgba(192, 112, 60, 0.05), transparent 42%);
  background-position: center top;
}

/* ---------------------------------------------------------------
   HERO ESTÁTICO
   Un solo degradado fijo en los tonos del logo (marino → petróleo).
   No cambia de color, no se mueve, no distrae.
   --------------------------------------------------------------- */
.sps-hero-static {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(155deg, #0b1b2e 0%, #10294a 42%, #17456180 72%, #1a4f6e 100%),
    #0b1b2e;
}

/* Trama fina de la marca sobre el hero, muy tenue */
.sps-hero-static::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M90 18 L136 46 L136 102 L90 130 L44 102 L44 46 Z'/%3E%3Cpath d='M0 90 L44 74 M180 90 L136 106'/%3E%3C/g%3E%3C/svg%3E");
}

/* Velo inferior para que el contenido siguiente entre sin corte brusco */
.sps-hero-static::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 27, 46, 0), rgba(11, 27, 46, 0.55));
}

/* Hilo de cobre: el único acento cálido del hero */
.sps-copper-rule {
  height: 2px;
  width: 84px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sps-copper), var(--sps-copper-soft));
}

/* ---------------------------------------------------------------
   Tipografía de apoyo
   --------------------------------------------------------------- */
.sps-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sps-copper-soft);
}

.sps-display {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
}

/* ---------------------------------------------------------------
   Componentes comunes
   --------------------------------------------------------------- */
.sps-panel {
  background: var(--sps-paper);
  border: 1px solid var(--sps-line);
  border-radius: var(--sps-radius);
  box-shadow: var(--sps-shadow);
}

.sps-glass {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.sps-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d7e6ef;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Botón lateral de contacto (sustituye al naranja parpadeante) */
.sps-contact-tab {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.sps-contact-tab:hover { box-shadow: 0 14px 34px -14px rgba(11, 27, 46, 0.7); }

/* Utilidades heredadas del sitio anterior */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.slide-in { transform: translateX(100%); transition: transform 0.3s ease; }
.slide-in.open { transform: translateX(0); }
.overlay { display: none; background: rgba(11, 27, 46, 0.55); position: fixed; inset: 0; z-index: 40; }
.overlay.show { display: block; }
.glass-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------
   Accesibilidad
   --------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid rgba(62, 147, 181, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
   Marca sobre fondos oscuros
   El logotipo original tiene fondo gris claro opaco, así que sobre
   azul marino se vería como un recuadro. Sobre fondo oscuro usamos
   la versión transparente convertida a silueta blanca; a todo color
   se muestra una sola vez, sobre una placa clara, en el hero.
   --------------------------------------------------------------- */
/* El logotipo va recortado y a todo color. En el hero se apoya en un
   halo suave que lo separa del fondo sin encerrarlo en una caja. */
.sps-mark-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.sps-mark-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(62, 147, 181, 0.30), transparent 62%),
    radial-gradient(circle at 62% 62%, rgba(192, 112, 60, 0.18), transparent 58%);
  filter: blur(14px);
}

.sps-mark-hero::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
}