/* ==========================================================
   ALICERCE IMBATÍVEL
   TRABALHOS — CINEMATIC VERTICAL
   12/09/2026

   NIENTE PIN
   NIENTE HORIZONTAL SCROLL
   NIENTE SPAZIO VUOTO ARTIFICIALE
   ========================================================== */

.cin-work-page {
    --cin-blue: #102442;
    --cin-deep: #07162a;
    --cin-orange: #f05a17;
    --cin-cream: #f6e5bd;
    --cin-white: #ffffff;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;

    background: var(--cin-deep);
    color: var(--cin-white);
}


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

.cin-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;

    overflow: hidden;

    padding:
        clamp(130px, 18vh, 220px)
        clamp(24px, 6vw, 110px)
        clamp(70px, 9vh, 120px);

    isolation: isolate;
}

.cin-hero-media {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.cin-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transform: scale(1.08);
    will-change: transform;
}

.cin-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(7,22,42,.94) 0%,
            rgba(7,22,42,.67) 42%,
            rgba(7,22,42,.12) 75%,
            rgba(7,22,42,.35) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,22,42,.86) 0%,
            transparent 50%
        );
}

.cin-hero-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(
            to right,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 20% 100%;
}

.cin-hero-copy {
    position: relative;
    z-index: 2;

    max-width: 1100px;
}

.cin-kicker,
.cin-label,
.cin-section-head > span,
.cin-project-title > span,
.cin-final-copy > span {
    display: block;

    margin-bottom: 24px;

    color: var(--cin-orange);

    font-size: clamp(11px, .9vw, 14px);
    font-weight: 800;

    letter-spacing: .22em;
    text-transform: uppercase;
}

.cin-hero h1 {
    margin: 0;

    font-size: clamp(66px, 10.6vw, 190px);
    line-height: .79;

    letter-spacing: -.065em;
    font-weight: 900;
}

.cin-hero h1 em,
.cin-intro h2 em,
.cin-scene h2 em,
.cin-section-head h2 em,
.cin-final h2 em {
    color: var(--cin-orange);

    font-style: normal;
}

.cin-hero p {
    max-width: 570px;

    margin:
        clamp(32px, 5vh, 55px)
        0
        0;

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

    font-size: clamp(15px, 1.3vw, 20px);
    line-height: 1.65;
}

.cin-scroll-indicator {
    position: absolute;
    right: clamp(24px, 5vw, 90px);
    bottom: clamp(55px, 8vh, 100px);

    display: flex;
    align-items: center;
    gap: 16px;

    transform: rotate(90deg);
    transform-origin: right bottom;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .2em;
}

.cin-scroll-indicator i {
    display: block;

    width: 70px;
    height: 1px;

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


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

.cin-intro {
    position: relative;

    min-height: 88vh;

    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;

    gap: clamp(24px, 6vw, 100px);

    padding: 12vh clamp(24px, 8vw, 140px);

    overflow: hidden;
}

.cin-intro-number {
    align-self: start;

    padding-top: 14px;

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

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .2em;
}

.cin-intro-copy {
    position: relative;
    z-index: 2;

    max-width: 1100px;
}

.cin-intro h2 {
    margin: 0;

    font-size: clamp(48px, 8vw, 142px);
    line-height: .88;

    letter-spacing: -.055em;
    font-weight: 900;
}

.cin-intro p {
    max-width: 600px;

    margin: 40px 0 0 auto;

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

    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.7;
}

.cin-intro-word {
    position: absolute;
    left: -2vw;
    bottom: -3vw;

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

    font-size: 19vw;
    line-height: .7;

    font-weight: 900;
    letter-spacing: -.08em;

    white-space: nowrap;
    pointer-events: none;
}


/* ==========================================================
   SCENE CINEMATICHE
   ========================================================== */

.cin-reel {
    position: relative;

    padding: 4vh 0 16vh;
}

.cin-scene {
    position: relative;

    min-height: 92vh;

    display: flex;
    align-items: center;

    padding: 8vh 0;

    overflow: hidden;
}

.cin-scene-inner {
    position: relative;

    width: min(1500px, 94vw);
    margin: 0 auto;
}

.cin-scene-media {
    position: relative;

    width: 78%;
    height: min(73vh, 800px);

    overflow: hidden;

    clip-path: inset(100% 0 0 0);

    transition:
        clip-path 1.05s cubic-bezier(.22,.61,.36,1);
}

.cin-scene-right .cin-scene-media {
    margin-left: auto;
}

.cin-scene.is-in .cin-scene-media {
    clip-path: inset(0 0 0 0);
}

.cin-scene-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,22,42,.55),
            transparent 55%
        );

    pointer-events: none;
}

.cin-scene-right .cin-scene-media::after {
    background:
        linear-gradient(
            -90deg,
            rgba(7,22,42,.55),
            transparent 55%
        );
}

.cin-scene-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.08);
    will-change: transform;
}

.cin-scene-copy {
    position: absolute;
    z-index: 3;

    top: 50%;
    right: 2vw;

    width: min(650px, 46vw);

    transform: translateY(-42%);

    opacity: 0;

    transition:
        opacity .75s ease .28s,
        transform .9s cubic-bezier(.22,.61,.36,1) .18s;
}

.cin-scene-right .cin-scene-copy {
    right: auto;
    left: 2vw;
}

.cin-scene.is-in .cin-scene-copy {
    opacity: 1;

    transform: translateY(-50%);
}

.cin-scene-copy > span {
    display: block;

    margin-bottom: 20px;

    color: var(--cin-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .22em;
}

.cin-scene h2 {
    margin: 0;

    font-size: clamp(48px, 6.5vw, 118px);
    line-height: .85;

    font-weight: 900;
    letter-spacing: -.055em;

    text-shadow: 0 10px 45px rgba(0,0,0,.5);
}

.cin-scene p {
    max-width: 390px;

    margin-top: 28px;

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

    font-size: 15px;
    line-height: 1.6;
}


/* ==========================================================
   SEZIONI GENERALI
   ========================================================== */

.cin-latest,
.cin-project,
.cin-terraces {
    position: relative;

    padding:
        clamp(90px, 14vh, 170px)
        clamp(24px, 6vw, 110px);
}

.cin-section-head,
.cin-project-title {
    max-width: 1100px;

    margin-bottom:
        clamp(60px, 10vh, 130px);
}

.cin-section-head h2,
.cin-project-title h2 {
    margin: 0;

    font-size: clamp(54px, 8vw, 140px);
    line-height: .86;

    font-weight: 900;
    letter-spacing: -.06em;
}

.cin-section-head p {
    max-width: 520px;

    margin: 35px 0 0 auto;

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

    line-height: 1.7;
}


/* ==========================================================
   RECENTI — COMPOSIZIONE EDITORIALE
   ========================================================== */

.cin-latest {
    background: var(--cin-cream);
    color: var(--cin-blue);
}

.cin-latest .cin-section-head > span {
    color: var(--cin-orange);
}

.cin-latest .cin-section-head p {
    color: rgba(16,36,66,.68);
}

.cin-latest-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0,1fr));

    grid-template-rows:
        14vh
        minmax(200px, 31vh)
        minmax(220px, 36vh)
        12vh;

    gap: clamp(12px, 1.5vw, 24px);
}

.cin-latest-layout figure {
    margin: 0;

    overflow: hidden;
}

.cin-latest-layout img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.cin-latest-layout figure:hover img {
    transform: scale(1.035);
}

.cin-latest-a {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
}

.cin-latest-b {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
}

.cin-latest-c {
    grid-column: 8 / 13;
    grid-row: 3 / 5;
}


/* ==========================================================
   PISCINAS
   ========================================================== */

.cin-project-pool {
    background: var(--cin-blue);
}

.cin-before-after {
    display: flex;
    flex-direction: column;

    gap: clamp(90px, 14vh, 170px);
}

.cin-ba-block {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: clamp(12px, 2vw, 32px);

    align-items: end;
}

.cin-ba-block:nth-child(even) {
    padding-left: 10vw;
}

.cin-ba-block figure {
    position: relative;

    margin: 0;
    overflow: hidden;
}

.cin-ba-block figure:first-child {
    height: min(62vh, 650px);
}

.cin-ba-block figure:last-child {
    height: min(74vh, 760px);
}

.cin-ba-block img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1.1s ease;
}

.cin-ba-block figure:hover img {
    transform: scale(1.03);
}

.cin-ba-block figcaption {
    position: absolute;

    left: 22px;
    bottom: 18px;

    padding: 8px 12px;

    background: var(--cin-orange);
    color: white;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .18em;
}


/* ==========================================================
   TERRAÇOS
   ========================================================== */

.cin-terraces {
    background: #091c33;
}

.cin-terrace-stage {
    position: relative;

    min-height: 145vh;
}

.cin-terrace-stage figure {
    position: absolute;

    margin: 0;

    overflow: hidden;

    box-shadow:
        0 30px 90px rgba(0,0,0,.35);
}

.cin-terrace-stage img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cin-terrace-stage figcaption {
    position: absolute;
    left: 20px;
    bottom: 18px;

    color: white;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;
}

.cin-terrace-one {
    left: 0;
    top: 0;

    width: 63%;
    height: 55vh;
}

.cin-terrace-two {
    right: 0;
    top: 45vh;

    width: 57%;
    height: 54vh;
}

.cin-terrace-three {
    left: 8%;
    top: 94vh;

    width: 66%;
    height: 48vh;
}


/* ==========================================================
   CTA FINALE
   ========================================================== */

.cin-final {
    position: relative;

    min-height: 90vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(90px, 14vh, 170px)
        clamp(24px, 7vw, 125px);

    background: var(--cin-orange);
    color: white;

    overflow: hidden;
}

.cin-final::after {
    content: "ALICERCE";

    position: absolute;

    right: -3vw;
    bottom: -3vw;

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

    font-size: 19vw;
    font-weight: 900;

    letter-spacing: -.08em;

    pointer-events: none;
}

.cin-final-copy {
    position: relative;
    z-index: 2;
}

.cin-final-copy > span {
    color: white;
}

.cin-final h2 {
    margin: 0;

    font-size: clamp(62px, 9vw, 160px);
    line-height: .83;

    font-weight: 900;
    letter-spacing: -.06em;
}

.cin-final h2 em {
    color: var(--cin-blue);
}

.cin-final p {
    margin-top: 32px;

    font-size: 17px;
}

.cin-final-link {
    position: relative;
    z-index: 3;

    width: 100%;

    margin-top: 70px;

    padding:
        26px 0;

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

    border-top:
        1px solid rgba(255,255,255,.55);

    border-bottom:
        1px solid rgba(255,255,255,.55);

    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 900;

    letter-spacing: .16em;
}

.cin-final-link strong {
    font-size: 36px;

    transition: transform .25s ease;
}

.cin-final-link:hover strong {
    transform: translateX(10px);
}


/* ==========================================================
   REVEAL
   ========================================================== */

.cin-reveal {
    opacity: 0;

    transform: translateY(55px);

    transition:
        opacity .8s ease,
        transform .95s cubic-bezier(.22,.61,.36,1);
}

.cin-reveal.is-in {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .cin-hero {
        min-height: 92svh;

        padding:
            130px 24px
            70px;
    }

    .cin-hero h1 {
        font-size: clamp(64px, 16vw, 115px);
    }

    .cin-scroll-indicator {
        display: none;
    }

    .cin-intro {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            110px 24px
            130px;
    }

    .cin-intro-number {
        display: none;
    }

    .cin-intro p {
        margin-left: 0;
    }

    .cin-scene {
        min-height: auto;

        padding:
            45px 0
            100px;
    }

    .cin-scene-inner {
        width: 100%;
    }

    .cin-scene-media,
    .cin-scene-right .cin-scene-media {
        width: calc(100% - 34px);
        height: 65vh;

        margin:
            0
            0
            0
            34px;
    }

    .cin-scene:nth-child(even) .cin-scene-media {
        margin:
            0
            34px
            0
            0;
    }

    .cin-scene-copy,
    .cin-scene-right .cin-scene-copy {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: auto;

        margin:
            -75px
            22px
            0;

        padding:
            30px
            24px;

        background:
            rgba(7,22,42,.91);

        transform: translateY(35px);
    }

    .cin-scene.is-in .cin-scene-copy {
        transform: translateY(0);
    }

    .cin-scene h2 {
        font-size: clamp(46px, 13vw, 82px);
    }

    .cin-latest,
    .cin-project,
    .cin-terraces {
        padding:
            100px 22px;
    }

    .cin-latest-layout {
        display: flex;
        flex-direction: column;
    }

    .cin-latest-layout figure {
        height: 55vh;
    }

    .cin-ba-block,
    .cin-ba-block:nth-child(even) {
        grid-template-columns: 1fr;

        padding-left: 0;
    }

    .cin-ba-block figure:first-child,
    .cin-ba-block figure:last-child {
        height: 52vh;
    }

    .cin-terrace-stage {
        min-height: 155vh;
    }

    .cin-terrace-one {
        width: 90%;
        height: 48vh;
    }

    .cin-terrace-two {
        top: 47vh;

        width: 88%;
        height: 48vh;
    }

    .cin-terrace-three {
        top: 94vh;

        left: 5%;

        width: 90%;
        height: 48vh;
    }

}


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

@media (max-width: 560px) {

    .cin-hero {
        min-height: 86svh;

        padding:
            125px 20px
            55px;
    }

    .cin-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,22,42,.94) 0%,
                rgba(7,22,42,.45) 68%,
                rgba(7,22,42,.28) 100%
            );
    }

    .cin-hero h1 {
        font-size: clamp(56px, 19vw, 86px);
    }

    .cin-hero p {
        max-width: 94%;

        font-size: 14px;
    }

    .cin-intro h2,
    .cin-section-head h2,
    .cin-project-title h2 {
        font-size: clamp(46px, 15vw, 74px);
    }

    .cin-scene-media,
    .cin-scene-right .cin-scene-media,
    .cin-scene:nth-child(even) .cin-scene-media {
        width: calc(100% - 20px);
        height: 58vh;

        margin:
            0
            0
            0
            20px;
    }

    .cin-scene:nth-child(even) .cin-scene-media {
        margin:
            0
            20px
            0
            0;
    }

    .cin-scene-copy,
    .cin-scene-right .cin-scene-copy {
        margin:
            -58px
            14px
            0;
    }

    .cin-scene h2 {
        font-size: clamp(43px, 14vw, 70px);
    }

    .cin-latest-layout figure {
        height: 48vh;
    }

    .cin-ba-block figure:first-child,
    .cin-ba-block figure:last-child {
        height: 44vh;
    }

    .cin-final {
        min-height: 76vh;

        padding:
            100px 22px;
    }

    .cin-final h2 {
        font-size: clamp(54px, 16vw, 82px);
    }

}


/* ==========================================================
   ACCESSIBILITÀ / MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cin-reveal,
    .cin-scene-copy {
        opacity: 1 !important;
        transform: none !important;

        transition: none !important;
    }

    .cin-scene-media {
        clip-path: none !important;

        transition: none !important;
    }

}


/* ===== ALICERCE EVOLUCAO OBRA 2026-09-12 ===== */

.cin-evolution{
    position:relative;
    overflow:hidden;
    padding:
        clamp(110px,15vh,190px)
        clamp(24px,6vw,110px);
    background:#f6e5bd;
    color:#102442;
}

.cin-evolution::before{
    content:"OBRA";
    position:absolute;
    top:1vw;
    right:-2vw;
    font-size:24vw;
    line-height:.8;
    font-weight:900;
    letter-spacing:-.09em;
    color:rgba(16,36,66,.035);
    pointer-events:none;
}

.cin-evo-head{
    position:relative;
    z-index:2;
    max-width:1100px;
    margin-bottom:clamp(90px,14vh,180px);
}

.cin-evo-head > span{
    display:block;
    margin-bottom:24px;
    color:#f05a17;
    font-size:12px;
    font-weight:900;
    letter-spacing:.22em;
}

.cin-evo-head h2{
    margin:0;
    font-size:clamp(58px,8.5vw,150px);
    line-height:.84;
    font-weight:900;
    letter-spacing:-.065em;
}

.cin-evo-head h2 em{
    color:#f05a17;
    font-style:normal;
}

.cin-evo-head p{
    max-width:590px;
    margin:40px 0 0 auto;
    color:rgba(16,36,66,.68);
    font-size:clamp(15px,1.2vw,19px);
    line-height:1.7;
}

.cin-evo-sequence{
    position:relative;
    z-index:2;
}

.cin-evo-sequence::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:rgba(16,36,66,.12);
}

.cin-evo-row{
    position:relative;
    min-height:82vh;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
    gap:clamp(35px,7vw,120px);
    align-items:center;
    margin-bottom:clamp(90px,14vh,180px);
}

.cin-evo-row:last-child{
    margin-bottom:0;
}

.cin-evo-right{
    grid-template-columns:minmax(280px,.55fr) minmax(0,1.45fr);
}

.cin-evo-right .cin-evo-media{
    grid-column:2;
}

.cin-evo-right .cin-evo-copy{
    grid-column:1;
    grid-row:1;
    text-align:right;
}

.cin-evo-media{
    position:relative;
    width:100%;
    height:min(75vh,820px);
    margin:0;
    overflow:hidden;
    background:#102442;

    clip-path:inset(0 100% 0 0);

    transition:
        clip-path 1.15s cubic-bezier(.22,.61,.36,1);
}

.cin-evo-right .cin-evo-media{
    clip-path:inset(0 0 0 100%);
}

.cin-evo-row.is-in .cin-evo-media{
    clip-path:inset(0);
}

.cin-evo-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,22,42,.28) 100%
        );
    pointer-events:none;
}

.cin-evo-media img{
    width:100%;
    height:100%;
    object-fit:cover;

    transform:scale(1.11);

    transition:
        transform 1.8s cubic-bezier(.22,.61,.36,1);
}

.cin-evo-row.is-in .cin-evo-media img{
    transform:scale(1.01);
}

.cin-evo-copy{
    position:relative;
    z-index:4;
}

.cin-evo-copy > span{
    display:block;
    margin-bottom:22px;

    color:#f05a17;

    font-size:12px;
    font-weight:900;
    letter-spacing:.28em;

    opacity:0;
    transform:translateY(26px);

    transition:
        opacity .65s ease .35s,
        transform .75s ease .35s;
}

.cin-evo-copy h3{
    margin:0;

    font-size:clamp(38px,4.7vw,84px);
    line-height:.9;
    font-weight:900;
    letter-spacing:-.055em;

    opacity:0;
    transform:translateY(45px);

    transition:
        opacity .75s ease .48s,
        transform .9s cubic-bezier(.22,.61,.36,1) .48s;
}

.cin-evo-row.is-in .cin-evo-copy > span,
.cin-evo-row.is-in .cin-evo-copy h3{
    opacity:1;
    transform:translateY(0);
}

.cin-evo-row::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#f05a17;
    transform:translate(-50%,-50%);
    box-shadow:
        0 0 0 8px #f6e5bd,
        0 0 0 9px rgba(16,36,66,.16);
}


/* movimento molto leggero al passaggio mouse */

.cin-evo-media:hover img{
    transform:scale(1.045);
}


/* TABLET */

@media(max-width:900px){

    .cin-evolution{
        padding:
            110px 22px;
    }

    .cin-evo-sequence::before,
    .cin-evo-row::after{
        display:none;
    }

    .cin-evo-row,
    .cin-evo-right{
        min-height:auto;

        display:flex;
        flex-direction:column;

        gap:28px;

        margin-bottom:100px;
    }

    .cin-evo-right .cin-evo-media,
    .cin-evo-right .cin-evo-copy{
        order:initial;
        text-align:left;
    }

    .cin-evo-media{
        width:100%;
        height:65vh;
    }

    .cin-evo-copy{
        width:100%;
    }

}


/* MOBILE */

@media(max-width:560px){

    .cin-evo-head h2{
        font-size:clamp(48px,15vw,72px);
    }

    .cin-evo-media{
        height:56vh;
    }

    .cin-evo-copy h3{
        font-size:clamp(38px,12vw,58px);
    }

}


/* riduzione movimento */

@media(prefers-reduced-motion:reduce){

    .cin-evo-media,
    .cin-evo-copy > span,
    .cin-evo-copy h3{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
        transition:none !important;
    }

}

/* ===== FIM ALICERCE EVOLUCAO OBRA 2026-09-12 ===== */



/* === HEADER_SERVICOS_COPIATO_2026_09_12_START === */

.site-header{
    position:fixed !important;

    top:24px !important;
    left:50% !important;
    right:auto !important;

    transform:translateX(-50%) !important;

    width:calc(100% - 150px) !important;
    max-width:1500px !important;

    height:30px !important;
    min-height:30px !important;

    padding:0 14px !important;

    background:rgba(255,248,226,.67) !important;

    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:8px !important;

    backdrop-filter:blur(10px);

    z-index:99999 !important;
}

.site-header .brand{
    height:30px !important;

    display:flex !important;
    align-items:center !important;
}

.site-header .brand-logo{
    width:30px !important;
    height:30px !important;

    padding:0 !important;

    object-fit:contain !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.site-header .brand h1{
    margin:0 0 0 10px !important;

    font-size:13px !important;

    line-height:1 !important;

    white-space:nowrap !important;
}

.site-header .brand p,
.site-header .header-btn{
    display:none !important;
}

@media(min-width:901px){

    .site-header nav{
        position:absolute !important;

        left:50% !important;
        top:50% !important;

        transform:translate(-50%,-50%) !important;

        display:flex !important;

        align-items:center !important;

        gap:36px !important;

        margin:0 !important;
    }

    .site-header nav a{
        padding:0 !important;

        font-size:13px !important;

        line-height:1 !important;
    }

}

    .site-header{
        width:calc(100% - 40px) !important;
    }

/* === HEADER_SERVICOS_COPIATO_2026_09_12_END === */


/* === HERO_TRABALHOS_ANIMATION_START === */

/* movimento lentissimo della fotografia */
.cin-hero-media{
    transform-origin:center center;
    animation:cinHeroBreath 14s ease-in-out infinite alternate;
}

@keyframes cinHeroBreath{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.035);
    }
}


/* TYPEWRITER PICCOLO SOPRA */
.cin-hero .cin-kicker{
    position:relative;
    display:inline-block;
    min-height:1.2em;
    padding-right:7px;
}

.cin-hero .cin-kicker::after{
    content:"";
    position:absolute;
    right:0;
    top:8%;
    width:2px;
    height:84%;
    background:currentColor;
    animation:cinCursorBlink .72s steps(1) infinite;
}

@keyframes cinCursorBlink{
    0%,45%{
        opacity:1;
    }
    46%,100%{
        opacity:0;
    }
}


/* TITOLONE — ENTRA RIGA PER RIGA */
.cin-hero h1 .cin-hero-line{
    display:block;
    overflow:hidden;
    padding-bottom:.04em;
    margin-bottom:-.04em;
}

.cin-hero h1 .cin-hero-line-inner{
    display:inline-block;

    opacity:0;

    transform:
        translate3d(0,115%,0)
        rotate(1.5deg);

    filter:blur(8px);

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        opacity .55s ease,
        filter .85s ease;
}

.cin-hero.hero-anim-ready
h1 .cin-hero-line:nth-child(1)
.cin-hero-line-inner{
    transition-delay:.12s;
}

.cin-hero.hero-anim-ready
h1 .cin-hero-line:nth-child(2)
.cin-hero-line-inner{
    transition-delay:.30s;
}

.cin-hero.hero-anim-ready
h1 .cin-hero-line:nth-child(3)
.cin-hero-line-inner{
    transition-delay:.48s;
}

.cin-hero.hero-anim-ready
h1 .cin-hero-line-inner{
    opacity:1;

    transform:
        translate3d(0,0,0)
        rotate(0deg);

    filter:blur(0);
}


/* PARAGRAFO */
.cin-hero-copy > p{
    opacity:0;

    transform:translate3d(0,24px,0);

    transition:
        opacity .8s ease 1.05s,
        transform .9s cubic-bezier(.16,1,.3,1) 1.05s;
}

.cin-hero.hero-anim-ready
.cin-hero-copy > p{
    opacity:1;
    transform:translate3d(0,0,0);
}


/* INDICATORE A DESTRA */
.cin-scroll-indicator{
    opacity:0;
    transform:
        rotate(90deg)
        translateX(18px);

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

.cin-hero.hero-anim-ready
.cin-scroll-indicator{
    opacity:1;

    transform:
        rotate(90deg)
        translateX(0);
}


/* ACCESSIBILITÀ */
@media(prefers-reduced-motion:reduce){

    .cin-hero-media{
        animation:none !important;
    }

    .cin-hero h1 .cin-hero-line-inner,
    .cin-hero-copy > p,
    .cin-scroll-indicator{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
    }

    .cin-hero .cin-kicker::after{
        display:none;
    }
}

/* === HERO_TRABALHOS_ANIMATION_END === */



/* === CIN_INTRO_ANIMATION_START === */

/* La sezione resta visibile: animiamo i singoli elementi */
.cin-intro.cin-reveal{
    opacity:1 !important;
    transform:none !important;
}

/* 01 */
.cin-intro-number{
    opacity:0;
    transform:translateY(24px);

    transition:
        opacity .6s ease,
        transform .75s cubic-bezier(.16,1,.3,1);
}

/* piccolo titolo arancione */
.cin-intro .cin-label{
    opacity:0;
    transform:translateY(28px);

    transition:
        opacity .65s ease .15s,
        transform .8s cubic-bezier(.16,1,.3,1) .15s;
}

/* titolo grande */
.cin-intro h2{
    overflow:hidden;
}

.cin-intro h2{
    opacity:0;
    transform:translateY(70px);

    filter:blur(7px);

    transition:
        opacity .7s ease .28s,
        transform 1s cubic-bezier(.16,1,.3,1) .28s,
        filter .9s ease .28s;
}

/* paragrafo */
.cin-intro p{
    opacity:0;
    transform:translateY(35px);

    transition:
        opacity .7s ease .65s,
        transform .9s cubic-bezier(.16,1,.3,1) .65s;
}

/* parola gigante sul fondo */
.cin-intro-word{
    opacity:0;
    transform:translateX(-70px);

    transition:
        opacity 1.2s ease .55s,
        transform 1.4s cubic-bezier(.16,1,.3,1) .55s;
}


/* QUANDO ARRIVA NELLO SCHERMO */

.cin-intro.is-in .cin-intro-number,
.cin-intro.is-in .cin-label,
.cin-intro.is-in h2,
.cin-intro.is-in p,
.cin-intro.is-in .cin-intro-word{
    opacity:1;
    transform:none;
    filter:none;
}


/* movimento molto lento della parola gigante */

.cin-intro.is-in .cin-intro-word{
    animation:cinIntroGhost 12s ease-in-out 1.4s infinite alternate;
}

@keyframes cinIntroGhost{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(35px);
    }
}


/* ACCESSIBILITÀ */

@media(prefers-reduced-motion:reduce){

    .cin-intro-number,
    .cin-intro .cin-label,
    .cin-intro h2,
    .cin-intro p,
    .cin-intro-word{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
        animation:none !important;
    }

}

/* === CIN_INTRO_ANIMATION_END === */



/* === FIX_TUTTE_SCENE_TESTI_START === */

@media (min-width:901px){

    /* contenitore più largo */
    .cin-scene-inner{
        width:min(1600px,96vw) !important;
    }


    /* fotografie più presenti: meno buco blu */
    .cin-scene-media{
        width:88% !important;
        height:min(72vh,780px) !important;
        margin-left:0 !important;
    }

    .cin-scene-right .cin-scene-media{
        width:88% !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }


    /* -----------------------------------------
       TESTO SCENA NORMALE:
       bordo destro, solo piccola parte sulla foto
       ----------------------------------------- */

    .cin-scene-copy{
        top:50% !important;

        right:clamp(18px,2.2vw,42px) !important;
        left:auto !important;

        width:min(500px,31vw) !important;

        transform:translateY(-50%) !important;

        text-align:left !important;
    }


    /* -----------------------------------------
       SCENA ALTERNATA:
       stesso principio sul lato sinistro
       ----------------------------------------- */

    .cin-scene-right .cin-scene-copy{
        left:clamp(18px,2.2vw,42px) !important;
        right:auto !important;

        width:min(500px,31vw) !important;

        text-align:left !important;
    }


    /* titolo meno enorme: non schiaccia la fotografia */
    .cin-scene h2{
        font-size:clamp(46px,4.9vw,88px) !important;
        line-height:.87 !important;
        letter-spacing:-.05em !important;

        max-width:500px !important;

        text-shadow:
            0 4px 18px rgba(0,0,0,.32),
            0 15px 45px rgba(0,0,0,.22);
    }


    .cin-scene-copy > span{
        margin-bottom:16px !important;
    }


    .cin-scene p{
        max-width:330px !important;

        margin-top:22px !important;

        line-height:1.55 !important;
    }


    /* -----------------------------------------
       GRADIENTE CORRETTO:
       scurisce IL LATO DOVE C'È IL TESTO
       ----------------------------------------- */

    .cin-scene:not(.cin-scene-right)
    .cin-scene-media::after{
        background:
            linear-gradient(
                -90deg,
                rgba(7,22,42,.78) 0%,
                rgba(7,22,42,.38) 25%,
                rgba(7,22,42,.08) 48%,
                transparent 68%
            ) !important;
    }


    .cin-scene-right
    .cin-scene-media::after{
        background:
            linear-gradient(
                90deg,
                rgba(7,22,42,.78) 0%,
                rgba(7,22,42,.38) 25%,
                rgba(7,22,42,.08) 48%,
                transparent 68%
            ) !important;
    }

}

/* === FIX_TUTTE_SCENE_TESTI_END === */



/* === FIX_EVOLUCAO_TITULOS_START === */

@media (min-width:901px){

    /*
       Più spazio reale al testo.
       Evita titoli enormi e tagliati.
    */

    .cin-evo-row{
        grid-template-columns:
            minmax(0,1.28fr)
            minmax(360px,.72fr) !important;

        min-height:72vh !important;

        margin-bottom:
            clamp(65px,9vh,115px) !important;
    }

    .cin-evo-right{
        grid-template-columns:
            minmax(360px,.72fr)
            minmax(0,1.28fr) !important;
    }


    .cin-evo-copy{
        min-width:0 !important;
        width:100% !important;
        max-width:520px !important;
    }


    .cin-evo-right .cin-evo-copy{
        justify-self:end !important;
    }


    .cin-evo-copy h3{
        width:100% !important;
        max-width:520px !important;

        margin:0 !important;

        font-size:
            clamp(40px,4vw,70px) !important;

        line-height:.91 !important;

        letter-spacing:-.045em !important;

        word-break:normal !important;
        overflow-wrap:normal !important;

        background:none !important;
        box-shadow:none !important;
    }


    /*
       Niente rettangoli strani dietro al testo
    */

    .cin-evo-copy h3,
    .cin-evo-copy h3 *,
    .cin-evo-copy{
        background-color:transparent !important;
    }


    /*
       Numero più vicino al titolo
    */

    .cin-evo-copy > span{
        margin-bottom:16px !important;
    }


    /*
       Foto leggermente meno enorme:
       riequilibra foto / testo
    */

    .cin-evo-media{
        height:min(68vh,740px) !important;
    }

}


/* TABLET */

@media (max-width:900px){

    .cin-evo-copy h3{
        max-width:100% !important;

        font-size:
            clamp(40px,10vw,66px) !important;

        background:none !important;
    }

}


/* === FIX_EVOLUCAO_TITULOS_END === */



/* === FIX_HERO_CTA_START === */

/* HERO: inquadra meglio la nuova immagine */
.cin-hero-media img{
    object-position:center center !important;
}

/* CTA finale: la scritta ALICERCE non deve essere tagliata */
.cin-final::after{
    left:50% !important;
    right:auto !important;

    transform:translateX(-50%) !important;

    bottom:-1.2vw !important;

    font-size:15vw !important;
    line-height:.82 !important;

    color:rgba(255,255,255,.08) !important;
}

/* su schermi più piccoli la riduco ancora un po' */
@media (max-width:900px){
    .cin-final::after{
        font-size:18vw !important;
        bottom:-1vw !important;
    }
}

@media (max-width:560px){
    .cin-final::after{
        font-size:20vw !important;
        bottom:1vw !important;
    }
}

/* === FIX_HERO_CTA_END === */



/* === FIX_TRABALHOS_INTRO_ISOLAMENTO_START === */

/* ----------------------------------------------------------
   SEZIONE "NÃO MOSTRAMOS APENAS O FINAL"
   sfondo TRABALHOS più piccolo, più visibile, più bianco
   ---------------------------------------------------------- */

.cin-intro{
    min-height:72vh !important;
    padding-bottom:8vh !important;
}

.cin-intro-word{
    left:-1vw !important;
    bottom:-1vw !important;

    font-size:14vw !important;
    line-height:.78 !important;
    letter-spacing:-.06em !important;

    color:rgba(255,255,255,.10) !important;
}

/* mobile */
@media (max-width:900px){
    .cin-intro{
        min-height:auto !important;
        padding-bottom:90px !important;
    }

    .cin-intro-word{
        font-size:19vw !important;
        bottom:1vw !important;
        color:rgba(255,255,255,.12) !important;
    }
}


/* ----------------------------------------------------------
   SCENA 07 - ISOLAMENTO
   testo più ordinato, meno schiacciato a destra
   ---------------------------------------------------------- */

@media (min-width:901px){

    .cin-reel > .cin-scene:nth-of-type(7) .cin-scene-copy{
        right:clamp(44px,4vw,82px) !important;
        width:min(400px,25vw) !important;
    }

    .cin-reel > .cin-scene:nth-of-type(7) h2{
        font-size:clamp(42px,4.25vw,72px) !important;
        line-height:.88 !important;
        max-width:400px !important;
    }

    .cin-reel > .cin-scene:nth-of-type(7) .cin-scene-copy > span{
        margin-bottom:12px !important;
    }
}

/* ----------------------------------------------------------
   SCENA EVOLUZIONE "A OBRA AVANÇA"
   immagine un po' più leggibile nel layout beige
   ---------------------------------------------------------- */

@media (min-width:901px){

    .cin-evo-sequence .cin-evo-row:nth-of-type(3) .cin-evo-media{
        height:min(64vh,700px) !important;
    }

    .cin-evo-sequence .cin-evo-row:nth-of-type(3) .cin-evo-copy h3{
        font-size:clamp(42px,3.8vw,66px) !important;
    }
}

/* === FIX_TRABALHOS_INTRO_ISOLAMENTO_END === */



/* === FIX_INTRO_CENTRATA_START === */

@media (min-width:901px){

    .cin-intro{
        min-height:78vh !important;

        padding-top:10vh !important;
        padding-bottom:18vh !important;
    }


    /* ======================================================
       PARAGRAFO:
       NON PIÙ BUTTATO A DESTRA
       ====================================================== */

    .cin-intro p{
        max-width:520px !important;

        margin:
            34px 0 0 0 !important;

        padding-left:24px !important;

        border-left:
            3px solid #f05a17 !important;

        color:
            rgba(255,255,255,.72) !important;

        font-size:
            clamp(15px,1.1vw,18px) !important;

        line-height:1.65 !important;
    }


    /* ======================================================
       TRABALHOS GIGANTE CENTRATO
       ====================================================== */

    .cin-intro-word{
        left:50% !important;
        right:auto !important;

        bottom:2.5vh !important;

        width:88vw !important;

        transform:
            translateX(-50%) !important;

        text-align:center !important;

        font-size:12.5vw !important;
        line-height:.75 !important;

        letter-spacing:-.055em !important;

        color:
            rgba(255,255,255,.115) !important;

        white-space:nowrap !important;

        pointer-events:none !important;
    }


    /* linea sinistra */
    .cin-intro-word::before{
        content:"" !important;

        position:absolute !important;

        left:0 !important;
        top:50% !important;

        width:15% !important;
        height:1px !important;

        background:
            rgba(255,255,255,.32) !important;
    }


    /* linea destra */
    .cin-intro-word::after{
        content:"" !important;

        position:absolute !important;

        right:0 !important;
        top:50% !important;

        width:15% !important;
        height:1px !important;

        background:
            rgba(255,255,255,.32) !important;
    }


    /*
       puntini arancioni:
       uno per lato usando box-shadow
    */

    .cin-intro-word{
        text-shadow:none !important;
    }

}


/* puntini decorativi tramite pseudo del contenitore */

.cin-intro-copy::after{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    bottom:-11.5vh !important;

    width:7px !important;
    height:7px !important;

    border-radius:50% !important;

    background:#f05a17 !important;

    box-shadow:
        -38vw 0 0 #f05a17,
         38vw 0 0 #f05a17 !important;

    transform:translateX(-50%) !important;

    opacity:.9 !important;
}


/* tablet/mobile */

@media (max-width:900px){

    .cin-intro p{
        margin:
            28px 0 0 0 !important;

        padding-left:18px !important;

        border-left:
            3px solid #f05a17 !important;
    }

    .cin-intro-word{
        left:50% !important;

        width:94vw !important;

        transform:
            translateX(-50%) !important;

        text-align:center !important;

        font-size:18vw !important;

        color:
            rgba(255,255,255,.12) !important;
    }

    .cin-intro-word::before,
    .cin-intro-word::after{
        width:10% !important;
    }

    .cin-intro-copy::after{
        display:none !important;
    }

}

/* === FIX_INTRO_CENTRATA_END === */



/* === TRABALHOS_OUTLINE_LIGHT_START === */

/*
   TRABALHOS:
   lettere vuote + contorno sottile + luce lenta
*/

.cin-intro-word{
    color:transparent !important;

    -webkit-text-fill-color:transparent !important;

    -webkit-text-stroke:
        1.4px rgba(255,255,255,.28) !important;

    font-weight:800 !important;

    opacity:1 !important;

    /* resta FERMA e centrata */
    animation:
        cinOutlineGlow 4.8s ease-in-out infinite !important;

    filter:
        drop-shadow(
            0 0 5px rgba(255,255,255,.05)
        ) !important;
}


/* illuminazione dolce */

@keyframes cinOutlineGlow{

    0%,
    100%{
        -webkit-text-stroke-color:
            rgba(255,255,255,.22);

        text-shadow:
            0 0 0 rgba(255,255,255,0),
            0 0 0 rgba(240,90,23,0);

        filter:
            drop-shadow(
                0 0 4px rgba(255,255,255,.04)
            );
    }

    45%{
        -webkit-text-stroke-color:
            rgba(255,255,255,.52);

        text-shadow:
            0 0 10px rgba(255,255,255,.10),
            0 0 22px rgba(240,90,23,.07);

        filter:
            drop-shadow(
                0 0 10px rgba(255,255,255,.10)
            );
    }

    60%{
        -webkit-text-stroke-color:
            rgba(255,255,255,.34);

        text-shadow:
            0 0 7px rgba(255,255,255,.07);

        filter:
            drop-shadow(
                0 0 6px rgba(255,255,255,.07)
            );
    }
}


/*
   Le linee laterali restano,
   ma leggermente più luminose.
*/

.cin-intro-word::before,
.cin-intro-word::after{
    background:
        rgba(255,255,255,.38) !important;

    box-shadow:
        0 0 7px rgba(255,255,255,.08);
}


/*
   I puntini arancioni restano.
   Li facciamo respirare molto leggermente.
*/

.cin-intro-copy::after{
    animation:
        cinOrangeDots 2.8s ease-in-out infinite !important;
}

@keyframes cinOrangeDots{

    0%,
    100%{
        opacity:.68;
        filter:
            drop-shadow(
                0 0 0 rgba(240,90,23,0)
            );
    }

    50%{
        opacity:1;
        filter:
            drop-shadow(
                0 0 7px rgba(240,90,23,.55)
            );
    }
}


/* niente movimento per chi lo disattiva */

@media(prefers-reduced-motion:reduce){

    .cin-intro-word,
    .cin-intro-copy::after{
        animation:none !important;
    }

}

/* === TRABALHOS_OUTLINE_LIGHT_END === */



/* === FIX_OBRA_BACKGROUND_START === */

.cin-evolution{
    overflow:hidden !important;
}

.cin-evolution::before{
    top:2.5vh !important;
    right:2.5vw !important;
    left:auto !important;

    font-size:19vw !important;
    line-height:.78 !important;

    letter-spacing:-.075em !important;

    white-space:nowrap !important;

    color:rgba(16,36,66,.045) !important;

    transform:none !important;
}

/* === FIX_OBRA_BACKGROUND_END === */



/* === FIX_LABEL_NOSSO_TRABALHO_START === */

.cin-intro .cin-label{
    display:block !important;
    width:100% !important;

    text-align:center !important;

    margin:
        0 auto
        26px !important;
}

/* === FIX_LABEL_NOSSO_TRABALHO_END === */



/* === FIX_INTRO_LAYOUT_FINAL_START === */

@media (min-width:901px){

    .cin-intro{
        min-height:84vh !important;
        padding-top:10vh !important;
        padding-bottom:22vh !important;
    }

    /* blocco principale più ordinato */
    .cin-intro-copy{
        max-width:1150px !important;
        margin:0 auto !important;
    }

    /* label centrata */
    .cin-intro .cin-label{
        text-align:center !important;
        margin-bottom:28px !important;
    }

    /* titolo grande resta protagonista */
    .cin-intro h2{
        text-align:left !important;
        margin-bottom:0 !important;
    }

    /* paragrafo: sotto il titolo, NON sopra TRABALHOS */
    .cin-intro p{
        position:relative !important;

        max-width:520px !important;

        margin:
            34px 0 0 0 !important;

        padding-left:22px !important;

        border-left:
            3px solid #f05a17 !important;

        color:
            rgba(255,255,255,.76) !important;

        z-index:3 !important;
    }

    /* parola TRABALHOS più bassa */
    .cin-intro-word{
        left:50% !important;
        bottom:2.2vh !important;

        width:86vw !important;

        transform:
            translateX(-50%) !important;

        text-align:center !important;

        font-size:11.8vw !important;

        z-index:1 !important;
    }

    /* linee laterali allineate alla parola */
    .cin-intro-word::before,
    .cin-intro-word::after{
        top:55% !important;
        width:14% !important;
    }

    /* puntini arancioni allineati più in basso */
    .cin-intro-copy::after{
        bottom:-16vh !important;

        box-shadow:
            -38vw 0 0 #f05a17,
             38vw 0 0 #f05a17 !important;
    }

}

/* TABLET / MOBILE */

@media (max-width:900px){

    .cin-intro{
        padding-bottom:130px !important;
    }

    .cin-intro p{
        max-width:100% !important;
        margin-top:28px !important;
    }

    .cin-intro-word{
        bottom:18px !important;
        font-size:17vw !important;
    }

}

/* === FIX_INTRO_LAYOUT_FINAL_END === */



/* === FIX_INTRO_CENTRO_REALE_START === */

@media (min-width:901px){

    /*
       ELIMINA LA COLONNA INVISIBILE CHE SPOSTAVA
       TUTTO IL CONTENUTO VERSO DESTRA
    */
    .cin-intro{
        display:block !important;

        position:relative !important;

        padding-left:clamp(45px,6vw,110px) !important;
        padding-right:clamp(45px,6vw,110px) !important;
    }


    /*
       01 resta decorativo a sinistra,
       ma NON occupa più una colonna
    */
    .cin-intro-number{
        position:absolute !important;

        left:clamp(45px,7vw,130px) !important;
        top:12vh !important;
    }


    /*
       BLOCCO CENTRATO SULLA PAGINA VERA
    */
    .cin-intro-copy{
        width:min(1250px,88vw) !important;
        max-width:none !important;

        margin:0 auto !important;

        position:relative !important;
    }


    /*
       O NOSSO TRABALHO
    */
    .cin-intro .cin-label{
        width:100% !important;

        margin:
            0 auto
            30px !important;

        text-align:center !important;
    }


    /*
       TITOLO GRANDE
    */
    .cin-intro h2{
        width:100% !important;
        max-width:none !important;

        margin:0 auto !important;

        text-align:center !important;
    }


    /*
       PARAGRAFO:
       centrato come blocco,
       testo dentro resta leggibile a sinistra
    */
    .cin-intro p{
        width:min(520px,80vw) !important;

        margin:
            36px auto 0 !important;

        text-align:left !important;

        padding-left:22px !important;

        border-left:
            3px solid #f05a17 !important;
    }


    /*
       TRABALHOS outline rimane centrato
    */
    .cin-intro-word{
        left:50% !important;
        transform:translateX(-50%) !important;

        width:86vw !important;

        text-align:center !important;
    }

}

/* === FIX_INTRO_CENTRO_REALE_END === */



/* =========================================================
   TRABALHOS_MOBILE_FINAL_2026_09_12
   MOBILE FINALE - desktop invariato
   ========================================================= */

@media(max-width:900px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    body{
        padding-bottom:88px !important;
    }

    .cin-work-page{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header{
        top:10px !important;
        left:50% !important;
        right:auto !important;

        width:calc(100% - 24px) !important;
        max-width:none !important;

        height:58px !important;
        min-height:58px !important;

        padding:8px 10px !important;

        transform:translateX(-50%) !important;

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

        border-radius:18px !important;
    }

    .site-header .brand{
        flex:1 1 auto !important;
        min-width:0 !important;
        height:auto !important;
    }

    .site-header .brand-logo{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
    }

    .site-header .brand h1{
        margin-left:8px !important;

        font-size:13px !important;
        line-height:1 !important;

        white-space:nowrap !important;
    }

    .site-header .brand p,
    .site-header .header-btn{
        display:none !important;
    }

    .site-header .mobile-menu-btn{
        width:44px !important;
        height:40px !important;
        flex:0 0 44px !important;

        border-radius:14px !important;
    }

    .site-header nav{
        top:calc(100% + 8px) !important;
        left:0 !important;
        right:0 !important;
    }


    /* =====================================================
       NIENTE ELEMENTI BLOCCATI INVISIBILI SU MOBILE
       ===================================================== */

    .cin-reveal,
    .cin-reveal.is-in{
        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        transition:none !important;
    }

    .cin-intro-number,
    .cin-intro .cin-label,
    .cin-intro h2,
    .cin-intro p,
    .cin-intro-word{
        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
        filter:none !important;

        transition:none !important;
    }

    .cin-evo-copy > span,
    .cin-evo-copy h3{
        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        transition:none !important;
    }


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

    .cin-hero{
        min-height:100svh !important;

        padding:
            100px
            20px
            125px !important;

        display:flex !important;
        align-items:flex-end !important;
    }

    .cin-hero-media{
        animation:none !important;
        transform:none !important;
    }

    .cin-hero-media img{
        width:100% !important;
        height:100% !important;

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

        transform:none !important;
    }

    .cin-hero-copy{
        width:100% !important;
        max-width:100% !important;
    }

    .cin-kicker{
        margin-bottom:16px !important;

        font-size:9px !important;
        line-height:1.3 !important;
    }

    .cin-hero h1{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:clamp(42px,13vw,54px) !important;
        line-height:.88 !important;
        letter-spacing:-.045em !important;

        white-space:normal !important;
    }

    .cin-hero h1 .cin-hero-line{
        width:100% !important;

        overflow:visible !important;

        padding:0 !important;
        margin:0 !important;
    }

    .cin-hero h1 .cin-hero-line-inner{
        opacity:1 !important;

        transform:none !important;
        filter:none !important;

        transition:none !important;
    }

    .cin-hero-copy > p{
        width:100% !important;
        max-width:100% !important;

        margin:24px 0 0 !important;

        opacity:1 !important;

        transform:none !important;

        font-size:14px !important;
        line-height:1.5 !important;

        transition:none !important;
    }

    .cin-scroll-indicator{
        display:none !important;
    }


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

    .cin-intro{
        display:block !important;

        min-height:0 !important;

        padding:
            72px
            20px
            100px !important;
    }

    .cin-intro-number{
        display:none !important;
    }

    .cin-intro-copy{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
    }

    .cin-intro .cin-label{
        margin:0 0 18px !important;

        text-align:left !important;

        font-size:10px !important;
    }

    .cin-intro h2{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:clamp(36px,10.5vw,46px) !important;
        line-height:.92 !important;
        letter-spacing:-.045em !important;

        text-align:left !important;
    }

    .cin-intro p{
        width:100% !important;
        max-width:100% !important;

        margin:26px 0 0 !important;

        padding-left:15px !important;

        font-size:14px !important;
        line-height:1.55 !important;

        text-align:left !important;
    }

    .cin-intro-word{
        position:relative !important;

        left:auto !important;
        right:auto !important;
        bottom:auto !important;

        display:block !important;

        width:100% !important;

        margin:48px 0 0 !important;

        font-size:10vw !important;
        line-height:1 !important;

        text-align:center !important;

        white-space:nowrap !important;

        animation:none !important;
    }

    .cin-intro-word::before,
    .cin-intro-word::after,
    .cin-intro-copy::after{
        display:none !important;
    }


    /* =====================================================
       SCENE CINEMATICHE
       ===================================================== */

    .cin-reel{
        padding:20px 0 55px !important;
    }

    .cin-scene{
        min-height:0 !important;

        display:block !important;

        padding:
            28px
            16px
            44px !important;
    }

    .cin-scene-inner{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
    }

    .cin-scene-media,
    .cin-scene-right .cin-scene-media,
    .cin-scene:nth-child(even) .cin-scene-media{
        width:100% !important;
        max-width:100% !important;

        height:clamp(250px,72vw,330px) !important;

        margin:0 !important;

        border-radius:20px !important;

        clip-path:none !important;

        transition:none !important;
    }

    .cin-scene-media img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        transform:none !important;
    }

    .cin-scene-copy,
    .cin-scene-right .cin-scene-copy{
        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;

        width:calc(100% - 20px) !important;
        max-width:none !important;

        margin:
            -32px
            10px
            0 !important;

        padding:
            22px
            18px !important;

        opacity:1 !important;

        transform:none !important;

        border-radius:18px !important;
    }

    .cin-scene-copy > span{
        margin-bottom:12px !important;

        font-size:9px !important;
    }

    .cin-scene h2{
        width:100% !important;
        max-width:100% !important;

        font-size:clamp(34px,9.8vw,43px) !important;
        line-height:.91 !important;
        letter-spacing:-.04em !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }

    .cin-scene p{
        max-width:100% !important;

        margin-top:16px !important;

        font-size:14px !important;
        line-height:1.5 !important;
    }


    /* =====================================================
       EVOLUÇÃO DA OBRA
       ===================================================== */

    .cin-evolution{
        padding:
            72px
            18px !important;
    }

    .cin-evolution::before{
        font-size:29vw !important;
        top:18px !important;
        right:-4vw !important;
    }

    .cin-evo-head{
        width:100% !important;

        margin-bottom:60px !important;
    }

    .cin-evo-head > span{
        margin-bottom:16px !important;

        font-size:10px !important;
    }

    .cin-evo-head h2{
        width:100% !important;

        font-size:clamp(36px,10vw,46px) !important;
        line-height:.92 !important;
        letter-spacing:-.045em !important;
    }

    .cin-evo-head p{
        width:100% !important;
        max-width:100% !important;

        margin:24px 0 0 !important;

        font-size:14px !important;
        line-height:1.55 !important;
    }

    .cin-evo-sequence::before,
    .cin-evo-row::after{
        display:none !important;
    }

    .cin-evo-row,
    .cin-evo-right{
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        gap:18px !important;

        margin-bottom:58px !important;
    }

    .cin-evo-right .cin-evo-media,
    .cin-evo-right .cin-evo-copy{
        order:initial !important;
        text-align:left !important;
    }

    .cin-evo-media{
        width:100% !important;
        height:clamp(250px,72vw,330px) !important;

        border-radius:20px !important;

        clip-path:none !important;

        transition:none !important;
    }

    .cin-evo-media img,
    .cin-evo-row.is-in .cin-evo-media img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        transform:none !important;

        transition:none !important;
    }

    .cin-evo-copy{
        width:100% !important;
        max-width:100% !important;
    }

    .cin-evo-copy > span{
        margin-bottom:10px !important;

        font-size:10px !important;
    }

    .cin-evo-copy h3{
        width:100% !important;
        max-width:100% !important;

        font-size:clamp(31px,9vw,40px) !important;
        line-height:.94 !important;
        letter-spacing:-.04em !important;
    }


    /* =====================================================
       PISCINAS
       ===================================================== */

    .cin-project{
        padding:
            72px
            18px !important;
    }

    .cin-project-title{
        margin-bottom:45px !important;
    }

    .cin-project-title > span{
        margin-bottom:14px !important;

        font-size:10px !important;
    }

    .cin-project-title h2{
        width:100% !important;

        font-size:clamp(42px,12vw,54px) !important;
        line-height:.92 !important;
    }

    .cin-before-after{
        gap:52px !important;
    }

    .cin-ba-block,
    .cin-ba-block:nth-child(even){
        display:grid !important;
        grid-template-columns:1fr !important;

        gap:12px !important;

        padding-left:0 !important;
    }

    .cin-ba-block figure:first-child,
    .cin-ba-block figure:last-child{
        width:100% !important;

        height:clamp(240px,68vw,310px) !important;

        border-radius:18px !important;
    }

    .cin-ba-block figcaption{
        left:12px !important;
        bottom:12px !important;

        font-size:9px !important;
    }


    /* =====================================================
       TERRAÇOS
       DA ASSOLUTO A NORMALE SU TELEFONO
       ===================================================== */

    .cin-terraces{
        padding:
            72px
            18px !important;
    }

    .cin-section-head{
        margin-bottom:42px !important;
    }

    .cin-section-head > span{
        margin-bottom:14px !important;

        font-size:10px !important;
    }

    .cin-section-head h2{
        width:100% !important;
        max-width:100% !important;

        font-size:clamp(31px,8.8vw,40px) !important;
        line-height:.94 !important;
        letter-spacing:-.04em !important;
    }

    .cin-section-head p{
        max-width:100% !important;

        margin:22px 0 0 !important;

        font-size:14px !important;
    }

    .cin-terrace-stage{
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        gap:14px !important;
    }

    .cin-terrace-stage figure,
    .cin-terrace-one,
    .cin-terrace-two,
    .cin-terrace-three{
        position:relative !important;

        inset:auto !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:100% !important;
        height:clamp(240px,68vw,310px) !important;

        margin:0 !important;

        border-radius:18px !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }

    .cin-terrace-stage img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        transform:none !important;
    }

    .cin-terrace-stage figcaption{
        left:12px !important;
        bottom:12px !important;

        font-size:9px !important;
    }


    /* =====================================================
       CTA FINALE
       ===================================================== */

    .cin-final{
        min-height:0 !important;

        padding:
            76px
            18px
            125px !important;
    }

    .cin-final-copy{
        width:100% !important;
        max-width:100% !important;
    }

    .cin-final-copy > span{
        margin-bottom:16px !important;

        font-size:10px !important;
    }

    .cin-final h2{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:clamp(38px,10.8vw,48px) !important;
        line-height:.92 !important;
        letter-spacing:-.045em !important;
    }

    .cin-final p{
        margin-top:20px !important;

        font-size:14px !important;
    }

    .cin-final-link{
        margin-top:36px !important;

        padding:18px 0 !important;

        font-size:11px !important;
        letter-spacing:.12em !important;
    }

    .cin-final-link strong{
        font-size:25px !important;
    }

    .cin-final::after{
        left:50% !important;
        right:auto !important;

        bottom:25px !important;

        font-size:18vw !important;

        transform:translateX(-50%) !important;
    }


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

    .footer-landmark-inner{
        width:calc(100% - 32px) !important;
        max-width:100% !important;

        display:block !important;

        padding:
            48px
            0
            34px !important;
    }

    .footer-landmark-brand{
        min-height:0 !important;

        padding:
            0
            0
            38px !important;
    }

    .footer-landmark-brand-top{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        text-align:left !important;
    }

    .footer-landmark-logo{
        width:58px !important;
        height:58px !important;

        margin:
            0
            0
            18px !important;
    }

    .footer-landmark-brand h2{
        position:static !important;

        transform:none !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:32px !important;
        line-height:1 !important;

        white-space:normal !important;

        text-align:left !important;
    }

    .footer-landmark-bottom{
        display:block !important;

        margin-top:34px !important;
        padding-top:0 !important;
    }

    .footer-landmark-column,
    .footer-landmark-column + .footer-landmark-column{
        padding-left:0 !important;
        padding-right:0 !important;

        border-left:0 !important;
    }


    /* =====================================================
       BARRA CHAMAR / WHATSAPP
       ===================================================== */

    .mobile-contact-bar{
        left:10px !important;
        right:10px !important;
        bottom:8px !important;

        gap:8px !important;

        padding:7px !important;

        border-radius:20px !important;
    }

    .mobile-contact-bar a{
        min-height:42px !important;

        border-radius:15px !important;

        font-size:13px !important;
    }

}


@media(max-width:520px){

    .site-header .brand h1{
        font-size:12px !important;
    }

    .cin-hero h1{
        font-size:clamp(40px,12.5vw,50px) !important;
    }

    .cin-scene h2{
        font-size:clamp(32px,9.2vw,40px) !important;
    }

    .cin-intro h2,
    .cin-evo-head h2{
        font-size:clamp(34px,9.7vw,43px) !important;
    }

    .cin-evo-copy h3{
        font-size:clamp(30px,8.6vw,38px) !important;
    }

    .cin-scene-media,
    .cin-scene-right .cin-scene-media,
    .cin-scene:nth-child(even) .cin-scene-media,
    .cin-evo-media{
        height:270px !important;
    }

    .cin-ba-block figure:first-child,
    .cin-ba-block figure:last-child,
    .cin-terrace-stage figure{
        height:265px !important;
    }

}

/* =========================================================
   FIM TRABALHOS_MOBILE_FINAL_2026_09_12
   ========================================================= */