:root {
    --g: #1d6b3a;
    --gd: #123d25;
    --r: #b5212b;
    --cr: #f5f0e5;
    --gold: #e1bd72;
    --txt: #25251f;
    --mut: #746f65;
    --line: #dfd8ca;
    --white: #fff;
    --shadow: 0 22px 60px rgba(20, 45, 28, .13);
}

/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--txt);
    background: var(--cr);
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

section {
    padding: 90px 0;
}


/* =========================================================
   HEADER
   ========================================================= */

header {
    height: 82px;
    background: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #eee;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.logo {
    width: 118px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex: 0 0 118px;
}

.logo img {
    display: block;
    width: 78px;
    height: 78px;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

.nav {
    display: flex;
    align-items: center;
    gap: 27px;
    font-size: 13px;
    font-weight: 700;
}

.nav a:hover,
.nav .on {
    color: var(--g);
}

.nav .fr {
    padding: 12px 17px;
    background: var(--g);
    color: #fff;
    border-radius: 8px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 720px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #173e28;
}

.hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(9, 35, 20, .96) 0%,
            rgba(16, 60, 34, .82) 43%,
            rgba(16, 60, 34, .18) 78%
        ),
        url("https://franquia.saboresdononno.com.br/imagens/sabores_do_nonno_massas_recheadas_pizza lasanhas_nhoques_franquias.png");

    background-size: cover;
    background-position: center;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 140px;
    background: linear-gradient(
        transparent,
        rgba(9, 35, 20, .25)
    );
}

.hero-in {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 710px;
    padding: 90px 0;
}

.eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 11px;
    font-weight: 800;
}

.hero h1 {
    font: 700 clamp(48px, 5.8vw, 76px) / 1.02 "Playfair Display", serif;
    margin: 17px 0 22px;
}

.hero h1 em {
    font-style: normal;
    color: #f1ce84;
}

.hero p {
    font-size: 18px;
    line-height: 1.7;
    color: #ffffffdd;
    max-width: 650px;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.actions {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn {
    min-height: 50px;
    padding: 0 22px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    transition: .2s;
}

.btn-g {
    background: var(--g);
    color: #fff;
}

.btn-g:hover {
    transform: translateY(-2px);
    background: #16562e;
}

.btn-w {
    background: #fff;
    color: var(--gd);
}

.btn-o {
    border: 1px solid #ffffff77;
    color: #fff;
    background: #ffffff0d;
}


/* =========================================================
   PROVAS / DESTAQUES DO HERO
   ========================================================= */

.proof {
    display: flex;
    gap: 23px;
    margin-top: 36px;
    font-size: 12px;
    color: #ffffffc9;
}

.proof span::before {
    content: "✓";
    color: var(--gold);
    font-weight: 900;
    margin-right: 7px;
}


/* =========================================================
   CARDS RÁPIDOS
   ========================================================= */

.quick {
    position: relative;
    z-index: 4;
    margin-top: -55px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.quick-item {
    padding: 26px 30px;
    border-right: 1px solid var(--line);
}

.quick-item:last-child {
    border: 0;
}

.quick-item b {
    display: block;
    font: 700 23px "Playfair Display", serif;
    margin-bottom: 5px;
}

.quick-item p {
    font-size: 12px;
    color: var(--mut);
}


/* =========================================================
   TÍTULOS DAS SEÇÕES
   ========================================================= */

.headsec {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 42px;
}

.label {
    color: var(--r);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-size: 11px;
    font-weight: 800;
}

.headsec h2,
.split h2,
.franchise h2,
.final h2 {
    font: 700 clamp(36px, 4vw, 50px) / 1.1 "Playfair Display", serif;
    margin: 10px 0 15px;
}

.headsec p,
.split p {
    color: var(--mut);
    line-height: 1.75;
}


/* =========================================================
   PRODUTOS
   ========================================================= */

.products {
    background: #fff;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.product {
    height: 390px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #ccc;
}

.product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.product:hover img {
    transform: scale(1.05);
}

.product::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(
        transparent,
        rgba(9, 26, 15, .92)
    );
}

.product-info {
    position: absolute;
    z-index: 2;
    left: 23px;
    right: 23px;
    bottom: 23px;
    color: #fff;
}

.product-info small {
    color: #f0cf8c;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.product-info h3 {
    font: 700 27px "Playfair Display", serif;
    margin: 6px 0;
}

.product-info p {
    font-size: 12px;
    color: #ffffffcf;
    line-height: 1.5;
}


/* =========================================================
   CONTEÚDO DIVIDIDO / HISTÓRIA
   ========================================================= */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.collage {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
}

.collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.collage .big {
    grid-row: 1 / 3;
}

.split .lead {
    font: 600 21px / 1.55 "Playfair Display", serif;
    color: var(--txt);
    margin: 18px 0;
}

.split .btn {
    margin-top: 20px;
}


/* =========================================================
   PARALLAX - ITÁLIA
   ========================================================= */

.italy {
    padding: 85px 0;

    background:
        linear-gradient(
            rgba(41, 24, 9, .67),
            rgba(41, 24, 9, .67)
        ),
        url("/franquias/img/Italia_Sabores_do_nonno_na_sua_mesa_franquia.jpg")
        center / cover fixed;

    color: #fff;
    text-align: center;
}

.italy blockquote {
    max-width: 900px;
    margin: auto;
    font: 600 clamp(29px, 4vw, 45px) / 1.35 "Playfair Display", serif;
}

.italy small {
    display: block;
    margin-top: 18px;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 2px;
}


/* =========================================================
   REDE / UNIDADES
   ========================================================= */

.network {
    background: #fff;
}

.network-visual {
    position: relative;
    height: auto;
    border-radius: 24px;
    overflow: hidden;
}

.network-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
}

.network-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(14, 57, 32, .18),
        rgba(14, 57, 32, .03)
    );
}

.states {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.states span {
    padding: 8px 11px;
    background: #eaf2ec;
    color: var(--g);
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
}


/* =========================================================
   FRANQUIA
   ========================================================= */

.franchise {
    background: var(--gd);
    color: #fff;
}

.franchise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.franchise .label {
    color: var(--gold);
}

.franchise h2 {
    font-size: clamp(42px, 5vw, 60px);
}

.franchise p {
    color: #ffffffc2;
    line-height: 1.75;
}

.benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 26px 0;
}

.benefit {
    padding: 15px;
    border: 1px solid #ffffff26;
    border-radius: 10px;
    font-size: 12px;
}

.benefit::before {
    content: "✓";
    color: var(--gold);
    font-weight: 900;
    margin-right: 8px;
}

.franchise-photo {
    height: 560px;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
}

.franchise-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.franchise-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #ffffff22;
    border-radius: 26px;
}


/* =========================================================
   DEPOIMENTO
   ========================================================= */

.testimonial {
    background: #eee8db;
}

.test-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center;
}

.person {
    height: 460px;
    border-radius: 24px;
    overflow: hidden;
    background: #d9d2c4;
}

.person img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quote-card {
    background: #fff;
    padding: 48px;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.quote-card blockquote {
    font: 600 29px / 1.45 "Playfair Display", serif;
    margin: 14px 0 23px;
}

.quote-card strong {
    display: block;
}

.quote-card small {
    color: var(--g);
    font-weight: 800;
}


/* =========================================================
   FINAL - PARALLAX FRANQUIA
   ========================================================= */

.final {
    padding: 250px 0;

    background:
        linear-gradient(
            90deg,
            rgba(15, 64, 35, .82),
            rgba(15, 64, 35, .60)
        ),
        url("/franquias/img/sabores_do_nonno_massas_recheadas_pizza lasanhas_nhoques_franquias_baratas.png")
        center / cover fixed;

    color: #fff;
    text-align: center;
}

.final .label {
    color: var(--gold);
}

.final h2 {
    max-width: 850px;
    margin: 10px auto 16px;
    font-size: clamp(40px, 5vw, 60px);
}

.final p {
    max-width: 650px;
    margin: auto;
    color: #ffffffc9;
    line-height: 1.7;
}

.final .btn {
    margin-top: 25px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background: #0d311c;
    color: #ffffff99;
    padding: 28px;
    text-align: center;
    font-size: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .nav {
        display: none;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .split,
    .franchise-grid,
    .test-grid {
        grid-template-columns: 1fr;
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }

    .quick-item {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 620px) {

    .container {
        width: calc(100% - 28px);
    }

    header {
        height: 70px;
    }

    .logo {
        width: 90px;
        height: 58px;
        flex-basis: 90px;
    }

    .logo img {
        width: 64px;
        height: 64px;
        max-width: none;
    }

    .hero {
        min-height: 720px;
    }

    .hero-in {
        padding: 70px 0 110px;
    }

    .proof {
        display: block;
    }

    .proof span {
        display: block;
        margin: 8px 0;
    }

    .quick {
        margin-top: -35px;
    }

    section {
        padding: 62px 0;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product {
        height: 360px;
    }

    .collage {
        grid-template-columns: 1fr;
        grid-template-rows: 300px 180px 180px;
    }

    .collage .big {
        grid-row: auto;
    }

    .benefits {
        grid-template-columns: 1fr;
    }

    .franchise-photo,
    .person,
    .network-visual {
        height: 380px;
    }

    /*
     * Em celulares o background fixed pode apresentar
     * problemas, principalmente no Safari/iPhone.
     */
    .italy,
    .final {
        background-attachment: scroll;
    }

    .actions .btn {
        width: 100%;
    }
}