/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   pages.css

   Caminho:
   assets/css/pages.css

   Versão:
   2.0.0

   Descrição:
   Estilos específicos da Landing Page.

   ============================================================================= */


/* =============================================================================
   INTRO
   ========================================================================== */

#intro{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-background);

    z-index:var(--z-intro);

}

#intro.hidden{

    opacity:0;

    visibility:hidden;

}


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

#hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    background:#0F0F0F;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.45)
        );

    z-index:2;

}

.hero-content{

    position:relative;

    z-index:3;

    width:min(90%,900px);

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#FFFFFF;

    animation:fadeHero 2s ease;

}

.hero-content .label{

    margin-bottom:18px;

}

.hero-content h1{

    margin-bottom:18px;

    color:#FFFFFF;

}

.hero-content h2{

    max-width:760px;

    margin-top:42px;

    margin-bottom:22px;

    color:#FFFFFF;

}

.hero-content p{

    max-width:760px;

    color:rgba(255,255,255,.86);

}

.hero-description{

    font-size:1.2rem;

    letter-spacing:.08em;

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:42px;

    transform:translateX(-50%);

    z-index:3;

    color:rgba(255,255,255,.70);

    font-size:.82rem;

    letter-spacing:.28em;

    text-transform:uppercase;

}


/* =============================================================================
   MANIFESTO
   ========================================================================== */

#manifesto{

    background:var(--color-background);

    padding:220px 0;

}

#manifesto .container{

    display:flex;

    justify-content:center;

}

#manifesto .text-content{

    width:min(92%,900px);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

#manifesto .chapter{

    margin-bottom:24px;

}

#manifesto h2{

    max-width:900px;

    margin-bottom:34px;

}

#manifesto .editorial-divider{

    margin:50px auto;

}

#manifesto p{

    max-width:760px;

    margin:auto;

    font-size:1.35rem;

    line-height:2;

    color:var(--color-text-soft);

}

#manifesto p+p{

    margin-top:34px;

}


/* =============================================================================
   MAISON
   ========================================================================== */

#maison{

    background:var(--color-background);

    padding:220px 0;

}

#maison .container{

    display:flex;

    justify-content:center;

}

#maison .text-content{

    width:min(92%,900px);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

#maison .chapter{

    margin-bottom:24px;

}

#maison h2{

    max-width:900px;

    margin-bottom:34px;

}

#maison .editorial-divider{

    margin:50px auto;

}

#maison p{

    max-width:760px;

    margin:auto;

    font-size:1.25rem;

    line-height:2;

    color:var(--color-text-soft);

}

#maison p+p{

    margin-top:34px;

}


/* =============================================================================
   PILARES
   ========================================================================== */

#pilares{

    background:var(--color-surface);

    padding:220px 0;

}

#pilares .container{

    width:min(92%,900px);

    margin:auto;

}

#pilares .chapter{

    display:block;

    text-align:center;

    margin-bottom:24px;

}

#pilares h2{

    text-align:center;

    margin-bottom:40px;

}

#pilares .editorial-divider{

    margin:50px auto;

}

.pillar{

    padding:70px 0;

    text-align:center;

    border-bottom:1px solid var(--color-line);

}

.pillar:last-child{

    border-bottom:none;

}

.pillar-number{

    display:block;

    margin-bottom:18px;

}

.pillar h3{

    margin-bottom:22px;

}

.pillar p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    line-height:2;

    color:var(--color-text-soft);

}


/* =============================================================================
   GALERIA
   ========================================================================== */

#galeria{

    background:var(--color-background);

    padding:220px 0;

}

#galeria .container{

    width:min(92%,1100px);

    margin:auto;

}

#galeria .chapter{

    display:block;

    text-align:center;

    margin-bottom:24px;

}

#galeria h2{

    text-align:center;

    margin-bottom:40px;

}

#galeria .editorial-divider{

    margin:50px auto;

}

.gallery-piece{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:140px auto;

    max-width:900px;

}

.gallery-piece:first-of-type{

    margin-top:90px;

}

.gallery-piece img{

    width:100%;

    border-radius:12px;

    box-shadow:0 30px 80px rgba(0,0,0,.08);

}

.gallery-piece figcaption{

    width:100%;

    margin-top:40px;

    text-align:center;

}

.gallery-piece .photo-code{

    margin-bottom:14px;

}

.gallery-piece h3{

    margin-bottom:18px;

}

.gallery-piece p{

    max-width:700px;

    margin:auto;

    color:var(--color-text-soft);

    line-height:2;

}


/* =============================================================================
   INTERLÚDIO
   ========================================================================== */

#interlude-artesao{

    background:var(--color-surface);

    padding:220px 0;

}

#interlude-artesao .container{

    width:min(92%,1100px);

    margin:auto;

}

.editorial-photo{

    width:100%;

    margin:auto;

}

.editorial-photo img{

    width:100%;

    border-radius:12px;

    box-shadow:0 30px 80px rgba(0,0,0,.08);

}

.editorial-photo figcaption{

    margin-top:42px;

    text-align:center;

}

.editorial-photo .photo-code{

    display:block;

    margin-bottom:14px;

}

.editorial-photo h3{

    margin-bottom:18px;

}

.editorial-photo p{

    max-width:760px;

    margin:auto;

    line-height:2;

    color:var(--color-text-soft);

}


/* =============================================================================
   EXPERIÊNCIA
   ========================================================================== */

#experiencia{

    background:var(--color-background);

    padding:220px 0;

}

#experiencia .container{

    display:flex;

    justify-content:center;

}

#experiencia .text-content{

    width:min(92%,900px);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

#experiencia .chapter{

    margin-bottom:24px;

}

#experiencia h2{

    max-width:900px;

    margin-bottom:34px;

}

#experiencia .editorial-divider{

    margin:50px auto;

}

#experiencia p{

    max-width:760px;

    margin:auto;

    font-size:1.22rem;

    line-height:2;

    color:var(--color-text-soft);

}

#experiencia p+p{

    margin-top:34px;

}

#experiencia .button{

    margin-top:70px;

}


/* =============================================================================
   CONTATO
   ========================================================================== */

#contato{

    background:var(--color-surface);

    padding:220px 0;

}

#contato .container{

    display:flex;

    justify-content:center;

}

#contato .text-content{

    width:min(92%,900px);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

#contato .chapter{

    margin-bottom:24px;

}

#contato h2{

    max-width:900px;

    margin-bottom:34px;

}

#contato .editorial-divider{

    margin:50px auto;

}

#contato p{

    max-width:760px;

    margin:auto;

    font-size:1.18rem;

    line-height:2;

    color:var(--color-text-soft);

}

#contato p+p{

    margin-top:34px;

}

.contact-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    margin-top:70px;

    flex-wrap:wrap;

}


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

#footer{

    background:var(--color-background);

    padding:140px 0 80px;

    border-top:1px solid var(--color-line);

}

.footer-content{

    width:min(92%,900px);

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.footer-line{

    width:80px;

    height:1px;

    margin-bottom:40px;

    background:var(--color-line);

}

.footer-brand{

    font-family:var(--font-title);

    font-size:2.4rem;

    font-weight:var(--fw-medium);

    letter-spacing:.18em;

    color:var(--color-title);

    margin-bottom:20px;

}

.footer-tagline{

    max-width:700px;

    margin-bottom:42px;

    font-size:1rem;

    line-height:1.9;

    color:var(--color-text-soft);

}

.footer-copy{

    font-size:.82rem;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--color-text-soft);

    opacity:.75;

}


/* =============================================================================
   ESTADOS
   ========================================================================== */

.is-visible{

    opacity:1;

    transform:translateY(0);

}

.is-hidden{

    opacity:0;

    transform:translateY(40px);

}