/**
 * Base y layout general (referencia Claro)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--claro-font);
}

.claro-body {
  background: var(--claro-bg);
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--claro-font);
  color: var(--claro-black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.claro-main-page {
  min-height: calc(100vh - 7.875em);
  display: flex;
  flex-direction: column;
  padding: 0 0.75em;
  flex: 1;
  align-items: center;
}

.claro-content {
  width: 100%;
  max-width: 736px;
  margin: 0 auto;
}

.display-none {
  display: none !important;
}

.claro-title {
  text-align: center;
}

.claro-title h1,
.claro-title #kc-page-title {
  font-size: 1.15em;
  color: var(--claro-black);
  text-align: center;
  margin: 0 0 1em 0;
  font-family: var(--claro-font);
}

.claro-title #kc-page-title {
  margin-bottom: 8px !important;
}

a {
  color: var(--claro-blue);
  text-decoration: none;
}

.horizontal-line {
  width: 100%;
  border: solid 1px var(--claro-border);
  margin: 1em 0;
}