/* =========================================================
   GLOBAL-TEC DESIGN SYSTEM
   Estilos compartidos: tipografía, color, tamaños y espaciado.
   Los componentes especiales conservan sus estilos propios.
   ========================================================= */
:root {
  --gt-font: 'Poppins', sans-serif;
  --gt-ink: #00232A;
  --gt-text: #17343C;
  --gt-muted: #60757B;
  --gt-cyan: #18D3DC;
  --gt-cyan-dark: #16C8D5;
  --gt-blue: #159CC5;
  --gt-deep: #155D78;
  --gt-surface: #F3FBFC;
  --gt-border: #E1EFF1;
  --gt-radius-sm: 12px;
  --gt-radius-md: 20px;
  --gt-radius-lg: 28px;
  --gt-content-width: 1160px;
  --gt-section-space: clamp(56px, 7vw, 96px);
  --gt-title-xl: clamp(36px, 4.2vw, 54px);
  --gt-title-lg: clamp(30px, 3.1vw, 40px);
  --gt-title-md: clamp(22px, 2vw, 9px);
  --gt-body: 15px;
  --gt-body-line: 1.7;
}

html { scroll-behavior: smooth; }
body { font-family: var(--gt-font); }
img { max-width: 100%; }

/* Títulos y subtítulos de secciones del Home */
.hero-heading,
.connect-world-content,
.internet-empresarial-header,
.clientes-heading {
  margin-left: auto;
  margin-right: auto;
}
.hero-heading { width: min(calc(100% - 36px), 1080px); }
.hero-heading h1 {
  font-family: var(--gt-font);
  font-size: var(--gt-title-lg);
  line-height: 1.2;
  letter-spacing: -.8px;
  font-weight: 600;
  text-wrap: balance;
  max-width: 920px;
  margin-inline: auto;
}
.hero-heading p {
  max-width: 790px;
  margin: 16px auto 0;
  font-size: var(--gt-body);
  line-height: var(--gt-body-line);
  color: var(--gt-muted);
  text-wrap: pretty;
}
.connect-world-content,
.internet-empresarial-header { width: min(calc(100% - 36px), var(--gt-content-width)); }
.connect-world-content h2,
.internet-empresarial-header h2,
.clientes-heading h2 {
  font-family: var(--gt-font);
  font-size: var(--gt-title-lg);
  line-height: 1.22;
  letter-spacing: -.8px;
  font-weight: 600;
  color: var(--gt-ink);
  text-wrap: balance;
  max-width: 980px;
  margin: 0 auto;
}
.connect-world-content h2 span,
.internet-empresarial-header h2 span,
.clientes-heading h2 span {
  display: block;
  max-width: 900px;
  margin: 10px auto 0;
  font-family: var(--gt-font);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.4;
  letter-spacing: -.25px;
  font-weight: 400;
  font-style: italic;
  color: #566982;
  text-wrap: balance;
}
.connect-world-content p,
.internet-empresarial-header p,
.clientes-heading p {
  max-width: 790px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: var(--gt-body-line);
  color: var(--gt-muted);
  text-wrap: pretty;
}
.clientes-heading { width: min(calc(100% - 36px), 1000px); }

/* Consistencia para títulos del Home en bloques de tarjetas */
.benefit-item h3,
.internet-card-content h3,
.empresa-card h3 {
  font-family: var(--gt-font);
  font-size: var(--gt-title-md);
  line-height: 1.3;
  letter-spacing: -.35px;
  font-weight: 600;
  text-wrap: balance;
}
.global-connect-left h2 {
  font-family: var(--gt-font);
  font-size: var(--gt-title-lg);
  line-height: 1.2;
  letter-spacing: -.8px;
  font-weight: 600;
  text-wrap: balance;
}
.global-connect-left p { font-size: var(--gt-body); line-height: var(--gt-body-line); }

/* Shared visual tokens for forms, cards and CTA controls */
button, input, select, textarea { font-family: var(--gt-font); }
:where(.internet-card-btn, .gc-button, .btn, .button) { font-family: var(--gt-font); }

@media (max-width: 767px) {
  :root {
    --gt-title-xl: clamp(30px, 8vw, 40px);
    --gt-title-lg: clamp(26px, 6.5vw, 32px);
    --gt-title-md: clamp(20px, 5vw, 24px);
    --gt-body: 14px;
    --gt-section-space: 48px;
  }
  .hero-heading { width: min(calc(100% - 32px), 620px); }
  .hero-heading h1 { letter-spacing: -.45px; }
  .connect-world-content,
  .internet-empresarial-header,
  .clientes-heading { width: min(calc(100% - 32px), 620px); }
  .connect-world-content h2 span,
  .internet-empresarial-header h2 span,
  .clientes-heading h2 span { font-size: clamp(18px, 4.8vw, 21px); line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}



/* Global-Tec shared animated separator: three beats, consistently across pages */
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{
  display:block !important;flex:0 0 auto !important;
  width:9px !important;height:7px !important;border-radius:20px !important;
  background:#b7e9e9 !important;opacity:.65 !important;
  animation:gt-separator-pulse 1.5s ease-in-out infinite !important;
}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){
  width:35px !important;background:#18d3dc !important;animation-delay:.18s !important;
}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){
  animation-delay:.36s !important;
}
@keyframes gt-separator-pulse{
  0%,100%{opacity:.45;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.12)}
}



/* Separador animado Global-Tec: regla final compartida para todas las páginas */
.gc-intro-rule,.gi-rule,.gi-title-rule{
 display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;
}
.gc-intro-rule span,.gi-rule i,.gi-title-rule i{
 display:block !important;flex:0 0 auto !important;width:9px !important;height:7px !important;
 min-width:9px !important;border-radius:99px !important;background:#b7e9e9 !important;
 opacity:1 !important;transform-origin:center !important;
 animation:gt-separator-active 1.25s ease-in-out infinite !important;
 animation-play-state:running !important;
}
.gc-intro-rule span:nth-child(2),.gi-rule i:nth-child(2),.gi-title-rule i:nth-child(2){
 width:35px !important;min-width:35px !important;background:#18d3dc !important;animation-delay:.16s !important;
}
.gc-intro-rule span:nth-child(3),.gi-rule i:nth-child(3),.gi-title-rule i:nth-child(3){animation-delay:.32s !important}
@keyframes gt-separator-active{
 0%,100%{opacity:.48;transform:scale(.78)}
 50%{opacity:1;transform:scale(1.13)}
}



/* Global-Tec: separador único tipo barra animada */
.gc-ba-rule{
  width:180px !important;height:4px !important;margin:24px auto 0 !important;
  background:rgba(181,220,224,.42) !important;border-radius:20px !important;
  overflow:hidden !important;position:relative !important;
}
.gc-ba-rule span{
  display:block !important;width:42% !important;height:100% !important;
  margin:0 !important;border-radius:20px !important;
  background:linear-gradient(90deg,#18d3dc,#159cc5) !important;
  animation:gt-ba-scan 2.4s ease-in-out infinite alternate !important;
}
@keyframes gt-ba-scan{
  from{transform:translateX(0)}
  to{transform:translateX(138%)}
}
/* Tipografía: mínimo legible de 14px para textos de lectura */
p,li,small,label,figcaption,blockquote,
input,textarea,select,
.gc-ba-heading p,.gi-section p,.gi-section li,
.gi-solution-content p,.gi-solution-content li,
.gi-included-item small,.gi-compare-column li{
  font-size:max(14px,1em) !important;
}
@media(prefers-reduced-motion:reduce){
 .gc-ba-rule span{animation:none !important;transform:translateX(70%)}
}



/* Sistema responsive Global Tec: márgenes laterales seguros en pantallas pequeñas */
:root{--gt-page-gutter:clamp(18px,4.2vw,64px);--gt-content-max:1250px}
html,body{max-width:100%;overflow-x:hidden}
.container,.container-fluid,.header-container,
.gc-container,.gi-container,
.benefits-box,.global-connect-box,
.gc-page .gc-container.gc-contact-grid{
 box-sizing:border-box
}
.gc-container,.gi-container{
 width:min(var(--gt-content-max),calc(100% - (var(--gt-page-gutter) * 2))) !important;
 max-width:var(--gt-content-max) !important;
 margin-left:auto !important;margin-right:auto !important
}
@media(max-width:767px){
 :root{--gt-page-gutter:20px}
 .container:not(.container-fluid),.header-container{
  width:calc(100% - 40px) !important;max-width:none !important;
  margin-left:auto !important;margin-right:auto !important
 }
 .gc-container,.gi-container,
 .gc-page .gc-container.gc-contact-grid{
  width:calc(100% - 40px) !important;max-width:none !important
 }
 .benefits-box,.global-connect-box{
  width:calc(100% - 40px) !important;max-width:none !important;
  margin-left:auto !important;margin-right:auto !important
 }
}
@media(max-width:420px){
 :root{--gt-page-gutter:18px}
 .container:not(.container-fluid),.header-container,
 .gc-container,.gi-container,
 .gc-page .gc-container.gc-contact-grid,
 .benefits-box,.global-connect-box{
  width:calc(100% - 36px) !important
 }
}