/* Jot — hoja de estilos. HTML + CSS puro, sin dependencias externas. */

:root {
  --azul: #0f6bf7;         /* azul de la marca, extraído del icono oficial de la app */
  --azul-oscuro: #0b53c4;  /* variante oscura: acentos de texto sobre fondos claros */
  --azul-claro: #ebf2fe;   /* fondo suave azulado para secciones alternas */
  --tinta: #1d2637;
  --tinta-suave: #56617a;
  --borde: #d2ddf0;
  --borde-marcador: #8db4f5;
  --blanco: #ffffff;
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-text-size-adjust: 100%;
}

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

.hero :focus-visible {
  outline-color: var(--blanco);
}

/* Enlace de salto para lectores de pantalla y navegación por teclado */
.salto-contenido {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blanco);
  color: var(--azul);
  padding: 0.5rem 1rem;
  z-index: 10;
}

.salto-contenido:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.contenedor {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.contenedor-estrecho { max-width: 46rem; }

/* ---------- Cabecera ---------- */

.hero {
  background: var(--azul);
  color: var(--blanco);
  padding: 1rem 1.25rem 4.25rem;
  text-align: center;
}

.nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding: 0.5rem 0 2.75rem;
}

.nav a {
  color: var(--blanco);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav a:hover { text-decoration: underline; }

.nav-idioma {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.1rem 0.85rem;
}

h1 {
  margin: 0 0 1.25rem;
  line-height: 0;
}

.logo-hero {
  width: 140px;
  height: 140px;
}

.hero-lema {
  margin: 0 auto 1.25rem;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.45;
}

.hero-descripcion {
  max-width: 42rem;
  margin: 0 auto 1.75rem;
}

.hero-pastillas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-pastillas li {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  font-size: 0.9rem;
}

/* ---------- Secciones ---------- */

.seccion { padding: 3.5rem 0; }

.seccion-alterna { background: var(--azul-claro); }

.seccion-centrada { text-align: center; }

h2 {
  margin: 0 0 1.25rem;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

p { margin: 0 0 1rem; }

ul { margin: 0 0 1rem; padding-left: 1.4rem; }

li { margin-bottom: 0.25rem; }

li::marker { color: var(--azul); }

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.95em;
  background: rgba(15, 107, 247, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}

/* ---------- Bloque de distribución (pruebas cerradas) ---------- */

.tarjeta-distribucion {
  max-width: 44rem;
  margin-inline: auto;
  background: var(--azul-claro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2.25rem 2rem 1.5rem;
  text-align: center;
}

.tarjeta-distribucion h2 { margin-bottom: 1rem; }

.insignia {
  display: inline-block;
  margin: 0 0 1rem;
  background: var(--azul);
  color: var(--blanco);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Documentación con marcadores de captura ---------- */

.nota-capturas {
  color: var(--tinta-suave);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.doc-item {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1rem 3rem;
  align-items: center;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--borde);
}

.doc-item:last-child { border-bottom: 0; padding-bottom: 0.5rem; }

.doc-item:nth-of-type(even) { grid-template-columns: 240px 1fr; }

.doc-item:nth-of-type(even) .captura { order: -1; }

.captura {
  margin: 0;
  justify-self: center;
}

.captura-marco {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  border: 2px dashed var(--borde-marcador);
  border-radius: 24px;
  background: var(--blanco);
  display: grid;
  place-items: center;
}

.seccion-alterna .captura-marco { background: var(--blanco); }

/* Captura real ya colocada: mismo ancho que el marcador que sustituye. */
.captura-imagen {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: 24px;
  background: var(--blanco);
}

.captura-numero {
  font-size: 4rem;
  font-weight: 800;
  color: var(--borde-marcador);
}

.captura figcaption {
  margin-top: 0.75rem;
  max-width: 220px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  text-align: center;
}

/* Bloque a todo el ancho: el texto arriba y las capturas debajo, para los
   marcadores de hoja de cálculo, que no caben en la columna de 240px. */

.doc-item.doc-item-ancho {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.capturas-escritorio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}

.captura-escritorio { justify-self: stretch; }

.captura-escritorio .captura-marco {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}

/* Las capturas de hoja de cálculo llenan su columna en vez de usar el ancho
   fijo de las de móvil, y llevan la esquina menos redondeada del marcador
   que sustituyen. */
.captura-escritorio .captura-imagen {
  width: 100%;
  border-radius: 12px;
}

.captura-escritorio figcaption { max-width: none; }

.descarga-ejemplos {
  font-weight: 600;
  color: var(--azul-oscuro);
}

/* ---------- Lista de ejemplos a dos columnas ---------- */

.lista-dos-columnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
  margin-bottom: 1rem;
}

.lista-dos-columnas ul { margin-bottom: 0; }

/* ---------- Contacto ---------- */

.contacto-email {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.55rem 1.2rem;
  background: var(--azul-claro);
  border: 1px dashed var(--borde-marcador);
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul-oscuro);
}

.email-en-linea { font-weight: 600; color: var(--azul-oscuro); }

/* ---------- Privacidad ---------- */

.fecha-actualizacion {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

#privacidad h3 { margin-top: 1.75rem; }

/* ---------- Pie ---------- */

.pie {
  background: var(--azul);
  color: var(--blanco);
  text-align: center;
  padding: 2rem 1.25rem;
  font-size: 0.95rem;
}

.pie p { margin: 0; }

/* ---------- Capturas más grandes en escritorio ----------
   Por debajo de este ancho el contenedor ya se ajusta al viewport
   disponible (nunca llega a los 60rem de tope), así que no hace falta
   una condición aparte para "no afectar al móvil": la regla del
   contenedor no tiene efecto visible hasta que sí sobra sitio. El
   tamaño de las capturas si necesita ir en la media query, porque un
   ancho fijo no se autolimita como max-width. */
@media (min-width: 1024px) {
  /* Más aire solo en esta sección: el resto de la página no lo necesita. */
  #como-funciona .contenedor {
    max-width: 72rem;
  }

  .captura-imagen,
  .captura-marco {
    width: 300px;
  }

  /* :not(.doc-item-ancho) para no competir con su regla de columna única:
     esa fila (Excel) es el 8º div dentro del contenedor, así que cae en
     nth-of-type(even) y, a igual especificidad, ganaría por ir después
     en la hoja de estilos. */
  /* Separadores entre subsecciones fuera: cada bloque ya lleva su
     propia esquina de línea junto al pie de foto. */
  .doc-item {
    border-bottom: 0;
  }

  /* Filas auto-55fr-auto-15fr: las dos filas "auto" se ajustan justas
     al párrafo y al bloque del pie; las dos filas fr se reparten el
     resto de la altura que exige la imagen (que abarca las cuatro)
     en proporción 55/15, empujando el pie muy abajo, cerca del final
     de la columna, sin apenas margen tras el texto. */
  .doc-item:not(.doc-item-ancho) {
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto 55fr auto 15fr;
  }

  .doc-item:not(.doc-item-ancho):nth-of-type(even) {
    grid-template-columns: 320px 1fr;
  }

  .captura figcaption {
    max-width: 340px;
    font-size: 1rem;
  }

  /* El pie de foto se traslada a la columna de texto, en el hueco que
     deja frente a la altura de la captura. El párrafo se queda arriba,
     junto al título, y el pie baja hasta el final de esa columna, a la
     altura aproximada donde termina la imagen de al lado — separados,
     no agrupados. La figura pasa a display:contents para que su imagen
     y su pie funcionen como celdas independientes de esta misma
     cuadrícula; el pie ocupa la segunda fila (bajo el texto) y la
     imagen ocupa ambas filas para mantenerse centrada junto al bloque
     texto+pie. */
  .doc-item:not(.doc-item-ancho) .doc-texto {
    grid-column: 1;
    grid-row: 1;
    margin-top: 3.5rem;
  }

  .doc-item:not(.doc-item-ancho):nth-of-type(even) .doc-texto {
    grid-column: 2;
  }

  .doc-item:not(.doc-item-ancho) .captura {
    display: contents;
  }

  .doc-item:not(.doc-item-ancho) .captura-imagen {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
  }

  .doc-item:not(.doc-item-ancho):nth-of-type(even) .captura-imagen {
    grid-column: 1;
  }

  /* La esquina de línea fina (borde superior + lateral) apunta hacia el
     lado donde está la imagen, dejando claro a qué captura pertenece
     el pie sin necesidad de estar pegados a ella. La línea superior se
     alarga con un pseudo-elemento hasta cubrir el ancho del párrafo
     (100% de la columna), aunque el bloque de texto del pie siga
     ocupando solo el 70%. */
  .doc-item:not(.doc-item-ancho) .captura figcaption {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    justify-self: end;
    width: 70%;
    max-width: none;
    margin-top: 0;
    text-align: right;
    padding: 1rem 0.75rem 0 0;
    border-right: 1px solid var(--borde);
  }

  .doc-item:not(.doc-item-ancho) .captura figcaption::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 142.86%;
    border-top: 1px solid var(--borde);
  }

  .doc-item:not(.doc-item-ancho):nth-of-type(even) .captura figcaption {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    padding: 1rem 0 0 0.75rem;
    border-right: none;
    border-left: 1px solid var(--borde);
  }

  .doc-item:not(.doc-item-ancho):nth-of-type(even) .captura figcaption::before {
    right: auto;
    left: 0;
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 720px) {
  .seccion { padding: 2.75rem 0; }

  .doc-item,
  .doc-item:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .doc-item:nth-of-type(even) .captura { order: 0; }

  .capturas-escritorio,
  .lista-dos-columnas { grid-template-columns: 1fr; }

  .tarjeta-distribucion { padding: 1.75rem 1.25rem 1rem; }
}