*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Archivo', sans-serif;
background:linear-gradient(145deg,#f3f3f3,#e8e8e8);
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:#1f3b3a;
text-align:center;
overflow:hidden;
}

/* fondo sutil animado */

body::before{

content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,rgba(0,0,0,0.03),transparent 70%);
top:-150px;
left:-150px;
animation:float 12s ease-in-out infinite;

}

body::after{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(0,0,0,0.03),transparent 70%);
bottom:-150px;
right:-150px;
animation:float 14s ease-in-out infinite reverse;

}

.container{
position:relative;
max-width:1000px;
padding:40px;
z-index:2;

}

.logo{
width:200px;
margin-bottom:50px;

/* efecto sutil */

animation:logoFloat 6s ease-in-out infinite;
}

h1{
font-size:3rem;
font-weight: 800;
margin-bottom:10px;
}

h2{
font-size:3rem;
font-weight: 800;
margin-bottom:35px;
width: 800px;
}


.contact{
font-size:16px;
color:#555;
margin-bottom:10px;
margin-top: 75px;
}

.info a {
    text-decoration: none;
    color:#b74e23
}

.info{
font-size:17px;
font-weight:500;
margin-bottom:35px;
}

.footer{
margin-top: 120px;
font-size:13px;
color:#777;
}

/* animaciones */

@keyframes float{

0%{transform:translateY(0px)}
50%{transform:translateY(-25px)}
100%{transform:translateY(0px)}

}

@keyframes logoFloat{

0%{transform:translateY(0px)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0px)}

}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .container {
    max-width: 90%;
    padding: 32px 20px;
  }

  .logo {
    width: 110px;
    margin-bottom: 24px;
  }

  h1 {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  h2 {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .contact {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .info {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
  }

  .footer {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  body {
    padding: 20px 16px;
  }

  .container {
    max-width: 100%;
    padding: 20px 10px;
  }

  .logo {
    width: 95px;
    margin-bottom: 20px;
  }

  h1 {
    font-size: 28px;
    letter-spacing: 1px;
  }

  h2 {
    font-size: 19px;
    letter-spacing: 1.5px;
    line-height: 1.3;
    margin-bottom: 22px;
  }

  .contact {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .info {
    font-size: 15px;
    line-height: 1.8;
  }

  .info a {
    display: inline-block;
    margin: 4px 0;
    word-break: break-word;
  }

  .footer {
    font-size: 11px;
    margin-top: 8px;
  }

  body::before,
  body::after {
    width: 320px;
    height: 320px;
  }
}