/* ==========================================================================
   Green House — style.css
   Fontes · Tokens · Base · Bordas · Botões · Cores · Tipografia utilitária
   ========================================================================== */

/* Fontes — auto-hospedadas */
/* Didot — títulos em serifa (destaques em itálico) */
@font-face { font-family: 'Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Didot/Didot.woff2') format('woff2'), url('../fonts/Didot/Didot.woff') format('woff'); }
@font-face { font-family: 'Didot'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Didot/Didot-Italic.woff2') format('woff2'), url('../fonts/Didot/Didot-Italic.woff') format('woff'); }
@font-face { font-family: 'Didot'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Didot/Didot-Bold.woff2') format('woff2'), url('../fonts/Didot/Didot-Bold.woff') format('woff'); }
@font-face { font-family: 'Didot Title'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Didot/DidotTitle.woff2') format('woff2'), url('../fonts/Didot/DidotTitle.woff') format('woff'); }

/* Definições — Paleta Green House (Figma: Color/Cream, Color/Ink + tons do layout) */
:root {

    /* Base */
    --cream: #F1F0E8;      /* Color/Cream — texto claro / fundos claros */
    --ink: #111210;        /* Color/Ink — fundo escuro principal / texto escuro */

    /* Greens (fundos escuros) */
    --green-950: #131712;  /* footer */
    --green-900: #24291E;  /* contato */

    /* Olive / Sage (destaques e textos secundários) */
    --olive-500: #858466;  /* rótulos "02 / Who we are" */
    --sage-400: #A6AD8A;   /* palavras em itálico (GROW., Green House.) */
    --sage-300: #AEB4A0;   /* bordas dos campos */
    --sage-200: #C5CABB;   /* parágrafos sobre fundo escuro */
    --sage-500: #9BA28F;   /* placeholder */

    /* Aliases semânticos */
    --primary: var(--ink);
    --secondary: var(--sage-400);
    --color-text: var(--cream);

    /* Famílias */
    --font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --font-serif: 'Didot', 'Bodoni 72', 'Times New Roman', serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Auxiliares */
    --white: #FFFFFF;
    --black: #000000;
    --glass-bg: rgba(20, 25, 20, 0.54);
    --glass-light: rgba(241, 240, 232, 0.16);
    --glass-border: rgba(255, 255, 255, 0.38);
    --line-cream-22: rgba(241, 240, 232, 0.22);
}

:root {
    font-family: var(--font-sans);
}

* {
    outline: none;
}

body:not(.wp-admin) {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Famílias utilitárias */
.f-sans  { font-family: var(--font-sans) !important; }
.f-serif { font-family: var(--font-serif) !important; }
.f-mono  { font-family: var(--font-mono) !important; }
.italic  { font-style: italic; }

body.wp-admin,
body.home {
    padding-top: 0;
}

[class^="hover-"],
[class*=" hover-"],
a {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    color: var(--primary) !important;
}

    color: var(--white);
}

    color: var(--black);
}

.border-1, .active.active-border-1 {
    border: 1px solid transparent !important;
}

.border-2, .active.active-border-2 {
    border: 2px solid transparent !important;
}

.border-2-25, .active.active-border-2-25 {
    border: 2.25px solid transparent !important;
}

.border-1-tb {
    border: 0;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
}

.border-1-t {
    border: 0;
    border-top: 1px solid transparent !important;
}

.border-1-b {
    border: 0;
    border-bottom: 1px solid transparent !important;
}

.border-1-r {
    border: 0;
    border-right: 1px solid transparent !important;
}

.border-1-l {
    border: 0;
    border-right: 1px solid transparent !important;
}

.border-2 {
    border: 2px solid transparent !important;
}

.active.hover-border-2 {
    border: 2px solid transparent !important;
}

.border-2-b {
    border: 0;
    border-bottom: 2px solid transparent;
}

.border-2-tb {
    border: 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.border-3 {
    border: 3px solid transparent;
}

.border-8 {
    border: 8px solid transparent;
}

.border-12 {
    border: 12px solid transparent;
}

.border-14 {
    border: 14px solid transparent;
}

.border-16 {
    border: 16px solid transparent;
}

.border-20 {
    border: 20px solid transparent;
}

/****** cards home **********/

.border-customize-24 {
    border: 24px solid var(--blue-5);
}

.alinhamento .tns-slider{
    display: flex;
}

.alinhamento .item .relative img {
    object-fit: cover;
    width: 100%;
}

/***********************************/
.simple-button {
    border: 0;
    padding: 0;
    background-color: transparent;
}


.btn-many-tag {
    cursor: inherit !important;
}

.btn:focus {
    outline: 0;
    box-shadow: none;
}

.btn {
    font-style: normal;
    text-align: center;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    width: auto;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn.btn-medio {
    padding: 8px 12px;
}

.btn.btn-small {
    padding: 16px 24px;
    font-size: 18px;
}

.btn.btn-regular {
    padding: 16px 32px;
    font-size: 18px;
}

.btn.btn-larger {
    padding: 28px 32px;
    font-weight: 700;
    font-size: 24px;
}

.btn-outline {
    border: 1px solid transparent;
    background-color: transparent;
}

/* Botão com ícone inline (shortcode [botao ... icone="..."]) */
.btn-com-icone {
    gap: 8px;
}

.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-50 {
    width: 50px;
    height: 50px;
}

/* Botão com radius */
.btn-tag {
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 16px;
}

.btn-tag-tiny {
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 16px;
}

.btn-tag-small {
    border-radius: 32px;
    padding: 16px 24px;
    font-size: 18px;
}

.btn-circle-tiny,
.btn-circle-small {
    border-radius: 24px;
}

.btn-circle-regular {
    border-radius: 32px;
}

.btn-circle-big {
    border-radius: 40px;
}

/* Botão quadrado */

.btn.btn-square-small {
    padding: 8px;
    width: 40px;
    height: 40px;
}

.btn.btn-square-medium {
    padding: 12px;
    width: 48px;
    height: 48px;
}

.btn.btn-square-larger {
    padding: 16px;
    width: 56px;
    height: 56px;
}

.btn.btn-square-big {
    padding: 16px;
    width: 80px;
    height: 80px;
}

/* Botão circular */

.btn-circle {
    border-radius: 50%;
}

/************Colors**************************/
.transparent {
    color: transparent !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* cream — #F1F0E8 */
.cream { color: var(--cream) !important; }
.cream a { color: var(--cream) !important; }
.bg-cream { background-color: var(--cream) !important; }
.border-cream { border-color: var(--cream) !important; }
.hover-cream:hover, .active.hover-cream, a.hover-cream:hover * { color: var(--cream) !important; }
.hover-bg-cream:hover, .active.hover-bg-cream { background-color: var(--cream) !important; }
.hover-border-cream:hover, .active.hover-border-cream { border-color: var(--cream) !important; }
.btn-cream { color: var(--ink) !important; background-color: var(--cream) !important; }
.btn-cream:hover, .btn-cream:focus { color: var(--ink) !important; background-color: color-mix(in srgb, var(--cream) 85%, var(--ink)) !important; }
.btn-outline-cream { color: var(--cream) !important; border-color: var(--cream) !important; background-color: transparent !important; }
.btn-outline-cream:hover, .btn-outline-cream:focus { color: var(--ink) !important; border-color: var(--cream) !important; background-color: var(--cream) !important; }
.bg-opacity-cream { background-color: color-mix(in srgb, var(--cream) 20%, transparent) !important; }

/* ink — #111210 */
.ink { color: var(--ink) !important; }
.ink a { color: var(--ink) !important; }
.bg-ink { background-color: var(--ink) !important; }
.border-ink { border-color: var(--ink) !important; }
.hover-ink:hover, .active.hover-ink, a.hover-ink:hover * { color: var(--ink) !important; }
.hover-bg-ink:hover, .active.hover-bg-ink { background-color: var(--ink) !important; }
.hover-border-ink:hover, .active.hover-border-ink { border-color: var(--ink) !important; }
.btn-ink { color: var(--cream) !important; background-color: var(--ink) !important; }
.btn-ink:hover, .btn-ink:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--ink) 85%, var(--cream)) !important; }
.btn-outline-ink { color: var(--ink) !important; border-color: var(--ink) !important; background-color: transparent !important; }
.btn-outline-ink:hover, .btn-outline-ink:focus { color: var(--cream) !important; border-color: var(--ink) !important; background-color: var(--ink) !important; }
.bg-opacity-ink { background-color: color-mix(in srgb, var(--ink) 20%, transparent) !important; }

/* white — #FFFFFF */
.white { color: var(--white) !important; }
.white a { color: var(--white) !important; }
.bg-white { background-color: var(--white) !important; }
.border-white { border-color: var(--white) !important; }
.hover-white:hover, .active.hover-white, a.hover-white:hover * { color: var(--white) !important; }
.hover-bg-white:hover, .active.hover-bg-white { background-color: var(--white) !important; }
.hover-border-white:hover, .active.hover-border-white { border-color: var(--white) !important; }
.btn-white { color: var(--ink) !important; background-color: var(--white) !important; }
.btn-white:hover, .btn-white:focus { color: var(--ink) !important; background-color: color-mix(in srgb, var(--white) 85%, var(--ink)) !important; }
.btn-outline-white { color: var(--white) !important; border-color: var(--white) !important; background-color: transparent !important; }
.btn-outline-white:hover, .btn-outline-white:focus { color: var(--ink) !important; border-color: var(--white) !important; background-color: var(--white) !important; }
.bg-opacity-white { background-color: color-mix(in srgb, var(--white) 20%, transparent) !important; }

/* green-950 — #131712 */
.green-950 { color: var(--green-950) !important; }
.green-950 a { color: var(--green-950) !important; }
.bg-green-950 { background-color: var(--green-950) !important; }
.border-green-950 { border-color: var(--green-950) !important; }
.hover-green-950:hover, .active.hover-green-950, a.hover-green-950:hover * { color: var(--green-950) !important; }
.hover-bg-green-950:hover, .active.hover-bg-green-950 { background-color: var(--green-950) !important; }
.hover-border-green-950:hover, .active.hover-border-green-950 { border-color: var(--green-950) !important; }
.btn-green-950 { color: var(--cream) !important; background-color: var(--green-950) !important; }
.btn-green-950:hover, .btn-green-950:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--green-950) 85%, var(--cream)) !important; }
.btn-outline-green-950 { color: var(--green-950) !important; border-color: var(--green-950) !important; background-color: transparent !important; }
.btn-outline-green-950:hover, .btn-outline-green-950:focus { color: var(--cream) !important; border-color: var(--green-950) !important; background-color: var(--green-950) !important; }
.bg-opacity-green-950 { background-color: color-mix(in srgb, var(--green-950) 20%, transparent) !important; }

/* green-900 — #24291E */
.green-900 { color: var(--green-900) !important; }
.green-900 a { color: var(--green-900) !important; }
.bg-green-900 { background-color: var(--green-900) !important; }
.border-green-900 { border-color: var(--green-900) !important; }
.hover-green-900:hover, .active.hover-green-900, a.hover-green-900:hover * { color: var(--green-900) !important; }
.hover-bg-green-900:hover, .active.hover-bg-green-900 { background-color: var(--green-900) !important; }
.hover-border-green-900:hover, .active.hover-border-green-900 { border-color: var(--green-900) !important; }
.btn-green-900 { color: var(--cream) !important; background-color: var(--green-900) !important; }
.btn-green-900:hover, .btn-green-900:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--green-900) 85%, var(--cream)) !important; }
.btn-outline-green-900 { color: var(--green-900) !important; border-color: var(--green-900) !important; background-color: transparent !important; }
.btn-outline-green-900:hover, .btn-outline-green-900:focus { color: var(--cream) !important; border-color: var(--green-900) !important; background-color: var(--green-900) !important; }
.bg-opacity-green-900 { background-color: color-mix(in srgb, var(--green-900) 20%, transparent) !important; }

/* olive-500 — #858466 */
.olive-500 { color: var(--olive-500) !important; }
.olive-500 a { color: var(--olive-500) !important; }
.bg-olive-500 { background-color: var(--olive-500) !important; }
.border-olive-500 { border-color: var(--olive-500) !important; }
.hover-olive-500:hover, .active.hover-olive-500, a.hover-olive-500:hover * { color: var(--olive-500) !important; }
.hover-bg-olive-500:hover, .active.hover-bg-olive-500 { background-color: var(--olive-500) !important; }
.hover-border-olive-500:hover, .active.hover-border-olive-500 { border-color: var(--olive-500) !important; }
.btn-olive-500 { color: var(--cream) !important; background-color: var(--olive-500) !important; }
.btn-olive-500:hover, .btn-olive-500:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--olive-500) 85%, var(--cream)) !important; }
.btn-outline-olive-500 { color: var(--olive-500) !important; border-color: var(--olive-500) !important; background-color: transparent !important; }
.btn-outline-olive-500:hover, .btn-outline-olive-500:focus { color: var(--cream) !important; border-color: var(--olive-500) !important; background-color: var(--olive-500) !important; }
.bg-opacity-olive-500 { background-color: color-mix(in srgb, var(--olive-500) 20%, transparent) !important; }

/* sage-200 — #C5CABB */
.sage-200 { color: var(--sage-200) !important; }
.sage-200 a { color: var(--sage-200) !important; }
.bg-sage-200 { background-color: var(--sage-200) !important; }
.border-sage-200 { border-color: var(--sage-200) !important; }
.hover-sage-200:hover, .active.hover-sage-200, a.hover-sage-200:hover * { color: var(--sage-200) !important; }
.hover-bg-sage-200:hover, .active.hover-bg-sage-200 { background-color: var(--sage-200) !important; }
.hover-border-sage-200:hover, .active.hover-border-sage-200 { border-color: var(--sage-200) !important; }
.btn-sage-200 { color: var(--ink) !important; background-color: var(--sage-200) !important; }
.btn-sage-200:hover, .btn-sage-200:focus { color: var(--ink) !important; background-color: color-mix(in srgb, var(--sage-200) 85%, var(--ink)) !important; }
.btn-outline-sage-200 { color: var(--sage-200) !important; border-color: var(--sage-200) !important; background-color: transparent !important; }
.btn-outline-sage-200:hover, .btn-outline-sage-200:focus { color: var(--ink) !important; border-color: var(--sage-200) !important; background-color: var(--sage-200) !important; }
.bg-opacity-sage-200 { background-color: color-mix(in srgb, var(--sage-200) 20%, transparent) !important; }

/* sage-300 — #AEB4A0 */
.sage-300 { color: var(--sage-300) !important; }
.sage-300 a { color: var(--sage-300) !important; }
.bg-sage-300 { background-color: var(--sage-300) !important; }
.border-sage-300 { border-color: var(--sage-300) !important; }
.hover-sage-300:hover, .active.hover-sage-300, a.hover-sage-300:hover * { color: var(--sage-300) !important; }
.hover-bg-sage-300:hover, .active.hover-bg-sage-300 { background-color: var(--sage-300) !important; }
.hover-border-sage-300:hover, .active.hover-border-sage-300 { border-color: var(--sage-300) !important; }
.btn-sage-300 { color: var(--ink) !important; background-color: var(--sage-300) !important; }
.btn-sage-300:hover, .btn-sage-300:focus { color: var(--ink) !important; background-color: color-mix(in srgb, var(--sage-300) 85%, var(--ink)) !important; }
.btn-outline-sage-300 { color: var(--sage-300) !important; border-color: var(--sage-300) !important; background-color: transparent !important; }
.btn-outline-sage-300:hover, .btn-outline-sage-300:focus { color: var(--ink) !important; border-color: var(--sage-300) !important; background-color: var(--sage-300) !important; }
.bg-opacity-sage-300 { background-color: color-mix(in srgb, var(--sage-300) 20%, transparent) !important; }

/* sage-400 — #A6AD8A */
.sage-400 { color: var(--sage-400) !important; }
.sage-400 a { color: var(--sage-400) !important; }
.bg-sage-400 { background-color: var(--sage-400) !important; }
.border-sage-400 { border-color: var(--sage-400) !important; }
.hover-sage-400:hover, .active.hover-sage-400, a.hover-sage-400:hover * { color: var(--sage-400) !important; }
.hover-bg-sage-400:hover, .active.hover-bg-sage-400 { background-color: var(--sage-400) !important; }
.hover-border-sage-400:hover, .active.hover-border-sage-400 { border-color: var(--sage-400) !important; }
.btn-sage-400 { color: var(--cream) !important; background-color: var(--sage-400) !important; }
.btn-sage-400:hover, .btn-sage-400:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--sage-400) 85%, var(--cream)) !important; }
.btn-outline-sage-400 { color: var(--sage-400) !important; border-color: var(--sage-400) !important; background-color: transparent !important; }
.btn-outline-sage-400:hover, .btn-outline-sage-400:focus { color: var(--cream) !important; border-color: var(--sage-400) !important; background-color: var(--sage-400) !important; }
.bg-opacity-sage-400 { background-color: color-mix(in srgb, var(--sage-400) 20%, transparent) !important; }

/* sage-500 — #9BA28F */
.sage-500 { color: var(--sage-500) !important; }
.sage-500 a { color: var(--sage-500) !important; }
.bg-sage-500 { background-color: var(--sage-500) !important; }
.border-sage-500 { border-color: var(--sage-500) !important; }
.hover-sage-500:hover, .active.hover-sage-500, a.hover-sage-500:hover * { color: var(--sage-500) !important; }
.hover-bg-sage-500:hover, .active.hover-bg-sage-500 { background-color: var(--sage-500) !important; }
.hover-border-sage-500:hover, .active.hover-border-sage-500 { border-color: var(--sage-500) !important; }
.btn-sage-500 { color: var(--cream) !important; background-color: var(--sage-500) !important; }
.btn-sage-500:hover, .btn-sage-500:focus { color: var(--cream) !important; background-color: color-mix(in srgb, var(--sage-500) 85%, var(--cream)) !important; }
.btn-outline-sage-500 { color: var(--sage-500) !important; border-color: var(--sage-500) !important; background-color: transparent !important; }
.btn-outline-sage-500:hover, .btn-outline-sage-500:focus { color: var(--cream) !important; border-color: var(--sage-500) !important; background-color: var(--sage-500) !important; }
.bg-opacity-sage-500 { background-color: color-mix(in srgb, var(--sage-500) 20%, transparent) !important; }

/************Fim Colors**************************/

.line-first::first-line {
    line-height: 1;
}

.line-height-18 {
    line-height: 18px;
}

.line-height-24 {
    line-height: 24px;
}

.line-height-94 {
    line-height: 94%;
}

.line-height-100,
.line-height-100 p {
    line-height: 100%;
}

.line-height-105,
.line-height-105 p {
    line-height: 105%;
}

.line-height-110,
.line-height-110 p {
    line-height: 110%;
}

.line-height-120,
.line-height-120 p {
    line-height: 120%;
}

.line-height-130,
.line-height-130 p {
    line-height: 130%;
}

.line-height-140,
.line-height-140 p {
    line-height: 140%;
}

.line-height-150,
.line-height-150 p {
    line-height: 150%;
}

.line-height-160,
.line-height-160 p {
    line-height: 160% !important;
}

.line-height-180,
.line-height-180 p {
    line-height: 180%;
}

.letter-space-02 {
    letter-spacing: .2px;
}

.letter-space-04 {
    letter-spacing: .4px;
}

.letter-space-042 {
    letter-spacing: .42px;
}

.letter-space-05 {
    letter-spacing: .5px;
}

.letter-space-08 {
    letter-spacing: .8px;
}

.letter-space-0 {
    letter-spacing: 0;
}

.letter-space-1 {
    letter-spacing: 1px;
}

.letter-space-1-5 {
    letter-spacing: 1.5px;
}

.letter-space-2 {
    letter-spacing: 2px;
}

.letter-space-3 {
    letter-spacing: 3px;
}

.letter-space-4 {
    letter-spacing: 4px;
}

.letter-space-8 {
    letter-spacing: 8px;
}

.letter-space-menus-02 {
    letter-spacing: -0.2px;
}

.letter-space-menus-05 {
    letter-spacing: -0.5px;
}

.letter-space-menus-032 {
    letter-spacing: -0.32px;
}

.letter-space-menus-1-12 {
    letter-spacing: -1.12px;
}

.semibold {
    font-weight: 600 !important;
}

