:root{
--wine:#67364c;
--wine-deep:#4f2639;
--plum:#78566b;
--rose:#d9999a;
--rose-dark:#b66f76;
--rose-soft:#e9c3bd;
--blush:#f3ded7;
--cream:#fffaf5;
--paper:#fffdf9;
--gold:#ba8b4d;
--gold-light:#dfc291;
--ink:#654d55;
--muted:#9c7b80;
--border:#ead9cb;
--shadow:0 20px 60px rgba(77,39,57,.12);
}
*{
box-sizing:border-box;
margin:0;
padding:0
}
html{
scroll-behavior:smooth
}
body{
min-height:100vh;
overflow-x:hidden;
font-family:Montserrat,sans-serif;
color:var(--ink);
background:
linear-gradient(rgba(255,250,246,.77),rgba(248,239,235,.88)),
url("../fundo.png") center/cover fixed;
}
body:after{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(circle at 8% 18%,rgba(217,153,154,.16),transparent 29%),
radial-gradient(circle at 92% 42%,rgba(223,194,145,.12),transparent 28%),
radial-gradient(circle at 20% 90%,rgba(120,86,107,.07),transparent 30%);
}
button,input,textarea{
font:inherit
}
button{
cursor:pointer
}
.hero{
min-height:360px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
background:
linear-gradient(rgba(67,34,50,.34),rgba(67,34,50,.53)),
url("../img/capa.jpg") center/cover no-repeat;
}
.overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(59,29,44,.12),rgba(69,35,51,.46)),
radial-gradient(circle at center,transparent 20%,rgba(48,24,35,.2));
}
.hero-content{
position:relative;
z-index:2;
padding:35px 20px
}
.hero-content:before{
content:"F & O";
display:block;
margin-bottom:15px;
font:400 11px Italiana,serif;
letter-spacing:6px;
color:#e5c899;
}
.hero-content h1{
font:400 clamp(43px,7vw,72px) Parisienne,cursive;
line-height:1;
color:#fffaf6;
text-shadow:0 4px 22px rgba(39,16,28,.35)
}
.hero-content h1:after{
content:"";
display:block;
width:110px;
height:1px;
margin:25px auto 0;
background:linear-gradient(90deg,transparent,#e2c08d,transparent)
}
nav{
min-height:70px;
display:flex;
align-items:center;
justify-content:center;
gap:45px;
position:sticky;
top:0;
z-index:50;
padding:12px 25px;
background:rgba(255,250,246,.92);
backdrop-filter:blur(16px);
border-top:1px solid rgba(186,139,77,.18);
border-bottom:1px solid rgba(186,139,77,.25);
box-shadow:0 7px 25px rgba(77,39,57,.06)
}
nav a{
position:relative;
padding:9px 2px;
text-decoration:none;
font-size:8px;
font-weight:500;
letter-spacing:2.2px;
text-transform:uppercase;
color:#805a65;
transition:.3s
}
nav a:after{
content:"";
position:absolute;
left:50%;
bottom:2px;
width:0;
height:1px;
transform:translateX(-50%);
background:var(--gold);
transition:.3s
}
nav a:hover{
color:var(--wine)
}
nav a:hover:after{
width:100%
}
.section{
position:relative;
width:min(820px,calc(100% - 40px));
margin:75px auto;
padding:65px 70px;
background:rgba(255,253,249,.93);
border:1px solid rgba(186,139,77,.34);
box-shadow:var(--shadow);
overflow:hidden
}
.section:before{
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(186,139,77,.15);
pointer-events:none
}
.section:after{
content:"✦";
position:absolute;
top:25px;
left:50%;
transform:translateX(-50%);
font-size:9px;
color:var(--gold)
}
.section>h2{
position:relative;
z-index:2;
margin:12px 0 42px;
text-align:center;
font:400 37px "Cormorant Garamond",serif;
color:var(--wine)
}
.section>h2:before{
content:"";
display:block;
width:70px;
height:1px;
margin:0 auto 12px;
background:linear-gradient(90deg,transparent,var(--gold-light),transparent)
}
.section>h2:after{
content:"";
display:block;
width:125px;
height:1px;
margin:13px auto 0;
background:linear-gradient(90deg,transparent,var(--gold-light),transparent)
}
form{
position:relative;
z-index:2;
width:min(590px,100%);
margin:auto
}
form h3{
margin:32px 0 16px;
padding-bottom:10px;
border-bottom:1px solid #e7d3c7;
font:400 21px "Cormorant Garamond",serif;
color:var(--wine)
}
form h3:first-child{
margin-top:0
}
input,
textarea{
width:100%;
margin-bottom:13px;
padding:14px 15px;
border:1px solid #ddc9bf;
border-radius:0;
outline:0;
background:rgba(255,255,255,.83);
color:var(--ink);
font-size:12px;
transition:.3s
}
input::placeholder,
textarea::placeholder{
color:#aa8d91
}
input:focus,
textarea:focus{
border-color:#a9787f;
background:#fff;
box-shadow:0 0 0 3px rgba(169,120,127,.07)
}
textarea{
min-height:130px;
resize:vertical
}
#addAcompanhante{
width:100%;
min-height:46px;
margin:2px 0 16px;
border:1px solid rgba(103,54,76,.3);
background:rgba(255,250,246,.6);
color:var(--wine);
font-size:8px;
font-weight:500;
letter-spacing:1.8px;
text-transform:uppercase;
transition:.3s
}
#addAcompanhante:hover{
background:var(--wine);
border-color:var(--wine);
color:#fff
}
#acompanhantes>div{
margin:16px 0;
padding:22px;
background:linear-gradient(145deg,rgba(255,253,249,.95),rgba(247,232,226,.72));
border:1px solid rgba(186,139,77,.25)
}
#acompanhantes hr{
display:none
}
#acompanhantes h4{
margin-bottom:14px;
font:400 18px "Cormorant Garamond",serif;
color:var(--wine)
}
.remover{
border:0;
background:none;
padding:4px 0;
font-size:7px;
font-weight:500;
letter-spacing:1.5px;
text-transform:uppercase;
color:#a26e74;
border-bottom:1px solid #cb9697;
transition:.3s
}
.remover:hover{
color:var(--wine-deep);
border-color:var(--wine)
}
form>button[type="submit"]{
width:100%;
height:52px;
margin-top:8px;
border:0;
background:linear-gradient(145deg,var(--wine),var(--wine-deep));
color:#fff;
font-size:8px;
font-weight:500;
letter-spacing:2px;
text-transform:uppercase;
box-shadow:0 12px 25px rgba(77,39,57,.16);
transition:.3s
}
form>button[type="submit"]:hover{
transform:translateY(-2px);
box-shadow:0 17px 30px rgba(77,39,57,.22)
}
.localizacao{
position:relative;
width:min(940px,calc(100% - 40px));
margin:75px auto;
padding:65px 60px;
text-align:center;
background:
linear-gradient(145deg,rgba(255,253,249,.95),rgba(246,228,222,.8));
border:1px solid rgba(186,139,77,.34);
box-shadow:var(--shadow);
overflow:hidden
}
.localizacao:before{
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(186,139,77,.14);
pointer-events:none
}
.titulo-localizacao{
position:relative;
z-index:2;
margin-bottom:24px
}
.titulo-localizacao i{
display:block;
margin-bottom:9px;
font-size:15px;
color:var(--gold)
}
.titulo-localizacao h2{
font:400 37px "Cormorant Garamond",serif;
color:var(--wine)
}
.titulo-localizacao:after{
content:"";
display:block;
width:125px;
height:1px;
margin:13px auto 0;
background:linear-gradient(90deg,transparent,var(--gold-light),transparent)
}
.endereco{
position:relative;
z-index:2;
margin:0 auto 28px;
font:italic 16px/1.65 "Cormorant Garamond",serif;
color:#876d73
}
.mapa{
position:relative;
z-index:2;
overflow:hidden;
border:6px solid rgba(255,253,249,.96);
box-shadow:0 15px 35px rgba(77,39,57,.12)
}
.mapa iframe{
display:block;
width:100%;
height:390px
}
.rota{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-width:175px;
margin-top:27px;
padding:14px 25px;
text-decoration:none;
background:var(--wine);
color:#fff;
font-size:8px;
font-weight:500;
letter-spacing:1.7px;
text-transform:uppercase;
transition:.3s
}
.rota:hover{
background:var(--wine-deep);
transform:translateY(-2px)
}
.rota i{
color:#e4c48e
}
.album-text{
position:relative;
z-index:2;
max-width:600px;
margin:-18px auto 34px;
text-align:center;
font:italic 17px/1.55 "Cormorant Garamond",serif;
color:#887176
}
.gallery-wrapper{
position:relative;
z-index:2;
overflow:hidden
}
.gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px
}
.gallery img{
width:100%;
height:230px;
display:block;
object-fit:cover;
filter:saturate(.86) contrast(.96);
transition:.5s
}
.gallery img:hover{
transform:scale(1.035);
filter:saturate(1) contrast(1)
}
.gallery-fade{
position:absolute;
inset:auto 0 0;
height:60px;
pointer-events:none;
background:linear-gradient(transparent,rgba(255,253,249,.35))
}
.btnver{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:150px;
padding:13px 25px;
border:1px solid var(--wine);
text-decoration:none;
color:var(--wine);
background:transparent;
font-size:8px;
font-weight:500;
letter-spacing:1.8px;
text-transform:uppercase;
transition:.3s
}
.btnver:hover{
background:var(--wine);
color:#fff
}
footer{
min-height:88px;
display:flex;
align-items:center;
justify-content:center;
padding:25px;
background:linear-gradient(145deg,#67364c,#51283c);
border-top:1px solid rgba(223,194,145,.5);
text-align:center
}
footer p{
font:400 27px Parisienne,cursive;
color:#f4ded7
}
footer p:before,
footer p:after{
content:"✦";
margin:0 14px;
font:400 8px Montserrat,sans-serif;
color:#d8b176;
vertical-align:middle
}
@media(max-width:800px){
.hero{
min-height:290px
}
.hero-content h1{
font-size:48px
}
nav{
gap:25px
}
.section,
.localizacao{
width:calc(100% - 26px);
margin:45px auto;
padding:55px 35px
}
.gallery{
grid-template-columns:repeat(2,1fr)
}
.gallery img{
height:210px
}
.mapa iframe{
height:330px
}
}
@media(max-width:520px){
body{
background:
linear-gradient(rgba(255,250,246,.82),rgba(248,239,235,.91)),
url("../fundo.png") center/cover fixed
}
.hero{
min-height:235px
}
.hero-content{
padding:25px 15px
}
.hero-content:before{
font-size:8px;
letter-spacing:4px;
margin-bottom:10px
}
.hero-content h1{
font-size:39px
}
.hero-content h1:after{
width:80px;
margin-top:18px
}
nav{
min-height:58px;
gap:13px;
padding:9px 8px
}
nav a{
font-size:6px;
letter-spacing:1.1px
}
.section,
.localizacao{
width:calc(100% - 18px);
margin:28px auto;
padding:48px 22px 40px
}
.section:before,
.localizacao:before{
inset:9px
}
.section:after{
top:19px
}
.section>h2,
.titulo-localizacao h2{
font-size:29px
}
.section>h2{
margin-bottom:31px
}
form h3{
font-size:19px
}
input,
textarea{
padding:13px;
font-size:11px
}
#acompanhantes>div{
padding:17px
}
.album-text{
font-size:15px
}
.gallery{
grid-template-columns:1fr 1fr;
gap:6px
}
.gallery img{
height:165px
}
.mapa{
border-width:4px
}
.mapa iframe{
height:280px
}
.endereco{
font-size:15px
}
footer{
min-height:75px
}
footer p{
font-size:24px
}
}
@media(max-width:350px){
nav{
gap:8px
}
nav a{
font-size:5.5px
}
.section,
.localizacao{
padding-left:17px;
padding-right:17px
}
.gallery img{
height:145px
}
}