/* ==========================================================================
   Footer público — traducción vanilla del componente Footer (React/shadcn/
   Tailwind). Usa las variables de tema ya definidas en base.html (--text,
   --border, --bg-muted, --brand...) para respetar claro/oscuro sin duplicar
   esa lógica aquí.
   ========================================================================== */

.pf-footer{
  border-top:1px solid var(--border);
  padding:56px 0 32px;
}
.pf-container{max-width:1200px;margin-inline:auto;padding-inline:1.5rem;}

.pf-top{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding-bottom:28px;
}
.pf-brand{display:inline-flex;align-items:center;text-decoration:none;}
.pf-logo-img{height:38px;width:auto;object-fit:contain;display:block;}

.pf-social{list-style:none;display:flex;gap:10px;margin:0;padding:0;}
.pf-social-link{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-muted);border:1px solid var(--border);color:var(--text-muted);
  opacity:.55;cursor:default;
}
/* Íconos con cuenta real ya creada (ej. Instagram): activos, sin atenuar */
a.pf-social-link{
  opacity:1;cursor:pointer;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s;
}
a.pf-social-link:hover{
  background:var(--brand);border-color:var(--brand);color:#fff;
  transform:translateY(-2px);
}

.pf-bottom{
  border-top:1px solid var(--border);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-start;justify-content:space-between;
}
.pf-copyright{font-size:.8rem;color:var(--text-muted);line-height:1.6;white-space:nowrap;}

.pf-main-links,.pf-legal-links{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;
}
.pf-main-links{order:2;}
.pf-legal-links{order:3;}
.pf-main-links a{color:var(--brand);font-size:.85rem;font-weight:500;text-decoration:none;}
.pf-main-links a:hover{text-decoration:underline;}
.pf-legal-links a{color:var(--text-muted);font-size:.85rem;text-decoration:none;}
.pf-legal-links a:hover{text-decoration:underline;color:var(--text);}

@media (max-width:720px){
  .pf-top{flex-direction:column;align-items:flex-start;}
  .pf-bottom{flex-direction:column;}
  .pf-copyright{white-space:normal;order:1;}
}