/* =====================================================
VARIABLES
===================================================== */

:root{
--grafito:#2c2e2e;
--grafito-oscuro:#1a1c1c;
--grafito-claro:#3d3f3f;

 
--acento:#ffffff;
--texto-suave:#b0b0b0;

--whatsapp:#25d366;

--zocalo-gris:rgba(229,229,229,.95);

--transition:.35s ease;
--radius:0px;
 

}

/* =====================================================
BASE
===================================================== */

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
overflow-x:hidden;

 
background:var(--grafito);
color:var(--acento);

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

letter-spacing:1px;
 

}

img{
display:block;
max-width:100%;
}

a{
color:inherit;
}

/* =====================================================
SPA
===================================================== */

#main-view,
#gallery-view{
transition:opacity .5s ease;
}

#gallery-view{
display:none;
opacity:0;

 
min-height:100vh;

padding:100px 10%;

background:var(--grafito-oscuro);
 

}

/* =====================================================
TIPOGRAFÍA
===================================================== */

h1{
margin:0;
font-weight:900;
text-transform:uppercase;
}

h2{
    margin:0 0 40px;

    text-align:center;

    font-size:clamp(.9rem,1.6vw,1.6rem);

    font-weight:300;

    letter-spacing:3px;

    line-height:1.2;

    color:#f2f2f2;
}

.subtitle{
display:block;
width:100%;
margin-bottom:20px;
text-align:center;
font-size:.7rem;
font-weight:700;
letter-spacing:5px;
text-transform:uppercase;
color:var(--texto-suave);
 

}

p{
max-width:800px;

 
margin-left:auto;
margin-right:auto;

text-align:center;

line-height:1.8;
font-weight:300;
 

}

/* =====================================================
NAVBAR
===================================================== */

.navbar{
position:sticky;
top:0;
z-index:1000;

 
height:80px;

padding:0 5%;

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

background:var(--zocalo-gris);
 

}

.logo-img{
height:60px;
object-fit:contain;
cursor:pointer;
}

.nav-left-group{
display:flex;
align-items:center;
gap:20px;
}

.nav-contact-info{
display:flex;
flex-direction:column;
justify-content:center;

 
gap:4px;

height:45px;

padding-left:20px;

border-left:
    1px solid rgba(44,46,46,.2);
 

}

.nav-right{
display:flex;
align-items:center;
}

.menu-links a{
margin-left:30px;

 
text-decoration:none;

font-size:.8rem;
font-weight:700;

text-transform:uppercase;

color:var(--grafito);

transition:var(--transition);
 

}

.menu-links a:hover{
opacity:.7;
}

.nav-contact-link{
display:flex;
align-items:center;
gap:8px;

 
text-decoration:none;

font-size:.68rem;
font-weight:400;

color:#888;
 

}

.nav-contact-link:hover{
color:var(--grafito);
}

.menu-icon{
width:24px;
height:16px;

 
margin-left:20px;

display:flex;
flex-direction:column;
justify-content:space-between;

cursor:pointer;
 

}

.menu-icon span{
width:100%;
height:1.5px;

 
background:var(--grafito);

border-radius:10px;
 

}

/* =====================================================
SIDEBAR
===================================================== */

.side-menu{
position:fixed;
top:0;
right:0;

width:400px;
height:100%;

padding:60px 40px;

overflow-y:auto;

background:var(--grafito-oscuro);

z-index:2000;

transform:translateX(100%);

transition:.5s cubic-bezier(
    .77,.2,.05,1
);

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

}

.side-menu.active{
transform:translateX(0);
}

.close-btn{
position:absolute;
top:20px;
right:30px;

 
font-size:2.5rem;

cursor:pointer;
 

}

.menu-section{
margin-top:40px;
}

.side-menu .menu-section a{
display:block;

 
padding:18px 0;

text-decoration:none;

font-size:.85rem;
font-weight:300;

letter-spacing:3px;
text-transform:uppercase;

border-bottom:
    1px solid rgba(255,255,255,.06);

opacity:0;
transform:translateX(20px);

transition:.4s ease;
 

}

.side-menu.active .menu-section a{
opacity:1;
transform:none;
}

.menu-overlay{
position:fixed;
inset:0;

 
display:none;

background:rgba(0,0,0,.7);

backdrop-filter:blur(3px);

z-index:1500;

opacity:0;

transition:opacity .4s ease;
 

}

.menu-overlay.active{
display:block;
opacity:1;
}

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

.hero-punto{
height:100vh;

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

text-align:center;

background:
    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.7)
    ),
    url('../assets/1portada.webp');

background-position:center;
background-size:cover;
background-attachment:fixed;

overflow:hidden;
 

}

.hero-punto h1{
margin:0;

 
font-size:
    clamp(2rem,5vw,3.5rem);

font-weight:300;

letter-spacing:12px;

opacity:0;

animation:
    simpleFadeIn 2s ease-out forwards .8s;
 

}

.hero-punto p{
    margin:0 auto 40px auto;

    max-width:800px;

    text-align:center;

    font-size:clamp(.75rem,1.8vw,1.1rem);

    letter-spacing:4px;

    text-transform:uppercase;

    color:#d8d8d8;

    opacity:0;

    animation:
        simpleFadeIn 1.5s ease-out forwards .9s;
}

.btn-hero{
display:inline-block;

 
padding:16px 45px;

border:1px solid #fff;

text-decoration:none;

font-size:.75rem;

letter-spacing:3px;
text-transform:uppercase;

transition:.4s ease;

opacity:0;

animation:
    simpleFadeIn 1.5s ease-out forwards 1.3s;
 

}

.btn-hero:hover{
background:#fff;
color:#000;

 
transform:translateY(-2px);
 

}

@keyframes simpleFadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* =====================================================
ESTUDIO / TEXT SECTION
===================================================== */

.text-section{
padding:120px 15%;

 
display:flex;
flex-direction:column;
align-items:center;

text-align:center;
 

}

.text-section p{
max-width:800px;
}


/* =====================================================
SERVICIOS
===================================================== */

.services-section{
padding:60px 2%;

 
background:var(--grafito-oscuro);

display:flex;
flex-direction:column;
align-items:center;

overflow:hidden;
 

}

.services-intro{
max-width:600px;

 
margin:0 auto;

color:var(--texto-suave);

line-height:1.7;
 

}

.services-container-flex{
width:100%;
max-width:1400px;

 
margin-top:40px;

padding:0 20px;

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
 

}

.service-column{
flex:1 1 280px;
max-width:320px;
}

.service-item{
position:relative;

 
min-height:220px;

display:flex;
flex-direction:column;

cursor:pointer;
 

}

.service-front-wrapper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

 
padding:45px 0;

transition:.4s ease;
 

}

.service-main-content{
display:flex;
flex-direction:column;
align-items:center;
}

.service-main-content i{
font-size:3rem;

 
margin-bottom:10px;

opacity:.7;
 

}

.service-main-content h4{
margin:0;

 
font-size:.8rem;

letter-spacing:4px;

text-transform:uppercase;

font-weight:300;
 

}

.number{
margin-top:10px;

 
opacity:.3;

font-size:1.5rem;
font-weight:200;
 

}

.service-overlay{
position:absolute;
inset:0;

 
padding:20px;

background:var(--grafito-oscuro);

opacity:0;
visibility:hidden;

transform:translateY(10px);

transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;
pointer-events:none; 

}

@media (hover:hover){

    .service-item:hover .service-overlay{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .service-item:hover .service-front-wrapper{
        transform:scale(.95);
    }

}

.service-overlay h5{
margin-bottom:20px;

 
text-align:left;

font-size:.75rem;

letter-spacing:2px;

text-transform:uppercase;

border-bottom:
    1px solid rgba(255,255,255,.2);

padding-bottom:10px;
 

}

.service-item.active .service-overlay{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:none;
}

.service-item.active .service-front-wrapper{
    transform:scale(.95);
}

.detail-item{
text-align:left;
margin-bottom:15px;
}

.detail-item strong{
display:block;

 
font-size:.65rem;

text-transform:uppercase;
 

}

.detail-item span{
display:block;

 
margin-top:4px;

font-size:.62rem;

line-height:1.5;

color:rgba(255,255,255,.6);
 

}

.services-action-wrapper{
margin-top:30px;
}

.services-action-wrapper a,
.gallery-section .btn-portfolio{
    display:inline-block;

    padding:16px 45px;

    border:1px solid #fff;

    text-decoration:none;

    font-size:.75rem;

    letter-spacing:3px;
    text-transform:uppercase;

    transition:.4s ease;
}

.services-action-wrapper a:hover,
.gallery-section .btn-portfolio:hover{
    background:#fff;
    color:#000;

    transform:translateY(-2px);
}

/* =====================================================
OBRAS DESTACADAS
===================================================== */

.gallery-section{
background:#0a0a0a;

 
padding:100px 0;

text-align:center;
 

}

.gallery-grid-4-vertical{
display:grid;

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

gap:4px;

margin:60px auto;

width:100%;
 

}

/* ---------- TARJETA ---------- */

.portfolio-item-vertical{
position:relative;

 
height:600px;

overflow:hidden;

cursor:pointer;

background:#000;
 

}

/* ---------- SISTEMA REVEAL ---------- */

.reveal-window{
overflow:hidden;
}

.reveal-background{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;
}


.reveal-background img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 1%;
transition:
transform 1.4s ease,
filter 1s ease; 
}


/* ---------- OVERLAY ---------- */

.reveal-overlay{
position:absolute;
inset:0;

 
background:
    linear-gradient(
        to top,
        rgba(0,0,0,.8) 0%,
        rgba(0,0,0,.15) 45%,
        rgba(0,0,0,.65) 100%
    );

transition:
    background .6s ease;
 

}

.portfolio-item-vertical:hover .reveal-overlay{
background:
linear-gradient(
to top,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.20) 45%,
rgba(0,0,0,.75) 100%
);
}

/* ---------- TEXTO ---------- */

.obra-top-info{
position:absolute;

 
top:25px;
left:25px;

z-index:10;
 

}

.obra-title-top{
margin:0; 
font-family:'Oswald',sans-serif;
font-size:1.3rem;
font-weight:500;
text-transform:uppercase;
transition:.5s ease;
 
}

.portfolio-item-vertical:hover .obra-title-top{
transform:translateY(-4px);
}

.obra-bottom-info{
position:absolute;

 
bottom:25px;
left:20px;

z-index:10;
 

}

.brand-vertical{
display:block;

 
transform:rotate(-90deg);

transform-origin:left bottom;

font-size:.75rem;

letter-spacing:1.5px;

opacity:.8;
 

}

.portfolio-vertical-overlay{

    position:absolute;
    inset:0;

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

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(4px);

    opacity:0;

    transition:.4s ease;

    z-index:20;

    pointer-events:none;
}

.overlay-content-vertical{

    transform:translateY(10px);

    opacity:0;

    transition:.4s ease;
}

.overlay-content-vertical span{

    color:#fff;

    font-size:.8rem;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:300;
}

.portfolio-item-vertical:hover .portfolio-vertical-overlay{

    opacity:1;
}

.portfolio-item-vertical:hover .overlay-content-vertical{

    opacity:1;

    transform:translateY(0);
}

.portfolio-item-vertical:hover .reveal-background img{

    transform:scale(1.02);

    filter:
        blur(.5px)
        brightness(.75);
}

.portfolio-category{

    margin-bottom:120px;

    padding-bottom:80px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


/* ---------- BRILLO ---------- */

.portfolio-item-vertical::after{
content:"";

 
position:absolute;
inset:0;

background:
    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.08) 50%,
        transparent 80%
    );

transform:translateX(-120%);

transition:transform 1s ease;

pointer-events:none;
 

}

.portfolio-item-vertical:hover::after{
transform:translateX(120%);
}



/* ---------- BOTÓN PORTFOLIO ---------- */

.btn-more{
    display:inline-block;

    padding:16px 45px;

    border:1px solid #fff;

    background:transparent;
    color:#fff;

    cursor:pointer;

    font-size:.75rem;

    letter-spacing:3px;
    text-transform:uppercase;

    transition:.4s ease;
}

.btn-more:hover{
    background:#fff;
    color:#000;

    transform:translateY(-2px);
}

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

.contact-section{
padding:120px 10%;
background:var(--grafito-oscuro);
}

.contact-container{
max-width:1200px;
margin:0 auto;
}

.contact-header{
text-align:center;
margin-bottom:80px;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1.5fr;
gap:60px;
}

/* ---------- INFO ---------- */

.contact-info-col{
display:flex;
flex-direction:column;
justify-content:center;
gap:30px;
}

.info-item{
display:flex;
align-items:center;
gap:20px;

 
padding:15px 0;

border-bottom:
    1px solid rgba(255,255,255,.05);
 

}

.info-icon{
width:30px;

 
font-size:1.4rem;

color:var(--texto-suave);

text-align:center;
 

}

.info-content p{
margin:0;

 
text-align:left;

font-size:1rem;
font-weight:600;

letter-spacing:1px;
 

}

.info-content a{
text-decoration:none;
}

.info-content a:hover{
color:var(--texto-suave);
}

/* ---------- FORM ---------- */

.contact-form-wrapper{
position:relative;

 
padding:50px;

background:var(--grafito);

border:
    1px solid var(--grafito-claro);
 

}

.draft-status{
position:absolute;

 
top:25px;
right:25px;

opacity:0;

font-size:.65rem;

color:var(--whatsapp);

transition:.3s ease;
 

}

.draft-status.active{
opacity:1;
}

.form-group{
margin-bottom:25px;
}

input,
textarea{
width:100%;

 
padding:18px;

border:none;
outline:none;

background:transparent;

color:white;

font-size:.9rem;

border-bottom:
    1px solid var(--grafito-claro);

transition:.3s ease;
 

}

input:focus,
textarea:focus{
border-bottom-color:white;
}

.submit-btn{
width:100%;

 
padding:20px;

border:none;

background:white;
color:var(--grafito);

font-weight:700;

letter-spacing:3px;
text-transform:uppercase;

cursor:pointer;

transition:.3s ease;
 

}

.submit-btn:hover{
letter-spacing:4px;
}

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

.main-footer{
padding:100px 10% 40px;

 
background:#0d0d0d;

border-top:
    1px solid #1a1a1a;
 

}

.footer-grid{
display:flex;
justify-content:space-between;
align-items:center;

 
gap:50px;

margin-bottom:40px;
 

}

.footer-info-col{
flex:1;
max-width:550px;
}

.footer-info-col p{
margin:0;

 
text-align:left;

color:#888;

font-size:.85rem;
 

}

.explore-col h5{
margin-bottom:20px;

 
font-size:.7rem;

letter-spacing:3px;

text-transform:uppercase;

color:var(--texto-suave);
 

}

.footer-links{
margin:0;
padding:0;

 
list-style:none;
 

}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
text-decoration:none;
color:#888;

 
transition:.3s ease;
 

}

.footer-links a:hover{
color:white;
padding-left:5px;
}

/* ---------- REDES ---------- */

.footer-social-section{
position:relative;

 
max-width:750px;

margin:40px auto 20px;

padding:50px 0 24px;

text-align:center;
 

}

.footer-social-section::before{
content:"";

 
position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

width:60%;
height:1px;

background:
    rgba(255,255,255,.2);
 

}

.footer-social-section h5{
margin-bottom:25px;

 
font-size:.75rem;

letter-spacing:3px;

text-transform:uppercase;
 

}

.social-row{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

    width:100%;
}

.social-item{
display:flex;
align-items:center;
gap:12px;

 
text-decoration:none;

color:var(--texto-suave);

transition:.3s ease;
 

}

.social-item i{
font-size:2.5rem;
}

.social-item:hover{
color:white;
transform:translateY(-2px);
}

.footer-bottom{
display:flex;
justify-content:center;

 
padding-top:40px;

border-top:
    1px solid #1a1a1a;
 

}

.footer-copyright{
opacity:.3;

 
font-size:10px;

letter-spacing:2px;

text-transform:uppercase;
 

}

/* =====================================================
WHATSAPP
===================================================== */

.wsp-container{
position:fixed;

 
bottom:30px;
right:30px;

z-index:10000;

display:flex;
align-items:center;
 

}

.wsp-tooltip{
margin-right:15px;

 
padding:10px 18px;

background:white;
color:var(--grafito);

border-radius:10px;

font-size:.75rem;

opacity:0;

transform:translateX(20px);

transition:.4s ease;
 

}

.wsp-container:hover .wsp-tooltip{
opacity:1;
transform:none;
}

.btn-wsp-circular{
position:relative;

 
width:65px;
height:65px;

border-radius:50%;

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

background:var(--whatsapp);

color:white;

text-decoration:none;

font-size:32px;
 

}

.btn-wsp-circular::before{
content:"";

 
position:absolute;
inset:0;

border-radius:50%;

background:var(--whatsapp);

opacity:.5;

z-index:-1;

animation:pulse-wsp 2s infinite;
 

}

@keyframes pulse-wsp{
from{
transform:scale(1);
opacity:.5;
}

 
to{
    transform:scale(1.6);
    opacity:0;
}
 

}

/* =====================================================
LIGHTBOX
===================================================== */

#lightbox{

    position:fixed;

    inset:0;

    display:none;

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

    background:rgba(0,0,0,.95);

    z-index:99999;
}

#lightbox-img{

    max-width:90vw;
    max-height:85vh;

    object-fit:contain;
}

#closeLightbox{

    position:absolute;

    top:25px;
    right:35px;

    font-size:3rem;

    color:#fff;

    cursor:pointer;

    z-index:100000;
}

.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#fff;

    font-size:3rem;

    cursor:pointer;
}

#prevBtn{
    left:25px;
}

#nextBtn{
    right:25px;
}

#lightbox-caption{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    letter-spacing:2px;

    text-transform:uppercase;
}
.category-main-image img,
.category-gallery img{
    cursor:pointer;
}


/* =====================================================
REVEAL
===================================================== */

.reveal:not(.portfolio-category){
opacity:0;
transform:translateY(40px);
transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal.active:not(.portfolio-category){
opacity:1;
transform:none;
}

/* ===== PORTFOLIO REVEAL ===== */



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

@media (max-width:992px){

 .contact-grid{
    display:flex;
    flex-direction:column;
}

.contact-form-wrapper{
    order:1;
}

.contact-info-col{
    order:2;
}
.contact-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    flex-direction:column;
    text-align:center;
}

.footer-info-col p{
    text-align:center;
}
 

}

@media (max-width:768px){

 .reveal-background img{

        object-fit:contain;

        object-position:center center;
    }
        
.category-layout{

    display:flex;

    flex-direction:column;
}

.category-content{

    order:1;
}

.category-main-image{

    order:2;

    margin-top:25px;
}

.portfolio-category{

    padding-bottom:40px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hero-punto h1{
    font-size:2rem;
    letter-spacing:5px;
    line-height:1.2;
}

.hero-punto p{
    max-width:90%;
    font-size:.8rem;
    letter-spacing:2px;
    line-height:1.6;
}
 
.navbar{
    flex-direction:column;
    height:auto;
    padding:10px;
}

.nav-contact-info{
    display:none;
}

.logo-img{
    height:32px;
}

.menu-links{
    display:flex;
    gap:10px;
}

.menu-links a{
    margin:0;
    font-size:.5rem;
}

.service-item{
    min-height:140px;
}

.service-front-wrapper{
    padding:20px 0;
}

.service-main-content i{
    font-size:1.8rem;
    margin-bottom:8px;
}

.service-main-content h4{
    font-size:.65rem;
    letter-spacing:2px;
}

.number{
    font-size:.9rem;
    margin-top:4px;
}

.service-overlay{
    display:flex;
    justify-content:center;
    align-items:center;

    padding:10px;
}

.service-overlay h5{
    margin:0;

    text-align:center;

    font-size:.7rem;

    letter-spacing:2px;

    border:none;
}

.service-overlay{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:12px;

    text-align:center;
}

.service-overlay h5{
    margin-bottom:8px;

    text-align:center;

    font-size:.75rem;

    letter-spacing:2px;

    border:none;

    padding:0;
}

.services-intro{
    font-size:.8rem;
    line-height:1.6;

    max-width:90%;
}

.detail-item{
    display:block;
}

.detail-item strong{
    display:none;
}

.detail-item span{
    display:block;

    font-size:.6rem;

    line-height:1.4;

    color:rgba(255,255,255,.75);

    text-align:center;
}

.services-container-flex{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);

    gap:12px;
}

.gallery-grid-4-vertical{
    grid-template-columns:
        repeat(2,1fr);

    gap:10px;
}

.portfolio-item-vertical{
    height:260px;
}


.text-section{
    padding:60px 8%;
}

#gallery-view .gallery-grid{
    grid-template-columns:
        repeat(2,1fr);
}

.info-content p{
        font-size:.8rem;
    }
.submit-btn{
    padding:14px;

    font-size:.75rem;

    letter-spacing:2px;
} 

}

/* ===== OBRAS DESTACADAS TOUCH ===== */

.portfolio-item-vertical:active .portfolio-vertical-overlay{

    opacity:1;
}

.portfolio-item-vertical:active .overlay-content-vertical{

    opacity:1;

    transform:translateY(0);
}

.portfolio-item-vertical:active .reveal-background img{

    transform:scale(1.02);

    filter:
        blur(.5px)
        brightness(.75);
}

@media (max-width:576px){

.section-title{
    font-size:1.1rem;
    letter-spacing:5px;
}

.social-row{
    flex-direction:column;
}
 
/* ===== EFECTO HERO SOLO EN MÓVIL ===== */

.reveal-background{
    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:1;
}

.portfolio-item-vertical{
    clip-path: inset(0);
}

}

@media (max-width:480px){
.footer-social-section{
    margin:20px auto 10px;

    padding:5px 0 2px;
}

.footer-social-section h5{
    margin-bottom:15px;

    font-size:.65rem;

    letter-spacing:2px;
}

.social-row{
    gap:20px;
}

    .social-item{
        font-size:.8rem;
        letter-spacing:.5px;
    }

    .social-item i{
        font-size:1.8rem;
    }

.social-item span{
    font-size:.3rem;
    letter-spacing:.5px;
}
.hero-punto h1{
    font-size:1.6rem;
    letter-spacing:3px;
}

.hero-punto p{
    max-width:85%;
    font-size:.75rem;
    letter-spacing:1px;
}
 
#gallery-view .gallery-grid{
    grid-template-columns:1fr;
}

.gallery-grid-4-vertical{
    display:grid;

    grid-template-columns:280px;

    justify-content:center;

    gap:20px;
}

    .portfolio-item-vertical{
            width:280px;
    height:280px;

    margin:0;
    }

    .obra-title-top{
        font-size:.8rem;
        font-weight:400;
    }


 
/* ===== EFECTO HERO SOLO EN MÓVIL ===== */

    .reveal-background{
        position:fixed;

        top:0;
        left:0;

        width:100vw;
        height:100vh;

        z-index:1;
    }

    .portfolio-item-vertical{
        clip-path: inset(0);
    }
}

/* =====================================================
PORTFOLIO PAGE
===================================================== */

.portfolio-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:120px;
}

.portfolio-header span{

 
font-size:.7rem;

letter-spacing:4px;

color:#999;
 

}

.portfolio-header h1{

 
margin-top:20px;

font-size:clamp(2rem,4vw,4rem);

font-weight:300;

letter-spacing:4px;
 

}

.back-home{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 40px;

    text-decoration:none;

    color:#fff;

    letter-spacing:2px;

    font-size:.75rem;

    transition:.3s ease;
}

#gallery-view{

    text-align:center;

    padding-top:60px;
}

#gallery-view .back-home{

    display:inline-block;

    margin-bottom:80px;
}

#gallery-view .subtitle{

    display:block;

    margin-bottom:20px;
}

#gallery-view h2{
    text-align:center;
    margin-bottom:50px;
}

/* =====================================================
CATEGORÍAS
===================================================== */

.portfolio-category{

 
margin-bottom:120px;
 

}

.category-layout{

 
display:grid;

grid-template-columns:1.2fr .9fr;

gap:40px;

align-items:stretch;
 

}

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

.category-main-image{

 
overflow:hidden;
 

}

.category-main-image img{

 
width:100%;
height:100%;

object-fit:cover;

display:block;

transition:transform .6s ease;
 

}

.category-main-image:hover img{

 
transform:scale(1.03);
 

}

/* =====================================================
CONTENIDO
===================================================== */

.category-content{

 
display:flex;

flex-direction:column;

justify-content:center;
 

}

.category-subtitle{

 
font-size:.65rem;

letter-spacing:3px;

color:#999;
 

}

.category-content h2{

 
margin:10px 0 25px;

font-size:2rem;

font-weight:300;

letter-spacing:3px;

text-transform:uppercase;
 

}

.category-content p{

 
color:#b5b5b5;

line-height:1.8;

max-width:450px;
 

}

/* =====================================================
GALERÍA PEQUEÑA
===================================================== */

.category-gallery{

 
display:grid;

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

gap:12px;

margin-top:30px;
 

}

.category-gallery img{

 
width:100%;

aspect-ratio:1.2;

object-fit:cover;

transition:transform .4s ease;
 

}

.category-gallery img:hover{

 
transform:scale(1.03);
 

}

/* =====================================================
BLOQUES ALTERNADOS
===================================================== */

.reverse .category-main-image{

 
order:2;
 

}

.reverse .category-content{

 
order:1;
 

}

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

@media (max-width:768px){

 
.category-layout{

    grid-template-columns:1fr;
}

.reverse .category-main-image,
.reverse .category-content{

    order:initial;
}

.portfolio-category{

    margin-bottom:80px;
}

.category-content h2{

    font-size:1.3rem;
}

.category-gallery{

    grid-template-columns:1fr;
}
 

}
/* ==========================================
PORTFOLIO CINEMÁTICO
========================================== */

.category-layout{

    opacity:0;

    transform:translateY(120px);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

.portfolio-category.active .category-layout{

    opacity:1;

    transform:translateY(0);
}