/* Estilo de las páginas legales.
   Mismos tokens que la app: un aviso que se ve de otra marca no se lee como
   propio. Columna angosta y renglón alto, porque esto sí hay que leerlo. */

:root {
  --abismo:#0a141d; --profundo:#0d1b27; --superficie:#152836; --borde:#20404f;
  --tinta:#e9f1f7; --bruma:#7e95a8;
  --teal:#3f7cac; --espuma:#6fb3d9; --coral:#e08a7a;
  --voz: ui-serif, Georgia, 'Times New Roman', serif;
}
* { box-sizing:border-box }
body { margin:0; background:var(--abismo); color:var(--tinta);
       font-family:system-ui, sans-serif; -webkit-font-smoothing:antialiased;
       line-height:1.7 }

.marco { width:100%; max-width:44rem; margin-inline:auto; padding-inline:1.25rem }

.tope { border-bottom:1px solid var(--borde); background:var(--profundo) }
.tope .marco { display:flex; align-items:center; justify-content:space-between;
               gap:1rem; height:4rem }
.firma { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--tinta) }
.firma svg { width:2rem; height:2rem; border-radius:.55rem; flex:none }
.firma b { font-family:var(--voz); font-weight:400; font-size:1.25rem }
.tope a.volver { color:var(--bruma); text-decoration:none; font-size:.93rem }
.tope a.volver:hover { color:var(--tinta) }

main { padding:clamp(2.5rem,7vw,4rem) 0 5rem }

h1 { font-family:var(--voz); font-weight:400; font-size:clamp(1.9rem,5vw,2.6rem);
     line-height:1.2; margin:0 0 .6rem; letter-spacing:-.005em }
.fecha { color:var(--bruma); font-size:.9rem; margin:0 0 2.5rem;
         padding-bottom:1.5rem; border-bottom:1px solid var(--borde) }

h2 { font-family:var(--voz); font-weight:400; font-size:1.45rem; line-height:1.3;
     margin:2.75rem 0 .75rem; color:var(--tinta) }
h2:first-of-type { margin-top:0 }
h3 { font-size:1rem; font-weight:600; margin:1.75rem 0 .5rem; color:var(--espuma) }

p, li { color:var(--bruma); font-size:1rem }
p { margin:0 0 1rem }
strong, b { color:var(--tinta); font-weight:600 }
ul, ol { margin:0 0 1.25rem; padding-left:1.35rem }
li { margin-bottom:.55rem }
li::marker { color:var(--borde) }

a { color:var(--espuma) }
a:hover { text-decoration:underline }
a:focus-visible { outline:2px solid var(--espuma); outline-offset:3px }

/* Lo que falta por completar. Se ve distinto a propósito: un hueco legal no
   debe poder pasar inadvertido a producción. */
mark { background:rgba(224,138,122,.15); color:var(--coral); border:1px dashed rgba(224,138,122,.5);
       border-radius:.35rem; padding:.05rem .4rem; font-size:.92em }

.caja { background:var(--superficie); border:1px solid var(--borde);
        border-radius:.9rem; padding:1.1rem 1.25rem; margin:0 0 1.5rem }
.caja p:last-child { margin-bottom:0 }

.tabla { overflow-x:auto; border:1px solid var(--borde); border-radius:.9rem; margin:0 0 1.5rem }
table { width:100%; border-collapse:collapse; min-width:30rem }
th, td { padding:.8rem 1rem; text-align:left; vertical-align:top; font-size:.93rem;
         border-bottom:1px solid var(--borde); color:var(--bruma) }
thead th { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
           color:var(--bruma); font-weight:600; background:var(--profundo) }
tbody th { color:var(--tinta); font-weight:600; white-space:nowrap }
tbody code { color:var(--espuma); font-size:.9em }
tr:last-child th, tr:last-child td { border-bottom:0 }

footer { border-top:1px solid var(--borde); background:var(--profundo); padding:2.5rem 0 }
.pieLigas { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.92rem; margin-bottom:1.5rem }
footer a { color:var(--bruma); text-decoration:none }
footer a:hover { color:var(--espuma); text-decoration:underline }
.legalito { font-size:.82rem; color:#5d7385; margin:0 }

/* El aviso de almacenamiento, igual que en la portada. */
.avisoCookies { position:fixed; z-index:40; left:1rem; right:1rem;
           bottom:calc(1rem + env(safe-area-inset-bottom)); margin-inline:auto;
           max-width:34rem; background:var(--superficie); border:1px solid var(--borde);
           border-radius:1rem; padding:1.1rem 1.2rem; display:flex; flex-direction:column;
           gap:.85rem; box-shadow:0 18px 50px rgba(0,0,0,.5) }
.avisoCookies p { font-size:.9rem; margin:0 }
.avisoCookies .fila { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.avisoCookies .btn { display:inline-flex; align-items:center; min-height:2.6rem; padding:0 1.1rem;
                border-radius:.7rem; border:0; background:var(--teal); color:#fff;
                font:inherit; font-size:.92rem; font-weight:600; cursor:pointer }
.avisoCookies .btn:hover { background:#4a8cbf }