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


body {
    font-family: 'Raleway', sans-serif;
    color: #111;
    background: #fff;
}


/* =========================
   HEADER
========================= */

header {
    position: relative;
    display: block;

    padding: 7px 40px 0;

    background: #fff;
    border-bottom: 1px solid #e5e5e5;

    z-index: 10;
}


.logo {
    height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    font-weight: 400;

    letter-spacing: 0.08em;
}


.logo a {
    color: #111;
    text-decoration: none;
}


/* =========================
   MENU HAMBURGUESA
========================= */

.menu {
    position: static;
}


.menu summary {
    position: absolute;

    top: 18px;
    right: 40px;

    list-style: none;
    cursor: pointer;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.menu summary::-webkit-details-marker {
    display: none;
}


.menu summary span {
    display: block;

    width: 18px;
    height: 1px;

    background: #111;
}


/* =========================
   MENU DESPLEGABLE
========================= */

.menu nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e5e5e5;

    animation: menuDespliegue 0.35s ease-out;
}

@keyframes menuDespliegue {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.menu nav a {
    display: block;

    width: 100%;

    padding: 15px 0;

    text-align: center;

    text-decoration: none;

    color: #999999;

    font-size: 14px;
    font-weight: 400;

    border-bottom: 1px solid #eeeeee;
}


.menu nav a:last-child {
    border-bottom: none;
}


.menu nav a:hover {
    color: #888;
}


/* =========================
   GRILLA PRINCIPAL
========================= */

.obras-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 18px;
    row-gap: 18px;

    padding: 10px 10px 70px;
}


/* =========================
   TARJETAS
========================= */

.obra {
    position: relative;
    padding: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(20px);
    animation: entradaObra 0.8s ease-out forwards;
}

.obra:nth-child(1) {
    animation-delay: 0.05s;
}

.obra:nth-child(2) {
    animation-delay: 0.12s;
}

.obra:nth-child(3) {
    animation-delay: 0.19s;
}

.obra:nth-child(4) {
    animation-delay: 0.26s;
}

.obra:nth-child(5) {
    animation-delay: 0.33s;
}

.obra:nth-child(6) {
    animation-delay: 0.40s;
}

.obra:nth-child(7) {
    animation-delay: 0.47s;
}

.obra:nth-child(8) {
    animation-delay: 0.54s;
}

.obra:nth-child(9) {
    animation-delay: 0.61s;
}

.obra:nth-child(10) {
    animation-delay: 0.68s;
}

@keyframes entradaObra {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   IMAGEN
========================= */

.obra img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


/* =========================
   OVERLAY
========================= */

.obra::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(255, 255, 255, 0.82);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}


/* =========================
   TITULO
========================= */

.obra h2 {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    margin: 0;

    text-align: center;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.obra h2 a {
    color: #111;
    text-decoration: none;
}


.obra:hover::after {
    opacity: 1;
}


.obra:hover h2 {
    opacity: 1;
}


.obra p {
    display: none;
}


/* =========================================================
   TARJETAS CLICKEABLES — PROYECTOS
========================================================= */

.obra > a {
    position: relative;

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}


.obra > a img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


.obra > a::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(255, 255, 255, 0.82);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}


.obra > a:hover::after {
    opacity: 1;
}


.obra > a h2 {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    margin: 0;

    text-align: center;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0;

    transition: opacity 0.3s ease;

    color: #111;
}


.obra > a:hover h2 {
    opacity: 1;
}


/* =========================
   PÁGINAS INDIVIDUALES DE OBRAS
========================= */

.obra-detalle {
    padding: 20px 16px 80px;
}


.obra-imagenes {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


.obra-imagenes img {
    display: block;

    width: 100%;
    height: auto;

    margin-bottom: 30px;
}


/* =========================
   INFORMACIÓN DE OBRAS
========================= */

.obra-cabecera {
    margin-top: 5px;

    margin-bottom: 60px;
}


.obra-cabecera h1 {
    margin: 0 0 5px;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.obra-info {
    margin-top: 0;
}


.obra-info p {
    display: block;

    margin: 0 0 4px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1.45;

    color: #333;
}


/* =========================================================
   PÁGINAS INDIVIDUALES DE PROYECTOS
========================================================= */

.proyecto-detalle {
    padding: 20px 16px 80px;
}


/* =========================
   CARRUSEL
========================= */

.proyecto-carrusel {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


.carrusel-imagenes {
    width: 100%;
}


.carrusel-imagen {
    display: none;

    width: 100%;
    height: auto;
}


.carrusel-imagen.activa {
    display: block;
}


/* =========================
   FLECHAS
========================= */

.carrusel-anterior,
.carrusel-siguiente {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;

    background: rgba(255, 255, 255, 0.75);

    color: #111;

    font-family: Arial, sans-serif;

    font-size: 28px;

    font-weight: 300;

    line-height: 40px;

    cursor: pointer;
}


.carrusel-anterior {
    left: 15px;
}


.carrusel-siguiente {
    right: 15px;
}


.carrusel-anterior:hover,
.carrusel-siguiente:hover {
    background: rgba(255, 255, 255, 0.95);
}


/* =========================
   INFORMACIÓN DEL PROYECTO
========================= */

.proyecto-cabecera {
    margin-top: 30px;

    margin-bottom: 60px;
}


.proyecto-cabecera h1 {
    margin: 0 0 5px;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.proyecto-info {
    margin-top: 0;
}


.proyecto-info p {
    margin: 0 0 4px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1.45;

    color: #333;
}


/* =========================
   ESTUDIO
========================= */

.estudio {
    padding: 80px 40px 100px;
}


.estudio-texto {
    max-width: 700px;

    margin: 0 auto;
}


.estudio h1 {
    font-size: 28px;

    font-weight: 400;

    letter-spacing: 0.04em;

    margin-bottom: 50px;
}


.estudio p {
    font-size: 16px;

    font-weight: 300;

    line-height: 1.7;

    margin-bottom: 25px;
}


.estudio-firma {
    margin-top: 50px;

    font-size: 14px !important;

    line-height: 1.5 !important;
}


/* =========================
   CONTACTO
========================= */

.contacto {
    padding: 80px 40px 100px;
}


.contacto-texto {
    max-width: 700px;

    margin: 0 auto;
}


.contacto h1 {
    font-size: 28px;

    font-weight: 400;

    letter-spacing: 0.04em;

    margin-bottom: 50px;
}


.contacto p {
    font-size: 16px;

    font-weight: 300;

    line-height: 1.7;

    margin-bottom: 25px;
}


.contacto a {
    color: #111;

    text-decoration: none;
}


.contacto a:hover {
    color: #888;
}


.contacto-instagram {
    margin-top: 50px;
}


/* =========================
   PUBLICACIONES
========================= */

.publicaciones {
    padding: 50px 40px 100px;
}


.publicacion {
    max-width: 1100px;

    margin: 0 auto;
}


.publicacion-imagen {
    width: 100%;
}


.publicacion-imagen img {
    display: block;

    width: 100%;
    height: auto;
}


.publicacion-info {
    max-width: 700px;

    margin-top: 30px;
}


.publicacion-tipo {
    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 300;

    color: #999;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.publicacion-info h1 {
    margin-bottom: 15px;

    font-size: 20px;

    font-weight: 400;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.publicacion-descripcion {
    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 300;

    line-height: 1.7;

    color: #444;
}


.publicacion-datos {
    margin-bottom: 25px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1.6;

    color: #666;
}


.publicacion-link {
    color: #111;

    font-size: 12px;

    font-weight: 400;

    text-decoration: none;

    border-bottom: 1px solid #ccc;

    padding-bottom: 3px;
}


.publicacion-link:hover {
    color: #888;

    border-color: #888;
}


/* =========================
   FOOTER
========================= */

footer {
    padding: 70px 40px 35px;

    text-align: center;

    color: #aaa;
}


.volver-arriba {
    display: flex;

    width: 36px;
    height: 36px;

    margin: 0 auto 45px;

    border: 1px solid #ccc;

    align-items: center;
    justify-content: center;

    text-decoration: none;
}


.volver-arriba span {
    display: block;

    width: 10px;
    height: 10px;

    border-top: 2px solid #bbb;

    border-left: 2px solid #bbb;

    transform: rotate(45deg);

    margin-top: 5px;
}


.footer-copyright {
    font-size: 12px;

    font-weight: 300;

    color: #aaa;
}

.footer-instagram {
    display: inline-block;
    margin-bottom: 14px;
    color: #aaa;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-instagram:hover {
    color: #555;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

    .obras-grid {
        grid-template-columns: 1fr 1fr;

        column-gap: 10px;
        row-gap: 10px;

        padding: 10px 10px 50px;
    }


    header {
        padding-left: 20px;
        padding-right: 20px;
    }


    .menu summary {
        right: 20px;
    }


    .obra-detalle {
        padding: 15px 12px 60px;
    }


  .obra-imagenes {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

    .obra-cabecera {
        margin-top: 5px;
        margin-bottom: 40px;
    }


    .proyecto-detalle {
        padding: 15px 12px 60px;
    }


    .proyecto-cabecera {
        margin-top: 25px;
        margin-bottom: 40px;
    }


    .carrusel-anterior,
    .carrusel-siguiente {
        width: 34px;
        height: 34px;

        font-size: 24px;

        line-height: 34px;
    }


    .carrusel-anterior {
        left: 10px;
    }


    .carrusel-siguiente {
        right: 10px;
    }


    .publicaciones {
        padding: 30px 20px 70px;
    }


    .publicacion-info {
        margin-top: 25px;
    }

}


@media (max-width: 500px) {

    .obras-grid {
        grid-template-columns: 1fr;
    }


    .obra-detalle {
        padding-left: 10px;
        padding-right: 10px;
    }


    .proyecto-detalle {
        padding-left: 10px;
        padding-right: 10px;
    }


    .publicaciones {
        padding: 20px 10px 60px;
    }

}

/* =========================================
   HOVER ARQ.U — ESTILO MoGS
   ========================================= */

/* IMÁGENES */
.obra img {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* VELO BLANCO — OBRAS */
.obra::after {
    background: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition: opacity 0.6s ease;
}


/* VELO BLANCO — PROYECTOS */
.obra > a::after {
    background: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition: opacity 0.6s ease;
}


/* TÍTULO */
.obra h2,
.obra > a h2 {
    opacity: 0;
    transform: translate(-50%, -44%);
    transition:
        opacity 0.5s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* EVITAMOS DOBLE VELO EN LOS PROYECTOS */
.obra:has(> a)::after {
    display: none;
}


/* HOVER */
@media (hover: hover) {

    /* Zoom muy sutil de la imagen */
    .obra:hover img,
    .obra > a:hover img {
        transform: scale(1.025);
    }

    /* Aparición del velo */
    .obra:hover::after,
    .obra > a:hover::after {
        opacity: 1;
    }

    /* Entrada del título */
    .obra:hover h2,
    .obra > a:hover h2 {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}