:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #FFC107;
    --secundario: #0097A7;
    --gris: #757575;
    --grisClaro: #DFE9F3;
    --verde: #4caf50;
    --verdeClaro: #e8f5e9;
}

/* ========== GLOBALES ========== */
html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-size: 16px;
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100%);
}

.contenedor {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========== TIPOGRAFÍA ========== */
h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 2.8rem;
}
h3 {
    font-size: 1.8rem;
}
h1, h2, h3 {
    text-align: center;
}

/* ========== BOTONES ========== */
.boton {
    background-color: var(--secundario);
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 1rem;
    font-size: 1.6rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
    width: 90%;
    text-align: center;
    border: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .boton {
        width: auto;
    }
}

.boton:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.boton-primario {
    background-color: var(--primario);
    color: var(--oscuro);
}

.boton-primario:hover {
    background-color: #e6ac00;
}

.boton-secundario {
    background-color: transparent;
    color: var(--oscuro);
    border: 2px solid var(--oscuro);
}

.boton-secundario:hover {
    background-color: var(--oscuro);
    color: var(--blanco);
}

.boton-grande {
    padding: 1.5rem 4rem;
    font-size: 1.8rem;
}

.sombra {
    box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.48);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
}

/* ========== UTILIDADES ========== */
.w-sm-100 {
    width: 100%;
}

@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }
}

.flex {
    display: flex;
}

.alinear-derecha {
    justify-content: flex-end;
}

.section-subtitle {
    text-align: center;
    color: var(--gris);
    margin-bottom: 4rem;
    font-size: 1.8rem;
    font-weight: normal;
}

.resaltado {
    color: var(--primario);
}

/* ========== HEADER ========== */
.titulo {
    text-align: center;
    font-size: 3.8rem;
    padding: 2rem 0;
}

.titulo span {
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

/* ========== NAVEGACIÓN ========== */
.nav-bg {
    background-color: var(--secundario);
}

.navegacion-principal {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;
        justify-content: space-between;
    }
}

.navegacion-principal a {
    display: block;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.navegacion-principal a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primario);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navegacion-principal a:hover {
    background-color: var(--primario);
    color: var(--oscuro);
}

.navegacion-principal a:hover::after {
    width: 80%;
}

/* ========== HERO NUEVO ========== */
.hero-nuevo {
    background: linear-gradient(135deg, var(--secundario) 0%, var(--primario) 100%);
    padding: 8rem 2rem;
    margin-bottom: 4rem;
}

.hero-contenido-flex {
    display: grid;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 768px) {
    .hero-contenido-flex {
        grid-template-columns: 1.5fr 1fr;
    }
}

.hero-texto {
    color: var(--blanco);
}

.hero-titulo {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    text-align: left;
}

@media (min-width: 768px) {
    .hero-titulo {
        font-size: 4.8rem;
    }
}

.hero-descripcion {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    opacity: 0.95;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.stat-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.stat-numero {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1;
}

.stat-texto {
    font-size: 1.4rem;
    margin-top: 0.5rem;
    opacity: 0.9;
}

.hero-ctas {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hero-imagen {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.foto-perfil {
    width: 100%;
    max-width: 35rem;
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 5px solid var(--blanco);
}

.hero-badge {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--verde);
    color: var(--blanco);
    padding: 1rem 2rem;
    border-radius: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hero-badge svg {
    width: 2rem;
    height: 2rem;
}

/* ========== CLIENTES ========== */
.clientes-section {
    padding: 4rem 0;
    text-align: center;
}

.clientes-intro {
    font-size: 1.6rem;
    color: var(--gris);
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.clientes-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 3rem;
    align-items: center;
    margin: 0 auto;
    max-width: 100rem;
}

.cliente-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: var(--blanco);
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

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

.cliente-logo img {
    max-width: 100%;
    height: auto;
    max-height: 6rem;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.cliente-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ========== SOBRE MÍ ========== */
.sobre-mi-section {
    margin: 6rem auto;
    padding: 4rem 3rem;
}

.sobre-mi-grid {
    display: grid;
    gap: 4rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .sobre-mi-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

.sobre-mi-texto h2 {
    text-align: left;
    margin-bottom: 2rem;
}

.texto-destacado {
    font-size: 2rem;
    line-height: 1.6;
    color: var(--secundario);
    font-weight: 600;
    margin-bottom: 2rem;
}

.sobre-mi-texto p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--gris);
    margin-bottom: 2rem;
    text-align: justify;
}

.tecnologias-principales {
    margin-top: 3rem;
}

.tecnologias-principales h3 {
    text-align: left;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--oscuro);
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tech-tag {
    padding: 0.8rem 1.5rem;
    background: var(--primario);
    color: var(--oscuro);
    border-radius: 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tech-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.sobre-mi-destacados {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.destaque-card {
    background: var(--blanco);
    padding: 2.5rem;
    border-radius: 1rem;
    border-left: 4px solid var(--primario);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.destaque-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.destaque-icono {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.destaque-card h3 {
    text-align: left;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--oscuro);
}

.destaque-card p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--gris);
}

/* ========== PORTAFOLIO ========== */
.portafolio-section {
    margin: 6rem 0;
}

.proyectos-grid {
    display: grid;
    gap: 4rem;
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .proyectos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.proyecto-card {
    background: var(--blanco);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

.proyecto-card.visible {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.proyecto-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.proyecto-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--secundario), var(--primario));
    color: var(--blanco);
}

.proyecto-tipo {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.proyecto-fecha {
    font-size: 1.4rem;
    opacity: 0.9;
}

.proyecto-content {
    padding: 2.5rem;
}

.proyecto-content h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--oscuro);
    text-align: left;
    line-height: 1.3;
}

.proyecto-descripcion {
    color: var(--gris);
    margin-bottom: 2rem;
    line-height: 1.8;
    font-size: 1.5rem;
    text-align: left;
}

.proyecto-caracteristicas {
    margin-bottom: 2rem;
    background: var(--grisClaro);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.proyecto-caracteristicas h4 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--oscuro);
    text-align: left;
}

.proyecto-caracteristicas ul {
    list-style: none;
    padding-left: 0;
}

.proyecto-caracteristicas li {
    font-size: 1.4rem;
    color: var(--gris);
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
}

.proyecto-caracteristicas li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: bold;
}

.proyecto-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tool-tag {
    padding: 0.8rem 1.5rem;
    background: var(--grisClaro);
    border-radius: 2rem;
    font-size: 1.2rem;
    color: var(--oscuro);
    font-weight: 600;
    transition: all 0.3s ease;
}

.tool-tag:hover {
    background: var(--primario);
    transform: scale(1.05);
}

.proyecto-impacto {
    background: var(--verdeClaro);
    border-left: 4px solid var(--verde);
    padding: 1.5rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

.proyecto-impacto strong {
    color: #2e7d32;
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* ========== TESTIMONIOS ========== */
.testimonios-section {
    margin: 6rem auto;
    padding: 4rem 3rem;
}

.testimonios-grid {
    display: grid;
    gap: 3rem;
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .testimonios-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonio-card {
    background: var(--blanco);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.3s ease;
}

.testimonio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.testimonio-comillas {
    font-size: 6rem;
    color: var(--primario);
    line-height: 1;
    opacity: 0.3;
    position: absolute;
    top: 1rem;
    left: 2rem;
}

.testimonio-texto {
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--gris);
    margin-bottom: 2rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.testimonio-autor {
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
    border-top: 2px solid var(--grisClaro);
}

.testimonio-autor strong {
    font-size: 1.5rem;
    color: var(--oscuro);
    margin-bottom: 0.5rem;
}

.testimonio-autor span {
    font-size: 1.3rem;
    color: var(--gris);
}

/* ========== SERVICIOS ========== */
.servicios-section {
    margin: 6rem 0;
}

.servicios-grid {
    display: grid;
    gap: 3rem;
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .servicios-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.servicio-card {
    background: var(--blanco);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid var(--primario);
}

.servicio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.servicio-icono {
    color: var(--secundario);
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.servicio-card h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--oscuro);
}

.servicio-card > p {
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--gris);
    margin-bottom: 2rem;
}

.servicio-incluye {
    list-style: none;
    padding: 0;
}

.servicio-incluye li {
    font-size: 1.4rem;
    color: var(--gris);
    margin-bottom: 1rem;
    padding-left: 2.5rem;
    position: relative;
}

.servicio-incluye li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: bold;
    font-size: 1.6rem;
}

/* ========== CTA SECTION ========== */
.cta-section {
    margin: 6rem auto;
    padding: 5rem 3rem;
    text-align: center;
    background: linear-gradient(135deg, var(--secundario) 0%, var(--primario) 100%);
    color: var(--blanco);
}

.cta-contenido h2 {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    color: var(--blanco);
}

.cta-contenido p {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

.cta-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cta-nota {
    font-size: 1.4rem;
    opacity: 0.9;
    margin-top: 1rem;
}

/* ========== CONTACTO ========== */
.contacto-section {
    margin: 6rem 0;
}

.contacto-grid {
    display: grid;
    gap: 4rem;
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .contacto-grid {
        grid-template-columns: 1fr 1.5fr;
    }
}

.contacto-opciones h3 {
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--oscuro);
}

.contacto-opciones > p {
    font-size: 1.5rem;
    color: var(--gris);
    margin-bottom: 3rem;
}

.contacto-metodos {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.metodo-contacto {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--blanco);
    border-radius: 1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: all 0.3s ease;
}

.metodo-contacto:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.metodo-icono {
    width: 5rem;
    height: 5rem;
    background: var(--primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oscuro);
    flex-shrink: 0;
}

.metodo-info {
    display: flex;
    flex-direction: column;
}

.metodo-info strong {
    font-size: 1.5rem;
    color: var(--oscuro);
    margin-bottom: 0.3rem;
}

.metodo-info span {
    font-size: 1.4rem;
    color: var(--gris);
}

.contacto-ubicacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--grisClaro);
    border-radius: 0.5rem;
}

.contacto-ubicacion svg {
    color: var(--secundario);
}

.contacto-ubicacion span {
    font-size: 1.4rem;
    color: var(--gris);
}

/* ========== FORMULARIO ========== */
.contacto-formulario {
    background: var(--blanco);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.formulario {
    background-color: transparent;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.formulario fieldset {
    border: none;
    padding: 0;
}

.formulario legend {
    text-align: left;
    font-size: 2rem;
    text-transform: none;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--oscuro);
}

.contenedor-campos {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .contenedor-campos {
        grid-template-columns: 1fr 1fr;
    }

    .campo:nth-child(4) {
        grid-column: 1 / 3;
    }
}

.campo {
    margin-bottom: 0;
}

.campo label {
    color: var(--oscuro);
    font-weight: 600;
    margin-bottom: 0.8rem;
    display: block;
    font-size: 1.4rem;
}

.campo textarea {
    height: 15rem;
    resize: vertical;
}

.input-text {
    width: 100%;
    border: 2px solid var(--grisClaro);
    padding: 1.2rem;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    font-family: 'Krub', sans-serif;
}

.input-text:focus {
    outline: none;
    border-color: var(--secundario);
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.1);
}

/* ========== FOOTER ========== */
.footer {
    background-color: var(--oscuro);
    color: var(--blanco);
    padding: 4rem 2rem 2rem;
    margin-top: 6rem;
}

.footer-contenido {
    display: grid;
    gap: 3rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-contenido {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.footer-info h3 {
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primario);
}

.footer-info p {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--grisClaro);
}

.footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .footer-links {
        justify-content: flex-end;
    }
}

.footer-links a {
    color: var(--blanco);
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primario);
}

.footer-copyright {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.3rem;
    color: var(--grisClaro);
}

/* ========== ANIMACIONES ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========== RESPONSIVE ADICIONAL ========== */
@media (max-width: 768px) {
    .hero-titulo {
        font-size: 3rem;
    }

    .stat-numero {
        font-size: 2.8rem;
    }

    .foto-perfil {
        max-width: 28rem;
    }

    .hero-ctas {
        flex-direction: column;
    }

    .hero-ctas .boton {
        width: 100%;
    }
}

/* ========== FOTO SOBRE MÍ ========== */

.sobre-mi-visual {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.foto-sobre-mi-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.foto-sobre-mi {
    width: 100%;
    max-width: 30rem;
    border-radius: 50%;
    border: 5px solid var(--primario);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

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

@media (max-width: 768px) {
    .foto-sobre-mi {
        max-width: 25rem;
    }
}

/* ========================================
   ESTILOS MEJORADOS - STACK TECNOLÓGICO Y ESPECIALIZACIÓN
   Reemplazar las secciones correspondientes en estilos-laravel-ia.css
======================================== */

/* ========== STACK TECNOLÓGICO - VERSIÓN PREMIUM ========== */

.stack-section {
    margin: 6rem auto;
    padding: 5rem 3rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow: hidden;
}

.stack-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.stack-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 151, 167, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.stack-section h2,
.stack-section .section-subtitle {
    position: relative;
    z-index: 1;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.stack-categoria {
    background: var(--blanco);
    padding: 3.5rem 3rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.stack-categoria::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secundario), var(--primario));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.stack-categoria:hover::before {
    transform: scaleX(1);
}

.stack-categoria:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--primario);
}

/* Categoría destacada de IA */
.stack-categoria.destacada {
    background: linear-gradient(135deg, #fff9e6 0%, #ffe8b8 100%);
    border: 2px solid var(--primario);
    position: relative;
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.25);
}

.stack-categoria.destacada::after {
    content: '⭐ INNOVACIÓN';
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--primario);
    color: var(--oscuro);
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    animation: pulse 2s infinite;
}

.stack-categoria.destacada:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 60px rgba(255, 193, 7, 0.35);
}

.stack-icono {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secundario), var(--primario));
    border-radius: 50%;
    font-size: 3.5rem;
    box-shadow: 0 8px 20px rgba(0, 151, 167, 0.3);
    transition: all 0.3s ease;
}

.stack-categoria:hover .stack-icono {
    transform: rotateY(360deg);
    box-shadow: 0 12px 30px rgba(0, 151, 167, 0.4);
}

.stack-categoria.destacada .stack-icono {
    background: linear-gradient(135deg, var(--primario), #ff9800);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}

.stack-categoria h3 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
    color: var(--oscuro);
    font-weight: 700;
    position: relative;
}

.stack-categoria h3::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primario);
    border-radius: 2px;
}

.stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
}

.stack-item {
    padding: 1rem 1.8rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 2.5rem;
    font-size: 1.4rem;
    color: var(--text-dark);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.stack-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s;
}

.stack-item:hover::before {
    left: 100%;
}

.stack-item:hover {
    background: var(--secundario);
    color: var(--blanco);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 151, 167, 0.3);
    border-color: var(--secundario);
}

.stack-item.destacado {
    background: linear-gradient(135deg, var(--primario), #ffa726);
    color: var(--oscuro);
    font-weight: 700;
    border: 2px solid var(--primario);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.stack-item.destacado:hover {
    background: linear-gradient(135deg, #ffa726, var(--primario));
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.4);
}

/* ========== ÁREAS DE ESPECIALIZACIÓN - VERSIÓN PREMIUM ========== */

.certificaciones {
    margin-top: 4rem;
    padding: 0;
    background: transparent;
    border: none;
}

.certificaciones h3 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--oscuro);
    font-weight: 700;
    position: relative;
}

.certificaciones h3::before {
    content: '🎯';
    margin-right: 1rem;
}

.certificaciones h3::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--secundario), var(--primario));
    border-radius: 2px;
}

.especialidades-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 2rem;
}

.especialidades-list li {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--gris);
    margin-bottom: 0;
    padding: 2rem 2.5rem;
    background: var(--blanco);
    border-radius: 1.5rem;
    position: relative;
    padding-left: 7rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid var(--secundario);
}

.especialidades-list li::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secundario), var(--primario));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 151, 167, 0.3);
}

.especialidades-list li::after {
    content: '✓';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    font-size: 2.5rem;
    font-weight: bold;
    z-index: 1;
}

.especialidades-list li:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left-color: var(--primario);
}

.especialidades-list li:nth-child(1) { animation-delay: 0.1s; }
.especialidades-list li:nth-child(2) { animation-delay: 0.2s; }
.especialidades-list li:nth-child(3) { animation-delay: 0.3s; }
.especialidades-list li:nth-child(4) { animation-delay: 0.4s; }
.especialidades-list li:nth-child(5) { animation-delay: 0.5s; }

/* Colores alternados para variedad visual */
.especialidades-list li:nth-child(1) { border-left-color: #0097A7; }
.especialidades-list li:nth-child(2) { border-left-color: #00ACC1; }
.especialidades-list li:nth-child(3) { border-left-color: #00BCD4; }
.especialidades-list li:nth-child(4) { border-left-color: #0097A7; }
.especialidades-list li:nth-child(5) { border-left-color: #00ACC1; }

.especialidades-list li:nth-child(1)::before { background: linear-gradient(135deg, #0097A7, #00ACC1); }
.especialidades-list li:nth-child(2)::before { background: linear-gradient(135deg, #00ACC1, #00BCD4); }
.especialidades-list li:nth-child(3)::before { background: linear-gradient(135deg, #00BCD4, #26C6DA); }
.especialidades-list li:nth-child(4)::before { background: linear-gradient(135deg, #0097A7, #00ACC1); }
.especialidades-list li:nth-child(5)::before { background: linear-gradient(135deg, #00ACC1, #00BCD4); }

/* ========== ANIMACIONES ========== */

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.stack-categoria {
    animation: slideInRight 0.6s ease backwards;
}

.especialidades-list li {
    animation: slideInRight 0.6s ease backwards;
}

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

@media (max-width: 768px) {
    .stack-section {
        padding: 4rem 2rem;
    }

    .stack-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stack-categoria {
        padding: 3rem 2rem;
    }

    .stack-categoria.destacada::after {
        top: 1rem;
        right: 1rem;
        font-size: 1rem;
        padding: 0.4rem 1rem;
    }

    .stack-icono {
        width: 70px;
        height: 70px;
        font-size: 3rem;
    }

    .stack-categoria h3 {
        font-size: 1.9rem;
    }

    .stack-items {
        gap: 1rem;
    }

    .stack-item {
        padding: 0.8rem 1.5rem;
        font-size: 1.3rem;
    }

    .certificaciones h3 {
        font-size: 2.2rem;
    }

    .especialidades-list li {
        font-size: 1.4rem;
        padding: 1.8rem 2rem;
        padding-left: 6.5rem;
    }

    .especialidades-list li::before,
    .especialidades-list li::after {
        width: 45px;
        height: 45px;
        left: 1.5rem;
    }

    .especialidades-list li::after {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .stack-categoria {
        padding: 2.5rem 1.5rem;
    }

    .stack-icono {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }

    .especialidades-list li {
        padding-left: 6rem;
    }
}


Contexto
Soy un desarrollador de software Backend/Fullstack con mas de 10 años de experiencia trabajando en proyectos freelance y en una pequeña fabrica de desarrollo de software.  He trabajado en desarrollo de aplicaciones web corporativas y pequeños sistemas de informacion todos web, ademas de algunas paginas web.
Tengo 4 proyectos principales que quiero mostrar:
1.Aplicacion Web para la gestion de Alumbrado Público del municipio de Sabaneta, antioquia (permitio la gestion del inventario del alumbrado publico en tiempo real, se mejoro el proceso de mantenimiento preventivo y correctivo en un 80%)
2.Aplicación Web de Gestión Documental en el municipio de Santafe de Antioquia (Redujo las demandas, derechos de petición y tutelas en un 70%).
3.Aplicacion Web para la Gestion de la planeacion y elaboracion de el plan de desarrollo de una alcaldia, realizado para la alcaldia de Dabeiba, antioquia.
4.Aplicacion Web para una agencia de seguros (Aumento ventas en un 60%).
                                                                       Necesito un portafolio web profesional para empezar a aplicar a mejores empleos.  Quiero algo moderno, minimalista y que resalte mi trabajo, donde se solucionan problemas complejos a traves de aplicativos web.

Rol
Actua como un diseñador web experto especializado en crear portafolios profesionales para desarrolladores web.

Especifidad
Crea  sitio web de portafolio completo que se pueda incorporar a una pagina personal que tengo en la web, que incluya:
1.Seccion de bienvenida con:
 * Mi nombre:  Jesús Albeiro Zuluaga Duque
 * Mi especialidad:  Desarrollador Web Fullstack
 * Frase que me describa profesionalmente
2.Seccion "Sobre mi" con espacio para contar mi historia.
3.Galeria de mis 4 proyectos, mostrando cada uno con:
* Título del proyecto
* Descripción breve
* Herramientas que use: Laravel/Php, React, Vue
* Resultados logrados (números de impacto)
* Espacio para imagén del proyecto
4.Lista de mis habilidades principales
5.Información de contacto (email, linkedln)
El estilo debe ser:
* Moderno y limpio
* Colores Profesionales (neutros con un toque de color)
* Que se vea bien en celular y computadora
* Con animaciones suaves al hacer scroll
* Fácil de leer
* Con mucho espacio en blanco para que respire

Acción
Crea el sitio web completo con las indicaciones que te di, usando código que funcione inmediatamente en Claude.  Usa textos de ejemplo realistas y placeholders para las imagenes.  Quiero poder verlo funcionando de inmediato.

Mostrar más
11:42 a.m.
      Voy a crear un portafolio web profesional y moderno que resalte tu experiencia y proyectos. Te haré un sitio completamente funcional con animaciones suaves y diseño responsivo.

      html
/* ========== ESTILOS MEJORADOS AGREGADOS ========== */
/* ========================================
   ESTILOS MEJORADOS - STACK TECNOLÓGICO Y ESPECIALIZACIÓN
   Reemplazar las secciones correspondientes en estilos-laravel-ia.css
======================================== */

/* ========== STACK TECNOLÓGICO - VERSIÓN PREMIUM ========== */

.stack-section {
    margin: 6rem auto;
    padding: 5rem 3rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow: hidden;
}

.stack-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.stack-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 151, 167, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.stack-section h2,
.stack-section .section-subtitle {
    position: relative;
    z-index: 1;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.stack-categoria {
    background: var(--blanco);
    padding: 3.5rem 3rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.stack-categoria::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secundario), var(--primario));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.stack-categoria:hover::before {
    transform: scaleX(1);
}

.stack-categoria:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--primario);
}

/* Categoría destacada de IA */
.stack-categoria.destacada {
    background: linear-gradient(135deg, #fff9e6 0%, #ffe8b8 100%);
    border: 2px solid var(--primario);
    position: relative;
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.25);
}

.stack-categoria.destacada::after {
    content: '⭐ INNOVACIÓN';
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--primario);
    color: var(--oscuro);
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    animation: pulse 2s infinite;
}

.stack-categoria.destacada:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 60px rgba(255, 193, 7, 0.35);
}

.stack-icono {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secundario), var(--primario));
    border-radius: 50%;
    font-size: 3.5rem;
    box-shadow: 0 8px 20px rgba(0, 151, 167, 0.3);
    transition: all 0.3s ease;
}

.stack-categoria:hover .stack-icono {
    transform: rotateY(360deg);
    box-shadow: 0 12px 30px rgba(0, 151, 167, 0.4);
}

.stack-categoria.destacada .stack-icono {
    background: linear-gradient(135deg, var(--primario), #ff9800);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}

.stack-categoria h3 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
    color: var(--oscuro);
    font-weight: 700;
    position: relative;
}

.stack-categoria h3::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primario);
    border-radius: 2px;
}

.stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
}

.stack-item {
    padding: 1rem 1.8rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 2.5rem;
    font-size: 1.4rem;
    color: var(--text-dark);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.stack-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s;
}

.stack-item:hover::before {
    left: 100%;
}

.stack-item:hover {
    background: var(--secundario);
    color: var(--blanco);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 151, 167, 0.3);
    border-color: var(--secundario);
}

.stack-item.destacado {
    background: linear-gradient(135deg, var(--primario), #ffa726);
    color: var(--oscuro);
    font-weight: 700;
    border: 2px solid var(--primario);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.stack-item.destacado:hover {
    background: linear-gradient(135deg, #ffa726, var(--primario));
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.4);
}

/* ========== ÁREAS DE ESPECIALIZACIÓN - VERSIÓN PREMIUM ========== */

.certificaciones {
    margin-top: 4rem;
    padding: 0;
    background: transparent;
    border: none;
}

.certificaciones h3 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--oscuro);
    font-weight: 700;
    position: relative;
}

.certificaciones h3::before {
    content: '🎯';
    margin-right: 1rem;
}

.certificaciones h3::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--secundario), var(--primario));
    border-radius: 2px;
}

.especialidades-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 2rem;
}

.especialidades-list li {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--gris);
    margin-bottom: 0;
    padding: 2rem 2.5rem;
    background: var(--blanco);
    border-radius: 1.5rem;
    position: relative;
    padding-left: 7rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid var(--secundario);
}

.especialidades-list li::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secundario), var(--primario));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 151, 167, 0.3);
}

.especialidades-list li::after {
    content: '✓';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    font-size: 2.5rem;
    font-weight: bold;
    z-index: 1;
}

.especialidades-list li:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left-color: var(--primario);
}

.especialidades-list li:nth-child(1) { animation-delay: 0.1s; }
.especialidades-list li:nth-child(2) { animation-delay: 0.2s; }
.especialidades-list li:nth-child(3) { animation-delay: 0.3s; }
.especialidades-list li:nth-child(4) { animation-delay: 0.4s; }
.especialidades-list li:nth-child(5) { animation-delay: 0.5s; }

/* Colores alternados para variedad visual */
.especialidades-list li:nth-child(1) { border-left-color: #0097A7; }
.especialidades-list li:nth-child(2) { border-left-color: #00ACC1; }
.especialidades-list li:nth-child(3) { border-left-color: #00BCD4; }
.especialidades-list li:nth-child(4) { border-left-color: #0097A7; }
.especialidades-list li:nth-child(5) { border-left-color: #00ACC1; }

.especialidades-list li:nth-child(1)::before { background: linear-gradient(135deg, #0097A7, #00ACC1); }
.especialidades-list li:nth-child(2)::before { background: linear-gradient(135deg, #00ACC1, #00BCD4); }
.especialidades-list li:nth-child(3)::before { background: linear-gradient(135deg, #00BCD4, #26C6DA); }
.especialidades-list li:nth-child(4)::before { background: linear-gradient(135deg, #0097A7, #00ACC1); }
.especialidades-list li:nth-child(5)::before { background: linear-gradient(135deg, #00ACC1, #00BCD4); }

/* ========== ANIMACIONES ========== */

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.stack-categoria {
    animation: slideInRight 0.6s ease backwards;
}

.especialidades-list li {
    animation: slideInRight 0.6s ease backwards;
}

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

@media (max-width: 768px) {
    .stack-section {
        padding: 4rem 2rem;
    }
    
    .stack-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .stack-categoria {
        padding: 3rem 2rem;
    }
    
    .stack-categoria.destacada::after {
        top: 1rem;
        right: 1rem;
        font-size: 1rem;
        padding: 0.4rem 1rem;
    }
    
    .stack-icono {
        width: 70px;
        height: 70px;
        font-size: 3rem;
    }
    
    .stack-categoria h3 {
        font-size: 1.9rem;
    }
    
    .stack-items {
        gap: 1rem;
    }
    
    .stack-item {
        padding: 0.8rem 1.5rem;
        font-size: 1.3rem;
    }
    
    .certificaciones h3 {
        font-size: 2.2rem;
    }
    
    .especialidades-list li {
        font-size: 1.4rem;
        padding: 1.8rem 2rem;
        padding-left: 6.5rem;
    }
    
    .especialidades-list li::before,
    .especialidades-list li::after {
        width: 45px;
        height: 45px;
        left: 1.5rem;
    }
    
    .especialidades-list li::after {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .stack-categoria {
        padding: 2.5rem 1.5rem;
    }
    
    .stack-icono {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }
    
    .especialidades-list li {
        padding-left: 6rem;
    }
}

/* ========== IMÁGENES DE PROYECTOS ========== */

.proyecto-imagenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--grisClaro);
}

.proyecto-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid var(--grisClaro);
}

.proyecto-img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--primario);
}

/* Responsive para imágenes */
@media (max-width: 768px) {
    .proyecto-imagenes {
        grid-template-columns: 1fr;
    }
}