/* ================================================================
   Multionic Child — header.css
   Fiel ao Header.tsx do React — sempre fundo branco
   ================================================================ */

/* ----------------------------------------------------------------
   WRAPPER PRINCIPAL — sempre branco, sem estado transparente
   ---------------------------------------------------------------- */
.mto-header {
    position:         fixed;
    left:             0;
    right:            0;
    z-index:          50;
    background-color: #ffffff;
    transition:       all 0.3s ease;
    transform:        translateY(0);
    padding-top:      16px;
    padding-bottom:   16px;
}
@media (min-width: 768px) {
    .mto-header {
        padding-top:    20px;
        padding-bottom: 20px;
    }
}

/* Oculto ao rolar para baixo */
.mto-header.is-hidden {
    transform: translateY(-110%);
}

/* ----------------------------------------------------------------
   INNER — flex row, max-width 1536px, padding responsivo
   px-4 sm:px-6 lg:px-8 xl:px-10 2xl:px-12
   ---------------------------------------------------------------- */
.mto-header-inner {
    max-width:       1536px;
    margin:          0 auto;
    padding-left:    16px;
    padding-right:   16px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}
@media (min-width: 640px)  { .mto-header-inner { padding-inline: 24px; } } /* sm:px-6 */
@media (min-width: 1024px) { .mto-header-inner { padding-inline: 24px; } } /* lg:px-6 */
@media (min-width: 1280px) { .mto-header-inner { padding-inline: 40px; } } /* xl:px-10 */
@media (min-width: 1536px) { .mto-header-inner { padding-inline: 48px; } } /* 2xl:px-12 */

/* ----------------------------------------------------------------
   LOGO — h-8 md:h-9 xl:h-10 2xl:h-12
   ---------------------------------------------------------------- */
.mto-header-logo {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    text-decoration: none;
}
.mto-header-logo-img {
    height:     32px;
    width:      auto;
    object-fit: contain;
    display:    block;
}
@media (min-width: 768px)  { .mto-header-logo-img { height: 36px; } }
@media (min-width: 1280px) { .mto-header-logo-img { height: 40px; } }
@media (min-width: 1536px) { .mto-header-logo-img { height: 48px; } }

.mto-header-logo-text {
    font-size:   20px;
    font-weight: 900;
    color:       var(--mto-primary);
}

/* ----------------------------------------------------------------
   NAV DESKTOP — hidden lg:flex
   space-x-1 lg:space-x-2 xl:space-x-4 2xl:space-x-6
   ---------------------------------------------------------------- */
.mto-header-nav {
    display:     none;
    align-items: center;
    gap:         4px;
}
@media (min-width: 1024px) { .mto-header-nav { display: flex; gap: 8px; } }
@media (min-width: 1280px) { .mto-header-nav { gap: 16px; } }
@media (min-width: 1536px) { .mto-header-nav { gap: 24px; } }

.mto-nav-item { position: relative; }
.mto-nav-item--has-sub { display: flex; align-items: center; }

/* Link: text-[12px] xl:text-[13px] 2xl:text-[14px] font-medium
   px-1.5 py-1 hover:text-brand-secondary
   cor padrão: preto (não azul) */
.mto-nav-link {
    font-size:       12px;
    font-weight:     500;
    color:           #000;
    padding:         4px 6px;
    white-space:     nowrap;
    letter-spacing:  normal;
    text-decoration: none;
    transition:      color 0.2s ease;
    display:         block;
}
@media (min-width: 1280px) { .mto-nav-link { font-size: 13px; letter-spacing: 0.025em; } }
@media (min-width: 1536px) { .mto-nav-link { font-size: 14px; } }

.mto-nav-link:hover { color: var(--mto-secondary); }

/* Ativo: azul + bold */
.mto-nav-item--active .mto-nav-link {
    color: var(--mto-secondary);
}

/* Chevron toggle */
.mto-nav-toggle {
    display:     flex;
    align-items: center;
    color:       #000;
    padding:     2px;
    margin-left: 2px;
    background:  none;
    border:      none;
    cursor:      pointer;
    transition:  color 0.2s ease;
    line-height: 1;
}
.mto-nav-toggle:hover { color: var(--mto-secondary); }
.mto-nav-toggle svg   { width: 14px; height: 14px; transition: transform 0.2s ease; }

.mto-nav-item--dropdown-open .mto-nav-toggle svg {
    transform: rotate(180deg);
    color:     var(--mto-secondary);
}

/* ----------------------------------------------------------------
   MEGA DROPDOWN — Produtos
   absolute top-full -left-12 mt-2 w-[640px]
   bg-white shadow-2xl border border-gray-100 p-5
   ---------------------------------------------------------------- */
.mto-dropdown {
    position:       absolute;
    top:            calc(100% + 8px);
    left:           -48px;
    width:          640px;
    background:     #fff;
    border:         1px solid #f3f4f6;
    box-shadow:     0 25px 50px -12px rgba(0,0,0,0.25);
    padding:        20px;
    z-index:        9100;
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(8px);
    transition:     opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
/* Dropdown controlado pelo JS com delay — sem :hover CSS */
.mto-nav-item--dropdown-open .mto-dropdown {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Header do dropdown */
.mto-dropdown-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-bottom:  12px;
    margin-bottom:   12px;
    border-bottom:   1px solid #f3f4f6;
}
.mto-dropdown-label {
    font-size:      11px;
    font-weight:    700;
    color:          var(--mto-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mto-dropdown-all {
    font-size:       11px;
    font-weight:     700;
    color:           var(--mto-primary);
    display:         flex;
    align-items:     center;
    gap:             4px;
    text-decoration: none;
    transition:      color 0.2s ease;
}
.mto-dropdown-all:hover { color: #018E6D; }
.mto-dropdown-all svg   { width: 12px; height: 12px; }

/* Grid 2 colunas de itens */
.mto-dropdown-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}

/* Item do dropdown: flex items-center gap-3 p-2 hover:bg-gray-50
   IMPORTANTE: o conteúdo interno é flex-col (título em cima, desc embaixo) */
.mto-dropdown-item {
    display:         flex;
    align-items:     flex-start;
    gap:             12px;
    padding:         8px;
    text-decoration: none;
    transition:      background 0.15s ease;
}
.mto-dropdown-item:hover { background: #f9fafb; }
.mto-dropdown-item--active {
    background:  rgba(59,82,155,0.04);
    border-left: 2px solid var(--mto-primary);
}

/* Coluna interna: flex-col com título e descrição empilhados */
.mto-dropdown-item-col {
    display:        flex;
    flex-direction: column;
    min-width:      0;
    gap:            2px;
}

/* Título: text-xs font-bold text-gray-800 group-hover:text-brand-primary */
.mto-dropdown-item-title {
    font-size:     12px;
    font-weight:   700;
    color:         var(--mto-primary);
    transition:    color 0.15s ease;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

/* Descrição: text-[10px] text-gray-500 line-clamp-1 leading-tight mt-0.5 */
.mto-dropdown-item-desc {
    font-size:     10px;
    color:         #6b7280;
    line-height:   1.3;
    margin-top:    2px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    display:       block;
}

/* ----------------------------------------------------------------
   CTA DESKTOP — hidden lg:flex
   btn-primary px-3 py-2 xl:px-4 text-[10px] xl:text-[11px]
   font-bold tracking-tight uppercase
   ---------------------------------------------------------------- */
.mto-header-cta { display: none; }
@media (min-width: 1024px) {
    .mto-header-cta { display: flex; align-items: center; }
}
.mto-header-cta .mto-btn-primary {
    padding:        8px 12px;
    font-size:      10px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight:    700;
}
@media (min-width: 1280px) {
    .mto-header-cta .mto-btn-primary { padding: 8px 16px; font-size: 11px; }
}

/* ----------------------------------------------------------------
   HAMBÚRGUER — lg:hidden text-brand-primary p-2
   ---------------------------------------------------------------- */
.mto-header-hamburger {
    display:     flex;
    align-items: center;
    color:       var(--mto-primary);
    padding:     8px;
    background:  none;
    border:      none;
    cursor:      pointer;
    transition:  color 0.2s ease;
    line-height: 1;
}
.mto-header-hamburger:hover { color: var(--mto-secondary); }
.mto-hamburger-icon { display: flex; align-items: center; }
@media (min-width: 1024px) { .mto-header-hamburger { display: none; } }

/* ----------------------------------------------------------------
   MENU MOBILE
   bg-white border-t border-gray-100 shadow-xl
   max-h-[calc(100vh-70px)] overflow-y-auto
   ---------------------------------------------------------------- */
.mto-mobile-menu {
    display:    none;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 20px 40px rgba(0,0,0,0.10);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.mto-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) {
    .mto-mobile-menu,
    .mto-mobile-menu.is-open { display: none; }
}

/* container-custom py-6 flex flex-col space-y-2 */
.mto-mobile-menu .mto-container {
    padding-top:    24px;
    padding-bottom: 24px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* Item: border-b border-gray-50 pb-2 */
.mto-mobile-item {
    border-bottom:  1px solid rgba(0,0,0,0.03);
    padding-bottom: 8px;
}

/* Row: flex items-center justify-between py-1 */
.mto-mobile-item-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-block:   4px;
}

/* Link: font-medium text-base md:text-lg tracking-wide */
.mto-mobile-link {
    font-size:       16px;
    font-weight:     500;
    color:           #111827;
    letter-spacing:  0.025em;
    text-decoration: none;
    transition:      color 0.2s ease;
}
@media (min-width: 768px) { .mto-mobile-link { font-size: 18px; } }
.mto-mobile-link:hover,
.mto-mobile-link--active  { color: var(--mto-secondary); }
.mto-mobile-link--active  { font-weight: 700; }

/* Toggle: p-2 text-gray-500 */
.mto-mobile-sub-toggle {
    padding:     8px;
    color:       #6b7280;
    background:  none;
    border:      none;
    cursor:      pointer;
    transition:  color 0.2s ease;
    display:     flex;
    align-items: center;
}
.mto-mobile-sub-toggle:hover     { color: var(--mto-secondary); }
.mto-mobile-sub-toggle svg       { width: 20px; height: 20px; transition: transform 0.2s ease; }
.mto-mobile-sub-toggle.is-open svg { transform: rotate(180deg); color: var(--mto-secondary); }

/* Submenu: overflow-hidden pl-2 my-2 space-y-2 */
.mto-mobile-submenu {
    padding-left:   8px;
    margin-block:   8px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.mto-mobile-submenu[hidden] { display: none; }

/* "Ver catálogo": text-xs font-bold text-brand-primary bg-blue-50/50 uppercase */
.mto-mobile-sub-all {
    display:         block;
    padding:         8px 12px;
    font-size:       11px;
    font-weight:     700;
    color:           var(--mto-primary);
    background:      rgba(219,234,254,0.50);
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    text-decoration: none;
}
.mto-mobile-sub-all:hover { background: rgba(219,234,254,0.80); }

/* Sublink: flex items-center gap-3 py-2 px-2 text-sm */
.mto-mobile-sub-link {
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    padding:         8px;
    text-decoration: none;
    transition:      background 0.15s ease;
}
.mto-mobile-sub-link:hover { background: #f9fafb; }

/* font-semibold text-xs text-gray-900 truncate */
.mto-mobile-sub-title {
    font-size:     12px;
    font-weight:   600;
    color:         #111827;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.mto-mobile-sub-link:hover .mto-mobile-sub-title { color: var(--mto-primary); }

/* text-[10px] text-gray-500 line-clamp-1 */
.mto-mobile-sub-desc {
    font-size:     10px;
    color:         #6b7280;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* CTA mobile: pt-4 px-1 */
.mto-mobile-cta { padding-top: 16px; padding-inline: 4px; }
.mto-mobile-cta .mto-btn-primary {
    width:          100%;
    padding-block:  14px;
    font-size:      12px;
    letter-spacing: -0.02em;
    text-align:     center;
    display:        flex;
    justify-content: center;
}

/* ----------------------------------------------------------------
   BOTÃO WHATSAPP FLUTUANTE
   ---------------------------------------------------------------- */
.mto-whatsapp-btn {
    position:         fixed;
    bottom:           24px;
    right:            24px;
    z-index:          8999;
    width:            56px;
    height:           56px;
    background-color: #25D366;
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    box-shadow:       0 4px 16px rgba(37,211,102,0.40);
    transition:       transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration:  none;
}
.mto-whatsapp-btn:hover {
    transform:  scale(1.08);
    box-shadow: 0 6px 24px rgba(37,211,102,0.55);
    color:      #fff;
}