@font-face {
  font-family: "Geomanist";
  src: url("../fonts/Geomanist/Geomanist-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geomanist";
  src: url("../fonts/Geomanist/Geomanist-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geomanist";
  src: url("../fonts/Geomanist/Geomanist-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato/lato-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato/lato-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato/lato-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #212222;
  --color-text: #ffffff;
  --color-accent: #ebffa5;
  --color-ink: #212222;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-border: rgba(235, 255, 165, 0.2);
  --radius-m: 16px;
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 56px;
  --gov-header-height: 64px;
  --font-scale: 1;
}

/* Font scale overrides */
@media (min-width: 769px) {
  .site-main {
    --font-scale: 2;
  }
  /* Para la altura de la hambuguesa con guia de inversion en desk */
  .navbar-expand-md .navbar-nav .nav-link {
    height: 75px;
  }
}

@media (max-width: 1349px) {
  .site-main {
    --font-scale: 1.1;
  }
}

@media (min-width: 769px) and (max-height: 800px) {
  #mapa-de-inversiones-h1,
  #mapa-de-inversiones-p,
  #mapa-de-inversiones-h2,
  .card-text .subtitulo-strong {
    --font-scale: 1.6 !important;
  }
}

@media (max-width: 768px) {
  .hero-split-item {
    --font-scale: 0.9;
  }
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: left;
}

.site-main {
  padding: calc(var(--gov-header-height) + var(--space-1)) var(--space-3)
    var(--space-5);
  font-family: "Lato", Arial, sans-serif;
}

.page-main {
  width: 100%;
}

.section {
  width: 100%;
}

.hero-map {
  padding: 0 var(--space-3);
}

.cifras-section {
  padding: 0;
}

.cifras-heading {
  padding: var(--space-3) var(--space-5) 0;
  text-align: center;
}

.cifras-heading span {
  display: block;
}

.cifras-note {
  padding: var(--space-3) var(--space-5) 0;
  text-align: center;
  line-height: 0.9;
}

.cifras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
}

.cifras-grid .card {
  background: #235c4e;
  border-radius: 0;
  padding: var(--space-1);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cifras-grid .titulo-strong-large {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(6rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.cifras-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-1);
  align-items: center;
}

.cifras-break span {
  display: block;
}

.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-banner-picture {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-banner-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(70%, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-0);
  padding: var(--space-2);
  color: var(--color-text);
  text-align: left;
  background: linear-gradient(
    90deg,
    rgba(15, 16, 16, 0.75) 0%,
    rgba(15, 16, 16, 0.2) 75%,
    transparent 100%
  );
}

.hero-banner-cta {
  align-self: flex-start;
  display: inline-flex;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--color-accent);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.hero-banner-cta .subtitulo-strong-obscuro {
  margin: 0;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.125rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-4);
  padding: 0 var(--space-3);
}

.hero-split p {
  line-height: 0.8;
}

.hero-split-item {
  min-width: 0;
  align-self: start;
}

.hero-split-divider {
  background: #ffffff;
  width: 0.125rem;
  height: 65%;
  align-self: start;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: var(--space-4);
}

.video-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.site-footer {
  background: #1a1b1b;
  color: var(--color-text);
  padding: var(--space-4) var(--space-3);
  font-family: "Lato", Arial, sans-serif;
}

.site-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-2);
}

.site-nav {
  gap: var(--space-2);
}

.site-nav .nav-link {
  color: var(--color-text);
  font-weight: 600;
}

.site-nav .nav-link[aria-current="page"] {
  color: var(--color-accent);
}

.nav-lang {
  padding-top: var(--space-1);
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lang button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.lang button[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

.gap-0 {
  gap: 0;
}

.gap-3 {
  gap: var(--space-3);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-3);
}

.card-text {
  margin: 0;
}

.marco-rectangular {
  border: 2px solid #fff;
  border-radius: 0;
  padding: var(--space-2) var(--space-3) var(--space-4);
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

#nuestros-destinos {
  background-image: url("./png/FOTOS_MOBILE_HOME/RECUADROMOBILE.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  text-align: left;
  justify-items: start;
}

#nuestros-destinos h1 {
  line-height: 0.8;
  margin: 0;
  padding: 0;
  width: 74%;
}

#nuestros-destinos p {
  text-align: left;
  justify-self: start;
  width: 74%;
}

.destinos-cta {
  display: block;
  margin-top: var(--space-1);
}

@media (min-width: 768px) {
  #nuestros-destinos {
    background-image: url("./png/FOTOS_DESK_HOME/RECUADRODESK.png");
    background-size: auto 100%;
    background-position: right center;
    min-height: 35vh;
    align-content: center;
    padding-left: 1vw;
  }
}

.marco-rectangular p {
  line-height: 0.85;
  margin: 0;
  text-align: center;
}

.marco-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  justify-items: center;
}

.marco-icon-grid img {
  width: 100%;
  max-width: 48px;
  height: auto;
}

.destinos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
}

.destinos-section {
  width: 100%;
}

@media (min-width: 471px) and (max-width: 768px) {
  .destinos-section {
    width: 470px !important;
    max-width: 100%;
    margin: 0 auto;
  }
}

.destinos-grid .card {
  border-radius: 0;
  padding: var(--space-1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  border: 0;
}

.destinos-grid .card img {
  width: 50%;
  height: auto;
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 0;
}

.destinos-grid .card .card-text {
  position: relative;
  z-index: 1;
}

.destino-card:nth-child(1),
.destino-card:nth-child(2),
.destino-card:nth-child(3) {
  height: 250px;
}

.destino-card {
  background-image: var(--bg-mobile);
}

.destino-link {
  text-decoration: none;
  color: inherit;
}

.destinos-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  grid-column: 1 / -1;
}

.destinos-row-card {
  height: 150px !important;
}

.destinos-row-card img {
  width: 40% !important;
  height: auto;
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  transform: translateY(-30%);
  z-index: 0;
}

@media (min-width: 1024px) {
  .destinos-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .destinos-row {
    display: contents;
  }
}

.portafolio-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 0;
}

.portafolio-grid .card:last-child {
  padding: 0;
  display: flex;
}

.portafolio-grid .card {
  border-radius: 0;
  border: 0;
}

.portafolio-grid .card:first-child {
  background: #235c4e;
  padding: var(--space-1);
}

.portafolio-grid .card:first-child h1 {
  line-height: 0.9;
  margin: 0 0 var(--space-1) 0;
}

.portafolio-grid .card:first-child .titulo,
.portafolio-grid .card:first-child .titulo-strong {
  font-size: calc(2.5rem * var(--font-scale));
}

.portafolio-title span + span {
  display: block;
  margin-top: var(--space-1);
}

.portafolio-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: var(--space-1);
}

html[lang="es"] .portafolio-cta {
  background-image: url("./png/boton-desk-es.png");
}

html[lang="en"] .portafolio-cta {
  background-image: url("./png/boton-desk-en.png");
}

.portafolio-grid .card:first-child p {
  margin: 0 0 var(--space-1) 0;
}

.portafolio-grid .card:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portafolio-media {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
}

.portafolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .destino-card {
    background-image: var(--bg-desktop);
  }
}

@media (min-width: 768px) {
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav {
    width: 100%;
    align-items: center;
  }

  .nav-lang {
    margin-left: auto;
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  .lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 769px) {
  .site-main {
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--space-2);
  }

  #fonatur-mejor-inversion {
    padding-left: 16vw;
    padding-right: 16vw;
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  .cifras-section {
    margin: 4vh auto;
    width: calc(100% - 30vw);
  }

  .portafolio-section {
    padding-top: 10vh;
  }

  .portafolio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portafolio-cta {
    background-size: auto 100%;
    padding: 0;
  }

  .portafolio-section #button-descarga-pdf {
    width: 70%;
    aspect-ratio: 60 / 13;
  }

  #portafolio-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5vh 4vw;
  }

  #portafolio-card > * {
    margin-left: 2vw;
    margin-right: 2vw;
  }

  #portafolio-card > * + * {
    margin-top: 3vh;
  }

  #portafolio-card .titulo,
  #portafolio-card .titulo-strong {
    font-size: calc(3.5rem * var(--font-scale));
  }

  #portafolio-card .t-body-geomanist {
    font-size: calc(1.5rem * var(--font-scale));
  }

  #portafolio-card .subtitulo {
    font-size: calc(2.2rem * var(--font-scale));
  }

  .page-home p {
    line-height: 1.2;
  }

  .page-home .destinos-grid p {
    line-height: 1;
  }

  .hero-split-divider {
    width: 0.375rem;
  }

  .hero-banner {
    max-height: 40vh;
  }

  .hero-banner-picture,
  .hero-banner-img {
    height: 100%;
  }

  .hero-map {
    padding-left: 15vw;
    padding-right: 15vw;
    padding-bottom: 6vh;
    margin: 0 auto;
  }

  .marco-rectangular {
    margin-left: 15vw;
    width: calc(100% - 30vw);
  }

  .hero-banner-overlay {
    padding-left: 200px;
    width: min(50%);
  }
}

@media (max-width: 1349px) {
  .site-main {
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--space-2);
  }
}

@media (max-width: 768px) {
  .site-main {
    padding: 0;
  }

  .hero-banner-overlay {
    width: min(70%, 520px);
    gap: var(--space-0);
    padding: var(--space-2);
  }

  #fonatur-mejor-inversion {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .cifras-grid .titulo-strong-large {
    font-size: calc(4.8rem * var(--font-scale));
  }

  .cifras-grid .titulo-strong {
    font-size: calc(2.4rem * var(--font-scale));
  }

  .cifras-grid .subtitulo-strong,
  .cifras-grid .subtitulo {
    font-size: calc(1.6rem * var(--font-scale));
  }

  .cifras-mobile-body {
    font-family: "Geomanist";
    font-size: calc(1rem * var(--font-scale));
    font-weight: 400;
  }

  #nuestros-destinos {
    background-size: 100% 100%;
    background-position: center;
    text-align: left;
    justify-items: start;
  }

  #nuestros-destinos h1 {
    line-height: 0.7;
    margin: 0;
    padding: 0;
  }

  #nuestros-destinos p {
    width: 80%;
    text-align: left;
    justify-self: start;
  }

  html[lang="es"] .portafolio-cta {
    background-image: url("./png/boton-mobile-es.png");
  }

  html[lang="en"] .portafolio-cta {
    background-image: url("./png/boton-mobile-en.png");
  }
}

@media (min-width: 768px) {
  .destinos-grid {
    margin-left: 15vw;
    width: calc(100% - 30vw);
  }

  .destinos-grid .destino-card {
    height: calc(100vh / 2);
  }

  .destinos-grid .destinos-row-card {
    height: calc(100vh / 2) !important;
  }

  .destinos-grid .destinos-row-card img {
    width: 50% !important;
    transform: none;
  }
}

.titulo {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(3rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.titulo-verde {
  color: #ebffa5;
  font-family: "Geomanist";
  font-size: calc(3rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.titulo-strong {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(3rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.titulo-strong-verde {
  color: #ebffa5;
  font-family: "Geomanist";
  font-size: calc(3rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.subtitulo {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(2rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.subtitulo-verde {
  color: #ebffa5;
  font-family: "Geomanist";
  font-size: calc(2rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.subtitulo-strong {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(2rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.subtitulo-strong-verde {
  color: #ebffa5;
  font-family: "Geomanist";
  font-size: calc(2rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.subtitulo-strong-obscuro {
  color: #212222;
  font-family: "Geomanist";
  font-size: calc(2rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.t-body-geomanist-strong {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.t-body-geomanist-strong-verde {
  color: #ebffa5;
  font-family: "Geomanist";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.t-body-geomanist-black {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 900;
}

.t-body-geomanist {
  color: #fff;
  font-family: "Geomanist";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.t-body-lato-strong {
  color: #fff;
  font-family: "Lato";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 700;
}

.t-body-lato-black {
  color: #fff;
  font-family: "Lato";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 900;
}

.t-body-lato {
  color: #fff;
  font-family: "Lato";
  font-size: calc(1.125rem * var(--font-scale));
  font-style: normal;
  font-weight: 400;
}

.two-col-flex {
  display: flex;
  gap: 24px;
}

.two-col-flex .col {
  flex: 1;
}

.two-col-flex .right {
  padding-left: 24px;
  border-left: 10px solid rgba(255, 0, 0, 0.12);
  border-radius: 6px;
}

@media (max-width: 800px) {
  .two-col-flex {
    flex-direction: column;
  }
  .two-col-flex .right {
    border-left: 0;
    padding-left: 0;
  }
}

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

.cien-porciento-imagen {
  width: 100%;
  display: block;
}
.portafolio-grid #button-descarga-pdf {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 80%;
  aspect-ratio: 310 / 71;
  text-decoration: none;
}

.portafolio-grid #button-descarga-pdf img {
  height: 5rem;
}

@media (min-width: 769px) {
  .portafolio-section #button-descarga-pdf {
    width: 80%;
  }
}