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

@import url('https://fonts.googleapis.com/css2?family=Radley&family=Reggae+One&display=swap');

@font-face {
  font-family               : 'Reggae One';
  src                       : url('/fuente/ReggaeOne-Regular.ttf');
}

:root {

  --max-width               : 1200px;
  --primary-color           : #F44336;
  --primary-color-alt       : #ED4A21;
  --secondary-color         : #0057B8;
  --title-color             : #121F26;
  --text-color              : #57565C;
  --body-bg-color           : #FCFFFC;
  --white-color             : #ffffff;
  --color                   : var(--primary-color);
  --color-alt               : var(--primary-color-alt);
  --body-font               : 'Radley', serif;
  --title-font              : 'Reggae One', cursive;
  --header-height-small   : 1rem;
  --header-height         : 1.5rem;
  --section-spacing       : 2rem;
  --block-spacing         : 2rem;
  --body-line-height      : 1.4em;
  --title-line-height     : 1.1em;
  --h1-font-size          : 1.10rem;
  --h2-font-size          : 1.05rem;
  --h3-font-size          : .90rem;
  --big-font-size         : .85rem;
  --normal-font-size      : 0.75rem; 
  --small-font-size       : 0.65rem;
  --border-radius         : 0.75rem;
  --box-shadow            : 0 2px 2px rgba(36, 47, 66, 0.04);
}

@media screen and (min-width: 1024px) {

  :root {
    --header-height-small   : 1rem;
    --header-height         : 1.5rem;
    --section-spacing       : 3rem;
    --block-spacing         : 2.5rem;
    --h1-font-size          : 1.5rem;
    --h2-font-size          : 1.35rem;
    --h3-font-size          : 1.15rem;
    --big-font-size         : 1.15rem;      
    --normal-font-size      : 1rem;
    --small-font-size       : 0.85rem;
  }
}

body {
  display                   : flex;
  flex-direction            : column;
  min-height                : calc(100vh - var(--header-height));
  color                     : var(--text-color);
  padding-top               : var(--header-height-small);
  font-family               : var(--body-font);
  font-size                 : var(--normal-font-size);
  line-height               : var(--body-line-height);
  background-color          : var(--body-bg-color);
}

.cabecera {
  max-width                 : 30%;
  margin-left               : auto;
  margin-right              : auto;
}

a {
  color                     : var(--secondary-color);
  text-decoration           : none;
}

p {
  margin-top                : 0;
  font-family               : var(--body-font);
  color                     : var(--title-color)
}

h1 {
  max-width                 : 100%;
  color                     : var(--title-color);
  font-family               : var(--title-font);
  font-size                 : var(--h1-font-size);
  line-height               : var(--title-line-height);
  text-align                : center;
}

h2 {
  margin                    : 0 20px 7px 20px;
  color                     : var(--primary-color);
  font-family               : var(--title-font);
  font-size                 : var(--h2-font-size);
  line-height               : var(--title-line-height);
}

.sub {
  font-family               : var(--title-font);
  font-size                 : var(--big-font-size);
  color                     : var(--title-color);
  margin-top                : 1rem;
}

.sub-titulo-h2 {
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  margin-left               : auto;
  margin-right              : auto;
  font-size                 : var(--h2-font-size);
  border-top                : 2px solid #676F73;
  padding-top               : 1.25rem;
}

.sub-titulo2-h2 {
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  margin-left               : auto;
  margin-right              : auto;
  font-size                 : var(--h2-font-size);
}

h3 {
  margin-top                : 0;
  color                     : var(--title-color);
  font-family               : var(--title-font);
  line-height               : var(--title-line-height);
  font-size                 : var(--h3-font-size);
}

.sub-titulo-h3 {
  margin-top                : 0;
  color                     : var(--primary-color);
  font-family               : var(--title-font);
  font-size                 : var(--h3-font-size);
  text-align                : center;
}

@media screen and (min-width: 1024px) {
  
  .sub-titulo-h3 {
    text-align              : left;
  }
}

.parrafo-pc, 
.parrafo-pc-sub {
  max-width                 : 85%;
  margin                    : 0 auto;
  line-height               : var(--body-line-height);
  color                     : var(--text-color);
  margin-bottom             : 1.5rem;
}

.parrafo-pc-sub {
  color                     : var(--title-color);
}

.c-condic-a {
  margin-top                : 1rem;
  color                     : var(--title-color);
}

.boton-w {
  background-color          : var(--primary-color);
  color                     : var(--white-color);
  text-decoration           : none;
  border-radius             : 5px;
  padding                   : .5rem 1.25rem;
}

img {
  max-width                 : 100%;
  margin                    : 0 auto;
  display                   : block;
}

.icono {
  height                    : 100px;
}

.img-img {
  position                  : relative;
  height                    : 85px;
}

.iconos {
  height                    : 85px;
}

.iconos-rds {
  height                    : 65px;
}

@media screen and (min-width: 1024px) {

  .icono {
    height                  : 160px;
  }

  .img-img {
    height                  : 100px;
  }

  .img-img-2 {
    height                  : 150px;
  }
}

.img-angulo-volver {
  display                   : flex;
  justify-content           : start;
  align-items               : center;
  position                  : sticky;
  top                       : 0;
  left                      : 0;
  height                    : 2.5rem;
  width                     : 100%;
  background-color          : var(--body-bg-color);
  box-shadow                : var(--box-shadow);
  z-index                   : 3;
}

.img-angulo-volver-2 {
  display                   : flex;
  justify-content           : start;
  align-items               : center;
  position                  : sticky;
  top                       : 0;
  left                      : 0;
  height                    : 2.5rem;
  margin                    : 0 auto 2rem;
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  box-shadow                : var(--box-shadow);
  background-color          : var(--body-bg-color);
  border-top                : 2px solid #676F73;
}

.img-angulo-volver img,
.img-angulo-volver-2 img {
  height                    : 1.5rem;
  margin                    : 0 .25rem;
}

.img-angulo-volver h2 {
  margin                    : auto .5rem;
}

@media screen and (min-width: 1024px) {

  .img-angulo-volver,
  .img-angulo-volver-2 {
      height                : 3rem;
  }
  
  .img-angulo-volver img,
  .img-angulo-volver-2 img {
      height                : 2rem;
  }

  .img-angulo-volver h2 {
    margin                  : 0 auto;
  }
}

.redes-sociales, .plataformas-bancarias {
  display                   : flex;
  justify-content           : space-around;
  align-items               : center;
  flex-direction            : column;
}

.redes-sociales a, .plataformas-bancarias a {
  text-decoration           : none;
}

@media screen and (min-width: 281px) and (max-width: 1023px) {
  
  .redes-sociales {
    height                  : 95vh;
  }

  .plataformas-bancarias {
    height                  : 120vh;
    margin-top              : 2rem;
  }
}

@media screen and (min-width: 281px) and (max-width: 1023px) and (orientation: landscape) {
  
  .redes-sociales {
    flex-direction          : row;
    align-items             : normal;
    height                  : 85vh;
    margin-top              : 2rem;
  }

  .plataformas-bancarias {
    flex-direction          : row;
    align-items             : normal;
    height                  : 110vh;
    margin-top              : 2rem;
  }
}

@media screen and (min-width: 0) and (max-width: 280px) {
  
  .redes-sociales, .plataformas-bancarias {
    height                  : 90vh;
  }
}

@media screen and (min-width: 1024px) {
  
  .redes-sociales, .plataformas-bancarias {
    flex-direction          : row;
    justify-content         : space-around;
    height                  : 40vh;
  }
}

.capa,
.capa2,
.capa3,
.capa4,
.capa5,
.capa6,
.capa7 {
  position                  : fixed;
  top                       : 0;
  width                     : 100%;
  height                    : 100%;
  opacity                   : 0;
  transition                : opacity 0.35s;
  pointer-events            : none;
  z-index                   : 5;
}

.capa.active,
.capa2.active,
.capa3.active,
.capa4.active,
.capa5.active,
.capa6.active,
.capa7.active {
  opacity                   : 1;
  pointer-events            : initial;
}

.contenido-capa,
.contenido-capa2,
.contenido-capa3,
.contenido-capa4,
.contenido-capa5,
.contenido-capa6,
.contenido-capa7 {
  position                  : absolute;
  top                       : 50%;
  left                      : 50%;
  transform                 : translate(-50%, -50%);
  width                     : 100%;
  height                    : 100%;
  text-align                : center;
  background-color          : var(--body-bg-color);
  border-radius             : var(--border-radius);
  overflow                  : auto;
}

.contenido-capa h1,
.contenido-capa2 h1,
.contenido-capa3 h1,
.contenido-capa4 h1,
.contenido-capa5 h1,
.contenido-capa6 h1,
.contenido-capa7 h1,
.contenido-capa p,
.contenido-capa2 p,
.contenido-capa3 p,
.contenido-capa4 p,
.contenido-capa5 p,
.contenido-capa6 p,
.contenido-capa7 p {
  margin-bottom             : 1rem;
}

.seccion-servicios .contenido-interno {
  display                   : grid;
  gap                       : 4rem;
  justify-content           : center;
}

.seccion-servicios2 .contenido-interno2 {
  display                   : grid;
  gap                       : .5rem;
  justify-content           : center;
  border-top                : 2px solid #676F73;
  border-bottom             : 2px solid #676F73;
  padding                   : .5rem 0 .15rem;
}

.seccion-servicios .contenido-interno {
  grid-template-columns     : repeat(2, 1fr);
}

.seccion-servicios h2,
.seccion-servicios2 h2 {
  margin-bottom             : var(--block-spacing);
}

.seccion-contenido {
  margin-bottom             : var(--section-spacing);
} 

.seccion-contenido h1,
.seccion-contenido h2 {
  text-align                : center;
}

.contenido-interno,
.contenido-interno2 {
  width                     : calc(100% - 2rem);
  max-width                 : var(--max-width);
  margin                    : 0 auto;
}

.servicio-articulo {
  display                   : flex;
  flex-direction            : column;
  align-items               : center;
  text-align                : center;
  max-width                 : 300px;
  margin                    : 0 auto;
}

.lista-articulo {
  display                   : grid;
  grid-template-columns     : repeat(1, 1fr);
  gap                       : var(--block-spacing);
  margin                    : 1rem auto;
  text-align                : left;
  padding                   : 0 1.25rem;
}

.lista-articulo-redes {
  display                   : grid;
  grid-template-columns     : 2fr;
}

.lista-articulo h2 {
  margin-bottom             : .5rem;
}

.lista-articulo img {
  height                    : 130px;
}

.lista-box ul{
  list-style-type           : none;
  padding                   : 0;
}

.ul-cp5 {
  margin-left               : 2.5rem;
}

.lista-box li{
  margin-bottom             : 1rem;
}

.check {
  display                   : inline-block;
  height                    : 5px;
  width                     : 10px;
  border-bottom             : 2px solid var(--primary-color);
  border-left               : 2px solid var(--primary-color);
  transform                 : rotate(-45deg);
  margin-right              : 5px;
  margin-bottom             : 4px;
}

.lista-articulo > div:first-of-type {
  order                     : 2;
}

@media screen and (min-width: 1024px) {

  .lista-articulo {
    width                   : 70%;
    grid-template-columns   : 1fr 1fr;
    margin-top              : 40px;
  }

  .lista-articulo h2 {
    text-align              : center;
  }

  .lista-articulo img {
    height                  : 250px;
  }

  .lista-articulo:nth-child(odd) > div:nth-of-type(2) {
    order                   : 2;
  }
}

.footer-principal {
  display                   : flex;
  justify-content           : center;
  align-items               : center;
  margin-top                : auto;
  padding                   : 40px 0 10px;
  width                     : 100%;
  height                    : var(--header-height-small);
  font-size                 : var(--small-font-size);
  border-top                : 1px solid #ededed;
}

.footer-principal p {
  margin-bottom             : 2rem;
  color                     : var(--text-color);
  text-align                : center;
}