:root{
  --ink:#080807; --panel:#181613; --panel-2:#201E1B;
  --gold:#C79A3E; --gold-dim:#8C6E2C;
  --text-light:#F2EEDF; --text-light-dim:#B3ADA1;
  --sans:'Poppins', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--text-light-dim);
  font-family:var(--sans); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);}
a:hover{color:var(--text-light);}

.barra{
  position:sticky; top:0; z-index:20; background:rgba(8,8,7,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(199,154,62,.18);
}
.barra .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.marca{
  font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-light); text-decoration:none; font-weight:500;
}
.marca b{color:var(--gold); font-weight:700;}
.volver{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--text-light-dim); border:1px solid rgba(199,154,62,.4);
  padding:9px 16px; border-radius:40px; transition:background .25s ease, color .25s ease;
}
.volver:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}

.wrap{max-width:780px; margin:0 auto; padding:0 24px;}
main.wrap{padding-top:58px; padding-bottom:80px;}

.eyebrow{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  margin:0 0 18px;
}
h1{
  font-size:clamp(28px, 5vw, 40px); font-weight:500; line-height:1.15; letter-spacing:-.015em;
  color:var(--text-light); margin:0 0 10px;
}
.actualizado{font-size:12.5px; color:var(--text-light-dim); opacity:.75; margin:0 0 42px;}

h2{
  font-size:19px; font-weight:600; color:var(--text-light);
  margin:44px 0 12px; padding-top:22px; border-top:1px solid rgba(199,154,62,.16);
  line-height:1.3;
}
h2:first-of-type{border-top:none; padding-top:0; margin-top:34px;}
h3{font-size:15px; font-weight:600; color:var(--text-light); margin:26px 0 8px;}
p{margin:0 0 14px;}
ul{margin:0 0 16px; padding-left:20px;}
li{margin-bottom:8px;}
strong{color:var(--text-light); font-weight:600;}

.dato{
  background:var(--panel); border:1px solid rgba(199,154,62,.2); border-radius:14px;
  padding:20px 22px; margin:0 0 30px;
}
.dato p{margin:0 0 6px; font-size:14px;}
.dato p:last-child{margin:0;}

.tabla{
  margin:0 0 24px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(199,154,62,.16); border-radius:12px;
}
table{
  width:100%; min-width:540px; border-collapse:collapse; font-size:13.5px;
  table-layout:auto;
}
thead th{
  text-align:left; background:rgba(199,154,62,.05); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:700; padding:10px 12px; white-space:nowrap;
  border-bottom:1px solid rgba(199,154,62,.3);
}
tbody td{
  padding:12px 14px; border-bottom:1px solid rgba(199,154,62,.12); vertical-align:top;
}
tbody tr:last-child td{border-bottom:none;}
tbody td:first-child{color:var(--text-light); font-weight:600; white-space:nowrap;}

.aviso{
  background:rgba(199,154,62,.07); border-left:2px solid var(--gold);
  padding:14px 18px; margin:0 0 24px; font-size:13.5px; border-radius:0 8px 8px 0;
}

.acciones{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0;}
.btn-legal{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  background:transparent; color:var(--text-light); border:1px solid var(--gold);
  padding:13px 22px; border-radius:40px; text-decoration:none;
  transition:background .25s ease, color .25s ease;
}
.btn-legal:hover{background:var(--gold); color:var(--ink);}

footer{
  border-top:1px solid rgba(199,154,62,.16); padding:26px 24px; margin-top:20px;
  font-size:12px; color:var(--text-light-dim);
}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; max-width:780px;}
footer a{text-decoration:none;}

@media (max-width:620px){
  main.wrap{padding-top:40px;}
  .barra .wrap{padding:13px 18px;}
  .volver{padding:8px 13px; font-size:11px;}
}

/* en móvil la tabla se desplaza dentro de su caja en vez de apelmazarse */
.tabla-nota{
  font-size:11.5px; color:var(--text-light-dim); opacity:.7; margin:-18px 0 24px;
}
@media (min-width:660px){ .tabla-nota{display:none;} }