/* ══════════════════════════════════════════════════════════════
   Consultora Labs — override de marca sobre el template "Dimension"
   (HTML5 UP). No se toca main.css para poder actualizar el template
   sin perder estos cambios.
══════════════════════════════════════════════════════════════ */

/* Fix de confiabilidad: el template oculta el contenido del header hasta que JS quite
   la clase "is-preload" del body (animación de entrada). En conexiones lentas o si ese
   timing falla, el texto y los botones quedan invisibles para siempre. Forzamos que el
   contenido esté SIEMPRE visible, sacrificando el fade-in decorativo por confiabilidad. */
#header > *,
#header .content .inner{
  opacity: 1 !important;
  filter: none !important;
  max-height: none !important;
}

/* Legibilidad: el template calcula todo el tamaño de letra del sitio a partir de
   este valor. Cualquier ventana de hasta 1680px de ancho (o sea, casi todas)
   caía a 12pt (~16px) y de ahí todos los textos se calculan proporcionalmente
   más chicos. Lo subimos para que el texto se lea cómodo a simple vista. */
@media screen and (max-width: 1680px){
  html{ font-size: 15pt !important; }
}
@media screen and (max-width: 736px){
  html{ font-size: 13pt !important; }
}
@media screen and (max-width: 360px){
  html{ font-size: 12pt !important; }
}

/* El peso 300 (fino) del template es elegante para títulos pero cuesta leer
   en párrafos largos. Subimos el peso del texto de cuerpo. */
body, input, select, textarea{ font-weight: 400; }

/* El párrafo principal del hero venía en MAYÚSCULAS con letter-spacing amplio
   (heredado del template, pensado para frases cortas tipo etiqueta) — con una
   oración completa en español se vuelve difícil de leer de un vistazo. */
#header .content p:not(.trust-line){
  text-transform: none;
  letter-spacing: 0.01rem;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 400;
}

/* El footer venía al 75% de opacidad (main.css) — se perdía contra la foto */
#footer .copyright{ opacity: 1 !important; }
.tpl-credit{
  font-size: 0.36rem; letter-spacing: 0.06rem; opacity: 0.2;
  margin-top: 0.3rem;
}
.tpl-credit a{ border-bottom-color: rgba(255,255,255,0.15); }

/* El fondo ahora es lo bastante oscuro por sí solo (ver #bg:after/#bg:before)
   como para no necesitar una sombra difuminada de respaldo — esa sombra con
   blur de 12px ensuciaba un poco el borde de las letras. Se deja un contorno
   mínimo, casi sin desenfoque, solo como red de seguridad. */
#header .content .inner{
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Suavizado de fuente correcto para texto claro sobre fondo oscuro — sin esto
   el navegador puede renderizar el blanco más "engrosado"/borroso de lo que
   se ve en el diseño. Es la práctica estándar para este tipo de contraste. */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root{
  --brand: #1B62F5;
  --brand-2: #4A82F8;
  --brand-dark: #0d3bc4;
  --cyan: #33C7BE;
}

/* Tipografía real del template (el original no cargaba ninguna fuente) */
body, input, select, textarea{ font-family:'Source Sans Pro', sans-serif; }

/* Fondo: foto real de la Tierra desde el espacio, tratada como textura oscura
   (estilo Ajax Systems) en vez de foto vistosa de fondo completo. El texto no
   puede depender de qué zona de la foto quede detrás — así que oscurecemos la
   foto en origen (filter) y le sumamos un velo oscuro PAREJO (no un degradé
   que se aclara en el medio) para garantizar contraste alto en cualquier punto. */
#bg:after{
  background-image: url("../../images/bg-earth.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  filter: contrast(1.22) saturate(1.75) brightness(1.05);
}
#bg:before{
  /* segundo resplandor celeste (más abajo) para imitar el brillo de
     atmósfera marcado que pediste, tipo la imagen de referencia */
  background-image:
    linear-gradient(rgba(4,6,12,0.26), rgba(4,6,12,0.26)),
    radial-gradient(ellipse 80% 45% at 50% 55%, rgba(41,150,255,0.22), transparent 60%),
    radial-gradient(ellipse 75% 60% at 50% 20%, rgba(27,98,245,0.28), transparent 65%),
    url("../../images/overlay.png") !important;
  background-size: auto, auto, auto, 256px 256px !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
}

/* El "universo": red de partículas + estrellas fugaces sobre el fondo */
#universe-canvas{
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
}
body.is-article-visible #universe-canvas{
  transform: scale(1.045);
  filter: blur(0.15rem);
}
@media (prefers-reduced-motion: reduce){
  #universe-canvas{ display:none; }
}

/* Logo: flota directo sobre la foto de fondo, sin placa/caja — solo el trazo blanco
   con una sombra sutil para que se lea bien contra cualquier parte de la foto */
#header .logo.logo-card{
  width:auto !important; height:auto !important; line-height:normal !important;
  border:none;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  padding:0;
  box-shadow:none;
}
/* Logo real (extraído del mockup del cliente): monograma + wordmark en
   un solo PNG con transparencia, ver images/logo-mark.png */
#header .logo.logo-mark img{
  display:block;
  width: 11rem;
  max-width: 60vw;
  height:auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(0,0,0,0.35));
}
@media screen and (max-width: 736px){
  #header .logo.logo-mark img{ width: 9rem; }
}

/* Titular del hero: frase principal grande y en negrita, con el cierre
   en celeste de marca; el texto de apoyo queda más chico y suave. */
.hero-headline{
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff;
  margin-bottom: 0.9rem !important;
}
.hero-headline .accent{ color: var(--cyan); }
.hero-sub{
  font-size: 1rem !important;
  color: rgba(255,255,255,0.8);
}
@media screen and (max-width: 736px){
  .hero-headline{ font-size: 1.35rem !important; }
}

/* Oculto visualmente pero accesible para lectores de pantalla / SEO */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Links y hovers en azul de marca */
a:hover{ border-bottom-color: var(--brand-2) !important; }
#header nav ul li a:hover{ color: var(--brand-2); }
#header nav ul li a.active{ color: var(--brand-2); }

/* Botón primario en azul de marca */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary{
  background-color: var(--brand) !important;
  color:#fff !important;
}
input[type="submit"].primary:hover,
button.primary:hover,
.button.primary:hover{
  background-color: var(--brand-2) !important;
}

/* Foco de formularios en azul */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px rgba(27,98,245,0.25) !important;
}

/* Encabezados .major con línea inferior en azul.
   El template original usa width:max-content pensado para títulos cortos de una
   palabra ("Intro", "Work"...). Nuestros títulos son frases largas en español que,
   con el letter-spacing tan amplio, se salían del viewport en mobile sin cortar línea. */
h2.major, h3.major{
  border-bottom-color: var(--brand-2);
  width: auto !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Blockquotes (testimonios) con barra azul */
blockquote{ border-left-color: var(--brand-2); }

/* Trust row (rating + stats) dentro del header */
.trust-line{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:0.85rem; color: rgba(255,255,255,0.98); margin: -0.5rem 0 1.5rem;
}
.trust-line .stars{ color:#F5B84E; letter-spacing:2px; }

/* Bloques de servicio */
.service-block{ margin-bottom: 2rem; }
.service-block:last-child{ margin-bottom: 0; }
.service-block .icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background: rgba(27,98,245,0.12); border:1px solid rgba(27,98,245,0.3);
  margin-bottom: 0.85rem;
}
.service-block .icon-badge:before{ color: var(--brand-2); font-size:1.15rem; }
.service-block h3{ margin-bottom: 0.5rem; }

/* Sistemas en producción */
.sys-block{
  margin-bottom: 1.75rem; padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sys-block:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.sys-block-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.6rem; }
.sys-block h3{ margin-bottom:0; }
.sys-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.65rem; letter-spacing:0.15rem; text-transform:uppercase;
  color: var(--cyan);
}
.sys-status .dot{
  width:7px; height:7px; border-radius:50%; background: var(--cyan);
  box-shadow:0 0 0 0 rgba(51,199,190,0.6);
  animation: sysPulse 2.2s infinite;
}
@keyframes sysPulse{
  0%{ box-shadow:0 0 0 0 rgba(51,199,190,0.55); }
  70%{ box-shadow:0 0 0 7px rgba(51,199,190,0); }
  100%{ box-shadow:0 0 0 0 rgba(51,199,190,0); }
}
.sys-tags{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem; }
.sys-tags span{
  font-size:0.6rem; letter-spacing:0.1rem; text-transform:uppercase;
  padding:0.3rem 0.6rem; border:1px solid rgba(255,255,255,0.3); border-radius:4px;
  color: rgba(255,255,255,0.97);
}

/* Carrusel de clientes: cinta horizontal con loop infinito */
.clients-title{
  text-transform: uppercase !important;
  letter-spacing: 0.15rem !important;
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.6);
  margin: 1.75rem 0 0.9rem !important;
  text-align: center;
}
.clients-marquee{
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 0.5rem;
  /* degradé en los bordes: las tarjetas se desvanecen en vez de
     cortarse de golpe contra el límite del carrusel */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.clients-marquee-track{
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: max-content;
  /* El movimiento lo maneja 100% JS (requestAnimationFrame) escribiendo
     "transform" directo en cada frame — NO usa @keyframes/animation de
     CSS. Se decidió así porque el template apaga "animation" en TODO
     el body mientras existe la clase is-preload (main.css ~línea 101),
     y competir con ese !important desde CSS resultaba frágil: al soltar
     un arrastre, retomar el loop con un animation-delay calculado a
     veces no volvía a engancharse. Con rAF no hay ninguna dependencia
     de esa clase ni de la cascada de !important. Ver script al final
     de index.html.*/
}
/* El track repite el mismo set de logos una vez (duplicado con
   aria-hidden) para que la animación sea un loop 100% continuo, sin el
   hueco vacío que deja un solo pase de punta a punta. Nunca se ven dos
   copias del mismo logo a la vez: cuando termina de entrar la última
   del primer set, ya está saliendo la primera del segundo. */
.cm-item{
  flex: 0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap: 0.55rem;
}
/* Tarjeta blanca uniforme: cada logo mantiene su propia proporción
   (nada de recortes forzados a círculo), solo se pareja la ALTURA.
   Es el patrón estándar de "logo cloud" (Stripe, Notion, etc.). */
.cm-tile{
  display:flex; align-items:center; justify-content:center;
  height: 3.75rem;
  padding: 0.5rem 1.15rem;
  background: rgba(255,255,255,0);
  border-radius: 10px;
  /* el blanco se desvanece desde el logo (centro) hacia las esquinas,
     en vez de cortar de golpe en el borde del rectángulo */
  -webkit-mask-image: radial-gradient(ellipse, #000 35%, transparent 90%);
  mask-image: radial-gradient(ellipse, #000 35%, transparent 90%);
}
.cm-tile img{
  height: 100%;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}
.cm-name{
  font-size: 0.62rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0.7);
  max-width: 8rem;
}
@media screen and (max-width: 736px){
  .cm-tile{ height: 3rem; padding: 0.4rem 0.9rem; }
  .cm-tile img{ max-width: 6.5rem; }
  .cm-name{ font-size: 0.58rem; }
  .clients-marquee-track{ gap: 1.4rem; }
}

/* Arrastre manual (mouse/touch): al soltar, el JS retoma el auto-scroll
   desde la posición donde quedó (ver script al final de index.html). */
.clients-nav .clients-marquee{ margin: 0; }
.clients-marquee-track{
  cursor: grab;
  touch-action: pan-y; /* deja scrollear la página en vertical, pero el
                           gesto horizontal lo maneja nuestro JS */
}
.clients-marquee.is-dragging .clients-marquee-track{
  cursor: grabbing;
}
.clients-marquee-track img,
.clients-marquee-track .cm-tile{
  -webkit-user-drag: none;
  user-select: none;
}
/* Oculta la barra de scroll vertical del sitio (pedido explícito) sin
   quitar la posibilidad de scrollear con rueda/touch/teclado. */
html{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar{
  display: none;
}

/* Testimonios */
.test-rating{ display:flex; align-items:center; gap:12px; margin-bottom:2rem; }
.test-rating .num{ font-size:1.8rem; font-weight:600; }
.test-rating .stars{ color:#F5B84E; letter-spacing:2px; }
.test-rating .sub{ font-size:0.75rem; color: rgba(255,255,255,0.95); }
blockquote.testimonial{ margin-bottom:1.75rem; }
blockquote.testimonial cite{
  display:block; margin-top:0.5rem; font-style:normal;
  font-size:0.7rem; letter-spacing:0.1rem; text-transform:uppercase;
  color: rgba(255,255,255,0.95);
}

/* Info de contacto */
.info-list{ list-style:none; margin: 2rem 0 0; padding:0; }
.info-list li{
  display:flex; gap:0.85rem; align-items:flex-start;
  padding:0.9rem 0; border-top:1px solid rgba(255,255,255,0.08);
}
.info-list li:first-child{ border-top:none; }
.info-list .icon{ width:1.25rem; flex-shrink:0; padding-top:0.15rem; color: var(--brand-2); }
.info-list .label{
  display:block; font-size:0.6rem; letter-spacing:0.12rem; text-transform:uppercase;
  color: rgba(255,255,255,0.9); margin-bottom:0.2rem;
}