/* Estilos de las páginas legales (/privacy, /delete-account).
   Vive en public/ como landing.css: se sirve sin hash en el nombre, por eso
   _headers le pone must-revalidate (un cambio de estilos no debe quedarse
   congelado en la caché del navegador).
   Los tokens replican los de contacto.html, que es autocontenida. */
:root {
  --ink: #09090b; --ink-2: #18181b; --muted: #71717a; --muted-2: #3f3f46;
  --faint: #a1a1aa; --border: #e4e4e7; --border-2: #f4f4f5; --panel: #fafafa;
  --green: #2f9e44; --green-600: #278239;
  /* Mismo ancho de contenedor que la landing (landing.css: --wrap). La cabecera
     y el pie tienen que caer donde en la home, o el logo y el botón bailan al
     navegar entre páginas. */
  --wrap: 1160px;
  /* La columna de texto legal NO usa --wrap: son párrafos largos y a 1160px las
     líneas se vuelven incómodas de leer. */
  --wrap-legal: 720px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
  background: #fff; color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-600); text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Cabecera y pie replican los de landing.css para que el logo y el botón
   «Abrir el mapa» no se muevan al pasar de la home a estas páginas. */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* line-height 1.5 como el body de landing.css. El de esta hoja es 1.6, que el
   texto legal necesita para leerse, pero heredado por el menú hacía el botón
   «Abrir el mapa» 2px más alto que en la home (13,5px x 1,6 = 36px, no 34px). */
.header-inner { height: 58px; display: flex; align-items: center; justify-content: space-between; line-height: 1.5; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 27px; height: 27px; border-radius: 7px; background: var(--green);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.brand-name { font-weight: 600; font-size: 15.5px; letter-spacing: -.02em; color: var(--ink); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > a { font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 7px 11px; border-radius: 7px; transition: .15s; }
.nav > a:hover { color: var(--ink); background: var(--border-2); text-decoration: none; }
.nav .nav-cta {
  margin-left: 8px; color: #fff !important; background: var(--ink-2);
  padding: 7px 14px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.nav .nav-cta:hover { background: var(--green); color: #fff !important; text-decoration: none; }

/* margin-top es propio de estas páginas: el texto legal acaba con poco margen
   inferior (.legal) y sin él el pie quedaría pegado al último párrafo. */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0 40px; margin-top: 56px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; line-height: 1.5; }
.footer-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); text-decoration: none; }

/* La columna de texto va sobre el mismo elemento que .wrap (`class="wrap legal"`),
   así que este max-width es el que manda: estrecha el texto sin tocar el ancho de
   cabecera y pie. */
/* padding-top/bottom por separado, NO el atajo `padding`: el atajo pisaría el
   `padding: 0 24px` de .wrap y el texto quedaría pegado al borde de la pantalla
   en móvil. */
.legal { max-width: var(--wrap-legal); margin: 0 auto; padding-top: 40px; padding-bottom: 8px; }
.legal h1 { font-size: 32px; letter-spacing: -.03em; margin: 0 0 8px; }
.legal h2 {
  font-size: 20px; letter-spacing: -.02em; margin: 40px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.legal h3 { font-size: 16px; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--muted-2); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal__updated { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.legal__table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal__table th, .legal__table td {
  text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  vertical-align: top;
}
.legal__table th { background: var(--panel); font-weight: 600; color: var(--ink-2); }
.legal__callout {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin: 20px 0;
}
.legal__callout p:last-child { margin-bottom: 0; }

/* Mismo corte que la landing. La cabecera tiene altura fija (58px) y no envuelve,
   así que en móvil hay que esconder los enlaces del menú o se desbordan; queda
   solo el botón, igual que en la home. */
@media (max-width: 720px) {
  .nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 640px) {
  .legal h1 { font-size: 26px; }
  /* La tabla colapsa en tarjetas. Sin la cabecera visible, cada celda necesita
     su propia etiqueta (data-label en el HTML) o las tres líneas quedan sueltas
     y no se sabe cuál es el dato y cuál la base legal. */
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; }
  .legal__table thead { display: none; }
  .legal__table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; }
  .legal__table td { border: 0; border-bottom: 1px solid var(--border); }
  .legal__table td:last-child { border-bottom: 0; }
  .legal__table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--faint); margin-bottom: 3px;
  }
}