/* =========================================================================
   CONCRELAGOS — identidade
   Paleta e tipografia extraídas do site oficial (concrelagos.com.br)
   ========================================================================= */

:root {
    --cl-gold:      #B47A18;   /* dourado principal da marca */
    --cl-gold-2:    #F3B007;   /* dourado de destaque */
    --cl-gold-dk:   #8F5F11;   /* hover */
    --cl-slate:     #2C363B;   /* cinza-chumbo do logotipo */
    --cl-slate-2:   #4C4C4C;
    --cl-gray:      #818A91;
    --cl-line:      #E4E4E4;
    --cl-soft:      #F6F6F6;
    --cl-white:     #FFFFFF;
    --cl-sans: 'Roboto', system-ui, -apple-system, sans-serif;
}
:root, [data-bs-theme=light] {
    --bs-primary: #B47A18; --bs-primary-rgb: 180,122,24;
    --bs-body-font-family: 'Roboto', system-ui, sans-serif;
    --bs-body-color: #4C4C4C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--cl-sans); color: var(--cl-slate-2); background: #fff; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
a.cl-btn, .cl-btn, .cl-burger { touch-action: manipulation; }

/* ---------------- Botões ---------------- */
.cl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 30px; border: 2px solid transparent; border-radius: 4px;
    font: 700 15px/1 var(--cl-sans); letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.cl-btn:active { transform: scale(.97); }
.cl-btn-gold  { background: var(--cl-gold); color: #fff; border-color: var(--cl-gold); }
.cl-btn-gold:hover  { background: var(--cl-gold-dk); border-color: var(--cl-gold-dk); color: #fff; }
.cl-btn-slate { background: var(--cl-slate); color: #fff; border-color: var(--cl-slate); }
.cl-btn-slate:hover { background: #1c2428; color: #fff; }
.cl-btn-out   { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.cl-btn-out:hover { background: rgba(255,255,255,.14); color: #fff; }
.cl-btn-sm { padding: 10px 20px; font-size: 13px; }
.cl-btn:focus-visible { outline: 3px solid rgba(180,122,24,.45); outline-offset: 2px; }

/* ---------------- Tipografia ---------------- */
.cl-kicker { display:inline-block; font:700 13px/1 var(--cl-sans); letter-spacing:.2em;
    text-transform:uppercase; color: var(--cl-gold); margin-bottom: 12px; }
.cl-h1 { font: 700 clamp(1.9rem, 4.2vw, 3.4rem)/1.1 var(--cl-sans); color:#fff; margin:0; text-wrap:balance; }
.cl-h2 { font: 700 clamp(1.6rem, 3vw, 2.5rem)/1.18 var(--cl-sans); color: var(--cl-slate); margin:0; }
.cl-h2.on-dark { color:#fff; }
.cl-h2 em { font-style: normal; color: var(--cl-gold); }
.cl-h3 { font: 700 1.2rem/1.25 var(--cl-sans); color: var(--cl-slate); margin:0 0 .5rem; }
.cl-lead { font: 400 clamp(1rem,1.2vw,1.15rem)/1.6 var(--cl-sans); color: rgba(255,255,255,.9); }
.cl-body { font: 400 1rem/1.7 var(--cl-sans); color: var(--cl-slate-2); }

.cl-sec { padding: 84px 0; }
.cl-sec.tight { padding: 56px 0; }
.cl-soft-bg { background: var(--cl-soft); }
.cl-dark-bg { background: var(--cl-slate); }

/* ---------------- Topbar ---------------- */
.cl-topbar { background: var(--cl-slate); color:#fff; font-size:.86rem; }
.cl-topbar a { color:#fff; text-decoration:none; }
.cl-topbar a:hover { color: var(--cl-gold-2); }
.cl-topbar .inner { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; }
.cl-topbar .fone { font-weight:700; letter-spacing:.04em; }
.cl-topbar .fone strong { color: var(--cl-gold-2); }

/* ---------------- Header ---------------- */
.cl-header { background:#fff; box-shadow: 0 2px 14px rgba(0,0,0,.07); position:sticky; top:0; z-index:60; }
.cl-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.cl-logo img { height:46px; width:auto; display:block; }
.cl-menu { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.cl-menu a { display:block; padding:10px 14px; text-decoration:none;
    font:500 14px/1 var(--cl-sans); letter-spacing:.04em; text-transform:uppercase; color: var(--cl-slate); }
.cl-menu a:hover { color: var(--cl-gold); }
.cl-burger { display:none; background:none; border:0; padding:8px; cursor:pointer; }
.cl-burger span { display:block; width:26px; height:3px; background: var(--cl-slate); margin:5px 0; border-radius:2px; }

/* ---------------- Hero / carrossel ---------------- */
.cl-hero { position:relative; }
.cl-slide { position:relative; min-height:560px; display:flex; align-items:center;
    background-size:cover; background-position:center; }
.cl-slide::after { content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(44,54,59,.92) 0%, rgba(44,54,59,.65) 45%, rgba(44,54,59,.15) 100%); }
.cl-slide > .container { position:relative; z-index:2; }
.cl-slide-body { max-width: 620px; padding: 70px 0; }
.cl-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.carousel-indicators [data-bs-target] { width:34px; height:4px; border-radius:2px; background:rgba(255,255,255,.55); border:0; }
.carousel-indicators .active { background: var(--cl-gold-2); }
.carousel-control-prev, .carousel-control-next { width:6%; opacity:.6; }

/* faixa de condição comercial */
.cl-strip { background: var(--cl-gold); color:#fff; }
.cl-strip .inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px 26px; padding:14px 0; font:700 .95rem/1.3 var(--cl-sans); text-align:center; }

/* ---------------- Números ---------------- */
.cl-stats { background: var(--cl-slate); color:#fff; }
.cl-stat { padding:30px 12px; text-align:center; }
.cl-stat .n { font:700 clamp(2rem,3vw,2.9rem)/1 var(--cl-sans); color: var(--cl-gold-2); }
.cl-stat .l { font-size:.9rem; opacity:.88; margin-top:7px; display:block; }

/* ---------------- Cards de serviço ---------------- */
.cl-card { background:#fff; border:1px solid var(--cl-line); border-radius:6px; overflow:hidden;
    height:100%; display:flex; flex-direction:column; transition: transform .2s, box-shadow .2s; }
.cl-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.10); }
.cl-card .ph { aspect-ratio:16/10; overflow:hidden; background:#eee; }
.cl-card .ph img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .45s; }
.cl-card:hover .ph img { transform: scale(1.06); }
.cl-card .bd { padding:22px 20px 24px; flex:1; display:flex; flex-direction:column; }
.cl-card p { font-size:.94rem; line-height:1.6; color: var(--cl-slate-2); margin:0 0 16px; }
/* min-height garante alvo de toque confortável no celular */
.cl-card .lnk { margin-top:auto; font:700 .86rem/1 var(--cl-sans); letter-spacing:.1em;
    text-transform:uppercase; color: var(--cl-gold); text-decoration:none;
    display:inline-flex; align-items:center; min-height:44px; align-self:flex-start; }
.cl-card .lnk:hover { color: var(--cl-gold-dk); }

/* ---------------- Tabela fck ---------------- */
.cl-tbl-wrap { border:1px solid var(--cl-line); border-radius:6px; overflow:hidden; background:#fff; }
.cl-tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cl-tbl { width:100%; border-collapse:collapse; min-width:640px; }
.cl-tbl thead th { background: var(--cl-slate); color:#fff; font:700 12px/1 var(--cl-sans);
    letter-spacing:.14em; text-transform:uppercase; padding:15px 18px; text-align:left; white-space:nowrap; }
.cl-tbl td { padding:15px 18px; border-top:1px solid var(--cl-line); vertical-align:middle; }
.cl-tbl tbody tr:hover { background:#FAF8F4; }
.cl-tbl .mpa { font:700 1.35rem/1 var(--cl-sans); color: var(--cl-slate); white-space:nowrap; }
.cl-tbl .uso { font-size:.94rem; line-height:1.5; color: var(--cl-slate-2); }
.cl-tbl .cls { display:inline-block; padding:5px 12px; border-radius:3px; background:#F3EADA;
    font:700 12px/1 var(--cl-sans); letter-spacing:.1em; color: var(--cl-gold-dk); white-space:nowrap; }
.cl-tbl tr.dest { background:#FCF6EC; }
.cl-tbl tr.dest .cls { background: var(--cl-gold); color:#fff; }

/* ---------------- Bloco institucional ---------------- */
.cl-vmv { background:#fff; border-top:4px solid var(--cl-gold); border-radius:6px;
    padding:30px 26px; height:100%; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.cl-vmv h3 { font:700 1.05rem/1 var(--cl-sans); letter-spacing:.14em; text-transform:uppercase;
    color: var(--cl-gold); margin-bottom:12px; }
.cl-vmv p { font-size:.96rem; line-height:1.65; margin:0; color: var(--cl-slate-2); }

/* barras de atuação */
.cl-bar-item { margin-bottom:20px; }
.cl-bar-item .top { display:flex; justify-content:space-between; font-weight:700;
    font-size:.94rem; color: var(--cl-slate); margin-bottom:7px; }
.cl-bar { height:8px; background: var(--cl-line); border-radius:4px; overflow:hidden; }
.cl-bar i { display:block; height:100%; background: var(--cl-gold); border-radius:4px; }

/* ---------------- Unidades ---------------- */
.cl-unit { background:#fff; border:1px solid var(--cl-line); border-radius:6px; padding:22px 20px; height:100%; }
.cl-unit h4 { font:700 1.05rem/1.2 var(--cl-sans); color: var(--cl-slate); margin:0 0 10px; }
.cl-unit p { font-size:.9rem; line-height:1.55; color: var(--cl-slate-2); margin:0 0 4px; }

/* ---------------- Galeria ---------------- */
.cl-gal { position:relative; overflow:hidden; border-radius:6px; display:block; }
.cl-gal img { width:100%; height:100%; min-height:200px; object-fit:cover; display:block; transition: transform .45s; }
.cl-gal:hover img { transform: scale(1.07); }
.cl-gal span { position:absolute; inset:auto 0 0 0; padding:30px 14px 12px; color:#fff;
    font-weight:700; font-size:.95rem; background: linear-gradient(0deg, rgba(44,54,59,.9), transparent); }

/* ---------------- Footer ---------------- */
.cl-footer { background: var(--cl-slate); color: rgba(255,255,255,.82); }
.cl-footer a { color: rgba(255,255,255,.82); text-decoration:none; }
.cl-footer a:hover { color: var(--cl-gold-2); }
.cl-footer h6 { font:700 1rem/1 var(--cl-sans); letter-spacing:.1em; text-transform:uppercase;
    color:#fff; margin-bottom:16px; }
.cl-footer ul { list-style:none; margin:0; padding:0; }
.cl-footer li { margin-bottom:9px; font-size:.93rem; }
.cl-footer-bottom { border-top:1px solid rgba(255,255,255,.14); padding:18px 0; font-size:.85rem; }
.cl-footer .logo-f img { height:52px; width:auto; filter: brightness(0) invert(1); }

/* aviso de contato pendente */
.cl-pending {
    background:#FFF8E6; border:1px solid #F0D89B; border-radius:6px;
    padding:14px 18px; font-size:.9rem; color:#7A5A11;
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 991.98px) {
    .cl-sec { padding: 52px 0; }
    .cl-sec.tight { padding: 38px 0; }
    .cl-burger { display:block; }
    .cl-nav { position:relative; }
    .cl-menu { position:absolute; left:0; right:0; top:100%; background:#fff; flex-direction:column;
        align-items:stretch; gap:0; padding:6px 0 14px; display:none;
        box-shadow:0 14px 24px rgba(0,0,0,.12); border-top:1px solid var(--cl-line); }
    .cl-menu.open { display:flex; }
    .cl-menu li { padding:0 16px; }
    .cl-menu li:not(:last-child) { border-bottom:1px solid var(--cl-line); }
    .cl-menu a { padding:14px 0; font-size:15px; }
    .cl-menu .cl-btn { width:100%; margin-top:12px; }

    .cl-slide { min-height:430px; }
    .cl-slide::after { background: linear-gradient(180deg, rgba(44,54,59,.86) 0%, rgba(44,54,59,.78) 60%, rgba(44,54,59,.92) 100%); }
    .cl-slide-body { padding:48px 0; max-width:none; }
    .cl-hero-actions .cl-btn { width:100%; }
    .carousel-control-prev, .carousel-control-next { display:none; }

    .cl-topbar .inner { justify-content:center; text-align:center; }
    .cl-topbar .social { display:none; }
    section[id] { scroll-margin-top: 82px; }
}

@media (max-width: 575.98px) {
    .cl-slide { min-height:380px; }
    .cl-logo img { height:38px; }
    .cl-stat { padding:22px 8px; }
    .cl-tbl td { padding:12px 14px; }
    .cl-card .ph { aspect-ratio:16/9; }
}

/* ===== V2: banner único + cards de resistência ===== */
.cl-hero-static .cl-slide { min-height: 600px; }
.cl-fck { background:#fff; border:1px solid var(--cl-line); border-left:4px solid var(--cl-gold);
    border-radius:6px; padding:26px 24px; height:100%; transition: transform .2s, box-shadow .2s; }
.cl-fck:hover { transform: translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.09); }
.cl-fck .cls { display:inline-block; padding:5px 12px; border-radius:3px; background:#F3EADA;
    font:700 12px/1 var(--cl-sans); letter-spacing:.1em; color: var(--cl-gold-dk); margin-bottom:12px; }
.cl-fck .mpa { font:700 1.9rem/1 var(--cl-sans); color: var(--cl-slate); margin:0 0 .5rem; }
.cl-fck p { font-size:.93rem; line-height:1.6; color: var(--cl-slate-2); margin:0; }
.cl-fck.dest { border-left-color: var(--cl-gold-2); background:#FCF6EC; }
.cl-fck.dest .cls { background: var(--cl-gold); color:#fff; }
/* serviços em 2 colunas */
.cl-card-wide .ph { aspect-ratio: 16/8; }
@media (max-width: 991.98px) { .cl-hero-static .cl-slide { min-height: 440px; } }
@media (max-width: 575.98px) { .cl-fck { padding:20px 18px; } .cl-fck .mpa { font-size:1.6rem; } }

/* ===== WhatsApp ===== */
.cl-btn-wpp { background:#25D366; color:#fff; border-color:#25D366; }
.cl-btn-wpp:hover { background:#1DA851; border-color:#1DA851; color:#fff; }
.cl-topbar .fone strong { color:#F3B007; }
.cl-wbar { position:fixed; left:0; right:0; bottom:0; z-index:1040; display:none;
    background:#fff; border-top:1px solid var(--cl-line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(0,0,0,.14); }
.cl-wbar .cl-btn { width:100%; padding:15px 20px; font-size:15px; }
@media (max-width: 991.98px) { .cl-wbar { display:block; } body { padding-bottom:78px; } }
@media (min-width: 992px) { .cl-wbar { display:none !important; } body { padding-bottom:0 !important; } }