/* Estilo de las páginas de texto (gracias, privacidad). La portada lleva su CSS dentro. */
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{
  --papel:#F6F6F4;--cuad:#E2E8F3;--cuad-may:#CFDAEE;--hoja:#FFFFFF;
  --texto:#18213A;--texto2:#4B5672;--tinta:#1F3C9C;--borde:#7A8399;
  --sombra:0 1px 1px rgba(20,24,40,.06),0 2px 6px rgba(20,24,40,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--borde) var(--papel)}
body{margin:0;font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:1.0625rem;line-height:1.55;color:var(--texto);
  background-color:var(--papel);caret-color:var(--tinta);
  background-image:
    linear-gradient(var(--cuad-may) 1px,transparent 1px),linear-gradient(90deg,var(--cuad-may) 1px,transparent 1px),
    linear-gradient(var(--cuad) 1px,transparent 1px),linear-gradient(90deg,var(--cuad) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-1px -1px}
::selection{background:#D3DDF0;color:var(--texto)}
a{color:var(--tinta);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
h1,h2{margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}

.logo{font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--tinta);white-space:nowrap;display:inline-block;text-decoration:none}
.logo .i{position:relative;display:inline-block}
.logo .i::before{content:"";position:absolute;left:50%;bottom:.715em;width:.215em;height:.215em;margin-left:-.1075em;
  border:.058em solid currentColor;border-radius:50%;box-sizing:border-box}
.logo .i:first-of-type{margin-left:.035em}
.top{padding:22px 0 0}
.top .logo{font-size:1.9rem}

.texto{background:var(--hoja);border-radius:2px;box-shadow:var(--sombra);padding:30px 22px 36px;margin:40px 0 64px;max-width:760px}
.texto h1{font-size:clamp(2rem,7vw,2.75rem);line-height:1.08}
.texto h2{font-size:1.2rem;margin:28px 0 6px}
.texto p + p{margin-top:10px}
.texto .suave{color:var(--texto2)}
.volver{margin-top:28px}

@media (min-width:760px){
  .wrap{width:min(1120px,100% - 80px)}
  .top{padding-top:30px}
  .texto{padding:48px 56px 52px}
}