@charset "utf-8";
/* CSS Document */
@import url('reset.css');
@font-face {
  font-family: 'ArgentumSans';
  src: url('../../resources/fuentes/ArgentumSans-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'ArgentumSans-Bold';
  src: url('../../resources/fuentes/ArgentumSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'ArgentumSans-ExtraBold';
  src: url('../../resources/fuentes/ArgentumSans-ExtraBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
:root {
  --fondo-claro: #f6f7fa;
  --azul--osc: #0057b8;
  --azul-claro: #0072ce;
  --color-morado: #582c83;
  --color-gris: #3b5266;
  --color-negro: #000;
  --fuente-principal: 'Saira', sans-serif;
  --fuente-secundaria: 'ArgentumSans', sans-serif;
  --fuente-secundariaBold: 'ArgentumSans-Bold', sans-serif;
  --fuente-secundariaExtraBold: 'ArgentumSans-Bold', sans-serif;
}

.banner-container {
  position: relative;
  margin: 0;
}

.banner-container img {
  display: block;
  width: 100%;
  min-height: 10rem;
  max-height: 45rem;
  object-position: center;
  object-fit: cover;
}

.container-call-to-action {
  position: absolute;
  display: flex;
  flex-direction: column;
  color: #fff;
  gap: 15px;
  font-family: var(--fuente-secundaria);
  bottom: clamp(0.5rem, 10vw, 20rem);
  left: clamp(1rem, 6vw, 10rem);
}

.title {
  font-family: var(--fuente-secundariaExtraBold);
  margin: 0;
  font-size: clamp(1.2rem, 5vw, 3.2rem);
  /* font-size: clamp(2rem, 5vw, 3.2rem); */
  font-weight: 500;
  white-space: wrap;
  letter-spacing: clamp(2px, 1vw, 10px);
}

.btn-ver-mas {
  color: #fff;
  display: inline-block;
  width: fit-content; /* Ancho según su contenido + padding */
  padding-block: clamp(0.2rem, 3vw, 1rem);
  padding-inline: clamp(1rem, 3vw, 7rem);
  border: 1px solid #fff;
  border-radius: 8px;
  transition: background-color 0.5s;
}

.btn-ver-mas:hover {
  background-color: #fff;
  color: #000;
}