/* =========================================================
   Landing Page — De Grão em Pão
   Todos os seletores escopados em .lp-de-grao-em-pao
   para evitar conflitos com o CSS global do projeto.
   font-family explícita em cada elemento (igual ao bunge.css
   de referência) para não ser sobrescrita pelo Bootstrap.
   ========================================================= */

.lp-de-grao-em-pao {
    font-family: "redonda", sans-serif;
}

.lp-de-grao-em-pao h1,
.lp-de-grao-em-pao h2,
.lp-de-grao-em-pao h3,
.lp-de-grao-em-pao p,
.lp-de-grao-em-pao li,
.lp-de-grao-em-pao span,
.lp-de-grao-em-pao a,
.lp-de-grao-em-pao button {
    font-family: "redonda", sans-serif !important;
    margin: 0;
}

/* ── HERO ─────────────────────────────────────────────────── */
.lp-de-grao-em-pao .hero-section {
    background: transparent linear-gradient(90deg, #143C5D 0%, #4A8397 76%, #80CAD1 100%) 0% 0% no-repeat padding-box;
}

.lp-de-grao-em-pao .hero-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1280px;
    margin: auto;
}

.lp-de-grao-em-pao .hero-content-container {
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 3rem;
    gap: 2rem;
}

.lp-de-grao-em-pao .hero-logo {
    width: 275px;
    height: 106px;
    margin-top: 3rem;
}

.lp-de-grao-em-pao .hero-section h1 {
    color: #fff;
    font-family: "redonda", sans-serif;
    font-weight: 700;
}

.lp-de-grao-em-pao .hero-section .green-highlight { color: #9AC63D; }

.lp-de-grao-em-pao .hero-section h2 {
    color: #fff;
    font-family: "redonda", sans-serif;
    font-weight: 700;
}

.lp-de-grao-em-pao .hero-section .orange-highlight { color: #D0852F; }

.lp-de-grao-em-pao .hero-section p {
    color: #fff;
    font-family: "redonda", sans-serif;
}

.lp-de-grao-em-pao .hero-section .blue-highlight { color: #80CAD1; }

.lp-de-grao-em-pao .hero-button {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lp-de-grao-em-pao .orange-btn,
.lp-de-grao-em-pao .green-btn {
    font-family: "redonda", sans-serif;
    border-radius: 28px;
    height: 40px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    width: fit-content;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.lp-de-grao-em-pao .orange-btn {
    background-color: #D0852F;
    color: #fff;
}

.lp-de-grao-em-pao .orange-btn:hover {
    background-color: #b56e27;
    transform: translateY(-2px);
    color: #fff;
}

.lp-de-grao-em-pao .orange-btn:active {
    background-color: #a26223;
    transform: translateY(0);
}

.lp-de-grao-em-pao .green-btn {
    background-color: #9AC63D;
    color: #fff;
}

.lp-de-grao-em-pao .green-btn:hover {
    background-color: #82a935;
    transform: translateY(-2px);
    color: #fff;
}

.lp-de-grao-em-pao .green-btn:active {
    background-color: #6f9130;
    transform: translateY(0);
}

.lp-de-grao-em-pao .hero-image-container { overflow: hidden; }

.lp-de-grao-em-pao .hero-image { width: 100%; }

/* ── SUB-HERO ─────────────────────────────────────────────── */
.lp-de-grao-em-pao .subhero-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lp-de-grao-em-pao .subhero-image-container {
    width: 100%;
    padding-top: 1.5rem;
}

.lp-de-grao-em-pao .subhero-image { width: 100%; }

.lp-de-grao-em-pao .subhero-content-container {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lp-de-grao-em-pao .subhero-section h3 {
    font-family: "redonda", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #CF5E26;
}

.lp-de-grao-em-pao .subhero-section p {
    font-family: "redonda", sans-serif;
    color: #000;
}

/* ── PINK SECTION ─────────────────────────────────────────── */
.lp-de-grao-em-pao .pink-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: transparent linear-gradient(0deg, #5A1975 0%, #C161C4 100%) 0% 0% no-repeat padding-box;
}

.lp-de-grao-em-pao .pink-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lp-de-grao-em-pao .pink-section h3 {
    font-family: "redonda", sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    padding: 3rem 1.5rem 0;
}

.lp-de-grao-em-pao .pink-content-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lp-de-grao-em-pao .pink-image-container { width: 100%; }

.lp-de-grao-em-pao .pink-image {
    width: 100%;
    aspect-ratio: 3 / 4;
}

.lp-de-grao-em-pao .pink-content { padding: 0 1.5rem 3rem; }

.lp-de-grao-em-pao .pink-content ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 2rem;
    justify-content: center;
    height: 100%;
    padding: 0;
    position: relative;
    list-style: none;
}

.lp-de-grao-em-pao .pink-content ul li {
    font-family: "redonda", sans-serif;
    color: #fff;
    position: relative;
    padding-left: 3rem;
    list-style: none;
}

.lp-de-grao-em-pao .pink-content ul li::marker { content: ''; }

.lp-de-grao-em-pao .pink-content ul li::after {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lp-de-grao-em-pao .pink-content ul li.first::after  { background-image: url('/images/de-grao-em-pao/1-1st-icons.png'); }
.lp-de-grao-em-pao .pink-content ul li.second::after { background-image: url('/images/de-grao-em-pao/2-1st-icons.png'); }
.lp-de-grao-em-pao .pink-content ul li.third::after  { background-image: url('/images/de-grao-em-pao/3-1st-icons.png'); }
.lp-de-grao-em-pao .pink-content ul li.fourth::after { background-image: url('/images/de-grao-em-pao/4-1st-icons.png'); }
.lp-de-grao-em-pao .pink-content ul li.five::after   { background-image: url('/images/de-grao-em-pao/5-1st-icons.png'); }
.lp-de-grao-em-pao .pink-content ul li.six::after    { background-image: url('/images/de-grao-em-pao/6-1st-icons.png'); }

/* ── PARTNER SECTION ─────────────────────────────────────── */
.lp-de-grao-em-pao .partner-container {
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1280px;
    margin: auto;
}

.lp-de-grao-em-pao .partner-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 985px;
    margin: auto;
}

.lp-de-grao-em-pao .partner-section h3 {
    font-family: "redonda", sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #D8672F;
}

.lp-de-grao-em-pao .partner-section p {
    font-family: "redonda", sans-serif;
    color: #000;
}

.lp-de-grao-em-pao .partner-logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.lp-de-grao-em-pao .partner-logo .logo {
    max-width: 120px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lp-de-grao-em-pao .partner-container > p {
    font-family: "redonda", sans-serif;
    max-width: 940px;
    margin: auto;
}

/* ── REGISTER SECTION ────────────────────────────────────── */
.lp-de-grao-em-pao .register-section {
    background: transparent linear-gradient(0deg, #143C5D 0%, #316275 71%, #4D878C 100%) 0% 0% no-repeat padding-box;
}

.lp-de-grao-em-pao .register-container {
    max-width: 1280px;
    margin: auto;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lp-de-grao-em-pao .register-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: fit-content;
    margin: auto;
}

.lp-de-grao-em-pao .register-section h3 {
    font-family: "redonda", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #C1E059;
}

.lp-de-grao-em-pao .register-section ol {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 2rem;
    justify-content: center;
    height: 100%;
    padding: 0;
    position: relative;
    list-style: none;
}

.lp-de-grao-em-pao .register-section ol li {
    font-family: "redonda", sans-serif;
    color: #fff;
    position: relative;
    padding-left: 3rem;
    list-style: none;
}

.lp-de-grao-em-pao .register-section ol li::before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lp-de-grao-em-pao .register-section ol li.first::before  { background-image: url('/images/de-grao-em-pao/1-2nd-icons.png'); }
.lp-de-grao-em-pao .register-section ol li.second::before { background-image: url('/images/de-grao-em-pao/2-2nd-icons.png'); }
.lp-de-grao-em-pao .register-section ol li.third::before  { background-image: url('/images/de-grao-em-pao/3-2nd-icons.png'); }
.lp-de-grao-em-pao .register-section ol li.fourth::before { background-image: url('/images/de-grao-em-pao/4-2nd-icons.png'); }

.lp-de-grao-em-pao .step-number {
    font-family: "redonda", sans-serif;
    color: #C1E059;
    font-weight: 500;
}

.lp-de-grao-em-pao .register-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 580px;
    display: block;
    margin: auto;
}

/* ── REGISTER2 SECTION ───────────────────────────────────── */
.lp-de-grao-em-pao .register2-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 0 0;
}

.lp-de-grao-em-pao .register2-image { width: 100%; }

.lp-de-grao-em-pao .register2-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.5rem 2rem;
}

.lp-de-grao-em-pao .register2-section h3 {
    font-family: "redonda", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #CF5E26;
}

.lp-de-grao-em-pao .register2-section p {
    font-family: "redonda", sans-serif;
    color: #000;
}

.lp-de-grao-em-pao .download-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.lp-de-grao-em-pao .download-android,
.lp-de-grao-em-pao .download-ios {
    max-width: 100%;
    height: auto;
    width: 180px;
    object-fit: contain;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.lp-de-grao-em-pao .download-android:hover,
.lp-de-grao-em-pao .download-ios:hover {
    transform: translateY(-3px);
    filter: brightness(0.9);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.lp-de-grao-em-pao .download-android:active,
.lp-de-grao-em-pao .download-ios:active {
    transform: translateY(0);
    filter: brightness(0.85);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Botão "Cadastre a sua padaria agora" — centralizado */
.lp-de-grao-em-pao .register-bakery {
    font-family: "redonda", sans-serif;
    background-color: #D0852F;
    color: #fff;
    border-radius: 28px;
    height: 40px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    width: fit-content;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 0 auto 3rem;
}

.lp-de-grao-em-pao .register-bakery:hover {
    background-color: #b56e27;
    transform: translateY(-2px);
    color: #fff;
}

.lp-de-grao-em-pao .register-bakery:active {
    background-color: #a26223;
    transform: translateY(0);
}

/* ── QR CODE SECTION ─────────────────────────────────────── */
.lp-de-grao-em-pao .qrcode-section {
    background: #D8672F 0% 0% no-repeat padding-box;
}

.lp-de-grao-em-pao .qrcode-container {
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.5rem 5rem;
}

.lp-de-grao-em-pao .android-container,
.lp-de-grao-em-pao .ios-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lp-de-grao-em-pao .qrcode-section p {
    font-family: "redonda", sans-serif;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.lp-de-grao-em-pao .android-qr-code,
.lp-de-grao-em-pao .ios-qr-code {
    max-width: 250px;
    width: 100%;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 15px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ── RESPONSIVO: 768px ───────────────────────────────────── */
@media (min-width: 768px) {
    .lp-de-grao-em-pao .hero-container { flex-direction: row; }

    .lp-de-grao-em-pao .hero-content-container { width: 70%; }

    .lp-de-grao-em-pao .hero-button { flex-direction: row; }

    .lp-de-grao-em-pao .hero-image-container {
        width: 50%;
        overflow: hidden;
        max-height: 800px;
    }

    .lp-de-grao-em-pao .hero-image {
        object-position: top;
        object-fit: contain;
        max-height: 1100px;
    }

    .lp-de-grao-em-pao .subhero-section { flex-direction: row; }

    .lp-de-grao-em-pao .subhero-image-container { width: 80%; }

    .lp-de-grao-em-pao .subhero-image {
        aspect-ratio: 1;
        object-fit: contain;
    }

    .lp-de-grao-em-pao .subhero-content-container {
        width: 70%;
        justify-content: center;
    }

    .lp-de-grao-em-pao .pink-content-container {
        flex-direction: row;
        max-width: 1280px;
        margin: auto;
    }

    .lp-de-grao-em-pao .pink-image-container { width: 50%; }

    .lp-de-grao-em-pao .pink-content { width: 40%; }

    .lp-de-grao-em-pao .register-container { flex-direction: row; }

    .lp-de-grao-em-pao .register-image-container { width: 70%; }

    .lp-de-grao-em-pao .register-content { width: 100%; }

    .lp-de-grao-em-pao .register2-container { flex-direction: row; }

    .lp-de-grao-em-pao .register2-image-container { width: 100%; }

    .lp-de-grao-em-pao .register2-image {
        aspect-ratio: 1;
        width: 100%;
    }

    .lp-de-grao-em-pao .register2-content {
        width: 100%;
        margin: auto;
    }

    .lp-de-grao-em-pao .qrcode-container {
        flex-direction: row;
        width: fit-content;
    }
}

/* ── RESPONSIVO: 1024px ──────────────────────────────────── */
@media (min-width: 1024px) {
    .lp-de-grao-em-pao .hero-section { max-height: 1000px; }

    .lp-de-grao-em-pao .orange-btn,
    .lp-de-grao-em-pao .green-btn,
    .lp-de-grao-em-pao .register-bakery {
        height: 30px;
    }
}

/* ── RESPONSIVO: 1440px ──────────────────────────────────── */
@media (min-width: 1440px) {
    .lp-de-grao-em-pao .hero-section h1 {
        font-size: 48px;
        display: flex;
        flex-direction: column;
    }

    .lp-de-grao-em-pao .hero-section h2 { font-size: 28px; }

    .lp-de-grao-em-pao .hero-section p { font-size: 20px; }

    .lp-de-grao-em-pao .subhero-section h3,
    .lp-de-grao-em-pao .pink-section h3,
    .lp-de-grao-em-pao .partner-section h3,
    .lp-de-grao-em-pao .register-section h3,
    .lp-de-grao-em-pao .register2-section h3 {
        font-size: 28px;
    }

    .lp-de-grao-em-pao .subhero-section p,
    .lp-de-grao-em-pao .partner-section p,
    .lp-de-grao-em-pao .register2-section p {
        font-size: 20px;
    }

    .lp-de-grao-em-pao .pink-content ul li { font-size: 20px; }

    .lp-de-grao-em-pao .pink-content ul {
        gap: 2.2rem;
    }

    .lp-de-grao-em-pao .pink-content ul li { padding-left: 3.5rem; }

    .lp-de-grao-em-pao .pink-content ul li::after {
        width: 52px;
        height: 52px;
    }

    .lp-de-grao-em-pao .register-section ol li {
        font-size: 20px;
        padding-left: 4.5rem;
    }

    .lp-de-grao-em-pao .register-section ol li::before {
        width: 52px;
        height: 52px;
    }

    .lp-de-grao-em-pao .register-image-container {
        max-width: 600px;
        margin: auto;
    }

    .lp-de-grao-em-pao .register-image { max-height: 650px; }

    .lp-de-grao-em-pao .orange-btn,
    .lp-de-grao-em-pao .green-btn,
    .lp-de-grao-em-pao .register-bakery {
        font-size: 18px;
        font-weight: 700;
        height: 35px;
    }

    .lp-de-grao-em-pao .register-bakery {
        font-weight: 500;
        height: 44px;
        padding: 0 1.5rem;
    }

    .lp-de-grao-em-pao .qrcode-section p { font-size: 20px; }
}