.btn.disabled,
.btn:disabled {
  background: #b4a46c;
  color: #ffffff;
}

.bloque-busqueda-ref {
  /* min-height: 75vh; */
  max-height: 100vh;
}

/* Columna izquierda */
.zona-ref {
  max-width: max-content;
}

.campo-ref-wrapper {
  width: 100%;
  margin-bottom: 60px;
}

/* CONTENEDOR */
.campo-select-custom {
  /* width: 100%; */
  margin: 0 auto;
}

/* SELECT BASE */
.campo-select-custom select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 1);
  color: rgba(242, 238, 227, 1);
  font-size: 22px;
  padding: 17.3px 0px 0px 0px;

  /* quitar estilos nativos */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  outline: none;
}

/* FOCUS */
.campo-select-custom select:focus {
  border-bottom: 2px solid rgba(87, 87, 86, 1);
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(214, 199, 173, 1);
}

.campo-select-custom select option {
  color: rgb(44,49,33);
  background-color: rgba(242, 238, 227, 1);
}

/* FLECHA PERSONALIZADA */
.campo-select-custom {
  position: relative;
}

/* .campo-select-custom::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 60%;
  width: 12px;
  height: 12px;
  pointer-events: none;

  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
} */
/* background-image: url('../images/arrowsupdown.png'); */

.label-ref {
  display: block;
  color: rgba(242, 238, 227, 1);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
}

.input-ref {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 1);
  border-radius: 0;
  color: rgba(242, 238, 227, 1);
  font-size: 22px;
  padding: 9px 0px 0px 0px;;
  outline: none;
  box-shadow: none;
  appearance: none;
}

.input-ref:focus {
  background: transparent;
  color: rgba(242, 238, 227, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  outline: none;
  box-shadow: none;
}

.input-ref::placeholder {
  color: transparent;
}
#home span.error {
  color: rgb(169 49 49);
  font-weight: 900;
}
#home sup {
  top: -0.5em;
  color: rgba(255, 255, 255, 1);
}

#home body {
  min-height: auto !important;
}

/* quitar flechas en algunos navegadores si quieres look más limpio */
.input-ref::-webkit-outer-spin-button,
.input-ref::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-ref[type="number"] {
  -moz-appearance: textfield;
}

.btnChangeTypeSearch {
  background-color: rgba(242, 238, 227, 1);
  border: none;
  color: rgba(45, 47, 34, 1);
  --bs-btn-border-radius: 0;
  font-weight: 600;
}
.btnChangeTypeSearch:hover {
  background-color: rgb(201, 200, 199);
  border: none;
  color: rgba(45, 47, 34, 1);
  --bs-btn-border-radius: 0;
  font-weight: 600;
}

/* Botón */
.contenedor-boton-ref {
  max-width: stretch;
}

.btn-buscar-ref {
  background-color: #2f7d32;
  color: #ffffff;
  border: none;
  width: 100%;
  height: 4vh;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -3px;
  box-shadow: none;
  padding: 0px;
}

.btn-buscar-ref:hover,
.btn-buscar-ref:focus,
.btn-buscar-ref:active {
  background-color: #276a2a;
  color: #ffffff;
  box-shadow: none;
  border: none;
}

/* Lado derecho */
.contenedor-imagen-ref {
  width: 100%;
  max-width: 290px;
  border-radius: 8px;
  overflow: hidden;
}

#home .tituloprinc {
  /* font-size: 36.8px; */
  font-weight: 400;
  font-family: mauren;
  color: rgba(214, 199, 173, 1) !important;
}

.titulos {
  font-weight: 400;
  font-size: clamp(20px, 3rem, 36.8px);
  min-width: max-content;
  color: rgba(214, 199, 173, 1);
  font-family: mauren;
}
.linea-flex {
  flex: 1;
  height: 2px;
  background-color: rgba(214, 199, 173, 1);
  margin-left: 3rem;
}
.headerGeneral {
  font-size: clamp(10px, 2rem, 25px);
  font-weight: 700;
  line-height: 100%;
  color: rgba(255, 255, 255, 1);
  height: 3.5rem;
}
.infoGeneral {
  font-size: clamp(7px, 1.5rem, 20px);
  font-weight: 500;
  line-height: normal;
  color: rgba(255, 255, 255, 1);
}
.theadCenter {
  vertical-align: center !important;
}
.theadTop {
  height: 3rem !important;
  vertical-align: top !important;
}
.tableNew {
  border-spacing: clamp(10px, 1rem, 22px);
  border-collapse: separate;
  border: none;
}
.thNone {
  border: none !important;
  background-color: transparent !important;
}
.btnNew {
  --bs-btn-color: rgba(214, 199, 173, 1);
  border: 2px solid rgba(214, 199, 173, 1);
  --bs-btn-border-color: rgba(214, 199, 173, 1);
  padding: 0px 7px 0px 7px !important;
}
.btnNew:hover {
  background-color: rgba(214, 199, 173, 1) !important;
  border-color: rgba(214, 199, 173, 1) !important;
}

#divbannerspc {
  --bs-bg-opacity: 1;
  background-color: rgba(242, 233, 206, 0.6);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
}

#divbannerspc:hover,
#divbannerspc:focus {
  background-color: rgba(242, 233, 206, 0.8);
}
#imgMtto:after {
  position: absolute;
  background-color: #00263a;
  opacity: 30%;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#divbannerspc:hover #imgMtto:after,
#divbannerspc:focus #imgMtto:after {
  content: none;
}

.textoModal {
  font-size: 17px;
}

.bordeModal {
  border-radius: 27px;
}

#divrefip .input-group-text {
  color: #979797;
  background-color: white;
  font-size: 0.75rem;
}
#divrefip input {
  border-left: none !important;
}

/* #home .etq_busq {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: normal;
}
#home .rst_busq {
  font-size: clamp(20px, 2rem, 45px);
  font-weight: 800;
  line-height: normal;
  color: rgba(255, 255, 255, 1);
  font-family: mauren;
} */
#home .saludo-row {
  align-items: center;
}

#home .mandala-saludo {
  width: clamp(70px, 10vw, 164px);
  height: auto;
  display: block;
}

#home .etq_busq {
  text-align: center;
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 1);
  font-family: mauren;
}

#home .rst_busq {
  text-align: center;
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 1);
  font-family: mauren;
}
.payment-strip-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.payment-strip {
  width: min(100%, 1600px);
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) auto minmax(260px, 1.5fr) minmax(220px, 1.3fr);
  gap: clamp(12px, 1.6vw, 34px);
  align-items: center;
}

/* caso con capital opcional visible:
   puedes agregar por JS una clase al contenedor, te la dejo abajo */
.payment-strip.with-capital {
  grid-template-columns:
    minmax(220px, 1.1fr)
    auto
    minmax(220px, 1.1fr)
    minmax(260px, 1.3fr)
    minmax(220px, 1.2fr);
}

.payment-item {
  min-width: 0;
}

.payment-amount-box,
.payment-select-box,
.payment-btn {
  /* min-height: clamp(54px, 4.8vw, 82px); */
  min-height: clamp(30px, 3vw, 60px);
  border-radius: 6px;
}

/* BLOQUE MONTO */
.payment-amount-box {
  background: rgba(94, 94, 94, 1);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 1.8vw, 28px);
  gap: 10px;
}

.payment-amount-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: rgba(245, 245, 245, 1);
  font-size: clamp(18px, 2.1vw, 38px);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}

.payment-amount-input::placeholder {
  color: rgba(245, 245, 245, 1);
  opacity: 1;
}

.payment-amount-input:focus {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.payment-amount-currency {
  color: rgba(245, 245, 245, 1);
  font-size: clamp(18px, 2.1vw, 38px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* TEXTO CENTRAL */
.payment-item-label {
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-payfor-text {
  color: rgba(245, 245, 245, 1);
  font-size: clamp(16px, 1.7vw, 30px);
  font-weight: 300;
  white-space: nowrap;
}

/* BLOQUE SELECT */
.payment-select-box {
  position: relative;
  background: rgba(94, 94, 94, 1);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 1.8vw, 28px);
}

.payment-select {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: rgba(245, 245, 245, 1);
  font-size: clamp(18px, 2.1vw, 38px);
  font-weight: 300;
  padding-right: 56px;
  cursor: pointer;
}

/* flecha cuadrada */
.payment-select-box::after {
  content: "";
  position: absolute;
  right: clamp(16px, 1.8vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(24px, 2.2vw, 44px);
  height: clamp(24px, 2.2vw, 44px);
  border: 2px solid rgba(214, 199, 173, 1);
  border-radius: 4px;
  pointer-events: none;
}

.payment-select-box::before {
  content: "";
  position: absolute;
  right: calc(clamp(16px, 1.8vw, 28px) + clamp(24px, 2.2vw, 44px) / 2 - 7px);
  top: 50%;
  transform: translateY(-25%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid rgba(214, 199, 173, 1);
  z-index: 1;
  pointer-events: none;
}

/* BOTÓN */
.payment-btn {
  width: 100%;
  border: none;
  background: rgba(46, 115, 53, 1) !important;
  color: rgba(245, 245, 245, 1);
  font-size: clamp(18px, 2.1vw, 38px);
  font-weight: 700;
  letter-spacing: -4px;
  line-height: 1;
  padding: 0 clamp(16px, 2vw, 28px);
}

.payment-btn.disabled,
.payment-btn:disabled {
  background: rgba(155, 144, 89, 1);
  color: rgba(220, 220, 220, 1);
  cursor: not-allowed;
}

.form-check-input {
  background-color: transparent !important;
  border: 1px solid rgba(214, 199, 173, 1) !important;
}
.form-check-input:checked {
  background-color:rgba(214, 199, 173, 1) !important;
  border-color: rgba(214, 199, 173, 1) !important;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("../mensualidades/images/newDesign/check-solid.png") !important;
}

/* TABLET */
@media (max-width: 991.98px) {
  .payment-strip,
  .payment-strip.with-capital {
    grid-template-columns: 1fr 1fr;
  }

  .payment-item-label {
    grid-column: 1 / -1;
  }
}

/* MÓVIL */
@media (max-width: 575.98px) {
  .payment-strip,
  .payment-strip.with-capital {
    grid-template-columns: 1fr;
  }

  .payment-item-label {
    grid-column: auto;
  }

  .payment-amount-box,
  .payment-select-box,
  .payment-btn {
    min-height: 56px;
  }

  .payment-amount-input,
  .payment-amount-currency,
  .payment-select {
    font-size: 20px;
  }

  .payment-payfor-text {
    font-size: 18px;
  }

  .payment-btn {
    font-size: 24px;
  }
}
#tbl_pagos th {
  text-align: center;
  font-size: clamp(10px, 1.5rem, 25px);
  font-weight: 500;
  line-height: 100%;
  color: rgba(242, 238, 227, 1);
}

#tbl_paquetes th {
  font-weight: 500;
  text-align: center;
  line-height: normal;
  border-radius: 0.5rem;
  font-size: clamp(10px, 1.3rem, 20px);
  background-color: rgba(242, 238, 227, 1);
}
#tbl_paquetes td {
  border: none;
  font-weight: 200;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-size: clamp(10px, 1.2rem, 20px);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
#home .etq_busq {
  font-size: clamp(20px, 2rem, 45px);
  font-weight: 200;
  line-height: normal;
  color: rgba(255, 255, 255, 1);
  font-family: mauren;
}

#home
#tbl_pagos_siguientes th,
#tbl_historico_tipo_cambio th {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: normal;
}

.tituloAviso {
  font-weight: 400;
  font-size: 1.35rem;
  color: #aea16e;
}
#referencia {
  line-height: 1.25;
}

#tbl_pagos tbody td {
  white-space: nowrap;
  padding: 0.12rem 0.12rem !important;
  font-size: clamp(10px, 1.2rem, 20px);
  color: rgba(255, 255, 255, 1);
}
#tbl_pagos thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgb(45,46,35);
}
.table-responsive.tbl_pagos {
  display: block;
  max-height: 30rem;
  overflow-y: auto;
  width: 100%;
  text-align: center;
}

#tbl_pagos_siguientes tbody td,
#tbl_historico_tipo_cambio tbody td {
  white-space: nowrap;
  padding: 0.12rem 0.12rem !important;
  font-size: small;
}
#tbl_pagos_siguientes thead tr,
#tbl_historico_tipo_cambio thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
.table-responsive.tbl_pagos_siguientes, .table-responsive.tbl_historico_tipo_cambio{
  display: block;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  text-align: center;
}

.pvencido > * {
  color: red !important;
  font-weight: bold;
}

.footer-basico {
  background-color: #2D2F22;
  color: #F2E9CE;
  padding: 8px 50px;
  width: 100%;
  display: flex;
  justify-content: space-between; /* Distribuye el espacio entre los elementos */
  align-items: center; /* Alinea verticalmente al centro */
  
}
footer a {
  color: #F2E9CE; /* Color naranja (cámbialo al que prefieras) */
  text-decoration: none; /* Quita el subrayado (opcional) */
}

/* Cambiar color al pasar el mouse (hover) */
footer a:hover {
  color: #657332; /* Rojo oscuro (opcional) */
  text-decoration: underline; /* Subrayado al pasar el mouse (opcional) */
}

#divbannerspc {
  padding: 10px 75px;
}

#divbannerspc a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  bottom: 0px;
}

#carouselbanners a {
  position: absolute;
  width: 100%;
  height: 30px;
  z-index: 10;
  top: 150px;
}

#carouselbannersmovil a {
  position: absolute;
  width: 100%;
  height: 30px;
  z-index: 10;
  bottom: 10%;
}

.sombra3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.titulosHome {
  font-family: Arial;
  font-weight: 100;
  /* font-size: 25px; */
  color: #ffffff;
}

.tituloprincHome {
  font-weight: 400;
}

#modal3D .modal-header {
  position: relative;
}
#modal3D .modal-header .btn-close {
  position: absolute;
  top: 40px;
  right: 20px;
}
#modal3D .modal-title {
  width: 100%;
}
#modal3D .modal-title span {
  color: #00ffff;
  font-weight: bold;
  font-size: 3rem;
}
#modal3D .modal-content {
  background-color: #00263a;
  border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
}

@media (min-width: 2100px) {
  #home .tituloprinc {
    padding-bottom: 6vh;
  }
}
@media (min-width: 1550px) {
  #home .tituloprinc {
    margin-left: clamp(10px, 9vw, 150px);
  }
}
@media (min-width: 1100px) {
  #home .tituloprinc {
    margin-left: clamp(10px, 4vw, 47px);
  }
}

@media (max-width: 1024px) {
  #home {
    padding-bottom: 130px;
  }

  #divbannerspc {
    padding: 10px 45px;
  }
}

@media (max-width: 768px) {
  #home {
    padding-bottom: 165px;
  }
  #home .etq_busq,
  #home .rst_busq {
    text-align: left;
  }

  #divbannerspc {
    padding: 10px 0px;
  }
}

/* Estilos para el footer */
.footerNewDesign {
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 1) !important;
  position: relative;
}

.footerTopRow {
  row-gap: clamp(12px, 2vw, 24px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

.footerText {
  color: rgba(45, 47, 34, 1);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 25px);
  line-height: 1.2;
  margin: 0;
}

.footerPhoneWrapper {
  display: block;
  margin-top: clamp(2px, 1vw, 4px);
}

.footerPhone {
  text-decoration: none;
  color: rgba(45, 47, 34, 1);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 20px);
}

.footerLogo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* tamaños individuales */
.footerLogoPrincipal {
  max-height: clamp(38px, 5vw, 62px);
}

.footerLogoBanco {
  max-width: clamp(110px, 14vw, 180px);
}

.footerLogoSecure {
  max-width: clamp(110px, 14vw, 180px);
}

.footerDireccion {
  color: rgba(87, 87, 86, 1);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.4;
  padding: 0 clamp(8px, 2vw, 20px);
}

.footerDireccion a {
  color: rgba(87, 87, 86, 1);
  text-decoration: underline;
}

/* móvil */
@media (max-width: 767.98px) {
  .footerNewDesign {
    /* padding: 20px 0; */
  }
  .footerTopRow > div {
    margin-bottom: 12px;
  }
  .footerText {
    text-align: center;
  }
  .footerLogoPrincipal,
  .footerLogoBanco,
  .footerLogoSecure {
    max-width: 145px;
    max-height: none;
  }
  .footerDireccion {
    margin-top: 10px;
  }
}
/* =========================================================
  HERO LIMPIO - PAGOS DE MENSUALIDADES
  Versión única y consolidada
========================================================= */

#home.fbusq {
  background-color: rgb(45, 48, 33);
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding-top: 0;
  padding-bottom: 0;
}

/* =========================
  WRAPPER GENERAL
========================= */
.heroHomeWrap {
  position: relative;
  overflow: hidden;
  background-color: rgb(45, 48, 33);
  padding-top: clamp(16px, 3vw, 40px);
  padding-bottom: 0;
}

.heroHomeWrap::before {
  content: none;
}

.heroHomeContainer {
  position: relative;
  z-index: 3;
  padding-top: 0;
  padding-bottom: clamp(70px, 7vw, 120px);
}

#headerprinc.heroHomeGrid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  grid-template-areas:
    "title logo"
    "form image";
  column-gap: clamp(36px, 6vw, 120px);
  row-gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin: 0;
}

/* =========================
  ELEMENTOS DECORATIVOS
========================= */
.heroMobileBg {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroMobileBg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.heroLotoDecor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  left: 12%;
  /* left: clamp(0px, 1vw, 20px); */
  bottom: clamp(-48px, 1vw, 0px);
  width: clamp(320px, 34vw, 560px);
  height: clamp(220px, 24vw, 30%);
  /* height: clamp(220px, 24vw, 360px); */
}

.heroLotoDecor img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 1;
}

/* =========================
  ÁREAS DEL GRID
========================= */
#headerTitulo {
  grid-area: title;
  margin: 0;
  padding-top: clamp(26px, 7vw, 90px);
}

#headerLogo {
  grid-area: logo;
  width: 100%;
  margin: 0;
}

.heroFormBlock {
  grid-area: form;
  width: 100%;
  max-width: 640px;
}

.heroImageBlock {
  grid-area: image;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* =========================
  LOGO
========================= */
#navbarprinc {
  background: transparent !important;
}

#navLogo {
  justify-content: flex-end !important;
  padding: 0;
}

.heroLogoImg {
  width: clamp(220px, 28vw, 370px);
  max-width: 100%;
  height: auto !important;
  display: block;
}

/* =========================
  TÍTULO
========================= */
#home .tituloprinc {
  margin: 0;
  font-weight: 400;
  font-family: mauren;
  color: rgba(214, 199, 173, 1) !important;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.1;
}

/* =========================
  FORMULARIO
========================= */
.bloque-busqueda-ref {
  max-height: none;
}

#form_buscar {
  width: 100%;
}

.zona-ref {
  width: 100%;
  max-width: none;
  margin-bottom: 0 !important;
}

.campo-ref-wrapper {
  width: 100%;
  margin-bottom: 0;
}

.campo-select-custom {
  margin: 0;
}

.campo-nombre-row {
  align-items: flex-start;
  gap: 12px;
}

.btn-info-ref {
  height: fit-content;
  margin-top: 6px;
  flex: 0 0 auto;
}

/* =========================
  LABELS / INPUTS
========================= */
.label-ref {
  display: block;
  color: rgba(242, 238, 227, 1);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.2;
}

.input-ref,
.campo-select-custom select {
  font-size: clamp(18px, 1.5vw, 28px);
}

/* =========================
  BOTÓN BUSCAR
========================= */
.contenedor-boton-ref {
  max-width: none;
  margin-top: clamp(28px, 4vw, 42px) !important;
}

.btn-buscar-ref {
  background-color: #2f7d32;
  color: #ffffff;
  border: none;
  width: 100%;
  min-height: 56px;
  height: auto;
  border-radius: 8px;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: none;
  padding: 12px 18px;
}

.btn-buscar-ref:hover,
.btn-buscar-ref:focus,
.btn-buscar-ref:active {
  background-color: #276a2a;
  color: #ffffff;
  box-shadow: none;
  border: none;
}

/* =========================
  BOTÓN CAMBIO DE BÚSQUEDA
========================= */
#ZonaDinamicaBoton {
  margin-top: clamp(20px, 3vw, 34px) !important;
}

.btnChangeTypeSearch {
  background-color: rgba(242, 238, 227, 1);
  border: none;
  color: rgba(45, 47, 34, 1);
  --bs-btn-border-radius: 0;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
  white-space: normal;
  text-align: center;
}

.btnChangeTypeSearch:hover {
  background-color: rgb(201, 200, 199);
  border: none;
  color: rgba(45, 47, 34, 1);
}

/* =========================
  TARJETA DEL ÁRBOL
========================= */
.contenedor-imagen-ref {
  width: 100%;
  max-width: 360px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}

.imagen-ref {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* =========================================================
  MÓVIL
========================================================= */

@media (max-width: 767.98px) {
  .heroHomeWrap {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgb(45, 48, 33);
    overflow: hidden;
  }

  /* El árbol solo vive en la parte alta */
  .heroMobileBg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(900px, 106vh, 1036px);
    z-index: 0;
  }

  .heroMobileBg img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center top;
  }

  /* Oscurecimiento solo sobre la franja del árbol */
  .heroHomeWrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(900px, 106vh, 1036px);
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(20, 24, 18, 0.6) 0%,
      rgba(20, 24, 18, 0.09) 26%,
      rgba(28, 33, 22, 0.10) 56%,
      rgba(45, 48, 33, 0.7) 100%
    );
  }

  .heroHomeContainer {
    position: relative;
    z-index: 3;
    padding-top: 10px;
    padding-bottom: 145px;
    min-height: auto;
  }

  /* Aquí está el cambio importante:
     logo arriba, una fila vacía, luego título, luego form */
  #headerprinc.heroHomeGrid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "."
      "title"
      "form";
    grid-template-rows: auto minmax(45rem, 1fr) auto auto;
    min-height: clamp(560px, 84vh, 700px);
    row-gap: 18px;
    align-items: start;
  }

  #headerLogo,
  #headerTitulo,
  .heroFormBlock {
    width: 100%;
    max-width: 345px;
    justify-self: center;
  }

  #navLogo {
    justify-content: center !important;
  }

  .heroLogoImg {
    width: min(100%, 245px);
    max-width: 245px;
  }

  /* Ya no lo bajes con padding artificial */
  #headerTitulo {
    padding-top: 0;
    text-align: center;
    align-self: end;
  }

  #home .tituloprinc {
    font-size: clamp(18px, 8vw, 30px);
    line-height: 1.15;
    text-align: center;
    margin: 0;
  }

  .heroFormBlock {
    max-width: 345px;
    margin-top: 8px;
  }

  .label-ref {
    text-align: center;
    font-size: clamp(18px, 5.3vw, 24px);
  }

  .input-ref,
  .campo-select-custom select {
    font-size: 18px;
    padding-top: 10px;
  }

  .campo-nombre-row {
    gap: 8px;
  }

  .btn-info-ref {
    margin-top: 2px;
  }

  .contenedor-boton-ref {
    margin-top: 24px !important;
  }

  .btn-buscar-ref {
    min-height: 54px;
    font-size: 18px;
    padding: 10px 16px;
    border-radius: 6px;
  }

  #ZonaDinamicaBoton {
    margin-top: 18px !important;
  }

  .btnChangeTypeSearch {
    font-size: 16px;
    padding: 10px 16px;
  }

  .heroImageBlock,
  .contenedor-imagen-ref {
    display: none !important;
  }

  .heroLotoDecor {
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
    width: 240px;
    height: 150px;
    z-index: 2;
  }

  #NoRef .row > [class*="col-"] {
    width: 100%;
  }
}

/* =========================================================
  MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 480px) {
  .heroMobileBg,
  .heroHomeWrap::before {
    height: clamp(900px, 106vh, 1036px);
  }

  #headerprinc.heroHomeGrid {
    min-height: clamp(520px, 78vh, 640px);
  }

  .heroLogoImg {
    max-width: 220px;
  }

  .heroLotoDecor {
    width: 210px;
    height: 135px;
  }
}