/* ==========================================================================
   Páginas legales — FotoFun
   Compartida por aviso-legal.html, politica-privacidad.html y
   politica-cookies.html. Tokens de contexto/design.md; la base (reset,
   cabecera, pie) replica la de gracias.html para que las cinco páginas se
   vean iguales.
   ========================================================================== */
:root{
  --bg:#08080b;
  --surface:#17171a;
  --text:#ffffff;
  --text-muted:rgba(255,255,255,.7);
  --border:rgba(255,255,255,.12);
  --primary:#ec008c;
  --font-display:"Poppins",sans-serif;
  --font-body:"Open Sans",sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;
  --r-sm:4px;--r-md:8px;
  --fast:150ms ease-out;
  --max-text:720px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;margin:0 0 var(--s3)}
p{margin:0 0 var(--s3);color:var(--text-muted)}
img,svg{display:block;max-width:100%}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}

.container{max-width:var(--max-text);margin:0 auto;padding:0 var(--s3)}
@media(min-width:768px){.container{padding:0 var(--s5)}}

.saltar{
  position:absolute;left:var(--s3);top:-100px;z-index:100;
  background:var(--primary);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  padding:12px 16px;border-radius:var(--r-md);text-decoration:none;
  transition:top var(--fast);
}
.saltar:focus{top:var(--s3)}

.site-header{border-bottom:1px solid var(--border)}
.site-header .container{padding-top:var(--s3);padding-bottom:var(--s3)}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:16px;width:auto;display:block}
@media(min-width:768px){.logo img{height:18px}}

main{padding:var(--s6) 0}

/* --- documento -------------------------------------------------------- */
.doc h1{font-size:clamp(1.7rem,4.5vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s1)}
.doc .titular{font-size:.9rem;margin-bottom:var(--s1)}
.doc .version{font-size:.85rem;margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.doc h2{font-size:1.2rem;font-weight:600;margin:var(--s5) 0 var(--s2)}
.doc h3{font-size:1rem;font-weight:600;margin:var(--s4) 0 var(--s2)}
.doc p,.doc li{font-size:.95rem}
.doc ul{margin:0 0 var(--s3);padding-left:1.25em;color:var(--text-muted)}
.doc li{margin-bottom:var(--s2)}
.doc strong{color:var(--text);font-weight:600}
.doc .nota{font-size:.85rem}

/* Las tablas pueden ser más anchas que un móvil: desbordan dentro de su
   propio contenedor, nunca la página. */
.tabla{overflow-x:auto;margin:0 0 var(--s4);-webkit-overflow-scrolling:touch}
.doc table{
  width:100%;min-width:480px;border-collapse:collapse;
  font-size:.88rem;line-height:1.45;
}
.doc th,.doc td{
  text-align:left;vertical-align:top;
  padding:10px 12px;border:1px solid var(--border);
}
.doc th{background:var(--surface);color:var(--text);font-family:var(--font-display);font-weight:600;font-size:.82rem}
.doc td{color:var(--text-muted)}
.doc td code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;color:var(--text)}

footer{border-top:1px solid var(--border);padding:var(--s5) 0;text-align:center}
footer p{font-size:.85rem;margin:0 0 var(--s3)}
.footer-links{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}
.footer-links a{color:var(--text-muted);font-size:.85rem;text-decoration:none}
.footer-links a:hover{color:var(--text)}