/* ══════════════════════════════════════════════════════════════════════
   legal.css — hoja compartida por privacidad.html y accesibilidad.html.
   Mismos tokens y misma escala que index.html (sistema Industry).
   Si cambias un token acá, cámbialo también en el <style> de index.html.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/Barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/BarlowCondensed-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/BarlowCondensed-600.woff2) format('woff2')}

:root{
  --bg:#f2f2f3; --sup:#e9e9ea; --texto:#1d1f20;
  --div:color-mix(in srgb,#1d1f20 16%,transparent);
  --ac:#53779a; --ac-100:#eef6ff; --ac-200:#d6ebff; --ac-300:#b5d9fd;
  --ac-400:#94bce3; --ac-700:#3a5876; --ac-800:#2c455d; --ac-900:#1d2d3d;
  --tit:'Barlow Condensed',system-ui,sans-serif;
  --cuerpo:'Barlow',system-ui,sans-serif;
  --sombra-lg:0 12px 32px color-mix(in srgb,#2b2b2d 22%,transparent);
  --ancho:1160px; --lat:28px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--cuerpo);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--tit);font-weight:600;line-height:1.14;letter-spacing:-.015em;margin:0;text-wrap:pretty}
p,ul,ol{margin:0}
img{display:block;max-width:100%}
a{color:var(--ac-700);text-underline-offset:3px}
a:hover{color:var(--ac-800)}
a:active{color:var(--ac-800)}  /* en el teléfono no hay hover: sin esto, tocar un enlace no da ninguna señal */
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--ac) 22%,transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--ac) 30%,transparent)}
.p3-salta{position:absolute;left:-9999px;top:0;background:var(--ac-900);color:#fff;padding:12px 18px;z-index:100;font-family:var(--tit)}
.p3-salta:focus{left:0;color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.p3-env{max-width:var(--ancho);margin:0 auto;
  padding-left:max(var(--lat),env(safe-area-inset-left));
  padding-right:max(var(--lat),env(safe-area-inset-right))}

/* ─── Botones ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  text-decoration:none;font-family:var(--tit);font-weight:600;font-size:16px;line-height:1.2;
  color:var(--texto);background:transparent;border:1px solid var(--div);border-radius:0;
  padding:12px 22px;transition:background-color .2s,color .2s,border-color .2s,transform .16s}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--ac);border-color:var(--ac);color:#fff}
.btn-1:hover{background:var(--ac-700);border-color:var(--ac-700);color:#fff}

/* ─── Cabecera ─── */
.p3-barra{background:var(--ac-900);color:var(--bg)}
.p3-barra-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:10px;font-family:var(--tit);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.p3-punto{width:6px;height:6px;background:var(--ac-400);flex:none}
.p3-cab{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--div)}
.p3-cab-in{display:flex;align-items:center;gap:28px;padding-block:14px}
.p3-menu{display:flex;align-items:center;gap:24px;font-size:16px;margin-left:auto}
.p3-menu a:not(.btn){color:var(--texto);text-decoration:none}
.p3-menu a:not(.btn):hover{color:var(--ac-700)}

/* ─── Portada de la página ─── */
.p3-tapa{background:var(--ac-900);color:var(--bg)}
/* OJO: nada de max-width acá. .p3-tapa-in tambien lleva .p3-env, y como es una clase
   suelta declarada despues, su max-width le gana al del contenedor y el bloque se
   descentra respecto del resto de la pagina. El ancho de lectura va en el texto. */
.p3-tapa-in{padding-block:64px 68px}
.p3-rot{font-family:var(--tit);font-weight:600;font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac-300)}
.p3-tapa h1{font-size:clamp(37px,2rem + 2.2vw,58px);line-height:1.04;margin-top:16px;max-width:24ch}
.p3-tapa p{font-size:19px;line-height:1.6;margin-top:20px;color:var(--ac-200);max-width:64ch}

/* ─── Cuerpo a dos columnas ─── */
.p3-cols{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start;padding-block:64px 80px}
.p3-cols>*{min-width:0}

/* Índice pegado al costado */
.p3-idx{position:sticky;top:110px}
.p3-idx-cab{font-family:var(--tit);font-weight:600;font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac-700);padding-bottom:12px;border-bottom:1px solid var(--div)}
.p3-idx ol{list-style:none;padding:0;counter-reset:i}
.p3-idx li{counter-increment:i;border-bottom:1px solid var(--div)}
.p3-idx a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:10px 0;
  font-size:15.5px;text-decoration:none;color:var(--texto)}
.p3-idx a::before{content:counter(i,decimal-leading-zero);font-family:var(--tit);font-weight:600;color:var(--ac-700)}
.p3-idx a:hover,.p3-idx a:active{color:var(--ac-700)}

/* Prosa */
.p3-prosa{max-width:74ch}
.p3-fecha{display:inline-block;font-family:var(--tit);font-weight:600;font-size:14.5px;
  letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--texto) 62%,transparent);
  border:1px solid var(--div);padding:7px 14px}
.p3-entrada{font-size:19px;line-height:1.6;margin-top:22px;padding-left:18px;border-left:2px solid var(--ac)}
.p3-prosa h2{font-size:27px;margin-top:46px;padding-top:16px;border-top:2px solid var(--texto)}
.p3-prosa h2:first-of-type{margin-top:40px}
.p3-prosa p{margin-top:16px}
.p3-prosa ul{list-style:none;padding:0;margin-top:18px}
.p3-prosa li{position:relative;padding:0 0 0 26px;margin-top:11px}
.p3-prosa li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:1px;background:var(--ac)}
.p3-prosa strong{font-weight:700}
/* mono del sistema: no vale traer una fuente de terceros por tres etiquetas */
.p3-prosa code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--sup);border:1px solid var(--div);padding:1px 6px;white-space:nowrap}
.p3-alarma{margin-top:18px;padding:14px 18px;background:var(--sup);border-left:2px solid var(--ac)}
.p3-alarma p{margin-top:4px;font-size:15.5px;line-height:1.55}
.p3-alarma .p3-rot{color:var(--ac-700);font-size:13px}
.p3-paso{font-family:var(--tit);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:color-mix(in srgb,var(--texto) 55%,transparent);margin-top:26px}
.p3-nota{margin-top:44px;padding:22px 26px;position:relative;border:1px solid var(--div);background:var(--sup)}
.p3-nota p{margin-top:8px;font-size:15.5px}

/* Variante de tinta para el cierre que vende. Nació en /guias: ahí la nota clara
   compartía fondo y borde con las tarjetas de guía y se leía como una guía más.
   El sistema ya corta el scroll con bloques oscuros (multas, informe, solicitar),
   así que el CTA usa ese mismo idioma en vez de inventar un color nuevo. */
.p3-nota .p3-rot{color:var(--ac-700)}  /* .p3-rot nace claro, para la tapa oscura: sobre la
   nota clara hay que devolverlo a un azul legible. Antes esto vivía en un atributo style de
   cada página, y ahí nadie lo encontraba. */
.p3-nota.p3-cta{background:var(--ac-900);border-color:var(--ac-800);color:var(--bg);
  padding:26px 30px 28px}
.p3-nota.p3-cta .p3-rot{color:var(--ac-400)}
.p3-nota.p3-cta p{color:color-mix(in srgb,var(--bg) 88%,transparent);font-size:16.5px;line-height:1.6}
.p3-nota.p3-cta a{color:#fff;text-decoration:underline;text-decoration-thickness:1px}
.p3-nota.p3-cta a:hover,.p3-nota.p3-cta a:active{color:var(--ac-300)}
.p3-nota.p3-cta .p3-esq{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.p3-esq{position:absolute;width:11px;height:11px;color:color-mix(in srgb,var(--texto) 55%,transparent)}
.p3-esq::before,.p3-esq::after{content:"";position:absolute;background:currentColor}
.p3-esq::before{left:5px;top:0;width:1px;height:100%}
.p3-esq::after{top:5px;left:0;width:100%;height:1px}
.p3-esq.tl{top:-6px;left:-6px}.p3-esq.tr{top:-6px;right:-6px}
.p3-esq.bl{bottom:-6px;left:-6px}.p3-esq.br{bottom:-6px;right:-6px}

/* ─── Pie ─── */
.p3-pie{border-top:1px solid var(--div);background:var(--sup)}
.p3-pie-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;
  padding-block:48px 54px;align-items:start}
.p3-pie-in>*{min-width:0}
.p3-pie-marca img{margin-bottom:20px}
.p3-pie-marca p{font-size:15.5px;line-height:1.55;max-width:32ch;
  color:color-mix(in srgb,var(--texto) 70%,transparent)}
.p3-pie-marca p+p{margin-top:6px}
.p3-pie-t{font-family:var(--tit);font-weight:600;font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac-700);
  padding-bottom:13px;border-bottom:1px solid var(--div);margin-bottom:15px;
  align-self:stretch}  /* la regla cruza la columna completa: si no, se encoge al ancho del texto */
.p3-pie-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15.5px}
.p3-pie-col a{color:color-mix(in srgb,var(--texto) 80%,transparent);text-decoration:none}
.p3-pie-col a:hover,.p3-pie-col a:active{color:var(--ac-700);text-decoration:underline}
.p3-pie-col a[aria-current="page"]{color:var(--texto);font-weight:500}

/* ─── Responsive ─── */
@media (max-width:1040px){ .p3-cols{grid-template-columns:240px 1fr;gap:44px} }
@media (max-width:860px){
  .p3-cols{grid-template-columns:1fr;gap:0;padding-block:48px 64px}
  .p3-idx{position:static;padding-bottom:36px;margin-bottom:8px}
  .p3-tapa-in{padding-block:48px 52px}
  .p3-menu a:not(.btn){display:none}
  .p3-prosa h2{font-size:25px;margin-top:40px}
}
@media (max-width:620px){
  :root{--lat:20px}
  .p3-barra-in{font-size:14px;gap:8px}
  .p3-cab-in{gap:14px}
  .p3-nota{padding:18px 20px}
  .p3-prosa,.p3-idx a{font-size:16px}
}
@media (max-width:860px){
  .p3-pie-in{grid-template-columns:1fr 1fr;gap:38px 30px}
  .p3-pie-marca{grid-column:1/-1}
}
@media (max-width:460px){
  .p3-pie-in{grid-template-columns:1fr;gap:32px;padding-block:40px 44px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active{transform:none}
}