/* ==========================================================================
   Estilos do site Benetti — GERADO por gerar-paginas.py.
   A paleta e a tipografia vêm do bloco <style> de _fonte.html;
   edite lá, não aqui: este arquivo é sobrescrito a cada geração.
   ========================================================================== */

/* ============================================================
   PALETA OFICIAL BENETTI
   #231F20  preto   ·  #E7AD38  dourado  ·  #F7F7F7  off-white
   Os demais tokens sao tons derivados dessas tres cores.
   ============================================================ */
:root {
    /* --- cores da marca --- */
    --ink: #231F20;
    --gold: #E7AD38;
    --paper: #F7F7F7;

    /* --- neutros derivados do preto --- */
    --ink-900: #1A1718; /* rodape */
    --ink-700: #2E2A2B; /* listras / hover em fundo escuro */
    --ink-600: #3A3536; /* texto de destaque */
    --text: #231F20;
    --text-2: #454243; /* corpo de texto */
    --text-3: #5C5859; /* texto secundario */
    --text-4: #6F6C6D; /* legendas */
    --line: #E4E2E2; /* bordas sutis */
    --line-2: #CFCDCD; /* bordas de campo */
    --surface: #FFFFFF; /* cards */
    --surface-2: #EFEFEF; /* faixas claras */

    /* --- variacoes do dourado --- */
    --gold-dark: #C4932F; /* hover de botao */
    --gold-deep: #8A6620; /* dourado legivel sobre claro (AA 4.8:1) */
    --gold-light: #F1CE88; /* dourado sobre fundo escuro */
    --gold-line: #EDCB84; /* bordas douradas */
    --gold-tint: #FBF1DC; /* paineis de destaque */
    --gold-tint-2: #F7E7C4; /* chips e icones */
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--paper);
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
}

input, textarea, select, button {
    font-family: inherit;
}

a {
    color: var(--gold-deep);
    text-decoration: none
}

a:hover {
    color: var(--gold-dark)
}

::selection {
    background: var(--gold);
    color: var(--ink)
}

i[data-lucide] {
    stroke-width: 1.6
}

/* ---- estados de hover ----
   Ficam aqui, e não no atributo style-hover do runtime: aquele
   recebia a string crua "{{ objeto }}" e gerava CSS inválido, então
   nenhum hover do site chegou a funcionar.
   O !important é necessário porque as cores base estão em style
   inline (herança do formato DC) e folha de estilo não vence inline. */
.ben-btn {
    transition: background .2s;
}

.ben-btn:hover {
    background: var(--gold-dark) !important;
}

.ben-ghost {
    transition: background .2s;
}

.ben-ghost:hover {
    background: var(--gold-tint-2) !important;
}

.ben-cat:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 14px 30px rgba(35, 31, 32, .16);
}

.ben-foot-link {
    transition: color .2s;
}

.ben-foot-link:hover {
    color: var(--gold-light) !important;
}

.ben-wa-float {
    transition: background .2s;
}

.ben-wa-float:hover {
    background: var(--ink-700) !important;
}

.ben-doc {
    transition: background .2s;
}

.ben-doc:hover {
    background: var(--ink-700) !important;
}

.ben-lb-btn:hover {
    background: rgba(255, 255, 255, .2) !important;
}

/* ícones de redes sociais — hover em CSS real, porque o
   style-hover do runtime nunca aplicou valores interpolados */
.ben-social {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gold-tint-2);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.ben-social:hover {
    background: var(--gold);
    color: var(--ink);
}

.ben-prosa {
    columns: 2;
    column-gap: 40px;
}

@media (max-width: 760px) {
    .ben-prosa {
        columns: 1;
    }
}

.ben-fig {
    border-radius: 14px;
    overflow: hidden;
}

/* ---- ajustes do site estatico (menu mobile, grades, modal) ---- */
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
img{max-width:100%}
.ben-mobile{display:none}
.ben-menu{display:none;border-top:1px solid var(--line);background:var(--paper);
          padding:10px clamp(18px,4vw,48px) 20px}
@media (max-width:939px){
  .ben-desktop{display:none!important}
  .ben-mobile{display:inline-flex!important}
  body.ben-menu-aberto .ben-menu{display:block}
  .ben-menu nav{display:flex;flex-direction:column}
  .ben-menu nav a{font-size:16px;padding:13px 4px;border-bottom:1px solid var(--line);
                  font-weight:600;color:var(--ink-600);text-decoration:none}
  .ben-menu nav a[aria-current="page"]{color:var(--gold);font-weight:800}
}
/* modal de foto */
.ben-lb{position:fixed;inset:0;z-index:120;background:rgba(26,23,24,.94);
        display:none;align-items:center;justify-content:center;
        padding:clamp(14px,3vw,44px);cursor:zoom-out}
.ben-lb[open]{display:flex}
.ben-lb figure{position:relative;z-index:1;margin:0;max-width:min(1120px,100%);width:100%;
               display:flex;flex-direction:column;align-items:center;gap:16px;cursor:default}
.ben-lb img{max-width:100%;max-height:min(74vh,860px);width:auto;height:auto;
            object-fit:contain;border-radius:12px;display:block;
            box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ben-lb figcaption{text-align:center;max-width:60ch}
.ben-lb-nome{font-weight:700;font-size:clamp(15px,2vw,19px);letter-spacing:-.01em;
             color:#fff;margin-bottom:5px}
.ben-lb-trilha{font-size:12.5px;font-weight:600;letter-spacing:.09em;
               text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.ben-lb-wa{display:inline-flex;align-items:center;gap:8px;background:var(--gold);
           color:var(--ink);font-weight:700;font-size:14.5px;padding:12px 24px;
           border-radius:100px;text-decoration:none}
.ben-lb-wa:hover{background:var(--gold-dark);color:var(--ink)}
.ben-lb button{position:absolute;z-index:2;border-radius:50%;
               border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
               color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ben-lb button:hover{background:rgba(255,255,255,.2)}
.ben-lb-fechar{top:14px;right:14px;width:44px;height:44px}
.ben-lb-ant{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%);width:46px;height:46px}
.ben-lb-prox{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%);width:46px;height:46px}
body.ben-lb-aberto{overflow:hidden}