/**
 * landing.css — Portal institucional Grupo Santa Zita
 * Design aprovado (v3.2): base neutra papel/tinta com a paleta da marca
 * em papel SECUNDÁRIO — teal e laranja como acento, nunca fundo dominante.
 *
 * @author Fernando da AiA Soluções
 */

:root{
    /* Marca — uso secundário / acento (Manual de Identidade Visual, out/2021) */
    --teal:    rgb(0, 79, 89);      /* Pantone 3165 C */
    --laranja: rgb(255, 127, 65);   /* Pantone 164 C  */
    --grafite: rgb(61, 57, 53);     /* Pantone Black 7 C */
    --azul:    rgb(35, 97, 146);    /* Pantone 647 C  */

    /* Base neutra */
    --papel:   #FCFCFB;
    --papel-2: #F4F4F2;
    --tinta:   #17181A;
    --tinta-70:#54575C;
    --tinta-45:#8A8E95;
    --linha:   #E4E4E1;

    --raio:   10px;
    --raio-g: 18px;
    --sombra: 0 1px 2px rgba(20,20,20,.04), 0 12px 32px rgba(20,20,20,.06);
    --t: 200ms cubic-bezier(.4,0,.2,1);

    --serif: 'Fraunces', Georgia, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--papel);color:var(--tinta);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.olho{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;
    letter-spacing:1.6px;text-transform:uppercase;color:var(--laranja);margin-bottom:20px}
.olho::before{content:"";width:26px;height:2px;background:var(--laranja)}

/* ============================ BOTÕES ============================ */
.b{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:8px;
    font-size:.88rem;font-weight:600;border:1px solid transparent;transition:all var(--t)}
.b span{transition:transform var(--t)}
.b:hover span{transform:translateX(3px)}
.b-1{background:var(--tinta);color:#fff}
.b-1:hover{background:#000;transform:translateY(-1px)}
.b-2{border-color:var(--linha);color:var(--tinta);background:#fff}
.b-2:hover{border-color:var(--tinta)}
.b-vaga{background:var(--laranja);color:#fff;padding:15px 28px}
.b-vaga:hover{background:#ef6f31;transform:translateY(-1px)}

/* ============================ HEADER ============================ */
.topo{position:sticky;top:0;z-index:100;background:rgba(252,252,251,.88);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.marca img{height:34px;width:auto}
.menu{display:flex;align-items:center;gap:4px}
.menu a,.menu button{border:none;background:none;padding:9px 15px;border-radius:8px;
    font-size:.86rem;font-weight:500;color:var(--tinta-70);transition:all var(--t)}
.menu a:hover,.menu button:hover{background:var(--papel-2);color:var(--tinta)}
.menu .cta{background:var(--teal);color:#fff;font-weight:600;padding:10px 18px}
.menu .cta:hover{background:#013b43;color:#fff}

.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.menu-btn span{width:22px;height:2px;background:var(--tinta);border-radius:2px;transition:all var(--t)}
.menu-btn.aberto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.aberto span:nth-child(2){opacity:0}
.menu-btn.aberto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ HERO ============================ */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--linha)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.04;
    font-weight:600;letter-spacing:-1.4px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero-sub{margin:22px 0 30px;font-size:1.06rem;color:var(--tinta-70);max-width:44ch;font-weight:300}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

.hero-card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);
    padding:26px;box-shadow:var(--sombra)}
.hero-card h4{font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--tinta-45);margin-bottom:16px}

.acesso-item{display:flex;align-items:center;gap:13px;padding:12px;border-radius:10px;transition:all var(--t)}
.acesso-item:hover{background:var(--papel-2)}
.acesso-ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
    font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0}
.i-motorista{background:var(--azul)}
.i-vistoria{background:var(--teal)}
.i-manutencao{background:var(--grafite)}
.i-ia{background:var(--laranja)}
.acesso-item strong{display:block;font-size:.87rem;font-weight:600}
.acesso-item small{font-size:.75rem;color:var(--tinta-45)}
.acesso-item i{margin-left:auto;font-style:normal;color:var(--tinta-45)}

/* ============================ INDICADORES ============================ */
.faixa-ind{padding:26px 0;border-bottom:1px solid var(--linha);background:var(--papel-2)}
.grade-ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;
    background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);padding:28px 24px}
.ind{text-align:center}
.ind-icone{font-size:1.5rem;display:block;margin-bottom:4px}
.ind-valor{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.3rem);font-weight:600;
    color:var(--teal);line-height:1.1;letter-spacing:-1px}
.ind-rotulo{font-size:.75rem;color:var(--tinta-45);font-weight:600;
    text-transform:uppercase;letter-spacing:.6px}
.ind-vazio{display:flex;align-items:center;gap:14px;justify-content:center;font-size:.82rem;
    color:var(--tinta-45);border:1px dashed var(--linha);border-radius:var(--raio);
    padding:18px;background:#fff}

/* ============================ NEWSROOM ============================ */
.news{padding:82px 0}
.sec-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
    margin-bottom:40px;flex-wrap:wrap}
.sec-topo h2{font-family:var(--serif);font-size:2.1rem;font-weight:600;letter-spacing:-.8px}
.sec-topo p{color:var(--tinta-45);font-size:.92rem;margin-top:4px}

.filtros{display:flex;gap:6px;flex-wrap:wrap}
.f-pill{border:1px solid var(--linha);background:#fff;padding:8px 16px;border-radius:999px;
    font-size:.79rem;font-weight:600;color:var(--tinta-70);transition:all var(--t)}
.f-pill:hover{border-color:var(--tinta-45)}
.f-pill.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

.meta{display:flex;align-items:center;gap:10px;font-size:.74rem;color:var(--tinta-45);flex-wrap:wrap}
.k{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.66rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.6px}
.k-noticia{background:rgba(35,97,146,.1);color:var(--azul)}
.k-evento{background:rgba(255,127,65,.14);color:#C2410C}
.k-comunicado{background:rgba(0,79,89,.1);color:var(--teal)}
.anexo-tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--tinta-45);
    border:1px solid var(--linha);border-radius:6px;padding:3px 8px}

.destaque{display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border:1px solid var(--linha);
    border-radius:var(--raio-g);overflow:hidden;margin-bottom:28px}
.destaque-img{aspect-ratio:4/3;overflow:hidden;background:var(--papel-2)}
.destaque-img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.destaque:hover .destaque-img img{transform:scale(1.03)}
.destaque-txt{padding:44px;display:flex;flex-direction:column;justify-content:center}
.destaque-txt h3{font-family:var(--serif);font-size:1.9rem;line-height:1.2;font-weight:600;
    letter-spacing:-.6px;margin:14px 0 12px}
.destaque-txt p{color:var(--tinta-70);font-size:.95rem;font-weight:300}

.ler{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.85rem;
    font-weight:700;color:var(--teal);border:none;background:none;padding:0;align-self:flex-start}
.ler span{transition:transform var(--t)}
.ler:hover span{transform:translateX(4px)}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;
    display:flex;flex-direction:column;transition:all var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:transparent}
.card[hidden],.destaque[hidden]{display:none}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--papel-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.card:hover .card-img img{transform:scale(1.04)}
.card-in{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-in h3{font-family:var(--serif);font-size:1.14rem;line-height:1.3;font-weight:600;letter-spacing:-.3px}
.card-in p{font-size:.87rem;color:var(--tinta-70);font-weight:300;flex:1}

.sem-conteudo{text-align:center;color:var(--tinta-45);font-size:.92rem;background:#fff;
    border:1px dashed var(--linha);border-radius:var(--raio-g);padding:56px 24px}

/* ============================ CARREIRA ============================ */
.carreira{padding:74px 0;border-top:1px solid var(--linha);background:var(--papel-2)}
.carreira-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.carreira h2{font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:-.7px}
.carreira p{color:var(--tinta-70);margin-top:8px;max-width:52ch;font-weight:300}

/* ============================ RODAPÉ ============================ */
.rodape{background:var(--tinta);color:rgba(255,255,255,.62);padding:52px 0 26px;font-size:.84rem}
.rodape-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:30px}
.rodape-col{display:grid;gap:9px;align-content:start}
.rodape-col h5{color:#fff;font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px}
.rodape a,.rodape button{transition:color var(--t);border:none;background:none;padding:0;
    color:inherit;font-family:inherit;font-size:inherit;text-align:left}
.rodape a:hover,.rodape button:hover{color:var(--laranja)}
.rodape-base{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:.75rem;
    opacity:.5;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================ MODAL ============================ */
.modal{position:fixed;inset:0;z-index:450;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(20,20,20,.5);backdrop-filter:blur(3px)}
.modal-cx{position:relative;background:#fff;border-radius:var(--raio-g);max-width:720px;width:100%;
    max-height:88vh;overflow-y:auto;padding:40px;box-shadow:var(--sombra);
    animation:entra 260ms cubic-bezier(.16,1,.3,1)}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:18px;right:20px;border:none;background:var(--papel-2);
    width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--tinta-70)}
.modal-x:hover{background:var(--laranja);color:#fff}
.modal-cx h2{font-family:var(--serif);font-size:1.85rem;font-weight:600;letter-spacing:-.6px;margin:14px 0 10px}

.pub-capa{width:100%;border-radius:12px;margin-bottom:12px}
.pub-corpo{margin-top:18px;color:var(--tinta-70);font-weight:300}
.pub-corpo p{margin-bottom:14px}
.pub-corpo ul,.pub-corpo ol{padding-left:22px;margin-bottom:14px}
.pub-corpo a{color:var(--azul);text-decoration:underline}

.pub-anexos{margin-top:26px;border-top:1px solid var(--linha);padding-top:18px}
.pub-anexos h4{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
    color:var(--tinta-45);margin-bottom:10px}
.pub-anexos ul{list-style:none;display:grid;gap:8px}
.pub-anexos a{display:flex;align-items:center;gap:10px;background:var(--papel);
    border:1px solid var(--linha);border-radius:8px;padding:9px 12px;font-size:.85rem;
    transition:all var(--t)}
.pub-anexos a:hover{border-color:var(--teal)}

.institucional p{margin-bottom:14px;color:var(--tinta-70);font-weight:300}
.institucional ul{padding-left:20px;display:grid;gap:8px;color:var(--tinta-70);font-weight:300}
.institucional h3{font-family:var(--serif);font-size:1.15rem;margin:22px 0 10px;color:var(--tinta)}
.nota{font-size:.82rem;color:var(--tinta-45);border-left:3px solid var(--laranja);padding-left:14px}

.grade-sistemas{display:grid;gap:10px;margin-top:22px}
.grade-sistemas .acesso-item{border:1px solid var(--linha);border-radius:12px}

/* ============================ RESPONSIVO ============================ */
@media(max-width:1000px){
    .hero-grid,.destaque,.carreira-in{grid-template-columns:1fr}
    .destaque-txt{padding:28px}
}
@media(max-width:768px){
    .menu-btn{display:flex}
    .menu{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;
        background:#fff;padding:16px 20px 24px;border-bottom:1px solid var(--linha);
        box-shadow:var(--sombra);transform:translateY(-150%);transition:transform var(--t)}
    .menu.aberta{transform:translateY(0)}
    .menu a,.menu button{text-align:left;padding:13px 15px}
    .hero{padding:56px 0 44px}
    .hero-btns .b{width:100%;justify-content:center}
    .modal-cx{padding:26px 22px}
    .wrap{padding:0 20px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
    html{scroll-behavior:auto}
}

/* ============================ ÍCONES DE SISTEMA (cadastrados) ============================ */
.i-teal{background:var(--teal)}
.i-laranja{background:var(--laranja)}
.i-azul{background:var(--azul)}
.i-grafite{background:var(--grafite)}
.acesso-ico-img{background:var(--papel-2);padding:0;overflow:hidden}
.acesso-ico-img img{width:100%;height:100%;object-fit:cover}

/* ============================ POPUP DE AVISO ============================ */
.modal-aviso .aviso-cx{max-width:560px;padding:34px}
.aviso-img{width:100%;border-radius:12px;margin-bottom:18px}
.aviso-msg{margin-top:14px;color:var(--tinta-70);font-weight:300}
.aviso-acoes{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
@media(max-width:520px){
    .aviso-acoes .b{width:100%;justify-content:center}
}

/* ============================ WEBMAIL ============================ */
.menu .link-webmail{display:inline-flex;align-items:center;gap:7px}
.menu .link-webmail svg{opacity:.7}
.menu .link-webmail:hover svg{opacity:1}
.acesso-webmail{border-top:1px solid var(--linha);margin-top:8px;padding-top:16px;border-radius:0 0 10px 10px}
.acesso-webmail .acesso-ico{color:#fff}