/* Hoja de estilo de los documentos legales del instituto.
   Reusa las variables y las tipografias de index.html para que el aviso de
   privacidad y los terminos se vean del instituto y no de un generador.
   Es un documento de lectura, no una pagina de venta: una sola columna,
   medida de linea corta y jerarquia sobria. */

:root{
  --navy:#111E29;
  --teal:#0090A9;
  --naranja:#FF9135;
  --papel:#F2F1EC;
  --papel-alto:#FBFAF7;
  --tinta:#16242B;
  --gris:#5B6E73;
  --regla:#C9CCC4;
  --titular:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --lectura:"Newsreader",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
     font-family:var(--lectura);font-size:19px;line-height:1.62;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal)}
a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}

/* barra superior, version reducida de la del sitio */
.barra{background:var(--navy);position:sticky;top:0;z-index:10}
.barra-fila{display:flex;align-items:center;justify-content:space-between;
            gap:1rem;padding:.9rem 0}
.marcaje{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;
         font-family:var(--titular);font-weight:500;font-size:1.02rem;
         letter-spacing:-.02em}
.marcaje img{height:30px;width:auto}
.volver{font-family:var(--titular);font-size:.92rem;font-weight:500;color:#CFE1E3;
        text-decoration:none;border:1.5px solid rgba(159,196,203,.4);
        border-radius:10px;padding:.5rem 1rem;white-space:nowrap}
.volver:hover{color:#fff;border-color:#CFE1E3}

/* el documento */
.hoja{width:min(100% - 2.6rem,64ch);margin-inline:auto;
      padding:clamp(2.6rem,6vw,4.5rem) 0 4rem}
.marca{font-family:var(--titular);font-size:.82rem;font-weight:500;
       letter-spacing:.02em;color:var(--teal);border-top:2px solid var(--teal);
       padding-top:.5rem;margin:0 0 1.4rem;display:inline-block}
h1{font-family:var(--titular);font-weight:700;letter-spacing:-.035em;
   font-size:clamp(2rem,5vw,3rem);line-height:1.06;margin:0 0 .6rem}
h2{font-family:var(--titular);font-weight:500;letter-spacing:-.022em;
   font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;
   margin:2.6rem 0 .9rem}
h3{font-family:var(--titular);font-weight:500;font-size:1.05rem;
   letter-spacing:-.012em;margin:1.8rem 0 .5rem}
p,li{max-width:64ch}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.3rem}
li{margin-bottom:.5em}
strong{font-weight:600}
.fecha{font-family:var(--titular);font-size:.9rem;color:var(--gris);
       margin:0 0 2.4rem}
.entradilla{font-size:1.1rem;color:var(--gris)}
.regla{border:0;border-top:1px solid var(--regla);margin:3rem 0}

/* recuadro para lo que el lector tiene que poder encontrar rapido */
.destacado{background:var(--papel-alto);border-left:3px solid var(--teal);
           padding:1.2rem 1.4rem;margin:1.6rem 0}
.destacado p:last-child{margin-bottom:0}

/* pie, version reducida */
.pie{background:var(--navy);color:#CFE1E3;padding:2.4rem 0;margin-top:3rem;
     font-size:.95rem}
.pie a{color:#CFE1E3}
.pie a:hover{color:#fff}
.pie-fila{width:min(100% - 2.6rem,64ch);margin-inline:auto;
          display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
          justify-content:space-between;font-family:var(--titular)}

@media (max-width:520px){
  body{font-size:18px}
  .marcaje img{height:26px}
}