@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

 :root {
    --footer-logo-space: 140px;
}

body {
    padding-bottom: var(--footer-logo-space);
}
@media (max-width: 768px) {
    body {
        padding-bottom: 160px;
    }
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    background-image: url("img/fondo.jpg");
    background-size: cover;          /* CLAVE */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;    /* opcional */
    font-family: 'Ubuntu', sans-serif;
    padding-bottom: 120px; /* un poco más alto que el logo */
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

.footer-logo{
  width: 100%;
  height: 300px;
  background-image: url("img/logo-footer.png");
  background-repeat: no-repeat;

}

.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight:400 ;
  color: #333 !important;
  }
.border-bottom {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.border{
  border-radius: 40px;
}
.form-control{
  border-radius: 17px;
  background: #F7D7E9;
}
.form-control2 {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.text-danger2 {
    --bs-text-opacity: 1;
  color: #ff002a !important;
}
/* Inputs rosados */
.custom-input {
    background-color: #F7D7E9;
    border: none;
    border-radius: 30px;
    padding: 14px 22px;
    color: #004e78;
    font-size: 16px;
}

.custom-input::placeholder {
    color: #bfa3b3;
}

/* Select negro con flecha roja */
.custom-select2 {
  background: #F7D7E9;
      color: #004e78;

    border-radius: 30px;
    padding: 14px 22px;
    border: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #ff002a 50%),
        linear-gradient(135deg, #ff002a 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% + 4px),
        calc(100% - 14px) calc(50% + 4px);
    background-size: 10px 10px;
    background-repeat: no-repeat;
}

.custom-select option {
    background-color: #F7D7E9;
    color: #004e78;
}

/* Label rojo */
.text-danger2 {
    color: #ff002a !important;
}

.rounded-5 {
    background-color: #F7D7E9;
}


.modal-content2 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: #fff !important;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

/* Desktop: flotante */
.footer-logo-fixed {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
}

.footer-logo-fixed img {
    width: 100px;
}

/* Mobile: normal */
.footer-logo-mobile img {
    width: 80px;
}
@media (max-width: 768px) {
    .footer-logo-fixed {
        bottom: 80px; /* sube el logo */
        opacity: 0.6;
        pointer-events: none; /* no estorba taps */
    }
}
.bi {
    background-image: url("img/epilienzos.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 242px;
    height: 52px;
    display: inline-block;
}