:root {
    --bg: #fdfcf9;
    --fg: #302c27;
    --primary: #da0100;
    --primary-d: #cf6414;
    --muted: #777169;
    --border: #ded9d0;
    --soft: #f3f1ec;
    --dark: #24211e;
    --darker: #14110f;
    --shadow: 0 18px 50px rgba(48,44,39,.14);
    --display: "Barlow Condensed","Arial Narrow",Impact,sans-serif;
    --body: "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --bs-body-font-family: var(--body);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --ease: cubic-bezier(.16,1,.3,1);
}

html {
    scroll-behavior: auto
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    overflow-x: hidden
}

main,.footer {
    overflow-x: clip
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

::selection {
    background: var(--primary);
    color: #fdfcf9
}

.container {
    max-width: 1240px
}

@media(min-width: 1400px) {
    .container {
        max-width:1240px
    }
}

html.intro-on,html.intro-on body {
    overflow: hidden
}

.scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 2000
}

.curtain,.intro {
    display: none
}

html.anim .curtain {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none
}

html.anim.intro-on .curtain {
    display: none
}

.curtain-a,.curtain-b {
    position: absolute;
    inset: 0;
    transform: translateY(0)
}

.curtain-a {
    background: var(--primary)
}

.curtain-b {
    background: var(--darker)
}

/* garantia: se o JS falhar, a cortina some sozinha */
html.anim .curtain {
    animation: curtainFail 0s 5s forwards
}

@keyframes curtainFail {
    to {
        visibility: hidden
    }
}

html.anim.intro-on .intro {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4000;
    color: #fff;
    animation: introFail 0s 9s forwards
}

@keyframes introFail {
    to {
        visibility: hidden
    }
}

.intro-panel {
    position: absolute;
    left: 0;
    right: 0;
    height: 50.2%;
    background: var(--darker)
}

.intro-panel.top {
    top: 0
}

.intro-panel.bottom {
    bottom: 0
}

.intro-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    opacity: .9
}

.intro-panel.top::after {
    bottom: 0
}

.intro-panel.bottom::after {
    top: 0
}

.intro-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    z-index: 2
}

.intro-logo {
    font: 800 clamp(56px,13vw,170px)/.9 var(--display);
    text-transform: uppercase;
    letter-spacing: .02em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.intro-logo .ch {
    display: inline-block;
    will-change: transform,opacity,filter
}

.intro-logo .ch.sp {
    width: .28em
}

.intro-logo .ch.amp {
    color: var(--primary)
}

.intro-sub {
    margin-top: 22px;
    font-size: clamp(9px,1.4vw,13px);
    font-weight: 700;
    letter-spacing: .34em;
    color: rgba(255,255,255,.75);
    opacity: 0
}

.intro-sub b {
    color: var(--primary);
    margin: 0 .6em
}

.intro-bar {
    width: min(320px,60vw);
    height: 2px;
    background: rgba(255,255,255,.18);
    margin-top: 34px;
    overflow: hidden
}

.intro-bar i {
    display: block;
    height: 100%;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left
}

.intro-count {
    position: absolute;
    left: clamp(20px,4vw,56px);
    bottom: clamp(20px,4vw,48px);
    z-index: 3;
    font: 800 clamp(40px,7vw,96px)/1 var(--display);
    display: flex;
    align-items: flex-start
}

.intro-count em {
    font-style: normal;
    color: var(--primary);
    font-size: .45em;
    margin-top: .2em
}

.intro-year {
    position: absolute;
    right: clamp(20px,4vw,56px);
    bottom: clamp(26px,4vw,56px);
    z-index: 3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(255,255,255,.6)
}

.topline {
    height: 42px;
    background: var(--fg);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    z-index: 60
}

.topline a {
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color .2s
}

.topline a:hover {
    color: var(--primary)
}

.topline .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 6px;
    animation: pulseDot 2s infinite
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(231,119,32,.7)
    }

    70% {
        box-shadow: 0 0 0 8px rgba(231,119,32,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231,119,32,0)
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgb(255 255 255);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #fafaf8;
    transition: box-shadow .35s,background .35s
}

.site-header.scrolled {
    box-shadow: 0 10px 36px rgba(36,33,30,.12);
    background: rgb(255 255 255 / 98%);
}

.site-header .navbar {
    padding: 0;
    min-height: 117px;
    transition: min-height .35s var(--ease);
    background: rgb(252 251 250);
}

.site-header.scrolled .navbar {
    min-height: 68px
}

.logo {
    font-family: var(--display);
    font-size: 31px;
    font-weight: 800;
    line-height: .8;
    text-transform: uppercase;
    color: var(--fg);
    margin: 0;
    padding: 10px;
    width: 150px;
}

.logo small {
    display: block;
    font: 700 8px var(--body);
    letter-spacing: .22em;
    color: var(--primary);
    margin-top: 8px
}

.navbar-nav {
    gap: clamp(8px,1.6vw,28px);
    background: rgb(252 251 250);
}

.navbar-nav .nav-link {
    position: relative;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fg);
    padding: 30px 4px;
    transition: color .25s
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease)
}

.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active {
    color: var(--primary)
}

.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left
}

.navbar-toggler {
    border: 0;
    padding: 10px;
    box-shadow: none!important
}

.navbar-toggler .bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 26px
}

.navbar-toggler .bars i {
    display: block;
    height: 2px;
    background: var(--fg);
    transition: transform .35s var(--ease),opacity .2s
}

.navbar-toggler:not(.collapsed) .bars i:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.navbar-toggler:not(.collapsed) .bars i:nth-child(2) {
    opacity: 0
}

.navbar-toggler:not(.collapsed) .bars i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.btn-terra {
    --bs-btn-padding-x: 22px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: #da0100;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .3s,color .3s
}

.btn-terra::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dark);
    transform: translateY(101%);
    transition: transform .5s var(--ease);
    z-index: -1
}

.btn-terra:hover {
    color: #fff;
    box-shadow: 0 12px 28px rgba(231,119,32,.32)
}

.btn-terra:hover::before {
    transform: translateY(0)
}

.btn-terra span {
    display: inline-block;
    will-change: transform
}

.btn-terra.light {
    background: #fff;
    color: var(--fg)
}

.btn-terra.light::before {
    background: var(--dark)
}

.btn-terra.light:hover {
    color: #fff
}

@media(max-width: 991.98px) {
    .navbar-collapse {
        padding:6px 0 22px;
        border-top: 1px solid var(--border)
    }

    .navbar-nav .nav-link {
        padding: 14px 4px;
        border-bottom: 1px solid var(--border)
    }

    .navbar-nav .nav-link::after {
        display: none
    }

    .navbar-collapse .btn-terra {
        margin-top: 0px;
        width: 100%;
    }
}

.grain {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 2;
    opacity: .09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grain 1s steps(6) infinite
}

@keyframes grain {
    0% {
        transform: translate(0,0)
    }

    20% {
        transform: translate(-4%,3%)
    }

    40% {
        transform: translate(3%,-5%)
    }

    60% {
        transform: translate(-5%,-2%)
    }

    80% {
        transform: translate(4%,4%)
    }

    100% {
        transform: translate(0,0)
    }
}

.hero {
    position: relative;
    height: clamp(600px,calc(100vh - 119px),820px);
    overflow: hidden;
    background: var(--darker);
    color: #fff
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(10,8,6,.55) 100%)
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden
}

.slide.is-active {
    opacity: 1;
    visibility: visible
}

.slide-bg {
    position: absolute;
    inset: -24px
}

.slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 62% 50%
}

.shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 92%), rgb(0 0 0 / 82%) 40%, rgb(0 0 0 / 40%) 80%);
}

.hero-content {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    z-index: 3
}

.copy {
    max-width: 700px;
    padding-bottom: 40px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.eyebrow.light {
    color: #fff
}

.eyebrow .line {
    display: block;
    width: 27px;
    height: 2px;
    background: currentColor;
    transform-origin: left
}

.hero h1 {
    font: 800 clamp(58px,7.4vw,112px)/.92 var(--display);
    text-transform: uppercase;
    margin: 26px 0 22px
}

.hero p {
    max-width: 480px;
    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 30px
}

.hero h1 .w,.hero h1 .wi {
    will-change: transform,opacity,filter
}

.controls {
    position: absolute;
    z-index: 6;
    bottom: 32px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pagination {
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 0
}

.pagination button {
    position: relative;
    width: 40px;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.35);
    transition: width .5s var(--ease);
    overflow: hidden
}

.pagination button i {
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left
}

.pagination button.active {
    width: 72px
}

.count {
    font: 700 15px var(--display);
    letter-spacing: .14em;
    color: rgba(255,255,255,.7)
}

.count .cur {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    height: 1.2em;
    line-height: 1.2
}

.count b {
    display: inline-block;
    color: #fff;
    font-weight: 800
}

.arrows {
    display: flex;
    gap: 1px
}

.arrows button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(0,0,0,.2);
    color: #fff;
    font-size: 17px;
    transition: background .3s,border-color .3s,transform .3s var(--ease);
    backdrop-filter: blur(4px)
}

.arrows button:hover {
    background: var(--primary);
    border-color: var(--primary)
}

.side-label {
    position: absolute;
    right: 24px;
    top: 48%;
    transform: rotate(90deg) translateX(50%);
    transform-origin: right;
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 700;
    z-index: 5;
    color: rgba(255,255,255,.8)
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3em;
    color: rgba(255,255,255,.7)
}

.scroll-hint i {
    display: block;
    width: 1px;
    height: 38px;
    background: linear-gradient(var(--primary),transparent);
    animation: hint 1.8s var(--ease) infinite;
    transform-origin: top
}

@keyframes hint {
    0% {
        transform: scaleY(0)
    }

    50% {
        transform: scaleY(1)
    }

    100% {
        transform: scaleY(1);
        opacity: 0
    }
}

@media(max-width: 991.98px) {
    .scroll-hint,.side-label {
        display:none
    }
}

.marquee {
    background: var(--dark);
    color: #fff;
    overflow: hidden;
    padding: 18px 0;
    border-top: 3px solid var(--primary)
}

.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 34px;
    white-space: nowrap;
    font: 800 clamp(26px,3.4vw,44px)/1 var(--display);
    text-transform: uppercase;
    animation: marq 40s linear infinite
}

.marquee-track b {
    color: var(--primary);
    font-size: .55em
}

.marquee-track span:nth-of-type(even) {
    -webkit-text-stroke: 1px rgba(255,255,255,.75);
    color: transparent
}

html.anim .marquee-track {
    animation: none
}

@keyframes marq {
    to {
        transform: translateX(-50%)
    }
}

.band {
    border-bottom: 1px solid var(--border);
    background: #fff
}

.band .container {
    padding-top: 26px;
    padding-bottom: 26px
}

.band-title {
    font: 800 clamp(26px,2.4vw,34px)/1.05 var(--display);
    text-transform: uppercase
}

.stat {
    border-left: 1px solid var(--border);
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 64px;
    justify-content: center
}

.stat strong {
    color: #da0100;
    font: 800 clamp(26px,2.5vw,34px)/1 var(--display)
}

.stat>span {
    font-size: 12px;
    color: var(--muted)
}

@media(max-width: 991.98px) {
    .band-title {
        margin-bottom:20px
    }

    .stat {
        padding-left: 16px
    }
}

.section {
    padding: 110px 0;
    position: relative
}

.section.soft {
    background: var(--soft)
}

.heading {
    margin-bottom: 46px
}

.heading h2,.split-text h2,.contact-strip h2,.footer h2 {
    font: 800 clamp(44px,4.6vw,68px)/.99 var(--display);
    text-transform: uppercase;
    margin: 18px 0 0
}

.lead-sm {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 4px;
    max-width: 340px
}

@media(min-width: 992px) {
    .lead-sm {
        margin-left:auto
    }
}

.w {
    display: inline-block
}

.wi {
    display: inline-block
}

.center-link {
    display: flex;
    justify-content: center;
    margin-top: 44px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    border-bottom: 1px solid var(--primary);
    padding-bottom: 7px;
    transition: gap .3s var(--ease),color .2s
}

.text-link:hover {
    color: var(--primary);
    gap: 15px
}

.service-card {
    display: flex;
    align-items: flex-end;
    position: relative;
    min-height: 380px;
    height: 100%;
    overflow: hidden;
    background: var(--dark);
    color: #fff
}

.sc-media {
    position: absolute;
    inset: -10% 0;
    overflow: hidden
}

.sc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .9s var(--ease),filter .6s
}

.service-card:hover .sc-media img {
    scale: 1.09
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(18,16,14,.92),rgba(18,16,14,.2) 70%);
    transition: background .5s
}

.service-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease);
    z-index: 3
}

.service-card:hover::before {
    transform: scaleX(1)
}

.service-content {
    position: relative;
    z-index: 2;
    padding: 28px;
    width: 100%;
    transition: transform .6s var(--ease)
}

.service-card:hover .service-content {
    transform: translateY(-6px)
}

.sc-num {
    color: #da0100;
    font: 800 15px var(--display);
    letter-spacing: .06em
}

.service-content h3 {
    font: 800 32px/.98 var(--display);
    text-transform: uppercase;
    margin: 13px 0 11px
}

.service-content p {
    font-size: 13px;
    line-height: 1.55;
    max-width: 320px;
    color: rgba(255,255,255,.8);
    margin: 0
}

.arrow {
    position: absolute;
    right: 26px;
    bottom: 28px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    transition: background .35s,transform .5s var(--ease),border-color .35s
}

.service-card:hover .arrow {
    background: var(--primary);
    border-color: var(--primary);
    transform: rotate(45deg)
}

.split-media {
    position: relative;
    padding: 0 0 0 22px
}

.split-media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    right: 26px;
    bottom: -22px;
    border: 2px solid var(--primary);
    z-index: 0
}

.img-reveal {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--dark)
}

.img-reveal img {
    width: 100%;
    height: 540px;
    object-fit: cover
}

.badge-year {
    position: absolute;
    right: -8px;
    bottom: 36px;
    z-index: 2;
    background: #da0100;
    color: #fff;
    padding: 18px 26px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    line-height: 1
}

.badge-year strong {
    font: 800 52px/.9 var(--display)
}

.badge-year span {
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 6px
}

.split-text h2 {
    margin-bottom: 26px
}

.split-text p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
    max-width: 520px
}

.checks {
    list-style: none;
    padding: 18px 0 28px;
    margin: 0;
    max-width: 520px
}

.checks li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700
}

.checks b {
    color: var(--primary)
}

.machine-card {
    border: 1px solid var(--border);
    background: #fff;
    height: 100%;
    transition: transform .5s var(--ease),box-shadow .5s
}

.machine-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow)
}

.mc-media {
    position: relative;
    overflow: hidden;
    height: 260px
}

.mc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .9s var(--ease)
}

.machine-card:hover .mc-media img {
    scale: 1.08
}

.mc-tag {
    position: absolute;
    left: 0;
    top: 18px;
    background: #da0100;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 14px
}

.machine-body {
    padding: 24px
}

.machine-body h3 {
    font: 800 29px/1 var(--display);
    text-transform: uppercase;
    margin: 0 0 6px
}

.machine-body p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px
}

.mc-col.is-hidden {
    display: none!important
}

.contact-strip {
    background: #da0100;
    color: #fff;
    padding: 64px 0;
    position: relative;
    overflow: hidden
}

.contact-strip::before {
    content: "TERRA & CIA";
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    font: 800 clamp(120px,22vw,320px)/1 var(--display);
    color: rgba(255,255,255,.08);
    white-space: nowrap;
    pointer-events: none
}

.contact-strip .container {
    position: relative
}

.contact-strip h2 {
    margin-top: 12px;
    font-size: clamp(40px,4.2vw,58px)
}

.page-intro {
    height: 430px;
    position: relative;
    overflow: hidden;
    background: var(--darker);
    color: #fff
}

.pi-bg {
    position: absolute;
    inset: -6% 0
}

.pi-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.page-intro .shade {
    background: linear-gradient(90deg,rgba(20,17,15,.9),rgba(20,17,15,.55) 45%,rgba(20,17,15,.1))
}

.page-content {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 3
}

.page-content h1 {
    font: 800 clamp(26px,4.4vw,106px)/.92 var(--display);
    text-transform: uppercase;
    margin: 22px 0 16px
}

.page-content p {
    max-width: 540px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.88)
}

.page-index {
    position: absolute;
    right: 30px;
    bottom: 23px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    z-index: 3
}

.story {
    margin-top: 80px
}

.story article {
    border-top: 2px solid var(--primary);
    padding-top: 22px;
    height: 100%
}

.story strong {
    color: var(--primary);
    font: 800 68px/.9 var(--display)
}

.story h3 {
    font: 800 27px var(--display);
    text-transform: uppercase;
    margin: 18px 0 10px
}

.story p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted)
}

.filters {
    display: flex;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap
}

.filters button {
    position: relative;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    padding: 12px 22px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg);
    transition: all .3s var(--ease)
}

.filters button.active,.filters button:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff
}

.tip {
    border-bottom: 1px solid var(--border);
    padding: 34px 0;
    margin: 0!important
}

.tips .tip:first-child {
    border-top: 1px solid var(--border)
}

.tip-num {
    color: var(--primary);
    font: 800 38px var(--display)
}

.tip h2 {
    font: 800 clamp(30px,3vw,40px)/1.05 var(--display);
    text-transform: uppercase;
    margin: 12px 0
}

.tip p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    max-width: 460px;
    margin: 0
}

.tip-img .img-reveal img {
    height: 250px
}

.tip-arrow {
    font-size: 28px;
    color: var(--primary);
    text-align: right;
    transition: transform .5s var(--ease)
}

.tip:hover .tip-arrow {
    transform: translate(6px,-6px)
}

.contact-h {
    font: 800 clamp(44px,4.6vw,62px)/1 var(--display);
    text-transform: uppercase;
    margin: 18px 0 22px
}

.contact-lead {
    color: var(--muted);
    line-height: 1.75;
    max-width: 430px;
    margin-bottom: 26px
}

.method {
    display: flex;
    gap: 19px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding: 24px 0;
    transition: padding .4s var(--ease)
}

.method:hover {
    padding-left: 12px
}

.method .icon {
    color: var(--primary);
    font-size: 24px;
    width: 30px
}

.method>div>span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 7px
}

.method a:not(.text-link),.method p {
    font-weight: 700;
    font-size: 18px;
    margin: 0
}

.method a:not(.text-link):hover {
    color: var(--primary)
}

.method .text-link {
    margin-top: 10px
}

.panel {
    background: var(--dark);
    color: #fff;
    padding: clamp(30px,5vw,66px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 100%
}

.panel::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: .35;
    animation: spinSlow 18s linear infinite;
    border-style: dashed
}

@keyframes spinSlow {
    to {
        transform: rotate(360deg)
    }
}

.panel h3 {
    font: 800 clamp(38px,3.6vw,50px)/1 var(--display);
    text-transform: uppercase;
    margin: 16px 0 20px
}

.panel p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,.75);
    margin-bottom: 28px
}

.footer {
    background: var(--dark);
    color: #fff;
    padding: 90px 0 0;
    overflow: hidden
}

.footer-main {
    padding-bottom: 70px
}

.footer-kicker {
    color: #da0100;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em
}

.footer h2 {
    margin: 15px 0 30px;
    font-size: clamp(44px,4.6vw,66px)
}

.footer-links span {
    display: block;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 16px
}

.footer-links a,.footer-links p {
    display: block;
    color: rgba(255,255,255,.77);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 11px;
    transition: color .2s,transform .3s var(--ease)
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(5px)
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.17);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.55);
    font-size: 15px;
    padding: 14px 0
}

.fab-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(37,211,102,.45);
    transition: transform .35s var(--ease)
}

.fab-wa:hover {
    transform: scale(1.1) rotate(-6deg);
    color: #fff
}

.fab-wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: ring 2.2s infinite
}

@keyframes ring {
    0% {
        transform: scale(1);
        opacity: .8
    }

    100% {
        transform: scale(1.7);
        opacity: 0
    }
}

@media(max-width: 991.98px) {
    .section {
        padding:80px 0
    }

    .img-reveal img {
        height: 400px
    }

    .hero {
        height: clamp(600px,88vh,720px)
    }

    .hero-content {
        align-items: flex-end;
        padding-bottom: 110px
    }

    .page-intro {
        height: 380px
    }

    .badge-year {
        right: 6px
    }
}

@media(max-width: 575.98px) {
    .topline {
        height: 37px;
        font-size: 11px;
    }

    .topline a {
        font-size: 14px;
    }

    .topline a::before {
        font-size: 12px
    }

    .site-header .navbar {
        min-height: 90px;
        height: 168px;
    }

    .logo {
        font-size: 29px;
    }

    .hero p {
        font-size: 14px
    }

    .hero h1 {
        font-size: clamp(52px,15vw,72px)
    }

    .section {
        padding: 64px 0
    }

    .heading {
        margin-bottom: 30px
    }

    .img-reveal img {
        height: 320px
    }

    .service-card {
        min-height: 320px
    }

    .page-intro {
        height: 350px
    }

    .page-index {
        display: none
    }

    .controls .count,.arrows {
        display: none
    }

    .fab-wa {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 16px
    }

    .contact-strip::before {
        display: none
    }

    .intro-year {
        display: none
    }
}

.ghost {
    position: absolute;
    right: 3%;
    bottom: -6%;
    z-index: 1;
    font: 800 clamp(220px,34vw,520px)/.8 var(--display);
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.22);
    pointer-events: none;
    user-select: none
}

.hero h1 .w {
    perspective: 800px
}

@media(max-width: 575.98px) {
    .ghost {
        font-size:240px;
        right: -8px
    }
}

/* brilho que passa pelo botão do slide */
.hero .btn-terra::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform: skewX(-20deg);
    pointer-events: none
}

.hero .btn-terra.shine::after {
    animation: btnShine 2.8s ease-in-out .2s infinite
}

@keyframes btnShine {
    0% {
        left: -60%
    }

    45%,100% {
        left: 140%
    }
}

:root {
    --tcd-orange: #da0100;
    --tcd-orange-dark: #e5560a;
    --tcd-ink: #24211e;
    --tcd-muted: #5f5a54;
    --tcd-radius: 4px;
    --tcd-wa: #25d366;
    --tcd-wa-dark: #1ebe5a;
}

/* ---------- Seção principal ---------- */
.tcd-detail {
    padding: 80px 0;
}

.tcd-title {
    margin: 12px 0 28px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--tcd-ink);
}

.tcd-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--tcd-muted);
    max-width: 720px;
}

.tcd-text p {
    margin: 0 0 1.1em;
}

.tcd-text ul, .tcd-text ol {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
}

.tcd-text li {
    margin-bottom: .4em;
}

.tcd-text strong, .tcd-text b {
    color: var(--tcd-ink);
}

.tcd-text img {
    max-width: 100%;
    height: auto;
}

/* ---------- Coluna lateral (imagem + WhatsApp) ---------- */
.tcd-side {
    position: sticky;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tcd-media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--tcd-radius);
    background: #e9e5df;
    aspect-ratio: 4 / 3;
    box-shadow: 0 18px 40px -22px rgba(36, 33, 30, .45);
}

.tcd-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.tcd-media:hover img {
    transform: scale(1.04);
}

/* ---------- Botão WhatsApp ---------- */
.tcd-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: var(--tcd-radius);
    background: var(--tcd-wa);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.tcd-wa svg {
    flex: none;
}

.tcd-wa:hover, .tcd-wa:focus-visible {
    background: var(--tcd-wa-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8);
}

/* ---------- Galeria de projetos ---------- */
.tcd-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tcd-gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--tcd-radius);
    background: #e9e5df;
    aspect-ratio: 4 / 3;
}

.tcd-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.tcd-gallery-item:hover img {
    transform: scale(1.06);
}

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px) {
    .tcd-detail {
        padding: 56px 0;
    }

    .tcd-side {
        position: static;
    }

    .tcd-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .tcd-gallery {
        grid-template-columns: 1fr;
    }

    .tcd-wa {
        padding: 15px 18px;
        font-size: .9rem;
    }
}

/* Página de detalhe do equipamento (maquina.php) */
.pd {
    --pd-accent: #da0100;
    --pd-dark: #24211e;
    --pd-text: #4a4540;
    --pd-line: #e7e2da;
    --pd-radius: 12px;
    padding: 72px 0 96px
}

.pd-grid {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    gap: 56px;
    align-items: start
}

/* imagem principal */
.pd-media {
    position: relative;
    border-radius: var(--pd-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 44px rgba(36,33,30,.15)
}

.pd-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.pd-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--pd-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 4px
}

/* informações */
.pd-info {
    position: sticky;
    top: 120px
}

.pd-title {
    font-size: clamp(28px,3.4vw,46px);
    line-height: 1.08;
    margin: 10px 0 18px;
    color: var(--pd-dark)
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px
}

.pd-chip {
    border: 1px solid var(--pd-line);
    background: #fff;
    color: var(--pd-dark);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500
}

.pd-desc {
    border-top: 1px solid var(--pd-line);
    padding-top: 24px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--pd-text);
    text-align: left
}

.pd-desc p {
    margin: 0 0 14px
}

.pd-desc ul,.pd-desc ol {
    margin: 0 0 14px;
    padding-left: 20px
}

.pd-desc li {
    margin-bottom: 6px
}

.pd-desc strong {
    color: var(--pd-dark)
}

/* botões */
.pd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s,box-shadow .2s,background .2s,color .2s
}

.pd-btn-wa {
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37,211,102,.28)
}

.pd-btn-wa:hover {
    background: #1ebe5b;
    color: #fff;
    transform: translateY(-2px)
}

.pd-btn-ghost {
    border: 2px solid var(--pd-dark);
    color: var(--pd-dark);
    background: transparent
}

.pd-btn-ghost:hover {
    background: var(--pd-dark);
    color: #fff
}

/* galeria */
.pd-gallery-head {
    margin: 72px 0 24px
}

.pd-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 18px
}

.pd-gallery-item {
    display: block;
    border-radius: var(--pd-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgba(36,33,30,.1)
}

.pd-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .45s
}

.pd-gallery-item:hover img {
    transform: scale(1.06)
}

/* responsivo */
@media (max-width: 991px) {
    .pd {
        padding:48px 0 72px
    }

    .pd-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .pd-info {
        position: static
    }
}

@media (max-width: 575px) {
    .pd-btn {
        width:100%
    }

    .pd-gallery {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }
}

/* Página de detalhe da dica (dica.php) */
.dt {
    --dt-accent: #da0100;
    --dt-dark: #24211e;
    --dt-text: #4a4540;
    --dt-line: #e7e2da;
    --dt-radius: 12px;
    padding: 72px 0 96px
}

.dt-h1 {
    font-size: clamp(30px,5vw,64px);
    line-height: 1.05;
    max-width: 1000px
}

.dt-article {
    max-width: 820px;
    margin: 0 auto
}

.dt-cover {
    margin: 0 0 32px;
    border-radius: var(--dt-radius);
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(36,33,30,.15)
}

.dt-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.dt-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dt-accent)
}

.dt-sep {
    width: 28px;
    height: 2px;
    background: var(--dt-line)
}

.dt-body {
    font-size: 17px;
    line-height: 1.85;
    color: var(--dt-text)
}

.dt-body p {
    margin: 0 0 20px
}

.dt-body h2,.dt-body h3,.dt-body h4 {
    color: var(--dt-dark);
    margin: 36px 0 14px;
    line-height: 1.2
}

.dt-body ul,.dt-body ol {
    margin: 0 0 20px;
    padding-left: 22px
}

.dt-body li {
    margin-bottom: 8px
}

.dt-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dt-radius);
    margin: 12px 0
}

.dt-body a {
    color: var(--dt-accent);
    text-decoration: underline
}

.dt-body blockquote {
    margin: 28px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--dt-accent);
    font-style: italic;
    color: var(--dt-dark)
}

.dt-body strong {
    color: var(--dt-dark)
}

.dt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--dt-line)
}

.dt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s,background .2s,color .2s
}

.dt-btn-wa {
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37,211,102,.28)
}

.dt-btn-wa:hover {
    background: #1ebe5b;
    color: #fff;
    transform: translateY(-2px)
}

.dt-btn-ghost {
    border: 2px solid var(--dt-dark);
    color: var(--dt-dark)
}

.dt-btn-ghost:hover {
    background: var(--dt-dark);
    color: #fff
}

/* continue lendo */
.dt-related {
    margin-top: 88px
}

.dt-related-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 24px
}

.dt-card {
    display: block;
    text-decoration: none;
    color: var(--dt-dark)
}

.dt-card-img {
    display: block;
    border-radius: var(--dt-radius);
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(36,33,30,.1)
}

.dt-card-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .45s
}

.dt-card:hover .dt-card-img img {
    transform: scale(1.06)
}

.dt-card-title {
    display: block;
    margin-top: 14px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3
}

.dt-card:hover .dt-card-title {
    color: var(--dt-accent)
}

@media (max-width: 991px) {
    .dt {
        padding:48px 0 72px
    }

    .dt-related-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 575px) {
    .dt-body {
        font-size:16px
    }

    .dt-btn {
        width: 100%
    }

    .dt-related-grid {
        grid-template-columns: 1fr
    }
}

.desenvolvido-por {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-decoration: none;
}

.desenvolvido-por span {
    color: #aaa;
    white-space: nowrap;
}

.desenvolvido-por img {
    width: 130px;
    height: auto;
    display: block;
}

.tag-bar {
    --tg-accent: #da0100;
    --tg-accent-dark: #e0560a;
    --tg-line: #e7e2da;
    --tg-dark: #24211e;
    padding-top: 22px;
    border-top: 1px solid var(--tg-line)
}

.tag-bar .tag-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 15px;
    list-style: none
}

.tag-bar .tag-list li {
    margin: 0;
    padding: 0;
    list-style: none
}

.tag-bar .tag-list li span {
    display: inline-block;
    margin-right: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tg-dark)
}

.tag-bar .tag-list li a {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid var(--tg-accent);
    border-radius: 999px;
    background: rgba(255,106,19,.08);
    color: var(--tg-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .25s,color .25s,transform .25s,box-shadow .25s
}

.tag-bar .tag-list li a:hover, .tag-bar .tag-list li a:focus-visible {
    background: var(--tg-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,106,19,.3);
    outline: none
}

.tag-bar .tag-list li a:active {
    background: var(--tg-accent-dark);
    transform: translateY(0)
}

@media (max-width: 575px) {
    .tag-bar .tag-list {
        gap: 8px;
    }

    .tag-bar .tag-list li a {
        padding: 7px 13px;
        font-size: 12px
    }
}

/* ===== Dropdown "Sobre" ===== */
.navbar-nav .nav-item.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.navbar-nav .dd-toggle {
    background: none;
    border: 0;
    padding: 0 0 0 2px;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: transform .2s ease;
}

.navbar-nav .dd-toggle::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 6px;
}

.navbar-nav .dropdown-menu {
    min-width: 180px;
    margin-top: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: #24211e;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: #da0100;
    padding: 10px 20px;
    font-size: 15px;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
    background: rgb(255 255 255);
}

.navbar-nav .dropdown-menu .dropdown-item:hover, .navbar-nav .dropdown-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, .08);
    color: #000000;
    padding-left: 26px;
}

/* Desktop: abre ao passar o mouse */
@media (min-width: 992px) {
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        background: rgb(255 255 255);
    }

    .navbar-nav .nav-item.dropdown:hover .dd-toggle {
        transform: rotate(180deg);
    }

    .navbar-nav .dropdown-menu {
        top: 100%;
        left: 0;
    }
}

/* Mobile: submenu dentro da lista */
@media (max-width: 991px) {
    .navbar-nav .nav-item.dropdown {
        flex-wrap: wrap;
    }

    .navbar-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 16px;
    }
}

/* ===== Carrossel ===== */
.gal-carousel {
    position: relative
}

.gal-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.gal-track::-webkit-scrollbar {
    display: none
}

.gal-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    scroll-snap-align: start;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #24211e;
    aspect-ratio: 4/3;
}

.gal-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform .5s ease;
}

.gal-slide:hover img {
    transform: scale(1.05)
}

.gal-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 16px 12px;
    background: linear-gradient(transparent,rgba(0,0,0,.7));
    color: #fff;
    font-size: 14px;
    pointer-events: none;
}

.gal-nav {
    position: absolute;
    top: 50%;
    margin-top: -24px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(36,33,30,.85);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease,opacity .2s ease;
}

.gal-nav:hover {
    background: #000
}

.gal-nav[disabled] {
    opacity: .3;
    cursor: default
}

.gal-prev {
    left: -12px
}

.gal-next {
    right: -12px
}

.gal-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap
}

.gal-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #c9c3bb;
    cursor: pointer;
    transition: background .2s ease,transform .2s ease;
}

.gal-dots button.active {
    background: #24211e;
    transform: scale(1.3)
}

@media (max-width: 991px) {
    .gal-slide {
        flex-basis:calc((100% - 16px) / 2)
    }
}

@media (max-width: 575px) {
    .gal-slide {
        flex-basis:100%
    }

    .gal-prev {
        left: 6px
    }

    .gal-next {
        right: 6px
    }

    .gal-nav {
        width: 42px;
        height: 42px;
        font-size: 22px
    }
}

/* ===== Lightbox ===== */
.lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,9,8,.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease,visibility .3s ease;
}

.lb.is-open {
    opacity: 1;
    visibility: visible
}

.lb-img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    transform: scale(.96);
    transition: transform .3s ease,opacity .2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.lb.is-open .lb-img {
    transform: scale(1)
}

.lb-img.is-loading {
    opacity: 0
}

.lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.lb-btn:hover,.lb-btn:focus-visible {
    background: rgba(255,255,255,.28)
}

.lb-close {
    top: 18px;
    right: 18px
}

.lb-prev,.lb-next {
    top: 50%;
    margin-top: -24px
}

.lb-prev {
    left: 18px
}

.lb-next {
    right: 18px
}

.lb-info {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
}

.lb.single .lb-prev,.lb.single .lb-next {
    display: none
}

@media (max-width: 575px) {
    .lb-btn {
        width:42px;
        height: 42px;
        font-size: 22px
    }

    .lb-prev {
        left: 8px
    }

    .lb-next {
        right: 8px
    }

    .lb-close {
        top: 10px;
        right: 10px
    }
}

.mc-carousel {
    --mc-orange: #da0100;
    --mc-dark: #2b2926;
    --mc-gap: 24px;
    --mc-visible: 3;
    position: relative;
    margin-top: 40px;
}

.mc-viewport {
    overflow: hidden;
}

.mc-track {
    display: flex;
    gap: var(--mc-gap);
    will-change: transform;
    touch-action: pan-y;
}

.mc-slide {
    flex: 0 0 calc((100% - (var(--mc-visible) - 1) * var(--mc-gap)) / var(--mc-visible));
    min-width: 0;
    display: flex;
}

.mc-slide .machine-card {
    width: 100%;
    height: 100%;
}

.mc-slide .mc-media img {
    user-select: none;
    -webkit-user-drag: none;
}

/* setas */
.mc-arrow {
    position: absolute;
    top: 180px;
    /* centro da área da imagem */
    z-index: 5;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-orange);
    color: #fff;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    transition: background .25s ease, transform .25s ease;
}

.mc-arrow:hover {
    background: var(--mc-dark);
}

.mc-arrow:active {
    transform: scale(.94);
}

.mc-arrow:focus-visible {
    outline: 2px solid var(--mc-dark);
    outline-offset: 3px;
}

.mc-prev {
    left: -23px;
}

.mc-next {
    right: -23px;
}

@media (max-width: 991px) {
    .mc-carousel {
        --mc-visible:2;
    }
}

@media (max-width: 640px) {
    .mc-carousel {
        --mc-visible:1;
        --mc-gap: 16px;
    }

    .mc-prev {
        left: 8px;
    }

    .mc-next {
        right: 8px;
    }
}


.page-numbers {
    background: #da0100;
    color: #fff;
    padding: 8px 13px;
    margin-right: 5px;
}

.pagination-area {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}