/* Página de links do Instagram (links.acfamilyofficer.it): celular primeiro, sem o cabeçalho do site.
   Cores e fontes iguais às do site.css; fica em arquivo próprio para abrir rápido no navegador do Instagram. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 400;font-display:swap;src:url(/assets/fonts/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/literata-latin.woff2) format("woff2")}

:root{
  --linho:#EFEBE5; --linho-claro:#F7F4EF; --linha:#D8D0C4;
  --petroleo:#335159; --petroleo-esc:#1F3338;
  --tinta:#22373C; --tinta-suave:#4E666C;
  --bronze:#B06C34; --bronze-texto:#8A5220; --bronze-claro:#D49A68;
  --esc-txt:#B7C7C9; --erro:#8E2B1E;
  --f-tit:"Newsreader",Georgia,serif; --f-txt:"Literata",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif;
  --gut:20px; --col:460px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--linho);color:var(--tinta);font-family:var(--f-txt);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
a{color:var(--petroleo)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
h1,h2,p,ul,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
ul{list-style:none}
[hidden]{display:none !important}
.sr,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* topo escuro com o retrato no arco, o desenho dos pórticos de Turim do site */
.topo{background:var(--petroleo-esc) url(/assets/img/textura-mater-pater.webp) 0 0/720px auto;color:var(--linho);padding:calc(30px + env(safe-area-inset-top)) var(--gut) 26px;text-align:center}
.arco{width:124px;margin:0 auto 18px;padding:5px;border:1px solid var(--bronze-claro);border-bottom-color:transparent;border-radius:999px 999px 0 0}
.arco img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:999px 999px 0 0}
.topo h1{font-family:var(--f-tit);font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-.015em}
.topo p{max-width:320px;margin:8px auto 0;font-family:var(--f-ui);font-size:17px;line-height:1.4;color:var(--esc-txt)}
/* com o formulário aberto, o topo encolhe para sobrar tela para a pergunta */
.topo.mini{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) var(--gut) 12px;text-align:left}
.topo.mini .arco{width:40px;margin:0;padding:0;border:0}
.topo.mini h1{font-size:21px}
.topo.mini p{display:none}

main{flex:1;width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--gut)}

.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;padding:0 24px;border:1px solid var(--petroleo);border-radius:2px;background:var(--petroleo);color:var(--linho);font-family:var(--f-ui);font-weight:500;font-size:18px;letter-spacing:.03em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{background:var(--petroleo-esc)}
.btn[disabled]{opacity:.6}
.btn-line{background:transparent;color:var(--petroleo)}

.convite{padding:28px 0 30px}
.convite h2,.lks h2,.ok h2{font-family:var(--f-tit);font-weight:300;font-size:29px;line-height:1.15;letter-spacing:-.01em;color:var(--petroleo)}
.convite p{margin:10px 0 20px}
.convite noscript p{margin:14px 0 0}

.lks{padding:26px 0 32px;border-top:1px solid var(--linha)}
.lks h2{font-size:23px}
.lks ul{margin-top:12px}
.lks li{border-top:1px solid var(--linha)}
.lks li:first-child{border-top:0}
.lks a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;min-height:62px;padding:11px 0;color:var(--tinta);text-decoration:none}
.lks b{font-family:var(--f-ui);font-weight:500;font-size:18px;line-height:1.3;color:var(--petroleo)}
.lks span{grid-row:2;font-size:15px;line-height:1.4;color:var(--tinta-suave)}
.lks a::after{content:"→";grid-column:2;grid-row:1 / span 2;font-family:var(--f-ui);font-size:20px;color:var(--bronze-texto)}

/* perguntas: sem JavaScript aparecem todas em sequência; com ele, uma por vez */
.tri{padding:22px 0 30px}
.js .tri{display:none}
.js .tri.on{display:block}
.prog{height:2px;background:var(--linha);display:none}
.prog span{display:block;height:100%;width:0;background:var(--bronze);transition:width .3s ease}
.conta{display:none;margin-top:12px;font-family:var(--f-ui);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-texto)}
.js .prog,.js .conta{display:block}
.passo{margin-top:16px}
.js .passo{display:none}
.js .passo.on{display:block}
.q{display:block;width:100%;font-family:var(--f-tit);font-weight:300;font-size:30px;line-height:1.14;letter-spacing:-.012em;color:var(--petroleo);text-wrap:balance}
.q:focus{outline:0}
.ajuda{margin-top:10px;font-size:16px;line-height:1.5;color:var(--tinta-suave)}

.op{position:relative;display:block;margin-top:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.q + .op{margin-top:18px}
.ajuda + .op{margin-top:16px}
.op input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.op span{display:flex;align-items:center;min-height:58px;padding:12px 16px;border:1px solid #9AA6A8;border-radius:2px;background:var(--linho-claro);font-family:var(--f-ui);font-size:18px;line-height:1.3;color:var(--tinta);transition:background-color .15s,color .15s,border-color .15s}
.op input:checked + span{background:var(--petroleo);border-color:var(--petroleo);color:var(--linho)}
.op input:focus-visible + span{outline:2px solid var(--bronze);outline-offset:2px}

.fld{margin-top:16px}
.fld label{display:block;margin-bottom:6px;font-family:var(--f-ui);font-weight:500;font-size:16px;color:var(--petroleo)}
.op-t{font-weight:400;color:var(--tinta-suave)}
.in{display:block;width:100%;min-height:54px;padding:12px 14px;border:1px solid #9AA6A8;border-radius:2px;background:#fff;color:var(--tinta);font-family:var(--f-ui);font-size:18px;line-height:1.4}
textarea.in{resize:vertical;font-family:var(--f-txt);font-size:17px}
.in:focus{outline:2px solid var(--bronze);outline-offset:1px}
.in::placeholder{color:#6F8488}

.chk{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;margin-top:20px;font-size:15px;line-height:1.45;cursor:pointer}
.chk input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--petroleo)}
.aviso{margin-top:12px;font-size:14px;line-height:1.5;color:var(--tinta-suave)}
.aviso summary{min-height:32px;font-family:var(--f-ui);font-size:15px;color:var(--petroleo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.aviso p{margin-top:8px}
.aviso b{font-weight:500;color:var(--tinta)}

.err,.falha{display:none;margin-top:14px;font-family:var(--f-ui);font-size:16px;line-height:1.4;color:var(--erro)}
.passo.bad .err,.tri.fail .falha{display:block}
.passo .btn{margin-top:20px}
.passo .falha{margin-top:14px}
.falha a{color:var(--erro)}

.volta{display:none;margin-top:16px;min-height:44px;padding:0;border:0;background:none;color:var(--tinta-suave);font-family:var(--f-ui);font-size:16px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.js .volta{display:block}

.ok{padding:34px 0 36px;text-align:left}
.ok > svg{width:42px;height:auto;margin-bottom:18px;fill:none;stroke:var(--bronze);stroke-width:1}
.ok h2{font-size:34px}
.ok h2:focus{outline:0}
.ok p{margin-top:12px}
.ok .btn{margin-top:22px}

.pe{width:100%;max-width:var(--col);margin:0 auto;padding:20px var(--gut) calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);font-family:var(--f-ui);font-size:13.5px;line-height:1.5;color:var(--tinta-suave)}
.pe p + p{margin-top:8px}
/* pergunta aberta: o rodapé legal não precisa disputar a tela */
.aberto .pe{padding-top:14px}

@media (min-width:640px){
  :root{--col:500px}
  .topo:not(.mini){padding-top:44px;padding-bottom:34px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}