/* =========================================================
   HERO DIVIDIDO — texto à esquerda, mosaico de 3 fotos à direita
   Anexe DEPOIS do style.css:
   <link rel="stylesheet" href="css/hero-dividido.css">
========================================================= */

.hero.hero-dividido {
    height: auto;
    min-height: 100vh;
    padding: 130px 0 110px;          /* espaço para a navbar fixa e para a curva */
    background: linear-gradient(120deg, #2c7a7b, #4CAF50);
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

/* texto: usa o mesmo h1, parágrafo e botões de antes */
.hero.hero-dividido .hero-content {
    max-width: none;
    margin: 0;
}

.hero.hero-dividido h1 {
    font-size: 2.6rem;
}

/* ---------- MOSAICO ---------- */
.hero-mosaico {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);   /* larga em cima; minmax(0,...) garante a proporção exata */
    gap: 14px;
    height: min(560px, 68vh);
}

.hero-foto {
    border-radius: 16px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .22);
    background: #e0f2f1;
}

.hero-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* foto 1 é a principal (larga, ocupa as duas colunas); fotos 2 e 3 ficam lado a lado embaixo */
.hero-foto:nth-child(1) {
    grid-column: 1 / -1;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 900px) {
    .hero.hero-dividido {
        padding: 110px 0 90px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero.hero-dividido .hero-content {
        margin: 0;
    }

    .hero.hero-dividido h1 {
        font-size: 1.7rem;
    }

    .hero-mosaico {
        height: 300px;
        gap: 10px;
    }

    .hero-foto {
        border-width: 3px;
        border-radius: 12px;
    }
}

/* =========================================================
   FUNDO DINÂMICO: formas translúcidas + ícones flutuantes
   (camadas: blobs z-index 0 < ícones z-index 1 < conteúdo z-index 2)
========================================================= */
.hero-blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.hero-blob-1 {
    width: 540px;
    height: 540px;
    top: -280px;
    left: -240px;               /* canto, longe do título para não tirar contraste do texto */
    background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 72%);
    animation: hero-blob-a 22s ease-in-out infinite alternate;
}

.hero-blob-2 {
    width: 680px;
    height: 680px;
    top: -2%;
    right: -190px;              /* atrás do mosaico: é ele que "descola" do fundo */
    background: radial-gradient(circle, rgba(224, 242, 241, .50) 0%, rgba(224, 242, 241, .24) 50%, rgba(224, 242, 241, 0) 72%);
    animation: hero-blob-b 28s ease-in-out infinite alternate;
}

.hero-blob-3 {
    width: 620px;
    height: 620px;
    bottom: -260px;
    left: 30%;
    background: radial-gradient(circle, rgba(165, 214, 167, .65) 0%, rgba(165, 214, 167, .30) 50%, rgba(165, 214, 167, 0) 72%);
    animation: hero-blob-c 25s ease-in-out infinite alternate;
}

@keyframes hero-blob-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(130px, 100px) scale(1.18); }
}

@keyframes hero-blob-b {
    from { transform: translate(0, 0) scale(1.1); }
    to   { transform: translate(-120px, 90px) scale(.88); }
}

@keyframes hero-blob-c {
    from { transform: translate(0, 0) scale(.95); }
    to   { transform: translate(110px, -90px) scale(1.18); }
}

/* o verde da marca some sobre o gradiente: nos ícones "destaque" usa um tom claro */
.hero-dividido .icone-flutuante[style*="--if-tom:destaque"] {
    color: #e0f2f1;
    opacity: .22;
}

@media (max-width: 900px) {
    .hero-blob-1 { width: 380px; height: 380px; top: -200px; left: -170px; }
    .hero-blob-2 { width: 460px; height: 460px; right: -170px; }
    .hero-blob-3 { width: 440px; height: 440px; left: 5%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-blob { animation: none; }
}

/* =========================================================
   BOTÕES DO HERO COM COR (só nesta seção; .btn-outline segue igual no resto do site)
========================================================= */
.hero-dividido .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-dividido .hero-buttons .btn-outline {
    margin: 0;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.hero-dividido .hero-buttons .btn-outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* principal: branco com texto teal */
.hero-dividido .btn-hero-claro {
    background: #fff;
    border-color: #fff;
    color: #2c7a7b;
}

.hero-dividido .btn-hero-claro:hover {
    background: #e0f2f1;
    border-color: #e0f2f1;
    color: #1f6b6c;
}

/* doação: rosa da logo, para chamar atenção */
.hero-dividido .btn-hero-doar {
    background: #d6336c;
    border-color: #d6336c;
    color: #fff;
}

.hero-dividido .btn-hero-doar:hover {
    background: #b82a5a;
    border-color: #b82a5a;
    color: #fff;
}

.hero-dividido .hero-buttons .btn-outline:focus-visible {
    outline: 3px solid #ffeb3b;
    outline-offset: 3px;
}