:root { --separa: 4px; }
* { 
    box-sizing: border-box;
    transition: all 0.3s;
  }
html { 
    box-sizing       : border-box;
    font-family      : sans-serif;
    font-size        : 16px;
    color            : #fff;
    background-color : hsla(0, 0%, 20%, 0.5);
}
*, *::after, *::before {
    box-sizing : inherit;
    margin     : 0;
    padding    : 0;
}

body {
    max-width  : 100vw;
    min-height : 100vh;
    position   : relative;
}
body::after {
  content    : "";
  width      : 100%;
  min-height : 100%;
  position   : absolute;
  top        : 0;
  left       : 0;
  z-index    : -2;
  opacity  : 1;
  background-image: url(img/textura.png);
}


/* --- Dispositivos móviles: Phone ---------------- */

h1{
    /* background-color: hsl(180, 20%, 50%); */
    text-align: center;
    padding: 2px;
    margin: 8px;
}
/*img{
    max-width: 200px;
    height: auto;
    margin: 0 10vw;
}*/
footer {text-align: center;margin: 2em;}
h3{ 
    background-color: rgba(135,46,92, 1);
    padding: 0.5em 1em 0.5em 2em;
    align-items: center;
}

.grid{
    display: grid;
    grid-template-rows: repeat(3, 75px 50px repeat(4, 230px) 230 50px);
    grid-gap: 8px;
}
[class^="grid__item"]{padding: 10px; }
.no{padding: 10px 0; }
.page{
    max-width: 900px;
    margin: 1em auto;
    width: 93vw;
    padding: 1px;
}
.alto {height: 90%}
.luz:hover{background-color: hsla(342, 100%, 20%, 0.2); }

main {
    max-width: 800px;
    width: 98%;
    min-height: 96vh;
    margin: 2vh auto;
  }
.galeria {
    max-width       : 100%;
    line-height     : 0;
    padding         : var(--separa);
    padding-right   : 0;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-around;
  }
  .item {
    padding: var(--separa);
    width: 180px;
  }
  .item img {
    max-width : 100%;
    height    : auto;
    opacity   : 0.4;
    outline   : 3px solid #fff;
  }
  .item img:hover {
    opacity : 1;
    cursor  : pointer;
  }
  .modal {
    display: none;
  }
  .modal:target {
    display          : block;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100vw;
    height           : 100%;
    display          : flex;
    background-color : rgba(0,0,0,0.6);
  }
  .imagen {
    margin          : auto;
    width           : 100%;
    display         : flex;
    justify-content : center;
    align-items     : center;
  }
  .imagen_h {
    margin          : auto;
    width           : 100%;
    display         : flex;
    justify-content : center;
    align-items     : center;
  }
  @keyframes zoom {
    0%   { opacity: 0.2; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1);}
  }
  .imagen a { margin: 0 4px; }
  .imagen_h a { margin: 0 4px; }
  .imagen  img {
    max-width : 100%;
    width     : 80vw;
    height    : auto;
    border    : 8px solid #fff;
    animation : zoom 0.5s ease-in-out;
    position  : relative;
  }
  .imagen_h  img {
    max-width : 100%;
    width     : 80vw;
    height    : auto;
    border    : 8px solid #fff;
    animation : zoom 0.5s ease-in-out;
    position  : relative;
  }
  .imagen a:nth-child(2)::after {
    content       : "X";
    width         : 40px; height: 40px;
    line-height   : 40px;
    text-align    : center;
    font-size     : 2em;
    border-radius : 50%;
    border        : 2px solid hsla(0, 0%, 0%, 0.3);
    background    : hsla(0, 0%, 0%, 0.5);
    color         : hsla(0, 100%, 50%, 0.5);
    position      : absolute;
    top           : 1vh;left: 1vw;
    z-index       : 1;
  }
  .imagen_h a:nth-child(2)::after {
    content       : "X";
    width         : 40px; height: 40px;
    line-height   : 40px;
    text-align    : center;
    font-size     : 2em;
    border-radius : 50%;
    border        : 2px solid hsla(0, 0%, 0%, 0.3);
    background    : hsla(0, 0%, 0%, 0.5);
    color         : hsla(0, 100%, 50%, 0.5);
    position      : absolute;
    top           : 1vh;left: 1vw;
    z-index       : 1;
  }
  .imagen a:nth-child(2):hover::after {
    border        : 2px solid hsla(0, 0%, 100%, 0.6);
  }
  .imagen_h a:nth-child(2):hover::after {
    border        : 2px solid hsla(0, 0%, 100%, 0.6);
  }
  .imagen a:nth-child(2) {
    margin : 0;
    height : 100%;
  }
  .imagen_h a:nth-child(2) {
    margin : 0;
    height : 100%;
  }
  .ant,.sig {
    width  : 0px; height: 0px;
    border : 20px solid transparent;
  }
  .ant { border-right: 20px solid hsla(0, 100%, 100%, 0.8); }
  .sig { border-left: 20px solid hsla(0, 100%, 100%, 0.8); }
  .ant:hover { border-right: 20px solid hsla(0, 100%, 50%, 0.8); }
  .sig:hover { border-left: 20px solid hsla(0, 100%, 50%, 0.8); }


/* --- Dispositivos móviles: Tablet --------------- */
@media screen and (min-width: 568px) {
/*body{background-color: rgba(51, 153, 102, 1); }*/
h1{margin: 15px 0; }
img{ margin: 1px; }
.grid{
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: 90px 90px 250px 250px 50px;
}

.grid__item--6{ grid-column: span 6; }
.grid__item--5{ grid-column: span 5; }
.grid__item--4{ grid-column: span 4; }
.grid__item--3{ grid-column: span 3; }
.grid__item--2{ grid-column: span 2; }
.grid__item--1{ grid-column: span 1; }

/*.ancho {width: 85%}
.alto {height: auto}*/

.item {text-align: center; margin: 1em auto; padding: 1em;}
[class^="grid__item"]{max-height: 260px;}

.imagen img {
    max-height : 600px;
    height:   80vw;
    width:    auto;
  }

.imagen_h{
    max-width : 600px;
    width:   70vw;
    height: auto;
}
.horizontal {
  max-width : 600px;
  width:   70vw;
  height: auto;
}
}




/* --- Dispositivos de escritorio: Desktop -------- */
@media screen and (min-width: 768px) {
 /*body{background-color: rgba(51, 153, 102, 1) } */
.grid{ grid-template-rows: 90px 50px 260px 260px 50px;}
.ancho {width: 90%}
.alto {height: auto}

.imagen, .vertical {
    max-height: 600px;
    height:   80vw;
    width:    auto;
  }

  .horizontal {
    max-width : 900px;
    width:   70vw;
    height: auto;
}

}

/* ··· colores básicos ····························· */
.black     { background-color: rgba(0, 0, 0, 1);       }
.gray      { background-color: rgba(128, 128, 128, 1); }
.white     { background-color: rgba(255, 255, 255, 1); }
.cyan      { background-color: rgba(0, 255, 255, 1);   }
.teal      { background-color: rgba(0, 128, 128, 0.8);   }
.blue      { background-color: rgba(0, 0, 255, 1);     }
.steelblue { background-color: rgba(70, 130, 180, 1);  }
.yellow    { background-color: rgba(255, 255, 0, 1);   }
.gold      { background-color: rgba(255, 215, 0, 1);   }
.orange    { background-color: rgba(254,118,30, 1); }
.peru      { background-color: rgba(205, 133, 63, 1);  }
.tomato    { background-color: rgba(255, 99, 71, 1);   }
.coral     { background-color: rgba(255, 127, 80, 1);  }
.pink      { background-color: rgba(255, 192, 203, 1); }
.red       { background-color: rgba(212,10,24, 1);     }
.salmon    { background-color: rgba(250, 128, 114, 1); }
.tan       { background-color: rgba(210, 180, 140, 1); }
.green     { background-color: rgba(0, 128, 0, 1);     }
.lime      { background-color: rgba(0, 255, 0, 1);     }
.olive     { background-color: rgba(128, 128, 0, 1);   }
.azul      { background-color: rgba(58,119,138, 0.9);  }
.naranja   { background-color: rgba(241,68,28, 1);     }
.tierra    { background-color: rgba(157,21,21, 1);     }
.c1        { background-color: rgba(61,17,44, 1);      }
.c2        { background-color: rgba(135,46,92, 1);     }
.c3        { background-color: rgba(170,9,14, 0.8);    }
.c4        { background-color: rgba(220, 0, 0, 0.82);  }
.c5        { background-color: rgba(245,140,15, 0.95); }
.c6        { background-color: rgba(15,147,152, 0.95); }