/* ==========================================================================
   Landing page IDSA
   Layout: Figma "ELDORADO" › frame LP — 1920px com container de 1276px.
   Esta folha cobre as SEÇÕES da LP, mas o app.css do tema (handle `main-css`,
   que inclui o Bootstrap) TAMBÉM é carregado nesta página — o header, o rodapé e
   o formulário do Contact Form 7 dependem dele. Dizia-se aqui que a LP era
   autocontida e não carregava o app.css; era falso, e custou um layout quebrado
   em 15/08/2026 (o `.col-md-6` do Bootstrap valendo 50% dentro de um grid
   próprio deixou cada campo com 25% da caixa). Antes de reimplementar algo que o
   Bootstrap já faz, confira se ele não está resolvendo sozinho.
   ========================================================================== */

:root {
    --lp-text:       #707070;
    --lp-orange:     #F18B21;
    --lp-dark:       #717271;
    --lp-gray:       #E9E9E9;
    --lp-light:      #F5F5F5;
    --lp-link:       #2C78DE;
    --lp-white:      #FFFFFF;
    --lp-circle:     #D9D9D9;

    --lp-container:  1276px;
    --lp-gutter:     24px;
    /* Altura do header padrão do site (header.main-header, no app.css). */
    --lp-header-h:   100px;

    --lp-font:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* Compensa o header fixo ao pular para uma âncora. Sem JS o navegador ainda
   posiciona a seção corretamente (salto direto, sem animação).
   O scroll suave fica por conta do JS, que tem fallback — `scroll-behavior:
   smooth` aqui quebraria a âncora em navegadores onde a animação nativa não
   roda. */
.lp-main [id] { scroll-margin-top: calc(var(--lp-header-h) + 8px); }

body.lp-idsa {
    margin: 0;
    background: var(--lp-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A tipografia fica no conteúdo da LP, não no body: o header e o rodapé são os
   padrão do site e continuam governados pelo app.css do tema.
   (.lp-footer é o rodapé do protótipo, hoje fora de uso — ver adiante.) */
.lp-main,
.lp-footer {
    font-family: var(--lp-font);
    font-size: 18px;
    line-height: 1.72;
    color: var(--lp-text);
}

/* Espaço do header fixo do site (100px). */
.lp-main { padding-top: var(--lp-header-h); }

/* Reset da LP.
   O escopo vai dentro de :where() (especificidade zero) e o nome do elemento
   fora dele: cada regra vale (0,0,1) — o mesmo peso das regras de elemento do
   app.css/Bootstrap, que carrega antes e portanto perde no empate — e segue
   abaixo de qualquer classe de componente definida adiante. */
:where(.lp-main, .lp-footer) *,
:where(.lp-main, .lp-footer) *::before,
:where(.lp-main, .lp-footer) *::after { box-sizing: border-box; font-family: inherit; }

:where(.lp-main, .lp-footer) img,
:where(.lp-main, .lp-footer) svg { max-width: 100%; }

:where(.lp-main, .lp-footer) img { height: auto; border: 0; }

:where(.lp-main, .lp-footer) a { color: inherit; text-decoration: none; }

:where(.lp-main, .lp-footer) h1,
:where(.lp-main, .lp-footer) h2,
:where(.lp-main, .lp-footer) h3,
:where(.lp-main, .lp-footer) p,
:where(.lp-main, .lp-footer) ul,
:where(.lp-main, .lp-footer) figure,
:where(.lp-main, .lp-footer) blockquote { margin: 0; padding: 0; }

:where(.lp-main, .lp-footer) ul { list-style: none; }

/* O app.css dimensiona e colore os <p> do site inteiro; aqui eles voltam a
   herdar a tipografia da LP. */
:where(.lp-main, .lp-footer) p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.lp-idsa :focus-visible {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
}

.lp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--lp-white);
    color: var(--lp-text);
}
.lp-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Container — 1276px no desktop, fluido com gutter nas telas menores
   -------------------------------------------------------------------------- */

.lp-container {
    width: 100%;
    max-width: calc(var(--lp-container) + var(--lp-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--lp-gutter);
}

/* --------------------------------------------------------------------------
   Tipografia e elementos compartilhados
   -------------------------------------------------------------------------- */

.lp-title {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--lp-text);
}

.lp-title--invert { color: var(--lp-white); }

/* Filete laranja de 120x5 abaixo dos títulos */
.lp-rule {
    display: block;
    width: 120px;
    height: 5px;
    margin-top: 14px;
    background: var(--lp-orange);
}

.lp-section { padding: 72px 0; }

.lp-section--gray  { background: var(--lp-gray); }
.lp-section--light { background: var(--lp-light); }
.lp-section--dark  { background: var(--lp-dark); color: var(--lp-white); }

.lp-section__head--center { text-align: center; }
.lp-section__head--center .lp-rule { margin-left: auto; margin-right: auto; }

.lp-section__description {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.45;
}

.lp-section__description--wide {
    max-width: 1066px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.72;
}

.lp-prose p { margin-bottom: 31px; }
.lp-prose p:last-child { margin-bottom: 0; }
.lp-prose strong { font-weight: 700; }

/* Botões */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 232px;
    min-height: 49px;
    padding: 10px 28px;
    border: 1px solid var(--lp-text);
    background: var(--lp-white);
    color: var(--lp-text);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.lp-btn:hover,
.lp-btn:focus {
    background: var(--lp-orange);
    border-color: var(--lp-orange);
    color: var(--lp-white);
}

.lp-btn--wide { min-width: 642px; }
.lp-btn--sm   { min-width: 164px; }

/* Placeholder de mídia (imagem ainda não definida) */
.lp-media-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 564 / 400;
    border: 1px solid var(--lp-text);
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--lp-text) 50%, transparent calc(50% + 1px)),
        linear-gradient(to bottom right, transparent calc(50% - 1px), var(--lp-text) 50%, transparent calc(50% + 1px)),
        var(--lp-white);
}

/* --------------------------------------------------------------------------
   Header / menu do Figma — FORA DE USO

   A LP usa o header padrão do site (header.php). O menu abaixo é do protótipo
   ainda não aprovado pelo cliente e fica aqui, sem markup que o use, para o
   caso de a aprovação vir depois (o markup está em header-lp-idsa.php).
   -------------------------------------------------------------------------- */

.lp-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--lp-header-h);
    background: var(--lp-white);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 24px;
}

.lp-header__logo img {
    display: block;
    width: 185px;
    height: auto;
}

.lp-nav__list {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lp-nav__link {
    display: block;
    padding: 4px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--lp-text);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.lp-nav__link:hover,
.lp-nav__link:focus {
    color: var(--lp-orange);
    border-bottom-color: var(--lp-orange);
}

/* Botão hambúrguer — só aparece abaixo de 1200px */
.lp-header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: none;
    cursor: pointer;
}

.lp-header__toggle span {
    display: block;
    height: 2px;
    background: var(--lp-text);
    transition: transform .25s ease, opacity .25s ease;
}
.lp-header__toggle span + span { margin-top: 5px; }

.lp-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lp-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.lp-hero {
    position: relative;
    /* padding (e não margin no card) para o fundo não ser empurrado
       pelo colapso de margens */
    padding-top: 168px;
}

.lp-hero__bg {
    position: absolute;
    inset: 0 0 auto;
    height: 439px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #041028;
}

.lp-hero .lp-container { position: relative; }

.lp-hero__card {
    display: grid;
    grid-template-columns: 443px 1fr;
    padding: 49px 27px 73px 39px;
    background: var(--lp-white);
}

.lp-hero__logo {
    display: block;
    width: 350px;
    height: auto;
}

.lp-hero__body .lp-prose { margin-top: 21px; }
.lp-hero__body .lp-btn   { margin-top: 27px; }

/* --------------------------------------------------------------------------
   Vídeo (16:9)
   -------------------------------------------------------------------------- */

.lp-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--lp-white);
    overflow: hidden;
}

.lp-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Depoimento
   -------------------------------------------------------------------------- */

.lp-depoimento { padding: 72px 0 125px; }

.lp-depoimento__video {
    max-width: 912px;
    margin: 50px auto 0;
}

.lp-quote {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 957px;
    margin: 100px auto 0;
}

.lp-quote__photo {
    flex: 0 0 209px;
    width: 209px;
    height: 209px;
    border-radius: 50%;
    object-fit: cover;
}

.lp-quote__text { font-size: 18px; line-height: 1.72; }

.lp-quote__author {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Demonstrador (faixa escura)
   -------------------------------------------------------------------------- */

.lp-demo { padding: 100px 0; }

.lp-demo__inner {
    display: grid;
    grid-template-columns: 737px minmax(0, 1fr);
    gap: 50px;
    align-items: center;
}

/* 460px (e não os 436px do Figma) para o título quebrar nas mesmas 3 linhas
   do design — no limite exato de 436px o texto vai para 4 linhas. */
.lp-demo__body { max-width: 460px; }

.lp-demo__description {
    margin-top: 21px;
    font-size: 18px;
    line-height: 1.72;
    color: var(--lp-white);
}

.lp-demo__body .lp-btn { margin-top: 27px; }

/* Sem vídeo o texto ocupa a faixa inteira em vez de ficar espremido na coluna
   estreita da direita. */
.lp-demo--no-video .lp-demo__inner { grid-template-columns: minmax(0, 1fr); }
.lp-demo--no-video .lp-demo__body  { max-width: 760px; }

/* --------------------------------------------------------------------------
   Galeria de Matérias
   -------------------------------------------------------------------------- */

.lp-galeria { padding: 50px 0; }

.lp-galeria__inner {
    display: grid;
    grid-template-columns: minmax(0, 527px) 749px;
    align-items: center;
}

.lp-galeria__inner > .lp-section__head { padding-left: 44px; }

.lp-galeria__inner .lp-section__description { max-width: 389px; }

.lp-galeria__panel {
    min-height: 548px;
    display: flex;
    align-items: center;
    padding: 60px 107px 60px 111px;
    background: var(--lp-light);
}

.lp-galeria__list { width: 100%; }

.lp-galeria__item + .lp-galeria__item { margin-top: 28px; }

.lp-galeria__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.lp-galeria__label {
    font-size: 22px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-galeria__arrow {
    flex: 0 0 44px;
    width: 44px;
    height: auto;
    color: var(--lp-dark);
    transition: transform .2s ease;
}

.lp-galeria__link:hover .lp-galeria__label,
.lp-galeria__link:focus .lp-galeria__label { color: var(--lp-orange); }

.lp-galeria__link:hover .lp-galeria__arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Fotos
   -------------------------------------------------------------------------- */

.lp-fotos { padding: 72px 0 70px; }

.lp-fotos__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 47px;
}

.lp-fotos__item { aspect-ratio: 1 / 1; }

/* O gatilho da lightbox é um <button>: precisa perder o visual nativo. */
.lp-fotos__button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}

.lp-fotos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.lp-fotos__button:hover img,
.lp-fotos__button:focus-visible img { transform: scale(1.06); }

.lp-fotos__cta {
    margin-top: 50px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Documentações
   -------------------------------------------------------------------------- */

.lp-docs { padding: 72px 0 70px; }

.lp-docs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
    margin-top: 47px;
}

.lp-docs__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 326px;
    padding: 40px 30px;
    background: var(--lp-light);
}

.lp-docs__icon {
    width: 80px;
    height: auto;
    color: var(--lp-dark);
}

.lp-docs__title {
    margin-top: 31px;
    font-size: 22px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-docs__title:hover,
.lp-docs__title:focus { color: var(--lp-orange); }

/* "PDF · 1,2 MB" — o visitante sabe o que vai baixar antes de clicar. */
.lp-docs__meta {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lp-dark);
}

.lp-docs__card .lp-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Contato
   -------------------------------------------------------------------------- */

/* 15/08/2026: a coluna de texto (chamada + e-mail) saiu a pedido do cliente. O
   título com a régua laranja passou para cima e o formulário ocupa a largura do
   container — por isso os campos agora cabem em duas colunas. */
.lp-contato { padding: 70px 0; }

.lp-contato__head { margin-bottom: 32px; }

.lp-contato__form {
    padding: 51px 60px 50px;
    background: var(--lp-dark);
    color: var(--lp-white);
}

.lp-contato__missing {
    padding: 16px;
    background: rgba(0, 0, 0, .15);
    font-size: 16px;
}

/* Campos (formulário do Contact Form 7)

   É o MESMO formulário da página /contato/, e o Bootstrap do tema (app.css) já
   está carregado aqui: `.row` é flex e `.col-md-6` vale 50%. Com o box ocupando a
   largura do container, a maneira de ter as duas colunas do /contato/ é NÃO
   interferir no grid — nada de sobrescrever .row/.col-*.

   Histórico, para não se repetir: até 15/08/2026 havia um override
   `[class*="col-"] { flex: 0 0 100% }` porque o box era estreito (741px, ao lado
   do texto). Ao tirar o texto, a primeira tentativa trocou aquilo por um grid
   próprio de duas colunas — e ficou pior: o `.col-md-6` continuou valendo 50%
   DENTRO de cada célula, então cada campo virou 25% da caixa. Aqui embaixo mora
   só o visual da LP (fundo escuro, rótulos brancos, campos altos); a montagem em
   colunas é do Bootstrap, igual à página oficial.

   O que o CF7 entrega no primeiro .row:
     .col-md-6  Nome completo          .col-md-6  Assunto
     .col-md-6  E-mail/Telefone/Empresa (empilhados)
     .col-md-6  Mensagem (textarea)
   e, no .row.pt-3, uma coluna vazia + o botão alinhado à direita. */

/* Espaço entre as linhas de campo, no lugar do 1rem padrão do Bootstrap — os
   campos da LP são mais altos (50px) e os rótulos maiores (18px). */
.lp-contato__form .form-group { margin-bottom: 22px; }

.lp-contato__form .row.pt-3 { margin-top: 4px; }

.lp-contato__form label,
.lp-contato__form .lp-label {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lp-white);
}

.lp-contato__form .lp-field + .lp-field { margin-top: 11px; }

.lp-contato__form input[type="text"],
.lp-contato__form input[type="email"],
.lp-contato__form input[type="tel"],
.lp-contato__form select,
.lp-contato__form textarea {
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid var(--lp-text);
    border-radius: 0;
    background: var(--lp-white);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--lp-text);
}

.lp-contato__form textarea {
    height: 208px;
    resize: vertical;
}

/* Campo "Assunto": a seta é desenhada pelo wrapper, como na página /contato/. */
.lp-contato__form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
}

.lp-contato__form .select-wrapper { position: relative; }

.lp-contato__form .select-wrapper::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: var(--lp-orange);
    pointer-events: none;
}

.lp-contato__form input[type="submit"],
.lp-contato__form .wpcf7-submit {
    margin-top: 10px;
    min-width: 232px;
    min-height: 49px;
    padding: 10px 28px;
    border: 1px solid var(--lp-text);
    border-radius: 0;
    background: var(--lp-white);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lp-text);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.lp-contato__form input[type="submit"]:hover,
.lp-contato__form .wpcf7-submit:hover {
    background: var(--lp-orange);
    border-color: var(--lp-orange);
    color: var(--lp-white);
}

/* Mensagens do Contact Form 7 */
.lp-contato__form .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 14px;
    color: #FFD5D5;
}

.lp-contato__form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px solid currentColor;
    font-size: 15px;
}

.lp-contato__form .wpcf7-spinner { background-color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   Bloco IDSA
   -------------------------------------------------------------------------- */

.lp-sobre { padding: 70px 0; }

.lp-sobre__inner {
    display: grid;
    grid-template-columns: 564px minmax(0, 1fr);
    gap: 78px;
    align-items: center;
}

.lp-sobre__media img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.lp-sobre__body { max-width: 642px; }
.lp-sobre__body .lp-prose { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Rodapé do Figma — FORA DE USO

   A LP usa o rodapé padrão do site (footer.php). O rodapé abaixo é do protótipo
   ainda não aprovado pelo cliente e fica aqui, sem markup que o use, para o
   caso de a aprovação vir depois (o markup está em footer-lp-idsa.php).
   -------------------------------------------------------------------------- */

.lp-footer {
    padding: 60px 0 93px;
    background: var(--lp-light);
}

.lp-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 20px 0 40px;
}

.lp-footer__logo img {
    display: block;
    width: 185px;
    height: auto;
}

.lp-footer__social {
    display: flex;
    gap: 8px;
}

.lp-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lp-circle);
    color: var(--lp-text);
    transition: background-color .2s ease, color .2s ease;
}

.lp-footer__social a:hover,
.lp-footer__social a:focus {
    background: var(--lp-orange);
    color: var(--lp-white);
}

.lp-footer__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 71px;
    padding: 0 20px 0 40px;
}

.lp-footer__column-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.53;
    color: var(--lp-text);
}

.lp-footer__links { margin-top: 12px; }

.lp-footer__links a {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.53;
    color: var(--lp-text);
}

.lp-footer__links a:hover,
.lp-footer__links a:focus { color: var(--lp-orange); }

.lp-footer__bottom {
    margin-top: 41px;
    padding-top: 19px;
    border-top: 1px solid var(--lp-text);
    text-align: center;
}

.lp-footer__copyright,
.lp-footer__credits {
    font-size: 15px;
    line-height: 1.53;
    color: var(--lp-text);
}

.lp-footer__credits strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Lightbox das fotos

   Escrita à mão em vez de reaproveitar o magnific-popup do tema: ele depende
   de jQuery e do app.js, que a LP não carrega. O markup é criado pelo JS, então
   nada disso existe no HTML enquanto o visitante não clicar numa foto.
   -------------------------------------------------------------------------- */

.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 80px;
    background: rgba(0, 0, 0, .88);
    opacity: 0;
    transition: opacity .2s ease;
}

.lp-lightbox.is-open { opacity: 1; }

/* Trava o scroll do fundo enquanto a lightbox está aberta. */
body.lp-lightbox-open { overflow: hidden; }

.lp-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
}

.lp-lightbox__image {
    display: block;
    max-width: 100%;
    /* Desconta o padding do overlay e a linha do contador. */
    max-height: calc(100vh - 190px);
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, .06);
}

.lp-lightbox__counter {
    font-size: 15px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
}

.lp-lightbox__button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--lp-white);
    cursor: pointer;
    transition: background-color .2s ease;
}

.lp-lightbox__button:hover,
.lp-lightbox__button:focus-visible { background: var(--lp-orange); }

.lp-lightbox__button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-lightbox__close { top: 18px; right: 18px; }
.lp-lightbox__prev  { top: 50%; left: 18px;  transform: translateY(-50%); }
.lp-lightbox__next  { top: 50%; right: 18px; transform: translateY(-50%); }

/* Com uma foto só não há para onde navegar. */
.lp-lightbox--single .lp-lightbox__prev,
.lp-lightbox--single .lp-lightbox__next,
.lp-lightbox--single .lp-lightbox__counter { display: none; }

@media (prefers-reduced-motion: reduce) {
    .lp-lightbox { transition: none; }
}

@media (max-width: 767px) {

    .lp-lightbox { padding: 64px 12px; }

    .lp-lightbox__image { max-height: calc(100vh - 200px); }

    .lp-lightbox__button { width: 44px; height: 44px; }

    /* No mobile as setas vão para baixo da foto, longe do gesto de swipe. */
    .lp-lightbox__prev { top: auto; bottom: 12px; left: calc(50% - 60px); transform: none; }
    .lp-lightbox__next { top: auto; bottom: 12px; right: calc(50% - 60px); transform: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* Abaixo de 1400px o container passa a ser fluido — as colunas fixas viram
   proporcionais para o layout não estourar. */
@media (max-width: 1399px) {

    .lp-hero__card { grid-template-columns: 35% 1fr; }

    .lp-demo__inner    { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .lp-galeria__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .lp-sobre__inner   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; }

    .lp-galeria__panel { padding: 50px 60px; }
    .lp-contato__form  { padding: 45px 55px; }

    .lp-btn--wide { min-width: 0; width: 100%; max-width: 642px; }
}

/* Menu vira hambúrguer */
@media (max-width: 1199px) {

    .lp-header__toggle { display: block; }

    .lp-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 8px 0 16px;
        background: var(--lp-white);
        box-shadow: 0 8px 12px rgba(0, 0, 0, .1);
    }

    .lp-nav.is-open { display: block; }

    .lp-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 var(--lp-gutter);
    }

    .lp-nav__link {
        padding: 12px 0;
        border-bottom: 1px solid var(--lp-gray);
    }

    .lp-nav__item:last-child .lp-nav__link { border-bottom: 0; }

    .lp-fotos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-docs__grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Layouts de duas colunas empilham */
@media (max-width: 991px) {

    :root { --lp-header-h: 76px; }

    .lp-title { font-size: 30px; }

    .lp-section  { padding: 56px 0; }
    .lp-demo,
    .lp-contato,
    .lp-sobre,
    .lp-fotos,
    .lp-docs     { padding: 56px 0; }
    .lp-depoimento { padding: 56px 0 70px; }
    .lp-galeria  { padding: 40px 0; }

    .lp-hero       { padding-top: 120px; }
    .lp-hero__bg   { height: 300px; }
    .lp-hero__card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 28px 48px;
    }
    .lp-hero__logo { width: 280px; }

    .lp-demo__inner,
    .lp-galeria__inner,
    .lp-sobre__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .lp-demo__body,
    .lp-sobre__body { max-width: none; }

    .lp-galeria__inner > .lp-section__head { padding-left: 0; }

    .lp-galeria__inner .lp-section__description { max-width: none; }

    .lp-galeria__panel { min-height: 0; padding: 40px 28px; }
    .lp-contato__form  { padding: 32px 28px; }

    /* Abaixo de 768px o próprio Bootstrap desliga o .col-md-* e os campos
       empilham sozinhos — igual ao /contato/. Aqui só o respiro entre eles. */
    .lp-contato__form .form-group { margin-bottom: 18px; }

    .lp-contato__head { margin-bottom: 24px; }

    .lp-sobre__media img { height: auto; aspect-ratio: 564 / 400; }

    .lp-quote {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 56px;
        text-align: center;
    }

    .lp-depoimento__video { margin-top: 40px; }

    .lp-footer__top,
    .lp-footer__columns { padding-left: 0; padding-right: 0; }

    .lp-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 48px;
        gap: 32px 24px;
    }
}

@media (max-width: 767px) {

    body.lp-idsa { font-size: 16px; }

    .lp-title { font-size: 26px; }

    .lp-section__description,
    .lp-prose,
    .lp-quote__text,
    .lp-quote__author,
    .lp-demo__description { font-size: 16px; }

    .lp-prose p { margin-bottom: 22px; }

    .lp-btn {
        min-width: 0;
        width: 100%;
        font-size: 16px;
    }

    .lp-fotos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-docs__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .lp-docs__card  { min-height: 0; padding: 28px 20px; }
    .lp-docs__icon  { width: 60px; }
    .lp-docs__title { font-size: 18px; margin-top: 20px; margin-bottom: 24px; }

    .lp-galeria__label { font-size: 18px; }
    .lp-galeria__link  { gap: 20px; }
    .lp-galeria__arrow { flex-basis: 32px; width: 32px; }

    .lp-quote__photo { flex-basis: 160px; width: 160px; height: 160px; }

    .lp-video__play { width: 56px; height: 72px; }

    .lp-footer { padding: 40px 0 56px; }
}

@media (max-width: 479px) {

    :root { --lp-gutter: 16px; }

    .lp-title { font-size: 22px; }

    .lp-hero__card { padding: 28px 20px 36px; }
    .lp-hero__logo { width: 100%; max-width: 260px; }

    .lp-fotos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .lp-docs__grid  { grid-template-columns: minmax(0, 1fr); }

    .lp-footer__columns { grid-template-columns: minmax(0, 1fr); }

    .lp-footer__top { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .lp-idsa * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}