html,
body{

height:100%;

margin:0;

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

background:#ffffff;

}

#mainHeader{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.4s;

}

.navbar{

background:transparent;

padding-top:25px;

}

.navbar-brand{

font-size:2rem;

font-weight:300;

letter-spacing:1px;

}

.nav-link{

color:#ffffff!important;

font-size:1rem;

margin-left:18px;

}
/* =======================================================
   HERO
======================================================= */

#hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:90px 70px;

    background:linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.35)
    );

}

.hero-info h1{

    color:#fff;

    font-size:1.9rem;

    font-weight:300;

    margin:0;

}

.hero-info p{

    color:#fff;

    font-size:1rem;

    letter-spacing:.5px;

    margin-top:6px;

    opacity:.9;

}

.hero-button{

    display:inline-block;

    margin-top:20px;

    color:#fff;

    text-decoration:none;

    border:1px solid rgba(255,255,255,.8);

    padding:10px 20px;

    font-size:.95rem;

    transition:.3s;

}

.hero-button:hover{

    background:#fff;

    color:#000;

}

.hero-scroll{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:2rem;

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:.2;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

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

    }

    100%{

        opacity:.2;

        transform:translate(-50%,0);

    }

}
/* ===========================
   Mﾃ天ILES
=========================== */

@media (max-width:768px){

    .hero-info h1{
        font-size:1.35rem;
    }

    .hero-info p{
        font-size:.85rem;
    }

    .hero-overlay{
        padding:45px 30px;
    }

}
/* ===========================================
   PÁGINAS INTERNAS
=========================================== */

/*=========================
  CABECERA OBRAS
==========================*/

.page-header{

    margin-top:75px;

    text-align:center;

    padding-bottom:8px;

}

.page-header h1{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    margin:0;

    font-size:2.15rem;

    font-weight:300;

}

.page-header h1 span{

    font-size:1rem;

    font-weight:400;

    color:#777;

    line-height:1;

}
/* ===========================
   MENÚ PÁGINAS INTERNAS
=========================== */

.navbar-brand{
    color:#222 !important;
}

.nav-link{
    color:#222 !important;
}

.nav-link:hover{
    color:#777 !important;
}
/* =====================================================
   OBRAS
===================================================== */

main{

    max-width:1400px;

    margin:0 auto;

    padding:0 50px 80px;

}

.page-header{

    margin-top:120px;      /* antes 140 */

    margin-bottom:40px;    /* antes 60 */

    text-align:center;

}

.page-header h1{

    font-size:3.5rem;      /* antes 4rem */

    font-weight:300;

    letter-spacing:2px;    /* antes 3px */

    margin-bottom:10px;    /* antes 15 */

}

.page-header p{

    font-size:1rem;        /* antes 1.1 */

    color:#777;

}

}

/* Barra superior */

.gallery-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #ededed;

    border-bottom:1px solid #ededed;

    padding:10px 0;

    margin:18px 0 28px;

    font-size:.90rem;

    color:#666;

    letter-spacing:.2px;

}

.toolbar-left,
.toolbar-center,
.toolbar-right{

    flex:1;

}

.toolbar-center{

    text-align:center;

}

.toolbar-right{

    text-align:right;

}

/* Galería */

/* ===========================
   GALERÍA
=========================== */

.gallery-grid{

    columns:4 280px;

    column-gap:32px;

}

.gallery-item{

    break-inside:avoid;

    margin-bottom:32px;

    cursor:pointer;

}

.gallery-photo{

    width:100%;

    height:auto;

    display:block;

    border-radius:2px;

    transition:.35s;

}

.gallery-item{

    transition:.30s;

}

.gallery-item:hover{

    transform:translateY(-2px);

}

.gallery-item:hover .gallery-photo{

    transform:scale(1.01);

    box-shadow:0 8px 24px rgba(0,0,0,.10);

}

.gallery-item h3{

    margin:14px 0 5px;

    font-size:1rem;

    font-weight:500;

    color:#222;

    letter-spacing:.2px;

}

.gallery-item p{

    margin:0;

    font-size:.85rem;

    color:#8c8c8c;

}

/* Responsive */

@media(max-width:1100px){

.gallery-grid{

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

}

}

@media(max-width:800px){

.gallery-grid{

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

}

}

@media(max-width:600px){

main{

padding:0 20px 60px;

}

.gallery-toolbar{

flex-direction:column;

gap:15px;

}

.toolbar-left,
.toolbar-center,
.toolbar-right{

text-align:center;

}

.gallery-grid{

grid-template-columns:1fr;

}

}
/*=========================
  BARRA DE GALERÍA
==========================*/

.gallery-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1280px;

    margin:45px auto 55px;

    padding:12px 0;

    border-top:1px solid #ededed;

    border-bottom:1px solid #ededed;

    font-size:.90rem;

    color:#666;

}

.toolbar-left,
.toolbar-center,
.toolbar-right{

    flex:1;

}

.toolbar-center{

    text-align:center;

}

.toolbar-right{

    text-align:right;

}

.toolbar-left{

    cursor:pointer;

}

.toolbar-right{

    cursor:pointer;

}