/* ==========================================================================
   SysData — Estilos del sitio
   1. Variables          5. Hero               9. Implementación
   2. Base               6. Cifras            10. Clientes
   3. Utilidades         7. Connect ERP       11. CTA demo
   4. Encabezado         8. Soluciones        12. Pie
                                              13. Chat de contacto
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
  /* Marca */
  --color-primario: #226BBB;        /* azul Connect */
  --color-primario-hover: #1A5AA3;
  --color-navy: #0D1B46;            /* azul SysData oscuro */
  --color-navy-profundo: #09133A;
  --color-celeste: #9FB7FF;         /* acentos sobre fondo oscuro */

  /* Neutros */
  --color-texto: #0D1B46;
  --color-texto-suave: #5A6577;
  --color-texto-claro: #C3CCDA;     /* texto secundario sobre oscuro */
  --color-borde: #E4E8EE;
  --color-fondo: #FFFFFF;
  --color-fondo-gris: #F4F6F9;
  --color-fondo-azul: #EEF4FB;

  /* Tipografía */
  --fuente-titulos: "Manrope", system-ui, sans-serif;
  --fuente-texto: "Inter", system-ui, sans-serif;

  /* Medidas */
  --ancho-max: 1240px;
  --radio-sm: 10px;
  --radio: 12px;
  --radio-md: 16px;
  --radio-lg: 20px;
  --espacio-seccion: 96px;
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-texto);
  background: var(--color-fondo);
}

img { max-width: 100%; display: block; }

a { color: var(--color-primario); }
a:hover { color: var(--color-primario-hover); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fuente-titulos);
  letter-spacing: -0.02em;
}

p { margin: 0; }

/* 3. Utilidades ----------------------------------------------------------- */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-inline: 24px;
}

.seccion { padding-block: var(--espacio-seccion); }
.seccion--gris { background: var(--color-fondo-gris); }
.seccion--oscura { background: var(--color-navy); color: #FFFFFF; }

.etiqueta {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primario);
}
.etiqueta--clara { color: var(--color-celeste); }

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 48px;
}

.titulo-seccion {
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
}

.bajada { font-size: 18px; color: var(--color-texto-suave); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radio-sm);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.boton--grande { min-height: 52px; padding: 0 26px; border-radius: var(--radio); font-size: 16px; }

.boton--primario { background: var(--color-primario); color: #FFFFFF; }
.boton--primario:hover { background: var(--color-primario-hover); color: #FFFFFF; }

.boton--borde { border-color: #CBD3DE; color: var(--color-texto); }
.boton--borde:hover { border-color: var(--color-texto); color: var(--color-texto); }

.boton--borde-claro { border-color: #3A4A73; color: #FFFFFF; }
.boton--borde-claro:hover { border-color: #FFFFFF; color: #FFFFFF; }

.boton--blanco { background: #FFFFFF; color: var(--color-navy); }
.boton--blanco:hover { background: var(--color-fondo-azul); color: var(--color-navy); }

/* Grillas reutilizables */
.grilla { display: grid; gap: 20px; }
.grilla--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grilla--270 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grilla--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Tarjetas */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--radio-md);
}
.tarjeta h3 { font-size: 20px; font-weight: 700; }
.tarjeta p { font-size: 15px; color: var(--color-texto-suave); }

.tarjeta--borde { border: 1px solid var(--color-borde); }
.tarjeta--blanca { background: #FFFFFF; padding: 30px; }
.tarjeta--blanca h3 { font-size: 21px; }

.tarjeta--oscura { background: var(--color-navy); color: #FFFFFF; padding: 30px; }
.tarjeta--oscura h3 { font-size: 22px; font-weight: 800; }
.tarjeta--oscura p { color: var(--color-texto-claro); }

.tarjeta__enlace {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.icono { width: 28px; height: 28px; flex-shrink: 0; }
.icono--30 { width: 30px; height: 30px; }
.icono--36 { width: 36px; height: 36px; }

/* 4. Encabezado ----------------------------------------------------------- */
.encabezado {
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-borde);
}

.encabezado__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.encabezado__logo img { height: 34px; width: auto; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  font-size: 15px;
  font-weight: 500;
}
.menu a { color: var(--color-texto); text-decoration: none; padding: 10px 0; }
.menu a:hover { color: var(--color-primario); }

.encabezado__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* 5. Hero ----------------------------------------------------------------- */
.hero { background: var(--color-navy); color: #FFFFFF; overflow: hidden; }

.hero__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-block: 88px 96px;
}

.hero__texto {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero__bajada { font-size: 19px; line-height: 1.6; color: var(--color-texto-claro); max-width: 560px; }

.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

.hero__visual { flex: 1 1 520px; min-width: 0; position: relative; }

/* Partículas (isotipo Connect animado) */
.particulas {
  display: block;
  width: 100%;
  height: clamp(300px, 38vw, 500px);
  touch-action: pan-y;
  cursor: crosshair;
}

/* 6b. 100% cloud (después de Cifras) ------------------------------------ */
.nube {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
}

/* Mapa animado de fondo (oficinas y conexiones) */
.nube__mapa {
  position: absolute;
  top: 36px;
  right: max(0%, calc((100% - var(--ancho-max)) / 2 - 40px));
  height: 640px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.nube__interior { position: relative; z-index: 1; }

.nube__interior { display: flex; flex-direction: column; gap: 56px; }

.nube__texto { max-width: 560px; min-height: 360px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }

.nube__sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--fuente-titulos);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primario);
}
.nube__sello svg { width: 30px; height: 30px; }

.nube__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.nube__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radio-md);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 2px rgba(13, 27, 70, 0.06);
}
.nube__item h3 { font-size: 18px; font-weight: 700; }

@media (max-width: 900px) {
  .nube__mapa { top: 0; right: 50%; transform: translateX(50%); height: 520px; opacity: 0.55; }
  .nube__texto { min-height: 0; }
}
.nube__item p { font-size: 15px; color: var(--color-texto-suave); }

/* 6. Cifras --------------------------------------------------------------- */
.cifras { border-bottom: 1px solid var(--color-borde); }

.cifras__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding-block: 44px;
}

.cifra { display: flex; flex-direction: column; gap: 4px; }
.cifra__valor { font-family: var(--fuente-titulos); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; }
.cifra__texto { font-size: 15px; color: var(--color-texto-suave); }

/* 7. Connect ERP ---------------------------------------------------------- */
.connect__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 56px;
  margin-bottom: 48px;
}
.connect__cabecera .encabezado-seccion { flex: 1 1 520px; margin-bottom: 0; }

.connect__nombre {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primario);
}

.connect__isotipo {
  flex: 0 1 300px;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-right: 24px;
}

@media (max-width: 900px) {
  .connect__isotipo { display: none; }
}

.connect__bloque { margin-top: 48px; }

/* Banda Connect IA */
.banda-ia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
  padding: 44px;
  border-radius: var(--radio-lg);
  background: var(--color-navy);
  color: #FFFFFF;
}
.banda-ia__texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.banda-ia h3 { font-size: 32px; font-weight: 800; line-height: 1.15; }
.banda-ia p:last-child { font-size: 17px; color: var(--color-texto-claro); }

/* Bloque Forwarder */
.forwarder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  margin-top: 48px;
  padding: 44px;
  border-radius: var(--radio-lg);
  border: 1px solid #CFDBF0;
  background: var(--color-fondo-azul);
}

.forwarder__texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.forwarder__etiqueta { display: flex; align-items: center; gap: 12px; }
.forwarder__etiqueta .etiqueta { font-size: 13px; font-weight: 700; color: var(--color-primario-hover); }
.forwarder h3 { font-size: 32px; font-weight: 800; line-height: 1.15; }
.forwarder__texto > p { font-size: 17px; color: #3E4A5C; }
.forwarder__texto .boton { align-self: flex-start; margin-top: 6px; }

.forwarder__funciones {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.funcion { padding: 16px 18px; border-radius: var(--radio); background: #FFFFFF; font-size: 15px; }
.funcion strong { display: block; margin-bottom: 2px; font-family: var(--fuente-titulos); }
.funcion span { color: var(--color-texto-suave); }

.funcion--destacada {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--color-navy);
  color: #FFFFFF;
}
.funcion--destacada strong { font-size: 17px; }
.funcion--destacada span { color: var(--color-texto-claro); }

/* 9. Implementación ------------------------------------------------------- */
.implementacion__interior { display: flex; flex-wrap: wrap; gap: 56px; }

.implementacion__texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.pasos { flex: 1 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; }

.paso { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--color-borde); }
.paso:last-child { border-bottom: 1px solid var(--color-borde); }
.paso__numero { width: 32px; flex-shrink: 0; font-family: var(--fuente-titulos); font-weight: 800; font-size: 18px; color: var(--color-primario); }
.paso h3 { margin-bottom: 4px; font-size: 19px; font-weight: 700; }
.paso p { font-size: 15px; color: var(--color-texto-suave); }

/* 10. Clientes ------------------------------------------------------------ */
.clientes__titulo { font-weight: 800; font-size: clamp(28px, 3vw, 36px); text-align: center; margin-bottom: 40px; }

.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 40px; }

.logo-cliente {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  background: #FFFFFF;
  border: 1px dashed #B9C3D1;
  color: var(--color-texto-suave);
  font-size: 14px;
}

.testimonio {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 44px;
  border-radius: var(--radio-lg);
  background: #FFFFFF;
}
.testimonio blockquote { margin: 0; font-family: var(--fuente-titulos); font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.testimonio figcaption { font-size: 15px; color: var(--color-texto-suave); }

/* 11. CTA demo ------------------------------------------------------------ */
.cta__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 88px;
}
.cta__texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cta h2 { font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; }
.cta p { font-size: 18px; color: var(--color-texto-claro); }
.cta .boton { min-height: 56px; padding: 0 30px; font-size: 17px; }

/* 12. Pie ----------------------------------------------------------------- */
.pie { background: var(--color-navy-profundo); color: var(--color-texto-claro); }

.pie__interior { display: flex; flex-direction: column; gap: 40px; padding-block: 64px 32px; }

.pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }

.pie__columna { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pie__columna--marca { gap: 12px; }
.pie__columna--marca img { height: 32px; width: auto; }
.pie__titulo { color: #FFFFFF; font-weight: 600; }
.pie__columna address { font-style: normal; }
.pie__columna a { color: var(--color-texto-claro); text-decoration: none; }
.pie__columna a:hover { color: #FFFFFF; }

.pie__legal { padding-top: 24px; border-top: 1px solid #22324A; font-size: 13px; color: #8E9AAD; }

/* 13. Chat de contacto ----------------------------------------------------- */
.chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--fuente-texto);
}

.chat__lanzador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primario);
  color: #FFFFFF;
  font: 600 15px var(--fuente-texto);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(13, 27, 70, 0.3);
  transition: background-color 0.15s, transform 0.15s;
}
.chat__lanzador:hover { background: var(--color-primario-hover); transform: translateY(-1px); }
.chat__lanzador:focus-visible { outline: 3px solid var(--color-celeste); outline-offset: 3px; }

.chat__panel {
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-lg);
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(13, 27, 70, 0.28);
  overflow: hidden;
}
.chat__panel[hidden] { display: none; }

.chat__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-navy);
  color: #FFFFFF;
}
.chat__titulo { display: flex; flex-direction: column; }
.chat__titulo strong { font-family: var(--fuente-titulos); font-size: 16px; }
.chat__titulo span { font-size: 13px; color: var(--color-texto-claro); }

.chat__cerrar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.chat__cerrar:hover { background: rgba(255, 255, 255, 0.1); }

.chat__mensajes {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--color-fondo-gris);
}

.chat__mensaje {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.chat__mensaje--bot { align-self: flex-start; background: #FFFFFF; color: var(--color-texto); border-bottom-left-radius: 4px; }
.chat__mensaje--usuario { align-self: flex-end; background: var(--color-primario); color: #FFFFFF; border-bottom-right-radius: 4px; }

.chat__escribiendo { display: inline-flex; gap: 4px; padding: 14px; }
.chat__escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9AA6B8;
  animation: chat-punto 1s infinite ease-in-out;
}
.chat__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.chat__escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-punto { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.chat__resumen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 4px 0;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: #FFFFFF;
  font-size: 14px;
}
.chat__resumen dt { color: var(--color-texto-suave); }
.chat__resumen dd { margin: 0; overflow-wrap: anywhere; }

.chat__entrada { padding: 14px; border-top: 1px solid var(--color-borde); background: #FFFFFF; }
.chat__entrada:empty { display: none; }

.chat__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__opcion {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-primario);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-primario);
  font: 500 14px var(--fuente-texto);
  text-align: left;
  cursor: pointer;
}
.chat__opcion:hover { background: var(--color-fondo-azul); }

.chat__form { display: flex; flex-direction: column; gap: 8px; }
.chat__fila { display: flex; gap: 8px; align-items: flex-end; }
.chat__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #CBD3DE;
  border-radius: var(--radio-sm);
  font: 15px var(--fuente-texto);
  color: var(--color-texto);
  resize: none;
}
.chat__campo:focus { outline: 2px solid var(--color-primario); outline-offset: 0; border-color: transparent; }

.chat__enviar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--color-primario);
  color: #FFFFFF;
  cursor: pointer;
}
.chat__enviar:hover { background: var(--color-primario-hover); }

.chat__omitir {
  align-self: flex-start;
  min-height: 32px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--color-texto-suave);
  font: 500 14px var(--fuente-texto);
  text-decoration: underline;
  cursor: pointer;
}

.chat__error { margin: 0; font-size: 13px; color: #B42318; }
.chat__error:empty { display: none; }

.chat__confirmar { display: flex; flex-direction: column; gap: 10px; }
.chat__captcha { min-height: 65px; font-size: 13px; color: var(--color-texto-suave); }
.chat__botones { display: flex; align-items: center; gap: 14px; }
.chat__botones .boton:disabled { opacity: 0.5; cursor: not-allowed; }
.chat__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) {
  .chat { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .chat__lanzador { align-self: flex-end; }
  .chat__panel { width: 100%; height: calc(100vh - 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat__escribiendo span { animation: none; opacity: 0.6; }
  .chat__lanzador { transition: none; }
}