:root{
  --bg:#111;
  --bg-light:#1a1a1a;
  --accent:#ff7b25;
  --accent-dark:#e05a0d;
  --text:#f2f2f2;
  --text-muted:#aaa;
  --radius:8px;
  --max-width:1100px;
  --gap:1.5rem;
  --gap-section:4rem;
  font-size:16px;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{
  color:var(--text);
  text-decoration:none;
}
img{
  max-width:100%;
  display:block;
}
.container{
  width:90%;
  max-width:var(--max-width);
  margin:0 auto;
}
.btn{
  display:inline-block;
  background:var(--accent);
  color:#000;
  padding:.75rem 1.5rem;
  border-radius:var(--radius);
  font-weight:600;
  transition:background .2s;
}
.btn:hover{
  background:var(--accent-dark);
}
/* header */
.header{
  background:var(--bg-light);
  border-bottom:1px solid #222;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.2rem;
  color:var(--text);
}
.logo img{
  height:40px;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  width:24px;
  height:3px;
  background:var(--text);
}
.navbar ul{
  list-style:none;
  display:flex;
  gap:var(--gap);
}
.navbar a{
  font-weight:600;
  padding:.25rem .5rem;
  border-radius:var(--radius);
  transition:background .2s;
}
.navbar a:hover{
  background:#ffffff11;
}
/* hero */
.hero{
  padding:var(--gap-section) 0;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center;
}
.hero-text h1{
  font-size:2.2rem;
  margin-bottom:1rem;
}
.hero-text p{
  margin-bottom:1.5rem;
  color:var(--text-muted);
}
.hero-img img{
  border-radius:var(--radius);
}
/* features */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--gap);
  padding-bottom:var(--gap-section);
}
.feature{
  background:var(--bg-light);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
}
.feature img{
  height:80px;
  margin:0 auto 1rem;
  border-radius:var(--radius);
}
.feature h3{
  margin-bottom:.5rem;
  color:var(--accent);
}
.feature p{
  color:var(--text-muted);
  font-size:.95rem;
}
/* footer */
.footer{
  background:var(--bg-light);
  padding:2rem 0 0;
  margin-top:var(--gap-section);
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
.footer-info p{
  margin:.25rem 0;
}
.footer-nav ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.footer-nav a{
  color:var(--text-muted);
}
.footer-nav a:hover{
  color:var(--accent);
}
.footer-bottom{
  text-align:center;
  padding:1rem 0;
  border-top:1px solid #222;
  margin-top:1.5rem;
  color:var(--text-muted);
  font-size:.85rem;
}
/* whatsapp */
.whatsapp-float{
  position:fixed;
  bottom:1.2rem;
  right:1.2rem;
  width:56px;
  height:56px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px #00000044;
  transition:transform .2s;
}
.whatsapp-float:hover{
  transform:scale(1.08);
}
.whatsapp-float svg{
  width:28px;
  height:28px;
}
/* banner de cookies */
.cookie-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: var(--bg-light);
  border-top: 2px solid var(--accent);
  padding: 1.5rem 0;
  z-index: 1000;
  transition: bottom 0.5s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.cookie-banner.show {
  bottom: 0;
}
.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.cookie-text p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
}
.cookie-btns {
  display: flex;
  gap: 1rem;
}
@media(max-width: 768px) {
  .cookie-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* responsive */
@media(max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
  }
  .features{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .nav-toggle{
    display:flex;
  }
  .navbar{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--bg-light);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s;
  }
  .navbar ul{
    flex-direction:column;
    padding:1rem;
  }
  .navbar.open{
    max-height:400px;
  }
}