/* ================================================================
   Multionic Child — global.css
   Variáveis CSS, Reset, Tipografia base
   ================================================================ */

/* ----------------------------------------------------------------
   1. VARIÁVEIS (design tokens extraídos do React / index.css)
   ---------------------------------------------------------------- */
:root {
    /* Cores da marca */
    --mto-primary:       #3B529B;   /* Azul Multionic — headings, botão outline */
    --mto-primary-dark:  #014486;   /* Azul escuro — heróis, seções de destaque */
    --mto-secondary:     #6DB0DF;   /* Azul claro — botão primário, destaques */
    --mto-hover:         #5ca0cf;   /* Hover do botão secundário */
    --mto-brand-hover:   #065bb5;   /* Hover do botão primário outline */

    /* Neutros */
    --mto-bg-light:      #f0f3f5;
    --mto-white:         #ffffff;
    --mto-black:         #000000;
    --mto-text-main:     #333333;
    --mto-text-light:    #6b7280;
    --mto-text-muted:    rgba(255,255,255,0.60);
    --mto-border:        #e5e7eb;
    --mto-border-light:  rgba(255,255,255,0.10);

    /* Seções especiais */
    --mto-dark-navy:     #062e4c;   /* FAQ fundo */
    --mto-teal:          #75BFBA;   /* Canais de atendimento */
    --mto-green:         #018E6D;   /* Ícones de contato */

    /* Tipografia */
    --mto-font:          'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --mto-fs-h1:         clamp(28px, 4vw, 56px);
    --mto-fs-h2:         clamp(22px, 3vw, 36px);
    --mto-fs-h3:         clamp(18px, 2.5vw, 26px);
    --mto-fs-body:       16px;
    --mto-fs-sm:         14px;
    --mto-fs-xs:         12px;
    --mto-fs-xxs:        10px;
    --mto-fw-regular:    400;
    --mto-fw-medium:     500;
    --mto-fw-semibold:   600;
    --mto-fw-bold:       700;
    --mto-fw-extrabold:  800;
    --mto-fw-black:      900;
    --mto-lh-heading:    1.15;
    --mto-lh-body:       1.65;

    /* Layout */
    --mto-section-py:       96px;
    --mto-section-py-md:    64px;
    --mto-section-py-sm:    48px;
    --mto-container-max:    1200px;
    --mto-container-px:     16px; /* padding-inline: calc(0.25rem * 4) = 1rem = 16px */

    /* Misc */
    --mto-radius:        0px;       /* Projeto usa border-radius: 0 em tudo */
    --mto-shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
    --mto-shadow-md:     0 4px 16px rgba(0,0,0,0.08);
    --mto-shadow-lg:     0 8px 30px rgba(0,0,0,0.12);
    --mto-transition:    0.3s ease;
}

/* ----------------------------------------------------------------
   2. RESET MÍNIMO
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

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

body {
    font-family:              var(--mto-font);
    font-size:                var(--mto-fs-body);
    font-weight:              var(--mto-fw-regular);
    color:                    var(--mto-text-main);
    background-color:         var(--mto-white);
    line-height:              var(--mto-lh-body);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--mto-transition), opacity var(--mto-transition);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: var(--mto-font);
    border: none;
    background: none;
}

input, textarea, select {
    font-family: var(--mto-font);
}

/* ----------------------------------------------------------------
   3. TIPOGRAFIA BASE
   ---------------------------------------------------------------- */
h1 {
    font-size:      var(--mto-fs-h1);
    font-weight:    var(--mto-fw-bold); /* font-black declarado mas Vercel carrega max 700 */
    color:          var(--mto-primary);
    line-height:    var(--mto-lh-heading);
    letter-spacing: -0.02em;
}

h2 {
    font-size:      var(--mto-fs-h2);
    font-weight:    var(--mto-fw-bold);
    color:          var(--mto-primary);
    line-height:    var(--mto-lh-heading);
    letter-spacing: -0.01em;
}

h3 {
    font-size:      var(--mto-fs-h3);
    font-weight:    var(--mto-fw-semibold);
    color:          var(--mto-primary);
    line-height:    var(--mto-lh-heading);
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    font-size:   var(--mto-fs-body);
    font-weight: var(--mto-fw-bold);
    color:       var(--mto-primary);
    line-height: var(--mto-lh-heading);
}

p {
    line-height: var(--mto-lh-body);
}

/* ----------------------------------------------------------------
   4. CONTAINER
   ---------------------------------------------------------------- */
.mto-container {
    max-width:    var(--mto-container-max);
    margin-left:  auto;
    margin-right: auto;
    padding-left: var(--mto-container-px);
    padding-right: var(--mto-container-px);
}

@media (min-width: 640px) {

}
@media (min-width: 1024px) {

}

/* ----------------------------------------------------------------
   5. UTILITÁRIOS DE SEÇÃO
   ---------------------------------------------------------------- */
.mto-section {
    padding-block: var(--mto-section-py);
}

@media (max-width: 1024px) {
    .mto-section { padding-block: var(--mto-section-py-md); }
}
@media (max-width: 640px) {
    .mto-section { padding-block: var(--mto-section-py-sm); }
}

/* ----------------------------------------------------------------
   6. SCROLLBAR OCULTA (carrosséis)
   ---------------------------------------------------------------- */
.mto-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width:    none;
}
.mto-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ----------------------------------------------------------------
   7. EFEITO SHIMMER (hover nos títulos CTA — fiel ao React)
   ---------------------------------------------------------------- */
.mto-shimmer-text {
    transition: all 0.3s ease;
    display: inline-block;
}
.mto-shimmer-text:hover {
    background:              linear-gradient(90deg, #3B529B 0%, #3B529B 40%, rgba(255,255,255,0.8) 50%, #3B529B 60%, #3B529B 100%);
    background-size:         200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    color:                   transparent;
    animation:               mto-shimmer 4s forwards linear;
}
@keyframes mto-shimmer {
    0%   { background-position:  200% center; }
    100% { background-position: -200% center; }
}

/* ----------------------------------------------------------------
   BORDER-RADIUS OVERRIDES
   Seletores com alta especificidade para sobrescrever o Bricks Theme
   que injeta border-radius: 0 em elementos dentro de shortcodes
   ---------------------------------------------------------------- */
html body .mto-sm-prod-card                { border-radius: 16px; }
html body .mto-sm-prod-card--destaque      { border-radius: 16px; }
html body .mto-sm-prod-nivel               { border-radius: 99px; }
html body .mto-sm-prod-destaque-badge      { border-radius: 99px; }
html body .mto-sm-cf-num                   { border-radius: 0; }
html body .mto-whatsapp-btn                { border-radius: 50%; }
html body .mto-footer-social-link:hover    { border-radius: 0; }