@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: "Inter", sans-serif;
  color: black;
}

a {
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  color: #4D6FFF;
}

header a {
  color: white;
}

header {
  padding: 1%;
  display: flex;                
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #1428A0;
  color: white;
}

nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin-bottom: 0%;
  padding-left: 0%;
}

h2 {
  margin-top: 1rem;
}

main p {
  margin-bottom: 1%;
}

.no-espacio {
  margin-bottom: 0;
}

.img-lineas img {
  width: 48%;
  height: auto;       
  object-fit: cover;
}

.img-lineas {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 1%;
}

.sin-items {
  list-style: none;
  padding-left: 0;
}

img {
  width: 100%;
}

main ul {
  padding-left: 20px;
  margin-bottom: 0%;
}

footer {
  text-align: center;
  background-color: #1428A0;
  padding: 0.5rem;
  color: white;
}

footer p {
  margin-bottom: 0%;
}

.img-fade {
  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

h1 {
  font-family: "Manrope", sans-serif;
  font-weight: 900;
}

iframe {
  width: 100%;
}

.contenedor-grid-s{
  display: grid;
  grid-template-areas: 
  "caracteristicaP caracteristicaP caracteristicaP caracteristicaP"
  "textoPB imgPBP imgPBP textoPP"
  "imgPU textoPU textoPE imgPE"
  "caracteristicaC caracteristicaC caracteristicaC caracteristicaC"
  ". imgCBP textoCBP ."
  "textoCU imgCU textoCE imgCE"
  "caracteristicaB caracteristicaB caracteristicaB caracteristicaB"
  "textoBB textoBP textoBU textoBE"
  ;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px repeat(2, 400px) 100px 200px 200px 100px 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
  justify-items: center;
}

.caracteristicaP {
  grid-area: caracteristicaP;
}

.textoPB {
  grid-area: textoPB;
}

.imgPBP {
  grid-area: imgPBP;
}

.textoPP {
  grid-area: textoPP;
}

.imgPU {
  grid-area: imgPU;
}

.textoPU {
  grid-area: textoPU;
}

.textoPE {
  grid-area: textoPE;
}

.imgPE {
  grid-area: imgPE;
}

.caracteristicaC {
  grid-area: caracteristicaC;
}

.imgCBP {
  grid-area: imgCBP;
}

.textoCBP {
  grid-area: textoCBP;
}

.textoCU {
  grid-area: textoCU;
}

.imgCU {
  grid-area: imgCU;
}

.textoCE {
  grid-area: textoCE;
}

.imgCE {
  grid-area: imgCE;
}

.caracteristicaB {
  grid-area: caracteristicaB;
}

.textoBB {
  grid-area: textoBB;
}

.textoBP {
  grid-area: textoBP;
}

.textoBU {
  grid-area: textoBU;
}

.textoBE {
  grid-area: textoBE;
}

.contenedor-grid-s .img-vert {
  max-height: 400px;
}

.contenedor-grid-s img{
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
}

.contenedor-grid-zflip {
  display: grid;
  grid-template-areas: 
  "texPE imaP texPP"
  "texCF imaC imaC"
  "texCP imaC imaC"
  "texCG imaC imaC"
  "texP texA texB"
  ;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 400px repeat(3,133px) 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
  justify-items: center;
}

.texPE {
  grid-area: texPE;
}

.imaP {
  grid-area: imaP;
}

.texPP {
  grid-area: texPP;
}

.texCF {
  grid-area: texCF;
}

.imaC {
  grid-area: imaC;
}

.texCP {
  grid-area: texCP;
}

.texCG {
  grid-area: texCG;
}

.texP {
  grid-area: texP;
}

.texA {
  grid-area: texA;
}

.texB {
  grid-area: texB;
}

.contenedor-grid-zflip img {
  max-height: 400px;
  object-fit: contain;
  border-radius: 10px;
}

.contenedor-grid-zfold {
  display: grid;
  grid-template-areas: 
  "textPE imagP textPP"
  "textCF imagC textP"
  "textCG imagC textA"
  "textCP imagC textB"
  "textCT imagC textG"
  ;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 400px repeat(4, 100px);
  justify-content: center;
  align-items: center;
  text-align: center;
  justify-items: center;
}

.textPE {
  grid-area: textPE;
}

.imagP {
  grid-area: imagP;
}

.textPP {
  grid-area: textPP;
}

.textCF {
  grid-area: textCF;
}

.imagC {
  grid-area: imagC;
}

.textCG {
  grid-area: textCG;
}

.textCP {
  grid-area: textCP;
}

.textCT {
  grid-area: textCT;
}

.textP {
  grid-area: textP;
}

.textA {
  grid-area: textA;
}

.textB {
  grid-area: textB;
}

.textG {
  grid-area: textG;
}

.textA, .textB, .textG, .textP {
  padding: 2rem;
}

.contenedor-grid-zfold img {
  max-height: 400px;
  object-fit: contain;
  border-radius: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%);
}

.row>*{
  margin-top: calc(var(--bs-gutter-x) * .5);
  margin-bottom: calc(var(--bs-gutter-x) * .5);;
}

@media (max-width:480px){
  header {
    justify-content: center;
  }

  .row {
    margin-left: 0%;
    margin-right: 0%;
  }

  main {
    margin:0.5rem;
  }

  .contenedor-grid-s{
    grid-template-areas: 
    "caracteristicaP"
    "textoPP"
    "textoPB"
    "imgPBP"
    "textoPU"
    "imgPU"
    "textoPE"
    "imgPE"
    "caracteristicaC"
    "textoCBP"
    "imgCBP"
    "textoCU"
    "imgCU"
    "textoCE"
    "imgCE"
    "caracteristicaB"
    "textoBB"
    "textoBP"
    "textoBU"
    "textoBE"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,80px) auto 80px 200px 80px 200px 80px 160px repeat(2,200px) auto 150px 200px repeat(5,80px);
    justify-content: center;
    align-items: center;
    text-align: center;
    justify-items: center;
  }
  .contenedor-grid-s .img-vert {
    max-height: 200px;
  }

  .contenedor-grid-s img{
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
  }

  .contenedor-grid-zfold{
    grid-template-areas: 
    "textPE"
    "textPP"
    "imagP"
    "textCF"
    "textCG"
    "textCP"
    "textCT"
    "imagC"
    "textP"
    "textA"
    "textB"
    "textG"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,50px) 200px repeat(4,80px) 200px repeat(2,80px) 50px 100px;
  }
  .contenedor-grid-zfold img {
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
  }

  .contenedor-grid-zflip{
    grid-template-areas: 
    "texPE"
    "texPP"
    "imaP"
    "texCF"
    "texCP"
    "texCG"
    "imaC"
    "texP"
    "texA"
    "texB"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,50px) 200px repeat(3,80px) 200px repeat(2,80px) 50px;
  }
  .contenedor-grid-zflip img {
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
  }
}

main {
  margin:0.5rem;
}