*{box-sizing:border-box}body{margin:0;background:#faf9f5;color:#253d35;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button,input{font:inherit}.site-header{max-width:1320px;margin:auto;padding:30px 60px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 25px Georgia,serif}.brand-icon{display:grid;place-items:center;background:#244b43;color:#fff;border-radius:11px;width:43px;height:46px;font:32px Georgia,serif}.brand small{display:block;font:9px Arial,sans-serif;letter-spacing:2px;margin-top:7px;color:#78827a}.header-link{font-size:13px;text-decoration:none;color:#64716a}.header-link span{margin-left:12px}.login-layout{max-width:1200px;margin:32px auto 48px;display:grid;grid-template-columns:1.12fr 1fr;min-height:650px;border:1px solid #e2e5dc;border-radius:24px;overflow:hidden;background:white;box-shadow:0 16px 60px #243f3508}.story{position:relative;overflow:hidden;padding:48px 52px 28px;background:#eaf0e7}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#617365}.eyebrow>span{color:#a57443;margin-right:8px}h1{font:normal clamp(40px,4vw,57px)/1.09 Georgia,serif;letter-spacing:-2px;margin:28px 0 20px}h1 em{color:#547b62;font-weight:normal}.story>p{font-size:14px;line-height:1.8;max-width:350px;color:#67756b}.reading-scene{height:210px;position:relative;margin-top:15px}.scene-circle{position:absolute;width:250px;height:200px;border-radius:50%;background:#dde6d5;left:70px;top:8px}.book{position:absolute;width:125px;height:164px;border-radius:3px 8px 8px 3px;border-left:7px solid #ffffff25;box-shadow:8px 12px 16px #34452d20;padding:23px 12px;font:19px/1.3 Georgia,serif;letter-spacing:1px}.book span{display:block;margin-top:28px;font:6px Arial,sans-serif;letter-spacing:1.6px}.book-one{background:#315b4c;color:#f5e9c5;left:78px;top:20px;transform:rotate(-13deg)}.book-two{background:#cb9b6c;color:#453e2f;left:206px;top:38px;transform:rotate(12deg);font-size:24px}.book-two span{margin-top:20px}.scene-star{position:absolute;left:352px;top:20px;font-size:47px;color:#a78047}.scene-note{position:absolute;left:300px;top:173px;white-space:nowrap;font:italic 16px Georgia,serif;color:#768367;transform:rotate(-9deg)}.story-footer{font-size:11px;color:#788574;margin-top:22px}.story-footer span{margin-right:9px;font-size:18px}.login-panel{padding:82px 58px 45px;align-self:center}.form-heading h2{font:normal 32px/1.2 Georgia,serif;letter-spacing:-.8px;margin:18px 0 12px}.form-heading p{color:#7a817c;font-size:13px;line-height:1.7;margin-bottom:32px}.field{margin:0 0 22px}.field label{display:block;font-size:12px;font-weight:600;margin-bottom:10px}input{width:100%;min-height:52px;border:1px solid #dce1da;background:#fdfdfb;border-radius:8px;padding:0 15px;color:#253d35;font-size:14px}input::placeholder{color:#92998f}.password-field{position:relative}.password-field input{padding-right:85px}.password-field button{position:absolute;right:12px;top:0;height:100%;border:0;background:transparent;color:#567060;font-size:11px;cursor:pointer}input:focus{outline:2px solid #547b62;outline-offset:2px}a:focus-visible,button:focus-visible{outline:3px solid #a57443;outline-offset:4px}.submit-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin-top:29px;padding:0 18px;border:0;border-radius:8px;background:#244b43;color:white;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}.submit-button:hover{background:#376355;transform:translateY(-1px)}.submit-button:disabled{opacity:.65;cursor:wait}.submit-button span:last-child{font-size:22px;font-weight:400}.signup{border-top:1px solid #edf0e9;margin-top:30px;padding-top:25px;text-align:center;font-size:12px}.signup>span{display:block;color:#868c84;margin-bottom:12px}.signup a{color:#315d4d;font-weight:600;text-decoration:none}.signup a:hover,.header-link:hover{text-decoration:underline}.form-note{text-align:center;font-size:10px;color:#939b90;margin:36px 0 0}.form-note span{margin-right:6px}.feedback{border:1px solid #e5c5b7;background:#fff3ed;color:#8d4031;padding:12px 14px;font-size:13px;line-height:1.6;border-radius:8px;margin-bottom:20px}.site-footer{max-width:1320px;display:flex;justify-content:space-between;margin:auto;padding:0 60px 28px;color:#93998f;font-size:10px}@media(min-width:1600px){.login-layout{margin-top:65px}}@media(max-width:1000px){.login-layout{margin:24px;grid-template-columns:1fr 1fr}.story{padding:40px 30px}.login-panel{padding:48px 30px}.scene-note{left:200px;top:193px}.book-one{left:25px}.book-two{left:152px}.scene-star{left:285px}.site-header{padding:25px 30px}}@media(max-width:700px){.site-header{padding:22px}.brand{font-size:22px}.header-link{font-size:11px;max-width:110px;line-height:1.5;text-align:right}.login-layout{grid-template-columns:1fr;margin:10px 16px 30px;border-radius:18px}.story{padding:30px}.story h1{font-size:38px;margin:18px 0;letter-spacing:-1px}.story h1 br:nth-of-type(2){display:none}.story>p{font-size:13px;margin-bottom:0}.reading-scene,.story-footer{display:none}.login-panel{padding:36px 28px}.form-heading h2{font-size:29px}.site-footer{padding:0 22px 25px;gap:20px;line-height:1.6}.site-footer span:last-child{text-align:right}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Imagem de apresentação do diário de leitura. */
.story{background:#e9dfcf url("assets/mesa-leitura.png") center bottom/cover no-repeat;isolation:isolate;min-height:650px}
.story::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(250,247,238,.94) 0%,rgba(250,247,238,.86) 45%,rgba(250,247,238,.12) 76%,rgba(250,247,238,.18) 100%)}
.story>p{color:#4e5e50}
.story-footer{position:absolute;bottom:24px;left:32px;right:32px;width:fit-content;margin:0;padding:10px 14px;border-radius:8px;background:rgba(250,247,238,.9);color:#4e5e50}
@media(max-width:700px){.story{min-height:370px;background-position:center bottom}.story::before{background:linear-gradient(180deg,rgba(250,247,238,.96),rgba(250,247,238,.87) 48%,rgba(250,247,238,.08) 85%)}.story>p{max-width:350px}.story-footer{display:none}}

/* Espaçamento proporcional à altura disponível no computador. */
@media (min-width:701px){
  body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .site-header{width:100%;margin:0 auto;padding-top:20px;padding-bottom:20px}
  .login-layout{width:calc(100% - 48px);min-height:0;margin:12px auto 20px;flex:1}
  .story{min-height:clamp(480px,calc(100svh - 150px),650px);padding:36px 44px 70px}
  .story h1{font-size:clamp(38px,4vw,52px);margin:22px 0 16px}
  .login-panel{padding:32px 48px}
  .form-heading h2{margin:14px 0 10px;font-size:30px}
  .form-heading p{margin-bottom:24px}
  .field{margin-bottom:18px}
  .submit-button{margin-top:22px}
  .signup{margin-top:24px;padding-top:20px}
  .form-note{margin-top:24px}
  .site-footer{width:100%;margin:0 auto;padding-bottom:16px;flex-shrink:0}
}
@media (min-width:701px) and (max-height:740px){
  .site-header{padding-top:14px;padding-bottom:14px}
  .login-layout{margin-top:8px;margin-bottom:14px}
  .story{min-height:460px;padding-top:28px}
  .story h1{font-size:42px;margin-top:18px}
  .login-panel{padding:24px 36px}
  .form-heading p{margin-bottom:18px}
  .field{margin-bottom:14px}
  input,.submit-button{min-height:46px}
  .submit-button{margin-top:18px}
  .signup{margin-top:18px;padding-top:16px}
  .form-note{margin-top:18px}
}

/* Livro aberto: contorno das páginas e dobra entre apresentação e login. */
.login-layout{
  position:relative;
  overflow:visible;
  border:1px solid #d6cbb8;
  border-radius:12px 28px 28px 12px / 12px 16px 16px 12px;
  box-shadow:0 3px 0 -1px #f5f0e5,0 4px 0 0 #d9cebc,
    0 7px 0 -1px #f5f0e5,0 8px 0 0 #d9cebc,
    0 11px 0 -1px #f5f0e5,0 12px 0 0 #b5a58d,
    0 23px 38px -14px #3f35272e;
}
.story{border-radius:12px 0 0 12px;overflow:hidden}
.login-panel{
  position:relative;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  border-radius:0 28px 28px 0 / 0 16px 16px 0;
  background:linear-gradient(90deg,#ddd4c5 0,#f0eadf 8px,#fbf9f3 24px,#fffefa 56px,#fffefa calc(100% - 15px),#f3eee3 100%);
  box-shadow:inset 1px 0 0 #c9bca8,inset 7px 0 12px -9px #64513c;
}
.login-panel::before{
  content:"";
  position:absolute;
  inset:12px auto 12px -13px;
  width:13px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#68543c1a);
  border-radius:50% 0 0 50%;
}
.site-footer{padding-top:12px}
@media(max-width:700px){
  .login-layout{border-radius:16px;margin-bottom:34px}
  .story{border-radius:16px 16px 0 0}
  .login-panel{border-radius:0 0 16px 16px;background:linear-gradient(180deg,#eee7da,#fffefa 24px);box-shadow:inset 0 1px 0 #d9cebc}
  .login-panel::before{display:none}
}

/* Páginas aparentes também na borda direita do livro. */
.login-layout::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:0;
  right:-10px;
  width:16px;
  z-index:-1;
  pointer-events:none;
  border:1px solid #c8b99f;
  border-radius:0 22px 22px 0;
  background:repeating-linear-gradient(90deg,#faf6ed 0 2px,#d9cebc 2px 3px);
  box-shadow:3px 4px 7px #3f352714;
}
.login-layout{isolation:isolate}
@media(max-width:700px){
  .login-layout::after{right:-6px;width:10px;border-radius:0 16px 16px 0}
}

/* Acabamento de páginas na lateral esquerda. */
.login-layout::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:0;
  left:-10px;
  width:16px;
  z-index:-1;
  pointer-events:none;
  border:1px solid #c8b99f;
  border-radius:22px 0 0 22px;
  background:repeating-linear-gradient(90deg,#faf6ed 0 2px,#d9cebc 2px 3px);
  box-shadow:-3px 4px 7px #3f352714;
}
@media(max-width:700px){
  .login-layout::before{left:-6px;width:10px;border-radius:16px 0 0 16px}
}

/* Botão em tom de madeira, acompanhando a imagem e o papel. */
.submit-button{background:#79543b;color:#fffaf2;box-shadow:0 3px 8px #66452f18}
.submit-button:hover{background:#65432e}
.submit-button:active{background:#563824;transform:translateY(0)}

/* Marca no mesmo tom de madeira do botão de entrada. */
.brand{color:#79543b}
.brand-icon{background:#79543b;color:#fffaf2}
.brand small{color:#887664}

/* Logo original com tratamento de cor da paleta, preservando o arquivo. */
.brand-lockup{display:flex;flex-direction:column;align-items:center}
.brand-image{display:block;width:240px;height:auto;filter:sepia(1) saturate(.65) hue-rotate(348deg) brightness(1.25)}
.brand .brand-lockup small{margin-top:-8px;font-size:8px;letter-spacing:2px}
@media(max-width:700px){.brand-image{width:190px}.brand .brand-lockup small{font-size:7px;margin-top:-6px}}
@media(min-width:701px) and (max-height:740px){.brand-image{width:210px}}

/* Mantém o cabeçalho compacto mesmo com a proporção do logo enviado. */
.brand-image{width:240px;height:48px;object-fit:cover;object-position:center}
.brand .brand-lockup small{margin-top:3px}
@media(min-width:701px){
  .site-header{padding-top:12px;padding-bottom:12px;flex-shrink:0}
  .login-layout{flex:0 0 auto;margin-top:8px;margin-bottom:22px}
  .story{min-height:clamp(460px,calc(100svh - 150px),650px)}
}
@media(min-width:701px) and (max-height:740px){
  .brand-image{width:210px;height:42px}
  .site-header{padding-top:10px;padding-bottom:10px}
}
@media(max-width:700px){.brand-image{width:190px;height:38px}.brand .brand-lockup small{margin-top:3px}}