/* Hoja de estilo compartida por /terminos y /privacidad.
   Vive en public/ para que Vite la copie tal cual: los documentos legales no
   pasan por el bundler a proposito. Un aviso de privacidad tiene que poder
   abrirse aunque el build de la landing este roto. */

:root {
    --base: #1f2a37;
    --teal: #0ea5a4;
    --bg: #f9fafb;
    --texto: #374151;
    --tenue: #6b7280;
    --borde: #e5e7eb;
    --blanco: #ffffff;
    --alerta-bg: #fffbeb;
    --alerta-borde: #fcd34d;
    --alerta-texto: #78350f;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

a { color: #0b7a79; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.barra {
    background: var(--base);
    color: var(--blanco);
    padding: 18px 0;
}

.contenedor {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

.barra .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.marca {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 18px;
    color: var(--blanco);
    text-decoration: none;
}

.marca span { color: var(--teal); }

.barra a.volver {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    text-decoration: none;
}

.barra a.volver:hover { color: var(--blanco); }

/* ── Documento ────────────────────────────────────────────────────────── */

main { padding: 48px 0 80px; }

.hoja {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 48px;
}

h1 {
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--base);
    margin: 0 0 8px;
}

.version {
    font-size: 14px;
    color: var(--tenue);
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--borde);
}

h2 {
    font-size: 19px;
    color: var(--base);
    letter-spacing: -0.01em;
    margin: 40px 0 12px;
    scroll-margin-top: 24px;
}

h3 {
    font-size: 16px;
    color: var(--base);
    margin: 24px 0 8px;
}

p, li { margin: 0 0 12px; }

ul, ol { padding-left: 22px; margin: 0 0 16px; }

li { margin-bottom: 8px; }

strong { color: var(--base); }

/* ── Indice ───────────────────────────────────────────────────────────── */

.indice {
    background: var(--bg);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 8px;
}

.indice h2 {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenue);
}

.indice ol { margin: 0; font-size: 15px; }

/* ── Avisos destacados ────────────────────────────────────────────────── */

.destacado {
    background: var(--alerta-bg);
    border: 1px solid var(--alerta-borde);
    border-left-width: 4px;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--alerta-texto);
}

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

/* Dato de identificacion fiscal pendiente de capturar. Se marca en vez de
   omitirse: un aviso de privacidad sin responsable identificable no cumple, y
   un hueco invisible no se llena nunca. */
.pend {
    border-bottom: 1px dotted #b45309;
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */

.tabla-envoltorio { overflow-x: auto; margin: 16px 0 24px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 560px;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}

th {
    background: var(--bg);
    color: var(--base);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
    color: var(--tenue);
}

@media (max-width: 640px) {
    main { padding: 28px 0 48px; }
    .hoja { padding: 28px 22px; border-radius: 8px; }
    h1 { font-size: 25px; }
    h2 { font-size: 18px; }
}