/*
Theme Name: ExpoSerra 2026
Theme URI: https://exposerraoficial.com.br
Description: Tema oficial da 26ª ExpoSerra — Feira de Indústria, Comércio e Serviços de Serra Talhada. Identidade visual em couro/sertão. Desenvolvido pela Lumos Agência Digital.
Author: Lumos Agência Digital
Author URI: https://agencialumos.com
Version: 1.6.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exposerra
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --azul:#102C60; --azul2:#173A78; --petroleo:#1A4F6D; --laranja:#F89E16; --laranja2:#EE8A12;
  --creme:#EFE4D9; --bege:#E7C79B; --dourado:#D2B78E; --pessego:#F9E3CC; --verde:#6FA76A; --tinta:#20242E;
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:var(--tinta); background:#fff; line-height:1.5; overflow-x:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
.wrap{max-width:1140px; margin:0 auto; padding:0 40px}

/* HEADER (sticky + shrink ao rolar) — v1.3: creme, identidade 26ª */
.site-header{background:var(--creme); padding:14px 0; position:sticky; top:0; z-index:50; border-bottom:2px dashed rgba(16,44,96,.22); transition:padding .3s ease, background .3s ease, box-shadow .3s ease}
.site-header.scrolled{padding:8px 0; background:rgba(239,228,217,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(90,60,20,.16)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between}
.site-logo{height:52px; width:auto}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:26px; height:3px; background:var(--azul); margin:5px 0; border-radius:2px; transition:.3s}
.main-nav{display:flex; align-items:center; gap:24px}
.main-nav ul{list-style:none; display:flex; align-items:center; gap:30px; margin:0}
.main-nav a{color:var(--azul); text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.3px; text-transform:uppercase}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--laranja2)}
.nav-search{width:20px;height:20px;border:2.5px solid var(--azul);border-radius:50%;position:relative;opacity:.9;display:inline-block}
.nav-search::after{content:"";position:absolute;width:2.5px;height:8px;background:var(--azul);right:-4px;bottom:-4px;transform:rotate(-45deg)}

/* HERO — v1.3: fundo areia da identidade 26ª (couro/sertão), azul vira tinta */
.hero{position:relative; background:linear-gradient(180deg,#F6EEE3 0%,var(--creme) 68%,#EADCC9 100%); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 85% 20%, rgba(210,183,142,.35), transparent 55%); pointer-events:none}
.hero .wrap{display:flex; align-items:center; min-height:440px; padding-top:40px; padding-bottom:40px}
.hero-txt{flex:1; max-width:640px}
.hero h1{color:var(--azul); font-size:44px; line-height:1.08; font-weight:800; letter-spacing:-.5px; text-transform:uppercase}
.hero h1 .hl{color:var(--laranja2)}
.hero .lead{color:#7c6a50; font-size:16px; font-weight:700; margin-top:16px; letter-spacing:.5px; text-transform:uppercase}
.btn-cta{display:inline-block; margin-top:26px; background:var(--laranja); color:#fff; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.5px; padding:15px 30px; border-radius:8px; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25); transition:background .2s, transform .25s, box-shadow .25s; position:relative; overflow:hidden}
.btn-cta::before{content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-20deg); animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-80%} 100%{left:170%}}
.btn-cta:hover{background:var(--laranja2); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.32)}
.hero-selos{position:absolute; right:28px; top:0; height:100%; display:flex; flex-direction:column; justify-content:center; gap:16px}
.hero-selos .s{width:122px; height:122px; display:flex; align-items:center; justify-content:center; animation:floaty 6.5s ease-in-out infinite}
.hero-selos .s:nth-child(2){animation-delay:-2.2s}
.hero-selos .s:nth-child(3){animation-delay:-4.4s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-9px) rotate(1.3deg)}}
.hero-selos .s img{max-width:100%; max-height:100%; object-fit:contain; border-radius:14px; filter:drop-shadow(0 8px 16px rgba(90,60,20,.28))}

/* COUNTDOWN — contagem regressiva pro evento (patches de couro costurados) */
.count{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.count .c{min-width:76px; padding:13px 10px 11px; text-align:center; background:rgba(255,255,255,.55); border:2px dashed rgba(238,138,18,.65); border-radius:12px}
.count b{display:block; color:var(--laranja2); font-size:30px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums}
.count i{display:block; color:var(--azul); font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; margin-top:7px}
.count-label{color:#9a8a6f; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-top:28px}
.count-label+.count{margin-top:10px}

/* TICKER — faixa rolante do evento */
.ticker{background:var(--laranja); margin-top:56px; overflow:hidden; padding:13px 0}
.ticker+.sobre{margin-top:0}
.tk{display:flex; width:max-content; animation:tkmove 30s linear infinite}
.tk span{display:block; white-space:nowrap; color:#fff; font-weight:800; font-size:14px; letter-spacing:2.5px; text-transform:uppercase; padding-right:28px}
@keyframes tkmove{to{transform:translateX(-50%)}}

/* SCROLL REVEAL */
.rv{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.12s} .rv-d2{transition-delay:.24s} .rv-d3{transition-delay:.36s}

/* COSTURA — divisor tracejado que "se costura" ao entrar na tela */
.costura{border:0; border-top:3px dashed var(--laranja); width:0; margin:16px auto 0; opacity:.75; transition:width 1s ease .25s}
.costura.in{width:130px}

/* CARDS */
.cards{background:#fff; margin-top:-46px; position:relative; z-index:6}
.cards .wrap{display:flex; gap:24px}
.card{flex:1; background:#fff; border-radius:14px; box-shadow:0 12px 34px rgba(120,80,30,.16); padding:30px 26px; text-align:center; position:relative; transition:transform .35s ease, box-shadow .35s ease}
.card::after{content:""; position:absolute; inset:10px; border:2px dashed transparent; border-radius:10px; pointer-events:none; transition:border-color .35s ease}
.card:hover{transform:translateY(-7px); box-shadow:0 22px 46px rgba(120,80,30,.22)}
.card:hover::after{border-color:rgba(248,158,22,.6)}
.card .ic{width:58px; height:58px; display:block; margin:0 auto 14px}
.card h3{color:var(--azul); font-size:18px; font-weight:800; margin-bottom:8px}
.card p{color:#5a616e; font-size:13px; line-height:1.5}
.card p b{color:var(--azul)}

/* SOBRE */
.sobre{background:var(--bege); margin-top:60px; padding:60px 0}
.sobre .wrap{display:flex; gap:40px; align-items:stretch}
.sobre-box{flex:1; background:var(--azul); border-radius:6px; padding:34px; color:#fff}
.sobre-selos{display:flex; gap:14px; margin-bottom:20px}
.sobre-selos .s{width:66px; height:66px; display:flex; align-items:center; justify-content:center}
.sobre-selos .s img{max-width:100%; max-height:100%; object-fit:contain; border-radius:10px}
.sobre-box h2{color:var(--laranja); font-size:34px; font-weight:800; margin-bottom:14px}
.sobre-box p{font-size:14.5px; line-height:1.6; color:#e7ecf5; margin-bottom:12px}
.sobre-foto{flex:1.05; border-radius:6px; overflow:hidden; background:#ccc}
.sobre-foto img{width:100%; height:100%; object-fit:cover; min-height:340px}

/* CONHECA */
/* ===== Prova social / numeros (v1.4.0) ===== */
.prova{background:var(--creme); padding:60px 0 56px; text-align:center; border-top:2px dashed rgba(16,44,96,.18)}
.prova h2{color:var(--azul); font-size:32px; font-weight:800; margin-top:6px}
.stats{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.stats .st{flex:1; min-width:190px; max-width:250px; padding:26px 18px 22px; background:rgba(255,255,255,.6); border:2px dashed rgba(238,138,18,.65); border-radius:14px}
.stats .st b{display:block; color:var(--laranja2); font-size:38px; font-weight:900; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
.stats .st i{display:block; color:var(--azul); font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; margin-top:10px; line-height:1.45}
.marcas-titulo{margin-top:42px; color:#9a8a6f; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase}
.marcas{display:flex; gap:10px 12px; justify-content:center; flex-wrap:wrap; margin-top:18px; max-width:820px; margin-left:auto; margin-right:auto}
.marcas span{display:inline-block; padding:9px 16px; background:#fff; border:1.5px dashed rgba(16,44,96,.35); border-radius:999px; color:var(--azul); font-size:13px; font-weight:700}
.marcas-logos{max-width:960px; gap:14px}
.marcas-logos .lg{display:flex; align-items:center; justify-content:center; height:82px; width:158px; padding:14px 18px; background:#fff; border:1.5px dashed rgba(16,44,96,.35); border-radius:14px}
.marcas-logos .lg-w{width:224px}
.marcas-logos .lg img{max-width:100%; max-height:100%; object-fit:contain}
.marcas-logos .lg-dark{background:var(--azul); border-color:rgba(238,138,18,.55)}
@media (max-width:640px){.marcas-logos{gap:8px}.marcas-logos .lg,.marcas-logos .lg-w{height:58px; width:calc(33.333% - 6px); padding:8px 10px}}

.conheca{background:#fff; padding:56px 0 40px; text-align:center}
.kicker{color:#9a8a6f; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase}
.conheca h2{color:var(--laranja2); font-size:30px; font-weight:800; margin:6px 0 34px; text-transform:uppercase; line-height:1.15}
.galeria{display:flex; gap:20px}
.galeria .g{flex:1; height:230px; border-radius:8px; overflow:hidden; background:#ddd}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.16,1,.3,1), filter .4s}
.galeria .g:hover img{transform:scale(1.07); filter:saturate(1.12)}
.frase-azul{background:var(--dourado,#D2B78E); color:var(--azul); text-align:center; padding:34px 0; position:relative; border-top:3px dashed rgba(16,44,96,.25); border-bottom:3px dashed rgba(16,44,96,.25)}
.frase-azul p{max-width:900px; margin:0 auto; font-size:21px; font-weight:700; line-height:1.4; padding:0 40px}
.frase-azul .selo{position:absolute; right:34px; bottom:-34px; width:120px; height:auto; border-radius:14px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}

/* NOTICIAS */
.noticias{background:var(--pessego); padding:56px 0}
.noticias h2{color:var(--laranja2); font-size:28px; font-weight:800; text-align:center; margin-bottom:30px; text-transform:uppercase}
.news{display:flex; gap:22px}
.nw{flex:1; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.08); text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease}
.nw:hover{transform:translateY(-6px); box-shadow:0 18px 38px rgba(16,44,96,.16)}
.nw .ph{height:150px; overflow:hidden; background:#ccc}
.nw .ph img{width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.16,1,.3,1)}
.nw:hover .ph img{transform:scale(1.08)}
.nw .tx{padding:16px 18px}
.nw .tx h4{color:var(--azul); font-size:14px; font-weight:800; line-height:1.3; margin-bottom:8px}
.nw .tx p{color:#6a707c; font-size:12px; line-height:1.5}
.btn-mais{display:block; width:max-content; margin:30px auto 0; background:var(--laranja); color:#fff; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.5px; padding:13px 28px; border-radius:8px; text-decoration:none; transition:background .2s}
.btn-mais:hover{background:var(--laranja2)}

/* MONTANHAS + FOOTER (parallax leve via fx.js) */
.montanhas{background:var(--pessego); padding-top:10px; line-height:0; overflow:hidden}
.montanhas img{width:100%; transform:scale(1.1); will-change:transform}
.site-footer{background:var(--creme); padding:30px 0}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer-logo{height:74px; width:auto}
.footer-data{text-align:right}
.footer-data .d{color:var(--laranja); font-size:26px; font-weight:900; line-height:1}
.footer-data .l{color:var(--azul); font-size:13px; font-weight:700; margin-top:6px; letter-spacing:.5px; text-transform:uppercase}
.copy{background:var(--azul); color:#cdd6e6; text-align:center; font-size:12px; padding:12px}

/* QUERO EXPOR */
.qe-hero .hero-txt{max-width:600px}
.qe-hero h1{font-size:38px}
.qe-hero .lead-p{color:#63553f; font-size:16px; line-height:1.6; margin-top:16px; max-width:540px}
.qe-data{margin-top:20px}
.qe-data .d{display:block; color:var(--laranja); font-size:22px; font-weight:900; text-transform:uppercase}
.qe-data .l{display:block; color:var(--azul); font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:4px}
.qe-motivos{background:#fff; padding:56px 0 50px; text-align:center}
.qe-motivos h2{color:var(--laranja2); font-size:30px; font-weight:800; text-transform:uppercase; margin-bottom:34px; line-height:1.15}
.qe-grid{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.qe-grid .m{flex:1 1 170px; max-width:200px; background:#fff; border-radius:14px; box-shadow:0 12px 34px rgba(120,80,30,.16); padding:24px 16px}
.qe-grid .s{width:84px; height:84px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center}
.qe-grid .s img{max-width:100%; max-height:100%; object-fit:contain; border-radius:12px}
.qe-grid h3{color:var(--azul); font-size:15px; font-weight:800; line-height:1.25}
.qe-conceito{background:var(--creme); padding:60px 0}
.qe-conceito-box{background:var(--azul); border-radius:6px; padding:40px; color:#fff; max-width:860px; margin:0 auto; text-align:center}
.qe-conceito-box h2{color:var(--laranja); font-size:28px; font-weight:800; text-transform:uppercase; line-height:1.2; margin-bottom:16px}
.qe-conceito-box p{font-size:15px; line-height:1.7; color:#e7ecf5}
.qe-faixa .btn-cta{margin-top:22px}
.qe-prova{background:#fff; padding:56px 0; text-align:center}
.qe-prova h2{color:var(--azul); font-size:26px; font-weight:800; line-height:1.3; max-width:760px; margin:0 auto 16px}
.qe-prova p{color:#5a616e; font-size:16px; line-height:1.6; max-width:680px; margin:0 auto}
.qe-final{background:var(--pessego); padding:56px 0; text-align:center}
.qe-final h2{color:var(--azul); font-size:26px; font-weight:800; line-height:1.3; max-width:760px; margin:0 auto 10px}
.qe-final p{color:var(--tinta); font-size:16px; font-weight:600; margin-bottom:6px}
.qe-badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.qe-badges span{background:var(--azul); color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:9px 20px; border-radius:999px}

/* CONTEUDO INTERNO (page/single) */
.page-content{max-width:820px; margin:50px auto 70px; padding:0 40px}
.page-content h1,.page-content h2{color:var(--azul); margin:.6em 0 .4em}
.page-content p{margin:0 0 1em; line-height:1.7}
.page-title{background:var(--creme); color:var(--azul); text-align:center; padding:46px 20px; border-bottom:3px dashed rgba(16,44,96,.2)}
.page-title h1{font-size:32px; font-weight:800; text-transform:uppercase}

/* ===== RESPONSIVO ===== */

/* Tablet e menor: menu vira hamburguer (5 itens não cabem em <980px) */
@media (max-width:980px){
  .wrap{padding:0 24px}
  .nav-toggle{display:block; z-index:30}
  .main-nav{position:absolute; top:100%; left:0; right:0; background:var(--creme); display:none; padding:10px 0 18px; box-shadow:0 14px 26px rgba(90,60,20,.18)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; gap:0; align-items:stretch}
  .main-nav li{border-top:1px solid rgba(16,44,96,.12)}
  .main-nav a{display:block; padding:13px 24px}
  .nav-search{display:none}
  .hero h1{font-size:34px}
  /* selos entram no fluxo (coluna ao lado do texto) — sem sobrepor o título */
  .hero-selos{position:static; height:auto; margin-left:24px; flex-shrink:0}
  .hero-selos .s{width:88px; height:88px}
  .cards .wrap{flex-wrap:wrap}
  .card{flex:1 1 45%}
  .qe-hero h1{font-size:30px}
  .qe-grid .m{flex:1 1 40%; max-width:none}
  .sobre .wrap{flex-direction:column}
  .galeria{flex-wrap:wrap}
  .galeria .g{flex:1 1 45%}
}

/* Celular */
@media (max-width:640px){
  .site-logo{height:44px}
  .hero .wrap{min-height:auto; flex-direction:column; align-items:flex-start; padding-top:36px; padding-bottom:36px}
  .hero h1{font-size:27px}
  .hero .lead{font-size:14px}
  .hero-txt{max-width:100%}
  /* selos viram fileira abaixo do CTA — identidade preservada no mobile */
  .hero-selos{flex-direction:row; margin:28px 0 0; gap:12px; width:100%; justify-content:flex-start}
  .hero-selos .s{width:74px; height:74px}
  .btn-cta{padding:14px 26px; font-size:14px}
  .count{gap:8px}
  .count .c{min-width:64px; padding:10px 8px 9px}
  .count b{font-size:24px}
  .count i{font-size:9.5px; letter-spacing:1.2px}
  .ticker{margin-top:44px; padding:11px 0}
  .tk span{font-size:12px; letter-spacing:2px}
  .cards{margin-top:-30px}
  .card{flex:1 1 100%}
  .sobre{margin-top:44px; padding:44px 0}
  .sobre-box{padding:26px 22px}
  .sobre-box h2{font-size:28px}
  .sobre-foto img{min-height:240px}
  .conheca h2{font-size:24px}
  .galeria .g{flex:1 1 100%; height:210px}
  .news{flex-direction:column}
  .frase-azul{padding:30px 0 46px}
  .frase-azul .selo{width:96px; right:14px; bottom:-18px}
  .frase-azul p{font-size:17px; padding:0 24px}
  .noticias{padding:44px 0}
  .noticias h2{font-size:23px}
  .site-footer .wrap{flex-direction:column; justify-content:center; text-align:center}
  .footer-data{text-align:center}
  .footer-data .d{font-size:20px}
  .page-content{padding:0 24px; margin:36px auto 50px}
  .page-title h1{font-size:24px}
  .qe-hero h1{font-size:25px}
  .qe-hero .lead-p{font-size:14px}
  .qe-data .d{font-size:18px}
  .qe-grid .m{flex:1 1 100%}
  .qe-grid .s{width:72px; height:72px}
  .qe-conceito{padding:44px 0}
  .qe-conceito-box{padding:28px 22px}
  .qe-conceito-box h2{font-size:22px}
  .qe-prova h2,.qe-final h2{font-size:21px}
  .qe-prova,.qe-final,.qe-motivos{padding:44px 0}
  .qe-motivos h2{font-size:24px}
  .qe-faixa{padding-bottom:38px}
}

/* Celular estreito */
@media (max-width:380px){
  .hero h1{font-size:24px}
  .hero-selos .s{width:64px; height:64px}
}

/* Acessibilidade: sem animação pra quem pediu */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .costura{width:130px; transition:none}
  .hero-selos .s{animation:none}
  .btn-cta::before{animation:none; display:none}
  .tk{animation:none}
  .montanhas img{transform:none}
  .site-header{transition:none}
}