/* ============================================================
   INOVA SOM PRODUÇÕES — inova.css
   Os estilos visuais ficam inline nos templates, copiados do layout
   (Claude Design). Aqui só o que o runtime do layout fazia por fora:
   estilo base, hovers (style-hover), <image-slot> e estados das interações.
   ============================================================ */

/* Base — igual ao <style> do layout */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0D0D0D; color: #FFFFFF; font-family: "Outfit", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #E2DBD5; text-decoration: none; }
a:hover { color: #FFFFFF; }
input, select, textarea, button { font-family: inherit; }

[hidden] { display: none !important; }

/* Hovers — equivalentes ao style-hover do layout (inline style perde para !important) */
[data-hover="color:#FFFFFF"]:hover { color: #FFFFFF !important; }
[data-hover="color:#2A2826"]:hover { color: #2A2826 !important; }
[data-hover="background:#FFFFFF"]:hover { background: #FFFFFF !important; }
[data-hover="background:#FFFFFF;color:#0D0D0D"]:hover { background: #FFFFFF !important; color: #0D0D0D !important; }
[data-hover="background:#000000;color:#FFFFFF"]:hover { background: #000000 !important; color: #FFFFFF !important; }
[data-hover="background:#E2DBD5;color:#0D0D0D"]:hover { background: #E2DBD5 !important; color: #0D0D0D !important; }
[data-hover="background:#E2DBD5;color:#0D0D0D;border-color:#E2DBD5"]:hover { background: #E2DBD5 !important; color: #0D0D0D !important; border-color: #E2DBD5 !important; }
[data-hover="border-color:#FFFFFF;color:#FFFFFF"]:hover { border-color: #FFFFFF !important; color: #FFFFFF !important; }
[data-hover="opacity:0.85"]:hover { opacity: 0.85 !important; }
[data-hover="opacity:0.88"]:hover { opacity: 0.88 !important; }
[data-hover="transform:scale(1.04)"]:hover { transform: scale(1.04) !important; }

/* <image-slot shape="rect" fit="cover"> */
.slot { display: block; position: relative; width: 100%; height: 100%; }
.slot-frame { position: absolute; inset: 0; overflow: hidden; background: rgba(127, 127, 127, 0.08); }
.slot-frame img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); max-width: none; display: block; }
/* Slots de fundo da Home: camada própria, como no layout (mesma suavização do texto sobre a foto) */
.slot--layer .slot-frame img { will-change: transform; }
.slot-frame img.is-fit { object-fit: fill; }

/* Home — grade de cases (6 colunas, cada foto ocupa 2; abaixo de 720px, 1 coluna) */
.home-cases-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.home-case { grid-column: span 2; }
@media (max-width: 719.98px) {
    .home-cases-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .home-case { grid-column: span 1; }
}

/* Formulário — campos técnicos sem impacto visual */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; font-size: 14px; font-weight: 400; color: #8a1f1f; }
.form-msg:empty { display: none; }

/* Páginas comuns do WordPress (ex.: política de privacidade) */
.page-default { padding: calc(67px + clamp(72px, 10vw, 150px)) clamp(20px, 5vw, 80px) clamp(72px, 10vw, 150px); }
.page-default .container { max-width: 760px; margin: 0 auto; color: #E2DBD5; font-weight: 300; line-height: 1.75; }

/* ============================================================
   RESPONSIVO — só abaixo de 860px. Acima disso o site é idêntico ao layout.
   (!important porque os estilos do layout são inline)
   ============================================================ */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 859.98px) {
    /* Header: logo + botão de menu (os links vão para o menu em tela cheia) */
    .site-nav { display: none !important; }
    .nav-toggle {
        display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
        width: 44px; height: 38px; margin-right: -10px; padding: 0;
        background: none; border: 0; cursor: pointer; flex: 0 0 auto;
    }
    .nav-toggle span { display: block; width: 24px; height: 1.5px; background: #E2DBD5; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    .mobile-menu {
        display: flex; position: fixed; inset: 0; z-index: 49;
        flex-direction: column; align-items: center; justify-content: center; gap: 26px;
        padding: 90px 20px 40px; box-sizing: border-box; overflow-y: auto;
        background: #0D0D0D;
    }
    .mobile-menu a { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 300; color: #E2DBD5; padding: 4px 0; }
    .mobile-menu a.is-active { font-weight: 400; color: #FFFFFF; border-bottom: 1px solid #E2DBD5; }
    .mobile-menu a.mobile-menu-wa { margin-top: 12px; font-size: 13px; letter-spacing: 0.14em; font-weight: 400; color: #0D0D0D; background: #E2DBD5; padding: 14px 26px; border-radius: 999px; }

    /* Sobre Nós > "Como trabalhamos": 2 colunas viram 1 */
    .grid-2-resp { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 479.98px) {
    /* Botões em pílula com texto longo: largura total e texto centralizado */
    a[style*="border-radius:999px"][style*="padding:16px 32px"] {
        width: 100%; box-sizing: border-box; justify-content: center; text-align: center;
        padding-left: 20px !important; padding-right: 20px !important; letter-spacing: 0.12em !important;
    }
    a[style*="border-radius:999px"][style*="padding:16px 32px"][style*="white-space:nowrap"] { white-space: normal !important; }
    .inova-form button[type="submit"] { align-self: stretch !important; width: auto !important; }
}

/* Serviços: blocos empilhados (abaixo de 920px a grade vira 1 coluna) — foto sempre acima do texto */
@media (max-width: 919.98px) {
    .svc-img { order: 0 !important; }
}

/* Cases (tablet, 520–999px): texto do case em largura total em cima, as duas fotos lado a lado embaixo */
@media (min-width: 520px) and (max-width: 999.98px) {
    .case-hero { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-height: 0 !important; }
    .case-hero .case-text { order: -1; grid-column: 1 / -1; }
}

/* Aviso de cookies (CookieAdmin) na identidade da marca */
.cookieadmin_law_container p#cookieadmin_notice a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cookieadmin_remark.cookieadmin_act{color:#B89F8A !important}