/* ===== Overrides URM: formulario Registrar Pago (compacto) ===== */

/* Contenedor un poco más ancho */
.main-narrow {
  max-width: 980px !important;  /* antes 880 */
}

/* Inputs/selects de columnas de 3 → un poco más anchos */
.form-compact .row .col-md-3 .form-control,
.form-compact .row .col-md-3 .form-select,
.form-compact .row .col-md-3 .input-group > .form-control,
.form-compact .row .col-md-3 .input-group > .form-select {
  width: auto !important;      /* gana a Bootstrap */
  max-width: 360px !important; /* antes 320/300 */
  display: inline-block !important;
}

/* Por si tenemos campos en col-md-4 / col-md-2 en otros formularios */
.form-compact .row .col-md-4 .form-control,
.form-compact .row .col-md-4 .form-select,
.form-compact .row .col-md-2 .form-control,
.form-compact .row .col-md-2 .form-select {
  width: auto !important;
  max-width: 360px !important;
  display: inline-block !important;
}

/* Campo Propiedad y Observación siempre ancho completo */
.form-compact input[readonly],
.form-compact input[name="observacion"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Botón: ancho natural y sin desbordes */
.form-compact .btn {
  width: auto !important;
}

/* Home hero: centrar la foto dentro del círculo */
.rounded-circle.overflow-hidden > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;  /* <— corrige el desplazamiento a la izquierda */
}

/* === HOME HERO: forzar centrado dentro del círculo === */

/* Caso 1: el círculo es un <img> */
.rounded-circle img,
[class*="hero"] .rounded-circle img,
.hero img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important; /* ← centrado real */
}

/* Caso 2: el círculo es un <div> con background-image */
.rounded-circle,
[class*="hero"] .rounded-circle,
.hero .rounded-circle {
  background-size: cover !important;
  background-position: center center !important;
}

/* (Por si el contenedor del círculo tiene overflow oculto) */
.rounded-circle.overflow-hidden { overflow: hidden !important; }

/* === HOME HERO: centrado estricto de la imagen circular === */

/* Caso A: la imagen MISMA tiene .rounded-circle (muy común en Bootstrap) */
img.rounded-circle {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important; /* centrada */
}

/* Caso B: la imagen está DENTRO de un contenedor circular */
.rounded-circle > img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Caso C: el círculo usa background-image en lugar de <img> */
.rounded-circle {
  background-size: cover !important;
  background-position: 50% 50% !important;
  /* por si algún estilo raro descentró el recorte */
  clip-path: circle(50% at 50% 50%) !important;
}

/* Por si el contenedor recorta: */
.rounded-circle.overflow-hidden { overflow: hidden !important; }

/* === HOME HERO: círculo centrado, sin desplazamientos === */

/* Si el círculo es un <div> con la imagen dentro */
.hero .rounded-circle,
.home-hero .rounded-circle {
  overflow: hidden !important;
}

.hero .rounded-circle img,
.home-hero .rounded-circle img,
/* Y si la propia imagen tiene la clase rounded-circle */
img.rounded-circle {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;  /* ← centrado real */
  transform: none !important;           /* por si alguien la desplazó con translate */
}

/* Por si el círculo es un background */
.hero .rounded-circle,
.home-hero .rounded-circle {
  background-size: cover !important;
  background-position: 50% 50% !important;
}

/* === BOTÓN DORADO DEMO === */
.btn-gradient {
  background: linear-gradient(90deg, #b38b2e 0%, #111 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  filter: brightness(1.05);
  color: #fff;
  transform: translateY(-1px);
}

.fade-in {
  opacity: 0;
  animation: fadeInLogo 1.6s ease-in-out forwards;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Contacto (estilo uniforme en todas las páginas) === */
.contacto-seccion {
  background: #f7f9fc;
  border-radius: 24px;
  padding: 48px 18px;
}
.input-xl {
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 18px;
  border: 1px solid #e5e7eb;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-xl:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 .2rem rgba(14,165,233,.15);
}

/* opcional: ancho del contenedor en pantallas grandes */
@media (min-width:1200px){
  .container { max-width: 1200px; }
}

/* === Compactar formulario de contacto en quienes_somos === */
.contacto-compact {
  max-width: 1100px !important;
  padding: 48px 28px !important;
}

.contacto-compact .contacto-title {
  font-size: 42px !important;
  line-height: 1.1 !important;
  margin-bottom: 22px !important;
  letter-spacing: -.02em !important;
}

/* Campos */
.contacto-compact .contacto-input,
.contacto-compact .contacto-textarea,
.contacto-compact input[type="text"],
.contacto-compact input[type="email"],
.contacto-compact input[type="tel"],
.contacto-compact input[type="search"],
.contacto-compact textarea {
  height: 52px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

.contacto-compact .contacto-textarea,
.contacto-compact textarea {
  min-height: 220px !important;
  height: auto !important;
}

/* Botón */
.contacto-compact .contacto-actions { margin-top: 22px !important; }

.contacto-compact .contacto-actions .btn-cta,
.contacto-compact button[type="submit"] {
  min-width: 320px !important;
  font-size: 18px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.09) !important;
}

/* Placeholders */
.contacto-compact .contacto-input::placeholder,
.contacto-compact .contacto-textarea::placeholder,
.contacto-compact input::placeholder,
.contacto-compact textarea::placeholder {
  opacity: .7 !important;
}

/* Responsivo */
@media (min-width: 1280px) {
  .contacto-compact { max-width: 1050px !important; }
  .contacto-compact .contacto-title { font-size: 40px !important; }
}
@media (max-width: 991.98px) {
  .contacto-compact { padding: 40px 22px !important; }
  .contacto-compact .contacto-title { font-size: 36px !important; }
  .contacto-compact .contacto-textarea,
  .contacto-compact textarea { min-height: 200px !important; }
}
@media (max-width: 575.98px) {
  .contacto-compact { padding: 32px 18px !important; }
  .contacto-compact .contacto-title { font-size: 28px !important; }
  .contacto-compact .contacto-input,
  .contacto-compact input,
  .contacto-compact .contacto-textarea,
  .contacto-compact textarea { font-size: 15px !important; height: 48px !important; }
  .contacto-compact .contacto-actions .btn-cta,
  .contacto-compact button[type="submit"] { min-width: 100% !important; font-size: 17px !important; padding: 12px 16px !important; }
}

/* === Contacto compartido (idéntico en inicio y quienes_somos) === */
.contacto-shared { background: #f7f8fb; border-radius: 28px; }
.contacto-shared .container { max-width: 1180px !important; }

.contacto-title{
  font-weight: 800 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 28px !important;
}

/* Inputs y textarea */
.contacto-input,
.contacto-textarea,
.contacto-shared .form-control{
  border-radius: 18px !important;
  border: 1px solid #e6e7eb !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  font-size: 18px !important;
  padding: 14px 16px !important;
}

.contacto-input{ height: 58px !important; }
.contacto-textarea{ min-height: 230px !important; resize: vertical; }

/* Focus */
.contacto-shared .form-control:focus{
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 .25rem rgba(14,165,233,.15) !important;
}

/* Botón degradado (igual al home) */
.btn-cta-grad{
  background: linear-gradient(90deg, #b88a1b, #111);
  color: #fff;
  border: 0;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 20px;
  min-width: 360px;
  box-shadow: 0 25px 55px rgba(0,0,0,.12);
}
.btn-cta-grad:hover{ opacity:.95; color: #fff; }

.contacto-actions{ margin-top: 26px !important; }

/* Responsive */
@media (max-width: 991.98px){
  .contacto-title{ font-size: 44px !important; }
  .btn-cta-grad{ min-width: 100%; font-size: 18px; }
}
@media (max-width: 575.98px){
  .contacto-title{ font-size: 32px !important; }
  .contacto-input{ height: 52px !important; }
  .contacto-textarea{ min-height: 200px !important; }
}