/* ============================================================
   Grupo S&S — capa de marca sobre Vuexy
   Fuente: "Manual de normas graficas el GRUPO SYS.pdf" (el manual
   oficial, no una muestra de píxeles). Ahí se definen SOLO dos
   colores para la marca del holding — gris y un rojo — y dos
   tipografías: Boldfinger (solo para dibujar el logotipo, no para
   texto corrido) y Futura (para todo lo demás).
   Se carga DESPUÉS de core.css y de los CSS de front-page.
   ============================================================ */

/* Futura es de licencia comercial y los .ttf que había en la carpeta
   de marca vienen de un sitio de fuentes pirata (sharefonts.net) —
   no se redistribuyen. Jost es el sustituto libre estándar de Futura
   (SIL OFL, geometría casi idéntica): mismo espíritu tipográfico,
   sin problema de licencia. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

:root {
  /* ---- Paleta oficial del holding (manual, página "El color") ---- */
  --gss-rojo:      #A32431;   /* Pantone — único rojo de marca del holding */
  --gss-rojo-osc:  #821D27;   /* variante oscura, estados hover            */
  --gss-grafito:   #3A3B3D;   /* titulares (derivado del gris de marca)    */
  --gss-gris:      #58595B;   /* gris oficial del manual                   */
  --gss-gris-claro:#EDEEEF;

  /* Colores por marca del grupo — SOLO se usan dentro de la tarjeta
     de cada marca en "Nuestras marcas". El resto de la página (hero,
     nav, fondo) es exclusivamente gris/blanco/rojo del holding. */
  --gss-tk-azul:    #1F82F7;   /* Teknovate — su propio brand book (v2) */
  --gss-mm-magenta: #A31B5C;   /* MM Solutions — su manual de normas gráficas */
  --gss-blows-rojo: #EA3538;   /* Blows — su propio logo (globos/rojo)  */

  /* ---- Colores semánticos de Bootstrap alineados a la marca ---- */
  --bs-warning:     #FFB500;
  --bs-warning-rgb: 255, 181, 0;
  --bs-danger:      #A32431;
  --bs-danger-rgb:  163, 36, 49;
  --bs-success:     #00A647;
  --bs-success-rgb: 0, 166, 71;
  --bs-info:        #58595B;
  --bs-info-rgb:    88, 89, 91;

  /* ---- Tipografía ---- */
  --bs-font-sans-serif: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--gss-grafito);
}

/* ------------------------------------------------------------
   HERO — gris y blanco, un solo rojo de acento. Sin degradados
   inventados ni mezcla con el morado/violeta (eso es de Teknovate,
   no del holding).
   ------------------------------------------------------------ */
.landing-hero > img { display: none !important; }

.landing-hero {
  background: linear-gradient(180deg, #F2F2F2 0%, #F8F8F8 55%, #FFFFFF 100%);
  padding-block-start: 9rem !important;
  padding-block-end: 4.5rem !important;
}
@media (max-width: 767.98px) {
  .landing-hero { padding-block-start: 7rem !important; }
}

.landing-hero .hero-text-box { max-width: 46rem; margin-inline: auto; }

/* El template anima el titular con un degradado de "brillo" (shine)
   que en tk-web va de azul a morado a azul. Para el holding eso mezcla
   colores que el manual no define. Se anula el degradado y la
   animación: el titular queda en un solo color sólido (el rojo de
   marca, heredado de .text-primary). */
.landing-hero .hero-title {
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.gss-hero-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.gss-hero-mark img { height: 88px; width: auto; }

/* ------------------------------------------------------------
   PUENTE — franja de transición, igual patrón que tk-web
   ------------------------------------------------------------ */
.gss-bridge { background: var(--gss-gris-claro); }
.gss-bridge-lead {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gss-grafito);
}

/* ------------------------------------------------------------
   TARJETAS DE MARCA — el único lugar de la página donde aparece
   más de un color a la vez, a propósito: es un directorio de marcas,
   cada una con su identidad. El fondo de la tarjeta sigue siendo
   blanco/gris; solo el borde superior y el logo llevan el color de
   esa marca.
   ------------------------------------------------------------ */
.gss-marca-card { transition: transform .15s ease, box-shadow .15s ease; }
.gss-marca-card:hover { transform: translateY(-2px); }

.gss-marca-tk    { border-top: 4px solid var(--gss-tk-azul) !important; }
.gss-marca-mm    { border-top: 4px solid var(--gss-mm-magenta) !important; }
.gss-marca-blows { border-top: 4px solid var(--gss-blows-rojo) !important; }

.gss-marca-logo { height: 40px; width: auto; margin-bottom: 1.25rem; }
.gss-marca-logo-sm { height: 34px; width: auto; margin-bottom: 1.25rem; }

.gss-marca-badge-proof {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--gss-gris);
  margin-top: .5rem;
}
.gss-marca-badge-proof img { height: 22px; width: auto; }

.gss-marca-pendiente {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--gss-gris);
  background: var(--gss-gris-claro);
  border-radius: .375rem;
  padding: .25rem .625rem;
}

/* ------------------------------------------------------------
   QUIÉNES SOMOS
   ------------------------------------------------------------ */
.gss-quienes { background: var(--gss-gris-claro); }
.gss-quienes-cifra h3 { color: var(--gss-rojo); }

/* ------------------------------------------------------------
   FOOTER — el template lo diseñó oscuro (texto blanco sobre fondo
   morado que viene de una imagen que no usamos). Igual que en
   tk-web: el footer aquí es claro, así que se invierte el color
   del texto. Ver assets/css/teknovate.css, misma nota.
   ------------------------------------------------------------ */
.landing-footer {
  --bs-footer-text: var(--gss-grafito);
  --bs-footer-bottom-bg: var(--gss-gris-claro);
  --bs-footer-bottom-text: var(--gss-gris);
  border-top: 1px solid var(--bs-border-color);
}
.landing-footer .footer-link,
.landing-footer .footer-text { opacity: 0.85; }
.landing-footer .footer-title { opacity: 1; font-weight: 600; }
.landing-footer .footer-link:hover { color: var(--gss-rojo); opacity: 1; }

/* ------------------------------------------------------------
   CONTACTO
   ------------------------------------------------------------ */
.gss-hp { position: absolute; left: -9999px; top: -9999px; }

/* ------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------ */
.gss-wa {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.gss-wa:hover { color: #fff; filter: brightness(0.95); }