:root{
  --background-dark: transparent;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --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;
}

.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(2, 1fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    /*grid-template-columns: repeat(4, 1fr); */
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-l);
  }
}

.card{
  list-style: none;
  position: relative;
   border-radius: var(--spacing-l);
   flex: 0 0 calc((100% - 3 * var(--spacing-l)) / 4);
}

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

.card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.6) 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{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.7) saturate(0.5) contrast(1.2) blur(5px);
}

.card__content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-l);
}
.card__heading{
  color: var(--text-lighter);
  font-size: 2.5rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.5;
  text-align: center!important;
}
/*Panel Internos */
.titulo1{
	font-size: 2.5em;
	color: #003d20;
}
.titulo2{
	font-size: 2.5em;
	color: #3a7bfa;
}
.titulo3{
	font-size: 2.5em;
	color: #b83b2f;
}
.titulo4{
	font-size: 2.5em;
	color: #fa9c3a;
}
.titulo5{
	font-size: 2.5em;
	color: #3b7e7f;
}
.titulo6{
	font-size: 2.5em;
	color: #802798;
}
.titulo7{
	font-size: 2.5em;
	color: #1800ad;
}
.text1{
	font-size: 1.5em;
	text-align: justify;
}
.panel-green{
	background-color: #003d20;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-blue{
	background-color: #3a7bfa;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-red{
	background-color: #b83b2f;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-orange{
	background-color: #fa9c3a;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-cian{
	background-color: #3b7e7f;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-purple{
	background-color: #802798;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 80px;
}
.panel-darkblue{
	background-color: #1800ad;
	color: white;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
	height: 70px;
}
.panel-formato{
	background-color: lightgray;
	color: black;
	font-size: 1.5em;
	text-align: center;
	border-radius: 20px;
	margin-bottom: 1%;
	padding: 10px;
}
@media (max-width: 1024px) {
	.panel-red{
		height: auto;
	}
	.panel-green{
		height: auto;
	}
	.panel-blue{
		height: auto;
	}
	.panel-orange{
		height: auto;
	}
	.panel-cian{
		height: auto;
	}
	.panel-purple{
		height: auto;
	}
	.panel-darkblue{
		height: auto;
	}
}
.seccion-green {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-green::before,
.seccion-green::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #004d2c;
}

.texto-green {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-green::before,
.texto-green::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #004d2c;
  border-radius: 50%;
}
.seccion-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-blue::before,
.seccion-blue::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #3a7bfa;
}

.texto-blue {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-blue::before,
.texto-blue::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #3a7bfa;
  border-radius: 50%;
}
.seccion-red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-red::before,
.seccion-red::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #b83b2f;
}

.texto-red {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-red::before,
.texto-red::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #b83b2f;
  border-radius: 50%;
}
.seccion-orange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-orange::before,
.seccion-orange::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #fa9c3a;
}

.texto-orange {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-orange::before,
.texto-orange::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #fa9c3a;
  border-radius: 50%;
}
.seccion-cian {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-cian::before,
.seccion-cian::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #3b7e7f;
}

.texto-cian {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-cian::before,
.texto-cian::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #3b7e7f;
  border-radius: 50%;
}
.seccion-purple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-purple::before,
.seccion-purple::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #802798;
}

.texto-purple {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-purple::before,
.texto-purple::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #802798;
  border-radius: 50%;
}
.seccion-darkblue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 30px 0;
}

.seccion-darkblue::before,
.seccion-darkblue::after {
  content: "";
  width: 140px;
  height: 3px;
  background-color: #1800ad;
}

.texto-darkblue {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
	text-align: center;
	
}
.texto-darkblue::before,
.texto-darkblue::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #1800ad;
  border-radius: 50%;
}
@media (max-width: 600px) {

  .seccion-green {
    gap: 10px;
  }

  .seccion-green::before,
  .seccion-green::after {
    flex: 1;
    width: auto;
  }

  .texto-green {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-green::before,
  .texto-green::after {
    width: 8px;
    height: 8px;
  }/*FIN green*/
 .seccion-blue {
    gap: 10px;
  }

  .seccion-blue::before,
  .seccion-blue::after {
    flex: 1;
    width: auto;
  }

  .texto-blue {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-blue::before,
  .texto-blue::after {
    width: 8px;
    height: 8px;
  }/*FIN BLUE*/
  .seccion-red{
    gap: 10px;
  }

  .seccion-red::before,
  .seccion-red::after {
    flex: 1;
    width: auto;
  }

  .texto-red {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-red::before,
  .texto-red::after {
    width: 8px;
    height: 8px;
  }/*FIN RED*/
   .seccion-orange{
    gap: 10px;
  }

  .seccion-orange::before,
  .seccion-orange::after {
    flex: 1;
    width: auto;
  }

  .texto-orange {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-orange::before,
  .texto-orange::after {
    width: 8px;
    height: 8px;
  }/*FIN orange*/
  .seccion-cian{
    gap: 10px;
  }

  .seccion-cian::before,
  .seccion-cian::after {
    flex: 1;
    width: auto;
  }

  .texto-cian {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-cian::before,
  .texto-cian::after {
    width: 8px;
    height: 8px;
  }/*FIN CIAN*/
  .seccion-purple{
    gap: 10px;
  }
  .seccion-purple::before,
  .seccion-purple::after {
    flex: 1;
    width: auto;
  }

  .texto-purple {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-purple::before,
  .texto-purple::after {
    width: 8px;
    height: 8px;
  }/*FIN purple*/
  .seccion-darkblue{
    gap: 10px;
  }
  .seccion-darkblue::before,
  .seccion-darkblue::after {
    flex: 1;
    width: auto;
  }

  .texto-darkblue {
    font-size: 20px;
    gap: 12px;
    white-space: nowrap;
  }

  .texto-darkblue::before,
  .texto-darkblue::after {
    width: 8px;
    height: 8px;
  }/*FIN darkblue*/
}