/*
  Estilo de las paginas legales (privacidad, terminos, eliminar datos).

  El mismo de la portada: crema, tinta, violeta y la tipografia de la app,
  servida desde /fuentes. Antes cada pagina llevaba su propio <style> verde de
  la primera version de la marca.
*/
@font-face {
    font-family: "Jakarta";
    src: url("fuentes/PlusJakartaSans.ttf") format("truetype");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --crema: #fbf7f1;
    --crema-2: #f4ede3;
    --papel: #fffdf9;
    --tinta: #1e1a33;
    --suave: #615b78;
    --tenue: #8d88a3;
    --indigo: #2d1fb8;
    --violeta: #6f4bea;
    --lila: #efeaff;
    --rojo: #b3261e;
    --rojo-claro: #fdf0ee;
    --borde: #ece4d8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tinta);
    background: var(--crema);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--indigo); }

.envoltorio { max-width: 820px; margin: 0 auto; padding: 0 22px; }

/* Barra, igual que la portada */
.barra { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 4px 14px rgba(45, 31, 184, .15); }
.marca span { font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.barra nav { display: flex; gap: 22px; }
.barra nav a { color: var(--suave); text-decoration: none; font-weight: 500; font-size: .93rem; }
.barra nav a:hover, .barra nav a[aria-current] { color: var(--tinta); }
/* Selector de idioma: la misma pagina en el otro idioma. */
.barra nav a.idioma {
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 999px; border: 1.5px solid rgba(30, 26, 51, .16);
}
.barra nav a.idioma:hover { border-color: var(--tinta); }

/* La hoja de papel donde va el texto */
.container {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 40px 30px 44px 32px;
    padding: 52px 56px 56px;
    margin: 10px 0 40px;
    overflow: hidden;
}
.container::before {
    content: ""; position: absolute; width: 260px; height: 230px; right: -90px; top: -100px;
    background: var(--lila); border-radius: 58% 42% 47% 53% / 46% 55% 45% 54%;
}
.container > * { position: relative; }

.miga { font-size: .88rem; color: var(--tenue); margin-bottom: 18px; }
.miga a { color: var(--violeta); text-decoration: none; font-weight: 600; }
.miga span { margin: 0 8px; opacity: .5; }

h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.6rem);
    line-height: 1.1; letter-spacing: -.03em; font-weight: 800;
    margin-bottom: 10px; max-width: 20ch;
}
h2 { font-size: 1.25rem; letter-spacing: -.015em; margin: 40px 0 12px; font-weight: 800; }
h3 { font-size: 1.05rem; margin: 26px 0 8px; }
p { margin: 10px 0; color: #3a3550; }
.last-updated { color: var(--tenue); font-size: .92rem; margin-bottom: 26px; }

ol, ul { padding-left: 22px; margin: 10px 0; }
li { margin: 9px 0; color: #3a3550; }
li::marker { color: var(--violeta); font-weight: 700; }

.highlight, .aviso {
    padding: 20px 24px; margin: 26px 0;
    border-radius: 24px 18px 26px 20px;
}
.highlight { background: var(--lila); }
.aviso { background: var(--rojo-claro); box-shadow: inset 4px 0 0 var(--rojo); }
.highlight p:first-child, .aviso p:first-child { margin-top: 0; }
.highlight p:last-child, .aviso p:last-child { margin-bottom: 0; }

.path {
    background: var(--crema-2); padding: 2px 8px; border-radius: 8px;
    font-size: .92em; white-space: nowrap; font-weight: 600;
}

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: .95rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--crema); font-size: .88rem; color: var(--suave); }
th:first-child { border-radius: 12px 0 0 12px; }
th:last-child { border-radius: 0 12px 12px 0; }

footer { padding: 20px 0 46px; color: var(--tenue); font-size: .9rem; }
footer .envoltorio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--suave); text-decoration: none; }
footer a:hover { color: var(--tinta); }
footer p { margin: 0; color: var(--tenue); }

@media (max-width: 640px) {
    .container { padding: 34px 22px 38px; border-radius: 30px 24px 32px 26px; }
    .barra nav a:not(.idioma) { display: none; }
    table { display: block; overflow-x: auto; }
}