/* Base visual e medidas preservadas da página publicada. */
:root { --color-dark: #1d1e20; }
*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }
* { color: inherit; }
html { height: 100%; scroll-behavior: smooth; }
body { height: 100%; margin: 0; font-family: Arial, sans-serif; color: #1d1e20; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.site-header { position: sticky; top: 0; z-index: 18; height: 0; background: #fff; }
main { display: flex; flex-direction: column; min-height: 100vh; }
.section { position: relative; display: grid; grid-template: 100% / 100%; width: 100%; }
.backdrop { position: absolute; inset: 0; z-index: 13; overflow: hidden; background: var(--background, #fff); backface-visibility: hidden; }
.backdrop img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 101%; object-fit: cover; object-position: center; }
.backdrop::after { position: absolute; inset: 0; content: ""; background: #1d1e20; opacity: var(--overlay, 0); }
.composition { z-index: 14; display: grid; grid-template-rows: var(--rows); grid-template-columns: var(--columns); width: 100%; max-width: 1224px; min-height: var(--height); margin: 0 auto; }
.item { position: relative; z-index: var(--layer); display: grid; grid-template-columns: 100%; grid-row: var(--row); grid-column: var(--column); width: 100%; height: 100%; text-align: var(--text); }
.item > * { grid-area: 1 / 1 / -1 / -1; align-self: start; }
.copy { width: 100%; overflow-wrap: break-word; white-space: break-spaces; }
.copy :is(h1,h2,h3,h4,h5,h6,.body,.body-large,.body-small) { font-family: Montserrat, sans-serif; font-style: normal; font-weight: var(--weight, 800); font-size: var(--font-desktop, var(--size)); line-height: var(--line-desktop, var(--leading, 1.2)); letter-spacing: 0; text-transform: none; text-decoration: none; margin-bottom: var(--paragraph-gap, 32px); }
.copy h1 { --size: 56px; --weight: 900; --paragraph-gap: 48px; }
.copy h2 { --size: 48px; }
.copy h3 { --size: 40px; }
.copy h4 { --size: 32px; }
.copy h5 { --size: 24px; --paragraph-gap: 16px; }
.copy h6 { --size: 20px; --paragraph-gap: 8px; }
.copy .body { --size: 16px; --weight: 500; --leading: 1.5em; }
.copy .body-large { --size: 18px; --weight: 500; --leading: 1.5em; }
.copy .body-small { --size: 14px; --weight: 500; --leading: 1.5em; --paragraph-gap: 24px; }
.copy :is(h1,h2,h3,h4,h5,h6,.body,.body-large,.body-small):last-child { margin-bottom: 0; }
.copy span { font-size: var(--font-desktop); }
.copy p:empty::after { content: "\00a0"; }
.panel { display: flex; width: 100%; height: var(--panel-height, 100%); color: var(--panel-color); }
.panel svg { width: 100%; height: 100%; fill: currentColor; }
.media { width: 100%; height: 100%; max-height: calc(var(--image-height) + .5px); }
.media picture { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius, 0); }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cta { display: flex; align-items: center; justify-content: center; align-self: start; width: 100%; min-width: 100%; max-width: 100%; min-height: var(--button-height, 50px); padding: 0; overflow: hidden; border: 0; border-radius: 25px; background: rgb(7,186,25); color: #fff; font-family: Montserrat, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: normal; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.cta:hover { background: rgb(29,30,32); color: #fff; }

/* O original usa uma composição mobile central de 360px até 920px. */
@media screen and (max-width: 1191px) { .cta { white-space: normal; } }
@media screen and (max-width: 920px) {
  .site-header { height: 0; }
  .composition { grid-template-rows: var(--mobile-rows); grid-template-columns: var(--mobile-columns); max-width: 360px; min-height: auto; padding: 0 4.444444444444445vw; }
  .item { grid-row: var(--mobile-row); grid-column: var(--mobile-column); text-align: var(--mobile-text, var(--text)); }
  .copy :is(h1,h2,h3,h4,h5,h6,.body,.body-large,.body-small) { font-size: var(--font-mobile, var(--mobile-size, var(--size))); line-height: var(--line-mobile, var(--leading, 1.2)); }
  .copy h1 { --mobile-size: 40px; }
  .copy h2 { --mobile-size: 36px; }
  .copy h3 { --mobile-size: 32px; }
  .copy h4 { --mobile-size: 24px; }
  .copy span { font-size: var(--font-mobile); }
  .media { max-height: var(--mobile-image-height); }
  .media picture { border-radius: var(--mobile-radius, 0); }
  .panel { height: var(--mobile-panel-height, 100%); }
}
@media screen and (min-width: 920px) and (max-width: 1224px) {
  .composition { grid-template-rows: var(--compact-rows); min-height: auto; }
  .media picture { width: var(--compact-image-width); max-width: 100%; height: var(--compact-image-height); }
}
@media screen and (min-width: 361px) and (max-width: 920px) {
  .composition { grid-template-rows: var(--tablet-rows); min-height: var(--tablet-height); padding: 0 16px; }
}
@media screen and (max-width: 920px) {
  .media picture { width: 100%; height: 100%; }
}
@media screen and (max-width: 360px) {
  .media picture { width: var(--small-image-width); max-width: 100%; height: var(--small-image-height); }
  .cta { min-width: var(--small-button-width); min-height: 50px; padding: 0 14px; }
}
@media screen and (min-width: 360px) and (max-width: 920px) { .panel { height: var(--tablet-panel-height, 100%); } }
@media screen and (min-width: 920px) and (max-width: 1224px) { .panel { height: var(--compact-panel-height, 100%); } }