@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;700&display=swap");

/*   _________________
    |                 |  
    | LISTA DE CLASES |
    |_________________|

    Input               -> .AInput
    Select              -> .ASelect
    Button              -> .ABtn
    Label               -> .ALabel
    Hr                  -> .AHr

    Subtítulos          -> .ASub
    Caption             -> .ACaption
    Numero Sección      -> .ANumSection | <div class="ANumSection"><h3>1</h3></div>
*/

/* PALETA DE COLORES */
:root {
  /* Principales */
  --AAqua: #00a88f;
  --ABordo: #822d5e;
  --AAzul: #24378f;

  /* Secundarios */
  --ACoral: #ef6c64;
  --AAmarillo: #ffc678;
  --AGrayMedium: #b3b3b3;

  /* Variantes Light */
  --AAquaLight: #77cdc0;
  --ABordoLight: #d4a0be;
  --AAzulLight: #a2b0e2;
  --ACoralLight: #f5aca8;
  --ABlanco: #fff;
  --AGrayLight: #ececec;

  /* Texto */
  --ADarkBlue: #263057;
  --ADarkGray: #737373;

  /* Gradientes */
  --AGFrio: linear-gradient(90deg, #00a88f 0%, #24378f 99.84%);
  --AGCalido: linear-gradient(90deg, #24378f 0%, #ef6c64 99.84%);
}
h1,
h2,
h3, h4, h5 {
    color: var(--ADarkBlue);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}
h4 {
    font-size: 1rem;
}
h5 {
    font-size: 0.8rem;
}

.ASub,
.ABtn {
  font-size: 1.125rem;
}

.ACaption {
  font-size: 0.875rem;
}

body,
.ACaption,
.ALabel,
.AInput,
.ASelect {
  font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
.ASub,
.ABtn,
.ANumSection {
  font-family: "Raleway", sans-serif;
}

.AInput,
.AInput:focus,
.AInput:focus-visible,
.AInput:active,
.ASelect {
  background: var(--ABlanco);
  border: 1px solid var(--AAzul);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.875rem;
  color: var(--ADarkBlue);
}

    .AInput:focus-visible {
        outline-color: var(--AAzul);
    }

        .ALabel {
            display: flex;
            align-items: center;
            padding-left: 10px;
            color: var(--ADarkBlue);
            font-size: 1rem;
            line-height: 19px;
        }

.ASelect {
    font-size: 1rem;
}

.ABtn {
  padding-left: 30px;
  padding-right: 30px;
  height: 44px;
  background-color: var(--AAzul);
  border: 0px;
  border-radius: 24px;
  color:#fff;
  font-weight:700;
}
.ABtnAlternativo {
    padding-left: 30px;
    padding-right: 30px;
    height: 44px;
    background-color: var(--AAzul);
    border: 3px solid var(--AAzul);
    color: #fff;
    font-weight: 700;
}
    .ABtnAlternativo:hover {
        padding-left: 30px;
        padding-right: 30px;
        height: 44px;
        background-color: #fff;
        border: 3px solid var(--AAzul);
        color: var(--AAzul);
        font-weight: 700;
        text-decoration: none;
    }
.ABtnAlternativo-rounded-circle {
    background-color: var(--AAzul);
    border: 1px solid var(--AAzul);
    color: #fff;
    font-weight: 700;
}

    .ABtnAlternativo-rounded-circle:hover {

        background-color: #fff;
        border: 1px solid var(--AAzul);
        color: var(--AAzul);
        font-weight: 700;
    }

.ABtn:hover {
    color: #fff!important; 
}
    
.ABtn:focus {
    border: 0px!important;
    box-shadow: none!important;
}

.ABtnOutlined {
    padding-left: 30px;
    padding-right: 30px;
    height: 44px;
    border: 2px solid var(--AAzul);
    border-radius: 24px;
    color: var(--AAzul);
    font-weight: 700;
}

.ABtnOutlined:hover {
    color: var(--AAzul) !important;
    box-shadow: 0px 0px 8px rgba(36, 55, 143, 0.6);
    border-radius: 23px;
}
.ABtnOutlined[disabled] {
    box-shadow: none;
}

.ABtnOutlined:focus {
    border: 0px !important;
    box-shadow: none !important;
}

.ANumSection {
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--AAzulLight);
  border-radius: 100%;
  color: var(--ADarkBlue);
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ANumSection h3 {
  margin-bottom: 0px;
}

.AInput {
    padding-left: 23px;
    padding-right: 23px;
    height: 44px;
}

    .AInputError, 
    .AInput.AInputError:focus,
    .AInput.AInputError:focus-visible,
    .AInput.AInputError:active {
        border: 1px solid var(--ACoral);
    }

    .AInput.AInputError:focus-visible {
        outline-color: var(--ACoral);
    }

    .AInput:disabled {
        background-color: #E5E5E5;
    }
.AHr {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left:0px;
    border: 1px solid #B3B3B3;
}

/* MARGIN */
/* BOTTOM */
.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb18 {
    margin-bottom: 18px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb24 {
  margin-bottom: 24px;
}

.mb32 {
  margin-bottom: 32px;
}

/* Max-Width Container*/
.AMW {
    max-width: 80% !important;
}

/* DESKTOP */
@media only screen and (max-width: 1120px) {
    .AMW {
        max-width: 90% !important;
    }
}

/* MOBILE */
/* typical tablet screen resolution */
@media only screen and (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  .ASub,
  button {
    font-size: 1rem;
  }

  .ACaption {
    font-size: 0.75rem;
  }

  body {
    font-size: 0.875rem;
  }

  body,
  .ACaption {
    font-family: "Roboto", sans-serif;
  }

  h1,
  h2,
  h3,
  .ASub,
  button {
    font-family: "Raleway", sans-serif;
  }
}