html {
    scroll-behavior: smooth;
    height: 500vh;
}

* {
    margin: 0;
    top: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

:root {
    --white: #fff;
    --black: #15212E;
    --destaque_color: #1689C0;
    --accent_red: #DC2626;
    --accent_green: #16A34A;
    --muted: 50%;

    --opacity: 0.6;

    --media_slot_bg1: #eef0f3;
    --media_slot_bg2: #d9d8d8;
    --main_bg_color: #dbe9f7;
    --surface_color: #eef2f7;

    --dark_bg: color-mix(in srgb, var(--black) 75%, var(--destaque_color) 25%);
    --muted_text: color-mix(in srgb, var(--black) var(--muted), transparent);
    --border_subtle: color-mix(in srgb, var(--black) 8%, transparent);
    --divider_color: color-mix(in srgb, var(--black) 15%, transparent);
    --tag_highlight: color-mix(in srgb, var(--destaque_color) 15%, transparent);

    --dark_text: color-mix(in srgb, var(--white) 65%, transparent);
    --dark_tag: color-mix(in srgb, var(--destaque_color) 60%, var(--white));
    --dark_destaque: color-mix(in srgb, var(--destaque_color) 55%, var(--white));
    --dark_tag_highlight: color-mix(in srgb, var(--white) 15%, transparent);
    --dark_chip_bg: color-mix(in srgb, var(--white) 12%, transparent);
    --dark_chip_border: color-mix(in srgb, var(--white) 18%, transparent);
    --dark_chip_hover_bg: color-mix(in srgb, var(--white) 20%, transparent);
    --dark_chip_hover_border: color-mix(in srgb, var(--white) 30%, transparent);

    --jornada_tail_tint: color-mix(in srgb, var(--main_bg_color) 70%, var(--dark_bg) 30%);

    --banner_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--main_bg_color) 78%, var(--white) 100%);
    --stats_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--white) 22%);
    --stats_destaque_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--dark_bg) 22%);
    --solution_bg: linear-gradient(to bottom, var(--white) 0%, var(--dark_bg) 18%, var(--dark_bg) 90%, var(--main_bg_color) 100%);
    --comofunciona_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--main_bg_color) 85%, var(--white) 100%);
    --jornada_bg: linear-gradient(to bottom, var(--white) 0%, var(--main_bg_color) 30%, var(--main_bg_color) 78%, var(--jornada_tail_tint) 100%);
    --depoimentos_bg: linear-gradient(to bottom, var(--dark_bg) 0%, var(--white) 14%, var(--white) 85%, var(--main_bg_color) 100%);
    --vantagens_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--white) 22%);
    --faq_bg: linear-gradient(to bottom, var(--white) 0%, var(--main_bg_color) 22%);
    --cta_bg: linear-gradient(to bottom, var(--main_bg_color) 0%, var(--destaque_color) 24%);
    --footer_bg: linear-gradient(to bottom, var(--destaque_color) 0%, transparent 18%);
}

@keyframes heartbeat_colorswitch_black {
    0% {
        color: var(--black);
    }

    50% {
        color: var(--destaque_color);
    }

    100% {
        color: var(--black);
    }
}

@keyframes heartbeat_colorswitch_white {
    0% {
        color: var(--white);
    }

    50% {
        color: var(--destaque_color);
    }

    100% {
        color: var(--white);
    }
}

li,
button,
a,
header {
    transition: 0.5s;
}

body {
    cursor: default;
}

h1 {
    font-weight: 800;
}

h2 {
    font-weight: 800;
    font-size: 44px;
    line-height: 1.3;
}

p {
    line-height: 32px;
}

button,
a {
    cursor: pointer;
}

button {
    position: relative;
    overflow: hidden;
    align-items: center;
    height: 40px;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    z-index: 0;
}

button:hover {
    letter-spacing: 1px;
    transform: scale(1.1);
    opacity: 1;
}

button:active {
    letter-spacing: 0.3px;
    transform: scale(0.9);
    opacity: 0.5;
}


header:not(.rolling) button[data-btn="scroll"],
button[data-btn="blue"],
button[data-btn="dark"] {
    border: 0;
    background-color: var(--destaque_color);
    color: var(--white);
}

button[data-btn="dark"] {
    background-color: var(--dark_bg);
}

header:not(.rolling) button[data-btn="scroll"]::before,
button[data-btn="blue"]::before,
button[data-btn="dark"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
}

header:not(.rolling) button[data-btn="scroll"]:hover::before,
button[data-btn="blue"]:hover::before,
button[data-btn="dark"]:hover::before {
    left: 125%;
    transition: 0.5s;
}

header.rolling button[data-btn="scroll"],
button[data-btn="white"] {
    border: 1.5px solid var(--destaque_color);
    background-color:  var(--white);
    color: var(--destaque_color);
}

header.rolling button[data-btn="scroll"]::before,
button[data-btn="white"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--destaque_color);
    transform: translateY(100%);
    transition: 0.5s;
    z-index: -1;
}

header.rolling button[data-btn="scroll"]:hover::before,
button[data-btn="white"]:hover::before {
    transform: translateY(0);
}

header.rolling button[data-btn="scroll"]:hover,
button[data-btn="white"]:hover {
    color: var(--white);
}

.fill {
    position: relative;
    display: inline-flex;
    width: 1em;
    height: 1em;
}

.fill i {
    position: absolute;
    inset: 0;
    transition: 0.25s;
}

.fill i:last-child,
button:hover .fill i:first-child {
    opacity: 0;
}

button:hover .fill i:last-child {
    opacity: 1;
}

.media_slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

[data-type="media"] :is(img[src=""], img:not([src])) {
    color: transparent;
    display: none;
}

.media_slot[data-type="media"]:has(img[src=""], img:not([src])) {
    background-image: repeating-linear-gradient(
    -45deg,
    var(--media_slot_bg1) 0px,
    var(--media_slot_bg1) 10px,
    var(--media_slot_bg2) 10px,
    var(--media_slot_bg2) 20px
    );

    border-radius: 10px;
}

.media_slot:has(img[src=""], img:not([src])) i.bi::before {
    font-family: "bootstrap-icons", "Poppins", sans-serif;
    opacity: var(--opacity);
    font-size: 16px;
    color: var(--black);
    background-color: var(--white);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
}

.media_slot:has(img[src=""], img:not([src]))::after {
    opacity: var(--opacity);
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--black);
    background-color: var(--white);
    padding: 6px 14px;
    border-radius: 8px;
    text-align: center;
    white-space: pre-wrap;
}

.media_slot:has(img[src=""], img:not([src])):is([data-content = ""], :not([data-content]))::after,
.media_slot:has(img[src=""], img:not([src])) i.bi:is([data-icon = ""], :not([data-icon]))::before {
    content: "warn(data-; NOT FOUND)";
}

.media_slot:has(img[src=""], img:not([src])) i.bi[data-icon]:not([data-icon = ""])::before {
    content: attr(data-icon);
}

.media_slot:has(img[src=""], img:not([src]))[data-content]:not([data-content = ""])::after {
    content: attr(data-content);
}

[data-txt-type="row"] {
    flex-direction: row;
}

[data-txt-type="column"] {
    flex-direction: column;
}

[data-type="txt"] {
    color: var(--black);
}

.tag {
    text-align: center;
    border-radius: 30px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border: 0.2px solid;
    text-transform: uppercase;
    font-size: 13px;
}

.tag.plain {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    color: var(--destaque_color);
    transition: 0.3s;
}

.tag strong {
    font-weight: 800;
}

section:has(.card:hover) .tag,
section:has(.chip:hover) .tag {
    padding: 6px 14px;
    border-radius: 30px;
}

.card:hover .tag {
    background-color: var(--tag_highlight);
}

section:has(.chip:hover) .tag {
    background-color: var(--dark_tag_highlight);
}

.destaque {
    color: var(--destaque_color);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
}

.chip:hover {
    transform: translateY(-3px);
}

.dark .chip:hover {
    background-color: var(--dark_chip_hover_bg);
    border-color: var(--dark_chip_hover_border);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.dark h2 {
    color: var(--white);
}

.dark .tag {
    color: var(--dark_tag);
}

.dark .destaque {
    color: var(--dark_destaque);
}

.dark p {
    color: var(--dark_text);
}

.dark .chip {
    background-color: var(--dark_chip_bg);
    border: 1px solid var(--dark_chip_border);
    color: var(--white);
}

.card {
    background-color: var(--surface_color);
    border-radius: 8.5px;
    padding: 40px;
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--destaque_color) 20%, transparent);
}

.card:has(.icon_badge[data-icon-bg="red"]):hover {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent_red) 20%, transparent);
}

.card:has(.icon_badge[data-icon-bg="green"]):hover,
.equipe .card[data-accent="green"]:hover {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent_green) 75%, transparent);
}

.card:hover .fill i:first-child {
    opacity: 0;
}

.card:hover .fill i:last-child {
    opacity: 1;
}

.card .icon {
    display: inline-flex;
    font-size: 32px;
    color: var(--destaque_color);
    margin-bottom: 20px;
}

.card .step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--main_bg_color);
    color: var(--destaque_color);
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.card:hover .step {
    background-color: var(--destaque_color);
    color: var(--white);
}

.card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.card:hover h3 {
    color: var(--destaque_color);
}

.card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted_text);
    transition: color 0.3s;
}

.card:hover p {
    color: var(--black);
}

.grid {
    display: grid;
    gap: 24px;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.ver_todos {
    color: var(--destaque_color);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    transition: 0.3s;
}

.ver_todos:hover {
    opacity: 0.7;
}

.container {
    margin: auto;
}

.container:not(header .container) {
    display: flex;
    align-items: center;
}

[data-container="row"] {
    flex-direction: row;
    text-align: left;
}

[data-container="center"] {
    flex-direction: column;
    text-align: center;
}

[data-container="left"] {
    flex-direction: column;
    text-align: left;
}

header {
    width: 100%;
    padding: 40px 4%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

header.rolling {
    background-color: var(--black);
    padding: 20px 4%;
}

header.rolling a {
    color: var(--white);
}

header.rolling li:hover a {
    animation: heartbeat_colorswitch_white 1s ease-in-out;
}

header.rolling img {
    filter: brightness(0) invert(1);
}

header .container {
    max-width: 1280px;
}

header .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

header img {
    height: auto;
    width: 300px;
    transition: filter 0.4s;
}

header .media_slot {
    margin-right: auto;
    height: 50px;
    width: 400px;
}

header .toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 22px;
    padding: 4px 8px;
}

header .mobile_panel {
    display: flex;
    align-items: center;
}

header .contato {
    margin-left: 60px;
}

header .contato button {
    width: 120px;
}

header ul {
    list-style-type: none;
}

header li {
    display: inline-block;
    margin: 0 30px;
}

header li a {
    color: var(--black);
    text-decoration: none;
}

.stats:hover .stat,
header ul:hover li {
    opacity: 0.5;
    transform: scale(0.95);
}

.stats .stat:hover,
header ul li:hover {
    opacity: 1;
    transform: scale(1);
}

header ul li:hover a {
    animation: heartbeat_colorswitch_black 1s ease-in-out;
}

header:has(nav a:active, .contato a:active) .contato a,
header:has(nav a:active, .contato a:active) nav a {
    opacity: 0;
}

header:has(nav a:active) nav a:active {
    opacity: 0.5;
}

header:has(.contato a:active) .contato a:active {
    opacity: 1;
}

header.hidden {
    transform: translateY(-120%);
}

.banner {
    background: var(--banner_bg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 100px 6%;
    gap: 180px;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.banner .container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(50px, 10vw, 180px);
    max-width: 1400px;
    width: 100%;
}

.banner .content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1 1 320px;
    min-width: 0;
    max-width: 640px;
    margin: 0;
}

.shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.shapes .shape {
    position: absolute;
    background-color: var(--shape_color, var(--destaque_color));
}

.shapes .shape.outline {
    background-color: transparent;
    border: 1.5px solid var(--shape_color, var(--destaque_color));
}

.shapes .shape.outline-stroke {
    display: block;
    background: none;
    border: 0;
    clip-path: none;
}

.shapes .circle,
.shapes .oval {
    border-radius: 50%;
}

.shapes .square,
.shapes .rectangle {
    border-radius: 5px;
}

.shapes .triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shapes .diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.dark .shapes .shape {
    --shape_color: var(--white);
}

.shapes .shape.reveal {
    opacity: 0;
    transform: translateY(24px) rotate(var(--shape_rotation, 0deg));
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.shapes .shape.reveal.visible {
    opacity: var(--shape_opacity, 1);
    transform: rotate(var(--shape_rotation, 0deg));
}

.banner .shapes {
    z-index: -1;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.banner .tag {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
    align-self: flex-start;
}

.banner h1 {
    font-size: 50px;
    line-height: 1.3;
}

.banner h1 .per_mark {
    animation: heartbeat_colorswitch_black 1s ease-in-out infinite;
    font-size: 55;
}

.banner p {
    font-size: 20px;
    color: var(--muted_text);
}

.banner p .underline {
    text-decoration: underline;
    color: var(--black);
}

.banner .buttons_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
}

.banner .agendar button {
    width: 300px;
}

.banner .como button {
    width: 170px;
}

.banner .media_slot {
    width: min(500px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 1;
}

/* mancha desfocada atrás da foto — sem ela o quadrado ficava meio solto
   no ar, só a foto com fundo claro ao redor; isso dá uma profundidade e
   preenche o espaço em volta sem competir com a foto em si. */
.banner .media_slot::before {
    content: "";
    position: absolute;
    inset: -28px;
    z-index: -1;
    background: linear-gradient(135deg, var(--destaque_color), var(--accent_green));
    opacity: 0.16;
    border-radius: 36px;
    filter: blur(6px);
}

.banner .media_slot img[src]:not([src=""]) {
    border-radius: 20px;
    box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--black) 45%, transparent);
}

.stats {
    background: var(--stats_bg);
    padding: 60px 6%;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.stats .container {
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1000px;
    position: relative;
}

.stats .stat {
    text-align: center;
    padding: 0 40px;
    position: relative;
    transition: 0.3s;
}

.stats .stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50px;
    background-color: var(--divider_color);
}

.stats .number {
    font-size: 40px;
    font-weight: 800;
    color: var(--black);
}

.stats .number span {
    font-size: 22px;
    font-weight: 700;
}

.stats .label {
    font-size: 14px;
    margin-top: 4px;
    color: var(--muted_text);
}

.stats[data-style="destaque"] {
    background: var(--stats_destaque_bg);
}

.stats[data-style="destaque"] .stat:not(:last-child)::after {
    background-color: var(--dark_chip_border);
}

.stats[data-style="destaque"] .number {
    color: var(--white);
}

.stats[data-style="destaque"] .label {
    color: var(--dark_text);
}

.flow2 {
    position: relative;
    overflow: hidden;
}

.flow2 .shapes {
    z-index: 1;
}

.flow2 .card {
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
}

.depoimentos {
    background: var(--depoimentos_bg);
    padding: 100px 6%;
    position: relative;
}

.depoimentos .container {
    gap: 24px;
    max-width: 780px;
    position: relative;
    z-index: 1;
}

.depoimentos .quote_icon {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 90px;
    color: var(--tag_highlight);
    z-index: -1;
    pointer-events: none;
}

.depoimentos .tag {
    font-weight: 700;
}

.depoimentos .quote {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

.depoimentos .autor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    transition-delay: 0.15s;
}

/* enquanto o slot tá vazio, o placeholder (ícone + fundo listrado) cuida
   do próprio tamanho sozinho. Quando entra uma foto de verdade (src
   preenchido), sem isso ela aparecia no tamanho original do arquivo,
   estourando a caixa — aqui ela preenche o slot inteiro, recortada
   proporcionalmente (object-fit: cover), sem esticar/distorcer.
   Importante: isso é só pros slots de FOTO (depoimentos/equipe/banner) —
   nunca ".media_slot img" genérico, porque isso pegava também a logo do
   header (que já tem o tamanho dela certinho em "header img" mais abaixo)
   e espremia ela num quadrado 400x50, foi o que bagunçou o header. */
.depoimentos .avatar img[src]:not([src=""]),
.equipe .foto img[src]:not([src=""]),
.banner .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.depoimentos .avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
}

.depoimentos .media_slot.avatar[data-type="media"] {
    border-radius: 50%;
}

.depoimentos .info {
    text-align: left;
}

.depoimentos .nome {
    font-weight: 700;
    color: var(--black);
}

.depoimentos .empresa {
    font-size: 14px;
    color: var(--muted_text);
}

.equipe {
    background-color: var(--main_bg_color);
    padding: 100px 6%;
    position: relative;
}

.equipe .container {
    gap: 24px;
    max-width: 1000px;
    position: relative;
    z-index: 1;
}

.equipe h2 {
    max-width: 720px;
}

.equipe .grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    text-align: left;
}

.equipe .card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.equipe .foto {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    transition: box-shadow 0.3s;
}

.equipe .info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipe .cargo {
    color: var(--destaque_color);
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s;
}

.equipe .card[data-accent="blue"]:hover .foto {
    box-shadow: 0 0 0 3px var(--destaque_color);
}

.equipe .card[data-accent="blue"]:hover h3,
.equipe .card[data-accent="blue"]:hover .cargo {
    color: var(--destaque_color);
}

.equipe .card[data-accent="green"]:hover .foto {
    box-shadow: 0 0 0 3px var(--accent_green);
}

.equipe .card[data-accent="green"]:hover h3,
.equipe .card[data-accent="green"]:hover .cargo {
    color: var(--accent_green);
}

.equipe .card[data-accent="green"] .cargo {
    color: var(--accent_green);
}

.problems {
    background-color: var(--white);
    padding: 100px 6%;
    position: relative;
    overflow: hidden;
}

.problems .container {
    gap: 24px;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}


.problems .tag {
    font-weight: 700;
    font-size: 14px;
}

.problems h2 {
    font-size: 46px;
    max-width: 720px;
}

.problems .grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    text-align: left;
}

.solution {
    background: var(--solution_bg);
    padding: 120px 6%;
    position: relative;
    overflow: hidden;
}

.solution .container {
    gap: 28px;
    max-width: 900px;
    position: relative;
    z-index: 1;
}

.solution h2 {
    max-width: 780px;
}

[data-container] > p {
    font-size: 18px;
    max-width: 640px;
}

.vantagens {
    background: var(--vantagens_bg);
    padding: 100px 6%;
    position: relative;
}

.vantagens .container {
    gap: 24px;
    max-width: 1000px;
    position: relative;
    z-index: 1;
}

.vantagens .grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    text-align: left;
    margin-top: 20px;
}

.vantagens .card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
}

.icon_badge {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.icon_badge[data-icon-bg="blue"] {
    background-color: var(--tag_highlight);
    color: var(--destaque_color);
}

.icon_badge[data-icon-bg="red"] {
    background-color: color-mix(in srgb, var(--accent_red) 22%, var(--white));
    color: var(--accent_red);
}

.icon_badge[data-icon-bg="green"] {
    background-color: color-mix(in srgb, var(--accent_green) 16%, var(--white));
    color: var(--accent_green);
}

.vantagens .icon_badge {
    margin-bottom: 0;
}

.vantagens h3 {
    font-size: 18px;
}

.flow {
    position: relative;
    overflow: hidden;
}

.flow .shapes {
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

.comofunciona {
    background: var(--comofunciona_bg);
    padding: 100px 6%;
    position: relative;
}

.comofunciona .container {
    gap: 24px;
    max-width: 1000px;
    position: relative;
    z-index: 1;
}

.comofunciona h2 {
    max-width: 720px;
}

.comofunciona .grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    text-align: left;
    margin-top: 20px;
}

.flow .card {
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
}

.services {
    background-color: var(--white);
    padding: 100px 6%;
    position: relative;
}

.services .container {
    gap: 40px;
    max-width: 1280px;
    position: relative;
    z-index: 1;
}

.services .grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.segmentos {
    background-color: var(--white);
    padding: 100px 6%;
    position: relative;
}

.segmentos .container {
    gap: 40px;
    max-width: 1280px;
    position: relative;
    z-index: 1;
}

.segmentos .grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.segmentos .card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
}

.segmentos .card .icon,
.segmentos .card .icon_badge {
    grid-row: 1 / 3;
    margin-bottom: 0;
}

.segmentos .card h3 {
    margin-bottom: 4px;
}

.jornada {
    background: var(--jornada_bg);
    padding: 100px 6%;
    position: relative;
}

.jornada .container {
    gap: 28px;
    max-width: 1100px;
    position: relative;
    z-index: 1;
}

.jornada .grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    text-align: left;
    position: relative;
    --j-step: clamp(20px, 2.8vw, 56px);
}

.jornada .cta_line {
    max-width: none;
}

.jornada .card .tag {
    display: inline-block;
    background-color: var(--main_bg_color);
    color: var(--destaque_color);
    border: 0;
    font-weight: 700;
    margin-bottom: 20px;
    transition: 0.3s;
}

.jornada .card:hover .tag {
    background-color: var(--destaque_color);
    color: var(--white);
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--muted_text);
    transition: color 0.3s;
}

.checklist i {
    color: var(--destaque_color);
    font-size: 15px;
    margin-top: 3px;
    flex-shrink: 0;
}

.card:hover .checklist li {
    color: var(--black);
}

[data-style="destaque"] h3 {
    color: var(--white);
    transition: 0.3s;
}

[data-style="destaque"] p {
    color: var(--dark_text);
}

.card[data-style="destaque"] .checklist li,
.card[data-style="destaque"] p {
    opacity: 0.5;
    transition: 0.3s;
}

[data-style="destaque"] .tag {
    color: var(--dark_tag);
}

.card[data-style="destaque"] {
    background-color: var(--dark_bg);
}

.card[data-style="destaque"] h3,
.card[data-style="destaque"]:hover .checklist li,
.card[data-style="destaque"]:hover p {
    opacity: 1;
}

.card[data-style="destaque"]:hover h3 {
    color: var(--dark_destaque);
}

.card[data-style="destaque"]:hover p {
    color: var(--dark_text);
}

.card[data-style="destaque"] .tag {
    background-color: var(--dark_tag_highlight);
}

.card[data-style="destaque"]:hover .tag {
    background-color: var(--white);
    color: var(--destaque_color);
}

.card[data-style="destaque"] .checklist li,
.card[data-style="destaque"]:hover .checklist li {
    color: var(--dark_text);
}

.card[data-style="destaque"] .checklist i {
    color: var(--dark_destaque);
}

.jornada .grid .card {
    transition: transform 0.5s ease, box-shadow 0.3s, background-color 0.3s;
}

.jornada .grid::before,
.jornada .grid::after {
    content: "→";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--j-step) * 0.8);
    font-weight: 800;
    color: var(--destaque_color);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.5s ease;
}

.jornada .grid::before {
    left: calc(33.333% - 4px);
}

.jornada .grid::after {
    left: calc(66.666% + 4px);
}

.jornada .grid:has(.card:hover)::before,
.jornada .grid:has(.card:hover)::after {
    opacity: 1;
}

.jornada .grid .card:hover ~ .card {
    transform: translateX(var(--j-step));
}

.jornada .grid .card:hover ~ .card ~ .card {
    transform: translateX(calc(var(--j-step) * 2));
}

.jornada .grid .card:has(~ .card:hover) {
    transform: translateX(calc(var(--j-step) * -1));
}

.jornada .grid .card:has(~ .card ~ .card:hover) {
    transform: translateX(calc(var(--j-step) * -2));
}

.jornada .grid:has(.card:nth-child(1):hover)::before {
    transform: translate(calc(-50% + var(--j-step) / 2), -50%);
}

.jornada .grid:has(.card:nth-child(1):hover)::after {
    transform: translate(calc(-50% + var(--j-step) * 1.5), -50%);
}

.jornada .grid:has(.card:nth-child(2):hover)::before {
    transform: translate(calc(-50% - var(--j-step) / 2), -50%);
}

.jornada .grid:has(.card:nth-child(2):hover)::after {
    transform: translate(calc(-50% + var(--j-step) / 2), -50%);
}

.jornada .grid:has(.card:nth-child(3):hover)::before {
    transform: translate(calc(-50% - var(--j-step) * 1.5), -50%);
}

.jornada .grid:has(.card:nth-child(3):hover)::after {
    transform: translate(calc(-50% - var(--j-step) / 2), -50%);
}

.faq {
    background: var(--faq_bg);
    padding: 100px 6%;
    position: relative;
    overflow: hidden;
}

.faq .container {
    gap: 12px;
    max-width: 680px;
    margin: 0 auto 48px;
    position: relative;
    z-index: 1;
}

.faq_list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.faq_item {
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
    border-radius: 14px;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.faq_item.open {
    background-color: var(--white);
    border-color: transparent;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--black) 10%, transparent);
}

.faq_question {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    transition: color 0.3s;
}

.faq_question:hover {
    color: var(--destaque_color);
}

.faq_question:hover,
.faq_question:active {
    transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.faq_icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq_icon::before,
.faq_icon::after {
    content: "";
    position: absolute;
    background-color: var(--destaque_color);
}

.faq_icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.faq_icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.faq_item.open .faq_icon {
    transform: rotate(45deg);
}

.faq_answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq_item.open .faq_answer {
    grid-template-rows: 1fr;
}

.faq_answer > div {
    overflow: hidden;
}

.faq_answer p {
    padding: 0 28px 24px;
    color: var(--muted_text);
}

.faq_item:nth-child(1) { transition-delay: 0s; }
.faq_item:nth-child(2) { transition-delay: 0.08s; }
.faq_item:nth-child(3) { transition-delay: 0.16s; }
.faq_item:nth-child(4) { transition-delay: 0.24s; }
.faq_item:nth-child(5) { transition-delay: 0.32s; }

.cta {
    background: var(--cta_bg);
    padding: 110px 6%;
    position: relative;
    overflow: hidden;
}

.cta .container {
    gap: 20px;
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.cta .agendar button {
    width: 320px;
    margin-top: 8px;
}

.cta .helper {
    font-size: 14px;
    margin-top: -4px;
}

@media (max-width: 900px) {
    h2 {
        font-size: 32px;
    }

    .comofunciona .grid {
        grid-template-columns: 1fr;
    }

    .chips {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .chip {
        justify-content: center;
    }

    .problems .grid {
        grid-template-columns: 1fr;
    }

    .equipe .grid {
        grid-template-columns: 1fr;
    }

    .vantagens .grid {
        grid-template-columns: 1fr;
    }

    .services .grid {
        grid-template-columns: 1fr;
    }

    .services .head,
    .segmentos .head {
        flex-direction: column;
        align-items: flex-start;
    }

    .segmentos .grid {
        grid-template-columns: 1fr;
    }

    .jornada .grid {
        grid-template-columns: 1fr;
        gap: calc(24px + var(--j-step));
    }

    .jornada .grid::before,
    .jornada .grid::after {
        display: none;
    }

    .jornada .grid .card:not(:last-child)::after {
        content: "↓";
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, calc(-50% + 12px + var(--j-step) / 2));
        font-size: calc(var(--j-step) * 0.8);
        font-weight: 800;
        color: var(--destaque_color);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.6s ease;
    }

    .jornada .grid:has(.card:hover) .card:not(:last-child)::after {
        opacity: 1;
    }

    .jornada .grid .card:hover ~ .card {
        transform: translateY(var(--j-step));
    }

    .jornada .grid .card:hover ~ .card ~ .card {
        transform: translateY(calc(var(--j-step) * 2));
    }

    .jornada .grid .card:has(~ .card:hover) {
        transform: translateY(calc(var(--j-step) * -1));
    }

    .jornada .grid .card:has(~ .card ~ .card:hover) {
        transform: translateY(calc(var(--j-step) * -2));
    }

    .jornada .grid:has(.card:hover) .card:not(:last-child)::after {
        transform: translate(-50%, calc(-50% + 12px + var(--j-step)));
    }

    .banner .container {
        flex-wrap: wrap;
    }
    .banner .content,
    .banner .media_slot {
        flex-basis: 100%;
        min-width: 0;
    }

    .stats .container {
        flex-direction: column;
        gap: 32px;
    }

    .stats .stat:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 1px;
    }

    .faq {
        padding: 70px 6%;
    }

    .faq_question {
        padding: 18px 20px;
        font-size: 16px;
        gap: 14px;
    }

    .faq_answer p {
        padding: 0 20px 20px;
    }

    .cta {
        padding: 70px 6%;
    }

    .cta .agendar button {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    header .flex {
        position: relative;
    }

    header .media_slot {
        width: min(400px, 60vw);
        height: auto;
    }

    header img {
        width: min(300px, 100%);
    }

    header .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header .mobile_panel {
        display: none;
    }

    header.open .mobile_panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: absolute;
        top: calc(100% + 16px);
        right: 0;
        width: min(320px, 90vw);
        max-height: min(70vh, 480px);
        overflow-y: auto;
        background-color: var(--white);
        border-radius: 16px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        padding: 24px;
        z-index: 20;
    }

    header nav ul {
        display: flex;
        flex-flow: column wrap;
        max-height: 220px;
        column-gap: 32px;
        row-gap: 16px;
    }

    header li {
        margin: 0;
    }

    header li a,
    header.rolling .mobile_panel li a {
        color: var(--black);
        font-size: 16px;
    }

    header .contato {
        margin: 0;
    }

    header .contato button {
        width: 100%;
    }
}

.footer {
    position: relative;
    overflow: hidden;
    background-color: var(--main_bg_color);
    background-image: var(--footer_bg);
    padding: 110px 6% 40px;
    transition: background-color 0.6s ease;
}

.footer.active {
    background-color: var(--dark_bg);
}

.footer_logo {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.footer_logo img {
    width: 260px;
    height: auto;
    transition: filter 0.4s;
}

.footer.active .footer_logo img {
    filter: brightness(0) invert(1);
}

.footer .shapes .shape {
    --shape_color: var(--destaque_color);
    transition: background-color 0.4s ease;
}

.footer .shapes .shape.outline-stroke polygon {
    transition: stroke 0.4s ease;
}

.footer .shapes {
    transition: opacity 0.4s ease;
}

.footer.active .shapes .shape {
    --shape_color: var(--white);
}

.footer.active .shapes {
    opacity: 0.35;
}

.footer_extra {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer.active .footer_extra {
    opacity: 1;
    transform: translateY(0);
}

.footer_inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: auto;
}

.footer_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px;
}

.footer_brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 380px;
}

.footer_brand .footer_extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer_brand p {
    font-size: 15px;
    color: var(--dark_text);
}

.footer_social {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.footer_social a {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark_chip_bg);
    border: 1px solid var(--dark_chip_border);
    color: var(--white);
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.footer_social a:hover {
    background-color: var(--dark_chip_hover_bg);
    border-color: var(--dark_chip_hover_border);
    transform: translateY(-2px);
}

.footer_col h4 {
    color: var(--white);
    font-size: 15px;
    margin-bottom: 20px;
}

.footer_col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer_col a {
    color: var(--dark_text);
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
}

.footer_col a:hover {
    color: var(--white);
}

.footer_col .whatsapp_link {
    color: var(--dark_destaque);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer_col .whatsapp_link i {
    transition: transform 0.3s;
}

.footer_col .whatsapp_link:hover {
    color: var(--dark_destaque);
}

.footer_col .whatsapp_link:hover i {
    transform: translateX(4px);
}

.footer_divider {
    height: 1px;
    background-color: var(--dark_chip_border);
    margin: 56px 0 28px;
}

.footer_bottom p {
    font-size: 13px;
    color: var(--dark_text);
}

@media (max-width: 900px) {
    .footer {
        padding: 70px 6% 32px;
    }

    .footer_logo img {
        width: 200px;
    }

    .footer_top {
        flex-direction: column;
        gap: 40px;
    }

    .footer_brand {
        max-width: 100%;
    }

    .footer_divider {
        margin: 40px 0 24px;
    }
}