/* =====================================================================
   home.css — estilos específicos da página inicial
   ===================================================================== */

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    color: var(--cor-sobre-escuro);
    overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-esc));
    z-index: 0;
}
.hero__bg::after {
    content: 'UMILON';
    position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
    font-family: var(--fonte-titulo); font-size: 22vw; font-weight: 700;
    color: rgba(255,255,255,.05); letter-spacing: .05em; line-height: 1;
    white-space: nowrap;
}
.hero__conteudo { position: relative; z-index: 1; text-align: center; width: 100%; }
.hero__supra { letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; opacity: .85; }
.hero__titulo { font-size: clamp(2.8rem, 7vw, 5.5rem); margin: 10px 0; }
/* No hero o fundo é escuro: o acento preto sumiria. Usa branco translúcido. */
.hero__titulo em { font-style: italic; color: rgba(255,255,255,.7); }
.hero__sub { font-size: 1.05rem; opacity: .9; margin-bottom: 28px; }
.hero__botoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__scroll {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 1; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7;
}

/* ---------- Coleções (cards grandes) ---------- */
.colecoes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.colecao-card {
    position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--raio);
    background: var(--cor-secundaria);
}
.colecao-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.colecao-card:hover img { transform: scale(1.06); }
.colecao-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px; color: #fff;
}
.colecao-card__overlay h3 { font-size: 1.5rem; }
.colecao-card__overlay span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

/* ---------- Essência (vídeo) ---------- */
.essencia { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.essencia__midia { min-height: 480px; background: var(--cor-secundaria); }
.essencia__midia video { width: 100%; height: 100%; object-fit: cover; }
.essencia__texto {
    background: var(--cor-primaria); color: var(--cor-sobre-escuro);
    display: flex; flex-direction: column; justify-content: center;
    padding: 64px clamp(28px, 6vw, 96px); gap: 14px;
}
.essencia__texto h2 { font-size: 2.4rem; }
.essencia__texto h2 em { color: var(--cor-acento); font-style: italic; }
.essencia__texto p { opacity: .9; }
.essencia__texto .btn { align-self: flex-start; margin-top: 10px; }

/* ---------- Stats ---------- */
.stats { background: var(--cor-primaria-esc); color: var(--cor-sobre-escuro); padding: 48px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats__item strong { font-family: var(--fonte-titulo); font-size: 2.4rem; display: block; }
.stats__item span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

@media (max-width: 960px) {
    .colecoes-grid { grid-template-columns: 1fr; }
    .essencia { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}