/* =======================================================
   Agent – Classic (solo para .agent--classic)
   Hereda colores del Kit de Elementor si existe.
   ======================================================= */

/* Fallbacks si no hay Kit */
:root{
  --ui-text:#0f172a;
  --ui-primary:#1A56DB;
  --ui-secondary:#ffffff;
  --ui-border: color-mix(in srgb, var(--ui-text) 14%, #fff);
}

/* Mapear desde Elementor Kit activo */
:where(body[class*="elementor-kit-"]){
  --ui-text: var(--e-global-color-text);
  --ui-primary: var(--e-global-color-primary);
  --ui-secondary: var(--e-global-color-secondary);
  --ui-border: color-mix(in srgb, var(--ui-text) 14%, #fff);
}

/* ===================== Botón base (scoped a Classic) ===================== */
.agent--classic .hn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:10px;
  font-weight:600; border:1px solid transparent;
  transition:filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration:none !important;
}
.agent--classic .hn-btn i{ font-size:16px; }
.agent--classic .hn-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.agent--classic .hn-btn:hover{ filter:brightness(.96); }

/* Variantes de color del botón (scoped) */
.agent--classic .hn-btn--style-kit{ background:var(--ui-primary); color:var(--ui-secondary); border-color:var(--ui-primary); }
.agent--classic .hn-btn--style-outline{ background:transparent; color:var(--ui-primary); border-color:var(--ui-primary); }
.agent--classic .hn-btn--style-outline:hover{ background:rgba(0,0,0,.03); }
.agent--classic .hn-btn--style-ghost{    background: transparent;
    color: var(--ui-text) !important;
    border-color: var(--ui-text) !important; }
.agent--classic .hn-btn--style-ghost:hover{ filter:brightness(.97); }

/* WhatsApp */
.agent--classic .hn-btn--whatsapp.hn-btn--style-wa{ background:#25D366; border-color:#25D366; color:#fff !important; }
.agent--classic .hn-btn--whatsapp.hn-btn--style-wa:hover{ filter:brightness(.94); }
/* WhatsApp con colores del Kit */
.agent--classic .hn-btn--whatsapp.hn-btn--style-kit{ background:var(--ui-primary); color:var(--ui-secondary); border-color:var(--ui-primary); }

/* ===================== Classic: layout y bloques ===================== */


/* Mismo elemento con las 3 clases */
.hn-section.hn-agent-card.agent--classic {
  background: var(--ui-surface);
  border: 2px solid color-mix(in srgb, var(--ui-primary) 15%, #fff);
  border-radius: var(--radius-from-kit, 12px);
  padding: 0;
  box-shadow: none;
  margin-bottom: 16px;
}

.hn-section.hn-agent-card .contact--classic {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    display: grid;
    gap: 8px;
    justify-content: left;
    color: var(--ui-primary);
}

/* Head con “banda” */
.agent--classic .agent-classic__head{
  display:grid; gap:12px; align-items:center;
  padding:18px 16px;
  background: linear-gradient(270deg, #fff, color-mix(in srgb, #fff 95%, var(--ui-primary))) !important;
  border-bottom:1px solid var(--ui-border);
}

.agent--classic .agent-classic__id{ display:flex; gap:12px; align-items:center; }

.agent--classic .agent-card__avatar img{
  width:64px; height:64px; object-fit:cover; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.agent--classic .agent-card__name{
  margin:0; font-size:clamp(18px, 2.1vw, 21px); line-height:1.2; color:var(--ui-primary);
  font-family:var(--font-secondary-family, inherit); font-weight:var(--font-secondary-weight, 700);
}

.agent--classic .agent-card__meta{
  display:grid; gap:1px; flex-wrap:wrap; margin-top:2px; font-size:13px;
  color: var(--ui-primary);
}
.agent--classic .agent-card__meta .m-item{ display:inline-flex; align-items:center; }

/* CTA en cabecera: inline en desktop, full-width en móvil */
.agent--classic .agent-classic__cta{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.agent--classic .agent-classic__cta .hn-btn{
  padding:10px 14px; border-radius:10px; width:100%;
}
@media (max-width:520px){
  .agent--classic .agent-classic__cta{ justify-content:stretch; }
  .agent--classic .agent-classic__cta .hn-btn{ width:100%; justify-content:center; }
}

/* Descripción */
.agent--classic .agent-classic__desc{
  padding: 12px 16px;
    color: var(--ui-text);
    border-bottom: 1px solid var(--ui-border);
    border-top: 1px solid var(--ui-border);
}
.agent--classic .agent-classic__desc p{ margin:0 0 .6em; }


.hn-chip i {
    font-size: 14px;
    color: var(--ui-primary);
}

/* Contacto */
.agent--classic .contact{
  list-style:none; margin:0; padding:10px 16px; display:grid; gap:8px;
  border-bottom:1px dashed var(--ui-border);
}
.agent--classic .contact li{ display:flex; gap:10px; align-items:center; font-size:15px; }
.agent--classic .contact li i{ font-size:14px; color:var(--ui-primary); line-height:1; }
.agent--classic .contact li.is-muted{ opacity:.85; }
.agent--classic .contact a{ color:var(--ui-text); text-decoration:none; }

/* Redes */
.agent--classic .agent-classic__social{
  padding:12px 16px; display:flex; gap:10px; flex-wrap:wrap; justify-content:space-around;
}
.agent--classic .agent-classic__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--ui-border);
  border-radius:8px; color:var(--ui-secondary) !important; text-decoration:none; background: var(--ui-primary);
}
.agent--classic .agent-classic__social a:hover{ filter:brightness(.96); }
.agent--classic .agent-classic__social i{ font-size:14px; }

/* CTA abajo (si tu template classic lo usa en <div class="cta">) */
.agent--classic .cta .hn-btn{
  display:flex; justify-content:center; width:100%; padding:12px 16px; border-radius:10px;
}

/* === Estilo solo para los enlaces dentro de .contact--classic === */
.contact--classic a {
  color: var(--e-global-color-primary) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.contact--classic a:hover,
.contact--classic a:focus {
  color: var(--e-global-color-primary) !important;
  opacity: 0.8;
  text-decoration: underline;
}

/* Opcional: alinear íconos y texto */
.contact--classic li {
  list-style: none;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact--classic i {
  color: var(--e-global-color-primary);
  min-width: 18px;
}