/* ============================================================
   edusoftnet — Reset, tipografía base y utilidades
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Las entradas laterales sacan los elementos fuera del viewport
     mientras están ocultos. `clip` recorta ese desborde sin crear un
     contenedor de scroll, así que la barra sticky sigue funcionando
     (`overflow: hidden` sí la rompería). */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  /* Reparte las palabras entre las líneas en vez de dejar una suelta
     abajo. «Conectado con los sistemas que tu colegio ya / usa» pasa a
     partirse por la mitad. Donde no se soporta, se ignora. */
  text-wrap: balance;
}

/* En los párrafos basta con evitar la última línea de una sola palabra */
p, li, dd, figcaption {
  text-wrap: pretty;
}

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* ---------- Foco visible (FASE 27) ---------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Salto al contenido ---------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: calc(var(--z-menu) + 10);
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.container-xl {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.section {
  padding-block: 80px;
}

.section--tight { padding-block: var(--pad-section); }

.section--surface { background: var(--surface); }

@media (max-width: 767px) {
  .section { padding-block: 48px; }
}

/* ---------- Cabecera de sección ---------- */

.section-head {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad-page);
  text-align: center;
}

.section-title {
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: 700;
}

.section-sub {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: var(--fs-section-sub);
  line-height: var(--lh-section-sub);
  font-weight: 400;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ink-faint);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* El rotulo que es el nombre de la herramienta pesa mas: no es un
   antetitulo generico, es de lo que trata la seccion. Se escribe con
   su grafia propia, sin versalitas ni espaciado. */
.eyebrow--marca {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.eyebrow--marca .reg {
  font-size: .5em;
  top: -.7em;
}

@media (max-width: 767px) {
  .eyebrow--marca { font-size: 19px; line-height: 25px; }
}

/* ---------- Utilidades ---------- */

.center      { text-align: center; }
.muted       { color: var(--ink-faint); }
.soft        { color: var(--ink-soft); }
.stack > * + * { margin-top: var(--gap); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal al hacer scroll (FASE 19) ----------
   El estado oculto SOLO se aplica cuando reveal.js está vivo y ha marcado
   el documento con .js-reveal. Sin JS, con JS bloqueado o si el observer
   nunca llega a disparar, el contenido se ve: nunca queda invisible. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Movimiento reducido (FASE 27) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Símbolo de marca registrada ----------
   Sin esto, el ® se dibuja al mismo cuerpo que el texto y rompe la
   línea tipográfica en nombres como eclass® o onTime®. */

.reg {
  font-size: .52em;
  vertical-align: .42em;
  line-height: 0;
  letter-spacing: 0;
  font-weight: inherit;
}

/* Navegadores sin soporte de `overflow: clip`: se recorta en el
   contenedor interior, para no tocar html ni body y no romper el
   sticky del navbar. */
@supports not (overflow: clip) {
  main { overflow-x: hidden; }
}