.gp-galeria-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px 15px;
} .gp-galeria-titulo {
text-align: center;
margin-bottom: 30px;
}
.gp-galeria-titulo h2 {
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.gp-galeria-titulo h2 i {
margin-right: 8px;
} .gp-proyectos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 25px;
} .gp-proy-card {
border: 1px solid #dee2e6;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
}
.gp-proy-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} .gp-proy-card-img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
background: #e9ecef;
}
.gp-proy-card-img-placeholder {
width: 100%;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
background: #e9ecef;
}
.gp-proy-card-img-placeholder i {
font-size: 3em;
color: #adb5bd;
} .gp-proy-card-body {
padding: 18px 20px;
flex: 1;
}
.gp-proy-card-body h5 {
font-weight: 700;
color: #2c3e50;
margin-bottom: 8px;
font-size: 1.15em;
margin-top: 0;
}
.gp-desc-preview {
color: #6c757d;
font-size: 0.92em;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .gp-proy-card-footer {
padding: 10px 20px;
background: #f8f9fa;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.gp-badge-imgs {
font-size: 0.85em;
color: #6c757d;
}
.gp-badge-imgs i {
margin-right: 4px;
}
.gp-ver-link {
font-size: 0.9em;
font-weight: 600;
color: #0d6efd;
text-decoration: none;
}
.gp-ver-link i {
margin-right: 4px;
} .gp-sin-proyectos {
text-align: center;
padding: 60px 20px;
color: #6c757d;
grid-column: 1 / -1;
}
.gp-sin-proyectos i {
font-size: 3em;
margin-bottom: 15px;
display: block;
}
.gp-sin-proyectos h5 {
margin: 0 0 8px;
color: #6c757d;
}
.gp-sin-proyectos p {
margin: 0;
} .gp-loading {
text-align: center;
padding: 60px 20px;
color: #6c757d;
grid-column: 1 / -1;
font-size: 1.1em;
}
.gp-loading i {
margin-right: 8px;
} .gp-error {
text-align: center;
padding: 40px 20px;
color: #dc3545;
grid-column: 1 / -1;
}
.gp-error i {
font-size: 2em;
margin-bottom: 10px;
display: block;
} .gp-proyecto-detalle {
max-width: 960px;
margin: 0 auto;
padding: 0 15px 60px;
} .gp-detalle-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0 25px;
}
.gp-btn-volver {
display: inline-flex;
align-items: center;
gap: 8px;
color: #495057;
font-weight: 600;
font-size: 0.95em;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
border: 1px solid #dee2e6;
background: #fff;
transition: all 0.2s;
}
.gp-btn-volver:hover {
background: #f8f9fa;
color: #2c3e50;
border-color: #adb5bd;
text-decoration: none;
}
.gp-nav-proyectos {
display: flex;
gap: 8px;
}
.gp-nav-proyectos a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0d6efd;
font-weight: 600;
font-size: 0.9em;
text-decoration: none;
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #dee2e6;
background: #fff;
transition: all 0.2s;
}
.gp-nav-proyectos a:hover {
background: #e7f1ff;
border-color: #0d6efd;
text-decoration: none;
} .gp-detalle-titulo {
text-align: center;
margin-bottom: 30px;
}
.gp-detalle-titulo h2 {
font-weight: 700;
color: #2c3e50;
font-size: 2em;
margin: 0;
line-height: 1.3;
} .gp-detalle-hero {
margin-bottom: 35px;
}
.gp-detalle-hero img {
width: 100%;
max-height: 650px;
object-fit: cover;
display: block;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.gp-hero-placeholder {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: #e9ecef;
border-radius: 8px;
}
.gp-hero-placeholder i {
font-size: 4em;
color: #adb5bd;
} .gp-detalle-descripcion {
max-width: 750px;
margin: 0 auto 40px;
color: #495057;
font-size: 1.05em;
line-height: 1.8;
text-align: justify;
}
.gp-detalle-descripcion p {
margin-bottom: 1em;
} .gp-detalle-galeria {
display: flex;
flex-direction: column;
gap: 40px;
}
.gp-galeria-item img {
width: 100%;
display: block;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
.gp-imagen-leyenda {
text-align: center;
padding: 12px 20px 0;
color: #6c757d;
font-size: 0.95em;
font-style: italic;
} @media (max-width: 768px) {
.gp-detalle-titulo h2 {
font-size: 1.5em;
}
.gp-detalle-hero img {
max-height: 400px;
}
.gp-detalle-descripcion {
font-size: 0.95em;
}
.gp-detalle-nav {
flex-direction: column;
gap: 10px;
}
.gp-proyectos-grid {
grid-template-columns: 1fr;
}
}