/* =========================================================
   ASIA MÍA — FOOTER
   Estilos exclusivos de footer.php.

   Depende de los tokens de css/style.css (:root) y de las
   utilidades .wrap / .brand — se enqueue DESPUÉS de style.css.
   ========================================================= */

footer.site-footer{
  border-top:1px solid var(--border);
  background:var(--card);
  padding:56px 0 0;
}

/* ---- grid principal ---- */
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
}

/* ---- columna de marca ---- */
.foot-brand p{
  margin-top:16px; font-size:0.9rem; line-height:1.6;
  color:var(--muted-foreground); max-width:22rem;
}

/* ---- iconos sociales ---- */
.foot-socials{display:flex; gap:8px; margin-top:24px;}
.foot-socials a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:color-mix(in oklch, var(--foreground) 70%, transparent);
  transition:all .2s ease;
}
.foot-socials a:hover{border-color:var(--primary); color:var(--primary);}
.foot-socials svg{width:16px; height:16px;}

/* ---- columnas de links ---- */
.foot-col h3{font-size:0.9rem; font-weight:600;}
.foot-col ul{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.foot-col a{font-size:0.9rem; color:var(--muted-foreground); transition:color .2s ease;}
.foot-col a:hover{color:var(--primary);}

/* ---- barra inferior ---- */
.foot-bottom{
  margin-top:48px; padding:24px 0;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.foot-bottom p{font-size:0.75rem; color:var(--muted-foreground); margin:0;}
.foot-langs{display:flex; align-items:center; gap:16px;}
.foot-langs span{font-size:0.75rem; color:var(--muted-foreground);}
.foot-lang-btns{display:flex; gap:8px;}
.foot-lang-btns button{
  border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; font-size:0.75rem; font-weight:500;
  background:none;
  color:color-mix(in oklch, var(--foreground) 70%, transparent);
  transition:all .2s ease;
}
.foot-lang-btns button:hover{border-color:var(--primary); color:var(--primary);}

/* ---- responsive ---- */
@media (max-width: 1024px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 768px){
  .foot-grid{grid-template-columns:1fr;}
}



.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: #0D1B2A;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(216, 132, 150, 0.3);
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
}

.whatsapp-icon {
    width: 28px;
    height: 28px;
}

.whatsapp-float:hover {
    background-color: #c47385; /* Un tono un poco más oscuro al presionar */
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 22px rgba(216, 132, 150, 0.45);
    color: #ffffff;
}