/* Tela de cookies + livro de visitas (ver consentimento.js). Aparece dentro da intro, sobre o fundo branco, com a bola azul pequena no topo. */
.cs:focus { outline: none; }
.cs { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 320ms ease; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #12384A; }
.cs.cs-entrou { opacity: 1; }
.cs.cs-saindo { opacity: 0; transition-duration: 220ms; pointer-events: none; }
.cs-rolagem { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(98px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.cs-coluna { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cs-bloco { background: #F4FAFD; border: 1px solid #D4ECF7; border-radius: 20px; padding: 18px 18px 16px; opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms cubic-bezier(.25,1,.5,1); transition-delay: calc(var(--d, 0) * 120ms + 120ms); }
.cs-entrou .cs-bloco { opacity: 1; transform: none; }
.cs-tit { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0B5F80; }
.cs-frase { margin: 0 0 14px; font-size: 17px; line-height: 1.45; font-weight: 500; }
.cs-livro .cs-frase { font-size: 16px; font-weight: 400; }
.cs-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-btn { appearance: none; font: inherit; font-weight: 600; font-size: 16px; padding: 13px 14px; border-radius: 999px; border: 2px solid #3FB8E6; cursor: pointer; transition: transform 120ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; min-height: 48px; }
.cs-btn:active { transform: scale(.97); }
.cs-btn:disabled { opacity: .6; cursor: default; }
.cs-cheio { background: #3FB8E6; color: #06303F; }
.cs-vazio { background: #FFFFFF; color: #0B5F80; }
.cs-btn[aria-pressed="true"] { background: #0B5F80; border-color: #0B5F80; color: #FFFFFF; box-shadow: 0 6px 16px rgba(11,95,128,.28); }
.cs-btn:focus-visible, .cs-anonimo:focus-visible, .cs-campo input:focus-visible, .cs-campo select:focus-visible, .cs-campo textarea:focus-visible { outline: 3px solid rgba(63,184,230,.55); outline-offset: 2px; }
.cs-mini, .cs-aceite { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #4A6573; }
.cs-mini a, .cs-aceite a { color: #0B5F80; font-weight: 500; }
.cs-ok { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: #0B5F80; }
.cs-pisca { animation: cs-pisca 900ms ease; }
@keyframes cs-pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,184,230,0); } 25%, 75% { box-shadow: 0 0 0 5px rgba(63,184,230,.55); } 50% { transform: translateX(0) scale(1.01); } }
.cs-form { display: flex; flex-direction: column; gap: 12px; }
.cs-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; color: #28566B; }
.cs-campo em { font-style: normal; font-weight: 400; color: #6B8493; }
.cs-campo input, .cs-campo select, .cs-campo textarea { font: inherit; font-size: 16px; font-weight: 400; color: #12384A; background: #FFFFFF; border: 1.5px solid #C5E3F1; border-radius: 12px; padding: 11px 12px; width: 100%; box-sizing: border-box; }
.cs-campo textarea { resize: vertical; min-height: 64px; }
.cs-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-erro { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF1EE; border: 1px solid #F3C3B8; color: #8A2A12; font-size: 14px; line-height: 1.4; }
.cs-enviar { width: 100%; margin-top: 2px; }
.cs-obrigado { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: #0B5F80; text-align: center; }
.cs-anonimo { display: block; margin: 14px auto 0; background: none; border: 0; font: inherit; font-size: 15px; color: #28566B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 12px; min-height: 44px; }
.cs-anonimo:hover { color: #0B5F80; }
.cs [hidden] { display: none !important; }
@media (min-width: 700px) { .cs-rolagem { padding-top: 110px; } .cs-coluna { max-width: 500px; } }
@media (max-height: 520px) and (orientation: landscape) { .cs-rolagem { padding-top: 84px; } }
@media (prefers-reduced-motion: reduce) { .cs, .cs-bloco { transition: opacity 120ms linear; transform: none; } .cs-pisca { animation: none; outline: 3px solid rgba(63,184,230,.6); } }