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;

}

/* =========================
   ÚLTIMOS TUTORIAIS
========================= */

.ultimos-tutoriais{

max-width:1200px;

margin:70px auto 50px;

padding:0 20px;

text-align:center;

}

.ultimos-tutoriais h2{

font-size:34px;

font-weight:500;

letter-spacing:3px;

color:#b68d75;

margin-bottom:10px;

}

.ultimos-tutoriais .subtitulo{

font-size:16px;

letter-spacing:1px;

color:#c29b84;

margin-bottom:40px;

}

.grid-tutoriais{

display:grid;

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

gap:28px;

margin-top:35px;

}

.tutorial-card{

background:#fffdfb;

padding:14px 14px 24px;

border-radius:22px;

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

transition:0.35s;

border:1px solid #f0e4dc;

}

.tutorial-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(0,0,0,0.08);

}

.tutorial-card img{

width:100%;

height:auto;

border-radius:16px;

display:block;

margin-bottom:14px;

}

.tutorial-card h3{

font-size:28px;

font-weight:500;

color:#a87c63;

margin:8px 0 5px;

}

.tutorial-card p{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#c5a592;

margin:0;

}

.tutorial-card a{

text-decoration:none;

color:inherit;

display:block;

}

/* =========================
   BOTÃO TUTORIAIS
========================= */

.area-botao{

text-align:center;

margin:10px 0 25px;

}

.btn-tutoriais{

display:inline-block;

padding:16px 42px;

background:#b68d75;

color:white;

text-decoration:none;

font-size:18px;

font-weight:600;

letter-spacing:1.5px;

border-radius:40px;

transition:0.35s;

box-shadow:0 8px 20px rgba(182,141,117,0.18);

}

.btn-tutoriais:hover{

background:#9d7057;

transform:translateY(-3px);

box-shadow:0 14px 28px rgba(157,112,87,0.25);

}

/* =========================
   EXPLORAR COLEÇÕES
========================= */

.explorar-colecoes{

max-width:1200px;

margin:40px auto 40px;

padding:0 20px;

text-align:center;

}

.explorar-colecoes h2{

font-size:34px;

font-weight:500;

letter-spacing:3px;

color:#b68d75;

margin-bottom:10px;

}

.colecoes-subtitulo{

font-size:17px;

color:#c29b84;

margin-bottom:45px;

letter-spacing:1px;

}

.colecoes-grid{

display:flex;

justify-content:center;

gap:14px;

flex-wrap:nowrap;

}

.colecao-card{

background:#fffdfb;

padding:18px 14px;

border-radius:24px;

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

border:1px solid #f1e6df;

transition:0.35s;

min-height:150px;

width:160px;

}

.colecao-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(0,0,0,0.08);

}

.icone{

font-size:22px;

margin-bottom:18px;

color:#c29b84;

}

.colecao-card h3{

font-size:26px;

font-weight:500;

color:#aa7f67;

margin-bottom:12px;

letter-spacing:2px;

}

.colecao-card p{

font-size:11px;

line-height:18px;

color:#b68d75;

margin-bottom:20px;

}

.colecao-card a{

text-decoration:none;

font-size:14px;

letter-spacing:2px;

color:#9d7057;

font-weight:600;

transition:0.3s;

}

.colecao-card a:hover{

color:#c29b84;

}

/* =========================
   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;

}

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

.galeria-tutoriais{

max-width:1400px;

margin:10px auto 70px;

padding:0 20px;

text-align:center;

}

.galeria-tutoriais h2{

font-size:42px;

font-weight:500;

letter-spacing:3px;

color:#b68d75;

margin-top:0;

margin-bottom:14px;

}

.sub-galeria{

font-size:18px;

letter-spacing:1px;

color:#c29b84;

margin-bottom:50px;

}

/* GRID */

.grid-galeria{

display:grid;

grid-template-columns:repeat(5, 220px);

justify-content:center;

row-gap:8px;

column-gap:24px;

}

/* CARD */

.miniatura-item{

display:flex;

flex-direction:column;

align-items:center;

background:#fffdfb;

padding:14px 14px 12px;

border-radius:22px;

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

border:1px solid #f0e4dc;

transition:0.35s;

}

.miniatura-item:hover{

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(0,0,0,0.08);

}

/* IMAGEM */

.miniatura-item img{

width:220px;

height:132px;

object-fit:cover;

border-radius:14px;

display:block;

}

/* TÍTULO */

.miniatura-item h3{

font-size:24px;

font-weight:500;

color:#a87c63;

margin:10px 0 8px;

text-align:center;

}

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

.paginacao{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

margin:20px 0 70px;

}

.paginacao a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

border-radius:50%;

background:#fffdfb;

color:#b68d75;

font-size:20px;

font-weight:600;

box-shadow:0 8px 20px rgba(0,0,0,0.05);

border:1px solid #f0e4dc;

transition:0.35s;

}

.paginacao a:hover{

transform:translateY(-3px);

background:#f5ede7;

}

.paginacao .ativo{

background:#b68d75;

color:white;

box-shadow:0 10px 24px rgba(182,141,117,0.25);

}

/* =========================
   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;

}

/* 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;

}