/* =========================================================
   MINI MODAL DE DOCUMENTOS LEGAIS
   Usado pelo link "Politica de Privacidade" do footer.
   Feito sobre <dialog> + showModal(): o backdrop, o fechar
   no Esc e a retencao do foco vem do proprio elemento, sem
   precisar de scrim nem de armadilha de foco em JS.
   ========================================================= */

.legal-modal{
    width:min(720px,calc(100vw - 32px));
    max-height:min(82vh,860px);
    padding:0;
    border:1px solid var(--line);
    border-radius:24px;
    background:var(--white);
    color:var(--ink);
    box-shadow:0 40px 90px rgba(23,8,47,.35);
    overflow:hidden;
}

.legal-modal::backdrop{
    background:rgba(20,10,46,.62);
    backdrop-filter:blur(4px);
}

/* O <dialog> nasce com display:none; a animacao so pode partir
   do estado ja aberto, dai o seletor com [open]. */
.legal-modal[open]{
    display:flex;
    flex-direction:column;
    /* O posicionamento e redundante para showModal(), que ja centraliza
       o dialogo na top layer - ele existe para o fallback sem suporte
       nativo, onde o <dialog> aberto seguiria a UA no fluxo da pagina. */
    position:fixed;
    z-index:9999;
    inset:0;
    margin:auto;
    animation:legalModalIn .28s cubic-bezier(.22,.8,.2,1) both;
}

.legal-modal[open]::backdrop{
    animation:legalModalBackdropIn .28s ease-out both;
}

@keyframes legalModalIn{
    from{opacity:0;transform:translateY(14px) scale(.98)}
}

@keyframes legalModalBackdropIn{
    from{opacity:0}
}

/* =====================
   CABECALHO
   ===================== */

.legal-modal__header{
    position:relative;
    flex:0 0 auto;
    padding:26px 62px 20px 30px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg,#f8f6fd,#fff);
}

.legal-modal__title{
    margin:0;
    font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;
    font-size:22px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.02em;
    color:var(--purple-dark);
}

.legal-modal__meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
}

.legal-modal__close{
    position:absolute;
    top:22px;
    right:22px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--white);
    color:var(--purple-dark);
    font-size:17px;
    line-height:1;
    cursor:pointer;
    transition:.2s;
}

.legal-modal__close:hover{
    border-color:var(--purple);
    background:var(--purple);
    color:var(--white);
}

/* =====================
   CORPO ROLAVEL
   ===================== */

/* A rolagem fica no corpo, e nao no <dialog>: assim o titulo e o
   botao de fechar continuam visiveis durante a leitura. */
.legal-modal__body{
    flex:1 1 auto;
    padding:24px 30px 30px;
    overflow-y:auto;
    overscroll-behavior:contain;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}

.legal-modal__body h3{
    margin:26px 0 8px;
    font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;
    font-size:16px;
    font-weight:700;
    color:var(--purple-dark);
}

.legal-modal__body h3:first-child{margin-top:0}

/* Subitens numerados (1.1, 2.2...): um degrau abaixo do h3, sem virar
   outro bloco de destaque. */
.legal-modal__body h4{
    margin:18px 0 6px;
    font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--ink);
}

.legal-modal__body p{margin:0 0 12px}

.legal-modal__body ul{
    margin:0 0 12px;
    padding:0;
    list-style:none;
}

.legal-modal__body li{
    position:relative;
    padding-left:18px;
    margin-bottom:6px;
}

.legal-modal__body li::before{
    content:"";
    position:absolute;
    top:.7em;
    left:2px;
    width:6px;
    height:2px;
    border-radius:2px;
    background:var(--lilac);
}

.legal-modal__body a{
    color:var(--purple);
    text-decoration:underline;
}

/* O gatilho "clicando aqui" e um <button> para nao navegar, mas precisa
   se comportar como um trecho de texto dentro do paragrafo - dai o
   display inline e o font:inherit zerando o visual proprio do botao. */
.legal-modal__link{
    display:inline;
    padding:0;
    border:0;
    background:none;
    color:var(--purple);
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
}

.legal-modal__link:hover{color:var(--purple-dark)}

/* Ficha do documento que fecha os termos: rotulo a esquerda, valor a
   direita, em linhas alternadas. Abaixo de 560px a grade vira uma
   coluna so, com o valor sob o rotulo. */
.legal-modal__sheet{
    display:grid;
    grid-template-columns:minmax(0,180px) 1fr;
    gap:0;
    margin:26px 0 0;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    font-size:14px;
}

.legal-modal__sheet dt,
.legal-modal__sheet dd{
    margin:0;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
}

.legal-modal__sheet dt{
    background:var(--soft);
    color:var(--purple-dark);
    font-weight:700;
}

.legal-modal__sheet dd{color:var(--muted)}

.legal-modal__sheet dt:nth-last-of-type(1),
.legal-modal__sheet dd:nth-last-of-type(1){border-bottom:0}

@media(max-width:560px){
    .legal-modal__sheet{grid-template-columns:1fr}

    .legal-modal__sheet dt{
        border-bottom:0;
        padding-bottom:2px;
        background:none;
    }

    .legal-modal__sheet dd{padding-top:2px}
}

.legal-modal__note{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:14px;
    font-style:italic;
}

/* Trilho da barra de rolagem discreto, no tom da secao. */
.legal-modal__body{scrollbar-width:thin;scrollbar-color:#d7cfe9 transparent}
.legal-modal__body::-webkit-scrollbar{width:8px}
.legal-modal__body::-webkit-scrollbar-thumb{
    border:2px solid transparent;
    border-radius:8px;
    background:#d7cfe9;
    background-clip:content-box;
}

/* Trava a rolagem da pagina atras do modal aberto. */
body.legal-modal-open{overflow:hidden}

@media(max-width:700px){
    .legal-modal{
        width:calc(100vw - 20px);
        max-height:88vh;
        border-radius:18px;
    }

    .legal-modal__header{padding:20px 56px 16px 20px}
    .legal-modal__title{font-size:18px}
    .legal-modal__close{top:16px;right:16px}
    .legal-modal__body{padding:18px 20px 24px;font-size:14px}
}

@media(prefers-reduced-motion:reduce){
    .legal-modal[open],
    .legal-modal[open]::backdrop{animation:none}
}