/* Sala de concreto - Galería */

body {

    margin:0;
    padding:60px;

    color:#e8e8e8;

    font-family:Arial, Helvetica, sans-serif;

    min-height:100vh;

    background:

    /* luz superior */
    radial-gradient(
        ellipse at 50% 0%,
        rgba(255,255,255,.25),
        transparent 45%
    ),

    /* sombras de concreto */
    radial-gradient(
        ellipse at 20% 80%,
        rgba(0,0,0,.25),
        transparent 50%
    ),

    radial-gradient(
        ellipse at 90% 40%,
        rgba(255,255,255,.08),
        transparent 40%
    ),

    /* grano */
    radial-gradient(
        rgba(0,0,0,.12) 1px,
        transparent 1px
    );

    background-size:
    100% 500px,
    700px 700px,
    600px 600px,
    8px 8px;

    background-color:#858582;

}

    /* grano pequeño */
    radial-gradient(
        rgba(255,255,255,.12) 1px,
        transparent 1px
    ),

    radial-gradient(
        rgba(0,0,0,.10) 1px,
        transparent 1px
    );

    background-size:
    700px 500px,
    600px 600px,
    7px 7px,
    11px 11px;

}


/* Capa de profundidad */

body::before {

    content:"";

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        120deg,
        rgba(255,255,255,.08),
        rgba(0,0,0,.15)
    );

    pointer-events:none;

}


/* Encabezado */

header {

    max-width:1000px;

    margin:auto;

    padding:60px 20px;

    text-align:center;

}


h1 {

    font-size:60px;

    font-weight:300;

    letter-spacing:8px;

    text-transform:uppercase;

}


.subtitulo {

    color:#d0d0d0;

    font-size:18px;

}


/* Zona principal */

main {

    max-width:1100px;

    margin:auto;

    padding:50px;

    background:rgba(220,220,215,.08);

    box-shadow:
    inset 0 0 80px rgba(0,0,0,.25);

}


/* Tarjetas / obras */

.galeria {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:50px;

}


/* Marco de obra */

.galeria img {

    width:100%;

    background:#eee;

    padding:20px;

    box-shadow:

    0 30px 50px rgba(0,0,0,.45),

    0 5px 10px rgba(0,0,0,.3);

}


.galeria img:hover {

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.5);

}


/* Pie */

footer {

    margin-top:100px;

    text-align:center;

    color:#bbb;

    font-size:14px;

}