/*
------------------------------------------------
EL ENTE CUIDA
style.css v1.1
------------------------------------------------
*/
*{margin:0;padding:0;box-sizing:border-box}
:root{
--fondo:#F8F5EE;
--verde:#435847;
--verde-claro:#70806F;
--texto:#586456;
--dorado:#C9A24A;
--blanco:#FFF;
--radio:28px;
--sombra:0 18px 45px rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
body{
background:linear-gradient(180deg,#FCFBF8,#F6F2EA);
font-family:'Manrope',sans-serif;
color:var(--texto);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:45px;
}
.landing{width:100%;display:flex;justify-content:center}
.hero{
width:100%;
max-width:760px;
background:#fff;
padding:70px;
border-radius:var(--radio);
box-shadow:var(--sombra);
text-align:center;
}
.logo img{
width:190px;
display:block;
margin:auto;
animation:flotar 6s ease-in-out infinite;
}
@keyframes flotar{
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}
h1{
font-family:'Cormorant Garamond',serif;
font-size:68px;
font-weight:500;
color:var(--verde);
margin:28px 0 10px;
}
.eslogan{
letter-spacing:4px;
text-transform:uppercase;
font-size:14px;
color:var(--verde-claro);
}
.mensaje{margin-top:40px}
.mensaje p{
font-size:20px;
line-height:1.9;
margin-bottom:22px;
}
.formulario{
display:flex;
flex-direction:column;
gap:16px;
margin-top:45px;
}
.formulario input{
padding:18px 22px;
border:1px solid #D8D3CA;
border-radius:60px;
background:#FCFBF8;
font-size:16px;
outline:none;
transition:.3s;
}
.formulario input:focus{
border-color:var(--dorado);
box-shadow:0 0 0 4px rgba(201,162,74,.15);
}
.formulario button{
padding:18px;
border:none;
border-radius:60px;
background:var(--verde);
color:#fff;
font-size:17px;
cursor:pointer;
transition:.3s;
}
.formulario button:hover{
background:#314133;
transform:translateY(-2px);
}
.formulario p{
font-size:14px;
line-height:1.7;
opacity:.8;
}
.instagram{margin-top:38px}
.instagram a{
display:inline-block;
padding:16px 28px;
border:1px solid var(--dorado);
border-radius:60px;
color:var(--verde);
text-decoration:none;
transition:.3s;
}
.instagram a:hover{
background:var(--dorado);
color:#fff;
}
.volver{margin-top:20px}
.volver a{
color:var(--verde);
text-decoration:none;
opacity:.8;
}
footer{
margin-top:45px;
font-size:14px;
opacity:.65;
}