/* =================================================================
   AMERICANO TELHAS — Apple-inspired design
   ================================================================= */

/* ====== RESET & BASE ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
section[id], article[id], .feature[id] { scroll-margin-top: 96px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; }

/* ====== TOKENS ====== */
:root {
    /* paleta — extraída da logo oficial */
    --ink:        #0B1729;            /* azul marinho profundo (cor da marca) */
    --ink-soft:   #4a4f5c;            /* texto secundário */
    --ink-dim:    #8b909d;            /* texto desfocado */
    --line:       #e4e6eb;            /* divisórias */
    --paper:      #ffffff;            /* base branca */
    --paper-soft: #f5f5f7;            /* off-white (apple-ish) */
    --paper-warm: #fafafa;            /* warm white */
    --dark:       #070D1F;            /* dark mode — azul quase preto */
    --dark-2:     #0B1729;
    --accent:     #C8242D;            /* vermelho clássico da logo */
    --accent-soft:#D62B2B;
    --accent-deep:#A81E26;
    --brand-blue: #0B1729;            /* mesmo do ink, identidade unificada */
    --wa:         #25D366;
    --wa-dark:    #1ea855;

    /* tipografia escalas (clamp pra responsivo automático) */
    --fs-hero:    clamp(2.25rem, 5.6vw, 4.75rem);
    --fs-h1:      clamp(2.5rem, 6vw, 5rem);
    --fs-h2:      clamp(2rem, 4.5vw, 3.5rem);
    --fs-h3:      clamp(1.5rem, 3vw, 2.25rem);
    --fs-lead:    clamp(1.125rem, 1.6vw, 1.5rem);
    --fs-body:    1.0625rem;
    --fs-small:   0.875rem;
    --fs-eyebrow: 0.75rem;

    /* espaçamento */
    --sp-section: clamp(80px, 12vw, 180px);
    --sp-block:   clamp(48px, 8vw, 96px);

    /* containers */
    --cw-wide:    1280px;
    --cw-narrow:  860px;
    --cw-tight:   720px;

    --r:          18px;
    --r-sm:       10px;

    /* curva de easing apple */
    --ease:       cubic-bezier(.4, 0, .2, 1);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);
}

/* ====== CONTAINERS ====== */
.container-wide   { max-width: var(--cw-wide);   margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--cw-narrow); margin: 0 auto; padding: 0 32px; }
.container-tight  { max-width: var(--cw-tight);  margin: 0 auto; padding: 0 32px; }

/* ====== HEADER ====== */
.nav-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(7, 13, 31, .45);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), height .35s var(--ease);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.nav-header.scrolled {
    background: rgba(7, 13, 31, .9);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom-color: rgba(255,255,255,.08);
}

.nav-inner {
    max-width: var(--cw-wide);
    margin: 0 auto;
    padding: 0 32px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.nav-header.scrolled .nav-inner { height: 68px; transition: height .35s var(--ease); }

.nav-logo {
    display: inline-flex;
    align-items: center;
    transition: opacity .2s;
}
.nav-logo:hover { opacity: .8; }
.nav-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-menu {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-left: auto;
}
.nav-menu > a,
.nav-dropdown-trigger {
    color: var(--paper);
    font-size: .9375rem;
    font-weight: 500;
    opacity: .85;
    transition: opacity .2s, color .2s;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    line-height: 1;
}
.nav-menu > a:hover,
.nav-dropdown-trigger:hover { opacity: 1; color: var(--accent); }

/* DROPDOWN */
.nav-dropdown { position: relative; }
.nav-dropdown-chev {
    transition: transform .25s var(--ease);
    margin-top: 2px;
}
.nav-dropdown.open .nav-dropdown-chev { transform: rotate(180deg); }
.nav-dropdown.open .nav-dropdown-trigger { color: var(--accent); opacity: 1; }

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 240px;
    /* padding-top funciona como ponte invisível entre o trigger e o menu visível */
    padding: 16px 8px 8px 8px;
    background: transparent;
    border: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility .25s;
}
.nav-dropdown-menu-inner {
    background: rgba(11, 23, 41, .92);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 24px 64px -16px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu-inner a {
    display: block;
    padding: 12px 16px;
    color: rgba(255,255,255,.85);
    font-size: .9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background .2s var(--ease), color .2s, padding-left .2s var(--ease);
}
.nav-dropdown-menu-inner a:hover {
    background: rgba(255,255,255,.06);
    color: var(--paper);
    padding-left: 22px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--wa);
    color: var(--paper) !important;
    border-radius: 999px;
    font-size: .9375rem;
    box-shadow: 0 4px 16px -4px rgba(37,211,102,.4);
    font-weight: 600;
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover {
    background: var(--wa-dark);
    color: var(--paper) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -4px rgba(37,211,102,.55);
}

.nav-toggle { display: none; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { width: 22px; height: 1.5px; background: currentColor; transition: transform .3s; }

/* ====== HERO ====== */
.hero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    color: var(--paper);
    overflow: hidden;
    isolation: isolate;
}
.hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
        radial-gradient(1200px 600px at 80% 20%, rgba(230,57,70,.22), transparent 60%),
        radial-gradient(900px 500px at 10% 80%, rgba(11,23,41,.7), transparent 50%),
        linear-gradient(140deg, #050B17 0%, #0B1729 50%, #162647 100%);
}
.hero-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
/* Textura sutil de telha trapezoidal — linhas diagonais minimalistas */
.hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(135deg,
            transparent 0,
            transparent 48px,
            rgba(255,255,255,.025) 48px,
            rgba(255,255,255,.025) 50px,
            transparent 50px,
            transparent 96px,
            rgba(255,255,255,.04) 96px,
            rgba(255,255,255,.04) 98px,
            transparent 98px,
            transparent 144px);
    background-size: 144px 144px;
    opacity: .9;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}

.hero-content {
    max-width: var(--cw-wide);
    margin: 0 auto;
    padding: 110px 32px 56px;
    width: 100%;
    z-index: 2;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
}
.hero-text { min-width: 0; }
.hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.8);
    margin-bottom: 32px;
}
.hero-title {
    font-size: var(--fs-hero);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -.04em;
    margin-bottom: 22px;
    color: var(--paper);
    max-width: 1100px;
}
.hero-title-accent {
    background: linear-gradient(105deg, #fff 0%, #f6e3e4 25%, #E63946 65%, #C8242D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.hero-lead {
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: rgba(255,255,255,.78);
    max-width: 620px;
    margin-bottom: 32px;
    font-weight: 400;
}
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.hero-microtext {
    margin-top: 14px;
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
}

/* ===== HERO CARD (foto + credenciais) ===== */
.hero-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(13,27,53,.5) 0%, rgba(5,11,23,.85) 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 36px 90px -20px rgba(0,0,0,.75),
        0 0 0 1px rgba(255,255,255,.02),
        inset 0 1px 0 rgba(255,255,255,.06);
    isolation: isolate;
    max-width: 600px;
    margin-left: auto;
    width: 100%;
}

.hero-card-photo {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--dark);
}
.hero-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A foto é 16:9 e o card é 4:3, então sobra corte nas laterais.
       75% joga o enquadramento pra direita: entra a placa inteira e os três
       caminhões, e sai a sombra do fotógrafo que ficava no canto esquerdo. */
    object-position: 75% center;
    display: block;
    transition: transform 1.4s var(--ease-out);
}
.hero-card:hover .hero-card-img { transform: scale(1.04); }

.hero-card-photo-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(5,11,23,.3) 88%, rgba(5,11,23,.85) 100%);
    pointer-events: none;
}

.hero-card-tagline {
    padding: 26px 30px;
    background: linear-gradient(180deg, rgba(11,23,41,.7) 0%, rgba(7,13,31,.94) 100%);
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    font-weight: 500;
    letter-spacing: -.005em;
    margin: 0;
}

@media (max-width: 860px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-card { margin: 12px auto 0; max-width: 560px; }
}
@media (max-width: 540px) {
    .hero-card-tagline { padding: 22px 22px; font-size: .9375rem; }
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.4);
    z-index: 2;
}
.hero-scroll span {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,.7);
    animation: scrollDot 1.8s var(--ease-out) infinite;
}
@keyframes scrollDot {
    0% { opacity: 0; transform: translate(-50%, 0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ====== BUTTONS ====== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--wa);
    color: #fff !important;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
    box-shadow: 0 8px 24px -8px rgba(37,211,102,.5);
}
.btn-primary:hover {
    background: var(--wa-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(37,211,102,.6);
}
.btn-primary.btn-xl { padding: 22px 40px; font-size: 1.0625rem; }
.btn-primary.btn-on-dark { box-shadow: 0 10px 30px -8px rgba(37,211,102,.4); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
    color: var(--paper) !important;
    font-size: .9375rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

/* ====== TRUST BAR (prova social abaixo do hero) ====== */
.trust-bar {
    background: #050b18;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.trust-bar::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(800px 200px at 50% 50%, rgba(200,36,45,.06), transparent 70%);
    pointer-events: none;
}
.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
    z-index: 1;
}
.trust-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 14px;
    flex: 1;
    justify-content: center;
}
.trust-icon {
    color: var(--accent);
    flex-shrink: 0;
}
.trust-text { display: flex; flex-direction: column; gap: 2px; }
.trust-num {
    font-size: clamp(.95rem, 1.2vw, 1.0625rem);
    font-weight: 700;
    color: var(--paper);
    letter-spacing: -.01em;
    line-height: 1.2;
}
.trust-label {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
    line-height: 1.3;
}
.trust-sep {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .trust-bar-inner { flex-wrap: wrap; gap: 16px 0; padding: 18px 0; }
    .trust-item { flex: 1 1 50%; padding: 8px 0; }
    .trust-sep { display: none; }
}

/* ====== SHOWCASE (split: texto à esq. + foto à dir.) ====== */
.showcase {
    position: relative;
    background: var(--dark);
    overflow: hidden;
    padding: var(--sp-section) 0;
    color: var(--paper);
}
.showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(200,36,45,.10), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(11,23,41,.6), transparent 60%);
    pointer-events: none;
}

.showcase-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.showcase-text-col {
    max-width: 540px;
}

.showcase-h {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--paper);
    margin-bottom: 20px;
    margin-top: 16px;
}
.showcase-accent {
    background: linear-gradient(105deg, #fff 0%, #f6e3e4 30%, #E63946 70%, #C8242D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.showcase-text {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255,255,255,.75);
    margin-bottom: 28px;
}

/* .link-arrow-light vive junto de .link-arrow (lá embaixo). Se ficar aqui em cima,
   a regra .link-arrow sobrescreve a cor e o link some no fundo escuro. */

/* Coluna da foto (com placeholder SVG ou imagem real) */
.showcase-photo-col {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.showcase-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.showcase-photo-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.showcase-illustration {
    width: 100%;
    height: 100%;
    display: block;
}
.photo-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    background: rgba(11,23,41,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 7px 13px;
    border-radius: 999px;
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 980px) {
    .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
    .showcase-text-col { max-width: 100%; }
    .showcase-photo-col { aspect-ratio: 16/10; }
}

/* ====== SECTIONS BASE ====== */
.section {
    padding: var(--sp-section) 0;
    background: var(--paper);
}
.section-light { background: var(--paper); }
.section-soft { background: var(--paper-soft); }
.section-brand {
    background: linear-gradient(180deg, var(--brand-blue) 0%, var(--dark) 100%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.section-brand::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(700px 480px at 12% 8%, rgba(200,36,45,.18), transparent 60%),
        radial-gradient(800px 560px at 90% 92%, rgba(255,255,255,.05), transparent 65%);
    pointer-events: none;
}
.section-brand > .container-wide,
.section-brand > .container-narrow,
.section-brand > .container-tight { position: relative; z-index: 1; }

.section-dark-deep {
    background: var(--dark);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.section-dark-deep::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(900px 600px at 50% 0%, rgba(200,36,45,.08), transparent 60%);
    pointer-events: none;
}
.section-dark-mid {
    background: linear-gradient(180deg, #0e1a33 0%, var(--brand-blue) 100%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.section-dark-mid::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(700px 480px at 88% 12%, rgba(200,36,45,.14), transparent 60%),
        radial-gradient(800px 560px at 10% 90%, rgba(255,255,255,.04), transparent 65%);
    pointer-events: none;
}
.section-dark-soft {
    background: linear-gradient(180deg, var(--brand-blue) 0%, #0e1a33 100%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.section-dark-soft::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(700px 480px at 50% 0%, rgba(200,36,45,.10), transparent 60%);
    pointer-events: none;
}
.section-dark-deep > .container-wide,
.section-dark-deep > .container-narrow,
.section-dark-deep > .container-tight,
.section-dark-mid > .container-wide,
.section-dark-mid > .container-narrow,
.section-dark-mid > .container-tight,
.section-dark-soft > .container-wide,
.section-dark-soft > .container-narrow,
.section-dark-soft > .container-tight { position: relative; z-index: 1; }

/* ====== Overrides pra componentes em fundo dark ====== */
/* Story / Sobre */
.section-dark-mid .big-story,
.section-dark-deep .big-story,
.section-dark-soft .big-story { color: rgba(255,255,255,.92); }
.section-dark-mid .big-story strong,
.section-dark-deep .big-story strong,
.section-dark-soft .big-story strong { color: var(--paper); }

/* FAQ */
.section-dark-soft .faq-item,
.section-dark-mid .faq-item,
.section-dark-deep .faq-item { border-bottom-color: rgba(255,255,255,.1); }
.section-dark-soft .faq-item summary,
.section-dark-mid .faq-item summary,
.section-dark-deep .faq-item summary { color: var(--paper); }
.section-dark-soft .faq-item summary:hover,
.section-dark-mid .faq-item summary:hover,
.section-dark-deep .faq-item summary:hover { color: var(--accent-soft); }
.section-dark-soft .faq-body,
.section-dark-mid .faq-body,
.section-dark-deep .faq-body { color: rgba(255,255,255,.7); }

/* Gallery em fundo dark — destacar moldura e meta */
.section-dark-deep .gallery-placeholder,
.section-dark-mid .gallery-placeholder,
.section-dark-soft .gallery-placeholder {
    background: linear-gradient(135deg, #122347 0%, #0a1730 100%);
    border: 1px solid rgba(255,255,255,.06);
}
.section-dark-deep .gallery-meta,
.section-dark-mid .gallery-meta,
.section-dark-soft .gallery-meta {
    color: rgba(255,255,255,.9);
    background: rgba(11,23,41,.7);
    backdrop-filter: blur(6px);
}
.section-dark-deep .gallery-item:has(.gallery-img:not([style*="display:none"])) .gallery-meta,
.section-dark-mid .gallery-item:has(.gallery-img:not([style*="display:none"])) .gallery-meta,
.section-dark-soft .gallery-item:has(.gallery-img:not([style*="display:none"])) .gallery-meta {
    background: rgba(11,23,41,.75);
    color: var(--paper);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.section-head {
    margin-bottom: var(--sp-block);
    max-width: 800px;
}
.section-head-dark { color: var(--paper); }
.eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 18px;
}
.eyebrow-light { color: var(--accent-soft); }

.section-h {
    font-size: var(--fs-h1);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.035em;
    color: inherit;
}
.section-h .dim { color: var(--ink-dim); font-weight: 700; }
.section-head-dark .section-h .dim { color: rgba(255,255,255,.4); }

/* ====== APLICAÇÕES ====== */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.app-card {
    padding: 40px 32px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    transition: transform .35s var(--ease-out), border-color .35s var(--ease), box-shadow .35s var(--ease);
    position: relative;
    overflow: hidden;
}
.app-card::before {
    content: '';
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}
.app-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200,36,45,.2);
    box-shadow: 0 18px 40px -16px rgba(11,23,41,.15);
}
.app-card:hover::before { transform: scaleX(1); }

.app-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--paper-soft) 0%, #e7ebf2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    margin-bottom: 24px;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.app-card:hover .app-icon {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--paper);
}
.app-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 10px;
}
.app-desc {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

@media (max-width: 980px) {
    .apps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .apps-grid { grid-template-columns: 1fr; }
    .app-card { padding: 32px 24px; }
    .app-icon { width: 52px; height: 52px; }
}

/* ====== POR QUE AMERICANO (pilares) ====== */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.pillar {
    position: relative;
    padding-top: 32px;
}
.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--accent);
    transition: width .4s var(--ease-out);
}
.pillar:hover::before { width: 100%; }

.pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 24px;
    box-shadow: 0 8px 24px -12px rgba(11,23,41,.12);
}
.pillar-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.2;
}
.pillar-desc {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.pillar-num {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--accent);
    margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
}

/* Pilares dentro de section-brand (fundo azul) */
.section-brand .pillar-icon {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    color: var(--accent);
    backdrop-filter: blur(8px);
}
.section-brand .pillar-title { color: var(--paper); }
.section-brand .pillar-desc { color: rgba(255,255,255,.65); }
.section-brand .pillar::before { background: var(--accent); }

@media (max-width: 980px) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 540px) {
    .pillars-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ====== PRODUTOS (cards estilo print — foto + texto + SAIBA MAIS) ====== */
.categoria-divisor {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 28px;
    padding: 12px 0;
}
.categoria-divisor:not(:first-of-type) { margin-top: 64px; }
.categoria-num {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .2em;
    font-variant-numeric: tabular-nums;
}
.categoria-titulo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--paper);
    letter-spacing: -.01em;
}
.categoria-linha {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 0;
}
.product-card {
    background: var(--paper);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
    box-shadow: 0 10px 30px -18px rgba(0,0,0,.35);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 36px 80px -28px rgba(0,0,0,.5),
        0 0 0 1px rgba(200,36,45,.25),
        0 12px 48px -16px rgba(200,36,45,.4);
}
.product-card-visual {
    position: relative;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #f3f4f7, #e7e8ed);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card-visual::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(400px 280px at 30% 30%, rgba(230,57,70,.07), transparent 60%),
        radial-gradient(360px 280px at 80% 80%, rgba(11,23,41,.1), transparent 70%);
}
.product-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform .8s var(--ease-out);
}
.product-card:hover .product-card-img { transform: scale(1.04); }
.product-card-placeholder {
    position: relative;
    z-index: 1;
    color: var(--ink-dim);
    opacity: .35;
}
.product-card-body {
    padding: 32px 32px 36px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card-title {
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 16px;
    line-height: 1.15;
}
.product-card-text {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 28px;
    flex: 1;
}

/* SAIBA MAIS — link vermelho com seta */
.saiba-mais {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--accent);
    text-transform: uppercase;
    margin-top: auto;
    transition: gap .3s var(--ease-out), color .3s var(--ease-out);
}
.saiba-mais:hover {
    color: var(--accent-deep);
    gap: 14px;
}
.saiba-mais svg {
    transition: transform .3s var(--ease-out);
}
.saiba-mais:hover svg { transform: translateX(3px); }

/* selo de garantia nos cards de telha */
.product-warranty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-dim);
}
.product-warranty svg { color: var(--accent); flex-shrink: 0; }

/* ====== CARD GALVALUME × GALVANIZADO ====== */
.galvalume-card {
    margin-top: 56px;
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 38px);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3.5vw, 44px);
    align-items: stretch;
}
.galvalume-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(620px 360px at 80% 0%, rgba(200,36,45,.06), transparent 60%);
    pointer-events: none;
}

/* coluna imagem — estica pra altura do texto */
.galvalume-figure {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.galvalume-figure-media {
    position: relative;
    flex: 1;
    min-height: 300px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-soft);
}
.galvalume-illus,
.galvalume-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.galvalume-photo { object-fit: cover; }
.galvalume-figcaption {
    margin-top: 12px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-dim);
    text-align: center;
}
.galvalume-figcaption strong { color: var(--ink-soft); font-weight: 600; }

/* coluna conteúdo */
.galvalume-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.galvalume-badge {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.galvalume-title {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.16;
    margin-bottom: 12px;
}
.galvalume-hl { color: var(--accent); }
.galvalume-sub {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 22px;
}

/* número-âncora */
.galvalume-anchor {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(200,36,45,.08), rgba(200,36,45,.02));
    border: 1px solid rgba(200,36,45,.2);
    border-radius: 14px;
}
.galvalume-anchor-num {
    flex-shrink: 0;
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--accent);
}
.galvalume-anchor-txt {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}

/* lista de vantagens */
.galvalume-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.galvalume-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.galvalume-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent);
}
.galvalume-list strong { color: var(--ink); font-weight: 600; }

/* CTA + garantia */
.galvalume-cta {
    align-self: flex-start;
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    transition: gap .3s var(--ease-out), color .3s var(--ease-out);
}
.galvalume-cta:hover { gap: 14px; color: var(--accent-deep); }
.galvalume-warranty {
    align-self: flex-start;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ink-dim);
}
.galvalume-warranty svg { color: var(--accent); flex-shrink: 0; }
.galvalume-warranty strong { color: var(--ink-soft); font-weight: 600; }

/* selo de material nos cards de telha */
.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: rgba(11,23,41,.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.product-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,36,45,.25);
}

@media (max-width: 760px) {
    .galvalume-card { grid-template-columns: 1fr; gap: 22px; padding: clamp(18px,5vw,26px); }
    .galvalume-figure-media { min-height: 240px; }
    .galvalume-anchor { padding: 14px 16px; gap: 12px; }
}

/* ====== PRODUTOS (zigzag layout — legado, mantido por compatibilidade) ====== */
.product-row {
    padding: var(--sp-block) 0;
}
.product-row + .product-row { border-top: 1px solid var(--line); }
.product-grid {
    max-width: var(--cw-wide);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.product-row-alt .product-grid > :first-child { order: 1; }

.product-visual {
    position: relative;
    aspect-ratio: 4/5;
    min-height: 480px;
}
.visual-frame {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #f3f4f7, #e7e8ed);
    border-radius: var(--r);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform .6s var(--ease-out);
}
.visual-frame::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(600px 400px at 30% 30%, rgba(230,57,70,.07), transparent 60%),
        radial-gradient(500px 400px at 80% 80%, rgba(11,23,41,.1), transparent 70%);
}
.visual-frame.visual-dark {
    background: linear-gradient(135deg, var(--dark) 0%, var(--brand-blue) 60%, #162647 100%);
    color: rgba(255,255,255,.4);
}
.visual-frame.visual-dark::before {
    background:
        radial-gradient(600px 400px at 70% 30%, rgba(230,57,70,.22), transparent 60%),
        radial-gradient(500px 400px at 20% 80%, rgba(37,211,102,.08), transparent 70%);
}
.product-visual:hover .visual-frame { transform: scale(1.01); }

/* Imagem real do produto (sobrepõe o placeholder quando disponível) */
.visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r);
    z-index: 1;
}

.visual-tag {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--ink-dim);
    z-index: 2;
}
.visual-frame.visual-dark .visual-tag { color: rgba(255,255,255,.5); }

.visual-placeholder {
    position: relative; z-index: 1;
    color: var(--ink-dim);
    opacity: .35;
}
.visual-frame.visual-dark .visual-placeholder { color: rgba(255,255,255,.4); }

.product-info { max-width: 540px; }
.product-step {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 20px;
}
.product-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
    margin-bottom: 24px;
}
.product-text {
    font-size: var(--fs-lead);
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 32px;
}
.product-bullets {
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.product-bullets li {
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
}
.product-bullets li::before {
    content: ''; position: absolute;
    left: 0; top: 17px;
    width: 14px; height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 4px;
    transition: gap .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover {
    gap: 14px;
    color: var(--accent);
    border-color: var(--accent);
}
/* Versão pra fundo escuro. Precisa vir DEPOIS de .link-arrow, senão perde a cor. */
.link-arrow-light {
    color: var(--paper);
    border-bottom-color: rgba(255,255,255,.5);
}
.link-arrow-light:hover {
    color: var(--accent-soft);
    border-bottom-color: var(--accent-soft);
}

/* ====== STATS (DARK) ====== */
.stats {
    background: var(--dark);
    color: var(--paper);
    padding: var(--sp-section) 0;
    position: relative;
    overflow: hidden;
}
.stats::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(800px 400px at 80% 0%, rgba(230,57,70,.16), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(22,38,71,.6), transparent 50%);
    pointer-events: none;
}
.stats > * { position: relative; z-index: 1; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: var(--sp-block) 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.stat {
    padding: 48px 32px;
    border-right: 1px solid rgba(255,255,255,.1);
}
.stat:last-child { border-right: none; }
.stat-num {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--paper);
    margin-bottom: 16px;
}
.stat-num span {
    font-size: .55em;
    color: rgba(255,255,255,.5);
    font-weight: 500;
}
.stat-label {
    font-size: .9375rem;
    color: rgba(255,255,255,.65);
    line-height: 1.45;
    max-width: 220px;
}
.stats-cta { text-align: center; margin-top: var(--sp-block); }

/* ====== FEATURES / DIFERENCIAIS ====== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.feature {
    background: var(--paper);
    padding: 56px 40px;
    transition: background .35s var(--ease);
    position: relative;
}
.feature:hover { background: var(--paper-soft); }
.feature-num {
    font-size: .75rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .15em;
    margin-bottom: 24px;
}
.feature-h {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 16px;
}
.feature-p {
    color: var(--ink-soft);
    line-height: 1.55;
    font-size: 1rem;
}

/* ====== GALERIA / PROJETOS ====== */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 16px;
}
.gallery-item {
    overflow: hidden;
    border-radius: var(--r);
    position: relative;
    transition: transform .5s var(--ease-out);
}
.gallery-item:hover { transform: translateY(-4px); }
.gallery-tall { grid-row: span 2; }
.gallery-wide { grid-column: span 2; }

/* Imagem real do projeto (sobrepõe quando disponível) */
.gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.gallery-img + .gallery-placeholder .gallery-meta { z-index: 2; }
.gallery-item:has(.gallery-img:not([style*="display:none"])) .gallery-meta {
    background: rgba(255,255,255,.95);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.gallery-placeholder {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--paper-soft) 0%, #e7e8ed 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
}
.gallery-placeholder::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(400px 300px at 50% 20%, rgba(14,27,51,.06), transparent 70%),
        linear-gradient(180deg, transparent 50%, rgba(0,0,0,.08) 100%);
}
.gallery-meta {
    position: relative; z-index: 1;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 999px;
}

/* ====== SOBRE — layout 2 colunas (foto + história) ====== */
.sobre-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: center;
}
.sobre-photo {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r);
    overflow: hidden;
    background: linear-gradient(135deg, #122347 0%, #0a1730 100%);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.sobre-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.sobre-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255,255,255,.25);
}
.sobre-photo-tag {
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.35);
}
.sobre-content { max-width: 580px; }
.sobre-content .section-head { margin-bottom: 32px; }

.big-story {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 24px;
}
.big-story strong { font-weight: 700; color: var(--ink); }

.sobre-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255,255,255,.7);
    margin-bottom: 18px;
}
.section-dark-mid .sobre-text strong,
.section-dark-deep .sobre-text strong,
.section-dark-soft .sobre-text strong { color: var(--paper); font-weight: 700; }

.sobre-assinatura {
    position: relative;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sobre-assinatura::before {
    content: '"';
    position: absolute;
    top: 6px;
    left: -8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 140px;
    line-height: 1;
    color: rgba(200,36,45,.18);
    font-weight: 700;
    pointer-events: none;
}
.sobre-assinatura > * { position: relative; }
.sobre-quote {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 500;
    color: var(--paper);
    font-style: italic;
    letter-spacing: -.015em;
    line-height: 1.3;
}
.sobre-author {
    font-size: .8125rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 980px) {
    .sobre-grid { grid-template-columns: 1fr; gap: 48px; }
    .sobre-photo { aspect-ratio: 4/3; max-width: 480px; }
    .sobre-content { max-width: 100%; }
}

/* ====== FAQ ====== */
.faq {
    border-top: 1px solid var(--line);
}
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }

.faq-plus {
    width: 20px; height: 20px;
    position: relative;
    flex-shrink: 0;
    transition: transform .35s var(--ease);
}
.faq-plus::before, .faq-plus::after {
    content: ''; position: absolute;
    background: currentColor;
    transition: transform .35s var(--ease);
}
.faq-plus::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq-plus::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }

.faq-body {
    padding: 0 0 28px;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 720px;
    animation: fadeSlide .4s var(--ease-out);
}
.faq-body p + p { margin-top: 12px; }
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== CTA FINAL ====== */
.cta-final {
    background: var(--dark);
    color: var(--paper);
    padding: var(--sp-section) 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.cta-final::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(700px 400px at 50% 0%, rgba(230,57,70,.22), transparent 60%),
        radial-gradient(900px 600px at 50% 100%, rgba(37,211,102,.08), transparent 60%);
}
.cta-final > * { position: relative; z-index: 1; }

.cta-final-h {
    font-size: var(--fs-h1);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.04em;
    margin-bottom: 24px;
}
.cta-final-accent {
    background: linear-gradient(120deg, #fff, var(--accent-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cta-final-p {
    font-size: var(--fs-lead);
    color: rgba(255,255,255,.7);
    max-width: 620px;
    margin: 0 auto 48px;
}
.cta-final-actions { margin-bottom: 80px; }

/* ====== Depoimentos (na CTA final) ====== */
.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 64px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.depoimento {
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r);
    padding: 32px 28px;
    text-align: left;
    backdrop-filter: blur(6px);
    overflow: hidden;
    transition: transform .4s var(--ease-out), background .4s var(--ease-out), border-color .4s var(--ease-out);
}
.depoimento::before {
    content: '"';
    position: absolute;
    top: -60px;
    right: -10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 240px;
    line-height: 1;
    color: rgba(200,36,45,.18);
    font-weight: 700;
    pointer-events: none;
    z-index: 0;
}
.depoimento > * { position: relative; z-index: 1; }
.depoimento:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
.depoimento:hover::before { color: rgba(200,36,45,.28); }
.depoimento-aspas { display: none; }
.depoimento-texto {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    margin-bottom: 24px;
    font-weight: 400;
}
.depoimento-rodape {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.depoimento-stars {
    color: #f5b400;
    letter-spacing: .15em;
    font-size: .9rem;
    margin-bottom: 4px;
}
.depoimento-nome {
    font-size: .95rem;
    font-weight: 700;
    color: var(--paper);
    letter-spacing: -.005em;
}
.depoimento-empresa {
    font-size: .8125rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
}

.footer-horario {
    display: block;
    color: rgba(255,255,255,.45);
    font-size: .8125rem;
    margin-top: 10px;
    letter-spacing: .02em;
    line-height: 1.5;
}
.footer-map-col { display: flex; flex-direction: column; }
.footer-map {
    position: relative;
    display: block;
    margin-top: 8px;
    border-radius: var(--r-sm);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.footer-map:hover {
    border-color: rgba(255,255,255,.18);
    transform: translateY(-2px);
}
.footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.3) invert(.92) contrast(1.05) hue-rotate(180deg) saturate(.6);
    pointer-events: none;
}
.footer-map-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(7,13,31,.85);
    backdrop-filter: blur(6px);
    color: var(--paper);
    font-size: .75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
}

/* ====== FOOTER ====== */
.footer {
    background: #050610;
    color: rgba(255,255,255,.6);
    padding: 64px 0 0;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr 2.6fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-brand p {
    margin-top: 14px;
    font-size: .9375rem;
    max-width: 280px;
    line-height: 1.5;
}
.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.footer-brand-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}
.dot-red { color: var(--accent); }

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.footer-cols h5 {
    color: var(--paper);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 18px;
}
.footer-cols a {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: .9375rem;
    padding: 6px 0;
    transition: color .2s;
}
.footer-cols a:hover { color: var(--paper); }

.footer-bar {
    max-width: var(--cw-wide);
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    color: rgba(255,255,255,.4);
}

/* ====== WHATSAPP FLOAT ====== */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--wa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px -8px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.4);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    z-index: 90;
    animation: waPulse 2.5s ease-out infinite;
}
.wa-float:hover {
    transform: scale(1.08);
    box-shadow: 0 18px 40px -8px rgba(37,211,102,.7);
}
@keyframes waPulse {
    0%   { box-shadow: 0 12px 32px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.7); }
    70%  { box-shadow: 0 12px 32px -8px rgba(37,211,102,.55), 0 0 0 22px rgba(37,211,102,0); }
    100% { box-shadow: 0 12px 32px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,0); }
}

/* ====== REVEAL ANIMATION ====== */
/* IMPORTANTE: tudo aqui depende da classe .js no <html>, colocada por um
   script inline no <head>. Se o JavaScript não rodar (falha, celular lento,
   aba aberta em segundo plano), nada é escondido e o site aparece inteiro.
   Sem essa trava o site inteiro nasce com opacity:0 e o visitante vê uma
   tela em branco. */
.js .reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: 0s;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Variantes de direção */
.js .reveal-left { transform: translateX(-60px); }
.js .reveal-right { transform: translateX(60px); }
.js .reveal-scale { transform: scale(.92); }
.js .reveal-left.is-visible,
.js .reveal-right.is-visible { transform: translateX(0); }
.js .reveal-scale.is-visible { transform: scale(1); }

/* Stagger — atraso progressivo pra cards em sequência */
.js .reveal[data-delay="1"] { transition-delay: .12s; }
.js .reveal[data-delay="2"] { transition-delay: .24s; }
.js .reveal[data-delay="3"] { transition-delay: .36s; }
.js .reveal[data-delay="4"] { transition-delay: .48s; }
.js .reveal[data-delay="5"] { transition-delay: .60s; }
.js .reveal[data-delay="6"] { transition-delay: .72s; }

/* Quem pediu menos animação no sistema vê tudo direto, sem movimento. */
@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Modo emergência: o script põe essa classe quando a animação não rodou.
   Aparece tudo instantâneo, sem transição que possa travar no meio. */
.sem-animacao .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: 1fr; gap: 48px; }
    .product-row-alt .product-grid > :first-child { order: 0; }
    .product-visual { min-height: 380px; aspect-ratio: 5/4; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { border-bottom: 1px solid rgba(255,255,255,.1); }
    .stat:nth-child(2) { border-right: none; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
    .gallery-wide { grid-column: span 2; }
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
    .depoimentos-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .nav-menu { display: none; }
    .nav-toggle { display: flex; }
    .nav-cta { padding: 8px 14px; font-size: .8125rem; }
    .nav-cta svg { display: none; }
    .nav-logo-img { height: 60px; }
    .container-wide, .container-narrow, .container-tight,
    .nav-inner, .footer-bar { padding-left: 20px; padding-right: 20px; }
    .product-grid { padding: 0 20px; }
    .products-grid { grid-template-columns: 1fr; gap: 20px; }
    .product-card-body { padding: 24px 22px 28px; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat { border-right: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-tall, .gallery-wide { grid-row: span 1; grid-column: span 1; }
    .depoimentos-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 48px; }
    .footer-cols { grid-template-columns: 1fr; gap: 32px; }
    .footer-bar { flex-direction: column; gap: 8px; text-align: center; }
    .hero-actions { width: 100%; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; justify-content: center; }
    .wa-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
}


/* =================================================================
   PÁGINAS DE PRODUTO (telha-sanduiche.html e futuras)
   ================================================================= */

/* ---- Hero interno (menor que o da home, sem foto) ---- */
.page-hero {
    position: relative;
    background: linear-gradient(180deg, var(--dark) 0%, #0e1a33 100%);
    color: var(--paper);
    padding: clamp(140px, 18vw, 200px) 0 clamp(72px, 10vw, 120px);
    overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(800px 520px at 78% 18%, rgba(200,36,45,.16), transparent 62%),
        radial-gradient(700px 500px at 8% 88%, rgba(255,255,255,.05), transparent 65%);
    pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.page-hero-title {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 18px 0 22px;
}
.page-hero-lead {
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: rgba(255,255,255,.72);
    max-width: 620px;
    margin-bottom: 36px;
}
.page-hero-lead strong { color: var(--paper); font-weight: 600; }

/* ---- Migalha de pão ---- */
.breadcrumb {
    display: flex; align-items: center; gap: 9px;
    font-size: var(--fs-small);
    color: rgba(255,255,255,.45);
    margin-bottom: 26px;
}
.breadcrumb a { color: rgba(255,255,255,.62); }
.breadcrumb a:hover { color: var(--accent-soft); }

/* ---- Fatores que formam o preço ---- */
.preco-fatores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: clamp(40px, 6vw, 64px) 0;
}
.preco-fator {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r);
    padding: 30px 26px 28px;
}
.preco-fator-num {
    display: block;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--accent-soft);
    margin-bottom: 14px;
}
.preco-fator h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
.preco-fator p {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(255,255,255,.68);
}
.preco-fator p strong { color: var(--paper); font-weight: 600; }

/* ---- Caixa de chamada pro orçamento ---- */
.preco-cta {
    background: linear-gradient(150deg, rgba(200,36,45,.14) 0%, rgba(255,255,255,.05) 60%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r);
    padding: clamp(32px, 5vw, 52px);
    text-align: center;
}
.preco-cta-texto h3 {
    font-size: var(--fs-h3);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 16px;
}
.preco-cta-texto p {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: rgba(255,255,255,.72);
    max-width: 560px;
    margin: 0 auto 30px;
}
.preco-cta-nota {
    display: block;
    margin-top: 18px;
    font-size: var(--fs-small);
    color: rgba(255,255,255,.5);
}

/* ---- As três camadas da telha ---- */
.camadas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(40px, 6vw, 64px);
}
.camada {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r);
    padding: 30px 26px;
}
.camada-nucleo {
    background: linear-gradient(160deg, rgba(200,36,45,.16) 0%, rgba(255,255,255,.05) 70%);
    border-color: rgba(214,43,43,.32);
}
.camada-tag {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin-bottom: 12px;
}
.camada h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
.camada p {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(255,255,255,.68);
}

/* ---- Bloco de destaque em texto corrido ---- */
.ganho-real {
    margin-top: clamp(36px, 5vw, 56px);
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 26px;
}
.ganho-real p {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: rgba(255,255,255,.78);
    letter-spacing: -.01em;
}
.ganho-real strong { color: var(--paper); font-weight: 700; }

/* ---- Espessura por tipo de obra ---- */
.espessura-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: clamp(40px, 6vw, 64px);
}
.espessura-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--r);
    padding: 30px 24px 28px;
    box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
.espessura-card-destaque {
    background: linear-gradient(165deg, #fff 0%, #fdf3f3 100%);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.espessura-valor {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
}
.espessura-valor small { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.espessura-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: 10px;
}
.espessura-card p {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.onde-usar-nota {
    margin-top: clamp(32px, 4vw, 44px);
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: rgba(255,255,255,.72);
    text-align: center;
}
.onde-usar-nota strong { color: var(--paper); font-weight: 700; }

/* ---- Ficha técnica ---- */
.specs {
    margin-top: clamp(36px, 5vw, 56px);
    border-top: 1px solid rgba(255,255,255,.12);
}
.spec-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 20px 4px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.spec-label {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    padding-top: 3px;
}
.spec-valor {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: rgba(255,255,255,.86);
}

/* ---- Responsivo ---- */
@media (max-width: 1000px) {
    .espessura-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .preco-fatores, .camadas { grid-template-columns: 1fr; }
    .espessura-grid { grid-template-columns: 1fr; }
    .spec-row { grid-template-columns: 1fr; gap: 6px; }
    .page-hero { padding-top: 128px; }
    .ganho-real { padding-left: 18px; }
    .preco-cta .btn-primary { width: 100%; justify-content: center; }
}