/**
* Template Name: Arsha - v4.3.0
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Sistema visual TISCOM — tokens (Fase 1: Modernización)
--------------------------------------------------------------*/
:root {
  --tiscom-navy: #37517e;
  --tiscom-blue: #47b2e4;
  --tiscom-blue-deep: #197ead;
  --tiscom-blue-deep-hover: #146185;

  /* Tonos derivados — Fase "Identidad Visual 9/10" (misma paleta, sin colores nuevos) */
  --tiscom-navy-light: #4d6a99;
  --tiscom-navy-dark: #2a3c5c;
  --tiscom-blue-soft: #eaf6fc;
  --surface-blue: #f6f9fc;

  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(20, 45, 100, 0.06);
  --shadow-md: 0 4px 20px rgba(20, 45, 100, 0.08);
  --shadow-lg: 0 8px 30px rgba(20, 45, 100, 0.14);

  /* Motion — duraciones y curva estándar consolidadas */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Patrón topológico compartido — textura de fondo casi imperceptible
     (puntos + líneas), reservada a los bloques navy (Hero, CTA, Footer). */
  --tc-topology-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05'%3E%3Ccircle cx='20' cy='24' r='2' fill='%23ffffff' fill-opacity='0.07' stroke='none'/%3E%3Ccircle cx='112' cy='54' r='2' fill='%23ffffff' fill-opacity='0.07' stroke='none'/%3E%3Ccircle cx='64' cy='118' r='2' fill='%23ffffff' fill-opacity='0.07' stroke='none'/%3E%3Cline x1='20' y1='24' x2='112' y2='54'/%3E%3Cline x1='112' y1='54' x2='64' y2='118'/%3E%3Cline x1='64' y1='118' x2='20' y2='24'/%3E%3C/g%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Firma visual TISCOM — nodo, conexión, topología, esquina
# Uso deliberadamente moderado: solo en los puntos señalados en
# cada sección, nunca como decoración repetida por defecto.
# (El nodo y el acento de esquina se implementan como pseudo-elementos
# directamente en cada sección que los usa — ver Hero/Títulos/Servicios/
# Productos/Footer — porque un pseudo-elemento no puede recibir una
# clase HTML adicional; --tc-topology-bg y .tc-connector sí se reutilizan
# como recursos compartidos reales.)
--------------------------------------------------------------*/
.tc-connector {
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--tiscom-blue);
  opacity: 0.5;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

a {
  color: var(--tiscom-blue-deep);
  text-decoration: none;
}

a:hover {
  color: var(--tiscom-navy);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tiscom-blue-deep);
  outline-offset: 2px;
}

/* Los enlaces del nivel superior del navbar están sobre fondo navy (no blanco):
   usan un outline más claro para mantener 3:1 mínimo contra ese fondo oscuro.
   En modo navbar-mobile ese mismo <ul> pasa a fondo blanco, así que se excluye
   con :not() y hereda el outline oscuro de la regla general. */
#navbar:not(.navbar-mobile) > ul > li > a:focus-visible,
.mobile-nav-toggle:focus-visible {
  outline: 2px solid #8fd4f4;
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Jost", sans-serif;
}

/*--------------------------------------------------------------
# Botones — sistema global (Fase 1: Modernización)
--------------------------------------------------------------*/
.btn-text-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--tiscom-blue-deep);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, gap 0.3s ease;
}

.btn-text-arrow:hover {
  color: var(--tiscom-navy);
  border-color: currentColor;
  gap: 10px;
}

.btn-text-arrow i {
  font-size: 14px;
  line-height: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #37517e;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #37517e;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--tiscom-blue-deep);
  width: 45px;
  height: 45px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: var(--tiscom-blue-deep-hover);
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
  /* Nunca debe quedar completamente transparente: en algunos navegadores
     móviles (notablemente iOS Safari) el listener de scroll que agrega
     .header-scrolled puede no dispararse a tiempo durante el scroll por
     inercia, dejando ver el contenido de la sección de abajo a través del
     header fijo. Este tono base evita ese "sangrado" incluso si eso pasa. */
  background: rgba(40, 58, 90, 0.75);
}

#header.header-scrolled {
  background: rgba(40, 58, 90, 0.9);
  box-shadow: inset 0 -1px 0 0 rgba(71, 178, 228, 0.35);
}

#header .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#header .logo a {
  color: #fff;
}

#header .logo img {
  max-height: 60px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar .active, .navbar .active:focus {
  box-shadow: inset 0 -2px 0 0 var(--tiscom-blue);
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #47b2e4;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: 0.3s;
  border-radius: var(--radius-sm);
  border-top: 2px solid var(--tiscom-blue-deep);
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  font-weight: 500;
  color: #0c3c53;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: var(--tiscom-blue-deep);
}

.navbar .dropdown:hover > ul,
.navbar .dropdown ul.dropdown-active {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(40, 58, 90, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #37517e;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: var(--tiscom-blue-deep);
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: var(--tiscom-blue-deep);
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  min-height: 620px;
  background: linear-gradient(160deg, var(--tiscom-navy) 0%, var(--tiscom-navy-dark) 100%);
  background-image: linear-gradient(160deg, var(--tiscom-navy) 0%, var(--tiscom-navy-dark) 100%), var(--tc-topology-bg);
  background-repeat: no-repeat, repeat;
}

#hero .container {
  padding-top: 72px;
  padding-bottom: 40px;
}

#hero .hero-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: rgba(71, 178, 228, 0.15);
  border: 1px solid rgba(71, 178, 228, 0.4);
  color: #8fd4f4;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#hero h1 {
  margin: 0 0 16px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}

#hero .hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
  font-size: 20px;
  line-height: 1.5;
}

#hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

#hero .btn-primary-tiscom {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-normal) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
  color: #fff;
  background: var(--tiscom-blue-deep);
  box-shadow: var(--shadow-sm);
}

#hero .btn-primary-tiscom:hover {
  background: var(--tiscom-blue-deep-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#hero .btn-see-services {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3px;
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

#hero .btn-see-services:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Hero — imagen con animación de flotación (CSS puro)
--------------------------------------------------------------*/
.hero-graphic {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  animation: hero-float 4s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-graphic {
    animation: none;
  }
}

@media (min-width: 1400px) {
  .hero-graphic {
    max-width: 520px;
  }
}

@media (max-width: 991px) {
  #hero {
    min-height: 520px;
    text-align: center;
  }
  #hero .hero-actions {
    justify-content: center;
  }
  #hero .hero-img {
    text-align: center;
  }
  .hero-graphic {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero .hero-subtitle {
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 24px;
  }
  .hero-graphic {
    max-width: 240px;
  }
}

@media (max-width: 575px) {
  #hero .btn-primary-tiscom,
  #hero .btn-see-services {
    font-size: 15px;
    padding: 11px 22px;
  }
}

@media (max-width: 480px) {
  .hero-graphic {
    max-width: 200px;
  }
  #hero .container {
    padding-top: 64px;
    padding-bottom: 32px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: var(--surface-blue);
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tiscom-blue-deep);
}

.section-title h2 {
  display: inline-block;
  position: relative;
  text-align: left;
  padding: 2px 0 2px 18px;
  margin: 0 0 16px 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #37517e;
}

.section-title h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--tiscom-blue);
}

/* Firma visual: el acento lateral termina en un nodo — la misma
   metáfora de "nodo + conexión" del Hero, aplicada como remate del título. */
.section-title h2::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tiscom-blue-deep);
}

.section-title p {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .section-title h2 {
    font-size: 24px;
    padding-left: 14px;
  }
  .section-title h2::before {
    width: 3px;
  }
  .section-title h2::after {
    width: 5px;
    height: 5px;
  }
}

/*--------------------------------------------------------------
# Servicios — grid de tarjetas (Fase 2: Modernización)
--------------------------------------------------------------*/
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 10px;
  counter-reset: service-count;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  max-width: 480px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  text-align: left;
  transition: transform var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
  counter-increment: service-count;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Numeración discreta 01–05: refuerza la lectura de "metodología
   estructurada" sin depender de contenido nuevo (CSS counters). */
.service-card::before {
  content: counter(service-count, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: "Jost", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: rgba(71, 178, 228, 0.14);
  line-height: 1;
  pointer-events: none;
}

.service-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(71, 178, 228, 0.4);
  background: transparent;
  transition: border-color var(--motion-normal) var(--ease-standard);
}

.service-card:hover .service-card-icon {
  border-color: var(--tiscom-blue-deep);
}

.service-card-icon i {
  font-size: 24px;
  color: var(--tiscom-blue-deep);
}

.service-card h3 {
  margin: 0 0 16px 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--tiscom-navy);
}

.service-card-points {
  margin: 0 0 6px 0;
}

.service-card-points > div + div {
  margin-top: 12px;
}

.service-card-points dt {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tiscom-blue-deep);
  margin-bottom: 3px;
}

/* Nodo de acento: marca discretamente el punto de llegada ("El resultado"
   es siempre el segundo bloque de .service-card-points). */
.service-card-points > div:last-child dt::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tiscom-blue);
  vertical-align: middle;
}

.service-card-points dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5b6572;
}

.service-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tiscom-blue-deep);
  cursor: pointer;
}

.service-toggle i {
  font-size: 12px;
  transition: transform var(--motion-normal) var(--ease-standard);
}

.service-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.service-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef1f6;
}

.service-detail[hidden] {
  display: none;
}

.service-detail dt {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tiscom-navy);
  margin-bottom: 3px;
}

.service-detail dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5b6572;
}

.services-cta {
  margin-top: 48px;
  text-align: center;
}

.services-cta p {
  margin-bottom: 18px;
  font-size: 17px;
  color: var(--tiscom-navy);
}

.services-cta .btn-primary-tiscom {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-normal) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
  color: #fff;
  background: var(--tiscom-blue-deep);
  box-shadow: var(--shadow-sm);
}

.services-cta .btn-primary-tiscom:hover {
  background: var(--tiscom-blue-deep-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (min-width: 576px) {
  .service-card {
    flex-basis: calc(50% - 14px);
    max-width: none;
  }
}

@media (min-width: 992px) {
  .service-card {
    flex-basis: calc(33.333% - 19px);
  }
}

@media (max-width: 480px) {
  .service-card {
    padding: 26px 22px;
  }
}

/*--------------------------------------------------------------
# Quiénes Somos — diferenciadores (Fase 4: Modernización)
--------------------------------------------------------------*/
.about .section-title p {
  max-width: 640px;
  margin: 0 auto;
}

.about-differentiators {
  margin-top: 44px;
  row-gap: 36px;
}

/* Opción B (conservadora): sin tarjeta blanca ni sombra — el diferenciador
   respira sobre el fondo de la sección y se distingue de Servicios por su
   icono en anillo (no relleno) y el acento lineal bajo el título. */
.about-differentiator {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 8px 20px;
  text-align: center;
  transition: transform var(--motion-normal) var(--ease-standard);
}

.about-differentiator:hover {
  transform: translateY(-2px);
}

.about-differentiator .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(71, 178, 228, 0.4);
  background: transparent;
  transition: border-color var(--motion-normal) var(--ease-standard);
}

.about-differentiator:hover .icon {
  border-color: var(--tiscom-blue-deep);
}

.about-differentiator .icon i {
  font-size: 26px;
  color: var(--tiscom-blue-deep);
}

.about-differentiator h3 {
  margin: 0 0 12px 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--tiscom-navy);
}

.about-differentiator .tc-connector {
  margin: 0 auto 12px;
}

.about-differentiator p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5b6572;
}


/*--------------------------------------------------------------
# Footer — Redes sociales
--------------------------------------------------------------*/
#footer .social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

#footer .social a {
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  background: #eff2f8;
}

#footer .social a i {
  color: #37517e;
  font-size: 20px;
}

#footer .social a:hover {
  background: var(--tiscom-blue-deep);
}

#footer .social a:hover i {
  color: #fff;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  border-radius: var(--radius-lg);
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.contact .info i {
  font-size: 20px;
  color: var(--tiscom-blue-deep);
  float: left;
  width: 44px;
  height: 44px;
  background: var(--tiscom-blue-soft);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard);
}

.contact .info h3 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #37517e;
}

.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #6182ba;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background: var(--tiscom-blue-deep);
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 30px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.contact-map {
  border: 0;
  width: 100%;
  height: 290px;
  border-radius: var(--radius-lg);
}

@media (max-width: 480px) {
  .contact-map {
    height: 320px;
  }
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form .form-group {
  margin-bottom: 20px;
}

.contact .php-email-form label {
  padding-bottom: 8px;
}

.contact .php-email-form input, .contact .php-email-form textarea {
  box-shadow: none;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: var(--tiscom-blue-deep);
  box-shadow: 0 0 0 3px rgba(25, 126, 173, 0.15);
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  background: var(--tiscom-blue-deep);
  border: 0;
  padding: 12px 34px;
  color: #fff;
  transition: 0.4s;
  border-radius: var(--radius-sm);
}

.contact .php-email-form button[type="submit"]:hover {
  background: var(--tiscom-blue-deep-hover);
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  position: relative;
  overflow: hidden;
  font-size: 14px;
  background-color: #37517e;
  background-image: var(--tc-topology-bg);
  background-repeat: repeat;
}

/* Acento superior: marca la transición desde Contacto (claro) hacia el
   Footer (navy) con la misma metáfora de nodo usada en el resto del sitio. */
#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(71, 178, 228, 0.5) 50%, transparent);
}

#footer::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tiscom-blue);
}

.footer-main {
  padding: 56px 0 32px;
}

.footer-brand p {
  margin: 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.footer-wordmark {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "Jost", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.footer-heading {
  margin: 0 0 18px 0;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tiscom-blue);
}

.footer-links,
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li + li,
.footer-contact-list li + li {
  margin-top: 10px;
}

.footer-links li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tiscom-blue);
  opacity: 0.7;
  flex-shrink: 0;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--motion-normal) var(--ease-standard);
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.footer-contact-list li i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 15px;
  color: var(--tiscom-blue);
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--motion-normal) var(--ease-standard);
}

.footer-contact-list a:hover {
  color: #fff;
}

#footer .footer-bottom {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

#footer .credits {
  font-size: 24px;
}

#footer .credits a {
  transition: 0.3s;
}

@media (max-width: 768px) {
  #footer .footer-bottom {
    padding-top: 20px;
    /* Deja espacio suficiente para que el botón flotante de WhatsApp y el
       de "volver arriba" (fijos en la esquina inferior derecha) nunca
       queden encima del texto de copyright / Aviso de Privacidad cuando
       se llega al final de la página en móvil. */
    padding-bottom: 100px;
    justify-content: center;
    text-align: center;
  }
}

.whatsapp-floating {
  position: fixed;
  bottom: 70px; /* Ajusta según necesidad */
  right: 15px; /* Alineado con el botón de scroll */
  width: 45px;
  height: 45px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1; /* Inicialmente visible */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.whatsapp-floating:hover {
  transform: scale(1.1);
  background: #1ebe57;
}

.whatsapp-floating i {
  color: #fff;
}

/* Ocultar el botón cuando se está en la parte superior de la página */
.whatsapp-floating.hidden {
  opacity: 0;
  pointer-events: none;
}

/*--------------------------------------------------------------
# Carrusel de Marcas (Swiper)
--------------------------------------------------------------*/
.brands-swiper {
  /* El bundle de Swiper vendorizado no incluye la regla base .swiper con
     overflow:hidden, así que el riel de slides (incluidos los clones del
     loop) queda visible más allá de los bordes previstos. Se corrige aquí
     en vez de tocar el archivo de la librería. */
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid rgba(71, 178, 228, 0.15);
  border-bottom: 1px solid rgba(71, 178, 228, 0.15);
}

.brands-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 8px 12px;
}

.brands-swiper .swiper-slide img {
  max-width: 140px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--motion-normal) var(--ease-standard), opacity var(--motion-normal) var(--ease-standard);
}

.brands-swiper .swiper-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/*--------------------------------------------------------------
# CTA General — franja previa a Contacto (Fase 4: Modernización)
--------------------------------------------------------------*/
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--tiscom-navy);
  background-image: var(--tc-topology-bg);
  background-repeat: repeat;
  padding: 56px 0;
}

/* Firma visual: composición discreta de líneas + nodos (deriva directamente
   del Hero) en lugar del círculo decorativo genérico. */
.cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.15' stroke-width='1.5'%3E%3Cline x1='260' y1='0' x2='170' y2='90'/%3E%3Cline x1='260' y1='0' x2='230' y2='140'/%3E%3Cline x1='260' y1='0' x2='90' y2='40'/%3E%3C/g%3E%3Cg fill='%2347b2e4' fill-opacity='0.7'%3E%3Ccircle cx='170' cy='90' r='3'/%3E%3Ccircle cx='230' cy='140' r='3'/%3E%3Ccircle cx='90' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
}

.cta-band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band-text h2 {
  margin: 0 0 8px 0;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
}

.cta-band-text p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.cta-band .btn-primary-tiscom {
  flex-shrink: 0;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--tiscom-blue-deep);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--motion-normal) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
}

.cta-band .btn-primary-tiscom:hover {
  background: var(--tiscom-blue-deep-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 767.98px) {
  .cta-band-inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-band .btn-primary-tiscom {
    width: 100%;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Productos — categorías + panel de detalle (Fase 3: Modernización)
--------------------------------------------------------------*/
.products-categories-wrap {
  position: relative;
  margin-bottom: 32px;
}

.products-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.products-categories li {
  margin: 0;
}

/* Selector tipo "ficha técnica": el estado activo se marca con un borde
   inferior de acento + peso tipográfico, no solo con un relleno de color
   (evita depender únicamente del color y aleja la estética de chip/e-commerce). */
.products-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #e3e8f0;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5b6572;
  cursor: pointer;
  transition: border-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard);
}

.products-filter i {
  font-size: 16px;
  color: var(--tiscom-blue);
  transition: color var(--motion-normal) var(--ease-standard);
}

.products-filter:hover {
  border-color: #e3e8f0;
  border-bottom-color: var(--tiscom-blue);
  color: var(--tiscom-navy);
}

.products-filter.is-active {
  border-color: #e3e8f0;
  border-bottom-color: var(--tiscom-blue-deep);
  color: var(--tiscom-navy);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.products-filter.is-active i {
  color: var(--tiscom-blue-deep);
}

#products-content {
  display: flex;
  justify-content: center;
}

#product-detail {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  max-width: 960px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Acento de esquina: marca el panel como "elemento activo" del catálogo,
   la misma metáfora de nodo que en los títulos de sección. */
#product-detail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--tiscom-blue);
  border-left: 2px solid var(--tiscom-blue);
  border-top-left-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

#product-detail.is-updating {
  animation: product-fade 0.25s ease;
}

@keyframes product-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #product-detail.is-updating {
    animation: none;
  }
}

.product-detail-media {
  flex: 1 1 360px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-blue);
  box-shadow: inset 0 0 0 1px rgba(25, 126, 173, 0.08);
}

.product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Imágenes muy panorámicas (ratio > ~2:1): "cover" recortaría contenido
   real (logo de marca, dispositivos en los extremos). Se muestran completas
   con object-fit:contain sobre el mismo fondo neutro del contenedor. */
.product-detail-media.is-contain img {
  object-fit: contain;
}

.product-detail-body {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
}

.product-detail-category {
  display: inline-block;
  margin-bottom: 8px;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tiscom-blue-deep);
}

.product-detail-category::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tiscom-blue);
  vertical-align: middle;
}

.product-detail-body h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--tiscom-navy);
}

.product-detail-body p {
  margin: 0 0 22px 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5b6572;
}

.product-detail-body .btn-primary-tiscom {
  align-self: flex-start;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--tiscom-blue-deep);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--motion-normal) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
}

.product-detail-body .btn-primary-tiscom:hover {
  background: var(--tiscom-blue-deep-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Retroalimentación discreta al prellenar el formulario de contacto */
.field-highlight {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(71, 178, 228, 0.08);
  box-shadow: 0 0 0 3px rgba(71, 178, 228, 0.25);
}

@media (max-width: 767.98px) {
  .products-categories {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .products-categories::-webkit-scrollbar {
    height: 6px;
  }

  .products-categories::-webkit-scrollbar-thumb {
    background: rgba(71, 178, 228, 0.25);
    border-radius: 3px;
  }

  .products-categories li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .products-filter {
    white-space: nowrap;
  }

  .products-categories-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }

  #product-detail {
    flex-direction: column;
  }

  .product-detail-media {
    aspect-ratio: 16 / 9;
  }

  .product-detail-body {
    padding: 24px 22px;
  }
}

/*--------------------------------------------------------------
# Modal — Aviso de Privacidad
--------------------------------------------------------------*/
#modalPrivacidad .modal-header {
  background: #37517e;
  color: #fff;
}

#modalPrivacidad .modal-header .btn-close {
  filter: invert(1);
}

#modalPrivacidad .modal-body h6 {
  color: #37517e;
  font-weight: 600;
  margin-top: 1rem;
}

/*--------------------------------------------------------------
# Nuestra Infraestructura — galería
--------------------------------------------------------------*/
.infra-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
}

@media (max-width: 992px) {
  .infra-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .infra-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.infra-gallery-item {
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  background: none;
}

.infra-gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--ease-standard);
}

.infra-gallery-item:hover img,
.infra-gallery-item:focus-visible img {
  transform: scale(1.06);
}

/* Modal de galería */
.infra-modal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.infra-modal .modal-body {
  padding: 0;
  display: flex;
  justify-content: center;
}

.infra-modal img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-sm);
}

.infra-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  filter: invert(1);
  opacity: 0.9;
}