@charset "UTF-8";

:root {
  --fs--3: clamp(0.512rem, 0.6022rem + -0.1002vi, 0.5787rem);
  --fs--2: clamp(0.64rem, 0.7136rem + -0.0818vi, 0.6944rem);
  --fs--1: clamp(0.8rem, 0.8451rem + -0.0501vi, 0.8333rem);
  --fs-0: 1rem;
  --fs-1: clamp(1.2rem, 1.1824rem + 0.0751vi, 1.25rem);
  --fs-3: clamp(1.728rem, 1.6487rem + 0.3382vi, 1.9531rem);
  --fs-4: clamp(2.0736rem, 1.9441rem + 0.5526vi, 2.4414rem);
  --fs-5: clamp(2.4883rem, 2.2899rem + 0.8465vi, 3.0518rem);
  --Headline-3: var(--fs-3);
}

/* =========================
   FONTS
   ========================= */

@font-face {
  font-family: CoreSansLight;
  src: url("../fonts/CoreSansA35Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: CoreSansRegular;
  src: url("../fonts/CoreSansA45Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: CoreSansBold;
  src: url("../fonts/CoreSansA65Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

/* =========================
   ICON FONT
   ========================= */

@font-face {
  font-family: ibp;
  src: url("../icons/ibp-new.eot");
  src:
    url("../icons/ibp-new.eot") format("embedded-opentype"),
    url("../icons/ibp-new.woff2") format("woff2"),
    url("../icons/ibp-new.woff") format("woff"),
    url("../icons/ibp-new.ttf") format("truetype"),
    url("../icons/ibp-new.svg") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.ibp-diagonal-arrow:before {
  content: "\e066";
}

/* =========================
   RESET
   ========================= */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: CoreSansLight, Inter, Roboto;
  font-size: var(--fs-0);
  background: #105163;
  text-rendering: optimizeSpeed;
  display: flex;
  flex-direction: column;
}

main {
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

p,
h1 {
  margin: 0;
  padding: 0;
}

p,
a {
  font-family: CoreSansRegular, Inter, Roboto;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

a:hover,
a:link,
a:visited {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  width: 100%;
}

/* =========================
   HEADER
   ========================= */

.ath-head {
  grid-column: 1 / -1;
  width: 100% !important;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--fs-0);
  background-color: #105163;
}

.bp-logo {
  width: 16rem;
}

/* =========================
   MAIN GRID
   ========================= */

.ath-grid {
  width: 100%;
  min-height: 0;
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns:
    0.2fr
    repeat(4, minmax(min-content, 1fr))
    0.2fr;
  grid-template-rows: auto;
}

.ath-section-fw {
  width: 100%;
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    0.5fr
    repeat(4, minmax(min-content, 1fr))
    0.5fr;
  grid-template-rows: auto;
}

.ath-section-fw__container {
  grid-column: 2 / -2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* =========================
   FLEX
   ========================= */

.flex {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.jc-center {
  flex-wrap: wrap;
  justify-content: center;
}

.jc-space-between {
  justify-content: space-between !important;
}

.ai-center {
  align-items: center !important;
}

.ac-center {
  align-content: center !important;
}

.w-full {
  width: 100% !important;
}

/* =========================
   COLUMNS
   ========================= */

.even-columns-md {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  z-index: 1;
  justify-items: flex-start;
}

.even-columns-md__content {
  width: 100%;
}

.grid-column-md {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
}

/* =========================
   IMAGE
   ========================= */

.even-columns-md__content > img {
  width: auto;
  max-width: 100%;
  max-height: 55vh;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

/* =========================
   PADDING / SPACING
   ========================= */

.p-m {
  padding-block: var(--fs-1);
  padding-inline: var(--fs-1);
}

.p-block-m {
  padding-block: var(--fs-1);
}

.p-left-xxl {
  padding-left: var(--fs-4);
}

.p-right-xl {
  padding-right: var(--fs-3);
}

.p-block-end--m > *:not(:last-child) {
  padding-block-end: var(--fs-0);
}

.gap-xxxl {
  gap: var(--fs-5);
}

/* =========================
   COLORS
   ========================= */

.bp-neutral--white {
  color: #fff;
}

.bp-new--green {
  color: #27c112;
}

/* =========================
   TYPOGRAPHY
   ========================= */

.fs-m {
  font-size: var(--fs-1);
}

.headline-3 {
  font-size: var(--Headline-3);
  font-family: CoreSansRegular, Inter, Roboto;
  font-weight: 600;
  line-height: 1.2;
}

.fw-bold {
  font-family: CoreSansBold, Inter, Roboto;
  font-weight: 700;
}

/* =========================
   BUTTON
   ========================= */

.ath-btn {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--fs--2);
  padding-inline: var(--fs--1);
  padding-block: var(--fs--1);
  border: none;
  border-radius: var(--fs--2);
  background-color: #009947;
  color: #fff;
  font-size: var(--fs-0);
  font-family: CoreSansRegular, Inter, Roboto;
  cursor: pointer;
  transition: all 3ms;
}

.ath-btn:hover,
.ath-btn:focus-visible {
  color: #fafafa;
  filter: drop-shadow(0 0 0.32rem #009947);
  border-color: transparent;
}

/* =========================
   GREEN BUTTON
   ========================= */

.ath-btn[data-type="new-green"] {
  color: #fff;
  background-color: #27c112;
  border-style: solid;
  border-color: #105163;
}

.ath-btn[data-type="new-green"]:hover,
.ath-btn[data-type="new-green"]:focus-visible {
  color: #fff;
  background-color: #27c112;
  filter: drop-shadow(0 0 0.32rem #105163);
}

/* =========================
   BUTTON ICON
   ========================= */

.ath-btn[data-icon="circle"] {
  padding-inline: var(--fs--1);
  padding-block: var(--fs--2);
}

.ath-btn[data-icon="circle"] i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  padding: var(--fs--3);
  font-family: ibp;
  font-size: var(--fs-1);
  color: #27c112;
  background-color: #fff;
}

/*
   SVG utilizado actualmente
   dentro del botón
*/

.ath-btn[data-icon="circle"] svg {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  padding: 0.4rem;
  border-radius: 50%;
  box-sizing: border-box;
  color: #27c112;
  background-color: #fff;
}

/* =========================
   TABLET / SMALL DESKTOP
   ========================= */

@media only screen and (min-width: 40em) {
  .flex {
    flex-direction: row;
  }

  .ath-btn {
    width: max-content;
    padding-inline: var(--fs-1);
  }
}

/* =========================
   768px
   ========================= */

@media only screen and (min-width: 48em) {
  .ath-grid {
    grid-template-columns:
      0.5fr
      repeat(8, minmax(min-content, 1fr))
      0.5fr;
  }

  .ath-section-fw {
    grid-template-columns:
      0.46fr
      repeat(8, minmax(min-content, 1fr))
      0.46fr;
  }

  .even-columns-md {
    grid-auto-flow: row;
    grid-auto-rows: min-content;
  }

  .grid-column-md {
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
  }
}

/* =========================
   1024px - DESKTOP
   ========================= */

@media only screen and (min-width: 64em) {
  .ath-grid {
    grid-template-columns:
      1fr
      repeat(12, minmax(min-content, 1fr))
      1fr;
  }

  .ath-section-fw {
    grid-template-columns:
      1fr
      repeat(12, minmax(min-content, 1fr))
      1fr;
  }

  .even-columns-md {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-auto-rows: min-content;
    justify-items: center;
  }

  .grid-column-md {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  /*
     En escritorio limitamos la altura
     de la imagen para evitar scroll
     innecesario en 1080p.
  */

  .even-columns-md__content > img {
    max-height: 60vh;
  }
}

/* =========================
   1280px
   ========================= */

@media only screen and (min-width: 80em) {
  .ath-grid {
    grid-template-columns:
      0.5fr
      repeat(12, minmax(min-content, 1fr))
      0.5fr;
  }

  .ath-section-fw {
    grid-template-columns:
      0.5fr
      repeat(12, minmax(min-content, 1fr))
      0.5fr;
  }
}

/* =========================
   1600px
   ========================= */

@media only screen and (min-width: 100em) {
  .ath-grid {
    grid-template-columns:
      0.6fr
      repeat(12, minmax(min-content, 1fr))
      0.6fr;
  }

  .ath-section-fw {
    grid-template-columns:
      0.6fr
      repeat(12, minmax(min-content, 1fr))
      0.6fr;
  }
}

/* =========================
   TABLET / MOBILE
   ========================= */

@media only screen and (max-width: 63.99em) {
  .ath-grid {
    min-height: 0;
  }

  .ath-section-fw__container {
    min-height: 0;
  }

  .even-columns-md__content > img {
    width: 100%;
    max-width: 100%;
    max-height: 50vh;
    height: auto;
    object-fit: contain;
  }
}

/* =========================
   MOBILE
   ========================= */

@media only screen and (max-width: 39.99em) {
  .even-columns-md__content > img {
    max-height: 40vh;
  }

  .p-left-xxl {
    padding-left: var(--fs-1);
  }

  .p-right-xl {
    padding-right: var(--fs-1);
  }

  .gap-xxxl {
    gap: var(--fs-1);
  }

  .bp-logo {
    width: 12rem;
  }
}