/* ============================================================
TOKENS DE DESIGN
============================================================ */

:root {
--green:       #3fa832;
--green-dark:  #237a36;
--green-deep:  #0c4b2b;
--mint:        #eaf7e9;
--ink:         #0f2d1e;
--muted:       #55685e;
--white:       #fff;
--line:        #d8e8dc;
--surface:     #f5faf5;


--radius-sm:   10px;
--radius-md:   18px;
--radius-lg:   26px;
--radius-xl:   36px;

--shadow-sm:   0 2px 10px rgba(12, 75, 43, .08);
--shadow:      0 12px 40px rgba(12, 75, 43, .11);
--shadow-lg:   0 24px 60px rgba(12, 75, 43, .16);

--transition:  .22s cubic-bezier(.4, 0, .2, 1);

}

/* ============================================================
RESET E BASE
============================================================ */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}

body {
margin: 0;


font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

color: var(--ink);
background: #fff;

line-height: 1.65;
font-size: 16px;

min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;

}

body.modal-open {
overflow: hidden;
}

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

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

button,
input,
textarea,
select {
font-family: inherit;
}

.container {
width: min(1160px, 92%);
margin-left: auto;
margin-right: auto;
}

/* ============================================================
TIPOGRAFIA
============================================================ */

h1 {
font-size: clamp(48px, 7vw, 88px);
line-height: 1;
letter-spacing: -3.5px;
margin: 16px 0 22px;
font-weight: 900;
}

h1 em {
color: var(--green-dark);
font-style: normal;
}

h2 {
font-size: clamp(30px, 4vw, 50px);
line-height: 1.08;
letter-spacing: -1.8px;
margin: 10px 0 18px;
font-weight: 800;
}

h3 {
font-size: 20px;
font-weight: 700;
margin: 6px 0;
letter-spacing: -.3px;
}

p {
color: var(--muted);
font-size: 16.5px;
margin: 0 0 1em;
}

p:last-child {
margin-bottom: 0;
}

.eyebrow {
display: inline-block;

font-size: 11px;
letter-spacing: 2.5px;
font-weight: 800;

color: var(--green-dark);

text-transform: uppercase;

}

/* ============================================================
HEADER / NAVBAR
============================================================ */

.header {
position: fixed;

top: 0;
left: 0;
right: 0;

z-index: 100;

padding: 0;

background: var(--green);

box-shadow:
    0 2px 16px
    rgba(0, 0, 0, .18);

transition: var(--transition);

}

.header.scrolled {
box-shadow:
0 4px 24px
rgba(0, 0, 0, .22);
}

.nav {
display: flex;

align-items: center;
justify-content: space-between;

gap: 24px;

height: 68px;

}

/* ============================================================
LOGO
============================================================ */

.brand {
display: flex;

align-items: center;

gap: 10px;

font-weight: 800;

line-height: 1.1;

flex-shrink: 0;

}

.brand img {
height: 48px;

width: auto;

object-fit: contain;

}

.brand small {
font-weight: 500;

color: var(--muted);

font-size: 12px;

}

.brand-mark {
display: grid;

place-items: center;

width: 46px;
height: 46px;

border-radius: 14px;

background: var(--green);

color: #fff;

font-weight: 900;

font-size: 15px;

letter-spacing: -1.5px;

box-shadow:
    0 6px 18px
    rgba(63, 168, 50, .30);

}

/* ============================================================
NAVEGAÇÃO
============================================================ */

nav {
display: flex;

align-items: center;

gap: 6px;

font-size: 13.5px;

font-weight: 650;

}

nav > a {
color: rgba(255, 255, 255, .9);

padding: 7px 10px;

border-radius: 8px;

transition: var(--transition);


}

nav > a:hover {
color: #fff;

background:
    rgba(255, 255, 255, .12);

}

.team-button {
background:
rgba(0, 0, 0, .22);

color: #fff !important;

border:
    1px solid
    rgba(255, 255, 255, .3);

padding: 8px 14px;

border-radius: 999px;

transition: var(--transition);

}

.team-button:hover {
background:
rgba(255, 255, 255, .18) !important;


color: #fff !important;


}

.nav-pill {
padding: 8px 14px;


border-radius: 999px;

background:
    rgba(255, 255, 255, .15);

color: #fff !important;

border:
    1px solid
    rgba(255, 255, 255, .25);

transition: var(--transition);

white-space: nowrap;


}

.nav-pill:hover {
background:
rgba(255, 255, 255, .25) !important;


color: #fff !important;


}

.nav-pill.outline {
background: transparent;


color: #fff !important;

border:
    1.5px solid
    rgba(255, 255, 255, .7);


}

.nav-pill.outline:hover {
background:
rgba(255, 255, 255, .14);
}

/* ============================================================
MENU MOBILE
============================================================ */

.menu {
display: none;


border: 0;

background: none;

color: #fff;

font-size: 26px;

cursor: pointer;

line-height: 1;

padding: 6px;

border-radius: 8px;

transition: var(--transition);


}

.menu:hover {
background:
rgba(255, 255, 255, .15);
}

/* ============================================================
BOTÕES
============================================================ */

.btn {
display: inline-flex;


align-items: center;
justify-content: center;

gap: 8px;

border: 0;

background: var(--green);

color: #fff;

padding: 13px 24px;

border-radius: 999px;

font-weight: 700;

font-size: 15px;

cursor: pointer;

box-shadow:
    0 8px 22px
    rgba(63, 168, 50, .28);

transition: var(--transition);

white-space: nowrap;


}

.btn:hover {
transform: translateY(-2px);


box-shadow:
    0 12px 30px
    rgba(63, 168, 50, .36);


}

.btn:active {
transform: translateY(0);
}

.btn.ghost {
background: transparent;


color: var(--green-dark);

border:
    1.5px solid
    var(--green);

box-shadow: none;


}

.btn.ghost:hover {
background: var(--mint);

box-shadow: none;


}

.full {
width: 100%;


justify-content: center;


}

/* ============================================================
HERO PRINCIPAL
============================================================ */

.hero {
min-height: 100svh;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

background:
    linear-gradient(
        120deg,
        #edf8eb 0%,
        #d6f0d0 55%,
        #f7fbf6 100%
    );


}

.hero-video {
position: absolute;


inset: 0;

width: 100%;
height: 100%;

object-fit: cover;

z-index: 0;

pointer-events: none;


}

.hero-overlay {
position: absolute;


inset: 0;

z-index: 1;

background:
    linear-gradient(
        100deg,
        rgba(0, 0, 0, .60) 0%,
        rgba(0, 0, 0, .35) 45%,
        rgba(0, 0, 0, .10) 100%
    );

}

.hero-content {
position: relative;


padding-top: 68px;

z-index: 2;

max-width: 780px;


}

.hero-video ~ .hero-overlay ~ .hero-content,
.hero-video + .hero-overlay + .hero-content {
color: #fff;
}

.hero-video ~ .hero-content {
color: #fff;
}

.hero-video ~ .hero-content .eyebrow {
color: #b8f0ad;
}

.hero-video ~ .hero-content h1 em {
color: #9ce48e;
}

.hero-video ~ .hero-content p {
color: rgba(255, 255, 255, .88);
}

.hero-video ~ .hero-content .btn.ghost {
color: #fff;


border-color:
    rgba(255, 255, 255, .7);


}

.hero-video ~ .hero-content .btn.ghost:hover {
background:
rgba(255, 255, 255, .14);
}

.hero p {
font-size: 19px;


max-width: 560px;


}

.hero-actions {
display: flex;


gap: 12px;

margin-top: 32px;

flex-wrap: wrap;


}

/* ============================================================
BIOENERGIA — HERO
============================================================ */

.bioenergia-page {
background: #fff;
color: var(--ink);


width: 100%;
min-height: 100vh;

overflow-x: hidden;
overflow-y: visible;


}

.bioenergia-hero {
position: relative;


min-height: 100svh;

display: flex;

align-items: center;

overflow: hidden;

background: var(--green-deep);

color: #fff;


}

.bioenergia-hero-media {
position: absolute;


inset: 0;

z-index: 0;


}

.bioenergia-hero-media img {
width: 100%;
height: 100%;


object-fit: cover;

object-position: center;


}

.bioenergia-hero-overlay {
position: absolute;


inset: 0;

z-index: 1;

background:
    linear-gradient(
        90deg,
        rgba(7, 31, 20, .88) 0%,
        rgba(7, 31, 20, .68) 40%,
        rgba(7, 31, 20, .35) 72%,
        rgba(7, 31, 20, .20) 100%
    );


}

.bioenergia-hero-content {
position: relative;


z-index: 2;

width: min(1160px, 92%);

padding-top: 68px;

padding-bottom: 90px;


}

.bioenergia-hero-eyebrow {
display: inline-block;


margin-bottom: 20px;

color: #b8f0ad;

font-size: 11px;

font-weight: 900;

letter-spacing: 2.8px;

text-transform: uppercase;


}

.bioenergia-hero h1 {
max-width: 850px;


margin: 0 0 26px;

color: #fff;

font-size:
    clamp(52px, 7vw, 96px);

line-height: .94;

letter-spacing: -4.5px;

font-weight: 900;


}

.bioenergia-hero h1 em {
display: block;


color: #9ce48e;

font-style: normal;


}

.bioenergia-hero p {
max-width: 680px;


margin: 0;

color:
    rgba(255, 255, 255, .88);

font-size:
    clamp(17px, 2vw, 21px);

line-height: 1.65;


}

.bioenergia-hero-actions {
display: flex;


align-items: center;

gap: 28px;

margin-top: 34px;

flex-wrap: wrap;


}

.bioenergia-hero-actions .btn {
background: var(--green);


color: #fff;


}

.bioenergia-hero-link {
display: inline-flex;


align-items: center;

gap: 8px;

color: #fff;

font-size: 14px;

font-weight: 800;

transition: var(--transition);


}

.bioenergia-hero-link span {
color: #9ce48e;


font-size: 19px;

transition: var(--transition);


}

.bioenergia-hero-link:hover {
color: #b8f0ad;
}

.bioenergia-hero-link:hover span {
transform: translateY(4px);
}

.bioenergia-hero-bottom {
position: absolute;


z-index: 3;

left: 0;
right: 0;

bottom: 30px;

width: min(1160px, 92%);

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding-top: 18px;

border-top:
    1px solid
    rgba(255, 255, 255, .25);

color:
    rgba(255, 255, 255, .65);

font-size: 10px;

font-weight: 800;

letter-spacing: 1.8px;


}

/* ============================================================
BIOENERGIA — INDICADORES
============================================================ */

.bioenergia-metrics {
padding: 110px 0;


background: #fff;


}

.bioenergia-section-intro {
display: grid;


grid-template-columns:
    1fr
    420px;

gap: 80px;

align-items: end;

margin-bottom: 48px;


}

.bioenergia-section-intro h2 {
margin-top: 12px;


color: var(--green-deep);


}

.bioenergia-section-intro p {
margin: 0;


font-size: 16px;

line-height: 1.7;


}

.bioenergia-metrics-grid {
display: grid;


grid-template-columns:
    repeat(4, 1fr);

border-top:
    1px solid
    var(--line);

border-bottom:
    1px solid
    var(--line);


}

.bioenergia-metric {
position: relative;


min-height: 300px;

padding: 34px 30px 30px;

border-right:
    1px solid
    var(--line);

overflow: hidden;

transition: var(--transition);


}

.bioenergia-metric:last-child {
border-right: 0;
}

.bioenergia-metric:hover {
background: var(--surface);
}

.bioenergia-metric-number {
display: inline-block;


font-size:
    clamp(56px, 6vw, 84px);

font-weight: 900;

line-height: .9;

letter-spacing: -4px;

color: var(--green-deep);


}

.bioenergia-metric-unit {
display: inline-block;


margin-left: 7px;

color: var(--green);

font-size: 18px;

font-weight: 900;

}

.bioenergia-metric h3 {
margin-top: 40px;


font-size: 18px;

color: var(--ink);


}

.bioenergia-metric p {
max-width: 220px;


font-size: 14px;

line-height: 1.65;


}

.bioenergia-metric-index {
position: absolute;


right: 24px;
bottom: 20px;

color: #dcebdd;

font-size: 54px;

line-height: 1;

font-weight: 900;


}

/* ============================================================
BIOENERGIA — SOBRE
============================================================ */

.bioenergia-about {
padding: 120px 0;


background: var(--surface);


}

.bioenergia-about-grid {
display: grid;


grid-template-columns:
    .9fr
    1.1fr;

gap: 90px;

align-items: center;


}

.bioenergia-about-copy h2 {
margin: 14px 0 24px;


font-size:
    clamp(42px, 5vw, 68px);

line-height: .98;

letter-spacing: -3px;

color: var(--green-deep);


}

.bioenergia-about-copy h2 em {
color: var(--green);


font-style: normal;


}

.bioenergia-about-lead {
color: var(--ink);


font-size: 20px;

font-weight: 650;

line-height: 1.5;

margin-bottom: 22px;


}

.bioenergia-about-copy p {
max-width: 550px;
}

.bioenergia-about-copy .btn {
margin-top: 22px;
}

.bioenergia-about-visual {
position: relative;


padding-bottom: 35px;

padding-left: 35px;


}

.bioenergia-about-image {
position: relative;


height: 590px;

border-radius: var(--radius-xl);

overflow: hidden;

box-shadow: var(--shadow-lg);


}

.bioenergia-about-image::after {
content: "";


position: absolute;

inset: 0;

background:
    linear-gradient(
        180deg,
        transparent 45%,
        rgba(7, 31, 20, .55) 100%
    );


}

.bioenergia-about-image img {
width: 100%;
height: 100%;


object-fit: cover;


}

.bioenergia-about-caption {
position: absolute;


z-index: 2;

left: 0;
bottom: 0;

width:
    min(340px, 80%);

padding: 26px 28px;

border-radius: var(--radius-lg);

background: var(--green-deep);

color: #fff;

box-shadow: var(--shadow);


}

.bioenergia-about-caption span {
display: block;


margin-bottom: 8px;

color: #9ce48e;

font-size: 10px;

font-weight: 900;

letter-spacing: 2px;


}

.bioenergia-about-caption strong {
display: block;


font-size: 20px;

line-height: 1.3;


}

/* ============================================================
BIOENERGIA — PROCESSO
============================================================ */

.bioenergia-process {
padding: 120px 0;


background: #fff;


}

.bioenergia-process-top {
display: grid;


grid-template-columns:
    1fr
    420px;

gap: 80px;

align-items: end;

margin-bottom: 65px;


}

.bioenergia-process-top h2 {
max-width: 700px;


margin-top: 14px;

font-size:
    clamp(42px, 5vw, 68px);

line-height: .98;

letter-spacing: -3px;


}

.bioenergia-process-top > p {
margin: 0;
}

.bioenergia-process-list {
border-top:
1px solid
var(--line);
}

.bioenergia-process-item {
display: grid;


grid-template-columns:
    100px
    1fr
    80px;

gap: 30px;

align-items: center;

padding: 32px 0;

border-bottom:
    1px solid
    var(--line);

transition: var(--transition);


}

.bioenergia-process-item:hover {
padding-left: 12px;


padding-right: 12px;

background: var(--surface);


}

.bioenergia-process-number {
font-size: 14px;


color: var(--green);

font-weight: 900;

letter-spacing: 1px;


}

.bioenergia-process-content > span {
display: block;


margin-bottom: 5px;

color: var(--green-dark);

font-size: 10px;

font-weight: 900;

letter-spacing: 1.8px;


}

.bioenergia-process-content h3 {
margin: 0 0 6px;


font-size: 25px;

color: var(--green-deep);


}

.bioenergia-process-content p {
max-width: 650px;


margin: 0;


}

.bioenergia-process-arrow {
justify-self: end;


width: 48px;
height: 48px;

border:
    1px solid
    var(--line);

border-radius: 50%;

display: grid;

place-items: center;

color: var(--green-dark);

font-size: 20px;

transition: var(--transition);


}

.bioenergia-process-item:hover .bioenergia-process-arrow {
background: var(--green);


color: #fff;

border-color: var(--green);

transform: translateX(4px);


}

/* ============================================================
BIOENERGIA — SUBESTAÇÃO
============================================================ */

.bioenergia-substation {
position: relative;


min-height: 680px;

display: flex;

align-items: center;

overflow: hidden;

background: var(--green-deep);


}

.bioenergia-substation-image {
position: absolute;


inset: 0;


}

.bioenergia-substation-image img {
width: 100%;
height: 100%;


object-fit: cover;

object-position: center;


}

.bioenergia-substation-overlay {
position: absolute;


inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(7, 31, 20, .94) 0%,
        rgba(7, 31, 20, .76) 40%,
        rgba(7, 31, 20, .28) 75%,
        rgba(7, 31, 20, .15) 100%
    );


}

.bioenergia-substation-content {
position: relative;


z-index: 2;

color: #fff;


}

.bioenergia-substation-content h2 {
max-width: 750px;


margin: 16px 0 25px;

color: #fff;

font-size:
    clamp(46px, 6vw, 82px);

line-height: .96;

letter-spacing: -4px;


}

.bioenergia-substation-content p {
max-width: 570px;


color:
    rgba(255, 255, 255, .82);

font-size: 18px;

line-height: 1.75;


}

.bioenergia-substation-content .eyebrow {
color: #9ce48e;
}

.bioenergia-substation-line {
width: 70px;


height: 2px;

margin: 35px 0 16px;

background: var(--green);


}

.bioenergia-substation-label {
color:
rgba(255, 255, 255, .65);


font-size: 11px;

letter-spacing: 2px;

font-weight: 800;


}

/* ============================================================
BIOENERGIA — SUSTENTABILIDADE
============================================================ */

.bioenergia-sustainability {
padding: 120px 0;


background: var(--green-deep);

color: #fff;


}

.bioenergia-sustainability-grid {
display: grid;


grid-template-columns:
    .85fr
    1.15fr;

gap: 100px;


}

.bioenergia-sustainability h2 {
margin-top: 14px;


color: #fff;

font-size:
    clamp(44px, 5vw, 70px);

line-height: .98;

letter-spacing: -3px;


}

.bioenergia-sustainability .eyebrow {
color: #9ce48e;
}

.bioenergia-sustainability-copy {
padding-top: 4px;
}

.bioenergia-sustainability-copy p {
color: #b8cec1;


font-size: 17px;

line-height: 1.8;

margin-bottom: 20px;


}

.bioenergia-sustainability-points {
display: grid;


grid-template-columns:
    repeat(3, 1fr);

gap: 12px;

margin-top: 42px;


}

.bioenergia-sustainability-points div {
padding: 20px;


border:
    1px solid
    rgba(255, 255, 255, .12);

border-radius: var(--radius-md);

background:
    rgba(255, 255, 255, .04);


}

.bioenergia-sustainability-points strong {
display: block;


margin-bottom: 10px;

color: #9ce48e;

font-size: 12px;


}

.bioenergia-sustainability-points span {
display: block;


color: #fff;

font-size: 14px;

line-height: 1.45;


}

/* ============================================================
BIOENERGIA — CTA FINAL
============================================================ */

.bioenergia-final {
padding: 100px 0;


background:
    radial-gradient(
        circle at 90% 50%,
        rgba(86, 179, 74, .13),
        transparent 35%
    ),
    #f5faf5;


}

.bioenergia-final-box {
display: flex;


align-items: flex-end;

justify-content: space-between;

gap: 50px;


}

.bioenergia-final-box h2 {
max-width: 760px;


margin: 14px 0 18px;

color: var(--green-deep);

font-size:
    clamp(42px, 5vw, 68px);

line-height: .98;

letter-spacing: -3px;


}

.bioenergia-final-box h2 em {
color: var(--green);


font-style: normal;


}

.bioenergia-final-box p {
max-width: 580px;


font-size: 17px;


}

.bioenergia-final-actions {
display: flex;


gap: 12px;

flex-wrap: wrap;

flex-shrink: 0;


}

/* ============================================================
SEÇÃO PROPÓSITO
============================================================ */

.intro {
padding: 100px 0;


display: grid;

grid-template-columns:
    1fr
    1fr;

gap: 80px;

align-items: end;


}

.intro p {
font-size: 18px;
}

/* ============================================================
PRODUTOS
============================================================ */

.products {
background: var(--green-deep);


color: #fff;

padding: 90px 0;


}

.products h2 {
color: #fff;
}

.products p {
color: #b4cec0;
}

.products .eyebrow {
color: #9ce48e;
}

.cards {
display: grid;


grid-template-columns:
    repeat(3, 1fr);

gap: 18px;

margin-top: 42px;


}

.cards article {
padding: 32px 28px;


border:
    1px solid
    rgba(255, 255, 255, .10);

border-radius: var(--radius-lg);

background:
    rgba(255, 255, 255, .05);

transition: var(--transition);


}

.cards article:hover {
background:
rgba(255, 255, 255, .09);


border-color:
    rgba(255, 255, 255, .20);

transform: translateY(-3px);


}

.product-card-action {
display: inline-block;


margin-top: 18px;

color: #9ce48e;

font-size: 14px;

font-weight: 800;

transition: var(--transition);


}

.product-card-link:hover .product-card-action {
transform: translateX(5px);
}

.cards article .brand {
margin-bottom: 20px;
}

.cards article .brand img {
width: 100%;


height: 180px;

object-fit: cover;

border-radius: var(--radius-md);

opacity: .88;


}

.cards article h3 {
font-size: 22px;


color: #fff;

margin: 0 0 10px;


}

.icon {
font-size: 32px;


color: #9ce48e;

margin-bottom: 16px;


}

/* ============================================================
GALERIA / MÍDIA
============================================================ */

.media-section {
padding: 100px 0;
}

.section-head {
display: flex;


justify-content: space-between;

align-items: flex-end;

margin-bottom: 32px;

gap: 20px;


}

.text-link {
color: var(--green-dark);


font-weight: 700;

font-size: 14px;

border-bottom:
    1.5px solid
    var(--green);

padding-bottom: 1px;

transition: var(--transition);

white-space: nowrap;


}

.text-link:hover {
color: var(--green);
}

/* ============================================================
GRID DE MÍDIA
============================================================ */

.media-grid {
display: grid;


grid-template-columns:
    repeat(3, 1fr);

grid-auto-rows: 280px;

gap: 18px;


}

/* ============================================================
CARD DE MÍDIA
============================================================ */

.media-card {
position: relative;


border-radius: var(--radius-md);

overflow: hidden;

background: #eef4ef;

box-shadow: var(--shadow-sm);

transition: var(--transition);

display: flex;

flex-direction: column;

min-width: 0;


}

.media-card:hover {
box-shadow: var(--shadow);


transform: translateY(-2px);


}

/* PRIMEIRO ITEM EM DESTAQUE */

.media-card:first-child {
grid-column: span 2;


grid-row: span 2;


}

/* ============================================================
IMAGENS DA GALERIA
============================================================ */

.media-card img {
display: block;


width: 100%;

height: 100%;

min-height: 0;

object-fit: contain;

object-position: center;

background: #eef4ef;

flex: 1;


}

/* ============================================================
VÍDEOS DA GALERIA
============================================================ */

.media-card video {
display: block;


width: 100%;

height: 100%;

min-height: 0;

object-fit: contain;

object-position: center;

background: #071f14;

flex: 1;


}

/* ============================================================
LEGENDA DA MÍDIA
============================================================ */

.media-card > div {
flex-shrink: 0;


padding: 12px 16px;

font-size: 13.5px;

font-weight: 600;

color: var(--ink);

border-top:
    1px solid
    var(--line);

background: #fff;


}

/* ============================================================
MÍDIA VAZIA
============================================================ */

.empty-media {
grid-column: 1 / -1;


padding: 60px 40px;

text-align: center;

border:
    2px dashed
    var(--line);

border-radius: var(--radius-lg);

color: var(--muted);

font-size: 15px;


}

/* ============================================================
INSTAGRAM
============================================================ */

.instagram {
padding: 90px 0;


background: var(--surface);


}

.instagram h2 {
color: var(--ink);
}

.insta-grid {
display: grid;


grid-template-columns:
    repeat(3, 1fr);

gap: 18px;


}

.instagram-media {
margin: 0 !important;


width: 100% !important;

min-width: 0 !important;

border-radius: var(--radius-md);

overflow: hidden;


}

.insta-placeholder {
grid-column: 1 / -1;


padding: 56px 48px;

border-radius: var(--radius-lg);

background: #fff;

display: flex;

align-items: center;

gap: 20px;

flex-wrap: wrap;

box-shadow: var(--shadow-sm);

border:
    1px solid
    var(--line);


}

.insta-placeholder b {
font-size: 18px;


display: block;

margin-bottom: 6px;


}

.insta-placeholder span {
color: var(--muted);


flex: 1;

min-width: 200px;

font-size: 15px;


}

/* ============================================================
LOCALIZAÇÃO
============================================================ */

.location {
padding: 100px 0;


display: grid;

grid-template-columns:
    .85fr
    1.15fr;

gap: 60px;

align-items: center;


}

.location-copy h2 {
margin-top: 8px;
}

.location-copy p {
margin-bottom: 28px;
}

.map {
height: 420px;


border-radius: var(--radius-xl);

overflow: hidden;

box-shadow: var(--shadow);

border:
    1px solid
    var(--line);


}

.map iframe {
width: 100%;
height: 100%;


border: 0;


}

.map.tall {
height: 520px;
}

/* ============================================================
PÁGINAS INTERNAS
============================================================ */

.page-hero {
padding: 160px 0 90px;


background:
    linear-gradient(
        130deg,
        #edf8eb 0%,
        #d5f0cf 100%
    );


}

.page-hero h1 {
font-size:
clamp(42px, 6.5vw, 78px);


max-width: 680px;


}

.page-hero p {
font-size: 18px;


max-width: 520px;


}

.content {
padding: 90px 0;
}

.two-col {
display: grid;


grid-template-columns:
    1fr
    1fr;

gap: 80px;

align-items: start;


}

/* ============================================================
VALORES
============================================================ */

.values {
background: var(--green-deep);


color: #fff;

padding: 90px 0;


}

.values h2 {
color: #fff;
}

.values .eyebrow {
color: #9ce48e;
}

.values-grid {
display: grid;


grid-template-columns:
    repeat(5, 1fr);

gap: 14px;

margin-top: 40px;


}

.values-grid div {
padding: 24px 20px;


border:
    1px solid
    rgba(255, 255, 255, .12);

border-radius: var(--radius-md);

background:
    rgba(255, 255, 255, .04);

transition: var(--transition);


}

.values-grid div:hover {
background:
rgba(255, 255, 255, .08);
}

.values-grid b {
display: block;


font-size: 15px;

margin-bottom: 6px;


}

.values-grid span {
display: block;


color: #a8c8b6;

font-size: 13.5px;

line-height: 1.5;


}

/* ============================================================
COMPLIANCE
============================================================ */

.compliance-list {
margin-top: 8px;
}

.compliance-list article {
display: flex;


gap: 22px;

padding: 28px 0;

border-bottom:
    1px solid
    var(--line);

align-items: flex-start;

transition: var(--transition);


}

.compliance-list article:last-child {
border-bottom: 0;
}

.compliance-list article > b {
color: var(--green);


font-size: 28px;

font-weight: 900;

line-height: 1;

min-width: 42px;

margin-top: 2px;


}

.compliance-list h3 {
margin: 0 0 4px;


font-size: 18px;


}

.compliance-list p {
margin: 0;


font-size: 15.5px;


}

/* ============================================================
CONTATOS
============================================================ */

.contact {
padding: 90px 0;


display: grid;

grid-template-columns:
    .85fr
    1.15fr;

gap: 60px;

align-items: start;


}

.contact-info {
display: grid;


gap: 22px;


}

.contact-info > div {
padding: 20px;


border-radius: var(--radius-md);

border:
    1px solid
    var(--line);

background: var(--surface);


}

.contact-info span,
.contact-info strong {
display: block;
}

.contact-info span {
color: var(--green-dark);


font-size: 11px;

text-transform: uppercase;

letter-spacing: 1.5px;

font-weight: 800;

margin-bottom: 4px;


}

.contact-info strong {
font-size: 16px;


color: var(--ink);

word-break: break-word;


}

/* ============================================================
VAGAS
============================================================ */

.vagas-grid {
display: grid;


gap: 18px;

margin-top: 16px;


}

.vaga-card {
background: #fff;


border:
    1px solid
    var(--line);

border-radius: var(--radius-lg);

padding: 32px 30px;

box-shadow: var(--shadow-sm);

transition: var(--transition);

display: flex;

flex-direction: column;

gap: 14px;


}

.vaga-card:hover {
box-shadow: var(--shadow);


transform: translateY(-3px);

border-color: #b5ddb0;


}

.vaga-icon {
font-size: 28px;


line-height: 1;


}

.vaga-card h3 {
font-size: 22px;


font-weight: 800;

color: var(--ink);

margin: 0;

letter-spacing: -.3px;


}

.vaga-localidade {
display: flex;


align-items: center;

gap: 6px;

font-size: 14px;

font-weight: 700;

color: var(--green-dark);


}

.vaga-descricao {
font-size: 15px;


color: var(--muted);

line-height: 1.7;

white-space: pre-line;


}

.vaga-pcd {
display: inline-flex;


align-items: center;

gap: 6px;

padding: 6px 14px;

border-radius: 999px;

background: var(--mint);

color: var(--green-dark);

font-size: 13px;

font-weight: 800;

width: fit-content;


}

.vaga-data {
display: block;


font-size: 12px;

color: #93a89c;

letter-spacing: .3px;


}

.vaga-actions {
margin-top: 4px;
}

/* ============================================================
MODAL CANDIDATURA
============================================================ */

.modal-candidatura {
position: fixed;


inset: 0;

z-index: 99999;

display: none;

align-items: center;

justify-content: center;

padding: 24px;


}

.modal-candidatura.is-open {
display: flex !important;
}

.modal-candidatura-overlay {
position: absolute;


inset: 0;

background:
    rgba(7, 31, 20, .78);

backdrop-filter: blur(5px);

-webkit-backdrop-filter: blur(5px);


}

.modal-candidatura-content {
position: relative;


z-index: 2;

width:
    min(560px, 100%);

max-height:
    calc(100vh - 48px);

overflow-y: auto;

background: var(--white);

border:
    1px solid
    var(--line);

border-radius: var(--radius-lg);

padding: 38px 40px 40px;

box-shadow: var(--shadow-lg);

animation:
    candidatura-modal-in
    .22s
    ease-out;


}

@keyframes candidatura-modal-in {


from {
    opacity: 0;

    transform:
        translateY(15px)
        scale(.97);
}

to {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


}

.modal-candidatura-close {
position: absolute;


top: 14px;
right: 16px;

width: 38px;
height: 38px;

display: flex;

align-items: center;
justify-content: center;

padding: 0;

border: 0;

border-radius: 50%;

background: var(--surface);

color: var(--green-deep);

font-size: 26px;

line-height: 1;

cursor: pointer;

transition: var(--transition);


}

.modal-candidatura-close:hover {
background: var(--green-dark);


color: #fff;

transform: rotate(90deg);


}

.modal-candidatura .eyebrow {
margin-bottom: 8px;
}

.modal-candidatura-content h2 {
margin:
4px
45px
8px
0;


color: var(--green-deep);

font-size:
    clamp(30px, 5vw, 42px);

line-height: 1.05;

letter-spacing: -1.8px;


}

.candidatura-vaga {
margin: 0 0 28px;


color: var(--muted);

font-size: 15px;


}

.candidatura-vaga strong {
color: var(--green-dark);


font-weight: 800;


}

#form-candidatura {
display: grid;


gap: 18px;


}

#form-candidatura .form-group {
display: grid;


gap: 7px;

margin: 0;


}

#form-candidatura .form-group label {
margin: 0;


color: var(--ink);

font-size: 13px;

font-weight: 750;


}

#form-candidatura .form-group input {
width: 100%;


min-height: 48px;

padding: 11px 14px;

border:
    1px solid
    var(--line);

border-radius: var(--radius-sm);

background: #fff;

color: var(--ink);

font: inherit;

font-size: 15px;

transition: var(--transition);


}

#form-candidatura .form-group input:hover {
border-color: #b5d5ba;
}

#form-candidatura .form-group input:focus {
outline: none;


border-color: var(--green);

box-shadow:
    0 0 0 3px
    rgba(63, 168, 50, .13);


}

#form-candidatura input[type="file"] {
padding: 9px 10px;


cursor: pointer;


}

#form-candidatura input[type="file"]::file-selector-button {
margin-right: 10px;


padding: 8px 13px;

border: 0;

border-radius: 8px;

background: var(--mint);

color: var(--green-dark);

font-weight: 700;

cursor: pointer;


}

#form-candidatura .form-group small {
display: block;


margin: 0;

color: #7b8b82;

font-size: 12px;

line-height: 1.4;


}

.btn-enviar-candidatura {
width: 100%;


min-height: 50px;

margin-top: 4px;

border: 0;

border-radius: 999px;

background: var(--green);

color: #fff;

font-size: 15px;

font-weight: 800;

cursor: pointer;

box-shadow:
    0 8px 22px
    rgba(63, 168, 50, .28);

transition: var(--transition);


}

.btn-enviar-candidatura:hover {
background: var(--green-dark);


transform: translateY(-2px);

box-shadow:
    0 12px 30px
    rgba(35, 122, 54, .30);


}

.btn-enviar-candidatura:active {
transform: translateY(0);
}

.btn-enviar-candidatura:disabled {
opacity: .65;


cursor: wait;

transform: none;


}

.candidatura-status {
margin: 0;


padding: 12px 14px;

border-radius: var(--radius-sm);

font-size: 14px;

line-height: 1.45;


}

.candidatura-status.success {
background: var(--mint);


border:
    1px solid
    #b9dfb3;

color: var(--green-dark);


}

.candidatura-status.error {
background: #fff0f0;


border:
    1px solid
    #f2c8c8;

color: #a12626;


}

/* ============================================================
RODAPÉ
============================================================ */

footer {
background: #071f14;


color: #fff;

padding: 72px 0 0;


}

.footer-grid {
display: grid;


grid-template-columns:
    2fr
    1fr
    1fr
    1.4fr;

gap: 48px;

padding-bottom: 56px;


}

.footer-brand {
margin-bottom: 16px;
}

.footer-brand img {
height: 42px;


width: auto;

object-fit: contain;

display: block;


}

.footer-grid p {
color: #8ea89a;


font-size: 14.5px;

line-height: 1.7;


}

.footer-grid h4 {
margin: 0 0 18px;


font-size: 13px;

text-transform: uppercase;

letter-spacing: 1.5px;

color:
    rgba(255, 255, 255, .45);

font-weight: 700;


}

.footer-grid a {
display: block;


color: #9bbdac;

margin: 9px 0;

font-size: 14.5px;

transition: var(--transition);


}

.footer-grid a:hover {
color: var(--green);


transform:
    translateX(2px);


}

.copyright {
text-align: center;


border-top:
    1px solid
    rgba(255, 255, 255, .07);

padding: 22px;

color: #4e6659;

font-size: 13px;


}

/* ============================================================
ADMIN — LOGIN
============================================================ */

.admin-body {
background: var(--surface);


min-height: 100vh;


}

.login-card {
width:
min(420px, 92%);


margin: 7vh auto 40px;

background: #fff;

padding: 40px 36px;

border-radius: var(--radius-xl);

box-shadow: var(--shadow);

border:
    1px solid
    var(--line);


}

.login-card .brand {
margin-bottom: 24px;
}

.login-card h1 {
font-size: 30px;


letter-spacing: -1px;

margin: 0 0 24px;

font-weight: 800;


}

.login-card form {
display: grid;


gap: 16px;


}

.login-card a {
display: block;


text-align: center;

margin-top: 20px;

font-size: 13.5px;

color: var(--muted);

transition: var(--transition);


}

.login-card a:hover {
color: var(--green-dark);
}

.alert {
background: #fff0f0;


color: #9d2929;

padding: 13px 15px;

border-radius: var(--radius-sm);

font-size: 14px;

border:
    1px solid
    #f5d0d0;

margin-bottom: 8px;


}

/* ============================================================
ADMIN — PAINEL
============================================================ */

.admin-shell {
min-height: 100vh;
}

.admin-top {
height: 68px;


background: #fff;

border-bottom:
    1px solid
    var(--line);

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 5%;

position: sticky;

top: 0;

z-index: 50;

box-shadow: var(--shadow-sm);


}

.admin-top .brand-mark {
width: 40px;


height: 40px;

border-radius: 12px;


}

.admin-top > div:last-child {
display: flex;


gap: 16px;

align-items: center;


}

.inline {
display: inline;
}

.inline button,
.admin-top a {
border: 0;


background: none;

font: inherit;

color: var(--green-dark);

cursor: pointer;

font-weight: 700;

font-size: 14px;

padding: 6px 10px;

border-radius: 8px;

transition: var(--transition);


}

.inline button:hover,
.admin-top a:hover {
background: var(--mint);
}

.admin-main {
width:
min(1200px, 92%);


margin: 44px auto 60px;


}

.admin-title {
margin-bottom: 28px;
}

.admin-title h1 {
font-size: 42px;


letter-spacing: -2px;

margin: 6px 0 0;


}

.admin-grid {
display: grid;


grid-template-columns:
    repeat(3, 1fr);

gap: 16px;

margin-bottom: 16px;


}

.admin-card {
background: #fff;


border:
    1px solid
    var(--line);

border-radius: var(--radius-lg);

padding: 24px;

margin-bottom: 16px;


}

.admin-card:last-child {
margin-bottom: 0;
}

.admin-card h2 {
font-size: 20px;


letter-spacing: -.5px;

margin: 0 0 18px;

padding-bottom: 14px;

border-bottom:
    1px solid
    var(--line);


}

.admin-card form {
display: grid;


gap: 12px;


}

.admin-card label,
.login-card label {
display: grid;


gap: 6px;

font-weight: 700;

font-size: 13px;

color: var(--ink);


}

.admin-card input,
.admin-card select,
.admin-card textarea,
.login-card input {
border:
1px solid
var(--line);


padding: 11px 13px;

border-radius: var(--radius-sm);

font: inherit;

font-size: 14px;

width: 100%;

color: var(--ink);

background: #fff;

transition: var(--transition);


}

.admin-card input:focus,
.admin-card select:focus,
.admin-card textarea:focus,
.login-card input:focus {
outline:
2px solid
var(--green);


outline-offset: 1px;

border-color: transparent;


}

.admin-card textarea {
min-height: 110px;


resize: vertical;


}

.hint {
font-size: 12.5px;


color: var(--muted);

margin: 0;

line-height: 1.5;


}

/* ============================================================
ADMIN — LISTA
============================================================ */

.admin-list {
display: grid;


gap: 8px;


}

.admin-item {
display: grid;


grid-template-columns:
    80px
    1fr
    auto;

gap: 14px;

align-items: center;

padding: 10px;

border:
    1px solid
    var(--line);

border-radius: var(--radius-sm);

background: var(--surface);

transition: var(--transition);


}

.admin-item:hover {
border-color: #b5ddb0;
}

.admin-item img,
.admin-item video {
width: 80px;


height: 54px;

object-fit: cover;

border-radius: 8px;

background: var(--line);


}

.admin-item small {
display: block;


color: var(--muted);

font-size: 12px;

word-break: break-all;

margin-top: 2px;


}

.admin-item b {
font-size: 14px;


display: block;


}

.admin-item.simple {
grid-template-columns:
1fr
auto;
}

.danger {
background: #fff5f5;


color: #c0392b;

border:
    1px solid
    #f5c6c6;

padding: 7px 12px;

border-radius: 8px;

cursor: pointer;

font-size: 13px;

font-weight: 700;

transition: var(--transition);

white-space: nowrap;


}

.danger:hover {
background: #fde8e8;


border-color: #e8a8a8;


}

/* ============================================================
RESPONSIVO — BIOENERGIA
============================================================ */

@media (max-width: 960px) {


.bioenergia-section-intro,
.bioenergia-process-top {
    grid-template-columns: 1fr;

    gap: 25px;
}

.bioenergia-metrics-grid {
    grid-template-columns:
        1fr
        1fr;
}

.bioenergia-metric:nth-child(2) {
    border-right: 0;
}

.bioenergia-metric:nth-child(-n+2) {
    border-bottom:
        1px solid
        var(--line);
}

.bioenergia-about-grid {
    grid-template-columns: 1fr;

    gap: 60px;
}

.bioenergia-about-visual {
    max-width: 760px;
}

.bioenergia-sustainability-grid {
    grid-template-columns: 1fr;

    gap: 45px;
}

.bioenergia-final-box {
    align-items: flex-start;

    flex-direction: column;
}


}

/* ============================================================
RESPONSIVO — TABLET / MOBILE NAV
============================================================ */

@media (max-width: 860px) {


nav {
    display: none;

    position: absolute;

    top: 68px;

    left: 0;
    right: 0;

    padding: 16px 5%;

    background: var(--green-deep);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .25);

    flex-direction: column;

    align-items: stretch;

    gap: 4px;
}

nav > a {
    padding: 11px 14px;

    border-radius: 10px;
}

nav .nav-pill,
nav .team-button {
    border-radius: 10px;

    text-align: center;

    justify-content: center;
}

.menu {
    display: block;
}

.menu-open nav {
    display: flex;
}

.hero {
    min-height: 92svh;
}

.intro,
.two-col,
.location,
.contact {
    grid-template-columns: 1fr;

    gap: 32px;
}

.cards,
.insta-grid,
.admin-grid {
    grid-template-columns: 1fr;
}


/* --------------------------------------------------------
   MÍDIA — TABLET
   -------------------------------------------------------- */

.media-grid {
    grid-template-columns:
        1fr
        1fr;

    grid-auto-rows: 260px;

    gap: 16px;
}

.media-card:first-child {
    grid-column: span 2;

    grid-row: span 2;
}

.media-card img,
.media-card video {
    object-fit: contain;
}


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

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

.page-hero {
    padding-top: 130px;

    padding-bottom: 70px;
}

.admin-item {
    grid-template-columns:
        70px
        1fr;
}

.admin-item form {
    grid-column: 1 / -1;
}

.admin-item img,
.admin-item video {
    width: 70px;

    height: 48px;
}

.section-head {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.map.tall {
    height: 380px;
}


}

/* ============================================================
RESPONSIVO — BIOENERGIA MOBILE
============================================================ */

@media (max-width: 680px) {


.bioenergia-hero {
    min-height: 100svh;

    align-items: flex-end;
}

.bioenergia-hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7, 31, 20, .28) 0%,
            rgba(7, 31, 20, .60) 38%,
            rgba(7, 31, 20, .92) 100%
        );
}

.bioenergia-hero-content {
    padding-top: 130px;

    padding-bottom: 115px;
}

.bioenergia-hero h1 {
    font-size:
        clamp(45px, 13vw, 68px);

    letter-spacing: -3px;
}

.bioenergia-hero p {
    font-size: 16px;

    line-height: 1.6;
}

.bioenergia-hero-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
}

.bioenergia-hero-bottom {
    bottom: 20px;

    font-size: 8px;

    letter-spacing: 1.2px;
}

.bioenergia-metrics,
.bioenergia-about,
.bioenergia-process,
.bioenergia-sustainability {
    padding: 80px 0;
}

.bioenergia-metrics-grid {
    grid-template-columns: 1fr;
}

.bioenergia-metric {
    min-height: 250px;

    border-right: 0;

    border-bottom:
        1px solid
        var(--line);
}

.bioenergia-metric:last-child {
    border-bottom: 0;
}

.bioenergia-about-copy h2,
.bioenergia-process-top h2,
.bioenergia-sustainability h2,
.bioenergia-final-box h2 {
    letter-spacing: -2px;
}

.bioenergia-about-visual {
    padding-left: 0;

    padding-bottom: 30px;
}

.bioenergia-about-image {
    height: 430px;

    border-radius: 22px;
}

.bioenergia-about-caption {
    left: 15px;

    bottom: 0;

    width:
        calc(100% - 30px);
}

.bioenergia-process-item {
    grid-template-columns:
        50px
        1fr;

    gap: 18px;

    align-items: start;
}

.bioenergia-process-arrow {
    display: none;
}

.bioenergia-process-content h3 {
    font-size: 22px;
}

.bioenergia-substation {
    min-height: 620px;
}

.bioenergia-substation-content h2 {
    font-size:
        clamp(44px, 13vw, 64px);

    letter-spacing: -3px;
}

.bioenergia-sustainability-points {
    grid-template-columns: 1fr;
}

.bioenergia-final {
    padding: 75px 0;
}

.bioenergia-final-actions {
    width: 100%;

    flex-direction: column;
}

.bioenergia-final-actions .btn {
    width: 100%;
}


/* --------------------------------------------------------
   MÍDIA — CELULAR
   -------------------------------------------------------- */

.media-section {
    padding: 80px 0;
}

.media-grid {
    grid-template-columns: 1fr;

    grid-auto-rows: auto;

    gap: 16px;
}

.media-card:first-child {
    grid-column: span 1;

    grid-row: span 1;
}

.media-card {
    min-height: 280px;
}

.media-card img,
.media-card video {
    width: 100%;

    height: auto;

    min-height: 260px;

    max-height: 500px;

    object-fit: contain;
}

.media-card > div {
    padding: 11px 14px;

    font-size: 13px;
}


}

/* ============================================================
RESPONSIVO — CELULAR PEQUENO
============================================================ */

@media (max-width: 540px) {


h1 {
    letter-spacing: -2px;
}

h2 {
    letter-spacing: -1.2px;
}

.hero-actions {
    flex-direction: column;
}

.hero-actions .btn {
    width: 100%;

    justify-content: center;
}

.values-grid,
.footer-grid {
    grid-template-columns: 1fr;
}

.brand img {
    height: 42px;
}

.footer-brand img {
    height: 38px;
}

.vaga-card {
    padding: 24px 20px;
}

.vaga-card h3 {
    font-size: 19px;
}

.contact-info > div {
    padding: 16px;
}

.insta-placeholder {
    padding: 36px 24px;
}

.login-card {
    padding: 32px 24px;
}

.admin-main {
    margin-top: 28px;
}

.admin-title h1 {
    font-size: 32px;
}

.admin-card {
    padding: 18px;
}


/* --------------------------------------------------------
   MODAL
   -------------------------------------------------------- */

.modal-candidatura {
    padding: 12px;

    align-items: flex-end;
}

.modal-candidatura-content {
    width: 100%;

    max-height:
        calc(100vh - 24px);

    padding:
        32px
        22px
        24px;

    border-radius:
        20px
        20px
        14px
        14px;
}

.modal-candidatura-content h2 {
    font-size: 30px;

    letter-spacing: -1.2px;

    margin-right: 35px;
}

.modal-candidatura-close {
    top: 10px;

    right: 10px;
}

#form-candidatura {
    gap: 16px;
}


/* --------------------------------------------------------
   BIOENERGIA MOBILE PEQUENO
   -------------------------------------------------------- */

.bioenergia-hero-content {
    padding-top: 115px;

    padding-bottom: 105px;
}

.bioenergia-hero h1 {
    font-size: 43px;

    letter-spacing: -2.5px;
}

.bioenergia-hero-eyebrow {
    font-size: 10px;

    letter-spacing: 2px;
}

.bioenergia-hero p {
    font-size: 15px;

    line-height: 1.65;
}

.bioenergia-metric-number {
    font-size: 62px;
}

.bioenergia-about-image {
    height: 390px;
}

.bioenergia-process {
    padding-top: 70px;

    padding-bottom: 70px;
}

.bioenergia-substation {
    min-height: 570px;
}

.bioenergia-substation-content h2 {
    font-size: 42px;

    letter-spacing: -2.5px;
}

.bioenergia-sustainability {
    padding-top: 70px;

    padding-bottom: 70px;
}

.bioenergia-final-box h2 {
    font-size: 42px;

    letter-spacing: -2px;
}


/* --------------------------------------------------------
   MÍDIA — CELULAR PEQUENO
   -------------------------------------------------------- */

.media-section {
    padding: 70px 0;
}

.media-card {
    min-height: 240px;

    border-radius: var(--radius-md);
}

.media-card img,
.media-card video {
    min-height: 220px;

    max-height: 420px;

    object-fit: contain;
}


}

/* ============================================================
REDUÇÃO DE MOVIMENTO
============================================================ */

@media (prefers-reduced-motion: reduce) {


html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
}


}