/* ==========================================================================
   SkyNet Localización — sistema visual propio  (2026-08-24)

   NO deriva de ss.css. Esa hoja es el lenguaje de Clientivo y los dos sitios
   se veían hermanos porque cargaban el MISMO archivo cambiándole el matiz del
   acento. Aquí SkyNet tiene lo suyo.

   Idea rectora: el producto es un TABLERO. Dice dónde está, si prendió y si le
   pasó algo. Entonces la página se comporta como instrumento y no como folleto:

     · oscuro por default        — se mira de noche, como el tablero de un carro
     · ámbar = luz de aviso      — el acento sólo señala, nunca decora
     · verde = estado reportando — semántico, jamás de adorno
     · esquinas de 4px           — paneles, no tarjetas
     · filetes de 1px, cero sombra — la profundidad la da el tinte, no el blur
     · toda cifra en monoespaciada tabular — los datos se alinean

   Tipografía: Archivo (display, grotesca industrial) + IBM Plex Sans (cuerpo,
   de origen ingenieril) + IBM Plex Mono (datos). Nada de Inter/Manrope: ese par
   es justo lo que hacía que este sitio y Clientivo se vieran igual.
   ========================================================================== */

/* ---------- fichas de color ---------------------------------------------- */
/* Oscuro es el estado BASE de esta marca. El claro existe para quien lo pida. */
:root{
  --ground:#0A1424;
  --ground-2:#0D1829;
  --panel:#111E33;
  --panel-hi:#16243C;
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);

  --text:#E9EFF8;
  --text-soft:#B2C0D4;
  --text-mute:#7F90A7;

  --signal:#E07B00;       /* = --sk-brand de la app. RELLENO: universal.   */
  --signal-hi:#FFA22B;    /* TINTA ambar: se ajusta al fondo del tema.     */
  --signal-ink:#1A0E00;   /* = --sk-on-warning. Tinta SOBRE el relleno.    */
  --signal-soft:rgba(224,123,0,.13);
  --signal-line:rgba(255,162,43,.42);

  /* EXITO y ALERTA, partidos en RELLENO y TINTA igual que en la app.
     Estaban sin partir y se usaban para las dos cosas: #3DDC84 como fondo
     dejaba texto ilegible encima, y #15803D como texto sobre el fondo oscuro
     del sitio da 3.10. El relleno es universal; la tinta se ajusta.        */
  --live:#15803D;         /* = --sk-success de la app. RELLENO.            */
  --live-ink:#3DDC84;     /* TINTA sobre fondo oscuro: 8.71               */
  --live-soft:rgba(61,220,132,.13);
  --alert:#C81E1E;        /* = --sk-danger de la app. RELLENO.            */
  --alert-ink:#F87171;    /* = --sk-danger-ink oscuro de la app: 5.62     */

  /* ---------- puente con la paleta de la app -------------------------------
     spec 002-paleta-unificada · 2026-08-26. Los nombres --sk-* son los mismos
     que usa la app, para que el sitio y la app no tengan dos vocabularios.

     Sobre los DOS ambares, que NO son duplicados y a alguien le van a parecer:
       --sk-brand      es el ambar de RELLENO e identidad. Siempre #E07B00, con
                       tinta OSCURA encima. Nunca blanco: da 3.00.
       --signal-hi     es el ambar de TEXTO sobre fondo oscuro (#FFA22B, 8.83).
                       En tema claro se oscurece a #8F4B00 mas abajo.
     Son dos trabajos distintos. Borrar uno rompe el otro.                  */
  --sk-primary:#2563EB;
  --sk-success:#15803D;
  --sk-danger:#C81E1E;
  --sk-warning:#E07B00;
  --sk-brand:#E07B00;
  --sk-info:#0E7490;
  --sk-neutral:#64748B;
  --sk-surface-dark:#111827;
  --sk-on-color:#FFFFFF;
  --sk-on-warning:#1A0E00;

  --rad:4px;
  --rad-sm:2px;
  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --maxw:1240px;

  /* Alias para /revendedores/, que se escribio ANTES de esta hoja y pide nombres
     que aqui ya no existen. Sin ellos esa pagina pierde el enfasis en silencio:
     el encabezado de la tabla de tarifas y la fila destacada se quedaban sin
     fondo, y la caja del ejemplo sin su cabecera. Se resuelve con alias y no
     reescribiendo la pagina, que funciona bien en todo lo demas.
     Van con var() a proposito: asi siguen solos al tema claro. */
  --accent:var(--signal);
  --accent-soft:var(--signal-soft);
  --surface-2:var(--panel-hi);
  --rad-lg:6px;
}

html.light{
  --ground:#EFEDE8;          /* papel de etiqueta de tablero, no blanco puro */
  --ground-2:#E7E4DD;
  --panel:#FBFAF7;
  --panel-hi:#FFFFFF;
  --line:rgba(10,20,36,.16);
  --line-soft:rgba(10,20,36,.08);

  --text:#0A1424;
  --text-soft:#33455F;
  --text-mute:#4A5C73;    /* era #65788F: 3.57 sobre --ground-2, y lo usan 73
                             elementos. Ahora 5.39.                        */

  /* CORREGIDO 2026-08-27: --signal es el RELLENO y valia #B45309, que es la
     TINTA de la app. Rol cambiado de sitio. Ahora vale #E07B00 como en la app,
     y su tinta encima es la oscura — antes era BLANCA, que sobre #E07B00 da
     3.00 y rompe la regla de Alonso de nunca texto blanco sobre naranja.   */
  --signal:#E07B00;
  --signal-hi:#8F4B00;    /* TINTA ambar del tema claro: 5.21 sobre sus fondos */
  --signal-ink:#1A0E00;
  --signal-soft:rgba(180,95,0,.10);
  --signal-line:rgba(180,95,0,.34);

  --live:#15803D;         /* mismo relleno que la app y que el tema oscuro */
  --live-ink:#166534;     /* TINTA sobre los fondos claros del sitio: 5.62 */
  --live-soft:rgba(15,122,61,.11);
  --alert:#C81E1E;        /* = --sk-danger de la app                      */
  --alert-ink:#C81E1E;    /* 4.52 sobre los fondos claros del sitio        */
}

/* ---------- base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}}
body{margin:0;background:var(--ground);color:var(--text);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.02em;
  line-height:1.08;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--signal-hi);outline-offset:3px;border-radius:var(--rad-sm)}
::selection{background:var(--signal);color:var(--signal-ink)}

.container,.sk-wrap{width:min(var(--maxw),calc(100% - 40px));margin-inline:auto}
/* Toda cifra va tabular: es lo que hace que una columna de datos se lea como
   instrumento y no como texto corrido. */
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

/* ---------- barra superior ------------------------------------------------ */
/* Se comporta como la franja de estado de un tablero: fina, fija, con filete. */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:62px;
  width:min(var(--maxw),calc(100% - 40px));margin-inline:auto;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{height:26px;width:auto}

/* ============================================================================
   LOGOTIPO EN TRAZOS — 2026-08-27
   Antes eran dos PNG con el color horneado (logo.png / logo_dark.png), y por
   eso el «NET» no podia seguir al tema: medido, #E07B00 sobre la cabecera
   clara #F0EDE8 da 2.57, muy por debajo del minimo. Con el token da 5.67.

   Va por MASCARA y no en linea como en la app: son diez paginas estaticas, y
   una mascara externa se cachea UNA vez en vez de repetir 33 KB por pagina.
   El color lo pone el CSS, asi que sigue al tema igual que el resto.
   ============================================================================ */
.sk-logo{
  position:relative; display:inline-block;
  height:26px; width:auto; aspect-ratio:2850/600; flex:none;
}
.sk-logo>i{
  position:absolute; inset:0; display:block;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:center;  mask-position:center;
}
.sk-logo-mark{
  background:var(--text);
  -webkit-mask-image:url(../static/img/logo-mark.svg);
  mask-image:url(../static/img/logo-mark.svg);
}
.sk-logo-net{
  background:var(--signal-hi);
  -webkit-mask-image:url(../static/img/logo-net.svg);
  mask-image:url(../static/img/logo-net.svg);
}
.brand .logo-dk{display:none}
html:not(.light) .brand .logo-lt{display:none}
html:not(.light) .brand .logo-dk{display:block}
.brand-sub{font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);
  padding-left:10px;margin-left:2px;border-left:1px solid var(--line)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  text-decoration:none;padding:9px 10px;border-radius:var(--rad-sm);
  transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:var(--line-soft)}
.nav-cta,.nav-links a.nav-cta{font-family:var(--font-mono);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);
  background:var(--signal);border:1px solid var(--signal);border-radius:var(--rad);
  padding:10px 16px;margin-left:8px;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s}
.nav-cta:hover,.nav-links a.nav-cta:hover{background:var(--signal-hi);
  border-color:var(--signal-hi);color:var(--signal-ink)}
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  background:transparent;color:var(--text-mute);border:1px solid var(--line);
  border-radius:var(--rad);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.theme-toggle:hover{color:var(--signal-hi);border-color:var(--signal-line)}
.theme-toggle svg{width:15px;height:15px}

/* menú de teléfono: la hoja vieja escondía los enlaces y no dejaba sustituto */
.sk-menu-btn{display:none;place-items:center;width:34px;height:34px;flex:none;
  background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:var(--rad);cursor:pointer;padding:0}
.sk-menu-btn svg{width:17px;height:17px}
.sk-menu{display:none}

/* ---------- botones ------------------------------------------------------- */
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:15px 26px;border-radius:var(--rad);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.sk-btn-1{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.sk-btn-1:hover{background:var(--signal-hi);border-color:var(--signal-hi)}
.sk-btn-2{background:transparent;color:var(--text);border-color:var(--line)}
.sk-btn-2:hover{border-color:var(--signal-hi);color:var(--signal-hi)}
.sk-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sk-link{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:3px}
.sk-link:hover{color:var(--signal-hi);border-color:var(--signal-hi)}

/* ---------- rótulos y encabezados de sección ------------------------------ */
/* El antetítulo es una ETIQUETA de instrumento: mono, versalitas, con guion. */
.sk-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal-hi);margin:0 0 16px}
.sk-eyebrow::before{content:"";width:26px;height:1px;background:var(--signal);flex:none}
.sk-head{max-width:56ch;margin:0 0 44px}
.sk-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.028em}
.sk-head p{font-size:1.05rem;line-height:1.62;color:var(--text-mute);margin:16px 0 0;max-width:54ch}
.sk-sec{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line-soft)}
.sk-sec.tint{background:var(--ground-2);border-top:1px solid var(--line-soft)}

/* ---------- hero ---------------------------------------------------------- */
.sk-hero{padding:clamp(52px,6.5vw,88px) 0 clamp(48px,6vw,76px);
  border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
/* Un halo ámbar bajísimo: la luz de un tablero encendido, no un degradado de plantilla. */
.sk-hero::before{content:"";position:absolute;top:-40%;right:-6%;width:56%;height:130%;
  background:radial-gradient(closest-side,var(--signal-soft),transparent 74%);pointer-events:none}
.sk-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(32px,4.5vw,56px);align-items:center;position:relative}
.sk-hero h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:700;letter-spacing:-.035em;
  margin:0 0 20px}
.sk-hero h1 em{font-style:normal;color:var(--signal-hi)}
.sk-hero-sub{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.62;color:var(--text-soft);
  margin:0 0 30px;max-width:48ch}
.sk-hero-pie{margin:26px 0 0;font-size:.88rem;line-height:1.7;color:var(--text-mute)}
.sk-hero-media img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--rad)}

/* Testigo de estado: el punto que late es un LED, no un adorno. */
.sk-live{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--live-ink);background:var(--live-soft);
  border:1px solid color-mix(in srgb,var(--live) 32%,transparent);
  border-radius:var(--rad-sm);padding:7px 12px;margin:0 0 22px}
.sk-live i{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  animation:led 2.4s ease-out infinite}
@keyframes led{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.sk-live i{animation:none}}

/* ---------- lectura de datos ---------------------------------------------- */
/* Cuatro celdas separadas por filete, como una fila de indicadores. */
.sk-datos{background:var(--panel);border-block:1px solid var(--line);padding:0}
.sk-datos-in{display:grid;grid-template-columns:repeat(4,1fr)}
.sk-dato{padding:26px 26px 24px;border-left:1px solid var(--line)}
.sk-dato:first-child{border-left:0}
.sk-dato dt{font-family:var(--font-mono);font-size:clamp(1.35rem,2.3vw,1.85rem);
  font-weight:600;letter-spacing:-.02em;color:var(--signal-hi);
  font-variant-numeric:tabular-nums;line-height:1.1}
.sk-dato dd{margin:8px 0 0;font-size:.85rem;line-height:1.5;color:var(--text-mute)}

/* ---------- filas alternadas ---------------------------------------------- */
/* Las capturas son de TELEFONO (390x844), no apaisadas. El producto es una app
   de telefono y tomarlas en horizontal cortaba cosas: el panel del corte de
   motor salia mochado. Al ser verticales, la columna de imagen se estrecha y la
   del texto se lleva el ancho. El monitor es la excepcion y conserva el suyo. */
.sk-fila{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,52px);align-items:center}
.sk-fila.invertida{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.sk-fila:has(.sk-mon){grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr)}
.sk-fila.invertida:has(.sk-mon){grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr)}
.sk-fila.invertida .sk-fila-txt{order:2}
/* Entre dos filas: ~104px en escritorio, no 168. El problema medido no era que
   sobrara aire, era la JERARQUIA: entre dos secciones hay 208px (104+104) y
   entre dos filas habia 168 (84+84). Un 24% de diferencia no lo lee el ojo, y
   la pagina se sentia como una lista larga de bloques iguales. Con 104 la
   separacion de seccion es el DOBLE que la de fila, que si se lee. */
.sk-fila+.sk-fila{margin-top:clamp(32px,4vw,52px);padding-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--line-soft)}
.sk-fila h3{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:700;margin:0 0 12px}
.sk-fila p{font-size:1rem;line-height:1.66;color:var(--text-soft);margin:0 0 18px;max-width:48ch}
/* La captura de telefono va acotada y centrada: a ancho completo de columna
   quedaria descomunal. El filete de 1px y las esquinas de 4px son el mismo
   tratamiento de panel del resto del sistema — NO lleva marco de telefono, que
   se reserva para el hero y el copiloto, donde el aparato ES el argumento.
   Repetir el bisel en cada seccion lo vuelve papel tapiz. */
/* Se acota por ALTO, no por ancho: a ancho completo la captura vertical medía
   712px contra 197px del texto, y la fila quedaba con medio metro de aire
   muerto. El limite manda sobre el ancho porque `width` va en auto — con
   width:100% el max-height aplastaria la imagen en vez de encogerla.

   NO le pongas `display` a este selector: `.sk-fila-media img` pesa (0,1,1) y
   le gana a `.sk-shot-light{display:none}`, que pesa (0,1,0). Con display:block
   se mostraban LAS DOS capturas —la del tema claro y la del oscuro, una debajo
   de otra— y la fila medía 1200px. El display lo pone .sk-shot-dark/-light. */
.sk-fila-media img{width:auto;height:auto;max-width:min(320px,100%);max-height:600px;
  margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--rad)}
/* El monitor manda sobre lo anterior: ni se acota ni lleva filete propio,
   porque ya va dentro de su bisel. */
.sk-fila-media .sk-mon img{width:100%;height:100%;max-width:none;max-height:none;
  margin-inline:0;border:0;border-radius:0}
/* Las "marcas" son etiquetas de capacidad: mono, cuadradas, sin relleno. */
.sk-marcas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sk-marcas li{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-mute);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:6px 11px}

/* ---------- sección de avisos --------------------------------------------- */
.sk-noche{background:var(--panel);border-block:1px solid var(--line);
  padding:clamp(68px,8.5vw,110px) 0;position:relative;overflow:hidden}
.sk-noche::before{content:"";position:absolute;top:-30%;right:-8%;width:56%;height:120%;
  background:radial-gradient(closest-side,var(--signal-soft),transparent 72%);pointer-events:none}
.sk-noche-in{position:relative}
.sk-noche h2{font-size:clamp(1.9rem,3.5vw,2.85rem);font-weight:700;max-width:20ch;
  letter-spacing:-.03em}
.sk-noche-lede{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.64;color:var(--text-soft);
  margin:18px 0 0;max-width:52ch}
.sk-noche-lede strong{color:var(--text);font-weight:600}
.sk-noche-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.sk-noche-pie{margin:34px 0 0;font-size:.92rem;line-height:1.66;color:var(--text-mute);max-width:62ch}
/* Letra chica del requisito de iOS. Va dicha, no escondida: todo el argumento
   del sitio es "tu telefono suena", y en iPhone eso necesita 16.4 o superior.
   Callarlo es la peor conversacion posventa que existe. */
.sk-noche-nota{margin:12px 0 0;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.02em;color:var(--text-mute);opacity:.85;max-width:62ch}
.sk-noche-pie a{color:var(--signal-hi);text-decoration:none;border-bottom:1px solid var(--signal-line)}

/* Panel de aviso. El "fijo" lleva filete ámbar: es el que no se puede apagar. */
.sk-aviso{background:var(--panel-hi);border:1px solid var(--line);border-radius:var(--rad);
  padding:26px}
.sk-aviso.fija{border-color:var(--signal-line);background:var(--signal-soft)}
.sk-aviso h3{font-size:1.12rem;font-weight:700}
.sk-aviso .sk-tag{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin:9px 0 18px}
.sk-aviso.fija .sk-tag{color:var(--signal-hi)}
.sk-aviso ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sk-aviso li{font-size:.94rem;line-height:1.5;color:var(--text-soft);
  padding:10px 0 10px 22px;position:relative;border-top:1px solid var(--line-soft)}
.sk-aviso li:first-child{border-top:0;padding-top:0}
.sk-aviso li::before{content:"";position:absolute;left:0;top:1.05em;width:7px;height:7px;
  border-radius:50%;border:1px solid var(--text-mute)}
.sk-aviso li:first-child::before{top:.5em}
.sk-aviso.fija li::before{border-color:var(--signal-hi);background:var(--signal-hi)}
.sk-aviso .sk-nota{font-size:.86rem;line-height:1.58;color:var(--text-mute);margin:18px 0 0;
  padding-top:15px;border-top:1px solid var(--line)}

/* ---------- paneles genéricos --------------------------------------------- */
.sk-rej{display:grid;gap:18px}
.sk-rej.c3{grid-template-columns:repeat(3,1fr)}
.sk-rej.c2{grid-template-columns:repeat(2,1fr)}
.sk-caja{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:26px;display:flex;flex-direction:column}
.sk-caja.foto{padding:0;overflow:hidden}
.sk-caja.foto>img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid var(--line)}
.sk-caja-txt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.sk-caja h3{font-size:1.1rem;font-weight:700;margin:0 0 5px}
.sk-caja .sk-tag{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--signal-hi);margin:0 0 16px}
.sk-caja p{font-size:.94rem;line-height:1.62;color:var(--text-soft);margin:0 0 12px}
.sk-caja ul{list-style:none;margin:0;padding:0;display:grid}
.sk-caja li{font-size:.92rem;line-height:1.5;color:var(--text-soft);
  padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--line-soft)}
.sk-caja li:first-child{border-top:0;padding-top:0}
.sk-caja li::before{content:"";position:absolute;left:1px;top:1.02em;width:5px;height:5px;
  background:var(--signal);border-radius:var(--rad-sm)}
.sk-caja li:first-child::before{top:.55em}
.sk-caja .sk-nota{font-size:.86rem;line-height:1.58;color:var(--text-mute);margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.sk-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;margin:0 0 16px;
  color:var(--signal-hi);border:1px solid var(--signal-line);border-radius:var(--rad-sm);
  background:var(--signal-soft)}
.sk-ico svg{width:17px;height:17px}

/* ---------- precios ------------------------------------------------------- */
.sk-precios{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.sk-plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:30px}
.sk-plan.elegido{border-color:var(--signal-line);background:var(--panel-hi)}
.sk-plan .sk-tag{display:inline-block;font-family:var(--font-mono);font-size:.64rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-hi);
  border:1px solid var(--signal-line);border-radius:var(--rad-sm);padding:5px 10px;margin:0 0 16px}
.sk-plan h3{font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute)}
.sk-monto{font-family:var(--font-mono);font-size:clamp(2.4rem,4.2vw,3.1rem);font-weight:600;
  letter-spacing:-.035em;line-height:1;color:var(--signal-hi);margin:10px 0 0;
  font-variant-numeric:tabular-nums}
.sk-monto small{display:block;font-family:var(--font-sans);font-size:.85rem;font-weight:400;
  letter-spacing:0;color:var(--text-mute);margin-top:11px}
.sk-plan ul{list-style:none;margin:24px 0 0;padding:0;display:grid}
.sk-plan li{font-size:.93rem;line-height:1.5;color:var(--text-soft);
  padding:10px 0 10px 24px;position:relative;border-top:1px solid var(--line-soft)}
.sk-plan li:first-child{border-top:0;padding-top:0}
/* La palomita se DIBUJA con bordes. El carácter "✓" no viene en estas fuentes y
   se quedaba invisible sin avisar (pasó en la versión anterior de este sitio). */
.sk-plan li::before{content:"";position:absolute;left:4px;top:1.02em;width:5px;height:9px;
  border:solid var(--live);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sk-plan li:first-child::before{top:.28em}
.sk-plan .sk-nota{font-size:.86rem;line-height:1.58;color:var(--text-mute);margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--line)}
.sk-precio-pie{margin:28px auto 0;font-size:.95rem;line-height:1.66;color:var(--text-mute);
  max-width:64ch;text-align:center}
.sk-precio-pie a{color:var(--signal-hi);text-decoration:none;border-bottom:1px solid var(--signal-line)}

/* ---------- cierre -------------------------------------------------------- */
.sk-cierre{background:var(--panel);border-top:1px solid var(--line);
  padding:clamp(60px,7.5vw,92px) 0;text-align:center;position:relative;overflow:hidden}
.sk-cierre::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 120% at 50% 0%,var(--signal-soft),transparent 70%);pointer-events:none}
.sk-cierre-in{position:relative}
.sk-cierre h2{font-size:clamp(1.8rem,3.3vw,2.5rem);font-weight:700;letter-spacing:-.03em;
  margin:0 0 14px}
.sk-cierre p{font-size:1.02rem;line-height:1.62;color:var(--text-mute);margin:0 0 30px}
.sk-cierre .sk-ctas{justify-content:center}

/* ---------- pie ----------------------------------------------------------- */
.footer{background:var(--ground-2);border-top:1px solid var(--line);
  padding:clamp(44px,5vw,64px) 0 26px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.footer-about p{color:var(--text-mute);line-height:1.66;margin:16px 0 0;max-width:38ch}
.footer-about .brand{margin-bottom:2px}
.footer h4{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-mute);margin:0 0 14px}
.footer-grid>div>a{display:block;color:var(--text-soft);text-decoration:none;padding:6px 0;
  transition:color .15s}
.footer-grid>div>a:hover{color:var(--signal-hi)}
.footer-about a{color:var(--text-soft);text-decoration:none}
.footer-about a:hover{color:var(--signal-hi)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-mute)}

/* ---------- responsivo ---------------------------------------------------- */
@media (max-width:960px){
  .sk-hero-grid{grid-template-columns:1fr}
  .sk-hero-media{order:-1}
  .sk-fila,.sk-fila.invertida{grid-template-columns:1fr;gap:26px}
  .sk-fila.invertida .sk-fila-txt{order:0}
  .sk-rej.c3{grid-template-columns:repeat(2,1fr)}
  .sk-datos-in{grid-template-columns:repeat(2,1fr)}
  .sk-dato:nth-child(odd){border-left:0}
  .sk-dato:nth-child(n+3){border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
/* El menu de hamburguesa entra a los 1080px, NO a los 860.
   Medido: la barra de escritorio ocupa 1072px (marca 254 + enlaces 780 + huecos)
   y esos enlaces no encogen. Con el corte en 860 quedaba una franja muerta de
   861 a 1071 px donde ni cabia la barra ni habia menu: la pagina se desplazaba
   en horizontal —160px en un Surface Duo, 48 en un iPad de 1024—. Ahi caen el
   iPad vertical y horizontal, o sea trafico de verdad. */
@media (max-width:1080px){
  .nav-links a:not(.nav-cta){display:none}
  .sk-menu-btn{display:grid}
  .sk-menu{display:block;position:absolute;left:-20px;right:-20px;top:100%;
    background:var(--panel);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .22s ease}
  .sk-menu[data-abierto="1"]{max-height:76vh;overflow:auto}
  .sk-menu ul{list-style:none;margin:0;padding:4px 20px 14px;display:grid}
  .sk-menu a{display:block;padding:14px 2px;color:var(--text-soft);text-decoration:none;
    font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
    border-top:1px solid var(--line-soft)}
  .sk-menu li:first-child a{border-top:0}
  .sk-menu a:hover{color:var(--signal-hi)}
}
@media (max-width:640px){
  .sk-rej.c3,.sk-rej.c2,.sk-precios,.sk-noche-grid{grid-template-columns:1fr}
  .sk-datos-in{grid-template-columns:1fr}
  .sk-dato{border-left:0;border-top:1px solid var(--line)}
  .sk-dato:first-child{border-top:0}
  .sk-btn{width:100%}
  .sk-link{align-self:center;margin-top:2px}
  .footer-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
}

/* ==========================================================================
   CAPA DE COMPATIBILIDAD
   /revendedores/ y /socios/ traen el marcado que armamos sobre ss.css
   (.hero, .section, .card, .btn…). En vez de reescribirles el HTML, aqui se
   traducen esos nombres al lenguaje de instrumento de SkyNet, para que los
   tres documentos se vean del mismo sitio.
   ========================================================================== */

.hero{padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,68px);
  border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-40%;right:-6%;width:56%;height:130%;
  background:radial-gradient(closest-side,var(--signal-soft),transparent 74%);pointer-events:none}
.hero .container{position:relative}
.hero-grid{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
.hero-grid.has-media{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.035em;margin:0 0 18px}
.hero-sub{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.62;color:var(--text-soft);
  margin:0 0 28px;max-width:50ch}
.hero-media img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--rad)}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-mute)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note i{color:var(--live-ink)}

/* La "pill" era una pastilla suave de SaaS; aqui es un testigo de estado. */
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--live-ink);background:var(--live-soft);
  border:1px solid color-mix(in srgb,var(--live) 32%,transparent);
  border-radius:var(--rad-sm);padding:7px 12px;margin:0 0 20px}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  animation:led 2.4s ease-out infinite}

.section{padding:clamp(60px,7.5vw,96px) 0;border-top:1px solid var(--line-soft)}
.section.alt{background:var(--ground-2)}
.section-head{max-width:56ch;margin:0 0 40px}
.section-head h2{font-size:clamp(1.85rem,3.3vw,2.6rem);font-weight:700;letter-spacing:-.028em}
.section-head p{font-size:1.02rem;line-height:1.62;color:var(--text-mute);margin:14px 0 0}

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:24px;display:flex;flex-direction:column}
.card.destaca{border-color:var(--signal-line);background:var(--panel-hi)}
.card h3{font-size:1.08rem;font-weight:700;margin:0 0 6px}
.card .tagline{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal-hi);margin:0 0 14px}
.card .prose p,.card>p{font-size:.94rem;line-height:1.62;color:var(--text-soft);margin:0 0 10px}
.card ul{list-style:none;margin:0;padding:0;display:grid}
.card li{font-size:.92rem;line-height:1.5;color:var(--text-soft);
  padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--line-soft)}
.card li:first-child{border-top:0;padding-top:0}
.card li::before{content:"";position:absolute;left:1px;top:1.02em;width:5px;height:5px;
  background:var(--signal);border-radius:var(--rad-sm)}
.card li:first-child::before{top:.55em}
.card-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;margin:0 0 15px;
  color:var(--signal-hi);border:1px solid var(--signal-line);border-radius:var(--rad-sm);
  background:var(--signal-soft);font-size:.95rem}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 24px;border-radius:var(--rad);text-decoration:none;
  border:1px solid var(--line);color:var(--text);background:transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.btn-primary:hover{background:var(--signal-hi);border-color:var(--signal-hi);color:var(--signal-ink)}
.btn-ghost:hover{border-color:var(--signal-hi);color:var(--signal-hi)}
/* El verde de WhatsApp gritaba mas que la marca y se llevaba el clic: aqui es secundario. */
.btn-wa{background:transparent;color:var(--live-ink);border-color:color-mix(in srgb,var(--live) 42%,transparent)}
.btn-wa:hover{background:var(--live-soft);color:var(--live-ink);border-color:var(--live)}

.cta-band{background:var(--panel);border-top:1px solid var(--line);
  padding:clamp(56px,7vw,88px) 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 120% at 50% 0%,var(--signal-soft),transparent 70%);pointer-events:none}
.cta-band .container{position:relative}
.cta-band h2{font-size:clamp(1.75rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.03em;margin:0 0 12px}
.cta-band p{color:var(--text-mute);margin:0 0 28px}
.cta-band .btn-row{justify-content:center}

/* piezas propias de /revendedores/ */
.rv-lede{font-size:1.05rem;line-height:1.66;color:var(--text-soft);max-width:60ch;margin:0 0 32px}
.rv-tabla{width:100%;border-collapse:collapse;font-size:.94rem;
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.rv-tabla th{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);text-align:left;
  padding:13px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.rv-tabla td{padding:13px 16px;border-top:1px solid var(--line-soft);color:var(--text-soft);
  font-variant-numeric:tabular-nums}
.rv-tabla tr.destaca td{background:var(--signal-soft);color:var(--text)}
.rv-tabla .num,.rv-tabla td:last-child{font-family:var(--font-mono)}
.rv-nota{font-size:.88rem;line-height:1.6;color:var(--text-mute);margin:18px 0 0}
.rv-reglas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rv-reglas li{font-size:.96rem;line-height:1.55;color:var(--text-soft);
  padding:13px 0 13px 24px;position:relative;border-top:1px solid var(--line-soft)}
.rv-reglas li:first-child{border-top:0}
.rv-reglas li::before{content:"";position:absolute;left:2px;top:1.35em;width:6px;height:6px;
  background:var(--signal);border-radius:var(--rad-sm)}
.rv-reglas li:first-child::before{top:.85em}
.rv-cuenta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--signal-hi)}

@media (max-width:960px){
  .hero-grid.has-media{grid-template-columns:1fr}
  .hero-media{order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid,.grid.two{grid-template-columns:1fr}
  .btn{width:100%}
  .rv-tabla{display:block;overflow-x:auto}
}

/* Cuatro elementos en una rejilla de tres dejan uno huerfano con un hueco al
   lado — el mismo defecto que se corrigio en la portada. Con exactamente
   cuatro, van de dos en dos. */
.grid:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.grid:has(> :last-child:nth-child(4)){grid-template-columns:1fr}}

/* ==========================================================================
   CAPTURAS QUE SIGUEN AL TEMA
   La app tiene su propio claro/oscuro. Si el sitio esta oscuro y la captura
   viene clara, la pagina se ve rota. Van las dos imagenes y se turnan por CSS:
   sin JavaScript, sin parpadeo y sin depender del orden de carga.
   ========================================================================== */
.sk-shot-light{display:none}
.sk-shot-dark{display:block}
html.light .sk-shot-light{display:block}
html.light .sk-shot-dark{display:none}

/* ==========================================================================
   MODO COPILOTO — telefono dibujado con CSS que se inclina
   ==========================================================================
   Por que un marco y no el video pelon: lo que se vende NO es la foto de la
   calle, es el GESTO — que giras el telefono y la vista gira contigo. Sin un
   telefono en pantalla, el video parece un mapa cualquiera.

   El marco se inclina solo, poquito, en el mismo ciclo de 8 s que dura el clip,
   para que se lea "alguien esta volteando el telefono". El clip de adentro se
   grabo arrastrando el Street View: es lo mismo que hace el acelerometro.
   ========================================================================== */

.sk-copiloto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center}

.sk-tel-caja{display:grid;place-items:center;perspective:1400px}

/* El telefono: cuerpo, bisel y pantalla. Sin imagenes, todo dibujado. */
.sk-tel{
  --ancho:270px;
  /* La proporcion 390:720 la fija ahora la PANTALLA, no el marco. Puesta aqui,
     el bisel se comia 3-4% del ancho del clip: el hueco interior quedaba en
     0.523 y el video es 0.542, asi que `object-fit:cover` recortaba los bordes
     y en el telefono se leia "ista Detallada" en vez de "Lista Detallada".
     Con la proporcion en la pantalla, el alto del marco sale de sumarle el
     bisel, y se corrige solo si algun dia cambia el relleno. */
  width:var(--ancho);position:relative;
  border-radius:calc(var(--ancho)*.13);
  padding:calc(var(--ancho)*.032);
  /* Cuerpo tomado del .device-frame de crm2026.smartsystems.work: metal cepillado
     con siete paradas, para que los sitios de la casa usen el mismo telefono. */
  background:linear-gradient(145deg,#4a4e57,#2b2e34 16%,#16181c 34%,#3c4049,#14161a 66%,#2e3138 84%,#474b54);
  border:1px solid #ffffff1f;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
  transform-style:preserve-3d;
  animation:sk-voltea 8s ease-in-out infinite;
}
html.light .sk-tel{
  background:linear-gradient(145deg,#e7e9ec,#b6bac1 16%,#888d95 34%,#d6d9dd,#82868e 66%,#b2b6bd 84%,#e3e5e9);
  border:1px solid #ffffff59;
  box-shadow:0 26px 52px -22px rgba(10,20,36,.4)}

.sk-tel-pantalla{width:100%;height:auto;aspect-ratio:390/720;overflow:hidden;
  border-radius:calc(var(--ancho)*.1);background:#000;position:relative;
  display:flex;flex-direction:column}
.sk-tel-pantalla video,.sk-tel-pantalla img{width:100%;flex:1;min-height:0;
  object-fit:cover;object-position:top center;display:block}

/* El clip se turna con el tema, igual que las capturas: en oscuro se graba la app
   en oscuro y en claro en claro, para que el telefono no desentone del sitio. */
.sk-tel .sk-clip-light{display:none}
.sk-tel .sk-clip-dark{display:flex}
html.light .sk-tel .sk-clip-light{display:flex}
html.light .sk-tel .sk-clip-dark{display:none}

/* Sin pastilla de camara: el video ocupa la pantalla completa (Alonso, 2026-08-25).
   La pastilla tapaba pixeles del clip y no aportaba nada al argumento. */
/* Boton lateral */
.sk-tel::after{content:"";position:absolute;right:calc(var(--ancho)*-.008);
  top:26%;width:calc(var(--ancho)*.012);height:12%;border-radius:99px;
  background:linear-gradient(180deg,#3A4657,#222C3A)}

/* El gesto lo manda el VIDEO, no un reloj aparte.
   Antes el teléfono giraba con su propia animación de 8 s y el clip con la suya:
   iban en sentido contrario (lo cazó Alonso: "volteé el teléfono a la izquierda y
   el Street View se va a la derecha") y ademas se desfasaban solos con el tiempo.
   Ahora un guión lee `currentTime` del clip y calcula la inclinación, así que
   coinciden siempre. Este keyframe queda solo de respaldo si el JS no corre. */
@keyframes sk-voltea{
   0%   {transform:rotateY(0deg)}
  25%   {transform:rotateY(-10deg)}
  50%   {transform:rotateY(0deg)}
  75%   {transform:rotateY(10deg)}
 100%   {transform:rotateY(0deg)}
}
/* Si el visitante pidio menos movimiento, el telefono se queda quieto y el
   video no se reproduce solo. */
@media (prefers-reduced-motion:reduce){
  .sk-tel{animation:none;transform:rotateY(-6deg)}
}

/* La mano que lo sostiene, sugerida con una sombra: da peso sin dibujar una mano. */
.sk-tel-caja::after{content:"";position:absolute;width:60%;height:14px;
  border-radius:50%;background:rgba(0,0,0,.45);filter:blur(14px);
  transform:translateY(calc(var(--sombra,0px) + 190px));pointer-events:none}

.sk-copiloto-txt h3{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:700;margin:0 0 14px}
.sk-copiloto-txt p{font-size:1.02rem;line-height:1.68;color:var(--text-soft);margin:0 0 16px;max-width:46ch}
.sk-copiloto-txt .sk-cita{border-left:2px solid var(--signal);padding-left:16px;
  font-size:1.05rem;line-height:1.6;color:var(--text);margin:0 0 20px;font-style:normal}
.sk-copiloto-txt .sk-cita span{color:var(--text-mute);font-size:.92rem;display:block;margin-top:8px}

@media (max-width:960px){
  .sk-copiloto{grid-template-columns:1fr;gap:34px}
  .sk-tel-caja{order:-1}
  .sk-tel{--ancho:240px}
}


/* El hero deja de ser una foto: el mapa se mueve.
   Se puede porque la flota demo pasó a reportar cada 5 s (Alonso, 2026-08-25);
   con los 30 s de antes el marcador se quedaba clavado y luego brincaba, que es
   justo lo que NO se quiere enseñar.

   Va dentro del mismo telefono, pero QUIETO: si tambien se inclinara, competiria
   con el de la seccion del copiloto, donde la inclinacion si significa algo. */
.sk-hero-media{display:grid;place-items:center}
.sk-hero-media .sk-tel{--ancho:300px;animation:none;
  transform:rotateY(-7deg) rotateX(1.5deg)}
@media (max-width:960px){.sk-hero-media .sk-tel{--ancho:250px}}

/* ==========================================================================
   EL AVISO ENTRANDO — lo que de verdad prueba el titular
   ==========================================================================
   El hero decia "tu telefono suena" y ensenaba un mapa. Un mapa lo tiene toda
   empresa de GPS; lo que nadie mas puede ensenar es TU aviso llegando.

   La notificacion la pinta el sistema operativo, no el navegador, asi que no se
   puede grabar: esta dibujada aqui. El TEXTO si es el real — es exactamente lo
   que compone puente.py para una alarma de corte de corriente:
       titulo  ->  "🚨 " + nombre del aparato
       cuerpo  ->  ALARMAS["powerCut"] = "Le cortaron la corriente"
   ========================================================================== */

.sk-tel-pantalla{position:relative}

.sk-aviso-push{
  /* Bajo el encabezado de la app a proposito: asi se lee QUE unidad estas mirando
     y se entiende que el aviso es de OTRA. Ese es el punto (Alonso, 2026-08-25). */
  position:absolute;left:4%;right:4%;top:13%;z-index:3;
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 12px;border-radius:14px;
  background:rgba(28,32,40,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  color:#fff;text-align:left;
  /* 14 s: el aviso se queda ~12 s a la vista. Con 7 s se iba demasiado pronto
     y no daba tiempo de leerlo (Alonso, 2026-08-25). */
  animation:sk-entra-aviso 14s ease-in-out infinite;
}
html.light .sk-aviso-push{background:rgba(250,250,252,.95);color:#0A1424;
  box-shadow:0 10px 26px -10px rgba(10,20,36,.35)}

.sk-aviso-push img{width:26px;height:26px;border-radius:7px;flex:none;margin-top:1px}
/* El aviso lleva la direccion COMPLETA, tal cual la devuelve Traccar, y se
   corta a UN renglon con puntos suspensivos — igual que hace el sistema
   operativo cuando pinta la notificacion. Se deja que corte el navegador y no
   a golpe de contar caracteres: asi el corte cae en el ancho real, sea cual
   sea la pantalla, y el texto de origen sigue siendo el verdadero.
   (Alonso, 2026-08-27) */
.sk-aviso-push > div{min-width:0;flex:1}
.sk-aviso-push span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-aviso-push b{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  line-height:1.25;letter-spacing:-.01em}
/* El punto rojo va DIBUJADO, no con el emoji 🚨: un glifo que la fuente no trae se
   queda en blanco sin avisar, y ya paso con la palomita de los precios. */
.sk-aviso-push b::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--alert);box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 28%,transparent)}
.sk-aviso-push span{display:block;font-size:.74rem;line-height:1.35;opacity:.86;margin-top:2px}
.sk-aviso-push .sk-aviso-app{font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:3px}

/* Entra deslizandose, se queda a la vista, y se va. Luego vuelve: el ciclo es el
   argumento, no un adorno. */
@keyframes sk-entra-aviso{
   0%   {opacity:0;transform:translateY(-130%) scale(.96)}
   3.5% {opacity:1;transform:translateY(0) scale(1)}
   6%   {transform:translateY(3px) scale(1)}
   8%   {transform:translateY(0) scale(1)}
   90%  {opacity:1;transform:translateY(0) scale(1)}
   95%  {opacity:0;transform:translateY(-130%) scale(.96)}
  100%  {opacity:0;transform:translateY(-130%) scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  .sk-aviso-push{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   EL MONITOR — la pagina prometia computadora y nunca la ensenaba
   ==========================================================================
   El encabezado de la seccion dice "La misma aplicacion en el telefono y en la
   computadora" y todo lo que se ve son telefonos. Este monitor cierra esa
   promesa. Usa el mismo cuerpo que el telefono (el .device-frame de crm2026),
   en 4:3, que es la proporcion que ellos ya usaban para pantalla.
   ========================================================================== */

.sk-mon{--ancho:100%;width:100%;position:relative}

.sk-mon-cuerpo{
  padding:calc(min(100%,720px)*.014);
  border-radius:8px;
  background:linear-gradient(145deg,#4a4e57,#2b2e34 16%,#16181c 34%,#3c4049,#14161a 66%,#2e3138 84%,#474b54);
  border:1px solid #ffffff1f;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7);
}
html.light .sk-mon-cuerpo{
  background:linear-gradient(145deg,#e7e9ec,#b6bac1 16%,#888d95 34%,#d6d9dd,#82868e 66%,#b2b6bd 84%,#e3e5e9);
  border:1px solid #ffffff59;
  box-shadow:0 22px 46px -20px rgba(10,20,36,.35);
}
.sk-mon-pantalla{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#000}
.sk-mon-pantalla img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* El pie: cuello y base. Dos rectangulos, nada mas: sugieren el monitor sin
   robarle atencion a la pantalla. */
.sk-mon-pie{display:grid;place-items:center;margin-top:-1px}
.sk-mon-cuello{width:13%;height:16px;
  background:linear-gradient(180deg,#3a4049,#22272e);border-radius:0 0 3px 3px}
.sk-mon-base{width:34%;height:7px;border-radius:99px;
  background:linear-gradient(180deg,#454b55,#1b1f25);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
html.light .sk-mon-cuello{background:linear-gradient(180deg,#c3c8cf,#9aa0a8)}
html.light .sk-mon-base{background:linear-gradient(180deg,#cfd4da,#9aa0a8);
  box-shadow:0 8px 18px -10px rgba(10,20,36,.4)}

/* Las capturas del panel tambien se turnan con el tema */
.sk-mon .sk-shot-light{display:none}
.sk-mon .sk-shot-dark{display:block}
html.light .sk-mon .sk-shot-light{display:block}
html.light .sk-mon .sk-shot-dark{display:none}

/* ---------------------------------------------------------------------------
   AREAS DE TOQUE EN PANTALLA TACTIL
   ---------------------------------------------------------------------------
   Medido con el dedo en mente, no con el raton: en un telefono habia enlaces
   de 19 a 26 px de alto. El de "YA SOY CLIENTE, ENTRAR A LA APP" —que es la
   puerta de los clientes que ya pagan— media 24 px, y el telefono del pie 19.
   La guia de Apple pide 44 px y la WCAG 2.2 un minimo de 24.

   Dos tecnicas, y la eleccion importa:
   - Donde el enlace es un bloque suelto (los del pie), se agranda con relleno.
   - Donde el enlace lleva subrayado o va dentro de un parrafo, el relleno
     separaria la linea del texto y estropearia el espaciado que ya esta bien.
     Ahi el area crece con un ::after invisible centrado: se toca mas facil y
     NO se mueve un solo pixel de lo que se ve.
   El ::after mide 44px y los huecos de esos contenedores son de 12px o mas,
   asi que no se encima con el boton vecino ni le roba el toque.                */
@media (pointer:coarse), (max-width:860px){
  .footer-grid>div>a{padding:11px 0}

  .sk-link, .footer-about a.num, .brand.brand-logo{position:relative}
  .sk-link::after, .footer-about a.num::after, .brand.brand-logo::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}

  .theme-toggle, .sk-menu-btn{width:40px;height:40px}
}

/* ---------- paginas de contenido (casos de uso y guias) ------------------- */
/* Columna de lectura, no rejilla: estas paginas se LEEN de arriba abajo, y el
   ancho de medida manda sobre cualquier otra cosa. Mismo lenguaje que el resto
   —filete de 1px, esquinas de 4px, cero sombra— para que no parezcan de otro
   sitio. */
.sk-art{padding:clamp(38px,5vw,64px) 0 clamp(64px,8vw,104px)}
.sk-art .sk-wrap{max-width:760px}

.sk-miga{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--text-mute);margin-bottom:26px}
.sk-miga a{color:var(--text-mute);text-decoration:none;border-bottom:1px solid var(--line)}
.sk-miga a:hover{color:var(--signal-hi);border-color:var(--signal-line)}
.sk-miga span[aria-current]{color:var(--text-soft)}

.sk-art h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;margin:0 0 20px}
.sk-art-lede{font-size:1.14rem;line-height:1.6;color:var(--text-soft);margin:0 0 8px;
  max-width:60ch}

.sk-art-sec{margin-top:clamp(38px,5vw,56px)}
.sk-art-sec h2{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700;margin:0 0 14px}
.sk-art-sec p{font-size:1.02rem;line-height:1.72;color:var(--text-soft);margin:0 0 15px;
  max-width:66ch}
.sk-art-sec p:last-of-type{margin-bottom:0}
.sk-art-sec strong{color:var(--text);font-weight:600}
.sk-art-sec em{color:var(--text);font-style:italic}
.sk-art-sec a{color:var(--signal-hi);text-decoration:none;border-bottom:1px solid var(--signal-line)}

/* La lista es un INVENTARIO de capacidades, no prosa: por eso la palomita
   dibujada y no un punto. Se dibuja con bordes porque el glifo de palomita no
   existe en Archivo ni en IBM Plex y salia en blanco. */
.sk-art-lista{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.sk-art-lista li{position:relative;padding-left:26px;font-size:.99rem;line-height:1.55;
  color:var(--text-soft)}
.sk-art-lista li::before{content:"";position:absolute;left:4px;top:.42em;width:5px;height:9px;
  border:solid var(--live);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* La nota es donde va lo que el servicio NO hace. Se marca con filete lateral
   para que se lea distinto del cuerpo, no para esconderla. */
.sk-art-nota{margin:20px 0 0!important;padding:13px 16px;border-left:2px solid var(--signal);
  background:var(--signal-soft);border-radius:0 var(--rad) var(--rad) 0;
  font-size:.95rem;line-height:1.6;color:var(--text-soft)}

.sk-art-cierre{margin-top:clamp(56px,7vw,84px);padding-top:clamp(38px,5vw,52px);
  border-top:1px solid var(--line)}
.sk-art-cierre h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;margin:0 0 12px}
.sk-art-cierre p{font-size:1.02rem;color:var(--text-soft);margin:0 0 22px;max-width:60ch}

/* indice de guias */
.sk-guias{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.sk-guias li{border:1px solid var(--line);border-radius:var(--rad);background:var(--panel)}
.sk-guias a{display:block;padding:22px 24px;text-decoration:none;color:inherit;
  transition:border-color .15s}
.sk-guias li:hover{border-color:var(--signal-line)}
.sk-guias h3{font-family:var(--font-display);font-size:1.16rem;font-weight:700;margin:0 0 7px}
.sk-guias p{font-size:.97rem;line-height:1.6;color:var(--text-soft);margin:0}

/* Enlace de "sigue leyendo" dentro de una tarjeta de caso. Discreto: el caso es
   lo que se lee, esto es la salida. */
.sk-mas{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:.72rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-hi);
  text-decoration:none;border-bottom:1px solid var(--signal-line);padding-bottom:2px}
.sk-mas::after{content:" \2192"}
.sk-mas:hover{border-color:var(--signal-hi)}

/* Tabla dentro de una pagina de contenido (la de retencion del aviso). Se
   desplaza sola en horizontal para que el cuerpo de la pagina NUNCA lo haga. */
.sk-art-tabla{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);
  margin:20px 0 0;background:var(--panel)}
.sk-art-tabla table{width:100%;min-width:440px;border-collapse:collapse;font-size:.95rem}
.sk-art-tabla th,.sk-art-tabla td{padding:11px 15px;text-align:left;
  border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text-soft)}
.sk-art-tabla thead th{font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  background:var(--panel-hi);white-space:nowrap}
.sk-art-tabla tbody tr:last-child td{border-bottom:0}
.sk-art-tabla strong{color:var(--text)}

/* El enlace legal del pie: presente, no escondido. */
.footer-bottom a{color:var(--text-mute);text-decoration:none;
  border-bottom:1px solid var(--line)}
.footer-bottom a:hover{color:var(--signal-hi);border-color:var(--signal-line)}