/* ==========================================================================
   Castillo & Prieto Abogados
   Reglas portadas verbatim — origen: design/css/styles.css
   ========================================================================== */

/* ---------- Abogados ---------- */
.abogados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.abogado {
  border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.abogado__top { display: flex; }
.abogado__foto { position: relative; flex: none; width: 150px; background: #eef3f5; overflow: hidden; }
.abogado__foto span {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
}
.abogado__datos { padding: 26px 26px 22px; flex: 1; }
.abogado__datos h3 { font-family: var(--heading-font); font-size: 22px; color: var(--tinta); margin: 0 0 12px; }
.abogado__mail { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--celeste-oscuro); }
.abogado__pie { padding: 4px 26px 26px; }
.abogado__pie p { font-size: 16px; color: var(--texto); margin: 0 0 16px; }
@media (max-width: 760px) {
  .abogados { grid-template-columns: 1fr; }
  .abogado__foto { width: 112px; }
}

/* Override de columnas del widget (control "Columnas" de Elementor).
   Única augmentación permitida sobre el CSS del diseño: mantiene el motor
   (CSS Grid) y solo lee --cols cuando el usuario fija un número. Va acotado a
   desktop para no pisar el colapso a 1 columna del breakpoint 760px. */
@media (min-width: 761px) {
  .abogados[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}