/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

.font-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.font-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.font-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.font-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.font-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.font-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.text-thin {
  font-size: .7rem;
  line-height: 1rem;
}

.text-small {
  font-size: .85rem;
  line-height: 1.5rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.75rem;
}

.text-big {
  font-size: 1.25rem;
  line-height: 2rem;
}

.text-huge {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

:root {
  --color-base: #444;
  --color-green: #284f56;
  --color-yellow: #fbbd17;
  --color-bg-yellow: #ffcc37;
  /* Verde */
  --gradient-green-0: linear-gradient(0deg, rgba(40, 79, 86, 1) 0%, rgba(55, 115, 126, 1) 100%);
  --gradient-green-180: linear-gradient(180deg, rgba(40, 79, 86, 1) 0%, rgba(55, 115, 126, 1) 100%);

  /* Amarillo */
  --gradient-yellow-0: linear-gradient(0deg, #fbbd17 0%, rgba(255, 219, 113, 1) 100%);
  --gradient-yellow-180: linear-gradient(180deg, #fbbd17 0%, rgba(255, 219, 113, 1) 100%);
  /* Verde */
  --gradient-green-45: linear-gradient(45deg, rgba(40, 79, 86, 1) 0%, rgba(55, 115, 126, 1) 100%);
  --gradient-green-90: linear-gradient(-90deg, rgba(40, 79, 86, 1) 0%, rgba(55, 115, 126, 1) 100%);

  /* Amarillo */
  --gradient-yellow-45: linear-gradient(45deg, #fbbd17 0%, rgba(255, 219, 113, 1) 100%);
  --gradient-yellow-90: linear-gradient(-90deg, #fbbd17 0%, rgba(255, 219, 113, 1) 100%);


}

.green {
  color: var(--color-green) !important;
}

.yellow {
  color: var(--color-yellow) !important;
}

.white {
  color: #fff !important;
}

.gray {
  color: #aaa !important;
}

.black {
  color: #314141 !important;
}


.bg-yellow {
  background-color: var(--color-bg-yellow);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-green-gradient-0 {
  background: var(--gradient-green-0);
}

.bg-green-gradient-180 {
  background: var(--gradient-green-180);
}

.bg-green-gradient-45 {
  background: var(--gradient-green-45);
}

.bg-green-gradient-90 {
  background: var(--gradient-green-90);
}

.bg-yellow-gradient-0 {
  background: var(--gradient-yellow-0);
}

.bg-yellow-gradient-180 {
  background: var(--gradient-yellow-180);
}

.bg-yellow-gradient-45 {
  background: var(--gradient-yellow-45);
}

.bg-yellow-gradient-90 {
  background: var(--gradient-yellow-90);
}


.bg-gray {
  background-color: #f3f3f3;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.m-top {
  margin-top: 80px;
}

.m-auto {
  margin: auto;
}

.clear {
  clear: both;
}

.underline,
.underline-green,
.underline-white {
  min-width: 50px;
  padding-bottom: 6px;
  background: url('../img/layout/underline-yellow.svg');
  background-position: right bottom !important;
  background-repeat: no-repeat !important;
  background-size: 55% 7px !important;
  display: inline-block !important;
}

.underline-green {
  background: url('../img/layout/underline-green.svg');
  padding-bottom: 8px;
}

.underline-white {
  background: url('../img/layout/underline-white.svg');
  padding-bottom: 8px;
}

.content a,
.content a:visited,
.link,
.link:visited {
  text-decoration: none;
  transition: all .2s linear;
  color: var(--color-green);
}

.content a:hover,
.link:hover {
  color: var(--color-yellow);
}

.thin-scrollbar {
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--color-yellow) var(--color-green);
  /* Firefox */
}

/* WebKit Browsers */
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: var(--color-green);
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-yellow);
  border-radius: 10px;
}

.PaginadorContainer {
  gap: 10px;
  width: 100%;
  margin: 10px auto 30px auto;
  text-align: center;
}

.Paginador,
.Paginador:visited,
.PaginadorPagActual {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff !important;
  background: var(--color-yellow);
  display: inline-block;
  margin: 0 2px;
  border-radius: 50%;
  transition: all .2s linear;
}

.Paginador:hover {
  background: #d49d05;
}

.PaginadorPagActual {
  background: var(--color-green);
}

hr {
  border: none;
  height: 1px;
  background-color: #eee;
  margin: 20px 0 40px 0;
}