body{

margin:0;
padding:0;

font-family:'Cormorant Garamond', serif;

background:#f6f1ed;

color:#b68d75;

overflow-x:hidden;

}

/* TOPO */
header{

background:#f6f1ed;

padding:0;

border-bottom:1px solid #eaded6;

}

.hero-soxikibem{

max-width:1200px;

margin:0 auto;

padding:18px 20px 4px;

text-align:center;

}

.hero-soxikibem img{

width:100%;

height:auto;

display:block;

margin:auto;

}

/* MENU */

/* MENU */

nav{

background:#fffdfb;

padding:0;

box-shadow:0 2px 10px rgba(0,0,0,0.05);

position:relative;

z-index:10;

margin-top:-8px;

}

.menu{

list-style:none;
margin:0;
padding:0;

display:flex;
justify-content:center;

position:relative;
z-index:10;

flex-wrap:wrap;

}

.menu li{

position:relative;

}

.menu li a{

display:block;

padding:20px 28px;

text-decoration:none;

color:#aa7f67;

font-size:20px;

font-family:'Cormorant Garamond', serif;

font-weight:600;

letter-spacing:1px;


transition:0.3s;

}

.menu li a:hover{

color:#9d7057;
background:#f3ebe5;
}

/* SUBMENU */

.submenu{

display:none;

position:absolute;

top:100%;
left:0;

background:white;

list-style:none;

padding:0;

margin:0;

min-width:220px;

box-shadow:0 5px 20px rgba(0,0,0,0.08);

border-radius:0 0 20px 20px;

overflow:hidden;

z-index:999;

}

.submenu li a{

font-size:18px;

font-weight:500;

color:#aa7f67;

padding:16px 20px;

border-bottom:1px solid #eaded5;

background:#fffdfb;

}

/* MOSTRAR SUBMENU */

.menu li:hover .submenu{

display:block;

}

.categoria-intro{
    max-width:1100px;
    margin:10px auto 30px;
    text-align:center;
    padding:0 20px;
}

.categoria-intro h1{
    margin-bottom:10px;
}

.categoria-intro p{
    margin:10px auto;
    line-height:1.8;
    font-size:1.1rem;
}

.galeria-tubes{
    max-width:1250px;
    margin:10px auto 80px;

    display:grid;
    grid-template-columns:repeat(5, 1fr);

    gap:25px 20px;

    justify-items:center;
}

.tube-item{
    width:220px;
    height:210px;

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

.tube-item img{

    max-width:220px;
    max-height:220px;

    object-fit:contain;

    border:1px solid #d6b9a6;

    transition:.3s;
}

.tube-item img:hover{

    transform:scale(1.03);

    box-shadow:0 0 10px rgba(0,0,0,.15);
}

/* =========================
   PAGINAÇÃO
========================= */

.paginacao{
    display:flex;
    justify-content:center;
    gap:14px;
    margin:40px 0 60px;
}

.paginacao a{
    width:48px;
    height:48px;

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

    border-radius:50%;

    text-decoration:none;

    background:#ffffff;

    color:#b68d75;

    border:1px solid #efe2d8;

    font-size:18px;
    font-weight:600;

    transition:.3s;
}

.paginacao a:hover{
    transform:translateY(-2px);
}

.paginacao a.ativo{
    background:#b68d75;
    color:#fff;
}

/* =========================
   MENSAGEM FINAL
========================= */

.mensagem-final{

max-width:882px;

margin:0 auto;

padding:0 20px;

text-align:center;

}

.mensagem-final img{

width:100%;

height:auto;

display:block;

margin:auto;

}

/* =========================
   RODAPÉ
========================= */

footer{

background:#f6f1ed;

border-top:1px solid #dccbc0;

margin-top:0px;

padding:45px 20px 30px;

text-align:center;

width:100%;

position:static;

box-sizing:border-box;

}

footer p{

margin:0;

font-family:'Cormorant Garamond', serif;

font-size:14px;

line-height:24px;

letter-spacing:1px;

color:#b68d73;

opacity:0.92;

}



/* =========================
   RESPONSIVO
========================= */

@media(max-width:900px){

.autoras-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.autoras-traduzidas{

margin:40px auto 60px;

}

.autoras-traduzidas h2{

font-size:30px;

line-height:40px;

}

.autoras-subtitulo{

font-size:16px;

line-height:28px;

margin-bottom:30px;

}

.autoras-grid{

grid-template-columns:1fr;

gap:18px;

}

.autora-card{

font-size:22px;

min-height:80px;

}

}

/* MOBILE */

@media screen and (max-width:768px){

.hero-soxikibem{

padding:10px 10px 5px;

}

.hero-soxikibem img{

width:100%;

height:auto;

}

.menu{
flex-wrap:wrap;
justify-content:center;
margin-top:-4px;
}

.menu li a{
padding:14px 16px;
font-size:17px;
}

.grid-tutoriais{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.tutorial-card img{

width:100%;

height:auto;

display:block;

}

.tutorial-card{

padding:10px 10px 16px;

text-align:center;

}

.tutorial-card h3{

font-size:22px;

}

.ultimos-tutoriais h2{

font-size:28px;

}

.btn-tutoriais{

font-size:16px;

padding:14px 30px;

}

.colecoes-grid{

display:flex;

flex-direction:column;

align-items:center;

gap:20px;

}

.explorar-colecoes h2{

font-size:28px;

}

.colecao-card{

width:85%;

max-width:280px;

padding:22px 18px;

min-height:auto;

}

.mensagem-final{

padding:0 12px;

margin-bottom:0px;

}

.grid-galeria{

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

}

.miniatura-item img{

width:100%;

height:110px;

object-fit:cover;

}

.bandeiras{

gap:2px;

}

.bandeiras img{

width:14px !important;

height:auto;

}

.paginacao{

gap:10px;

margin:10px 0 45px;

}

.paginacao a{

width:40px;

height:40px;

font-size:17px;

}

/* RODAPÉ MOBILE */

footer{

left:0;

transform:none;

width:100%;

padding:30px 15px;

}

footer p{

font-size:11px;

line-height:20px;

letter-spacing:0.5px;

padding:0 8px;

}

html, body{

margin:0;

padding:0;

overflow-x:hidden;

overflow-y:auto;

}

}

body{

margin:0;

}

footer{

margin-bottom:0 !important;

}

.mensagem-final{

margin-bottom:0 !important;

padding-bottom:0 !important;

}

.mensagem-final img{

display:block;

vertical-align:bottom;

}

html{

overflow-x:hidden;

}

html, body{

margin-bottom:0 !important;

padding-bottom:0 !important;

}

footer{

margin:0 !important;

padding:18px 15px !important;

line-height:1.4;

}

footer img{

display:block;

vertical-align:bottom;

}

body{

display:flex;

flex-direction:column;

min-height:100vh;

}

footer{

margin-top:auto;

}