/* ======= Util ======= */
html, body { height: 100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#111;
  color:#eaeaea;
}
main{ flex:1 0 auto; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 18px; }

/* ====== Footer base ====== */
.site-footer{
  margin-top:auto;
  width:100%;
  background: var(--page-bg-2, #0f0f10);
  border-top: 1px solid var(--border, rgba(255,255,255,.1));
  color:#eaeaea;
  padding:20px 0 0 0;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 32px;
  justify-items:center;
  text-align:center;
  padding:56px 0 46px;
}

.foot-col{ width:100%; max-width:340px;}
.foot-title{ font-size:22px; margin:0 0 14px; color:#fff }
.downloads .foot-title{ margin-bottom:7px; }

/* Logo en descargas */
.footer-logo{
  display:block;
  max-width:220px;
  max-height:80px;
  width:auto;
  height:auto;
  margin:12px auto 12px;
  object-fit:contain;
  border-radius:8px;
}

/* ====== Botones de descargas ====== */
.download-stack{ display:flex; flex-direction:column; align-items:center; gap:22px; }

.brutalist-button{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  width:190px; height:64px;
  background:#000; color:#fff; text-decoration:none;
  font: 800 15px/1 Arial, sans-serif;
  border:3px solid #fff; outline:3px solid #000; border-radius:12px;
  box-shadow:6px 6px 0 #00a4ef;
  transition:transform .1s, box-shadow .1s, background .1s, color .1s;
  position:relative; overflow:hidden; padding:0 16px;
  margin:10px 0 0 0;
}
.brutalist-button::before{
  content:""; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  opacity:0;
}
@keyframes slide{ 0%{left:-100%} 100%{left:100%} }
.brutalist-button:hover::before{ opacity:1; animation:slide 2s infinite; }
.brutalist-button:hover{ transform:translate(-4px,-4px); box-shadow:10px 10px 0 #000; }
.brutalist-button:active{ transform:translate(4px,4px); box-shadow:0 0 0 #00a4ef; background:#fff; color:#000; border-color:#000; }

.button-text{ display:flex; flex-direction:column; line-height:1.1; z-index:1 }
.button-text span:first-child{ font-size:11px; text-transform:uppercase; opacity:.9 }
.button-text span:last-child{ font-size:17px; text-transform:uppercase }

.icon-inline{ width:26px; height:26px; display:block; }
.btn-android{ box-shadow:6px 6px 0 #3ddc84 }
.btn-sistema{ box-shadow:6px 6px 0 #d4af37 }
.ms-logo{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; width:26px; height:26px;
}
.ms-logo-square:nth-child(1){ background:#f25022 }
.ms-logo-square:nth-child(2){ background:#7fba00 }
.ms-logo-square:nth-child(3){ background:#00a4ef }
.ms-logo-square:nth-child(4){ background:#ffb900 }

/* ====== Enlaces tipo texto (Acerca/Ayuda) ====== */
.foot-links{
  display:flex; flex-direction:column; gap:8px;
  align-items:center;
}
.text-btn{
  position:relative; padding:6px 10px; color:#dcdcdc; text-decoration:none; border-radius:8px;
  transition:color .2s, background .2s, transform .15s;
}
.text-btn:hover{ color:#fff; background:rgba(255,255,255,.04) }
.text-btn:active{ transform:translateY(1px); background:rgba(255,255,255,.09) }
.text-btn::after{
  content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  background:
    radial-gradient(28px 2px at 50% 50%, rgba(212,175,55,.9), rgba(212,175,55,0) 70%),
    linear-gradient(90deg, transparent 0 10%, rgba(212,175,55,.75) 10% 90%, transparent 90% 100%);
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease; pointer-events:none;
}
.text-btn:hover::after{ transform:scaleX(1) }
.text-btn.is-active{ color:#111; background:linear-gradient(180deg,#d4af37,#b9931a); font-weight:800 }

/* ====== Información ====== */
.info-social-grid{ display:grid; grid-template-rows:auto auto; gap:16px }
.foot-info{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px; justify-items:center;
}

/* Filas de Información */
.info-link,
.foot-plain{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  color:#e6e6e6;
  text-decoration:none;
  position:relative;
  border-radius:8px;
  transition:color .2s, background .2s;
}
.info-link:hover{ color:#fff; background:rgba(255,255,255,.04) }
.info-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  background:
    radial-gradient(28px 2px at 50% 50%, rgba(212,175,55,.9), rgba(212,175,55,0) 70%),
    linear-gradient(90deg, transparent 0 10%, rgba(212,175,55,.75) 10% 90%, transparent 90% 100%);
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease; pointer-events:none;
}
.info-link:hover::after{ transform:scaleX(1) }

/* ====== Iconos de Información (WebP) ====== */
.site-footer .info-block img.icon-info{
  width:18px !important;
  height:18px !important;
  max-width:none !important;
  flex:0 0 18px;
  display:block;
  object-fit:contain;
  vertical-align:middle;
  filter: invert(1) brightness(2); /* negro → blanco */
}

/* ====== Redes sociales ====== */
.social-block{ display:flex; flex-direction:column; align-items:center; }
.social-title{ margin:0 0 10px; }

.social-list{
  list-style:none; padding:0; margin:0 auto;
  display:flex; justify-content:center; align-items:center; gap:18px;
}
.icon-content{ position:relative }
.icon-content .tooltip{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%); color:#fff;
  padding:6px 10px; border-radius:5px; opacity:0; visibility:hidden; font-size:12px; transition:all .3s ease;
}
.icon-content:hover .tooltip{ opacity:1; visibility:visible; top:-50px }

.icon-content a{
  position:relative; overflow:hidden;
  display:flex; justify-content:center; align-items:center;
  width:48px; height:48px; border-radius:50%;
  color:#4d4d4d; background:#fff; transition:all .25s ease-in-out;
}
.icon-social{ width:20px; height:20px; display:block; z-index:1; transition:filter .25s ease; }
.icon-content a .filled{
  position:absolute; left:0; right:0; bottom:0; top:auto; width:100%; height:0;
  background:#000; transition:height .3s ease-in-out;
}
.icon-content a:hover .filled{ height:100% }
.icon-content a:hover{ color:#fff; box-shadow:3px 2px 45px 0 rgb(0 0 0 / 12%) }
.icon-content a:hover .icon-social{ filter: invert(1) brightness(2); }

/* Colores por red */
.icon-content a[data-social="facebook"]  .filled,
.icon-content a[data-social="facebook"]  ~ .tooltip{ background:#1877f2 }
.icon-content a[data-social="instagram"] .filled,
.icon-content a[data-social="instagram"] ~ .tooltip{
  background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f)
}
.icon-content a[data-social="whatsapp"]  .filled,
.icon-content a[data-social="whatsapp"]  ~ .tooltip{ background:#25D366 }
.icon-content a[data-social="gmail"]     .filled,
.icon-content a[data-social="gmail"]     ~ .tooltip{ background:#EA4335 }

/* ====== Copyright ====== */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  padding:18px 0;
  width:100%;
  margin-top:20px;
}
.footer-bottom__inner{
  padding:18px;
  text-align:center; color:#ccc; font-size:15px;
}

/* ====== Responsive ====== */
@media (max-width:1120px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
    padding:52px 0 40px;
    gap:30px 26px;
  }
  .footer-grid .downloads{ grid-column:1 / -1; order:1; }
  .footer-grid .about{ grid-column:auto; order:2; }
  .footer-grid .help{ grid-column:auto; order:3; }
  .footer-grid .info-social{ grid-column:1 / -1; order:4; }
}
@media (max-width:680px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    padding:48px 0 36px;
    gap:24px 18px;
  }
  .footer-grid .downloads{ grid-column:1 / -1; order:1; }
  .footer-grid .about{ grid-column:auto; order:2; }
  .footer-grid .help{ grid-column:auto; order:3; }
  .footer-grid .info-social{ grid-column:1 / -1; order:4; }

  .social-list{ gap:16px }
  .icon-content a{ width:46px; height:46px }
  .icon-social{ width:19px; height:19px }
}
@media (max-width:420px){
  .footer-grid{
    grid-template-columns:1fr;
    padding:44px 0 32px;
  }
  .footer-grid .downloads{ order:1; }
  .footer-grid .about{ order:2; }
  .footer-grid .help{ order:3; }
  .footer-grid .info-social{ order:4; }
}