/* Contact actions: complements the existing site styles. */
.contacto-acciones {display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.contacto-boton {display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 16px;border:1px solid var(--brass);border-radius:2px;color:var(--paper);font:inherit;font-size:.9rem;line-height:1.4;text-decoration:none;text-align:center;}
.contacto-boton:hover {background:var(--brass);color:var(--ink);}
.contacto-boton:focus-visible {outline:2px solid var(--paper);outline-offset:4px;}
.contacto .sel {overflow-wrap:anywhere;}
@media(max-width:600px){.contacto-acciones{flex-direction:column;align-items:stretch;}.contacto-boton{width:100%;}}

/* Portada en celular: la foto sigue primero, más compacta, y los botones suben junto al nombre (10 nov 2026) */
@media (max-width: 860px) {
  .portada .wrap { gap: 22px; padding-block: 22px 48px; }
  .carrusel .marco { height: min(48vh, 480px); }
  .portada .texto { display: flex; flex-direction: column; }
  .portada .texto .oficio { order: 1; }
  .portada .texto h1 { order: 2; }
  .portada .texto .contacto-acciones { order: 3; margin-top: 18px; margin-bottom: 18px; }
  .portada .texto .medios { order: 4; }
  .portada .texto .repre { order: 5; }
}
@media (max-width: 600px) {
  .portada .contacto-acciones { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .portada .contacto-boton { width: auto; flex: 1 1 0; min-height: 44px; padding: 10px 6px; font-size: .82rem; }
}