/* =============================================================================
   LAS PAGINAS DE TEXTO LARGO: terminos, privacidad y seguridad.

   Una sola hoja para las tres. Son documentos para LEER, no pantallas para operar,
   asi que todo aqui va de una cosa: que se puedan leer de arriba abajo sin cansarse
   en un telefono.

   MEDIDA DE LINEA ACOTADA (~68 caracteres). Es el ancho en el que el ojo encuentra
   el siguiente renglon sin perderse; a pantalla completa, un parrafo de 1600 px se
   relee dos veces por linea.

   Solo la cargan estas tres paginas, con @section Styles.
   ============================================================================= */

.scort-doc {
    max-width: 68ch;
    margin-inline: auto;
}

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

.scort-doc__head {
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--scort-border);
}

.scort-doc__titulo {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    line-height: 1.2;
}

.scort-doc__lead {
    margin: 0 0 var(--space-3);
    color: var(--scort-text);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* La fila de datos del titular: telefono, correo, ultima revision. */
.scort-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--scort-text-muted);
    font-size: .92rem;
}

.scort-doc__meta strong {
    color: var(--scort-text);
    font-weight: 600;
}

/* --- Indice ------------------------------------------------------------ */

.scort-doc__indice {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--scort-border);
    border-radius: var(--radius-lg);
    background: var(--scort-surface);
}

.scort-doc__indice h2 {
    margin: 0 0 var(--space-3);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--scort-text-muted);
}

.scort-doc__indice ol {
    margin: 0;
    padding-left: 1.3em;
    columns: 2;
    column-gap: var(--space-5);
    font-size: .95rem;
}

.scort-doc__indice li { margin-bottom: .35em; break-inside: avoid; }

.scort-doc__indice a {
    color: var(--scort-text);
    text-decoration: none;
}

.scort-doc__indice a:hover,
.scort-doc__indice a:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
    .scort-doc__indice ol { columns: 1; }
}

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

.scort-doc__seccion { margin-bottom: var(--space-6); }

/* `scroll-margin-top` para que al saltar desde el indice el titulo no quede
   debajo de la barra superior fija. */
.scort-doc__h {
    margin: 0 0 var(--space-3);
    font-size: 1.12rem;
    line-height: 1.35;
    scroll-margin-top: 5rem;
}

.scort-doc p {
    margin: 0 0 var(--space-3);
    line-height: 1.75;
    color: var(--scort-text);
}

.scort-doc ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.2em;
    line-height: 1.75;
}

.scort-doc li { margin-bottom: .4em; }

.scort-doc a { color: var(--scort-accent); }

/* --- Recuadro de aviso -------------------------------------------------- */

.scort-doc__caja {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--scort-border-strong);
    border-left: 3px solid var(--scort-accent);
    border-radius: var(--radius-md);
    background: var(--scort-surface);
}

.scort-doc__caja p:last-child { margin-bottom: 0; }

/* El pie: cuando se reviso por ultima vez. */
.scort-doc__pie {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--scort-border);
    color: var(--scort-text-muted);
    font-size: .9rem;
}