/* Portada publica de Symbiotic Analytics (symbiotic-cloud.com).
 *
 * Los colores salen de webapp/brand/tokens.css y BRAND.md: la marca vive en dos
 * colores (indigo #33507a y su profundo #26406a) y nada mas. Aqui no se importa
 * tokens.css porque la portada tiene sus propios planos -campo, panel, tarjeta-,
 * pero los valores son los mismos.
 *
 * Tres estados de tema, como pide la guia: `:root` es el claro; el oscuro se
 * define en la media query (cuando nadie eligio) y en [data-theme="dark"].
 * landing.js pone data-theme segun el sistema, porque el microscopio lee ESE
 * atributo para decidir campo claro u oscuro. */

:root {
  --marca: #33507a;
  --marca-hondo: #26406a;
  --marca-claro: #e6ecf8;
  --acento-txt: #33507a;          /* la marca como texto: rotulos, enlaces */
  --tinta: #20293a;
  --tinta-2: #3a445a;
  --tenue: #5a6478;
  --fondo: #e9eff8;
  --panel: rgba(250, 252, 255, .74);
  --tarjeta: rgba(255, 255, 255, .82);
  --borde: rgba(32, 41, 58, .09);
  --borde-2: rgba(32, 41, 58, .14);
  --sombra: 0 18px 48px rgba(22, 32, 62, .10);
  --velo: rgba(233, 239, 248, .72);   /* lo que aclara el campo detras del titulo */
  --btn-txt: #f6f8fd;
  --ok-txt: #2f6d5f;                  /* semaforo de la marca: exito */
  --ok-fondo: #e7f1ee;
  --campo:
    radial-gradient(42% 46% at 18% 24%, rgba(150, 180, 218, .26), transparent 70%),
    radial-gradient(48% 42% at 82% 62%, rgba(128, 158, 198, .22), transparent 72%),
    radial-gradient(34% 36% at 60% 14%, rgba(204, 224, 248, .30), transparent 70%),
    radial-gradient(110% 120% at 48% 40%, #eef3fa 0%, #d6e2f1 52%, #b3c6de 100%);
  --vineta: radial-gradient(80% 82% at 50% 45%, transparent 56%, rgba(38, 40, 72, .08) 82%,
                            rgba(20, 22, 46, .18) 100%);
  --fuente: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ancho: 1120px;
  --gutter: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acento-txt: #a9c1e6;
    --tinta: #e8edf7;
    --tinta-2: #c6cfe0;
    --tenue: #98a4ba;
    --fondo: #0a0d16;
    --panel: rgba(14, 19, 31, .72);
    --tarjeta: rgba(20, 27, 43, .80);
    --borde: rgba(214, 226, 245, .08);
    --borde-2: rgba(214, 226, 245, .14);
    --sombra: 0 18px 48px rgba(0, 0, 0, .40);
    --velo: rgba(10, 13, 22, .62);
    --marca-claro: rgba(143, 177, 227, .14);
    --ok-txt: #8fd0bd;
    --ok-fondo: rgba(47, 109, 95, .26);
    --campo:
      radial-gradient(40% 44% at 22% 28%, rgba(38, 54, 88, .55), transparent 70%),
      radial-gradient(44% 40% at 78% 64%, rgba(30, 44, 76, .48), transparent 72%),
      radial-gradient(120% 110% at 50% 38%, #10151f 0%, #0a0d16 55%, #05070c 100%);
    --vineta: radial-gradient(80% 80% at 50% 45%, transparent 54%, rgba(0, 0, 0, .34) 82%,
                              rgba(0, 0, 0, .56) 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --acento-txt: #a9c1e6;
  --tinta: #e8edf7;
  --tinta-2: #c6cfe0;
  --tenue: #98a4ba;
  --fondo: #0a0d16;
  --panel: rgba(14, 19, 31, .72);
  --tarjeta: rgba(20, 27, 43, .80);
  --borde: rgba(214, 226, 245, .08);
  --borde-2: rgba(214, 226, 245, .14);
  --sombra: 0 18px 48px rgba(0, 0, 0, .40);
  --velo: rgba(10, 13, 22, .62);
  --marca-claro: rgba(143, 177, 227, .14);
  --ok-txt: #8fd0bd;
  --ok-fondo: rgba(47, 109, 95, .26);
  --campo:
    radial-gradient(40% 44% at 22% 28%, rgba(38, 54, 88, .55), transparent 70%),
    radial-gradient(44% 40% at 78% 64%, rgba(30, 44, 76, .48), transparent 72%),
    radial-gradient(120% 110% at 50% 38%, #10151f 0%, #0a0d16 55%, #05070c 100%);
  --vineta: radial-gradient(80% 80% at 50% 45%, transparent 54%, rgba(0, 0, 0, .34) 82%,
                            rgba(0, 0, 0, .56) 100%);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  font: 400 16px/1.6 var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--tinta); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento-txt); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; }
section[id], main[id] { scroll-margin-top: 76px; }

/* ------------------------------------------------- el campo del microscopio */
/* Fijo detras de toda la pagina y MAS GRANDE que la ventana: el desenfoque de los
 * planos lejanos se come el borde del lienzo, y asi ese borde queda fuera de la
 * vista. Lo que se mueve al bajar no es el lienzo sino los organismos
 * (MICROSCOPIO.desplazar), asi que nunca se descubre un hueco. */
/* El marco tiene EXACTAMENTE el tamaño de la ventana y recorta: un fijo mas
 * grande que la pantalla ensancha la pagina en los navegadores del celular (la
 * hacia de 438 px en una pantalla de 390), aunque en escritorio no se note. */
.campo-marco {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; overflow: clip;
  pointer-events: none; background: var(--fondo);
}
.campo {
  position: absolute; inset: -56px; overflow: hidden;
  contain: layout paint;
  background: var(--campo);
}
.campo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--micro-grain); opacity: .22;
}
.campo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--vineta);
}
.micro-cv { position: absolute; inset: 0; display: block; }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
  background: var(--marca); color: var(--btn-txt);
  font: 600 15px/1 var(--fuente); letter-spacing: .005em; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--marca-hondo); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-quieto {
  background: var(--tarjeta); color: var(--tinta); border-color: var(--borde-2);
  backdrop-filter: blur(8px);
}
.btn-quieto:hover { background: var(--marca-claro); }

/* ---------------------------------------------------------------- cabecera */
.cab {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2));
  background: color-mix(in srgb, var(--fondo) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--borde);
}
.cab-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.cab-nombre { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.cab-nombre b { font-weight: 800; }
.cab-nav { display: flex; gap: 6px; margin-left: auto; }
.cab-nav a {
  padding: 8px 12px; border-radius: 9px; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--tinta-2);
}
.cab-nav a:hover { background: var(--marca-claro); color: var(--tinta); }

/* El logo va SIEMPRE en su disco de marca (BRAND.md: «dentro de un contenedor
 * circular con el color de marca»). */
.logo-disco {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--marca); color: #f4f2ea;
}
.logo-disco-chico { width: 26px; height: 26px; }
.logo-disco svg { display: block; }

/* ------------------------------------------------------------------- heroe */
main { position: relative; z-index: 1; }
.heroe {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex; align-items: center;
  padding: 56px max(var(--gutter), calc((100vw - var(--ancho)) / 2)) 72px;
  /* El velo del titulo sobresale a proposito; sin recortarlo aqui, en el
   * celular ensanchaba la pagina 48 px y se podia arrastrar de lado. */
  overflow-x: hidden; overflow-x: clip;
}
.heroe-txt { position: relative; max-width: 640px; }
/* El velo: una mancha suave del color del campo justo detras del texto. El
 * campo sigue viendose alrededor; debajo de las letras, no compite. */
.heroe-txt::before {
  content: ''; position: absolute; z-index: -1; inset: -12% -18% -14% -22%;
  background: radial-gradient(closest-side, var(--velo) 55%, transparent);
  pointer-events: none;
}
.ceja {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-txt); margin-bottom: 14px;
}
h1 {
  font-size: clamp(2.45rem, 1.35rem + 4.6vw, 4.9rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  max-width: 12.5ch;
}
.heroe-sub {
  margin-top: 22px; max-width: 34em;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.6; color: var(--tinta-2);
}
.heroe-acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heroe-pie { margin-top: 22px; font-size: 13.5px; color: var(--tenue); font-weight: 500; }

/* El ocular con la diatomea: solo cuando hay sitio al lado del texto. En el
 * celular el campo ya hace ese papel y la lente empujaria el titulo hacia abajo. */
.heroe-muestra { display: none; }
@media (min-width: 980px) {
  .heroe { justify-content: space-between; gap: 48px; }
  .heroe-muestra {
    display: block; flex: none;
    width: clamp(300px, 30vw, 430px); aspect-ratio: 1;
  }
}
.lente {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--acento-txt);
  background: radial-gradient(circle at 50% 44%, var(--tarjeta) 0%, transparent 72%);
  border: 1px solid var(--borde-2);
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--marca) 9%, transparent), var(--sombra);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* El anillo interior del ocular: la reticula de enfoque, apenas. */
.lente::before {
  content: ''; position: absolute; inset: 7%; border-radius: 50%;
  border: 1px solid var(--borde);
}
.lente-logo { display: block; width: 56%; }
.lente-logo svg { display: block; width: 100%; height: auto; }
/* La respiracion del logo (BRAND.md: escala sutil, 7 s). La culebra de dentro
 * la mueve brand.js, que ya respeta el movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  .lente-logo { animation: respira 7s ease-in-out infinite; }
}
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }

/* ---------------------------------------------------------------- bloques */
.bloque { padding: 0 var(--gutter) 28px; }
.bloque-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px; border: 1px solid var(--borde);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: var(--sombra);
}
h2 {
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.55rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.025em; max-width: 22ch;
}
.bloque-sub { margin-top: 14px; max-width: 36em; color: var(--tinta-2); font-size: 1.05rem; }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }

.rejilla {
  display: grid; gap: 14px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tarjeta {
  display: grid; align-content: start; gap: 10px;
  padding: 22px; border-radius: 16px;
  background: var(--tarjeta); border: 1px solid var(--borde);
}
.tarjeta p { color: var(--tinta-2); font-size: .97rem; line-height: 1.58; }
.tarjeta-ic {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--marca-claro); color: var(--acento-txt); margin-bottom: 4px;
}

/* Productos de la suite: seis tarjetas, tres por fila en escritorio. El estado
 * va en forma (pastilla) y en color de estado del semaforo de la marca, no en
 * el indigo: «disponible» es un hecho, no un adorno. */
.rejilla-prod { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.prod-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-cab .tarjeta-ic { margin-bottom: 0; }
.estado {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: var(--tenue); background: var(--borde);
}
.estado.on { color: var(--ok-txt); background: var(--ok-fondo); }
.prod-lnk {
  justify-self: start; margin-top: 2px;
  font-size: 14px; font-weight: 600; color: var(--acento-txt); text-decoration: none;
}
.prod-lnk::after { content: ' →'; }
.prod-lnk:hover { text-decoration: underline; }

/* Funciones de Analytics: tres grupos (4, 3 y 3). Con auto-fit cada grupo llena
 * su fila, asi que un grupo de tres no deja un hueco donde iria la cuarta. */
.funciones { display: grid; gap: 34px; margin-top: 34px; }
.grupo-t {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em;
  padding-bottom: 12px; border-bottom: 1px solid var(--borde-2);
}
.func-rejilla {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.func {
  display: grid; align-content: start; gap: 10px;
  padding: 18px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde);
}
/* Envuelve: a 360 px icono, titulo y una pastilla de estado no caben en una
 * fila, y la pastilla se salia de la tarjeta. */
.func-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.func-ic {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--marca-claro); color: var(--acento-txt);
}
.func h4 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.func .estado { margin-left: auto; flex: none; }
.func p { color: var(--tinta-2); font-size: .95rem; line-height: 1.55; }

/* Tres pasos de verdad (es una secuencia), por eso llevan numero. */
.pasos {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.pasos li {
  display: grid; align-content: start; gap: 8px;
  padding: 22px 4px 4px; border-top: 2px solid var(--borde-2);
}
.pasos p { color: var(--tinta-2); font-size: .97rem; line-height: 1.58; }
.paso-n {
  font: 600 13px/1 var(--mono); letter-spacing: .08em; color: var(--acento-txt);
  font-variant-numeric: tabular-nums;
}

.bloque-dos {
  display: grid; gap: 28px 48px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.lista-seg { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-seg li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  color: var(--tinta-2); font-size: .97rem; line-height: 1.45;
}
.lista-seg li > span {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--marca-claro); color: var(--acento-txt);
}

/* ------------------------------------------------------------------ entrar */
.bloque-entrar .bloque-in { text-align: left; }
.entrar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 560px; }
.entrar-campo {
  flex: 1 1 300px; min-width: 0;
  display: flex; align-items: center;
  min-height: 52px; padding: 0 16px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde-2);
  font: 500 16px/1 var(--mono);
  cursor: text; overflow: hidden;
}
.entrar-campo:focus-within { border-color: var(--acento-txt); box-shadow: 0 0 0 3px var(--marca-claro); }
/* El nombre y el dominio se leen como UNA direccion: el campo mide lo que lleva
 * escrito (landing.js le pone el ancho en `ch`, que en monoespaciada es exacto)
 * y el dominio va pegado detras. 16 px: con menos, Safari del iPhone hace zoom
 * al tocar el campo. */
.entrar-campo input {
  flex: 0 1 auto; min-width: 3ch; width: 11ch;
  border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; color: var(--tinta);
}
.entrar-campo input::placeholder { color: var(--tenue); opacity: .75; }
.entrar-dominio { flex: none; color: var(--tenue); white-space: nowrap; }
.entrar .btn { min-height: 52px; padding: 0 26px; }
.entrar-msg { min-height: 1.4em; margin-top: 10px; font-size: 14px; color: var(--tinta-2); }
.entrar-msg.mal { color: #b3372c; }
:root[data-theme="dark"] .entrar-msg.mal { color: #f09a8f; }
.entrar-nota { font-size: 14px; color: var(--tenue); }

/* -------------------------------------------------------------------- pie */
.pie {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 26px var(--gutter) 40px;
  font-size: 13px; color: var(--tenue); text-align: center;
}

/* ------------------------------------------------------------------ movil */
@media (max-width: 720px) {
  .cab { gap: 12px; }
  .cab-nav { display: none; }
  .cab .btn-sm { margin-left: auto; }
  .heroe { padding-top: 40px; padding-bottom: 48px; min-height: calc(92svh - 64px); }
  .heroe-acc .btn { flex: 1 1 100%; }
  .bloque { padding-bottom: 16px; }
  .bloque-in { border-radius: 20px; }
  .entrar .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .cab-nombre b { display: none; }
  .entrar-campo { padding: 0 12px; font-size: 15px; }
  .entrar-campo input { font-size: 16px; }
}