/* Elementos Vincii compartilhados pelas três direções do Ora: fontes, cores, botões, foco.
   O layout é de cada direção (dN/estilo.css). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-standard-italic.woff2) format("woff2")}

:root{
  --tiffany:#00BFA6;
  --tiffany-hover:#00AD96;
  --tiffany-fraco:#D9F5F0;
  --tinta:#01302A;
  --texto:#0B1F1C;
  --sec:#586462;
  --fio:#DFE4E3;
  --painel:#F5F6F6;
  --bloco:#E9ECEB;
  --balao:#EDF0EF;
  --sombra:0 24px 64px rgba(11,31,28,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --m:max(clamp(20px,6.2vw,104px),calc((100vw - 1480px)/2));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--texto);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--tiffany);color:var(--tinta)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Destaque: Newsreader itálico, só numa palavra por título */
em,.it{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}

/* Botões da marca */
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid var(--fio);background:#fff;color:var(--texto);font:600 16px/1.2 "Manrope",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.botao:hover{border-color:#B6C1BF}
.botao:active{transform:scale(.98)}
.botao.principal{background:var(--tiffany);border-color:var(--tiffany);color:var(--tinta)}
.botao.principal:hover{background:var(--tiffany-hover);border-color:var(--tiffany-hover)}
.botao.tinta{background:var(--tinta);border-color:var(--tinta);color:#fff}
.botao.tinta:hover{background:#0B4A41;border-color:#0B4A41}
.botao:focus-visible{border-radius:999px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.entrar{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;font-size:16px;text-decoration:none;color:var(--texto);background-image:linear-gradient(var(--tiffany),var(--tiffany));background-size:0 2px;background-position:0 calc(100% - 8px);background-repeat:no-repeat;transition:background-size .3s var(--ease)}
.entrar:hover{background-size:100% 2px}

/* Esboço do painel: moldura neutra que recebe o print real (data-slot="print-painel") */
.moldura{position:relative;padding:8px;border-radius:24px;background:rgba(1,48,42,.04);box-shadow:inset 0 0 0 1px rgba(1,48,42,.06)}
.moldura>.tela{position:relative;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(1,48,42,.04),var(--sombra)}
.moldura img{width:100%;height:auto}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:520px){.botao{min-height:50px;padding:0 22px}}

/* Esboço abstrato do painel (sem números, sem nomes): estrutura real das telas do Ora.
   Será trocado pelo print real dentro de [data-slot="print-painel"]. */
.esboco{display:grid;grid-template-columns:clamp(150px,17%,210px) minmax(0,1fr);aspect-ratio:16/10;font-size:clamp(9px,.95vw,13px);line-height:1.3;color:var(--texto);background:#fff;text-align:left}
.e-lado{display:flex;flex-direction:column;gap:2px;padding:1.6em 1em;background:var(--painel);border-right:1px solid var(--fio)}
.e-lado img{width:2.6em;height:auto;margin:0 0 1.6em .6em}
.e-lado span{display:block;padding:.62em .8em;border-radius:.6em;color:var(--sec);font-weight:500}
.e-lado span.ativo{background:#fff;color:var(--texto);font-weight:600;box-shadow:0 1px 2px rgba(11,31,28,.06)}
.e-corpo{display:flex;flex-direction:column;gap:1.4em;padding:1.8em 2em;min-width:0}
.e-topo{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.e-titulo{font-size:1.9em;font-weight:600;letter-spacing:-.02em}
.e-legenda{display:flex;flex-wrap:wrap;gap:.5em 1.1em;color:var(--sec)}
.e-legenda span{display:inline-flex;align-items:center;gap:.45em}
.e-legenda i{display:inline-block;width:1.6em;height:.7em;border-radius:99px}
.e-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,2.2fr);border-top:1px solid var(--fio);flex:1}
.e-grade>div{display:flex;align-items:center;gap:.45em;min-height:3.4em;padding:.55em .6em;border-bottom:1px solid var(--fio)}
.e-grade>.cab{min-height:2.6em;color:var(--sec);font-weight:600}
.e-nome{display:block;height:.75em;border-radius:99px;background:var(--bloco)}
.e-grade b{display:block;height:1.55em;border-radius:.5em;flex:0 1 auto}
.c-conf{background:var(--tiffany)}
.c-agen{background:var(--tiffany-fraco)}
.c-rem{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tiffany)}
.c-hum{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tinta)}
.c-livre{background:transparent;outline:1.5px dashed #C9D1CF;outline-offset:-1.5px}
@media (max-width:640px){
  .esboco{grid-template-columns:minmax(0,1fr);aspect-ratio:auto;font-size:11px}
  .e-lado{flex-direction:row;overflow:hidden;padding:.8em;gap:0;border-right:0;border-bottom:1px solid var(--fio)}
  .e-lado img{margin:0 .6em 0 0;width:2.2em}
  .e-lado span:nth-of-type(n+4){display:none}
  .e-corpo{padding:1.2em}
  .e-legenda{display:none}
}