/* grid-contenedor-footer */

@supports(display: grid) {

  .grid-contenedor-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-AJ"
      "barra-final"
      "franja-Gov-Co-footer";
  }

  .franja-AJ {
    grid-area: franja-AJ;
  }

  .barra-final {
    grid-area: barra-final;
  }

  .franja-Gov-Co-footer {
    grid-area: franja-Gov-Co-footer;
  }
}

/* -> grid-contenedor-footer */


/* grid-contenedor-panel-font-size-go-up */

@supports(display: grid) {

  .grid-contenedor-franja-AJ {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto;
    grid-template-areas: "entidad"
      "logo-aj-visible"
      "nombre-obra"
      "isbn"
      "actualizacion"
      "control-versiones"
      "creditos"
  }

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

    .grid-contenedor-franja-AJ {
      display: grid;
      grid-row-gap: 10px;
      grid-column-gap: 1rem;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "logo-aj-visible ."
        "nombre-obra actualizacion"
        "isbn control-versiones"
        "creditos entidad";
    }
  }

  .logo-aj-visible {
    grid-area: logo-aj-visible;
  }

  .nombre-obra {
    grid-area: nombre-obra;
  }

  .actualizacion {
    grid-area: actualizacion;
  }

  .isbn {
    grid-area: isbn;
  }

  .control-versiones {
    grid-area: control-versiones;
  }

  .creditos {
    grid-area: creditos;
  }

  .entidad {
    grid-area: entidad;
  }
}

/* -> grid-contenedor-panel-font-size-go-up */


/* grid-contenedor-panel-botones-letter-size */

@supports(display: grid) {

  .grid-contenedor-panel-inferior-botones-letter-size {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: "panel-boton-font-menos-sencillo panel-boton-font-normal-sencillo panel-boton-font-mas-sencillo";
  }

  @media screen and (min-width: 768px) {
    /* El botón font-menos aparece para resoluciones mayores a 768px */

    .grid-contenedor-panel-inferior-botones-letter-size {
      grid-gap: 10px;
    }
  }

  .panel-boton-font-menos-sencillo {
    grid-area: panel-boton-font-menos-sencillo;
  }

  .panel-boton-font-normal-sencillo {
    grid-area: panel-boton-font-normal-sencillo;
  }

  .panel-boton-font-mas-sencillo {
    grid-area: panel-boton-font-mas-sencillo;
  }
}

/* -> grid-contenedor-panel-botones-acciones */


/* grid-contenedor-franjas-barra-final */

@supports(display: grid) {

  .grid-contenedor-barra-final {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(10, 110px);
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 100px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 95px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 85px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 84px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 85px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 70px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 78px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 75px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 70px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 65px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 65px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 70px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 62px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 65px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 65px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 68px);
    }
  }

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

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(10, 65px);
    }
  }

  .franja-blanca-inferior {
    grid-column-start: 1;
    grid-column-end: span 24;
    grid-row-start: 1;
    grid-row-end: span 3;
  }

  .franja-roja-inferior {
    grid-column-start: 1;
    grid-column-end: span 24;
    grid-row-start: 4;
    grid-row-end: span 12;
  }

  .contacto {
    grid-column-start: 2;
    grid-column-end: span calc(24 - 2);
    grid-row-start: 1;
    grid-row-end: span 14;
  }

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

    .contacto {
      grid-row-start: 2;
      /* Hasta 20221006 estaba en 1 */
      /* Agregado en 20221006 */
      grid-row-end: span 8;
      /* Hasta 20221006 estaba en 9 */
      /* Agregado en 20221006 */
    }
  }

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

    .contacto {
      grid-column-start: 3;
      grid-column-end: span calc(24 - 4);
      grid-row-start: 1;
      /* Agregado en 20221006 */
      grid-row-end: span 9;
      /* Agregado en 20221006 */
    }
  }

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

    .contacto {
      grid-column-start: 4;
      grid-column-end: span calc(24 - 6);
    }
  }

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

    .contacto {
      grid-column-start: 4;
      /* Hasta 20221006 estaba en 6 */
      grid-column-end: span calc(24 - 6);
      /* Hasta 20221006 estaba en - 10 */
    }
  }

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

    .contacto {
      grid-column-start: 6;
      /* Hasta 20221006 estaba en 8 */
      grid-column-end: span calc(24 - 10);
      /* Hasta 20221006 estaba en 14 */
    }
  }

}

/* -> grid-contenedor-franjas-barra-final */


/* grid-contenedor-contacto */

@supports(display: grid) {

  .grid-contenedor-contacto {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "left-panel-contacto"
      "right-panel-contacto";
  }

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

    .grid-contenedor-contacto {
      grid-template-columns: 1.25fr 0.75fr;
      grid-template-areas: "left-panel-contacto right-panel-contacto";
      grid-column-gap: 15px;
    }
  }

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

    .grid-contenedor-contacto {
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 20px;
    }
  }

  .left-panel-contacto {
    grid-area: left-panel-contacto;
  }

  .right-panel-contacto {
    grid-area: right-panel-contacto;
  }
}

/* -> grid-contenedor-contacto */


/* grid-contenedor-left-panel-contacto */

@supports(display: grid) {

  .grid-contenedor-left-panel-contacto {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-principal-footer"
      "titulo-auxiliar-footer"
      "datos-contacto"
      "redes-sociales"
      "menu-inferior";
  }

  .titulo-principal-footer {
    grid-area: titulo-principal-footer;
  }

  .titulo-auxiliar-footer {
    grid-area: titulo-auxiliar-footer;
  }

  .datos-contacto {
    grid-area: datos-contacto;
  }

  .redes-sociales {
    grid-area: redes-sociales;
  }

  .menu-inferior {
    grid-area: menu-inferior;
  }
}

@supports(display: grid){
  .iconos-redes-footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "icono-face-footer icono-ig-footer icono-x-footer icono-youtube-footer icono-linke-footer";
  }

  .icono-face-footer{
    grid-area: icono-face-footer;
  }
  
  .icono-ig-footer{
    grid-area: icono-ig-footer;
  }

  .icono-x-footer{
    grid-area: icono-x-footer;
  }
  
  .icono-youtube-footer{
    grid-area: icono-youtube-footer;
  }
  
  .icono-linke-footer{
    grid-area: icono-linke-footer;
  }
}