/* ============================================
   SANTRIM STUDIO — CSS UNIVERSAL
   v3.0 — Marco 2026

   Carregado automaticamente pelo plugin.
   Atualiza junto com o plugin, sem wizard.
   ============================================ */


/* ============================================
   1. RESET E NORMALIZACAO
   ============================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
ul, ol, dl, dd {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

ul, ol {
    list-style: none;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
    color: inherit;
    text-decoration-skip-ink: auto;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

[data-elementor-type="wp-page"] {
    overflow: hidden;
}


/* ============================================
   2. TIPOGRAFIA RESPONSIVA
   Escala modular: 1.2 (mobile) -> 1.25 (desktop)

   Uso:
     t-xl       -> em qualquer widget de texto
     t-xl d-s   -> titulo xl, descricao s (widgets compostos)
   ============================================ */

/* --- Custom properties (escala) --- */
:root {
    --t-hero: clamp(2.5rem, 1.25rem + 3.9vw, 4.5rem);    /* 40px -> 72px */
    --t-xxl: clamp(2.063rem, 1.25rem + 2.5vw, 3.5rem);   /* 33px -> 56px */
    --t-xl:  clamp(1.75rem, 1.125rem + 1.95vw, 2.75rem);  /* 28px -> 44px */
    --t-l:   clamp(1.5rem, 1.063rem + 1.35vw, 2.25rem);   /* 24px -> 36px */
    --t-m:   clamp(1.25rem, 1rem + 0.75vw, 1.75rem);      /* 20px -> 28px */
    --t-s:   clamp(1.125rem, 1.025rem + 0.3vw, 1.375rem); /* 18px -> 22px */
    --t-base: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);    /* 16px -> 18px */
    --t-xs:  clamp(0.875rem, 0.84rem + 0.1vw, 1rem);      /* 14px -> 16px */

    --lh-hero: 1.05;
    --lh-xxl: 1.1;
    --lh-xl: 1.15;
    --lh-l: 1.2;
    --lh-m: 1.3;
    --lh-s: 1.4;
    --lh-base: 1.6;
    --lh-xs: 1.5;
}

/* --- Classes standalone (funciona em qualquer elemento) --- */
.t-hero {
    font-size: var(--t-hero) !important;
    line-height: var(--lh-hero);
    text-wrap: balance;
}
.t-xxl  { font-size: var(--t-xxl) !important;  line-height: var(--lh-xxl); }
.t-xl   { font-size: var(--t-xl) !important;   line-height: var(--lh-xl); }
.t-l    { font-size: var(--t-l) !important;    line-height: var(--lh-l); }
.t-m    { font-size: var(--t-m) !important;    line-height: var(--lh-m); }
.t-s    { font-size: var(--t-s) !important;    line-height: var(--lh-s); }
.t-base { font-size: var(--t-base) !important; line-height: var(--lh-base); }
.t-xs   { font-size: var(--t-xs) !important;   line-height: var(--lh-xs); }

/* --- t- em widgets compostos (titulo) --- */
.t-hero .elementor-icon-box-title,
.t-hero .elementor-image-box-title,
.t-hero .elementor-counter-title,
.t-hero .elementor-heading-title,
.t-hero .elementor-cta__title {
    font-size: var(--t-hero) !important;
    line-height: var(--lh-hero);
    text-wrap: balance;
}

.t-xxl .elementor-icon-box-title,
.t-xxl .elementor-image-box-title,
.t-xxl .elementor-counter-title,
.t-xxl .elementor-heading-title,
.t-xxl .elementor-cta__title { font-size: var(--t-xxl) !important; line-height: var(--lh-xxl); }

.t-xl .elementor-icon-box-title,
.t-xl .elementor-image-box-title,
.t-xl .elementor-counter-title,
.t-xl .elementor-heading-title,
.t-xl .elementor-cta__title { font-size: var(--t-xl) !important; line-height: var(--lh-xl); }

.t-l .elementor-icon-box-title,
.t-l .elementor-image-box-title,
.t-l .elementor-counter-title,
.t-l .elementor-heading-title,
.t-l .elementor-cta__title { font-size: var(--t-l) !important; line-height: var(--lh-l); }

.t-m .elementor-icon-box-title,
.t-m .elementor-image-box-title,
.t-m .elementor-counter-title,
.t-m .elementor-heading-title,
.t-m .elementor-cta__title { font-size: var(--t-m) !important; line-height: var(--lh-m); }

.t-s .elementor-icon-box-title,
.t-s .elementor-image-box-title,
.t-s .elementor-counter-title,
.t-s .elementor-heading-title,
.t-s .elementor-cta__title { font-size: var(--t-s) !important; line-height: var(--lh-s); }

.t-base .elementor-icon-box-title,
.t-base .elementor-image-box-title,
.t-base .elementor-counter-title,
.t-base .elementor-heading-title,
.t-base .elementor-cta__title { font-size: var(--t-base) !important; line-height: var(--lh-base); }

.t-xs .elementor-icon-box-title,
.t-xs .elementor-image-box-title,
.t-xs .elementor-counter-title,
.t-xs .elementor-heading-title,
.t-xs .elementor-cta__title { font-size: var(--t-xs) !important; line-height: var(--lh-xs); }

/* --- d- em widgets compostos (descricao) --- */
.d-hero .elementor-icon-box-description,
.d-hero .elementor-image-box-description,
.d-hero .elementor-cta__description { font-size: var(--t-hero) !important; line-height: var(--lh-hero); }

.d-xxl .elementor-icon-box-description,
.d-xxl .elementor-image-box-description,
.d-xxl .elementor-cta__description { font-size: var(--t-xxl) !important; line-height: var(--lh-xxl); }

.d-xl .elementor-icon-box-description,
.d-xl .elementor-image-box-description,
.d-xl .elementor-cta__description { font-size: var(--t-xl) !important; line-height: var(--lh-xl); }

.d-l .elementor-icon-box-description,
.d-l .elementor-image-box-description,
.d-l .elementor-cta__description { font-size: var(--t-l) !important; line-height: var(--lh-l); }

.d-m .elementor-icon-box-description,
.d-m .elementor-image-box-description,
.d-m .elementor-cta__description { font-size: var(--t-m) !important; line-height: var(--lh-m); }

.d-s .elementor-icon-box-description,
.d-s .elementor-image-box-description,
.d-s .elementor-cta__description { font-size: var(--t-s) !important; line-height: var(--lh-s); }

.d-base .elementor-icon-box-description,
.d-base .elementor-image-box-description,
.d-base .elementor-cta__description { font-size: var(--t-base) !important; line-height: var(--lh-base); }

.d-xs .elementor-icon-box-description,
.d-xs .elementor-image-box-description,
.d-xs .elementor-cta__description { font-size: var(--t-xs) !important; line-height: var(--lh-xs); }


/* ============================================
   3. VARIAVEIS CSS
   ============================================ */

:root {
    --padding-lateral-mobile: 1.25rem;
    --padding-lateral-desktop: 5rem;
    --section-offset-header: 80px;
}


/* ============================================
   4. ESPACAMENTO (9 classes, todas com clamp)
   ============================================ */

.section-xxl {
    padding-top: clamp(7.5rem, 6rem + 3vw, 10rem);
    padding-bottom: clamp(7.5rem, 6rem + 3vw, 10rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-xl {
    padding-top: clamp(5.625rem, 4.5rem + 2.5vw, 7.5rem);
    padding-bottom: clamp(5.625rem, 4.5rem + 2.5vw, 7.5rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-l {
    padding-top: clamp(4.375rem, 3.5rem + 2vw, 6.25rem);
    padding-bottom: clamp(4.375rem, 3.5rem + 2vw, 6.25rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-m {
    padding-top: clamp(3.125rem, 2.5rem + 1.5vw, 5rem);
    padding-bottom: clamp(3.125rem, 2.5rem + 1.5vw, 5rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-s {
    padding-top: clamp(2.25rem, 1.75rem + 1vw, 3.75rem);
    padding-bottom: clamp(2.25rem, 1.75rem + 1vw, 3.75rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-xs {
    padding-top: clamp(1.5rem, 1.25rem + 0.75vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 1.25rem + 0.75vw, 2.5rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-xxs {
    padding-top: clamp(1rem, 0.875rem + 0.5vw, 1.5rem);
    padding-bottom: clamp(1rem, 0.875rem + 0.5vw, 1.5rem);
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-hero {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
    padding-right: clamp(var(--padding-lateral-mobile), calc(1rem + 2vw), var(--padding-lateral-desktop));
}

.section-full {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* ============================================
   5. FOCUS VISIBLE (ACESSIBILIDADE)
   ============================================ */

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* ============================================
   6. CLASSE NAOMEXA (PROTECAO)
   ============================================ */

.naomexa {
    pointer-events: none !important;
    user-select: none !important;
}


/* ============================================
   7. PLACEHOLDER STYLING
   ============================================ */

::placeholder {
    color: inherit;
    opacity: 0.6;
}