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

.gallery-section{
background:#f4f4f4;
text-align:center;
}

.gallery-section h2{
margin-bottom:20px;
}

.gallery-intro{
max-width:900px;
margin:20px auto 60px auto;
text-align:center;
color:#555;
line-height:1.7;
}


/* =====================================================
   GRID PROYECTOS
   ===================================================== */

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}


/* =====================================================
   ITEM PROYECTO
   ===================================================== */

.project-item{
position:relative;
overflow:hidden;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
transition:transform .35s ease, box-shadow .35s ease;
}

.project-item:hover{
transform:translateY(-8px);
box-shadow:0 25px 60px rgba(0,0,0,0.25);
}

.project-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 1.1s ease;
}


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

.project-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:25px;

background:linear-gradient(
to top,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.55) 40%,
rgba(0,0,0,0.10) 100%
);

color:white;
opacity:0;
transition:opacity .35s ease;
}

.project-overlay h3{
font-size:18px;
margin-bottom:8px;
font-weight:600;
}

.project-overlay p{
font-size:14px;
line-height:1.6;
color:#e2e2e2;
}

.project-overlay a{
display:inline-block;
margin-top:10px;
color:#f97316;
text-decoration:none;
font-weight:600;
font-size:14px;
}


/* =====================================================
   HOVER EFECTOS
   ===================================================== */

.project-item:hover{
transform:translateY(-4px);
box-shadow:0 22px 55px rgba(0,0,0,0.18);
}

.project-item:hover img{
transform:scale(1.08);
}

.project-item:hover .project-overlay{
opacity:1;
}


/* =====================================================
   GALERÍA DE LOGOS
   ===================================================== */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:40px;
}

.gallery img{
width:100%;
border-radius:8px;
display:block;
transition:transform .6s ease, box-shadow .6s ease;
}

.gallery img:hover{
transform:scale(1.05);
box-shadow:0 15px 40px rgba(0,0,0,0.2);
}


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

@media(max-width:1100px){

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

}

@media(max-width:768px){

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

.project-overlay{
position:relative;
opacity:1;
background:white;
color:#222;
}

.project-overlay p{
color:#444;
}

.project-overlay a{
color:#f97316;
}

.project-item{
display:flex;
flex-direction:column;
}

.project-item img{
height:auto;
}

.project-overlay{
padding:20px;
}

}



/* =====================================================
   LOGO SAMPLES (SUBPÁGINAS)
   ===================================================== */

.logo-samples{
text-align:center;
}

.logo-samples-intro{
max-width:800px;
margin:20px auto 50px auto;
line-height:1.7;
color:#555;
}

.logo-samples-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
max-width:1200px;
margin:auto;
}

.logo-sample{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 10px 35px rgba(0,0,0,0.08);
transition:transform .35s ease, box-shadow .35s ease;
}

.logo-sample img{
width:100%;
height:auto;

filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12));
background:#ffffff;
padding:12px;
}

.logo-sample:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.logo-samples-cta{
margin-top:45px;
}

@media(max-width:900px){

.logo-samples-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.logo-samples-grid{
grid-template-columns:1fr;
}

}


/* =================================
REDISEÑO LOGOS - ANTES DESPUES
================================= */

.redesign-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:50px;
margin-top:60px;
max-width:1400px;
margin-left:auto;
margin-right:auto;
}

@media(max-width:768px){

.redesign-grid{
grid-template-columns:1fr;
gap:35px;
}

}

.redesign-item img{
width:100%;
border-radius:12px;
box-shadow:0 15px 35px rgba(0,0,0,.25);
transition:transform .8s ease;
}

.redesign-item img:hover{
transform:scale(1.06);
}

.redesign-caption{
margin-top:12px;
font-size:14px;
color:#666;
text-align:center;
}


/* =====================================================
   GALERIA LOGOTIPOS PAGE
   AISLADO - NO AFECTA A OTRAS PÁGINAS
   ===================================================== */

.galeria-logos-page{
background:#ffffff;
}

/* HERO */

.galeria-logos-hero{
position:relative;
min-height:82vh;
display:flex;
align-items:center;
justify-content:center;
padding:140px 8% 110px 8%;
background:url('/img/backgrounds/slide1-logo-design.webp') center center/cover no-repeat;
overflow:hidden;
}

.galeria-logos-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.58) 45%, rgba(0,0,0,0.78) 100%);
z-index:1;
}

.galeria-logos-hero-inner{
position:relative;
z-index:2;
max-width:980px;
margin:0 auto;
text-align:center;
color:#fff;
}

.galeria-logos-kicker{
display:inline-block;
font-size:14px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:#f97316;
margin-bottom:18px;
}

.galeria-logos-hero h1{
font-size:52px;
line-height:1.12;
margin-bottom:24px;
color:#fff;
}

.galeria-logos-hero-text{
max-width:840px;
margin:0 auto 30px auto;
font-size:19px;
line-height:1.75;
color:#f1f1f1;
text-align:center;
}

.galeria-logos-hero-cta{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.galeria-logos-hero-trust{
display:flex;
justify-content:center;
gap:18px 28px;
flex-wrap:wrap;
margin-top:28px;
font-size:14px;
color:#dddddd;
}

.galeria-logos-hero-trust span{
position:relative;
padding:0 4px;
}

/* BARRA DE PRUEBA */

.galeria-logos-proof{
background:#111;
padding:28px 8%;
}

.galeria-logos-proof-inner{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.galeria-logos-proof-item{
text-align:center;
color:#fff;
}

.galeria-logos-proof-item strong{
display:block;
font-size:38px;
line-height:1;
color:#f97316;
margin-bottom:10px;
}

.galeria-logos-proof-item span{
display:block;
font-size:15px;
line-height:1.5;
color:#d9d9d9;
}

/* CONTAINER */

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

/* INTRO */

.galeria-logos-intro h2,
.galeria-logos-filters h2,
.galeria-logos-grid-section h2,
.galeria-logos-value h2,
.galeria-logos-links h2,
.galeria-logos-faq h2{
text-align:center;
font-size:36px;
margin-bottom:22px;
}

.galeria-logos-intro p,
.galeria-logos-grid-intro,
.galeria-logos-filters-intro{
max-width:920px;
margin-left:auto;
margin-right:auto;
line-height:1.8;
color:#444;
}

/* FILTROS VISUALES */

.galeria-logos-filter-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:45px;
}

.galeria-logos-filter-card{
background:#ffffff;
border:1px solid rgba(0,0,0,0.06);
border-radius:16px;
padding:30px;
box-shadow:0 12px 30px rgba(0,0,0,0.06);
text-align:left;
transition:transform .25s ease, box-shadow .25s ease;
}

.galeria-logos-filter-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 42px rgba(0,0,0,0.10);
}

.galeria-logos-filter-card h3{
font-size:21px;
margin-bottom:12px;
}

.galeria-logos-filter-card p{
margin:0;
line-height:1.7;
color:#555;
text-align:left;
}

/* GRID LOGOS */

.galeria-logos-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:34px;
margin-top:50px;
}

.galeria-logos-item{
background:#ffffff;
border-radius:16px;
overflow:hidden;
box-shadow:0 14px 34px rgba(0,0,0,0.10);
border:1px solid rgba(0,0,0,0.04);
transition:transform .28s ease, box-shadow .28s ease;
}

.galeria-logos-item:hover{
transform:translateY(-6px);
box-shadow:0 24px 56px rgba(0,0,0,0.16);
}

.galeria-logos-item img{
width:100%;
aspect-ratio:3 / 2;
object-fit:contain;
display:block;
background:#ffffff;
padding:22px;
}

.galeria-logos-caption{
padding:22px 22px 24px 22px;
text-align:left;
}

.galeria-logos-caption h3{
font-size:19px;
margin:0 0 8px 0;
}

.galeria-logos-caption p{
margin:0;
font-size:15px;
line-height:1.6;
color:#555;
text-align:left;
}

/* VALOR APORTADO */

.galeria-logos-value-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:45px;
}

.galeria-logos-value-card{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:32px;
backdrop-filter:blur(6px);
}

.galeria-logos-value-card h3{
margin:0 0 14px 0;
font-size:22px;
color:#fff;
}

.galeria-logos-value-card p{
margin:0;
text-align:left;
line-height:1.75;
color:#e4e4e4;
}

/* CAJAS DE NAVEGACIÓN */

.galeria-logos-links-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:26px;
margin-top:45px;
}

.galeria-logos-link-box{
display:block;
background:#ffffff;
border-radius:16px;
padding:30px;
text-decoration:none !important;
border:1px solid rgba(0,0,0,0.06);
box-shadow:0 12px 32px rgba(0,0,0,0.06);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
color:#222 !important;
}

.galeria-logos-link-box:visited{
color:#222 !important;
}

.galeria-logos-link-box:hover{
transform:translateY(-4px);
box-shadow:0 20px 46px rgba(0,0,0,0.12);
border-color:#f97316;
background:#fffaf5;
text-decoration:none !important;
}

.galeria-logos-link-box h3,
.galeria-logos-link-box h3:visited{
margin:0 0 12px 0;
font-size:22px;
color:#222 !important;
border-bottom:none !important;
}

.galeria-logos-link-box p,
.galeria-logos-link-box p:visited{
margin:0;
color:#555 !important;
line-height:1.7;
text-align:left;
border-bottom:none !important;
}

.galeria-logos-link-box:hover h3{
color:#f97316 !important;
}

.galeria-logos-link-box:hover p{
color:#444 !important;
}

/* FAQ PROPIA */

.galeria-logos-faq-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:26px;
margin-top:45px;
}

.galeria-logos-faq-item{
background:#fff;
border:1px solid rgba(0,0,0,0.06);
border-radius:16px;
padding:28px;
box-shadow:0 10px 28px rgba(0,0,0,0.05);
}

.galeria-logos-faq-item h3{
margin:0 0 14px 0;
font-size:21px;
line-height:1.35;
}

.galeria-logos-faq-item p{
margin:0;
text-align:left;
line-height:1.75;
color:#555;
}