:root{
--white:#fff;
--cream:#f7f5f2;
--ink:#1a1a18;
--ink2:#6e6e68;
--accent:#c9b8a6;
}

body{
font-family:'DM Sans',sans-serif;
color:var(--ink);
}

h1,h2{font-family:'DM Serif Display',serif;}

.h-sans {font-family: 'DM Sans', sans-serif; font-size:24px}

.bg-secondary{background:#ffcc00 !important;}

.navbar{
position:fixed;
width:100%;
background:white;
padding:20px 40px;
z-index:999;
border-bottom:1px solid #eee;
}

.logo img{height:60px;}

.btn-main{
background:#1a1a18;
color:#fff;
padding:12px 26px;
text-decoration:none;
font-size:14px;
}

.btn-outline{
border:1px solid #1a1a18;
padding:12px 26px;
text-decoration:none;
color:#1a1a18;
}

.hero{
height: 100vh;
display:grid; 
grid-template-columns: 3fr 2fr;
padding-top:0px;
}
.hero h1 {font-size:60px}
.hero .upper {font-size:13px; letter-spacing:1px}

.action-button{transition: background-color 0.3s ease;}
.action-button:hover {background:#ffcc00; color:#000}

.hero-left{

padding:80px 140px;
display:flex;
flex-direction:column;
justify-content:center;
}

.hero img{
width:100%;
height:100%;
object-fit:cover;
}

.section{padding:80px 0;}

.cta-box{
background:#1a1a18;
color:white;
padding:40px;
margin-top:40px;
}

.cta-buttons a{
display:block;
margin-bottom:10px;
text-align:center;
padding:12px;
background:white;
color:black;
text-decoration:none;
}
.footer-logo-floating {
  position: absolute;
  right: 40px;
  bottom: 40px;
  max-width: 100px;
  opacity: 0.9;
}
footer {
  position: relative;
}

@media(max-width:1300px){
.hero {
    height: auto; /* 
    grid-template-columns: 1fr; /* una sola columna */
  }

  .hero-left {
    padding: 120px 20px 40px 20px; /* menos padding */
  }

  .hero h1 {
    font-size: 32px; /* escala correcta */
  }

  .hero img {
    height: auto; /* 
    max-height: 300px; /* opcional */
    object-fit: cover;
  }


.hero{grid-template-columns:1fr;}

}

@media (max-width: 768px) {

   .footer-logo-floating{
    position: static;
    display:block;
    margin:20px auto 0;
  }

  .logo img{height:50px;}

  .section{padding:60px 0;}
  .m-amplio{width:100%; text-align:center; justify-content:center}

}