/* ===========================================================================
   estilos.css · SymIntelligent
   Una sola hoja para las dos páginas. Si algo se ve distinto entre index y
   contacto, la causa está acá, no en el HTML.
   =========================================================================== */

:root {
  --paper:      #F6F8FB;   /* fondo general */
  --card:       #FFFFFF;
  --ink:        #0F1826;   /* texto principal */
  --muted:      #71809A;   /* texto secundario */
  --line:       #DCE3EC;   /* bordes */
  --blue:       #1F52E6;   /* color de marca */
  --blue-ink:   #163FB8;   /* azul al pasar el mouse */
  --blue-suave: #E9EFFF;
  --mint:       #6FE3CF;   /* acento */
  --mint-ink:   #0E7C6F;
  --hero-bg:    #0D1526;   /* franjas oscuras */
  --hero-text:  #F3F6FB;
  --hero-muted: #9AA9C2;
  --sombra:     0 10px 30px rgba(15, 24, 38, .07);
  --sombra-alta: 0 18px 44px rgba(15, 24, 38, .13);
  --curva:      cubic-bezier(.2, .8, .3, 1);
}

* { box-sizing: border-box }

/* Al hacer clic en el menú, la página se desliza hasta la sección en vez de
   saltar de golpe. El colchón de arriba (scroll-margin-top, más abajo) evita
   que el título quede tapado por la barra sticky. */
html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Sora, "IBM Plex Sans", system-ui, sans-serif;
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0 }
a { color: var(--blue) }
img, svg { max-width: 100% }

.interior {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================== barra y logo =========================== */

.barra {
  background: rgba(246, 248, 251, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  transition: box-shadow .25s ease;
}

/* Apenas te alejas del tope, la barra gana una sombra suave: da la sensación
   de que "flota" sobre el contenido en vez de quedar pegada sin más. */
.barra.con-sombra { box-shadow: 0 10px 26px rgba(15, 24, 38, .10) }

/* Una línea delgada arriba de todo que crece según cuánto se ha bajado en la
   página. Es una referencia de "cuánto falta", no un adorno: por eso es tan
   discreta. */
.progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 20;
  pointer-events: none;
}

.progreso span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

.barra .interior {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: Sora, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.015em;
  white-space: nowrap;
}

/* El punto se dibuja al cargar y después late despacio, como un latido de
   servidor. La onda es un segundo círculo que crece y se desvanece. */
.punto { position: relative; width: 12px; height: 12px; flex: none }

.punto i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  animation: punto-entra .5s cubic-bezier(.2, 1.4, .4, 1) .05s forwards;
}

.punto i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: onda 3.2s ease-out 1.1s infinite;
}

@keyframes punto-entra { to { transform: scale(1) } }
@keyframes onda {
    0% { transform: scale(1);   opacity: .55 }
   70% { transform: scale(2.6); opacity: 0 }
  100% { opacity: 0 }
}

/* Las letras suben una tras otra. El retardo lo pone cada span con --i. */
.marca .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em);
  animation: letra-sube .5s var(--curva) forwards;
  animation-delay: calc(.18s + var(--i) * .035s);
}

@keyframes letra-sube { to { opacity: 1; transform: translateY(0) } }

.marca .sym { color: var(--blue) }

/* Al pasar el mouse, un brillo recorre la palabra. */
.marca:hover .nombre {
  background: linear-gradient(90deg, var(--ink) 34%, var(--blue) 50%, var(--ink) 66%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brillo 1.1s ease;
}

@keyframes brillo {
  from { background-position:  130% 0 }
    to { background-position: -130% 0 }
}

.menu { display: flex; gap: 22px; flex-wrap: wrap; align-items: center }

.menu a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.menu a:hover { color: var(--ink) }
.menu a:hover::after { transform: scaleX(1) }
.menu a.destacado,
.menu a.activo { color: var(--blue); font-weight: 600 }

/* La sección que estás mirando queda subrayada sola, sin que pases el mouse:
   es la señal de "estás aquí" mientras te desplazas por la página. */
.menu a.activo::after { transform: scaleX(1) }

/* "Mi portal": no es un enlace a una sección de la página como los demás,
   es la entrada a otra área (el login), así que se ve como un botón
   chico en vez de como texto con subrayado. */
.menu a.portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.menu a.portal::after { content: none }
.menu a.portal:hover { border-color: var(--blue); color: var(--blue) }
.menu a.portal.activo { background: var(--blue-suave); border-color: #C8D4EA; color: var(--blue) }
.menu a.portal svg { width: 15px; height: 15px; flex: none }

/* En pantalla angosta el menú se va a su propia línea: si comparte fila
   con el logo, los nombres largos se montan encima. */
@media (max-width: 700px) {
  .barra .interior { flex-direction: column; align-items: flex-start; gap: 9px; position: relative }
  .menu { gap: 14px 16px; width: 100% }
  .menu a { font-size: 13.5px }

  /* "Mi portal" se achica a solo el ícono y se saca del flujo del menú:
     fijo arriba a la derecha, junto al logo. Adentro de <nav class="menu">
     seguía compitiendo por espacio con el resto de los enlaces y, si no
     alcanzaba, se iba solo a una línea aparte; posicionado así, nunca
     pelea por ancho con nada. */
  .menu a.portal {
    position: absolute;
    /* top/right calzan con el padding de .barra .interior (14px/20px):
       "top: 0" quedaba pegado al borde de arriba, ignorando ese padding,
       por eso se veía más arriba que el logo en vez de a su altura. */
    top: 14px;
    right: 20px;
    padding: 6px;
    gap: 0;
  }
  .menu a.portal span { display: none }
}

/* =========================== botones =========================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.btn:hover { transform: translateY(-1px) }
.btn-azul  { background: var(--blue); color: #fff }
.btn-azul:hover { background: var(--blue-ink) }
.btn-claro { background: transparent; color: var(--hero-text); border-color: rgba(243, 246, 251, .35) }
.btn-claro:hover { border-color: var(--hero-text) }
.btn-linea { background: transparent; color: var(--blue); border-color: var(--line) }
.btn-linea:hover { border-color: var(--blue) }

/* Para botones secundarios que no necesitan el mismo peso que la acción
   principal: una línea de texto, no dos. */
.btn-chico { padding: 8px 16px; font-size: 13px }

/* =========================== hero (index) =========================== */

.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -160px; top: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 82, 230, .40), transparent 62%);
  pointer-events: none;
}

.hero .interior {
  padding-top: 84px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero .interior { grid-template-columns: 1fr; gap: 34px; padding-top: 62px; padding-bottom: 58px }
}

.etiqueta {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}

.hero h1 { font-size: 44px; line-height: 1.14; font-weight: 700 }
@media (max-width: 640px) { .hero h1 { font-size: 31px } }

.hero p { margin-top: 18px; font-size: 17px; color: var(--hero-muted); max-width: 560px }

.acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }

/* El dibujo: las líneas se trazan solas y los nodos aparecen después. */
.trazo {
  stroke-dasharray: var(--l);
  stroke-dashoffset: var(--l);
  animation: trazar 1.5s ease-out .35s forwards;
}

@keyframes trazar { to { stroke-dashoffset: 0 } }

.nodo {
  opacity: 0;
  animation: nodo-entra .45s cubic-bezier(.2, 1.3, .4, 1) forwards;
  animation-delay: calc(.85s + var(--i) * .12s);
}

@keyframes nodo-entra {
  from { opacity: 0; transform: translateY(6px) }
    to { opacity: 1; transform: translateY(0) }
}

.flota { animation: flotar 7s ease-in-out infinite }
@keyframes flotar {
  0%, 100% { transform: translateY(0) }
       50% { transform: translateY(-9px) }
}

/* El dibujo se inclina apenas hacia donde está el mouse (ver interacciones.js),
   como si tuviera peso. La transición es la que hace que vuelva a su lugar
   con suavidad al alejar el cursor, en vez de saltar de golpe. */
.flota svg { transition: transform .35s var(--curva) }

/* =========================== secciones =========================== */

/* --header-h lo calcula interacciones.js con el alto real de la barra (en
   móvil ocupa dos líneas y es más alta). 80px es solo el respaldo por si el
   script no llega a correr. */
section { scroll-margin-top: var(--header-h, 80px) }

.bloque { padding-block: 74px }
@media (max-width: 640px) { .bloque { padding-block: 54px } }

.titulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.bloque h2 { font-size: 30px; font-weight: 600; line-height: 1.25 }
@media (max-width: 640px) { .bloque h2 { font-size: 25px } }

.bajada { margin-top: 16px; color: var(--muted); max-width: 660px; font-size: 16.5px }

.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center }
@media (max-width: 820px) { .sobre { grid-template-columns: 1fr; gap: 26px } }

.columna-der { display: flex; flex-direction: column; gap: 20px }

/* La foto va en una caja de proporción fija: así el texto de al lado no se
   mueve mientras la imagen todavía no carga. */
.foto {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--blue-suave);
}

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

.panel {
  background: var(--blue-suave);
  border: 1px solid #D3DEFB;
  border-radius: 16px;
  padding: 30px;
}

.panel h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px }
.panel ul { margin: 0; padding-left: 20px; font-size: 15px }
.panel li { margin-bottom: 9px }
.panel li:last-child { margin-bottom: 0 }

/* =========================== tarjetas =========================== */

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}

@media (max-width: 900px) { .rejilla { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .rejilla { grid-template-columns: 1fr } }

.tarjeta {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .22s var(--curva),
              box-shadow .22s var(--curva),
              border-color .22s ease;
}

/* Las tarjetas de servicios son un enlace, pero el botón de interés (ver
   más abajo) no puede vivir DENTRO de ese enlace —un botón anidado en un
   <a> es HTML inválido y un lío para el foco de teclado—, así que el
   enlace cubre solo el contenido (ícono, título, texto) y no toda la
   tarjeta. Por fuera, se ve y se comporta igual que antes. */
.tarjeta-enlace { display: block; color: inherit; text-decoration: none }

/* Una línea de color aparece arriba al pasar el mouse. Crece desde la
   izquierda en vez de encenderse de golpe: se nota menos brusco. */
.tarjeta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--curva);
}

.tarjeta:hover,
.tarjeta:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: #C8D4EA;
}

.tarjeta:hover::before,
.tarjeta:focus-within::before { transform: scaleX(1) }

/* El recorrido automático por inactividad (tour.js) usa el mismo efecto
   que el hover, más un anillo azul: así la tarjeta que está "mostrando"
   se nota incluso sin que haya un mouse encima. */
.tarjeta.tour-resaltado {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--blue), var(--sombra-alta);
  border-color: var(--blue);
}

.tarjeta.tour-resaltado::before { transform: scaleX(1) }

.tarjeta h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px }
.tarjeta p  { color: var(--muted); font-size: 15px }

/* El icono cambia de color y se inclina apenas. El "apenas" es el punto:
   más que esto se vuelve caricatura. */
.icono {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-suave);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background .22s ease, color .22s ease, transform .3s var(--curva);
}

.icono svg { width: 21px; height: 21px; display: block }

.tarjeta:hover .icono {
  background: var(--blue);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}

.num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--mint-ink);
  font-family: Sora, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform .3s var(--curva);
}

.tarjeta:hover .num { transform: scale(1.12) }

.valores { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }

/* Las piezas entran cuando llegas a ellas. */
.aparece {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}

.aparece.visible { opacity: 1; transform: none }

/* =========================== cierre y pie =========================== */

.cierre {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}

.cierre::after {
  content: "";
  position: absolute;
  left: -140px; bottom: -180px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 227, 207, .20), transparent 62%);
  pointer-events: none;
}

.cierre .interior { padding-block: 72px; text-align: center; position: relative; z-index: 1 }
.cierre h2 { font-size: 32px; font-weight: 700 }
@media (max-width: 640px) { .cierre h2 { font-size: 26px } }
.cierre p { margin-top: 14px; color: var(--hero-muted); font-size: 17px }
.cierre .acciones { justify-content: center }

.pie { background: #080E1A; color: var(--hero-muted); font-size: 13.5px }

.pie .interior {
  padding-top: 26px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.pie a { color: #9DB4FF; text-decoration: none }

/* =========================== página de contacto =========================== */

.cabecera { background: var(--hero-bg); color: var(--hero-text); border-bottom: 1px solid #16203A }
.cabecera .interior { padding: 62px 20px 56px; text-align: center }
.cabecera h1 { font-size: 36px; line-height: 1.2; font-weight: 700 }
@media (max-width: 520px) { .cabecera h1 { font-size: 28px } }
.cabecera p { max-width: 620px; margin: 16px auto 0; color: var(--hero-muted); font-size: 16.5px }

/* Migas de pan: para volver de una página de servicio al listado, sin tener
   que usar el botón "atrás" del navegador. */
.migas { font-size: 13.5px; color: var(--hero-muted); margin-bottom: 18px }
.migas a { color: var(--hero-muted); text-decoration: none }
.migas a:hover { color: var(--hero-text) }

/* =========================== páginas de servicio =========================== */

/* La franja de tecnologías: nada de panel ni tarjetas, los logos flotan
   directo sobre el fondo de la página (como una fila de "con quién
   trabajamos"), apagados en gris hasta que el mouse pasa por encima. El
   botón de pausa queda abajo a la derecha, fuera de la fila. */
.tec-envoltorio {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.tec-carrusel {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-block: 14px;
}

/* Los logos se disuelven en el color de la página al llegar a los bordes,
   en vez de cortarse en seco: un rectángulo con ese mismo color sólido se
   pinta encima y se degrada a transparente. */
.tec-carrusel::before,
.tec-carrusel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 130px;
  z-index: 2;
  pointer-events: none;
}

.tec-carrusel::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), transparent);
}

.tec-carrusel::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), transparent);
}

/* La pista es el doble del set de logos, uno tras otro, y se desliza
   exactamente la mitad de su ancho (-50%) para que el punto donde "empalma"
   sea invisible: el segundo set entra justo donde el primero habría
   seguido. Por eso los dos grupos deben ser idénticos. */
.tec-pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tec-desliza 34s linear infinite;
}

/* Se detiene al pasar el mouse o con el botón (para quien no tiene mouse,
   o solo quiere leer los nombres con calma). */
.tec-envoltorio:hover .tec-pista,
.tec-envoltorio.pausado .tec-pista { animation-play-state: paused }

@keyframes tec-desliza {
  to { transform: translateX(-50%) }
}

.tec-grupo {
  display: flex;
  align-items: center;
  gap: 76px;
  padding-right: 76px;
  flex: 0 0 auto;
}

.tec {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease, transform .25s var(--curva);
}

.tec:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

.tec-icono { width: 48px; height: 48px; flex: none }
.tec-icono svg { width: 100%; height: 100%; fill: var(--marca, var(--ink)) }

.tec-nombre { font-size: 22px; font-weight: 600; color: var(--ink); white-space: nowrap }

/* Botón de pausa: chico y discreto, para no competir con el título de al
   lado. Los dos íconos (pausa/reanudar) van los dos en el DOM y se
   intercambian con la clase .pausado, en vez de dibujarlos con JS. */
.tec-pausa {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.tec-pausa:hover { color: var(--blue); border-color: var(--blue) }
.tec-pausa svg { width: 15px; height: 15px; fill: currentColor }
.tec-pausa-reanudar { display: none }
.tec-envoltorio.pausado .tec-pausa-pausar { display: none }
.tec-envoltorio.pausado .tec-pausa-reanudar { display: block }

/* Tarjeta de beneficio simple: número o ícono arriba, sin la línea de color
   que sí tienen las tarjetas de servicios (esa insinúa "elige uno de estos",
   acá son puntos de un mismo servicio). */
.beneficio { text-align: left }
.beneficio .icono { margin-bottom: 14px }

/* Ícono de proveedor en las tarjetas de "arquitecturas de referencia": una
   caja clara (no azul como .icono) porque acá el color ya lo trae el logo
   de la marca, vía --marca en cada tarjeta. */
.ref-icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ref-icono svg { width: 24px; height: 24px; fill: var(--marca, var(--ink)) }

/* Los componentes clave de cada arquitectura, como etiquetas sueltas: dan
   una idea rápida sin convertir la tarjeta en una lista técnica larga. */
.ref-tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ref-tags li {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* =========================== intereses =========================== */

/* El botón "+" que intereses.js agrega en cada tarjeta elegible (no vive
   en el HTML de cada página: así una tarjeta nueva que se agregue más
   adelante ya sale con esto, sin que alguien se acuerde de ponerlo a
   mano). Depende de que la tarjeta sea position:relative, que .tarjeta ya
   es por el ::before de arriba. */
.interes-boton {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--curva);
}

.interes-boton:hover { border-color: var(--blue); color: var(--blue) }
.interes-boton svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.interes-boton .interes-icono-quitar { display: none }

/* Ya agregado: se pone azul sólido y el ícono cambia a un check, para que
   quede claro que un segundo clic lo saca en vez de agregarlo de nuevo. */
.interes-boton.activo { background: var(--blue); border-color: var(--blue); color: #fff }
.interes-boton.activo .interes-icono-agregar { display: none }
.interes-boton.activo .interes-icono-quitar { display: flex }

/* El resumen flotante: fijo abajo a la derecha en toda página que tenga
   tarjetas de interés, para que siga ahí sin importar cuánto se navegue. */
.intereses-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
}

.intereses-boton-flotante {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(15, 24, 38, .28);
  cursor: pointer;
}

.intereses-boton-flotante svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

.intereses-contador {
  background: var(--mint);
  color: var(--mint-ink);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intereses-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  padding: 18px;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--curva);
}

.intereses-flotante.abierto .intereses-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.intereses-panel h3 { font-size: 15px; font-weight: 600; margin-bottom: 3px }
.intereses-panel .sub { font-size: 13px; color: var(--muted); margin-bottom: 14px }

.intereses-lista {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.intereses-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 10px;
  padding: 9px 8px 9px 12px;
}

.intereses-lista button {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.intereses-lista button:hover { color: #C4322C }
.intereses-lista button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }

.intereses-panel .btn { width: 100%; justify-content: center }

/* =========================== simulador de despliegue =========================== */

.simulador {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 780px) { .simulador { grid-template-columns: 1fr } }

.sim-controles {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-controles .btn { width: 100%; justify-content: center }
.sim-controles .btn[disabled] { opacity: .6; cursor: default; transform: none }

/* El botón de error usa el esquema "línea" normal, pero en rojo: es una
   acción destructiva (aunque sea simulada) y conviene que se note antes de
   apretarla, no solo después. */
.btn-linea.btn-peligro { color: #C4322C; border-color: var(--line) }
.btn-linea.btn-peligro:hover { border-color: #C4322C }

/* Steppers de nodos y réplicas: mismo par de botones redondos para las
   dos cosas, cambia solo la etiqueta y a qué función están enchufados. */
.sim-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.sim-stepper-etiqueta { font-size: 14px; font-weight: 600; color: var(--ink) }

.sim-stepper-control { display: flex; align-items: center; gap: 4px }

.sim-stepper-control button {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--blue-suave);
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.sim-stepper-control button:hover:not(:disabled) { background: var(--blue); color: #fff }

.sim-stepper-control button:disabled {
  opacity: .35;
  cursor: default;
  background: var(--blue-suave);
  color: var(--blue);
}

.sim-stepper-cantidad {
  width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* aria-live: los lectores de pantalla anuncian cada cambio de estado solos,
   sin que la persona tenga que ir a buscarlo con el foco. */
.sim-estado {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
  min-height: 42px;
}

/* "sim-ok" y no "ok": ese nombre ya lo usa el aviso de éxito del
   formulario de contacto (.ok, más abajo), que viene oculto por defecto
   (display: none) hasta que se le suma .ver. Como acá nunca se agrega
   .ver, el mensaje final del simulador heredaba ese display: none y
   quedaba invisible aunque el texto sí estuviera puesto. */
.sim-estado.sim-ok { color: var(--mint-ink); font-weight: 600 }

.sim-diagrama {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: 16px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sim-diagrama::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -140px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 227, 207, .16), transparent 62%);
  pointer-events: none;
}

/* Build → push: una fila chica, centrada, separada del clúster de abajo.
   Antes vivían en la misma fila que los pods; al sumar varios nodos esa
   fila se habría vuelto carísima de leer. */
.sim-flujo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sim-etapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hero-muted);
  flex: 0 0 auto;
  transition: color .25s ease;
}

.sim-etapa-icono {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--hero-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.sim-etapa-icono svg { width: 22px; height: 22px }

/* La etapa activa se ilumina con el azul de marca y gana un halo, como el
   punto de la marca en el header: es la misma idea de "esto está vivo
   ahora mismo" reutilizada acá. */
.sim-etapa.activa { color: var(--hero-text) }
.sim-etapa.activa .sim-etapa-icono {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 6px rgba(31, 82, 230, .18);
  color: #fff;
}

.sim-linea { width: 30px; height: 2px; background: rgba(255, 255, 255, .16); flex: 0 0 auto }

.sim-cluster { position: relative; z-index: 1 }

.sim-cluster-titulo {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hero-muted);
  margin-bottom: 14px;
}

/* Los nodos van uno al lado del otro y se envuelven en pantallas angostas.
   node.js (más abajo, en el JS) los crea y destruye según cuántos haya. */
.sim-nodos { display: flex; gap: 14px; flex-wrap: wrap }

.sim-nodo {
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 148px;
}

.sim-nodo-titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hero-muted);
}

.sim-nodo-titulo svg { width: 15px; height: 15px; flex: none }

.sim-nodo-pods { display: flex; gap: 10px; flex-wrap: wrap; min-height: 52px }

.sim-pod {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--curva);
}

/* Pendiente: el pod anterior ya se fue y el nuevo está levantando. El
   anillo gira; el visto bueno todavía no existe. */
.sim-pod.pendiente {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
}

.sim-anillo {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  opacity: 0;
  animation: sim-gira .8s linear infinite;
}

.sim-pod.pendiente .sim-anillo { opacity: 1 }

.sim-pod .sim-check,
.sim-pod .sim-alerta {
  position: absolute;
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s var(--curva);
}

/* Activo: el pod nuevo ya está sirviendo tráfico. */
.sim-pod.activo {
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--mint-ink));
  box-shadow: 0 8px 20px rgba(15, 24, 38, .35);
}

.sim-pod.activo .sim-check { opacity: 1; transform: scale(1) }

/* Con error: rojo y un temblor breve, para que se note antes de que
   Kubernetes lo reemplace. El temblor corre dos veces y para: uno
   permanente sería una molestia, no un aviso. */
.sim-pod.error {
  border-color: transparent;
  background: linear-gradient(135deg, #E5484D, #A4201E);
  box-shadow: 0 8px 20px rgba(164, 32, 30, .35);
  animation: sim-tiembla .35s ease-in-out 2;
}

.sim-pod.error .sim-alerta { opacity: 1; transform: scale(1) }

@keyframes sim-gira { to { transform: rotate(360deg) } }

@keyframes sim-tiembla {
  0%, 100% { transform: translateX(0) }
      25%   { transform: translateX(-3px) }
      75%   { transform: translateX(3px) }
}

.cuerpo {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 72px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 820px) { .cuerpo { grid-template-columns: 1fr } }

/* La tarjeta del formulario no se levanta al pasar el mouse: es un bloque
   de trabajo, no algo en lo que haya que hacer clic. */
.cuerpo .tarjeta:hover { transform: none; box-shadow: var(--sombra); border-color: var(--line) }
.cuerpo .tarjeta::before { display: none }
.cuerpo .tarjeta { padding: 28px }
.cuerpo .tarjeta h2 { font-size: 20px; font-weight: 600; margin-bottom: 6px }
.cuerpo .tarjeta .sub { color: var(--muted); font-size: 14px; margin: 0 0 22px }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 520px) { .fila { grid-template-columns: 1fr } }

.campo { margin-bottom: 16px }

label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px }
label .opc { font-weight: 400; color: var(--muted) }

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  transition: border-color .18s ease, box-shadow .18s ease;
}

input::placeholder, textarea::placeholder { color: #A6B1C4 }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 82, 230, .15);
}

textarea { min-height: 124px; resize: vertical }

/* El texto que reemplaza al <label> de "¿Qué necesitas?": ya no apunta a
   un único campo con for=, así que no puede ser un <label> de verdad, pero
   necesita verse igual que el resto. */
.label-multiselect { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px }

/* =========================== "¿qué necesitas?" (multiselect) =========================== */

/* Es un <details>: el propio navegador abre y cierra el panel al tocar el
   <summary>, sin depender de JS para lo básico. */
.multiselect { position: relative }

/* El triángulo que el navegador dibuja solo en un <summary>: se saca
   porque ya hay una flecha propia (.multiselect-flecha) que además rota. */
.multiselect > summary { list-style: none }
.multiselect > summary::-webkit-details-marker { display: none }
.multiselect > summary::marker { content: "" }

/* Es un <summary>, no un <input>: la regla compartida "input, select,
   textarea" de más arriba no lo alcanza, así que trae su propio aspecto
   completo acá en vez de heredarlo. */
.multiselect-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.multiselect[open] > .multiselect-boton,
.multiselect-boton:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 82, 230, .15);
}

.multiselect-resumen { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.multiselect-flecha {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}

.multiselect[open] .multiselect-flecha { transform: rotate(180deg) }

.multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  padding: 8px;
  max-height: 280px;
  overflow-y: auto;
}

/* Es un <label> (para que tocar el texto también marque la casilla), pero
   acá se ve como una fila de lista, no como la etiqueta de un campo. */
.multiselect-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 0;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.multiselect-opcion:hover { background: var(--paper) }

/* La casilla real sigue ahí (por eso funciona sin JS), solo que invisible:
   lo que se ve es .multiselect-marca, dibujada a mano al lado. */
.multiselect-opcion input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.multiselect-marca {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}

.multiselect-marca svg {
  width: 12px; height: 12px;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}

.multiselect-opcion input:checked + .multiselect-marca { background: var(--blue); border-color: var(--blue) }
.multiselect-opcion input:checked + .multiselect-marca svg { opacity: 1; transform: scale(1) }
.multiselect-opcion input:focus-visible + .multiselect-marca { box-shadow: 0 0 0 3px rgba(31, 82, 230, .18) }

.oculto { position: absolute; left: -9999px }

.nota { font-size: 12.5px; color: var(--muted); margin-top: 14px }

.pasos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: p }

.pasos li {
  counter-increment: p;
  position: relative;
  padding-left: 34px;
  margin-bottom: 13px;
  font-size: 14.5px;
}

.pasos li::before {
  content: counter(p);
  position: absolute;
  left: 0; top: 1px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--mint-ink);
  font-family: Sora, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ok {
  display: none;
  background: #DDF5EA;
  border: 1px solid #B6E4CE;
  color: #176A47;
  border-radius: 12px;
  padding: 16px;
  font-size: 14.5px;
}

.ok.ver { display: block }

/* Los errores se muestran arriba del formulario, con el texto que la persona
   ya escribió todavía puesto. Perder lo escrito por una coma mal puesta es la
   forma más rápida de que alguien cierre la pestaña y no vuelva. */
.aviso-error {
  background: #FDECEC;
  border: 1px solid #F3C3C3;
  color: #9B2C2C;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  margin-bottom: 20px;
}

.aviso-error p { margin: 0 0 6px }
.aviso-error p:last-child { margin-bottom: 0 }

/* El recuadro de Cloudflare trae su propio alto; esto solo lo separa. */
.cf-turnstile { margin-bottom: 4px }

/* =========================== portal (login) =========================== */

/* Una tarjeta de login se ve mejor angosta y centrada que estirada al
   ancho completo de .interior: por eso el max-width, a diferencia de las
   demás tarjetas del sitio. */
.portal-tarjeta { max-width: 440px; margin: 0 auto }
.portal-tarjeta:hover { transform: none; box-shadow: var(--sombra); border-color: var(--line) }
.portal-tarjeta::before { display: none }
.portal-tarjeta h2 { font-size: 21px; font-weight: 600; margin-bottom: 6px }
.portal-tarjeta .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px }

.oauth-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .15s ease;
}

.oauth-boton:hover { border-color: #C8D4EA; background: var(--paper); transform: translateY(-1px) }
.oauth-boton svg { width: 18px; height: 18px; flex: none }

/* La línea con "o con tu correo" al medio: dos mitades de línea con el
   texto encima tapando el hueco del centro, en vez de una línea entera
   con el texto flotando arriba. */
.separador-o { position: relative; text-align: center; margin: 20px 0; color: var(--muted); font-size: 13px }
.separador-o::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line) }
.separador-o span { position: relative; background: var(--card); padding: 0 12px }

.nota-derecha { text-align: right; margin: -8px 0 16px; font-size: 13px }
.nota-derecha a { color: var(--muted); text-decoration: none }
.nota-derecha a:hover { color: var(--blue) }

/* Aviso neutro (no es un error): mismo formato que .aviso-error, en azul
   en vez de rojo. */
.aviso-info {
  background: var(--blue-suave);
  border: 1px solid #C8D4EA;
  color: var(--blue-ink);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

.aviso-info a { color: inherit; font-weight: 600 }

.portal-recuperar h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px }
.portal-recuperar .sub { margin-bottom: 18px }

.btn-texto {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
}

.btn-texto:hover { color: var(--blue) }

.portal-nota-final { text-align: center; margin-top: 22px }

/* =========================== menos movimiento =========================== */

/* Quien pidió menos movimiento en su sistema, no ve ninguno. Suele ser gente
   con mareos o migrañas: para ellos una animación no es un adorno. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .marca .letra, .nodo { opacity: 1; transform: none }
  .punto i { transform: scale(1) }
  .trazo { stroke-dashoffset: 0 }
  .aparece { opacity: 1; transform: none }
  .flota svg { transform: none !important }

  /* Sin la animación, la pista quedaría a mitad de camino (transform: none
     la deja en 0, que es donde empieza, así que en realidad calza solo).
     Lo único que hay que arreglar es el segundo grupo duplicado: sin el
     desplazamiento infinito ya no cumple ningún propósito, solo repetiría
     los logos, así que se oculta y se quitan los degradados de los bordes
     para que los que quedan se vean completos, en varias líneas si hace
     falta. */
  .tec-carrusel::before, .tec-carrusel::after { display: none }
  .tec-pista { flex-wrap: wrap; width: auto }
  .tec-grupo:nth-child(n+2) { display: none }
  .tec { filter: none; opacity: 1 }
  .tec-pausa { display: none }
}