/* PROCESO: páginas legales. Misma paleta y tipografía que la landing, pero para leer: una columna, sin escenas ni movimiento. */
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(../fuentes/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(../fuentes/montserrat-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fuentes/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fuentes/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fuentes/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fuentes/inter-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../fuentes/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../fuentes/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Mientras carga Montserrat, una Arial con métricas parecidas: el título no salta. */
@font-face{font-family:"Reserva M";src:local("Arial Bold"),local("Arial");font-weight:800;size-adjust:112%;ascent-override:86%;descent-override:22%}

:root{
  --naranja:#FF6A00;      /* sobre #101010: 6,6:1; sobre #1B1B1B: 6,0:1 */
  --negro:#101010;
  --sup:#1B1B1B;
  --linea:#333;           /* solo divide: no lleva texto */
  --gris-txt:#ADADAD;     /* 8,6:1 sobre #101010 y 7,9:1 sobre #1B1B1B */
  --texto-largo:#E4E4E4;  /* el cuerpo de la lectura: 15:1 sobre #101010 */
  --blanco:#fff;
  --incl:29deg;           /* el ángulo del logo, igual que la landing */
  --m:clamp(16px,5vw,48px);
  --titular:Montserrat,"Reserva M",Arial,sans-serif;
  --texto:Inter,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--negro)}
body{margin:0;background:var(--negro);color:var(--texto-largo);font:400 17px/1.7 var(--texto);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--blanco);outline-offset:3px}
a{color:var(--naranja);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600;color:var(--blanco)}

.saltar{position:absolute;left:8px;top:8px;z-index:10;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--blanco);color:var(--negro);font-weight:600;transform:translateY(-200%)}
.saltar:focus-visible{transform:none}

/* ------- Cabecera: el logo a la izquierda, la vuelta a la derecha. No acompaña el scroll. */
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:800px;margin:0 auto;padding:12px var(--m)}
.marca{display:block;padding:8px 8px 8px 0}
.marca img{width:108px;height:auto}
.volver{display:inline-flex;align-items:center;min-height:44px;color:var(--blanco);font-weight:500;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;white-space:nowrap}
.volver:hover{color:var(--naranja);text-decoration-thickness:2px}

/* ------- La lectura: una columna de unos 70 caracteres. */
.lectura{max-width:800px;margin:0 auto;padding:24px var(--m) 72px}
.lectura>*{max-width:44rem}
.lectura>.tabla-ancha{max-width:none}

.encabezado{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--linea)}
h1,h2,h3{font-family:var(--titular);font-weight:800;color:var(--blanco)}
h1{font-size:clamp(2rem,7vw,3.1rem);letter-spacing:-.035em;line-height:1.02;text-transform:uppercase;margin-bottom:20px}
h1 em{font-style:normal;color:var(--naranja)}
/* La barra del símbolo, inclinada como en la landing. */
h1::after{content:"";display:block;width:64px;height:8px;margin-top:20px;background:var(--naranja);transform:skewX(calc(var(--incl) * -1));transform-origin:left bottom}
.bajada{font-size:1.1rem;line-height:1.55;color:var(--blanco)}
.meta{display:grid;gap:4px;margin-top:20px;font-size:.875rem;line-height:1.5;color:var(--gris-txt)}
.meta strong{color:var(--texto-largo);font-weight:600}

h2{font-size:1.35rem;letter-spacing:-.02em;line-height:1.2;margin:48px 0 14px;scroll-margin-top:16px}
h3{font-size:1.02rem;letter-spacing:-.01em;line-height:1.3;margin:28px 0 8px}
p{margin-bottom:14px}
ul,ol{margin-bottom:14px}
ul.lista>li,ol.lista>li{position:relative;padding-left:22px;margin-bottom:8px}
ul.lista>li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:3px;background:var(--naranja);transform:skewX(calc(var(--incl) * -1))}
ol.lista{counter-reset:paso}
ol.lista>li{counter-increment:paso}
ol.lista>li::before{content:counter(paso) ".";position:absolute;left:0;top:0;font-family:var(--titular);font-weight:800;color:var(--naranja)}
ol.lista>li{padding-left:28px}

/* ------- Recuadros: una superficie un poco más clara, sin bordes de color. */
.resumen,.aviso,.contacto,.tarjeta{background:var(--sup);padding:20px 22px;margin:20px 0}
.resumen>h2,.aviso>h2{margin:0 0 10px;font-size:1.1rem}
.resumen p:last-child,.resumen ul:last-child,.aviso p:last-child,.contacto p:last-child,.tarjeta p:last-child{margin-bottom:0}
.resumen ul.lista{margin-bottom:0}
.tarjeta h3{margin:0 0 6px;font-size:1rem}

/* ------- Tablas: en pantallas anchas, tabla; en el teléfono, cada fila es un bloque. */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95rem;line-height:1.55}
th{padding:10px 14px 10px 0;border-bottom:2px solid var(--linea);text-align:left;font:600 .8rem/1.3 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-txt)}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--linea);vertical-align:top}
td:first-child{width:26%}
td:last-child,th:last-child{padding-right:0}
@media (max-width:719px){
  table,tbody,tr,td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  tr{padding:14px 0;border-bottom:1px solid var(--linea)}
  td{padding:0 0 6px;border:0}
  td:first-child{width:auto;color:var(--blanco)}
  td:last-child{padding-bottom:0}
  td[data-t]::before{content:attr(data-t) ": ";font-weight:600;color:var(--gris-txt)}
  td:first-child::before{content:none}
}

/* ------- Pie */
.pie{border-top:1px solid var(--linea);padding:28px var(--m) 40px;font-size:.9rem;line-height:1.6;color:var(--gris-txt)}
.pie-fila{display:flex;flex-wrap:wrap;gap:4px 24px;max-width:800px;margin:0 auto}
.pie a{display:inline-flex;align-items:center;min-height:44px;color:var(--texto-largo)}
.pie a:hover{color:var(--naranja)}
.pie p{max-width:800px;margin:8px auto 0}

@media (min-width:720px){
  body{font-size:18px}
  td:first-child:nth-last-child(2){width:48%}
  .cabecera{padding-top:20px}
  .marca img{width:124px}
  .lectura{padding-top:48px}
}
@media (forced-colors:active){
  h1::after,ul.lista>li::before{background:CanvasText}
}
