*{box-sizing:border-box}
body{
margin:0;
font-family:Arial, sans-serif;
background:#0e0e0e;
color:#fff
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 1.2rem
}

/* TOP BAR */
.topbar{
background:#e10600;
font-family:'Montserrat',sans-serif;
font-size:.85rem
}
.topbar-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:.45rem 0
}
.topbar-right{
display:flex;
gap:1rem
}

/* ICONS VIA MASK */
.icon{
width:16px;
height:16px;
background:#fff;
display:inline-block;
mask-size:contain;
mask-repeat:no-repeat;
mask-position:center;
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
}

.icon.fb{
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91V117.78c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z"/></svg>');
-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91V117.78c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z"/></svg>');
}

.icon.ig{
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 4.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zm6-1.9a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/></svg>');
-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 4.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zm6-1.9a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/></svg>');
}

/* HEADER */
.header { background:#000; }
.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:1.4rem 0
}
.logo{
height:80px
}
.nav a{
font-family:'Montserrat',sans-serif;
color:#fff;
text-decoration:none;
margin-left:2rem;
font-weight:600;
letter-spacing:.03em
}

/* HERO */
.hero{
padding:4.5rem 0;
text-align:center
}
.hero h2{color:#e10600}

/* SECTIONS */
.section{
padding:4rem 0;
text-align:center
}
.section.dark{background:#141414}
.store-img{
width:100%;
max-width:720px;
margin-top:2rem
}

/* BOTTOM SOCIAL */
.social-bottom{
margin-top:2rem;
display:flex;
justify-content:center;
gap:1rem
}
.social{
padding:.6rem 1.4rem;
color:#fff;
text-decoration:none;
font-weight:600;
border-radius:3px
}
.instagram{
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)
}
.facebook{background:#1877f2}

/* FOOTER */
.footer{
background:#000;
padding:1.5rem 0;
text-align:center;
font-size:.8rem;
color:#aaa
}


/* =====================
   MOBILE HEADER FIX
   ===================== */
@media (max-width: 768px) {

  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .topbar-left {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .topbar-right {
    align-self: flex-end;
    gap: 0.75rem;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 0;
  }

  .logo {
    height: 64px;
  }

  .nav {
    display: flex;
    gap: 1.2rem;
  }

  .nav a {
    margin-left: 0;
    font-size: 0.9rem;
  }
}


/* =====================
   MOBILE ICON SPACING
   ===================== */
@media (max-width: 768px) {

  .topbar-right {
    padding-right: 0.9rem;
  }

  .topbar-right .icon {
    width: 18px;
    height: 18px;
  }
}


/* BOTÓN FLOTANTE WHATSAPP */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  z-index:9999;
}
.whatsapp-float svg{
  width:28px;
  height:28px;
}
@media(max-width:768px){
  .whatsapp-float{
    width:52px;
    height:52px;
    bottom:16px;
    right:16px;
  }
}

.visit-section {
  padding: 4rem 1.5rem;
  text-align: center;
  background: #111;
}

.visit-section h2 {
  margin-bottom: 2rem;
}



.visit-image-wrapper {
  width: 27vw;
  max-width: 420px;
  margin: 0 auto;
}

.visit-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .visit-image-wrapper {
  width: 27vw;
  max-width: 420px;
  margin: 0 auto;
}
}