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

.hero{
    min-height:100vh;
    padding:140px 40px 220px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.hero-text{
    margin-bottom:190px;
    text-align:center;
}

.hero-text h1{
    font-size:56px;
    font-weight:500;
    letter-spacing:10px;
}

.hero-subtitle{
    margin-top:24px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;

    font-size:16px;
    font-weight:300;
    letter-spacing:0;
    color:#6f6f6f;
}

.hero-subtitle span{
    font-size:10px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#9a9a9a;
}

.hero-image{
    width:92%;
    max-width:1300px;
    display:block;
    animation:heroReveal 1.5s ease forwards;
}

/* ==================================================
   HOME — EXPLORE INDICATOR
================================================== */

.hero .scroll-indicator{
    margin-top:80px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    color:#999;
}

.hero .scroll-indicator span{
    font-size:24px;
    line-height:1;
    animation:scrollMove 1.8s infinite ease-in-out;
}

.hero .scroll-indicator p{
    margin:0;

    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:400;
    letter-spacing:3px;
    line-height:1;

    color:#999;
    text-transform:uppercase;
}

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

.manifesto{
    padding:180px 40px;
    display:flex;
    justify-content:center;
}

.manifesto-container{
    max-width:900px;
}

.manifesto h2{
    font-size:52px;
    font-weight:300;
    line-height:1.4;
    color:#222;
}

/* ==================================================
   COLLECTION
================================================== */

.stories{
    padding:120px 60px;
}

.stories h2{
    margin-bottom:42px;

    text-align:center;
    font-size:12px;
    font-weight:500;
    letter-spacing:8px;
    text-transform:uppercase;
    color:#777;
}

.stories-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    align-items:start;
}

.story-card{
    position:relative;
    display:block;

    width:100%;
    aspect-ratio:9/16;

    overflow:hidden;
    border-radius:4px;

    color:#fff;
    text-decoration:none;

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.story-card > img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:
        transform 1.2s ease,
        filter .8s ease;
}

.stories-grid:hover .story-card{
    opacity:.62;
}

.stories-grid .story-card:hover{
    opacity:1;
    transform:translateY(-4px);
}

.story-card:hover > img{
    transform:scale(1.035);
    filter:brightness(.88);
}

/* ==================================================
   HUMAN STORIES COVER
================================================== */

.story-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    padding:28px 32px;
    color:#fff;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.10),
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,.16)
    );
}

.cover-top{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.chapter{
    font-size:10px;
    font-weight:500;
    letter-spacing:6px;
    line-height:1.2;
    text-transform:uppercase;
    opacity:.82;

    transition:
        opacity .6s ease,
        letter-spacing .6s ease;
}

.cover-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;

    font-size:10px;
    font-weight:500;
    letter-spacing:3px;
    line-height:1.2;
    text-transform:uppercase;
    opacity:.82;
}

.cover-center{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding-top:2%;
    text-align:center;

    transition:transform .8s ease;
}

.cover-center h3{
    margin:0;

    font-family:'Inter',sans-serif;
    font-size:clamp(70px,9vw,130px);
    font-weight:700;
    letter-spacing:2px;
    line-height:.82;
    text-transform:uppercase;

    color:#fff;
    text-shadow:0 3px 24px rgba(0,0,0,.16);
}

.cover-center h3 + h3{
    margin-top:-6px;
}

.title-human{
    transform:translateX(-24px);
}

.title-stories{
    transform:translateX(22px);
}

.cover-tagline{
    align-self:flex-end;

    width:260px;
    margin-top:20px;
    margin-right:8px;

    font-size:14px;
    font-weight:300;
    line-height:1.5;
    letter-spacing:.8px;
    text-align:left;

    color:#f5f3ed;
    opacity:.88;
}

.line-1{
    display:block;
    text-align:right;
}

.line-2{
    display:block;
    margin-top:16px;
    padding-right:26px;
    text-align:right;
    font-family:'Inter',sans-serif;
}

.story-card:hover .cover-center{
    transform:translateY(-6px);
}

.story-card:hover .chapter{
    opacity:1;
    letter-spacing:7px;
}

.story-card:hover .cover-tagline{
    opacity:1;
    transform:translateY(-2px);
}

/* Human cover ajustada para a grade de quatro colunas */

.human-card .story-overlay{
    padding:20px 18px;
}

.human-card .chapter{
    font-size:8px;
    letter-spacing:4px;
    opacity:.65;
}

.human-card .cover-info{
    gap:2px;
    font-size:8px;
    letter-spacing:2px;
    opacity:.65;
}

.human-card .cover-center{
    position:relative;
    padding-top:14px;
    align-items:center;
}

.human-card .cover-center h3{
    font-size:clamp(34px,3.3vw,52px);
    line-height:.80;
    letter-spacing:0;
}

.human-card .title-human{
    transform:translateX(-28px);
}

.human-card .title-stories{
    transform:translateX(20px);
}

.human-card .cover-tagline{
    position:absolute;
    top:20%;
    right:-12px;
    left:auto;

    width:130px;
    margin:0;

    font-size:9px;
    line-height:1.4;
    letter-spacing:.4px;
    text-align:right;

    color:rgba(255,255,255,.84);
}

.human-card .line-1{
    display:block;
    text-align:right;
}

.human-card .line-2{
    display:block;
    margin-top:8px;
    padding-right:12px;
    text-align:right;
    font-family:'Inter',sans-serif;
}

/* ==================================================
   MOVEMENT COVER
================================================== */

.movement-card{
    position:relative;
    aspect-ratio:9/16;
    overflow:hidden;
}

.movement-move,
.movement-ment{
    position:absolute;

    font-family:'Anton',sans-serif;
    font-size:clamp(54px,5.2vw,82px);
    font-weight:400;
    line-height:.85;
    letter-spacing:-2px;
    text-transform:uppercase;
}

.movement-move{
    top:13%;
    left:3%;
}

.movement-ment{
    top:39%;
    right:2%;
}

.movement-title-solid{
    color:rgba(255,255,255,.94);
    z-index:2;
}



.movement-title-outline{
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.80);
    z-index:4;
}


.movement-chapter{

    font-size:8px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.68;

    transition:
        opacity .6s ease,
        letter-spacing .6s ease,
        transform .6s ease;

}

.movement-card:hover .movement-chapter{

    opacity:1;

    letter-spacing:5px;

    transform:scale(1.04);

}


.movement-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;

    font-size:8px;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.68;
}

.movement-card:hover .movement-art{
    transform:scale(1.035);
    filter:brightness(.88);
}

/* ==================================================
   SOBRE
================================================== */

.about{
    max-width:1300px;
    margin:auto;
    padding:160px 40px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    display:block;
}

.about-text h2{
    margin-bottom:40px;
    font-size:36px;
    font-weight:500;
}

.about-highlight{
    margin-bottom:35px;
    font-size:30px;
    font-weight:300;
    line-height:1.4;
}

.about-text p:last-child{
    font-size:17px;
    line-height:1.8;
    color:#666;
}

/* ==================================================
   HERO IMAGE ANIMATION
================================================== */

@keyframes heroReveal{
    from{
        opacity:0;
        transform:scale(.96);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}


/* ===========================
   CHAPTERS
=========================== */

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

/* Cards verticais */

.story-card {
    width: 100%;
    min-width: 0;
}

/* ===========================
   RIO LIFESTYLE
=========================== */

.rio-banner{
    grid-column:1 / -1;

    aspect-ratio:16 / 9;

    width:100%;
    height:auto;
}

.rio-banner img{
    width:100%;
    height:100%;

    display:block;
    object-fit:cover;
}


/* ==================================================
   RIO LIFESTYLE — COVER
================================================== */

.rio-cover-overlay{
    position:absolute;
    inset:0;

    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:28px 32px;

    color:#fff;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.12),
        rgba(0,0,0,0) 48%,
        rgba(0,0,0,.20)
    );
}


/* Topo */

.rio-cover-top{
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}


.rio-cover-chapter{
    display:inline-block;

    font-size:9px;
    font-weight:500;

    letter-spacing:5px;
    line-height:1.2;

    text-transform:uppercase;

    opacity:.72;

    transition:
        opacity .6s ease,
        letter-spacing .6s ease,
        transform .6s ease;
}


.rio-cover-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:3px;

    font-size:9px;
    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.72;
}


/* Título */

/* ==================================================
   RIO LIFESTYLE — TITLE
================================================== */

.rio-cover-title{
    position:absolute;

    left:44px;
    bottom:56px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    margin:0;

    color:#fff;

    text-transform:uppercase;

    transition:transform .8s ease;
}


/* RIO — pequeno, editorial */

.rio-cover-title span:first-child{
    display:flex;
    align-items:center;
    gap:16px;

    margin:0 0 10px 3px;

    font-size:15px;
    font-weight:500;

    line-height:1;
    letter-spacing:8px;
}


/* pequena linha depois de RIO */

.rio-cover-title span:first-child::after{
    content:"";

    display:block;

    width:58px;
    height:1px;

    background:rgba(255,255,255,.85);
}


/* LIFESTYLE — protagonista */

.rio-cover-title span:last-child{
    margin:0;

    font-family:'Inter',sans-serif;

    font-size:clamp(44px,5.4vw,78px);
    font-weight:600;

    line-height:.88;
    letter-spacing:-3px;

    color:#fff;

    text-shadow:0 3px 18px rgba(0,0,0,.16);
}


/* Hover */

.rio-banner:hover .rio-cover-title{
    transform:translateY(-6px);
}



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

.contact-footer{

    width:100%;

    padding:130px 40px 44px;

    color:#111;
    background:#f4f3ef;

}


/* Conteúdo principal */

.contact-footer-main{

    width:min(760px,100%);

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

}


/* Identificação editorial */

.contact-eyebrow{

    margin-bottom:34px;

    font-size:9px;
    font-weight:500;

    line-height:1;
    letter-spacing:8px;

    color:#888;

    text-transform:uppercase;

}


/* Título */

.contact-footer h2{

    margin:0;

    font-size:clamp(56px,6.2vw,88px);
    font-weight:300;

    line-height:.96;
    letter-spacing:-4px;

    color:#111;

}


/* Mensagem */

.contact-message{

    margin:30px 0 0;

    font-size:16px;
    font-weight:300;

    line-height:1.7;

    color:#666;

}


/* Links sociais */

.contact-links{

    margin-top:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:20px;

}


.contact-links a{

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#222;

    border:1px solid rgba(0,0,0,.12);
    border-radius:50%;

    opacity:.7;

    text-decoration:none;

    transition:
        opacity .3s ease,
        transform .3s ease,
        border-color .3s ease,
        background-color .3s ease;

}


.contact-links a:hover{

    opacity:1;

    transform:translateY(-3px);

    border-color:rgba(0,0,0,.28);

    background:rgba(255,255,255,.5);

}


.contact-links a:focus-visible{

    opacity:1;

    outline:1px solid #111;
    outline-offset:4px;

}


.contact-links svg{

    width:22px;
    height:22px;

    display:block;

    fill:none;
    stroke:currentColor;

    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;

}


/* Rodapé inferior */

.contact-footer-bottom{

    width:min(720px,100%);

    margin:110px auto 0;
    padding-top:28px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:32px;

    border-top:1px solid rgba(0,0,0,.11);

    font-size:9px;
    font-weight:400;

    line-height:1.4;
    letter-spacing:2px;

    color:#777;

    text-transform:uppercase;

}


.contact-footer-bottom p{

    margin:0;

    white-space:nowrap;

}


.contact-name{

    font-weight:500 !important;

    letter-spacing:4px !important;

    color:#111 !important;

}


/* ==================================================
   CONTACT FOOTER — TABLET
================================================== */

@media (max-width:768px){

    .contact-footer{

        padding:110px 32px 38px;

    }


    .contact-footer h2{

        font-size:clamp(54px,11vw,76px);

    }


    .contact-footer-bottom{

        margin-top:90px;

    }

}


/* ==================================================
   CONTACT FOOTER — CELULAR
================================================== */

@media (max-width:600px){

    .contact-footer{

        padding:90px 22px 30px;

    }


    .contact-eyebrow{

        margin-bottom:26px;

        font-size:8px;
        letter-spacing:5px;

    }


    .contact-footer h2{

        font-size:clamp(44px,14vw,64px);

        line-height:1;
        letter-spacing:-2px;

    }


    .contact-message{

        margin-top:26px;

        font-size:15px;

    }


    .contact-links{

        margin-top:34px;

        gap:16px;

    }


    .contact-links a{

        width:46px;
        height:46px;

    }


    .contact-links svg{

        width:20px;
        height:20px;

    }


    .contact-footer-bottom{

        margin-top:78px;
        padding-top:26px;

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}


/* ==================================================
   MOVEMENT COVER
================================================== */

.movement-card{
    position:relative;

    display:block;

    width:100%;
    aspect-ratio:9 / 16;

    overflow:hidden;
    isolation:isolate;

    background:#d8dede;
}


/* Área completa da composição */

.movement-art{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;
}


/* Fotografia original */

.movement-background{
    position:absolute;
    inset:0;

    z-index:1;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .8s ease,
        filter .8s ease;
}


/* ==================================================
   TÍTULO MOVEMENT
================================================== */

.movement-title{
    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    font-family:"Anton", sans-serif;
    font-weight:400;

    line-height:.82;
    letter-spacing:-2px;

    text-transform:uppercase;

    color:#fff;

    text-shadow:0 2px 12px rgba(0,0,0,.08);
}


/* MOVE — parte superior esquerda */

.movement-move{
    position:absolute;

    top:35%;
    left:4%;

    font-size:clamp(60px,6vw,94px);
}


/* MENT — mais próximo visualmente do MOVE */

.movement-ment{
    position:absolute;

    top:45%;
    right:1.5%;

    font-size:clamp(60px,6vw,94px);
}


/* Texto sólido que fica atrás da personagem */

.movement-title-solid{
    z-index:2;
}


/* Texto contornado que aparece na frente */

.movement-title-outline{
    z-index:4;

    color:transparent;

    -webkit-text-stroke:1.2px rgba(255,255,255,.94);
    text-shadow:1.2px rgba(255,255,255,.94);

    text-shadow:none;
}


/* ==================================================
   PERSONAGEM RECORTADA
================================================== */

.movement-cutout{
    position:absolute;

    /*
       Estes quatro valores controlam exclusivamente
       o tamanho e o alinhamento do recorte.
    */

    width:152%;
    height:auto;

    left:52%;
    bottom:-25%;

    z-index:3;

    display:block;

    transform:translateX(-50%);

    pointer-events:none;

    object-fit:contain;
    object-position:center bottom;

    transition:transform .8s ease;
}


/* ==================================================
   INFORMAÇÕES SUPERIORES
================================================== */

.movement-overlay{
    position:absolute;
    inset:0;

    z-index:5;

    padding:22px 20px;

    color:#fff;

    pointer-events:none;
}


.movement-top{
    width:100%;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}


.movement-chapter,
.movement-info{
    font-size:8px;
    font-weight:500;

    line-height:1.35;
    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.78;
}


.movement-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:2px;

    letter-spacing:2px;
}


/* ==================================================
   HOVER
================================================== */

.movement-card:hover .movement-background{
    transform:scale(1.035);
    filter:brightness(.9);
}


.movement-card:hover .movement-cutout{
    transform:translateX(-50%) scale(1.035);
}


.movement-card:hover .movement-move{
    transform:translateX(3px);
}


.movement-card:hover .movement-ment{
    transform:translateX(-3px);
}


.movement-move,
.movement-ment{
    transition:transform .7s ease;
}


/* ==================================================
   PORTRAIT COVER
================================================== */

.portrait-card{
    position:relative;
    overflow:hidden;
}

.portrait-card > img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* Overlay */

.portrait-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:space-between;

    padding:22px 20px;

    color:#fff;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.10),
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,.12)
    );
}


/* Topo */

.portrait-top{
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}


.portrait-chapter{
    display:inline-block;

    font-size:8px;
    font-weight:500;
    letter-spacing:4px;
    line-height:1.2;

    text-transform:uppercase;

    opacity:.68;

    transition:
        opacity .6s ease,
        letter-spacing .6s ease,
        transform .6s ease;
}


.portrait-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:2px;

    font-size:8px;
    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.78;
}


/* Título */

.portrait-title{
    position:absolute;

    top:50%;
    right:18px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:20px;

    margin:0;

    transform:translateY(-50%);

    font-family:'Inter', sans-serif;
    font-size:35px;
    font-weight:400;

    line-height:.9;

    color:#fff;

    text-transform:uppercase;

    text-shadow:0 2px 12px rgba(0,0,0,.12);

    transition:
        transform .7s ease,
        opacity .7s ease;
}

.portrait-title span{
    display:block;
}


/* HOVER */

.portrait-card:hover .portrait-chapter{
    opacity:1;
    letter-spacing:5px;
    transform:scale(1.04);
}


/* ==================================================
   HOME — RESPONSIVE
================================================== */


/* ==================================================
   TABLET / NOTEBOOK PEQUENO
================================================== */

@media (max-width:900px){

    /* HERO */

    .hero{
        min-height:100vh;
        padding:120px 32px 140px;
    }

    .hero-text{
        margin-bottom:110px;
    }

    .hero-text h1{
        font-size:clamp(40px,7vw,52px);
        letter-spacing:8px;
    }

    .hero-image{
        width:100%;
        max-width:900px;
    }

    .hero .scroll-indicator{
        margin-top:60px;
    }


    /* MANIFESTO */

    .manifesto{
        padding:130px 32px;
    }

    .manifesto-container{
        max-width:760px;
    }

    .manifesto h2{
        font-size:clamp(36px,5.5vw,46px);
        line-height:1.45;
    }


    /* COLLECTION */

    .stories{
        padding:100px 32px;
    }

    .stories-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }


    /* Portrait vira o terceiro card centralizado */

    .portrait-card{
        grid-column:1 / -1;

        width:calc(50% - 10px);

        justify-self:center;
    }


    /* Rio continua ocupando tudo */

    .rio-banner{
        grid-column:1 / -1;
        width:100%;
    }


    /* HUMAN */

    .human-card .cover-center h3{
        font-size:clamp(42px,7vw,62px);
    }

    .human-card .cover-tagline{
        width:145px;
        font-size:10px;
    }


    /* MOVEMENT */

    .movement-move,
    .movement-ment{
        font-size:clamp(58px,8vw,82px);
    }


    /* PORTRAIT */

    .portrait-title{
        font-size:34px;
        gap:18px;
    }


    /* RIO */

    .rio-cover-overlay{
        padding:22px 26px;
    }

    .rio-cover-title{
        left:30px;
        bottom:38px;
    }

    .rio-cover-title span:first-child{
        font-size:12px;
        letter-spacing:6px;
    }

    .rio-cover-title span:first-child::after{
        width:46px;
    }

    .rio-cover-title span:last-child{
        font-size:clamp(36px,7vw,60px);
    }


    /* ABOUT */

    .about{
        padding:120px 32px;

        grid-template-columns:1fr;

        gap:60px;

        max-width:850px;
    }

    .about-image img{
        height:520px;
    }

}


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

@media (max-width:600px){

    /* HERO */

    .hero{
        min-height:auto;

        padding:
            110px
            22px
            45px;
    }

    .hero-text{
        margin-bottom:75px;
    }

    .hero-text h1{
        font-size:clamp(30px,10vw,40px);

        letter-spacing:6px;
    }

    .hero-subtitle{
        margin-top:18px;

        font-size:14px;
    }

    .hero-subtitle span{
        font-size:9px;

        letter-spacing:3px;
    }

    .hero-image{
        width:100%;
    }

    .hero .scroll-indicator{
        margin-top:48px;
    }


    /* MANIFESTO */

    .manifesto{
        padding:55px 22px 90px;
    }

    .manifesto h2{
        font-size:clamp(27px,8vw,36px);

        line-height:1.48;
    }


    /* COLLECTION */

    .stories{
        padding:85px 22px;
    }

    .stories h2{
        margin-bottom:34px;

        font-size:10px;

        letter-spacing:6px;
    }

    .stories-grid{
        grid-template-columns:1fr;

        gap:24px;
    }


    /* Todas as capas verticais */

    .story-card{
        grid-column:1;

        width:100%;
        max-width:420px;

        justify-self:center;
    }


    /* Portrait deixa de usar largura de 50% */

    .portrait-card{
        width:100%;
    }


    /* RIO continua horizontal */

    .rio-banner{
        grid-column:1;

        width:100%;
        max-width:none;

        aspect-ratio:16 / 9;
    }


    /* ==================================================
       HUMAN MOBILE
    ================================================== */

    .human-card .story-overlay{
        padding:22px 20px;
    }

    .human-card .chapter{
        font-size:8px;
        letter-spacing:4px;
    }

    .human-card .cover-info{
        font-size:8px;
    }

    .human-card .cover-center{
        padding-top:20px;
    }

    .human-card .cover-center h3{
        font-size:clamp(48px,15vw,70px);
    }

    .human-card .cover-tagline{
        top:21%;
        right:-4px;

        width:145px;

        font-size:9.5px;
    }


    /* ==================================================
       MOVEMENT MOBILE
    ================================================== */

    .movement-overlay{
        padding:20px 18px;
    }

    .movement-move,
    .movement-ment{
        font-size:clamp(58px,16vw,76px);
    }

    /*
       Mantemos o seu alinhamento autoral do recorte.
       Não mexer nesses valores agora.
    */

    .movement-cutout{
        width:152%;
        left:52%;
        bottom:-25%;
    }


    /* ==================================================
       PORTRAIT MOBILE
    ================================================== */

    .portrait-overlay{
        padding:20px 18px;
    }

    .portrait-title{
        right:18px;

        font-size:clamp(30px,9vw,35px);

        gap:17px;
    }


    /* ==================================================
       RIO MOBILE
    ================================================== */

    .rio-cover-overlay{
        padding:17px 18px;
    }

    .rio-cover-chapter{
        font-size:7px;

        letter-spacing:3px;
    }

    .rio-cover-info{
        font-size:7px;

        letter-spacing:1.5px;
    }

    .rio-cover-title{
        left:22px;
        bottom:24px;
    }

    .rio-cover-title span:first-child{
        margin-bottom:7px;

        font-size:9px;

        letter-spacing:4px;
    }

    .rio-cover-title span:first-child::after{
        width:34px;
    }

    .rio-cover-title span:last-child{
        font-size:clamp(26px,8.5vw,40px);

        letter-spacing:-1.5px;
    }


    /* ==================================================
       ABOUT MOBILE
    ================================================== */

    .about{
        padding:95px 22px;

        gap:45px;
    }

    .about-image img{
        width:100%;
        height:auto;

        max-height:500px;

        object-fit:cover;
    }

    .about-text h2{
        margin-bottom:26px;

        font-size:30px;
    }

    .about-highlight{
        margin-bottom:26px;

        font-size:24px;

        line-height:1.45;
    }

    .about-text p:last-child{
        font-size:15px;

        line-height:1.8;
    }


    /* ==================================================
       CONTACT MOBILE
    ================================================== */

    .contact-footer{
        padding:90px 22px 30px;
    }

    .contact-footer-main{
        width:100%;
    }

    .contact-footer h2{
        font-size:clamp(42px,13vw,60px);

        letter-spacing:-2px;
    }

    .contact-message{
        font-size:15px;
    }

}


/* ==================================================
   CELULARES PEQUENOS
================================================== */

@media (max-width:390px){

    .hero-text h1{
        font-size:29px;

        letter-spacing:5px;
    }

    .stories{
        padding-left:16px;
        padding-right:16px;
    }

    .human-card .cover-center h3{
        font-size:clamp(44px,15vw,60px);
    }

    .rio-cover-title{
        left:18px;
        bottom:18px;
    }

    .rio-cover-title span:last-child{
        font-size:28px;
    }

}


/* LCP — imagem principal deve aparecer imediatamente */

.hero-image{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
}