/* ============================================================
   BI Oportunidades — mejoras de UI (transiciones, hover, reveal)
   Archivo ADITIVO, cargado despues de main.css.  2026-10-01 BH
   ============================================================ */

/* Transiciones suaves en elementos interactivos */
a, button, .btn, .pUnidades, .depto, .card,
input, textarea, select {
  transition: color .25s ease, background-color .25s ease,
              box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}

/* ---------- Tarjetas de proyecto (.depto): zoom + sombra ---------- */
.depto {
  border-radius: 12px;
  overflow: hidden;
}
.depto:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  transform: translateY(-4px);
}
.depto > div:first-child {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.depto > div:first-child img.img-fluid {
  width: 100%;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), filter .4s ease;
  will-change: transform;
}
.depto:hover > div:first-child img.img-fluid {
  transform: scale(1.06);
  filter: saturate(1.08);
}
.depto > div:first-child::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(130,22,32,.22) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.depto:hover > div:first-child::after { opacity: 1; }

/* ---------- Boton COTIZA AQUI: hover animado ---------- */
.bg-negro3 { transition: background-color .3s ease; overflow: hidden; }
.bg-negro3:hover { background-color: #2a2a2a; }

a.anclaBlanca.pUnidades {
  position: relative;
  overflow: hidden;
  z-index: 0;
  letter-spacing: .4px;
  transition: letter-spacing .3s ease, transform .2s ease, color .25s ease;
}
/* relleno rojo que entra deslizando */
a.anclaBlanca.pUnidades::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #821620, #7A1A15);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.3,.7,.2,1);
  z-index: -1;
}
a.anclaBlanca.pUnidades:hover::before { transform: translateX(0); }
/* flecha que aparece al hover */
a.anclaBlanca.pUnidades::after {
  content: "\2192";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .35s ease, opacity .35s ease, margin-left .35s ease;
  vertical-align: middle;
}
a.anclaBlanca.pUnidades:hover::after { max-width: 1.5em; opacity: 1; margin-left: .4em; }
a.anclaBlanca.pUnidades:hover { letter-spacing: 1px; color: #fff; }

/* el bloque rojo "SOLO X UNIDADES" reacciona junto a la tarjeta */
.bg-rojo7 { transition: filter .3s ease; }
.depto:hover .bg-rojo7 { filter: brightness(1.08); }

/* ---------- Pagina interior: tarjetas de unidad (.deptoPromocion) ---------- */
.deptoPromocion {
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .35s ease, transform .3s ease;
}
.deptoPromocion:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,.16) !important;
  transform: translateY(-5px);
}
.bgDeptoPromocion {
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
.deptoPromocion:hover .bgDeptoPromocion { transform: scale(1.06); }

/* Boton COTIZAR de la pagina interior (.btnCotizar) */
.btnCotizar {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform .2s ease, letter-spacing .3s ease, box-shadow .3s ease;
}
.btnCotizar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #821620, #7A1A15);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.3,.7,.2,1);
  z-index: -1;
}
.btnCotizar::after {
  content: "\2192";
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .35s ease, opacity .35s ease, margin-left .35s ease;
}
.btnCotizar:not([disabled]):hover::before { transform: translateX(0); }
.btnCotizar:not([disabled]):hover { letter-spacing: 1px; box-shadow: 0 8px 20px rgba(130,22,32,.35); }
.btnCotizar:not([disabled]):hover::after { max-width: 1.5em; opacity: 1; margin-left: .4em; }

/* Titulo de la pagina interior: acento de marca */
.mt150 p.size30.fw-700 { position: relative; padding-bottom: 16px; }
.mt150 p.size30.fw-700::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #821620, #7A1A15);
  transform: translateX(-50%);
}
.mt150 p.size25 { letter-spacing: 1.5px; }

/* ---------- Microinteracciones ---------- */
.redes a, .social a { transition: transform .25s ease, opacity .25s ease; }
.redes a:hover, .social a:hover { transform: translateY(-3px); }

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(130,22,32,.15);
  border-color: #821620 !important;
}

.btn:hover, button:hover { transform: translateY(-2px); }
.btn:active, button:active { transform: translateY(0); }

/* ---------- Modal de cotizacion: apertura, carga, hover ---------- */
/* Entrada animada (keyframes para que corra al pasar de display:none a flex) */
.custom-lightbox-overlay.active { animation: biFadeIn .3s ease both; }
.custom-lightbox-overlay.active .custom-lightbox-content {
  animation: biPopIn .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes biFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes biPopIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Boton X: gira y se tiñe de rojo al hover */
.custom-lightbox-close { transition: transform .25s ease, color .2s ease; }
.custom-lightbox-close:hover { transform: rotate(90deg); color: #821620; }

/* Campos: foco animado */
.custom-form-input {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.custom-form-input:focus {
  outline: none;
  border-color: #821620 !important;
  box-shadow: 0 0 0 3px rgba(130,22,32,.15);
}

/* Boton Enviar del modal: hover con lift */
.custom-submit-btn {
  position: relative; overflow: hidden;
  transition: background-color .25s ease, transform .2s ease, box-shadow .3s ease, letter-spacing .25s ease;
}
.custom-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  letter-spacing: .5px;
  box-shadow: 0 10px 24px rgba(130,22,32,.32);
}
.custom-submit-btn:active:not(:disabled) { transform: translateY(0); }

/* Estado CARGANDO: spinner junto a "Enviando..." */
.custom-submit-btn:disabled { opacity: .9; cursor: progress; }
.custom-submit-btn:disabled::after {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 9px;
  vertical-align: middle;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: biSpin .7s linear infinite;
}
@keyframes biSpin { to { transform: rotate(360deg); } }

/* Mensaje de exito/error: aparece con fade */
#modalAlertMessage.success, #modalAlertMessage.error { animation: biFadeUp .4s ease both; }
@keyframes biFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal al hacer scroll (solo si hay JS) ---------- */
.bi-js .bi-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.bi-js .bi-reveal.bi-in { opacity: 1; transform: none; }

/* ---------- Respeto a reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bi-js .bi-reveal { opacity: 1 !important; transform: none !important; }
  .depto:hover { transform: none; }
  .depto:hover > div:first-child img.img-fluid { transform: none; }
  .deptoPromocion:hover { transform: none; }
  .deptoPromocion:hover .bgDeptoPromocion { transform: none; }
}