/**
 * sm-legal.css — paginas legales (/privacy.html, /terms-and-conditions.html)
 *
 * Depende de sm-site.css, que aporta los tokens, la tipografia, la cabecera
 * clara, el skyline, el pie y los botones. Aqui solo la portadilla del
 * documento, su indice y la prosa.
 *
 * Son textos de consulta, no de lectura seguida: casi nadie los lee de arriba
 * abajo, se busca un apartado. De ahi que el indice vaya arriba en una caja y
 * que los titulos de apartado lleven una regla encima, para que se encuentren
 * al desplazarse. Misma medida de lectura que el blog, el FAQ y las fichas de
 * tour: --sm-measure.
 *
 * El cuerpo se estiliza por etiqueta (p, h2, h3, ul...) como en sm-post.css:
 * el texto viene de plantillas legales con HTML sencillo y es mas fiable que
 * exigir una clase en cada elemento.
 */

.legal__inner { max-width: var(--sm-measure); }

/* ---------- Miga de pan ---------- */

/* Misma pieza que en las entradas del blog. Se repite aqui en lugar de subirla
   a sm-site.css para no tocar una hoja que cargan todas las paginas. */
.legal-breadcrumb {
    padding-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--sm-muted-2);
}
.legal-breadcrumb a { color: var(--sm-blue); text-decoration: none; font-weight: 600; }
.legal-breadcrumb a:hover { text-decoration: underline; }
.legal-breadcrumb__sep { color: #A8B2C1; }

/* ---------- Portadilla ---------- */

.legal-masthead { padding: clamp(22px, 4vw, 34px) 0 clamp(18px, 2.6vw, 24px); }
.legal-masthead__title {
    margin: 8px 0 14px;
    font-size: clamp(30px, 4.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--sm-ink-hero);
}
.legal-masthead__lead {
    margin: 0 0 12px;
    max-width: 620px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.6;
    color: var(--sm-muted);
}
/* La fecha de revision estaba al final del documento, donde no la veia nadie.
   En un texto legal es de lo primero que se mira: si ha cambiado desde la
   ultima vez que se leyo. */
.legal-masthead__meta { margin: 0; font-size: 14px; color: var(--sm-muted-2); }

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

/* Va dentro de .legal-body, donde queda en el documento, asi que todo lo de
   aqui se nombra bajo .legal-body: ese bloque estiliza `p` y `ul` por etiqueta
   y un selector de clase y etiqueta gana a uno de clase sola. Sin esto el
   indice heredaria el `padding-left` de las listas del cuerpo y se saldria de
   su caja.

   Dos columnas: con trece apartados, en una sola el indice es mas alto que la
   primera pantalla y deja de servir de indice. `columns` reparte de arriba
   abajo, asi que el orden de lectura sigue siendo 1, 2, 3... */
.legal-body .legal-toc {
    margin: 0 0 clamp(30px, 4vw, 42px);
    padding: clamp(18px, 2.6vw, 24px);
    border: 1px solid var(--sm-border);
    border-radius: 14px;
    background: var(--sm-surface);
}
.legal-body .legal-toc__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sm-muted-2);
}
.legal-body .legal-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 32px;
    font-size: 14.5px;
    line-height: 1.45;
}
.legal-body .legal-toc__list li { margin: 0 0 10px; break-inside: avoid; }
.legal-body .legal-toc__list li:last-child { margin-bottom: 0; }
.legal-body .legal-toc__list a { color: var(--sm-blue); text-decoration: none; font-weight: 600; }
.legal-body .legal-toc__list a:hover { color: var(--sm-blue-dark); text-decoration: underline; }

/* ---------- Cuerpo ---------- */

.legal-body {
    padding-bottom: clamp(32px, 5vw, 52px);
    font-size: 16px;
    line-height: 1.7;
    color: var(--sm-muted);
}
.legal-body p { margin: 0 0 18px; }
.legal-body a { color: var(--sm-blue); }
.legal-body a:hover { color: var(--sm-blue-dark); }
.legal-body strong { color: var(--sm-ink-hero); }

/* Los apartados van en versales en el aviso de privacidad y en caja de titulo
   en las condiciones, porque asi vienen escritos. Por eso aqui no se fuerza
   `text-transform`: lo que da el mismo peso a los dos documentos es el cuerpo,
   la regla de encima y el aire, no la caja de las letras.

   scroll-margin-top porque al indice se llega por ancla y, sin esto, el titulo
   queda pegado al borde de la ventana. */
.legal-body h2 {
    margin: clamp(38px, 5vw, 54px) 0 16px;
    padding-top: clamp(26px, 3.4vw, 34px);
    border-top: 1px solid var(--sm-border);
    font-size: clamp(18px, 2.3vw, 21px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--sm-ink-hero);
    scroll-margin-top: 20px;
}

.legal-body h3 {
    margin: clamp(24px, 3vw, 30px) 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--sm-ink-hero);
}

.legal-body ul { margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin: 0 0 10px; }
.legal-body li:last-child { margin-bottom: 0; }
.legal-body li > ul { margin: 10px 0 0; }

/* ---------- Piezas propias de estas paginas ---------- */

/* Las tres son parrafos y van nombradas bajo .legal-body por lo mismo que el
   indice: compiten con `.legal-body p`, que al sumar clase y etiqueta gana a un
   selector de una clase sola y les devolveria su margen. */

/* Los resumenes "In Short" del aviso de privacidad, uno por apartado. Van
   deliberadamente discretos: resumen lo que viene debajo, no lo sustituyen. */
.legal-body .legal-short {
    margin: 0 0 20px;
    padding: 10px 0 10px 16px;
    border-left: 3px solid #C7D4EC;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--sm-muted-2);
}
.legal-body .legal-short strong { font-weight: 800; color: var(--sm-ink-hero); }

/* Para lo que hay que leer aunque no se lea el resto. Se usa una sola vez por
   documento: si se repite, deja de destacar. */
.legal-body .legal-callout {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid #D5E0F5;
    border-radius: 12px;
    background: var(--sm-blue-tint);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sm-ink-hero);
}

/* Direccion postal: se separa del parrafo que la presenta para que se pueda
   copiar de un golpe. */
.legal-body .legal-address {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    background: var(--sm-surface);
    font-size: 15px;
    line-height: 1.75;
    color: var(--sm-ink-hero);
}

/* ---------- Pie del documento ---------- */

/* Quien acaba uno de los dos documentos suele querer el otro, y el pie del
   sitio los deja muy abajo. */
.legal-more {
    padding-bottom: clamp(40px, 6vw, 72px);
    font-size: 15px;
    color: var(--sm-muted-2);
}
.legal-more__inner {
    padding-top: 24px;
    border-top: 1px solid var(--sm-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}
.legal-more a { font-weight: 700; color: var(--sm-blue); text-decoration: none; }
.legal-more a:hover { color: var(--sm-blue-dark); text-decoration: underline; }

@media (max-width: 620px) {
    /* Nombrado igual que arriba: una media query no sube la especificidad, asi
       que `.legal-toc__list` a secas perderia contra `.legal-body .legal-toc__list`
       y el indice se quedaria en dos columnas en el movil. */
    .legal-body .legal-toc__list { columns: 1; }
}