@charset "UTF-8";
/*Variables de los colores con relación a la imagen de la marca */
.colorNegro {
  color: #000000; }

.colorBlanco {
  color: #ffffff; }

.colorAzul {
  color: #0065cd; }

.colorRojo {
  color: #e80c0c; }

.colorVerde {
  color: #7cce00; }

/* Variables que controlan el eje Z para los componentes de la pagina */
:root {
  --z-back: -10;
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
  --z-supermodal: 1100; }

/* Variables que contiene tamaños de la diferentes fuentes en una sección en específico */
/* Breakpoints para poder realizar lo responsive */
/* Pseudoelementos para ajustar las configuraciones necesarios al sitio web */
*, *::before, *::after {
  box-sizing: border-box;
  font-family: 'geometria-light';
  scrollbar-color: #f9f7f7 #ffffff; }

/* Ajustar las configuraciones necesarias para el sitio */
body {
  background-color: #ffffff; }

a {
  text-decoration: none;
  color: #e80c0c; }

.colorBLANCO {
  color: #ffffff; }

.colorNegro {
  color: #000000; }

.colorRojo {
  color: #e80c0c; }

.colorVerde {
  color: #24a107; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0; }

.notifCorrecto {
  color: #24a107;
  margin-top: 1rem;
  margin-bottom: 0; }

/* Asignando las configuraciones bases para los diferentes tipos de botones que se utilizan */
button, [type="button"], [type="reset"], [type="submit"] {
  background: transparent;
  border-color: transparent;
  cursor: pointer;
  color: #e80c0c; }

/* Asignando las configuraciones para los diferentes tipos de input que se utilizan */
input:not([type]), input[type="text"],
input[type="password"], input[type="email"],
input[type="url"], input[type="time"],
input[type="date"], input[type="datetime"],
input[type="datetime-local"], input[type="tel"],
input[type="number"], input[type="search"] {
  background-color: transparent;
  border: none;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: medium;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: medium;
  border-bottom: 1px solid #24a107;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 20px 0;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
  transition: all 0.3s;
  color: #e80c0c;/* formulario texto negro */
  text-align: center;
  font-family: 'geometria-light'; }

.l-section {
  --fscontent: 1rem;
  font-size: var(--fscontent);
  color: #000000;
  padding-bottom: 2rem; }
  @media screen and (min-width: 640px) {
    .l-section {
      --fscontent: 1.5rem; } }
  @media screen and (min-width: 640px) {
    .l-section {
      padding-top: 1rem; } }

.center-block {
  margin-left: auto;
  margin-right: auto; }

.center-content {
  text-align: center; }

.s-5 {
  width: 5%; }

.s-10 {
  width: 10%; }

.s-15 {
  width: 15%; }

.s-20 {
  width: 20%; }

.s-25 {
  width: 25%; }

.s-30 {
  width: 30%; }

.s-35 {
  width: 35%; }

.s-40 {
  width: 40%; }

.s-45 {
  width: 45%; }

.s-50 {
  width: 50%; }

.s-55 {
  width: 55%; }

.s-60 {
  width: 60%; }

.s-65 {
  width: 65%; }

.s-70 {
  width: 70%; }

.s-75 {
  width: 75%; }

.s-80 {
  width: 80%; }

.s-85 {
  width: 85%; }

.s-90 {
  width: 90%; }

.s-95 {
  width: 95%; }

.s-100 {
  width: 100%; }

@media screen and (min-width: l) {
  .l-5 {
    width: 5%; }

  .l-10 {
    width: 10%; }

  .l-15 {
    width: 15%; }

  .l-20 {
    width: 20%; }

  .l-25 {
    width: 25%; }

  .l-30 {
    width: 30%; }

  .l-35 {
    width: 35%; }

  .l-40 {
    width: 40%; }

  .l-45 {
    width: 45%; }

  .l-50 {
    width: 50%; }

  .l-55 {
    width: 55%; }

  .l-60 {
    width: 60%; }

  .l-65 {
    width: 65%; }

  .l-70 {
    width: 70%; }

  .l-75 {
    width: 75%; }

  .l-80 {
    width: 80%; }

  .l-85 {
    width: 85%; }

  .l-90 {
    width: 90%; }

  .l-95 {
    width: 95%; }

  .l-100 {
    width: 100%; } }
.opcionDimension {
  --padding: 2rem 1rem 3rem;
  --logo-height: 3rem;
  padding: var(--padding);
  position: relative;
  color: #ffffff;
  padding-top: 5rem;
  padding-bottom: 6rem; }
  @media screen and (min-width: 640px) {
    .opcionDimension {
      --padding: 5rem 2rem 6rem;
      --logo-height: 5rem; } }
  @media screen and (min-width: 640px) {
    .opcionDimension {
      padding-top: 2rem; } }

.contenidoOpciones {
  position: relative; }

.fondoOpciones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .4; }

.tituloOpciones {
  font-size: 2em;
  margin-top: 0; }
  @media screen and (min-width: 640px) {
    .tituloOpciones {
      margin-top: 8rem; } }

.opcionRojo {
  background-color: #e80c0c; }

.opcionVerde {
  background-color: #7cce00; }

.opcionAzul {
  background-color: #0065cd; }

.opcionNegro {
  background-color: #000000; }

.opcionBlanco {
  background-color: #ffffff; }

:root {
  --fs-infopt: .7rem; }
  @media screen and (min-width: 640px) {
    :root {
      --fs-infopt: 1rem; } }

.cont {
  z-index: var(--z-normal);
  color: #000000;
  background-color: #ffffff;
  padding-top: 1rem;
  margin-top: 1rem; }
  @media screen and (min-width: 640px) {
    .cont {
      margin-top: -1rem;
      padding-top: 1rem; } }

.cont h1 {
  font-size: 1.5rem;
  margin-top: -5rem; }
  @media screen and (min-width: 640px) {
    .cont h1 {
      font-size: 2rem;
      margin-top: 0; } }

@media screen and (min-width: 640px) {
  .espcont {
    margin-top: 2rem; } }

.contac {
  --padding: 2rem 1rem 3rem;
  padding: var(--padding);
  position: relative;
  color: #ffffff;
  background-color: #000000;
  padding-top: 5rem; }
  @media screen and (min-width: 640px) {
    .contac {
      --padding: 1rem; } }
  .contac__content {
    position: relative; }
  @media screen and (min-width: 640px) {
    .contac {
      padding-top: 1rem; } }

.contac h1 {
  font-size: 1.5rem;
  margin-top: 0; }
  @media screen and (min-width: 640px) {
    .contac h1 {
      font-size: 2rem;
      margin-top: 1rem;
      margin-bottom: 1rem; } }

.espenv {
  cursor: pointer; }

.especuen {
  margin-top: 1rem;
  cursor: pointer; }
  @media screen and (min-width: 640px) {
    .especuen {
      margin-top: 1rem; } }

.alturaMensa {
  height: 10rem; }

.ESPmensaje {
  font-size: 1rem;
  color: #e80c0c;  /* formulario opcion mensaje texto negro */
  border-width: .5px;
  border-top-color: #24a107;
  border-bottom-color: #24a107;
  border-left-color: #24a107;
  border-right-color: #24a107;
  padding: .5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  float: left;
  width: 100%;
  min-height: 100%; }

/*# sourceMappingURL=estilos.css.map */