/* ********** CONTENIDO CARD CSS  ***********************/

:root{
  --background-dark: #fff;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 18px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --text-light: rgba(255,255,255,0.75);
  --text-lighter: rgba(255,255,255,0.9);
  --width-container: 1200px;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*
html{
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

body{
  height: 100%;
}*/

.hero-section{
  align-items: center;
  background: var(--background-dark);
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(1, 9fr 9fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(2, 9fr 9fr); 
  }
}

.card{
  list-style: none;
  position: relative;
  height:250px;
}

.card:before{
  content: '';
  display: block;
  /*padding-bottom: 150%;*/
  width: 100%;
}

.card__background_gold{
	/*background-color: blue;
	background-image: linear-gradient(326deg, #F1CD6A 0%, #DBA514 74%);*/
	background: #F1CD6A;
	background: radial-gradient(circle,rgba(241, 205, 106, 1) 0%, rgba(219, 165, 20, 1) 50%);
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  /*filter: brightness(0.75) saturate(1.2) contrast(0.85);*/
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card__background_blue{
	background: #36539B;
	background: radial-gradient(circle,rgba(54, 83, 155, 1) 0%, rgba(32, 49, 92, 1) 50%);
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  /*filter: brightness(0.75) saturate(1.2) contrast(0.85);*/
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background_gold,
.card:hover .card__background_blue{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background_gold, 
.card-grid:hover > .card:not(:hover) .card__background_blue {
  filter: brightness(0.5) saturate(0.5) contrast(1.2) blur(20px);
}


.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
  
}


.card__category{
  /*color: var(--text-light);*/
  font-family: "Quetzalli Sans",sans-serif;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: var(--spacing-m);
  /*text-transform: uppercase;*/
}

.card__content .card__category i{
	
  font-size: 1.3em;
  position: absolute;
  right: 2rem;
}

.c_icono{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	border-radius: var(--spacing-l);
	margin: 15px 5px;
}
 .gold{
 	background-color: #DBA514;
 }
 
 .blue{
 	background-color: #20315C;
 }
 
.card__content .c_icono{
	font-size:4.5rem;
	color: white;
}
.card__heading{
	font-family: "Quetzalli Sans",sans-serif;
	width: 100%;
  color: var(--text-lighter);
  font-size: 1.75rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.1;
 
}

/******************************** SITIO DE INTERES **************************************/
.s_interes{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(326deg, #292B33 0%, #20315C 74%);
	
}
.s_title{
	font-family: 'Quetzalli Sans', sans-serif;
	text-align: center;
}

.s_title h3{
	font-size: 3.5em;
	font-weight: 600;
	color: #fff;
}

.s_title p{
	color: #fff;
	font-size: 1em;
}
.cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card_s {
  margin: 30px auto;
  width: 200px;
  height: 100px;
  border-radius: 20px;
  background-color: #fff;
	box-shadow: 5px 5px 10px 7px rgba(255,255,255,0.25), -5px -5px 10px 7px rgba(255,255,255,0.22);
  cursor: pointer;
  transition: 0.4s;
  overflow: hidden;
}

.card_s .card_image {
  width: inherit;
  height: inherit;
  border-radius: 20px;
  overflow: hidden;
}

.card_s .card_image img {
  width: inherit;
  height: inherit;
  object-fit: contain;
  border-radius: 20px;
}

.card_s .card_title {
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  font-family: "Quetzalli Sans",sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin-top: -50px;
  height: 40px;
}

.card_s:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 10px 7px rgba(255,255,255,0.25), 
    -5px -5px 10px 7px rgba(255,255,255,0.22);
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

@media all and (max-width: 500px) {
  .card-list {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}


/*
.card_s {
  margin: 30px auto;
  width: 300px;
  height: 300px;
  border-radius: 40px;
  background-image: url('https://i.redd.it/b3esnz5ra34y.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  transition: 0.4s;
}
*/