/* Páginas legales de El Pikete: mismo papel kraft y tipografías que la web, pensadas para leer */
:root {
  --kraft: #e4c99a; --kraft-light: #f0dcb4; --kraft-dark: #c9a46c;
  --teal: #1d4b47; --teal-dark: #123331; --brick: #9a2e20; --brick-dark: #6f1f15;
  --ink: #2b1d12; --night: #2a1f45; --gold: #d9a64a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Oswald", "Arial Narrow", sans-serif; color: var(--ink); font-size: 17px; line-height: 1.6;
  background-color: var(--kraft);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,240,210,.55), transparent 50%);
}
a { color: var(--brick); }
a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.wrap { max-width: 820px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.nav { background: var(--teal-dark); color: var(--kraft-light); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; }
.nav .brand { font-family: "Anton", sans-serif; font-size: 24px; letter-spacing: .04em; color: var(--kraft-light); text-decoration: none; }
.nav .brand span { color: var(--gold); }
.nav .back { color: var(--kraft-light); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; opacity: .85; }
.nav .back:hover { opacity: 1; color: var(--gold); }

header.legal { padding-block: 48px 8px; }
header.legal .script { font-family: "Yellowtail", cursive; color: var(--brick); font-size: 34px; display: block; line-height: 1; }
header.legal h1 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; color: var(--teal); font-size: clamp(42px, 8vw, 68px); line-height: .95; text-wrap: balance; }
header.legal .updated { margin-top: 12px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

main.legal { padding-block: 24px 64px; }
main.legal article { background: var(--kraft-light); border-radius: 14px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 10px 24px rgba(80,45,10,.16); }
main.legal h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; color: var(--brick); font-size: 24px; line-height: 1.15; margin-top: 32px; }
main.legal h2:first-child { margin-top: 0; }
main.legal p, main.legal ul, main.legal .table { margin-top: 10px; max-width: 68ch; }
main.legal ul { padding-left: 22px; }
main.legal li { margin-top: 4px; }
main.legal strong { font-weight: 700; }
.data { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-top: 12px; }
.data dt { font-weight: 700; color: var(--teal); }
.data dd { min-width: 0; overflow-wrap: anywhere; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid rgba(43,29,18,.15); }
th { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brick); }
mark.pend { background: #ffe08a; color: var(--ink); padding: 0 4px; border-radius: 4px; font-weight: 700; }

footer.legal-foot { background: var(--night); color: #efe6ff; padding-block: 28px; font-size: 14px; }
footer.legal-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer.legal-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.legal-foot a { color: #efe6ff; opacity: .8; }
footer.legal-foot a[aria-current="page"] { color: var(--gold); opacity: 1; }

@media (max-width: 560px) { .data { grid-template-columns: 1fr; } .data dd { margin-bottom: 6px; } }