/* Estilos de la página /security (Programa de Seguridad). Hoja externa para cumplir
   la CSP endurecida de producción (style-src 'self', sin unsafe-inline): nada de
   <style> ni style="..." en el HTML. Extiende el look documental de /legal.css con
   índice, secciones numeradas (counters CSS), tarjetas de pilares y tablas. */

@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/intertight-600.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/intertight-700.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sourcesans3-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sourcesans3-600.woff2) format('woff2')}

:root{
  --platino:#F4F4F1;--blanco:#FBFBF9;--titular:#232528;--grafito:#3A3E42;
  --secundario:#464B50;--azul:#2C53B0;--azul-suave:#EAF0FB;--linea:#DCDCD6;
  --titulares:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --cuerpo:"Source Sans 3","Segoe UI",Verdana,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:112.5%;scroll-behavior:smooth}
body{background:var(--platino);color:var(--grafito);font-family:var(--cuerpo);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}

.doc{max-width:860px;margin:0 auto;padding:44px 24px 88px;counter-reset:sec}
a{color:var(--azul)}

/* --- Cabecera --- */
.volver{display:inline-block;font-family:var(--titulares);font-weight:600;font-size:.9rem;text-decoration:none;margin-bottom:2rem}
.doc-cabecera{border-bottom:1px solid var(--linea);padding-bottom:2rem;margin-bottom:2.4rem}
.pretitulo{display:inline-block;font-family:var(--titulares);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:.9rem}
h1{color:var(--titular);font-family:var(--titulares);font-weight:700;font-size:2.3rem;line-height:1.12;letter-spacing:-.022em;margin-bottom:.9rem}
.doc-intro{color:var(--grafito);font-size:1.12rem;max-width:64ch}
.meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.5rem;font-size:.85rem;color:var(--secundario)}
.meta b{color:var(--titular);font-family:var(--titulares);font-weight:600}

/* --- Pilares (resumen destacado) --- */
.pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-bottom:2.6rem}
.pilar{background:var(--blanco);padding:1.15rem 1.25rem}
.pilar h3{font-family:var(--titulares);font-weight:600;font-size:.98rem;color:var(--titular);margin-bottom:.3rem}
.pilar p{font-size:.95rem;color:var(--secundario);margin:0}

/* --- Índice --- */
.toc{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:3rem}
.toc h2{font-family:var(--titulares);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secundario);margin-bottom:.9rem}
.toc-list{list-style:none;counter-reset:toc;columns:2;column-gap:2.4rem;margin:0}
.toc-list li{counter-increment:toc;margin-bottom:.5rem;break-inside:avoid;font-size:.95rem}
.toc-list li::before{content:counter(toc) ". ";color:var(--azul);font-family:var(--titulares);font-weight:600}
.toc-list a{text-decoration:none;color:var(--grafito)}
.toc-list a:hover{color:var(--azul)}

/* --- Secciones --- */
.sec{margin-bottom:2.8rem;scroll-margin-top:1.5rem}
.sec>h2{counter-increment:sec;color:var(--titular);font-family:var(--titulares);font-weight:700;font-size:1.42rem;letter-spacing:-.012em;margin-bottom:1rem;padding-top:.4rem}
.sec>h2::before{content:counter(sec) ". ";color:var(--azul)}
.sec h3{color:var(--titular);font-family:var(--titulares);font-weight:600;font-size:1.08rem;margin:1.6rem 0 .45rem}
.sec p{margin-bottom:.85rem;max-width:68ch}
.sec ul{margin:.3rem 0 1.1rem 1.25rem;max-width:68ch}
.sec li{margin-bottom:.4rem}
.sec li strong,.sec p strong{color:var(--titular);font-weight:600}

/* --- Tabla --- */
.tabla-wrap{overflow-x:auto;margin:.6rem 0 1.3rem}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
th,td{text-align:left;padding:.62rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{font-family:var(--titulares);font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--secundario);background:var(--blanco)}
tbody th{font-family:var(--titulares);font-weight:600;color:var(--titular);white-space:nowrap}

/* --- Enlaces contextuales al pie de sección --- */
.rel{border-top:1px solid var(--linea);margin-top:3rem;padding-top:1.4rem}
.rel p{font-size:.92rem;color:var(--secundario);margin-bottom:.4rem}

/* --- Pie --- */
.doc-pie{border-top:1px solid var(--linea);margin-top:2.4rem;padding-top:1.4rem;color:var(--secundario);font-size:.85rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.doc-pie a{color:var(--secundario);text-decoration:none}
.doc-pie a:hover{color:var(--azul)}

@media (max-width:640px){
  h1{font-size:1.85rem}
  .pilares{grid-template-columns:1fr}
  .toc-list{columns:1}
  .doc{padding:32px 20px 64px}
}