/* CSS COMPLETO RESPONSIVO
   Substitua o CSS anterior por este arquivo.
   No HTML: <meta name="viewport" content="width=device-width, initial-scale=1">
   Textos sobre as artes em todas as larguras.
   Areas reservadas para as fotos e o livro; altura livre para o texto.
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;500;700;900&display=swap');

:root {
    --espaco: clamp(16px, 2.5vw, 36px);
    --borda: clamp(12px, 1.5vw, 20px);
    --texto: #ffd8b7;
    --rose: #c69078;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.55;
    background-color: #111329;
    background-image: radial-gradient(ellipse 75% 65% at 50% 48%,
        #3b3b4d 0%, #303047 28%, #23233b 58%, #181a31 80%, #111329 100%);
}
img, video, svg { max-width: 100%; height: auto; }
img { display: block; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
p, h1, h2, h3, a, button { overflow-wrap: break-word; }
h1, h2, h3 { line-height: 1.2; }
.interface, .interface2, .interface5 {
    width: 100%; max-width: 1280px; margin-inline: auto; min-width: 0;
}
.flex { display: flex; gap: var(--espaco); }
.flex > * { min-width: 0; }
h2.titulo { color: #666068; font-size: clamp(26px, 2.7vw, 38px); text-align: center; }
h2.titulo span { color: #1e1b2e; }

/* CABECALHO: menu permanece acessivel em todas as larguras. */
header { padding: clamp(20px, 3vw, 40px) 4%; }
header > .interface { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
header a { color: #c69078; text-decoration: none; display: inline-block; }
header nav { min-width: 0; max-width: 100%; }
header nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
header nav ul li { padding: 0; }
header nav a { padding: 8px 0; }
.btn-contato, .btn-contato01 { position: static; width: 100%; margin: 0; transform: none; }
.btn-contato a, .btn-contato01 a { display: inline-block; max-width: 100%; text-decoration: none; }
.btn-contato button, .btn-contato01 button {
    display: inline-block; max-width: 100%; min-height: 48px;
    padding: 14px clamp(20px, 2.5vw, 40px);
    font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; line-height: 1.3;
    white-space: normal; background-color: #ad6553; color: #f7c69c;
    border: 0; border-radius: 30px; cursor: pointer;
    transition: background-color .2s, box-shadow .2s;
}
header .btn-contato { width: auto; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffd8b7; outline-offset: 4px; }

/* ARTES: proporcao preservada, altura livre para o conteudo crescer. */
section.topo { --arte-pc: url('/img/novo/PC-Imagem_Top01.webp'); --arte-cel: url('/img/novo/CEL-Imagem_Top01-CEL.webp'); --razao-cel: 750 / 1073; }
section.segunda-imagem { --arte-pc: url('/img/novo/PC-Imagem_02.webp'); --arte-cel: url('/img/novo/CEL-Imagem_02-CEL.webp'); --razao-cel: 750 / 1286; }
section.imagem003 { --arte-pc: url('/img/novo/PC-Imagem_Livro.webp'); --arte-cel: url('/img/novo/CEL-Imagem_Livro-CEL.webp'); --razao-cel: 750 / 1286; }
section.imagem004 { --arte-pc: url('/img/novo/PC-Imagem_Sofa01.webp'); --arte-cel: url('/img/novo/CEL-Imagem_Sofa01-CEL.webp'); --razao-cel: 750 / 1355; }
section.imagem005 { --arte-pc: url('/img/novo/PC-Imagem_Logo01.webp'); --arte-cel: url('/img/novo/CEL-Imagem_Logo01-CEL.webp'); --razao-cel: 750 / 1073; }
section.topo, section.segunda-imagem, section.imagem003, section.imagem004, section.imagem005 {
    position: relative; isolation: isolate;
    width: 98%; margin: var(--espaco) auto 0;
    height: auto; min-height: calc(98vw * 900 / 1920);
    padding: clamp(32px, 4vw, 80px) 5%;
    background-color: #111329;
    background-image: var(--arte-pc);
    background-size: contain; background-position: center; background-repeat: no-repeat;
    border-radius: var(--borda); box-shadow: 0 0 25px rgb(0 0 0 / 50%);
}
section.topo { margin-top: 0; display: flex; align-items: center; }
section.topo .flex { align-items: center; padding: 0; height: auto; }
.topo .txt-topo { width: 46%; max-width: 590px; transform: none; }
.topo h1 { color: #b88071; font-size: clamp(24px, 2.3vw, 38px); margin-bottom: 16px; }
.txt-topo span { color: #ad6553; }
.topo .txt-topo p { color: #c69078; font-size: clamp(16px, 1.35vw, 20px); margin-bottom: 24px; }
.img-topo img, .img-topo2 img { position: static; width: auto; max-width: 100%; height: auto; max-height: 450px; object-fit: contain; border-radius: var(--borda); }

/* JORNADA E CARTOES */
section.jornada { width: 98%; margin: var(--espaco) auto 0; padding: 0; }
.jornada .interface { max-width: none; padding: clamp(24px, 3vw, 50px); background-color: #f5c6ad; border-radius: var(--borda); }
section.jornada .flex, section.especialidades .flex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco); align-items: stretch; margin-top: 24px; }
.jornada .conteudo-box p { color: #1e1b2e; text-align: center; margin: 8px 0; font-size: 16px; }
section.especialidades { padding: clamp(28px, 4vw, 60px) 4%; }
.especialidades .interface2 { position: static; margin-inline: auto; }
.interface2 .titulo { color: #e8b392; }
.interface2 .titulo span { color: #fff4da; }
.especialidades .especialidades-box { color: #1e1b2e; padding: clamp(20px, 2.5vw, 32px); border-radius: var(--borda); background-color: #ffcfb2; transition: box-shadow .2s; }
.especialidades .especialidades-box:nth-child(2) { background-color: #c69078; }
.especialidades .especialidades-box i { font-size: 40px; }
.especialidades .especialidades-box h3 { font-size: clamp(22px, 2vw, 26px); margin: 8px 0; }

/* LISTA, LIVRO E CRIADORAS: conteudo no fluxo, sem deslocamentos fixos. */
.segunda-imagem .txt-info { position: static; width: 100%; height: auto; }
.segunda-imagem .txt-info h3 { color: var(--texto); font-size: clamp(26px, 2.4vw, 34px); text-align: center; margin-bottom: 28px; }
.segunda-imagem .txt-info i { color: var(--texto); font-size: 1.15em; }
.segunda-imagem .txt-info p { font-family: 'Lato', sans-serif; color: #fff; font-size: clamp(16px, 1.5vw, 23px); margin: 0 0 18px; }
section.imagem003 .flex, section.imagem004 .flex { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; padding: 0; gap: 20px; }
.imagem003 h3 { color: var(--texto); font-size: clamp(26px, 2.5vw, 34px); width: 46%; }
.imagem003 p { color: var(--texto); width: 46%; margin: 0; text-align: left; }
.imagem004 .txt-comecer, .imagem004 .txt-somos, .imagem004 .txt-paragrafo02, .imagem004 .txt-paragrafo03 { width: 46%; max-width: 760px; }
.imagem004 .txt-comecer h3, .imagem004 .txt-somos h3 { font-size: clamp(24px, 2.3vw, 34px); white-space: normal; }
.imagem004 .txt-comecer h3, .imagem004 .txt-paragrafo02 p { color: var(--texto); }
.imagem004 .txt-somos h3, .imagem004 .txt-paragrafo03 p { color: var(--rose); }

/* PRECO: reserva espaco acima para o logotipo da arte. */
section.imagem005 { padding-top: clamp(240px, 23vw, 460px); }
section.imagem005 .flex { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 0; height: auto; }
.imagem005 .txt-por, .imagem005 .txt-valor01, .imagem005 .txt-vista, .imagem005 .btn-contato01 { width: 100%; max-width: 100%; margin: 0; transform: none; text-align: center; }
.imagem005 .txt-por p { color: var(--rose); font-size: clamp(22px, 2vw, 30px); }
.txt-valor01 p { font-weight: 900; font-size: clamp(48px, 6vw, 100px); line-height: 1.1; color: #f4c89d; text-align: center; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .txt-valor01 p { background: linear-gradient(45deg, #b88071 30%, #e6b49f 60%, #f4c89d 75%, #e8b7a3 95%, #8e4f43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.txt-vista p { color: var(--texto); font-size: clamp(20px, 2.4vw, 35px); font-weight: 900; text-align: center; }
.btn-contato01 { margin-top: 12px; }


/* COMPOSICAO ORIGINAL RESPONSIVA
   PC: texto na esquerda, fotografia/livro na direita.
   Vertical estreito: texto no alto, fotografia/livro na parte inferior.
   As reservas abaixo sao estimativas baseadas no CSS original. Ajuste-as
   apos conferir as imagens reais. Nao se usa altura fixa nem texto absoluto.
*/
.interface3, .interface4, .interface6 { width: 100%; min-width: 0; margin-inline: auto; }
section.jornada .flex { display: flex; justify-content: center; }
.jornada .conteudo-box { width: 100%; max-width: 1000px; }
section.topo, section.segunda-imagem, section.imagem003, section.imagem004, section.imagem005 {
    container-type: inline-size;
    background-size: 100% auto;
    background-position: center center;
    overflow: clip;
}
section.topo::before, section.segunda-imagem::before, section.imagem003::before, section.imagem004::before, section.imagem005::before { content: none; }
section.topo { padding-inline: 8%; }
.topo .txt-topo { width: 48%; max-width: 590px; }
.topo h1 { font-size: clamp(23px, 2.3vw, 33px); line-height: 1.18; margin-bottom: 12px; }
.topo .txt-topo p { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35; color: #8e4f43; }
.topo .btn-contato button { font-weight: 500; }
section.imagem003 { padding-inline: 4%; }
/* Compativel tambem com o paragrafo fora de .flex no HTML enviado. */
.imagem003 .interface4 { display: flex; flex-direction: column; gap: 20px; }
section.imagem003 .flex { display: contents; }
.imagem003 .txt-livro, .imagem003 .txt-paragrafo, .imagem003 .interface4 > p { width: 44%; }
.imagem003 .txt-paragrafo:empty { display: none; }
.imagem003 h3, .imagem003 p { width: 100%; }
.imagem003 h3 { font-size: clamp(25px, 2.4vw, 34px); }
.imagem004 .txt-comecer, .imagem004 .txt-somos, .imagem004 .txt-paragrafo02, .imagem004 .txt-paragrafo03 { width: 48%; }
section.imagem004 { padding-inline: 4%; }
section.imagem004 .flex { gap: clamp(12px, 1.5vw, 20px); }
.segunda-imagem .txt-info h3 { font-size: clamp(25px, 2.2vw, 30px); }
.segunda-imagem .txt-info p { font-size: clamp(16px, 1.5vw, 23px); }
section.imagem005 { padding-top: clamp(220px, 22vw, 430px); padding-bottom: clamp(28px, 3vw, 60px); }
.imagem005 .txt-valor01 p { width: 100%; font-size: clamp(48px, 6vw, 100px); }
.imagem005 .btn-contato01 { width: 100%; transform: none; }

/* TABLETS: mesmas zonas laterais, tipografia intermediaria. */
@media (min-width: 701px) and (max-width: 1100px) {
    section.topo, section.segunda-imagem, section.imagem003, section.imagem004, section.imagem005 {
        width: 96%; padding-inline: 4%; padding-block: 30px;
        min-height: calc(96vw * 900 / 1920);
        background-position: right bottom;
    }
    .topo .txt-topo { width: 46%; }
    .topo h1 { font-size: clamp(22px, 2.6vw, 28px); }
    .topo .txt-topo p { font-size: 16px; }
    .imagem003 .txt-livro, .imagem003 .txt-paragrafo, .imagem003 .interface4 > p { width: 44%; }
    .imagem004 .txt-comecer, .imagem004 .txt-somos, .imagem004 .txt-paragrafo02, .imagem004 .txt-paragrafo03 { width: 46%; }
    .imagem003 p, .imagem004 p { font-size: 15px; line-height: 1.45; }
    .imagem003 h3, .imagem004 .txt-comecer h3, .imagem004 .txt-somos h3 { font-size: 25px; }
    .btn-contato button { font-size: 14px; padding-inline: 18px; }
    section.imagem005 { padding-top: calc(96vw * .24); }
    section.especialidades .flex { gap: 18px; }
    .especialidades .especialidades-box { padding: 20px; }
    .especialidades .especialidades-box h3 { font-size: 22px; }
}

/* CELULAR VERTICAL E TABLET VERTICAL:
   A foto fica ancorada no rodape da secao. Se o texto crescer, a secao
   cresce para cima e mantem a reserva da foto, sem distorcer as pessoas.
   O fundo azul preenche a extensao necessaria para textos mais longos.
*/
@media (max-width: 700px), (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
    section.topo, section.segunda-imagem, section.imagem003, section.imagem004, section.imagem005 {
        width: 95%; height: auto; min-height: 0;
        padding: clamp(24px, 5vw, 45px) 6%;
        background-image: var(--arte-cel);
        background-size: 100% auto; background-position: center bottom;
        margin: var(--espaco) auto 0;
    }
    section.topo { margin-top: 0; min-height: calc(95vw * 1073 / 750); padding-bottom: calc(95vw * .80); }
    section.imagem003 { min-height: calc(95vw * 1286 / 750); padding-bottom: calc(95vw * .90); }
    section.imagem004 { min-height: calc(95vw * 1355 / 750); padding-bottom: calc(95vw * .98); }
    section.segunda-imagem { 
        height: auto;
        min-height: 0;
        padding: 28px 6%;
        background-size: 100% 100%;
        background-position: center;
        
    }
    section.imagem005 { 
        min-height: 0;
        padding-top: calc(95vw * .57);
        padding-bottom: 50px;
        background-position: center top;
        
    }
    section.imagem005 .flex {
        gap: 8px;
    }
    .topo .txt-topo, .imagem003 .txt-livro, .imagem003 .txt-paragrafo, .imagem003 .interface4 > p,
    .imagem004 .txt-comecer, .imagem004 .txt-somos, .imagem004 .txt-paragrafo02, .imagem004 .txt-paragrafo03 {
        width: 100%; max-width: 680px; margin-inline: auto;
    }
    section.topo .flex, section.imagem004 .flex { flex-direction: column; align-items: center; }
    .topo .txt-topo, .imagem003 h3, .imagem003 p, .imagem004 h3, .imagem004 p { text-align: center; }
    .topo h1 { font-size: clamp(21px, 4.8vw, 30px); }
    .topo .txt-topo p { font-size: clamp(14px, 3.5vw, 18px); color: #c69078; }
    .imagem003 h3, .imagem004 .txt-comecer h3, .imagem004 .txt-somos h3 { font-size: clamp(23px, 4.8vw, 30px); }
    .imagem003 p, .imagem004 p { font-size: clamp(14px, 3.5vw, 18px); line-height: 1.45; }
    .imagem004 .flex, .imagem003 .interface4 { gap: 16px; }
    .segunda-imagem .txt-info h3 { text-align: center; margin-bottom: 24px; }
    .segunda-imagem .txt-info p { font-size: clamp(15px, 3.6vw, 19px); line-height: 1.45; margin-bottom: 18px; }
    .btn-contato a, .btn-contato01 a { width: 100%; max-width: 400px; }
    .btn-contato button, .btn-contato01 button { width: 100%; font-size: 15px; }
    .imagem005 .txt-valor01 p { font-size: clamp(42px, 10vw, 76px); }
    .imagem005 .txt-vista p { font-size: clamp(20px, 4.4vw, 29px); }
}
@media (max-width: 700px) {
    header > .interface { flex-direction: column; }
    header .btn-contato { width: 100%; text-align: center; }
    section.especialidades .flex { grid-template-columns: 1fr; }
    section.jornada { width: 95%; }
    .jornada .interface { padding: 26px 22px; }
    .jornada h2 br { display: none; }
}
/* CELULAR HORIZONTAL: arte PC, texto a esquerda e foto a direita.
   Nao se limita a altura da secao a altura do aparelho. */
@media (max-width: 950px) and (max-height: 600px) and (orientation: landscape) {
    section.topo, section.imagem003, section.imagem004 {
        background-image: var(--arte-pc); background-position: right bottom;
        background-size: 100% auto;
        min-height: calc(95vw * .68); padding: 32px 4%;
    }
    .topo .txt-topo, .imagem003 .txt-livro, .imagem003 .txt-paragrafo, .imagem003 .interface4 > p,
    .imagem004 .txt-comecer, .imagem004 .txt-somos, .imagem004 .txt-paragrafo02, .imagem004 .txt-paragrafo03 {
        width: 49%; max-width: none; margin-inline: 0; text-align: left;
    }
    section.topo .flex, section.imagem004 .flex { align-items: flex-start; }
    .topo h1, .imagem003 h3, .imagem003 p, .imagem004 h3, .imagem004 p { text-align: left; }
    .topo .txt-topo p { color: #c69078; }
    .imagem003 p, .imagem004 p { font-size: 15px; }
    section.segunda-imagem { background-image: var(--arte-pc); min-height: 0; }
    section.imagem005 { background-image: var(--arte-cel); background-size: 100% auto; padding-top: calc(95vw * .65); }
}
@media (hover: hover) and (pointer: fine) {
    header a:hover { color: #fff; }
    .btn-contato button:hover, .btn-contato01 button:hover { background-color: #8e4f43; box-shadow: 0 0 8px #8e4f43; }
    .especialidades .especialidades-box:hover { box-shadow: 0 0 12px #ffffff65; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Livro: texto na área esquerda em telas largas */
@media (min-width: 1101px) {
    section.imagem003 p {
        width: 44%;
        max-width: 560px;
        margin: 0;
        text-align: left;
    }
}





/* Criadoras: afastar o texto da borda esquerda */
@media (min-width: 1101px) {
    section.imagem004 .txt-comecer,
    section.imagem004 .txt-paragrafo02,
    section.imagem004 .txt-somos,
    section.imagem004 .txt-paragrafo03 {
        width: 46%;
        margin-left: 5%;
        margin-right: 0;
    }
}






@media (max-width: 700px) and (orientation: portrait) {

    /* Preservar a largura inteira das três imagens */
    section.topo,
    section.imagem003,
    section.imagem004 {
        width: 95%;
        height: auto;
        min-height: 0;
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
    }


    /* PRIMEIRA IMAGEM: conteúdo no alto */
section.topo {
    aspect-ratio: 750 / 1073;
    padding: 18px 9% 0;

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

section.topo > .interface {
    width: 100%;
    margin: 0;
    padding: 0;
}

section.topo .flex {
    width: 100%;
    height: auto;
    padding: 0;

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

section.topo .txt-topo {
    width: 88%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    transform: none;
    text-align: center;
}

section.topo h1 {
    position: static;
    transform: none;
    font-size: clamp(16px, 4.2vw, 18px);
    line-height: 1.12;
    margin: 0 0 8px;
}

section.topo .txt-topo p {
    position: static;
    transform: none;
    font-size: 12px;
    line-height: 1.25;
    margin: 0 0 12px;
}

section.topo .btn-contato {
    width: 100%;
    margin: 0;
    position: static;
    transform: none;
}

section.topo .btn-contato a {
    display: block;
    width: 100%;
}

section.topo .btn-contato button {
    display: block;
    position: static;
    transform: none;

    width: 100%;
    min-height: 44px;
    padding: 8px;
    margin: 0 auto;

    font-size: 11px;
    line-height: 1.2;
}




    /* SEGUNDA IMAGEM: criadoras, sem cortar as laterais */
    section.imagem004 {
        aspect-ratio: 750 / 1355;
        padding: 28px 8% 0;
    }

    section.imagem004 .flex {
        gap: 10px;
    }

    section.imagem004 .txt-comecer,
    section.imagem004 .txt-paragrafo02,
    section.imagem004 .txt-somos,
    section.imagem004 .txt-paragrafo03 {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    section.imagem004 .txt-comecer h3,
    section.imagem004 .txt-somos h3 {
        font-size: clamp(19px, 5vw, 23px);
        line-height: 1.15;
        margin: 0;
    }

    section.imagem004 .txt-paragrafo02 p,
    section.imagem004 .txt-paragrafo03 p {
        font-size: clamp(12px, 3.3vw, 14px);
        line-height: 1.35;
        margin: 0;
    }


    /* TERCEIRA IMAGEM: livro, com a moldura visível */
    section.imagem003 {
        aspect-ratio: 750 / 1286;
        padding: 28px 8% 0;
    }

    section.imagem003 .interface4 {
        gap: 12px;
    }

    section.imagem003 .txt-livro,
    section.imagem003 .txt-paragrafo,
    section.imagem003 .interface4 > p {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    section.imagem003 h3 {
        width: 100%;
        font-size: clamp(19px, 5vw, 23px);
        line-height: 1.15;
        margin: 0;
    }

    section.imagem003 p {
        width: 100%;
        max-width: none;
        font-size: clamp(12px, 3.3vw, 14px);
        line-height: 1.35;
        margin: 0;
    }
}


/* Tablet e iPad em posição vertical */
@media (min-width: 701px) and (max-width: 1100px)
       and (orientation: portrait) {

    section.imagem003 {
        width: 95%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1200 / 1400;

        padding: 32px 6%;
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
    }
    section.imagem004 {
        width: 95%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1200 / 1500;

        padding: 32px 6%;
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
    }

    section.imagem003 {
        background-image: url('/img/novo/PAD-Imagem_Livro-PAD.webp');
    }

    section.imagem004 {
        background-image: url('/img/novo/PAD-Imagem_Sofa01-PAD.webp');
    }

    section.imagem003 .interface4,
    section.imagem004 .flex {
        gap: 12px;
    }
}


/* CELULAR NA HORIZONTAL */
@media (max-width: 950px) and (max-height: 600px)
       and (orientation: landscape) {

    /* Topo, livro e criadoras */
    section.topo,
    section.imagem003,
    section.imagem004 {
        width: 95%;
        height: auto;
        aspect-ratio: auto;
        min-height: calc(95vw * 900 / 1920);
        padding: 24px 4%;

        background-image: var(--arte-pc);
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    }

    section.topo {
        align-items: flex-start;
    }

    section.topo .flex,
    section.imagem004 .flex {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    /* Reservar a esquerda para os textos */
    section.topo .txt-topo,
    section.imagem003 .txt-livro,
    section.imagem003 .txt-paragrafo,
    section.imagem003 .interface4 > p,
    section.imagem004 .txt-comecer,
    section.imagem004 .txt-paragrafo02,
    section.imagem004 .txt-somos,
    section.imagem004 .txt-paragrafo03 {
        width: 43%;
        max-width: none;
        margin: 0;
        transform: none;
        text-align: left;
    }

    section.imagem003 .interface4 {
        gap: 12px;
    }

    section.imagem003 h3,
    section.imagem003 .txt-paragrafo p {
        width: 100%;
    }

    section.topo h1,
    section.imagem003 h3,
    section.imagem004 h3 {
        font-size: 22px;
        line-height: 1.15;
        text-align: left;
    }

    section.topo .txt-topo p,
    section.imagem003 p,
    section.imagem004 p {
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
    }

    section.topo .btn-contato button {
        font-size: 13px;
        padding: 12px 16px;
    }

    /* Lista: fundo acompanhando o conteúdo */
    section.segunda-imagem {
        height: auto;
        min-height: 0;
        padding: 28px 6%;
        background-image: var(--arte-pc);
        background-size: 100% 100%;
        background-position: center;
    }

    section.segunda-imagem .txt-info h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    section.segunda-imagem .txt-info p {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 14px;
    }

    /* Preço: usar a arte horizontal */
    section.imagem005 {
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        padding: calc(95vw * .24) 6% 32px;

        background-image: var(--arte-pc);
        background-size: cover;
        background-position: center top;
    }

    section.imagem005 .flex {
        gap: 8px;
    }

    section.imagem005 .txt-valor01 p {
        font-size: 52px;
    }

    section.imagem005 .txt-vista p {
        font-size: 22px;
    }
}

/* TOPO: texto e botão dentro da área marcada */
section.topo .txt-topo {
    width: 43%;
    max-width: none;
    margin: 0 0 0 3%;
    text-align: left;
}

/* LIVRO: limitar todo o bloco à área esquerda */
section.imagem003 .interface4 {
    width: 52%;
    max-width: none;
    margin: 0;
    gap: 12px;
}

section.imagem003 .interface4 .txt-livro,
section.imagem003 .interface4 .txt-paragrafo,
section.imagem003 .interface4 h3,
section.imagem003 .interface4 p {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
}

/* Caso o parágrafo esteja fora da interface4 */
section.imagem003 > p {
    width: 52%;
    max-width: none;
    margin: 12px 0 0;
    text-align: left;
}


/* CELULAR VERTICAL: restaurar textos no alto */
@media (max-width: 700px) and (orientation: portrait) {

    section.topo .txt-topo {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: center;
    }

    section.imagem003 .interface4 {
        width: 100%;
        max-width: none;
        margin: 0;
        gap: 12px;
    }

    section.imagem003 .txt-livro,
    section.imagem003 .txt-paragrafo,
    section.imagem003 .interface4 h3,
    section.imagem003 .interface4 p,
    section.imagem003 > p {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: center;
    }
}