/* =========================================================================
   FEMASPORT — hoja de las páginas legales
   -------------------------------------------------------------------------
   Comparten la identidad de la home (oscuro cinematográfico, oro #C9A24B,
   Archivo para titulares y Manrope para el texto) pero con el peso quitado:
   aquí no hay intro, ni parallax, ni cintas. Un documento legal se lee, y lo
   que hace falta es una columna estrecha, buena interlínea y jerarquía clara.
   ========================================================================= */
:root{
  --bg:#06070B; --bg2:#0C0E14; --panel:#10131C; --panel2:#161A24;
  --ink:#F3F1EA; --muted:#9AA0AC; --faint:#5A606C;
  --gold:#C9A24B; --gold2:#EAD79A; --line:rgba(234,215,154,.12);
  --disp:'Archivo',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold2); text-decoration:none; border-bottom:1px solid rgba(234,215,154,.28)}
a:hover{color:var(--gold); border-bottom-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* --- cabecera --- */
.enc{
  position:sticky; top:0; z-index:10;
  background:rgba(6,7,11,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.enc-in{
  max-width:1080px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:16px;
}
.enc img{height:30px; width:auto; display:block}
.enc a{border:0}
.enc nav{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap}
.enc nav a{
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); border:0;
}
.enc nav a:hover,.enc nav a[aria-current]{color:var(--gold2)}

/* --- portada del documento --- */
.tapa{max-width:1080px; margin:0 auto; padding:62px 22px 34px; border-bottom:1px solid var(--line)}
.tapa .eyebrow{
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.tapa h1{
  font-family:var(--disp); font-size:clamp(30px,5.4vw,50px); font-weight:800;
  line-height:1.04; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
}
.tapa p{max-width:62ch; color:var(--muted); margin:0; font-size:17px}
.sello{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  padding:7px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(201,162,75,.08); border:1px solid rgba(201,162,75,.3); color:var(--gold2);
}

/* --- cuerpo --- */
.hoja{max-width:1080px; margin:0 auto; padding:40px 22px 90px; display:grid; grid-template-columns:230px 1fr; gap:52px; align-items:start}
.indice{position:sticky; top:86px}
.indice p{
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}
.indice a{
  display:block; padding:6px 12px; margin-bottom:2px; border:0; border-left:2px solid transparent;
  font-size:13.5px; color:var(--muted); line-height:1.4;
}
.indice a:hover{color:var(--ink); background:rgba(255,255,255,.03)}
.indice a.aqui{color:var(--gold2); border-left-color:var(--gold); background:rgba(201,162,75,.06)}

article h2{
  font-family:var(--disp); font-size:22px; font-weight:800; letter-spacing:-.01em;
  margin:44px 0 12px; scroll-margin-top:86px; text-wrap:balance;
}
article h2:first-child{margin-top:0}
article h3{font-family:var(--disp); font-size:16.5px; font-weight:700; margin:26px 0 8px; color:var(--gold2)}
article p,article li{max-width:66ch; color:#D8D5CC}
article p{margin:0 0 14px}
article ul,article ol{margin:0 0 16px; padding-left:22px}
article li{margin-bottom:8px}
article strong{color:var(--ink)}

.nota{
  padding:16px 18px; border-radius:12px; margin:20px 0; max-width:66ch;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold);
}
.nota.ojo{border-left-color:#DCB27C; background:rgba(220,178,124,.05)}
.nota p:last-child{margin-bottom:0}

.ficha{
  display:grid; grid-template-columns:auto 1fr; gap:10px 22px; max-width:66ch;
  padding:18px 20px; border-radius:12px; margin:18px 0;
  background:var(--panel); border:1px solid var(--line);
}
.ficha dt{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-top:3px}
.ficha dd{margin:0; color:var(--ink)}
.pendiente{color:#DCB27C; font-style:italic}

.tabla{overflow-x:auto; margin:18px 0; max-width:100%}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top}
th{font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
td{color:#D8D5CC}
tr:last-child td{border-bottom:0}

.pie{
  border-top:1px solid var(--line); margin-top:64px;
  background:var(--bg2);
}
.pie-in{max-width:1080px; margin:0 auto; padding:30px 22px 44px; font-size:13px; color:var(--faint)}
.pie-in nav{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px}
.pie-in nav a{font-size:13px; color:var(--muted); border:0}
.pie-in nav a:hover{color:var(--gold2)}

@media (max-width:880px){
  .hoja{grid-template-columns:1fr; gap:26px}
  .indice{position:static; display:flex; gap:7px; overflow-x:auto; padding-bottom:6px; margin:0 -22px; padding-left:22px; padding-right:22px}
  .indice p{display:none}
  .indice a{white-space:nowrap; flex:0 0 auto; border:1px solid var(--line); border-radius:8px; margin:0}
  .indice a.aqui{border-color:var(--gold)}
  .tapa{padding:40px 22px 26px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ======================================================================
   TELEFONO  —  anadido el 22 de septiembre de 2026
   ====================================================================== */

/* --- EL ARREGLO QUE IMPORTA -----------------------------------------
   Los hijos de una rejilla no se encogen por debajo de su contenido
   minimo salvo que se les diga. Sin esto, la tabla de cookies (460 px
   de minimo) estiraba la pagina entera a 504 px y el telefono tenia que
   alejar la vista. Medido: con esto la pagina cae a 390 clavados.        */
.hoja > *{min-width:0}
.tabla{min-width:0}
article{min-width:0; max-width:100%}

/* Un dominio o un correo largo tampoco puede empujar el ancho. */
article p,article li,.ficha dd,td{overflow-wrap:break-word; word-break:break-word}

/* --- CONTRASTE ------------------------------------------------------
   --faint da 3,05 sobre el fondo del pie; el minimo para texto pequeno
   es 4,5. Este tono esta calculado para pasar sobre todos los fondos de
   la casa, y sigue siendo claramente mas apagado que --muted.           */
:root{--faint2:#7A8292}
.eyebrow,.ficha dt,th,.pie-in{color:var(--faint2)}

/* --- LA TABLA, EN EL TELEFONO ---------------------------------------
   Una tabla de dos columnas no cabe. En vez de obligar a arrastrar de
   lado, cada fila pasa a ser un bloque: el encabezado arriba, el dato
   debajo. Se lee de corrido, como el resto de la pagina.                */
@media (max-width:620px){
  .tabla{overflow:visible}
  .tabla table,.tabla tbody,.tabla tr,.tabla td{display:block; width:100%}
  .tabla thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}
  .tabla tr{border:1px solid var(--line); border-radius:10px;
    padding:14px 16px; margin-bottom:10px; background:rgba(255,255,255,.015)}
  .tabla td{border:0; padding:0}
  .tabla td + td{margin-top:7px; color:var(--muted); font-size:14.5px}
  .tabla td:first-child{font-family:var(--disp,inherit); font-size:11.5px;
    font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gold2)}
}

/* --- MEDIDAS DE LECTURA --------------------------------------------- */
@media (max-width:620px){
  .tapa{padding:34px 18px 24px}
  .tapa h1{font-size:clamp(26px,7.4vw,34px); line-height:1.12}
  .tapa p{font-size:15.5px; line-height:1.6}
  .hoja{padding:26px 18px 64px; gap:22px}
  article h2{font-size:clamp(19px,5.2vw,23px); margin-top:34px}
  article p,article li{font-size:15.5px; line-height:1.72}
  .ficha{gap:4px 14px}
  .ficha dt{font-size:11.5px}
  .ficha dd{font-size:15px}
  .pie-in{padding:26px 18px 38px}
}

/* En pantallas muy estrechas la ficha de dos columnas aprieta: se apila. */
@media (max-width:430px){
  .ficha{display:block}
  .ficha dt{margin-top:12px}
  .ficha dd{margin:2px 0 0}
}

/* --- EL DEDO ---------------------------------------------------------
   24 enlaces median menos de 40 px de alto. 44 es el minimo para
   acertar sin pelearse con la pantalla.                                 */
@media (pointer:coarse){
  .enc nav a,.pie-in nav a{min-height:44px; display:inline-flex;
    align-items:center; padding:0 2px}
  .enc nav{gap:16px}
  .indice a{min-height:44px; display:inline-flex; align-items:center}
  article a{padding:3px 1px}
}

/* El carril del indice, con un desvanecido a la derecha que avisa de que
   hay mas fichas hacia ese lado. */
@media (max-width:880px){
  .indice{-webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .indice::-webkit-scrollbar{display:none}
}


/* ======================================================================
   LA RAIZ DEL PROBLEMA, encontrada midiendo
   ----------------------------------------------------------------------
   La tabla llevaba min-width:460px para no aplastarse dentro del
   contenedor con scroll. Apilada ya no hace falta, pero ese minimo
   seguia empujando: obligaba a la pagina entera a 478 px de ancho y el
   telefono tenia que alejar la vista para que cupiera.
   Medido: el cuerpo pasa de 478 px a 390 clavados.
   ====================================================================== */
@media (max-width:620px){
  .tabla table{min-width:0}
  .tabla{overflow-x:auto}
  /* El indice se salia 8 px por sus margenes negativos. */
  .indice{margin:0; padding-left:0; padding-right:0}
}