@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

body,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ol,
ul {
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

body * {
   box-sizing: border-box;
}

article,
aside,
footer,
header,
nav,
section {
   display: block;
}

h1 {
   font-size: 2em;
}

figcaption,
figure,
main {
   display: block;
}

figure,
p {
   margin: 0;
}

hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
}

a {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
   outline-width: 0;
}

abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   text-decoration: underline dotted;
}

abbr[title],
dfn[title] {
   cursor: help;
}

b,
strong {
   font-weight: inherit;
   font-weight: bolder;
}

code,
pre,
kbd,
samp {
   font-family: monospace, monospace;
   font-size: 1em;
}

dfn {
   font-style: italic;
}

mark {
   background-color: #ff0;
   color: #000;
}

small {
   font-size: 80%;
}

sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sub {
   bottom: -0.25em;
}

sup {
   top: -0.5em;
}

blockquote {
   margin: 0;
}

audio,
video {
   display: inline-block;
   vertical-align: baseline;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

img {
   border-style: none;
   vertical-align: bottom;
   max-width: 100%;
   height: auto;
}

svg:not(:root) {
   overflow: hidden;
}

input {
   line-height: normal;
}

button,
input,
optgroup,
select,
textarea {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
}

button,
input {
   overflow: visible;
}

button,
select {
   text-transform: none;
}

button {
   background-color: transparent;
}

optgroup {
   font-weight: bold;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
   height: auto;
}

fieldset {
   margin: 0 2px;
   padding: 0.35em 0.75em 0.625em;
}

legend {
   box-sizing: border-box;
   color: inherit;
   display: table;
   max-width: 100%;
   padding: 0;
   white-space: normal;
   border: 0;
}

progress {
   display: inline-block;
   vertical-align: baseline;
}

textarea {
   overflow: auto;
}

[type="checkbox"],
[type="radio"] {
   box-sizing: border-box;
   padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
   height: auto;
}

[type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
}

::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

td,
th {
   padding: 0;
}

details,
menu {
   display: block;
}

summary {
   display: list-item;
}

canvas {
   display: inline-block;
}

template {
   display: none;
}

[hidden] {
   display: none;
}

.o-canvas {
   width: 90%;
   max-width: 1200px;
   max-width: 75rem;
   margin-left: auto;
   margin-right: auto;
}

.o-canvas__w100 {
   width: 100%;
}

html {
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
}

.o-layout:not(.o-layout_aside) .o-layout__main {
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

@media only screen and (min-width: 1024px) {
   .o-layout_aside {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-areas: "main-content sidebar";
      justify-content: space-between;
      grid-template-columns: minmax(400px, 75%) minmax(230px, 28%);
   }

   .o-layout__main {
      grid-area: main-content;
   }

   .o-layout__sidebar {
      grid-area: sidebar;
      margin-top: 32px;
   }

   .o-layout_aside {
      grid-column-gap: 64px;
   }
}

.o-section {
   margin-top: 136px;
   margin-bottom: 120px;
}

.o-bg {
   padding-top: 56px;
   padding-bottom: 56px;
}

.o-bg_gray {
   background-color: #F8F8F8;
}

.o-bg_primary {
   background-color: #FF7A00;
}

.o-bg_secondary {
   background-color: #0076BA;
}

/*------------------------------------*\
  Media querys
\*------------------------------------*/
@media only screen and (min-width: 768px) {
   .o-bg {
      padding-top: 56px;
      padding-bottom: 64px;
   }

   .o-bg.o-bg_pb56 {
      padding-bottom: 56px;
      padding-bottom: 3.5rem;
   }
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Montserrat", sans-serif;
   font-weight: 600;
}
/**
* Class: theme | <html>
* @description  font-size base para el HTML
*  ♣ Propiedades: 16px/100%
* @atom Base: HTML
* @section 03. Estilos textos
* @markup
*  <html class="theme">
*     <p>@{lipsum:quantity:type}</p>
*  </html>
*/
html,
.theme {
   color: #757983;
   font-size: 100%;
}

/**
* Class: o-text | <body>
* @description  estilos de texto generales para el body
*  ♣ Propiedades:  16px | 1.8 | Montserrat | Medium
* @atom Body copy
* @section 03. Estilos textos
* @markup
*  <p class="o-text">@{lipsum:1:paragraphs}</p> 
*/
body,
.o-text {
   line-height: 1.8;
   color: #757983;
   font-family: "Montserrat", sans-serif;
   font-weight: 400;
   font-size: 16px;
   font-size: 1rem;
}

/**
* Class: .o-italic | <em> | <i>
* @description  define estilo italica para el texto.
*  ♣ Propiedades: italic
* @atom Texto cursiva
* @section 03. Estilos textos
* @markup
*  <p class="o-text">
*   Ad ea velit nisi aliquip <span class="o-italic">nostrud laboris laborum</span> aliquip laborum.
*  </p>
*  <p class="o-text">
*   Ad ea velit <em>nisi aliquip nostrud laboris</em> laborum aliquip laborum.
*  </p>
*/
i,
em,
.o-italic {
   font-style: italic;
   font-family: "Montserrat", sans-serif;
}

/**
* Class: Tag HTML | <u>
* @description  Representa texto que no está articulado y tiene un estilo diferente al texto normal, como palabras mal escritas o nombres propios.
*  ♣ Propiedades: underline-position under
* @atom Texto subrayado
* @section 03. Estilos textos
* @markup
*  <p class="o-text">
*   Ad ea velit nisi aliquip <u>nostrud laboris laborum</u> aliquip laborum.
*  </p>
*/
u,
.o-underline {
   text-underline-position: under;
}

/**
* Class: .o-bold | <strong>, <b>
* @description  define estilo negrilla para el texto.
*  ♣ Propiedades: 700
* @atom Texto negrilla
* @section 03. Estilos textos
* @markup
*  <p class="o-text">
*   Ad ea velit nisi <span class="o-bold">aliquip nostrud laboris</span> laborum aliquip laborum.
*  </p>
*  <p class="o-text">
*   <strong>Ad ea velit nisi aliquip nostrud laboris laborum aliquip laborum</strong>
*  </p>
*/
b,
strong,
.o-bold {
   font-weight: 700;
}

/**
* Class: .o-mark | <mark>
* @description  define estilo destacado para el texto.
* @atom Texto resaltado
* @section 03. Estilos textos
* @markup
*  <p class="o-text">
*   Ad ea velit nisi <mark>aliquip nostrud </mark> laboris laborum aliquip laborum.
*  </p>
*  <p class="o-text">
*   <strong class="o-mark">Ad ea velit</strong> nisi aliquip nostrud laboris laborum aliquip laborum
*  </p>
*/
mark,
.o-mark {
   color: #FF7A00;
   background-color: transparent;
}

/**
* Class: .o-wink-line
* @description  clase para agregar guiño horizontal al lado derecho a un grupo de elemntos.
* @atom Guiños
* @section 03. Estilos textos
* @markup
* <p class="o-wink-line">
*  @{lipsum:1:paragraphs}
* </p>
*/
.o-wink-line {
   position: relative;
   padding-left: 12px;
}

.o-wink-line:before {
   content: "";
   position: absolute;
   display: block;
   bottom: 0;
   right: 0;
   width: 184px;
   height: 6px;
   background-color: #FF7A00;
}

.o-copyrights {
   display: block;
   margin-right: 8px;
   text-align: right;
   font-size: 14px;
   font-size: 0.875rem;
}

.o-copyrights_margin {
   margin: 0 -4%;
}

/*------------------------------------*\
  Media querys
\*------------------------------------*/
@media only screen and (min-width: 768px) {
   .o-copyrights_margin {
      margin: 0 8px 0 0;
   }
}

@media only screen and (min-width: 1024px) {

   .o-mark,
   mark {
      white-space: wrap;
   }
}

.o-list {
   margin-left: 16px;
}

.o-list li {
   margin-bottom: 4px;
}

*:focus {
   outline: 0;
}

button {
   padding: 0;
   line-height: inherit;
   font-family: "Montserrat", sans-serif;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   outline: none;
   outline-width: 0;
   border: none;
   cursor: pointer;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition: all 0.6s;
}

button:focus {
   outline-width: 0;
}

button:disabled {
   cursor: default;
}

/**
 * Class: o-btn
 * @modifiers
 *  .o-btn_secondary Botón para acciones secundarias 
 *  .o-btn_outline Botón para acciones secundarias 
 * @description  Botón acciones primarias y secundarias
 * ♣ Estados: hover, focus
 * @atom Botón
 * @section 05. Botones
 * @markup
 *   <div class="sg-modifires">
 *      <button class="o-btn" type="button">
 *        Texto botón
 *      </button>
 *   </div>
 *   <div class="sg-modifires">
 *      <button class="o-btn o-btn_secondary" type="button">
 *        Texto botón
 *      </button>
 *   </div>
 *   <div class="sg-modifires">
 *      <button class="o-btn i-chat" type="button">
 *        Texto botón
 *      </button>
 *   </div>
 *   <div class="sg-modifires">
 *      <button class="o-btn o-btn_outline" type="button">
 *        Texto botón
 *      </button>
 *   </div>
 */
.o-btn {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
   border: 1px solid #FF7A00;
   border-radius: 4px;
   padding: 14px 16px;
   padding: 0.875rem 1rem;
   font-size: 12px;
   font-size: 0.75rem;
   font-weight: 600;
   font-family: "Montserrat", sans-serif;
   text-transform: uppercase;
   text-align: center;
   text-decoration: none;
   line-height: 1;
   color: #fff;
   background-color: #FF7A00;
   transition: all 0.4s;
}

.o-btn:after {
   padding-left: 8px;
   font-size: 14px;
   font-size: 0.875rem;
   transform: translateX(0);
   transition: all 0.2s;
}

.o-btn:hover {
   border-color: #E66B00;
   text-decoration: none;
   background-color: #E66B00;
}

.o-btn:focus,
.o-btn:active {
   border-color: #D96400;
   background-color: #D96400;
}

.o-btn:hover:after,
.o-btn:focus:after,
.o-btn:active:after {
   transform: translateX(4px);
}

.o-btn:disabled {
   border-color: #F9A249;
   background-color: #F9A249;
   cursor: not-allowed;
}

.o-btn_lg {
   width: 100%;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   justify-content: space-between;
}

.o-btn_secondary {
   color: #fff;
   border-color: #9CA1AE;
   background-color: #9CA1AE;
}

.o-btn_secondary:hover {
   border-color: #727A95;
   background-color: #727A95;
}

.o-btn_secondary:focus,
.o-btn_secondary:active {
   border-color: #4E587D;
   background-color: #4E587D;
}

.o-btn_secondary:disabled {
   color: #fff;
   border-color: #ECF0F6;
   background-color: #ECF0F6;
}

.o-btn_outline {
   color: #FF7A00;
   background-color: transparent;
}

.o-btn_outline:hover {
   border-color: #E66B00;
   text-decoration: none;
   color: #E66B00;
   background-color: #FDEEDE;
}

.o-btn_outline:focus,
.o-btn_outline:active {
   border-color: #D96400;
   text-decoration: none;
   color: #D96400;
   background-color: inherit;
}

.o-btn_outline:disabled {
   border-color: #F9A249;
   color: #F9A249;
   background-color: inherit;
   cursor: not-allowed;
}

.o-btn_full {
   width: 100%;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   justify-content: space-between;
}

.o-btn-rounder {
   position: absolute;
   top: 0;
   right: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
   width: 28px;
   width: 1.75rem;
   height: 28px;
   height: 1.75rem;
   margin-top: 40px;
   margin-top: 2.5rem;
   margin-right: 40px;
   margin-right: 2.5rem;
   border-radius: 50%;
   font-size: 12px;
   font-size: 0.75rem;
   color: #FF7A00;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease-in;
   z-index: 5;
}

.o-btn-rounder:hover {
   transform: scale(0.9);
}

.o-btn-rounder::before {
   transition: all 0.2s ease-in-out;
}

.is-show .o-btn-rounder::before {
   display: block;
   transform: rotate(45deg);
}

.o-btn-rounder_w40 {
   width: 40px;
   width: 2.5rem;
   height: 40px;
   height: 2.5rem;
}

@media only screen and (min-width: 768px) {
   .o-btn_lg {
      width: 386px;
      width: 24.125rem;
   }
}

a {
   text-decoration: none;
   color: inherit;
   outline-width: 0;
   cursor: pointer;
   transition: all 0.6s;
}

/**
 * Class: o-link
 * @modifiers
 *  .o-link_ico Enlace con icono 
 *  .o-link_primary Enlace de color primario 
 *  .o-link_dark Enlace de color oscuro
 *  .o-link_neutro Enlace de color blanco
 * @atom Link
 * @section 06.Enlaces
 * @markup
 *   <div class="sg-modifires">
 *      <a class="o-link" href="#">Texto enlace</a>
 *   </div>
 *   <div class="sg-modifires">
 *      <a class="o-link o-link_ico i-chat" href="#">Texto enlace</a>
 *   </div>
 *   <div class="sg-modifires">
 *      <a class="o-link o-link_primary" href="#">Texto enlace</a>
 *   </div>
 *   <div class="sg-modifires">
 *      <a class="o-link o-link_dark" href="#">Texto enlace</a>
 *   </div>
 *   <div class="sg-modifires">
 *      <a class="o-link o-link_neutro" href="#">Texto enlace</a>
 *   </div>
 */
.o-link {
   position: relative;
   padding: 0;
   color: #0076BA;
   text-decoration: underline;
   text-underline-position: under;
   font-weight: 500;
   line-height: calc(30/16);
   font-size: 16px;
   font-size: 1rem;
}

.o-link:hover,
.o-link:focus,
.o-link:active {
   color: #004C72;
}

.o-link:disabled {
   color: #189DDB;
   cursor: not-allowed;
}

.o-link_margin {
   margin-left: 5px;
   margin-left: 0.3125rem;
}

.o-link_ico {
   text-underline-position: initial;
}

.o-link_ico::after {
   display: inline-block;
   margin-left: 8px;
   margin-left: 0.5rem;
   font-size: 6px;
   font-size: 0.375rem;
   transform: translateX(0);
   transition: all 0.2s;
}

.o-link_ico:hover:after,
.o-link_ico:focus:after,
.o-link_ico:active:after {
   transform: translateX(4px);
}

.o-link_primary {
   color: #FF7A00;
}

.o-link_primary:hover,
.o-link_primary:focus,
.o-link_primary:active {
   color: #D96400;
}

.o-link_dark {
   color: #2A2C31;
}

.o-link_dark:hover,
.o-link_dark:focus,
.o-link_dark:active {
   color: #080A17;
}

.o-link_neutro {
   color: #fff;
}

.o-link_neutro:hover,
.o-link_neutro:focus,
.o-link_neutro:active {
   color: #DDE2EA;
}

.o-layout-forms {
   position: relative;
   max-width: 1920px;
   max-width: 120rem;
   margin-left: auto;
   margin-right: auto;
}

.o-layout-forms__main {
   background-color: #F8F8F8;
   margin-top: 176px;
   margin-top: 11rem;
}

.o-layout-forms__content {
   width: 90%;
   margin: 0 auto;
}

.o-layout-forms__header {
   position: absolute;
   left: 0;
   top: -100px;
   padding: 60px 24px;
   padding: 3.75rem 1.5rem;
   background: linear-gradient(114.44deg, #FF7A00 0%, #FF8C22 100%);
   transition: all .4s ease-in;
}

.o-layout-forms__header_img {
   padding: 0;
   max-width: 347.18px;
   max-width: 21.69875rem;
   max-height: 231px;
   max-height: 14.4375rem;
   transition: all .4s ease-in;
}

.o-layout-forms__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media only screen and (min-width: 768px) {
   .o-layout-forms__header {
      padding: 62px;
      padding: 3.875rem;
      background: linear-gradient(114.44deg, #FF7A00 0%, #FF8C22 100%);
   }

   .o-layout-forms__header_img {
      padding: 0;
      max-width: 508px;
      max-width: 31.75rem;
      max-height: 338px;
      max-height: 21.125rem;
   }
}

@media only screen and (min-width: 1440px) {
   .o-layout-forms__header_img {
      max-width: 588px;
      max-width: 36.75rem;
      max-height: 391px;
      max-height: 24.4375rem;
   }
}

@media only screen and (min-width: 1600px) {
   .o-layout-forms__header {
      padding: 60px 120px;
      padding: 3.75rem 7.5rem;
      background: linear-gradient(114.44deg, #FF7A00 0%, #FF8C22 100%);
   }

   .o-layout-forms__header_img {
      padding: 0;
   }
}

.o-layout-form {
   position: relative;
}

.o-layout-form__img {
   object-fit: cover;
}

.o-layout-form__box .o-heading {
   margin-bottom: 16px;
   margin-bottom: 1rem;
}

.o-layout-form__main {
   background-color: #F8F8F8;
}

@media screen and (max-width: 991px) {

   .o-layout-form__box,
   .o-layout-form__content {
      width: 90%;
      max-width: 1200px;
      max-width: 75rem;
      margin-left: auto;
      margin-right: auto;
   }

   .o-layout-form__header {
      position: relative;
   }

   .o-layout-form__header::before {
      content: "";
      position: absolute;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      height: 80%;
      z-index: -1;
      background-color: #F8F8F8;
   }

   .o-layout-form__main {
      padding-top: 16px;
      padding-top: 1rem;
   }

   .o-layout-form__img {
      width: 95%;
      min-height: 230px;
      min-height: 14.375rem;
   }

   .o-layout-form__box {
      padding: 24px 0;
      padding: 1.5rem 0;
   }

   .o-layout-form__box .o-heading {
      font-size: 24px;
      font-size: 1.5rem;
   }
}

@media screen and (min-width: 992px) {
   .o-layout-form {
      padding-top: 80px;
      padding-top: 5rem;
   }

   .o-layout-form__header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      -moz-align-items: flex-end;
      align-items: flex-end;
   }

   .o-layout-form__main {
      width: 90%;
      max-width: 1200px;
      max-width: 75rem;
      margin-left: auto;
      margin-right: auto;
   }

   .o-layout-form__box {
      max-width: 700px;
      max-width: 43.75rem;
      margin-left: 56px;
      margin-left: 3.5rem;
      padding-right: 80px;
      padding-right: 5rem;
   }

   .o-layout-form__box .o-text {
      font-size: 24px;
      font-size: 1.5rem;
      color: #2A2C31;
   }

   /* .o-layout-form__main {
      padding-top: 400px;
      padding-top: 25rem;
   } */

   .o-layout-form__content {
      max-width: 846px;
      max-width: 52.875rem;
      width: 90%;
      margin: 0 auto;
   }

   .o-layout-form__img {
      width: 35%;
      max-width: 587px;
      max-width: 36.6875rem;
      min-height: 391px;
      min-height: 24.4375rem;
   }
}

/*------------------------------------*\
  Patterns Elements
    #Styles for Forms
\*------------------------------------*/
input,
select,
textarea {
   outline: none;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

fieldset {
   border: none;
   padding: 0;
   margin: 0;
}

.o-form {
   padding-bottom: 40px;
   padding-bottom: 2.5rem;
}

.o-form__wrap {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-direction: normal;
   -webkit-box-orient: vertical;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
}

.o-form-wrap-centered {
   text-align: center;
}

.o-form__set {
   margin-bottom: 32px;
   margin-bottom: 2rem;
}

.o-form__set_full {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
   -moz-box-flex: 1;
   -moz-flex: 1 1 100%;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
   width: 100%;
}

.o-form__set_centered {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
}

.o-form__set_relative {
   position: relative;
   text-align: center;
}

.o-form__caption {
   position: relative;
   margin-bottom: 40px;
   margin-bottom: 2.5rem;
}

.o-form__caption::before {
   content: "";
   position: absolute;
   top: -20px;
   top: -1.25rem;
   width: 108px;
   width: 6.75rem;
   height: 4px;
   height: 0.25rem;
   background-color: #FF7A00;
}

.o-form__label {
   display: block;
   margin: 8px 0;
   margin: 0.5rem 0;
   color: #1E212A;
}

.o-form__label_ico {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
}

.o-form__label_ico::before {
   color: #FF7A00;
}

.o-form__sup {
   top: -0.1em;
}

.o-form__field {
   display: block;
   margin: 8px 0;
   margin: 0.5rem 0;
}

.o-form__field input,
.o-form__field select,
.o-form__field textarea {
   width: 100%;
   transition: all 0.2s;
}

.o-form__field input:not([multiple]),
.o-form__field select:not([multiple]),
.o-form__field textarea:not([multiple]) {
   border-radius: 5px;
   border-radius: 0.3125rem;
   border: 1px solid #BEC3CE;
   padding: 16px;
   padding: 1rem;
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.2;
   color: #9CA1AE;
   background-color: transparent;
}

.is-error .o-form__field input:not([multiple]),
.is-error .o-form__field select:not([multiple]),
.is-error .o-form__field textarea:not([multiple]) {
   border: 1px solid #F25E5E;
}

.o-form__select {
   position: relative;
}

.o-form__select:before {
   position: absolute;
   top: 50%;
   right: 10px;
   right: 0.625rem;
   display: block;
   height: 10px;
   height: 0.625rem;
   margin-top: -5px;
   margin-top: -0.3125rem;
   padding-left: 10px;
   padding-left: 0.625rem;
   line-height: 10px;
   line-height: 0.625rem;
   font-size: 10px;
   font-size: 0.625rem;
   cursor: pointer;
   pointer-events: none;
   z-index: 2;
}

.o-form__select select {
   padding-right: 30px;
   padding-right: 1.875rem;
}

.o-form__option {
   position: relative;
   display: inline-block;
   margin-bottom: 8px;
   margin-bottom: 0.5rem;
   margin-top: 8px;
   margin-top: 0.5rem;
   cursor: pointer;
}

.o-form__option .o-form__label {
   margin-top: 0;
}

.o-form__option-list {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   list-style: none;
}

.o-form__option-item {
   position: relative;
   margin-top: 10px;
   margin-top: 0.625rem;
   cursor: pointer;
}

.o-form__option-item:not(:last-child) {
   margin-right: 24px;
   margin-right: 1.5rem;
}

.o-form__option-item:first-of-type {
   display: none;
}

.o-form__option-label {
   color: #1E212A;
}

.o-form__field_file {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-direction: normal;
   -webkit-box-orient: vertical;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
   min-height: 230px;
   min-height: 14.375rem;
   border: 2px dashed #BEC3CE;
   border-radius: 5px;
   border-radius: 0.3125rem;
   cursor: pointer;
}

.o-form__field_file input {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   cursor: pointer;
}

.o-form__field_file::before {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
   width: 56px;
   width: 3.5rem;
   height: 56px;
   height: 3.5rem;
   border-radius: 50%;
   color: #FF7A00;
   background: #fff;
}

.o-form__field_file::after {
   content: attr(data-text-select-file);
   max-width: 230px;
   text-align: center;
   font-size: 14px;
   margin-top: 16px;
}

.o-form__label-checkbox {
   position: relative;
}

.o-form__paragraph {
   margin-left: 36px;
   margin-left: 2.25rem;
}

input[name="privacy_policy"] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 57%;
   margin: 0;
   padding: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 1;
}

input[name="privacy_policy"]+label {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
}

input[name="privacy_policy"]+label:before {
   content: "";
   cursor: pointer;
   display: block;
   min-width: 16px;
   min-width: 1rem;
   max-width: 16px;
   max-width: 1rem;
   height: 16px;
   height: 1rem;
   margin-right: 16px;
   margin-right: 1rem;
   border: 1px solid #9CA1AE;
   line-height: 18px;
   line-height: 1.125rem;
   font-size: 12px;
   font-size: 0.75rem;
   border-radius: 4px;
   border-radius: 0.25rem;
   text-align: center;
   pointer-events: none;
   transition: all 0.2s ease;
}

input[name="privacy_policy"]+label::after {
   content: "";
   font-family: ico-juan-rueda;
   position: absolute;
   left: 4px;
   left: 0.25rem;
   min-width: 10px;
   min-width: 0.625rem;
   max-width: 10px;
   max-width: 0.625rem;
   height: 10px;
   height: 0.625rem;
   font-size: 10px;
   font-size: 0.625rem;
   color: transparent;
   border-radius: 50%;
   background-color: transparent;
   transform: translateY(-41%);
   transition: all 0.2s ease;
}

input[name="privacy_policy"]:checked+label:before {
   border-color: #0076BA;
   background-color: #0076BA;
}

input[name="privacy_policy"]:checked+label::after {
   color: #fff;
}

.o-form__option-input[type="checkbox"],
.o-form__option-input[type="radio"] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 1;
}

.o-form__option-input[type="checkbox"]+label,
.o-form__option-input[type="radio"]+label {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
}

.o-form__option-input[type="checkbox"]+label:before,
.o-form__option-input[type="radio"]+label:before {
   content: "";
   cursor: pointer;
   display: block;
   min-width: 16px;
   min-width: 1rem;
   max-width: 16px;
   max-width: 1rem;
   height: 16px;
   height: 1rem;
   margin-right: 16px;
   margin-right: 1rem;
   border: 1px solid #9CA1AE;
   line-height: 18px;
   line-height: 1.125rem;
   font-size: 12px;
   font-size: 0.75rem;
   text-align: center;
   pointer-events: none;
   transition: all 0.2s ease;
}

.o-form__option-input[type="checkbox"]+label::after,
.o-form__option-input[type="radio"]+label::after {
   content: "";
   position: absolute;
   left: 4px;
   left: 0.25rem;
   min-width: 10px;
   min-width: 0.625rem;
   max-width: 10px;
   max-width: 0.625rem;
   height: 10px;
   height: 0.625rem;
   border-radius: 50%;
   background-color: transparent;
   transition: all 0.2s ease;
}

.o-form__option-input[type="checkbox"]+label:before {
   content: "";
   border-radius: 4px;
   border-radius: 0.25rem;
   font-family: ico-juan-rueda;
   color: transparent;
}

.o-form__option-input[type="checkbox"]:checked+label:before {
   border-color: #0076BA;
   color: #fff;
}

.o-form__option-input[type="checkbox"]:checked+label::after {
   background-color: #0076BA;
}

.o-form__option-input[type="radio"]+label:before {
   border-radius: 50px;
   border-radius: 3.125rem;
}

.o-form__option-input[type="radio"]:checked+label:before {
   border: 1px solid #0076BA;
   background: #fff;
}

.o-form__option-input[type="radio"]:checked+label::after {
   background-color: #0076BA;
}

.is-error__message {
   margin-top: -8px;
   margin-top: -0.5rem;
   padding: 8px 16px 8px 0;
   padding: 0.5rem 1rem 0.5rem 0;
   font-size: 12px;
   font-size: 0.75rem;
   text-align: left;
   color: #F25E5E;
}

.o-form__legend {
   margin-bottom: 32px;
   margin-bottom: 2rem;
}

.o-form__action {
   justify-content: space-between;
   min-width: 252px;
   min-width: 15.75rem;
   max-width: 252px;
   max-width: 15.75rem;
   margin: 32px auto 0 auto;
   margin: 2rem auto 0 auto;
}

@media only screen and (min-width: 768px) {
   .o-form__wrap {
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0 -10px;
      margin: 0 -0.625rem;
   }

   .o-form-wrap-centered {
      margin-top: 80px;
      margin-top: 5rem;
   }

   .o-form__set {
      width: 50%;
      padding: 0 10px;
      padding: 0 0.625rem;
   }

   .o-form__set_inline {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      width: auto;
   }

   .o-form__set_inline select {
      min-width: 300px;
      min-width: 18.75rem;
      margin-left: 24px;
      margin-left: 1.5rem;
   }
}

.o-tooltip {
   position: relative;
   display: inline-block;
   margin: 0 10px;
   margin: 0 0.625rem;
   filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
   z-index: 3;
}

.o-tooltip::before {
   content: "";
   width: 20px;
   width: 1.25rem;
   height: 20px;
   height: 1.25rem;
   background-color: #fff;
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.o-tooltip__button {
   margin-top: 4px;
   margin-top: 0.25rem;
   padding-left: 10px;
   padding-left: 0.625rem;
}

.o-tooltip__button:hover {
   color: #FF7A00;
}

.o-tooltip__box {
   position: absolute;
   top: -280px;
   top: -17.5rem;
   right: -20px;
   right: -1.25rem;
   left: auto;
   font-size: 12px;
   font-size: 0.75rem;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   opacity: 1;
   z-index: 2;
   transition: all 0.5s ease-in-out;
}

.o-tooltip__box:after {
   content: "";
   position: absolute;
   right: 0;
   bottom: -15px;
   bottom: -0.9375rem;
   width: 37px;
   width: 2.3125rem;
   height: 16px;
   height: 1rem;
   margin-right: 10px;
   margin-right: 0.625rem;
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
   background-color: #fff;
   transform: rotate(180deg);
   opacity: 1;
   z-index: 500;
   transition: all 0.5s ease-in-out;
}

.o-tooltip__inner {
   position: relative;
   border-radius: 6px;
   border-radius: 0.375rem;
   padding: 16px 24px;
   padding: 1rem 1.5rem;
   background-color: #fff;
   z-index: 2;
   transition: all 0.5s ease-in-out;
}

.o-tooltip-ico {
   transition: all 0.3s ease-in-out;
}

.o-tooltip-ico::before {
   color: #FF7A00;
}

.o-tooltip-ico:hover {
   transform: scale(0.9);
}

.o-tooltip__text {
   margin: 10px 0;
   margin: 0.625rem 0;
}

.o-tooltip__img {
   min-width: 250px;
   min-width: 15.625rem;
   max-width: 250px;
   max-width: 15.625rem;
}

.is-hidden {
   overflow: hidden;
}

.is-hidden:after {
   top: -300px;
   top: -18.75rem;
}

.is-hidden:after {
   opacity: 0;
}

.is-hidden .o-tooltip__box {
   top: -300px;
   top: -18.75rem;
}

.is-hidden .o-tooltip__inner {
   border: 1px solid #fff;
}

.o-tooltip__caption {
   position: relative;
   padding-top: 24px;
   padding-top: 1.5rem;
   text-align: center;
}

.o-tooltip__caption::before {
   content: "";
   position: absolute;
   top: 14px;
   top: 0.875rem;
   right: 0;
   left: 0;
   width: 30px;
   width: 1.875rem;
   margin: 0 auto;
   border: 1px solid #FF7A00;
}

@media only screen and (min-width: 768px) {
   .o-tooltip__img {
      min-width: 310px;
      min-width: 19.375rem;
      max-width: 310px;
      max-width: 19.375rem;
   }
}

@media only screen and (min-width: 1024px) {
   .o-tooltip__box {
      left: auto;
   }
}

.o-overlay-image {
   position: relative;
}

.o-overlay-image__box {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

.o-overlay-image__box::before {
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
}

.o-overlay-image__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media only screen and (min-width: 1024px) {
   .o-overlay-image__box {
      max-height: 70px;
      max-height: 4.375rem;
      min-height: 70px;
      min-height: 4.375rem;
   }

   .o-overlay-image__box_h400 {
      min-height: 400px;
      min-height: 25rem;
   }

   .o-overlay-image__img {
      max-height: 70px;
      max-height: 4.375rem;
      min-height: 70px;
      min-height: 4.375rem;
   }

   .o-overlay-image__img_inherit {
      max-height: inherit;
      min-height: inherit;
   }
}

/**
  * Class: o-message
  * @atom Status messages
  * @modifiers
  *  o-message_align-left Align text to left
  * @section 14. Messages
  * @markup
  *   <p class="SG-component__preview">
  *      <div class="o-message">
  *        <div class="o-message__wrapper">
  *          <div class="o-message__header o-message__column">
  *             <svg
  *               width="200"
  *               height="125"
  *               viewBox="0 0 200 125"
  *               fill="none"
  *               xmlns="http://www.w3.org/2000/svg"
  *             >
  *              </path>
  *            </svg>
  *          </div>
  *        </div>
  *
  *      </div>
  *   </p>
*/
.o-message {
   width: 100%;
}

.o-message__column {
   text-align: center;
}

.o-message__title {
   margin: 24px 0;
   margin: 1.5rem 0;
   font-size: 24px;
   font-size: 1.5rem;
   color: #2A2C31;
}

.o-message__button {
   display: block;
   max-width: 140px;
   max-width: 8.75rem;
   margin: 56px auto 0 auto;
   margin: 3.5rem auto 0 auto;
}

.o-message__button svg {
   position: relative;
   top: 2px;
   top: 0.125rem;
   margin-right: 14px;
   margin-right: 0.875rem;
   transition: all 0.3s ease-in-out;
}

.o-message__button:hover svg {
   transform: translateX(-4px);
}

@media screen and (max-width: 768px) {
   .o-message {
      padding-right: 24px;
      padding-right: 1.5rem;
      padding-left: 24px;
      padding-left: 1.5rem;
   }
}

@media screen and (min-width: 768px) {
   .o-message__wrapper {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
   }

   .o-message__header {
      margin-right: 32px;
      margin-right: 2rem;
   }

   .o-message_align-left .o-message__header {
      max-width: 280px;
      max-width: 17.5rem;
      margin-right: 80px;
      margin-right: 5rem;
      text-align: left;
   }
}

/**
 * Class: .c-collapsible
 * @description  Es un acordeón que se expanden al hacer clic en él. Permiten ocultar contenido que no es inmediatamente relevante para el usuario.
 *  ♣ Java script:
 *    ♣ .js-collapsible-control dispara la acción
 *    ♣ .js-collapsible-target elemento colapsable
 *    ♣ .js-collapsible-wrapper calcula el alto del colapsable
 *  ♣ Estados:
 *    ♣ .is-collapsible-open elemento desplegado
 * @molecule Collapsible
 * @section Contenido libre
 * @markup
 *  <div class="js-collapsible" data-js-collapsible-options='{ "firstElemenVisible": true }'>
 *    <article class="js-collapsible-item">
 *      <h2 class="js-collapsible-control">
 *          ¿Qué tipo de transacciones puedo realizar desde mi cuenta de ahorros Empresa?
 *      </h2>
 *      <div class="js-collapsible-target">
 *        <div class="js-collapsible-wrapper"> 
 *         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 *        </div>
 *      </div>
 *    </article>
 *  </div>
 */
.js-collapsible {
   overflow: hidden;
}

.js-collapsible-item {
   position: relative;
   z-index: 2;
}

.js-collapsible-item.is-collapsible-opened {
   z-index: 1;
}

.js-collapsible-target {
   opacity: 0;
   visibility: hidden;
   overflow: hidden;
   transition: all 0.3s;
}

.is-collapsible-opened .js-collapsible-target {
   opacity: 1;
   visibility: visible;
   overflow: visible;
}

.js-collapsible-control {
   cursor: pointer;
}

/**
 * Class: u-hidden, display none
 * @atom Ocultar elemento
 * @section Utils
 * @markup
 *  <a href="#" class="i-twitter">
 *    <span class="u-hidden">Twitter</span>
 *  </a>
 */
.u-hidden {
   display: none;
   opacity: 0;
   visibility: hidden;
}

.u-overflow_hidden {
   overflow: hidden;
}

.u-margin-all-0 {
   margin: 0;
}

.u-margin-top-0 {
   margin-top: 0;
}

.u-margin-bottom-0 {
   margin-bottom: 0;
}

.u-margin-both-24 {
   margin-top: 24px;
   margin-top: 1.5rem;
   margin-bottom: 24px;
   margin-bottom: 1.5rem;
}

.u-text-aling-center {
   text-align: center;
}

.u-text-aling-left {
   text-align: left;
}

/**
 * Class: u-hidden-mb, display none
 * @atom Ocultar elemento en Mobile
 * @section Utils
 * @markup
 *  <a href="#" class="i-twitter">
 *    <span class="u-hidden-mb">Twitter</span>
 *  </a>
 */
@media only screen and (max-width: 768px) {
   .u-hidden-mb {
      display: none;
      opacity: 0;
      visibility: hidden;
   }
}

/**
 * Class: u-inherit, Color de texto heredado del color especificado para el texto del bloque padre.
 * @atom Color heredado
 * @section Utils
 * @markup
 *  <p href="#" class="u-inherit">
 *    Color de texto heredado
 *  </p>
 */
.u-inherit {
   color: inherit;
}

/**
 * Class: u-inline, Elemento display inline-block
 * @atom Elemento Inline block
 * @section Utils
 * @markup
 *  <p href="#" class="u-inline">
 *    Elemento inline Block
 *  </p>
 */
.u-inline {
   display: inline-block;
}

.u-reverse {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-direction: reverse;
   -webkit-box-orient: horizontal;
   -webkit-flex-direction: row-reverse;
   -moz-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
}

.u-uppercase {
   text-transform: uppercase;
}