:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --gray: #f9f9f9;
    --accent: #000000;
    --nav-width: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    color: var(--text);
    overflow-x: hidden;
}

/* --- BARRA LATERAL (ESCRITORIO) --- */
.main-header {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    background: #000;
    z-index: 2000;
}

/* Ocultar hamburguesa en escritorio */
.menu-toggle {
    display: none;
}

/* Navegación vertical en escritorio */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: transparent;
}

/* Estilo base de los enlaces/iconos */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: #666; /* ICONOS GRISES POR DEFECTO */
    text-decoration: none;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

/* Color blanco para todos los iconos, siempre */
.nav-item i {
    color: #ffffff !important; 
    text-decoration: none;
    transition: 0.3s;
}

/* Evitar el morado de enlaces visitados */
.nav-item:visited, .nav-item:active, .nav-item:link {
    color: #ffffff !important;
    text-decoration: none;
}

/* Ocultar el texto por defecto en escritorio */
.nav-item span {
    display: none;
}

/* Mostrar Tooltip al pasar el cursor (Escritorio) */
.nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 80px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.nav-item:hover::after {
    opacity: 1;
}

.nav-item:hover {
    color: #fff; /* ICONOS BLANCOS AL HOVER */
}

/* --- EFECTO TOOLTIP (EL TEXTO QUE SALE AL LADO) --- */
.nav-item::after {
    content: attr(data-tooltip); /* Extrae el texto del HTML */
    position: absolute;
    left: 75px; /* Un poco más a la derecha para no chocar */
    background-color: #333; /* Gris oscuro para el tooltip */
    color: #fff;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    white-space: nowrap;
    
    /* Estado inicial (oculto) */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Triangulito pequeño (flecha del tooltip) */
.nav-item::before {
    content: '';
    position: absolute;
    left: 69px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* MOSTRAR AL PASAR EL CURSOR */
.nav-item:hover::after,
.nav-item:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* AJUSTE CUANDO ESTÁS EN LA SECCIÓN NEGRA (CONTACTO) */
/* Si tu navegación cambia a blanco sobre negro, añade esta lógica */
.contact-active .nav-item {
    color: #555;
}

.contact-active .nav-item:hover {
    color: #fff;
}

/* Estilo para la marca vertical (JASON MARTÍNEZ) */
.brand {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 0.9rem;
    color: #fff; /* TEXTO BLANCO */
    text-transform: uppercase;
}

/* --- CONTENIDO PRINCIPAL --- */
.main-content {
    margin-left: var(--nav-width);
    padding: 0 8%;
}

.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #bbb;
    letter-spacing: 2px;
    margin-bottom: 50px;
    display: block;
}

/* HERO */
.hero {
    height: 90vh;
    display: flex;
    align-items: center;
}

.main-title {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.amp { font-style: italic; font-weight: 300; color: #999; }

/* --- SECCIÓN PERFIL (ACTUALIZADA) --- */
.about {
    padding: 120px 0;
    background-color: #ffffff;
}

.about-grid {
    display: grid;
    /* CAMBIO CLAVE: Columna de imagen más estrecha (280px) */
    grid-template-columns: 280px 1fr; 
    gap: 80px; /* Mantén un buen gap para dar aire */
    align-items: start;
    margin-bottom: 80px;
}

/* Contenedor de la foto: lo centramos verticalmente */
.profile-column {
    display: flex;
    align-items: center; /* Centra la foto con respecto al texto de la derecha */
    justify-content: center;
}

.profile-frame {
    width: 110%; /* Aumentamos un 10% el tamaño sin invadir el texto */
    position: relative;
    /* Máscara de difuminado mejorada */
    mask-image: linear-gradient(to bottom, black 75%, transparent 98%),
                linear-gradient(to right, black 75%, transparent 98%);
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 98%),
                        linear-gradient(to right, black 75%, transparent 98%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.profile-image {
    width: 100%;
    height: auto;
    filter: none;
    transition: filter 0.5s ease;
    display: block;
    object-fit: cover;
}

.profile-image:hover {
    filter: grayscale(100%);
    /* Pequeño giro para que parezca que lo estás hojeando */
    transform: translateY(-8px) rotate(-1deg); 
    box-shadow: 20px 25px 50px rgba(0,0,0,0.15);
}

/* Tipografía del Perfil - TEXTOS MÁS GRANDES */
.about-text .large-text {
    /* Subimos el tamaño (clamp mínimo, preferido, máximo) */
    font-size: clamp(1.8rem, 3.5vw, 2.8rem); 
    font-weight: 800;
    line-height: 1.1; /* Line-height más ajustado para impacto */
    margin-bottom: 35px; /* Más espacio abajo */
    color: var(--text);
    letter-spacing: -1.5px;
}

.about-description p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
    max-width: 100%; /* Permite que el texto ocupe todo el ancho disponible */
    text-align: justify; /* Justifica el texto para que se alinee a ambos lados */
    hyphens: auto; /* Ayuda a que los cortes de palabra sean más suaves */
}

/* --- HERRAMIENTAS / SKILLS CON ICONOS --- */
.skills-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9f9f9;
    padding: 10px 18px;
    border: 1px solid #eee;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-item:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    transform: translateY(-3px);
}

.skill-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.skill-item span {
    font-size: 0.85rem;
    font-weight: 600;
}

/* PROYECTOS */
.project-grid {
    display: grid;
    /* Crea columnas automáticas de unos 180px a 200px */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 15px; /* Espacio pequeño entre cuadros */
    padding: 0 5% 50px 120px; /* Margen para no chocar con el menú lateral */
    margin-bottom: var(--spacing);
}

.project-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.img-wrapper {
    background: var(--gray);
    aspect-ratio: 1 / 1; /* Cuadradas perfectas como en la referencia */
    overflow: hidden;
    margin-bottom: 8px;
    border-radius: 4px; /* Un toque suave en las esquinas */
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para que llene el cuadrado sin deformarse */
    filter: grayscale(20%); /* Opcional: un toque sutil de estilo */
    transition: transform 0.5s ease;
}

.project-card:hover img {
    transform: scale(1.1); /* Efecto zoom al pasar el mouse */
    filter: grayscale(0%);
}

/* --- TEXTOS MINIATURA --- */
.project-meta {
    padding: 0 4px;
}

.category {
    font-size: 0.6rem; /* Texto muy pequeño */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    display: block;
    margin-bottom: 2px;
}

.project-meta h3 {
    font-size: 0.75rem; /* Título pequeño para que no rompa el diseño */
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

/* CONTACTO */
.contact-big {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: 900;
    text-decoration: none;
    color: var(--text);
    border-bottom: 4px solid var(--text);
    display: inline-block;
    margin-bottom: 40px;
}


/* --- ESTILO HEXÁGONO CENTRAL Y ANIMACIÓN 3D --- */

/* Contenedor principal para la perspectiva 3D */
.img-wrapper {
    perspective: 1000px; /* Necesario para el efecto 3D */
}

/* El contenedor que se superpone a la imagen */
.project-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Efecto de giro inicial y opacidad completa */
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    opacity: 1;
    /* Transición suave para el giro y la desaparición */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    pointer-events: none; /* Deja que el hover pase a la tarjeta */
}

/* La forma hexagonal usando Clip-Path */
.hexagon {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco semi-transparente */
    width: 80%; /* Ajusta el tamaño del hexágono aquí */
    aspect-ratio: 1.15 / 1; /* Relación de aspecto para un hexágono vertical */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Estilos de texto dentro del hexágono (Miniaturas) */
.hexagon .category {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 3px;
    backface-visibility: hidden; /* Evita que el texto parpadee */
}

.hexagon h3 {
    font-size: 1.0rem;
    font-weight: 700;
    line-height: 1.1;
    color: #333;
    max-width: 90%;
    backface-visibility: hidden;
}

/* --- LA MAGIA DEL HOVER (EL GIRO Y DESAPARICIÓN) --- */
.project-card:hover .project-info-overlay {
    /* Al hacer hover en la tarjeta, el hexágono gira 180 grados y desaparece */
    transform: rotateY(180deg);
    opacity: 0;
}

/* Ajuste opcional: la imagen también puede hacer zoom sutil */
.img-wrapper img {
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.project-card:hover img {
    transform: scale(1.05);
}

/* --- HERO SECTION CON FOTO DE FONDO --- */
/* 1. Contenedor principal */
.hero-section {
    position: relative;
    width: 100%;
    /* Cambiamos 70vh por 100vh para que ocupe todo el alto disponible */
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background-color: #000;
}

/* Añadimos un degradado al final de la foto para que se mezcle con la siguiente sección */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #ffffff, transparent);
    z-index: 5;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajustamos brightness a 0.5 para que el blanco resalte más */
    filter: blur(2px) brightness(0.5); 
    transform: scale(1.05);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: left;
    padding-left: 10%; /* Aumentamos un poco para alinear con tu menú lateral */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1000px;
}

.hero-content h1 {
    /* Usamos un clamp más agresivo para que sea imponente */
    font-size: clamp(2.5rem, 6vw, 5rem); 
    line-height: 1.05; 
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
    /* Sombra sutil para que no se pierda en zonas claras de la foto */
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ffffff;
    max-width: 550px;
    margin: 20px 0 30px 0; /* Espacio arriba y abajo */
    text-align: left;
    opacity: 0.9;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-content h1 span {
    /* El gris del "& EFICIENCIA" - lo subimos a 0.6 para legibilidad */
    color: rgba(255, 255, 255, 0.6); 
    display: block; /* Hace que "& EFICIENCIA" baje a la siguiente línea si quieres */
}

.hero-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* --- ESTILO DE LA FIRMA --- */
.hero-signature {
    font-family: 'Sacramento', cursive; /* Asegúrate de importar la fuente en el HTML */
    font-size: 3rem;
    color: #ffffff;
    margin-top: 10px;
    opacity: 0.8;
    transform: rotate(-3deg); /* Le da un toque de firma real */
    user-select: none;
    pointer-events: none;
}



/* --- ESTILOS PARA CERTIFICADOS PLATZI --- */

.platzi-certificates {
    margin-top: 60px; /* Espacio después de las herramientas */
    text-align: center; /* Centra el título y el grid */
}

.subsection-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #bbb;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.certificates-grid {
    display: flex;
    justify-content: center; /* Centra los certificados horizontalmente */
    gap: 30px; /* Espacio entre certificados */
    flex-wrap: wrap; /* Permite que se acomoden en pantallas pequeñas */
}

.certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Quita el subrayado del link */
    color: inherit; /* Mantiene el color de texto heredado */
    width: calc(33.33% - 20px); /* Ocupa un tercio del ancho menos el gap */
    max-width: 250px; /* Ancho máximo para que no se vean gigantes */
    transition: transform 0.3s ease;
}

.certificate-item:hover {
    transform: translateY(-8px); /* Efecto de elevación al hover */
}

.certificate-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Bordes suaves para las imágenes */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave para dar profundidad */
    margin-bottom: 15px;
}

.certificate-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--text);
}

/* Contenedor Principal: Asegura el 100% de la pantalla */
.portfolio-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 8%;
    background-color: #ffffff;
}

/* Contenedor interno para centrar el grid */
.portfolio-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Grid de proyectos: Flexible y responsivo */
.portfolio-grid {
    display: grid;
    /* Ajustamos el ancho mínimo de cada libro a 250px para que quepan más */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 40px; /* Espacio entre libros */
    padding: 20px;
    width: 100%;
    max-width: 1200px; /* Evita que se estiren infinito en pantallas grandes */
    margin: 0 auto;
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Espacio generoso */
    margin: 40px 0;
}

/* Estilo de las tarjetas para que sean cuadradas */
.project-card .img-wrapper {
    position: relative;
    /* Cambiamos de 1/1 (cuadrado) a 3/4 (proporción de libro) */
    aspect-ratio: 3 / 4; /* Mantiene la forma de libro */
    width: 100%;
    overflow: hidden;
    border-radius: 8px; /* Un radio un poco más cerrado para que parezca lomo de libro */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Añadimos una sombra que simule el volumen de un libro */
    box-shadow: 
        5px 5px 15px rgba(0,0,0,0.1),
        -1px 0px 0px rgba(255,255,255,0.2) inset; /* Simula el brillo del lomo */
}

/* Efecto al pasar el mouse mejorado para "libros" */
.project-card:hover .img-wrapper {
    transform: translateY(-12px) rotate(-1deg); /* Un pequeño giro para que se vea dinámico */
    box-shadow: 15px 20px 35px rgba(0,0,0,0.15);
}

/* --- FILTROS DE PROYECTOS RESPONSIVOS --- */
.portfolio-filters::-webkit-scrollbar {
    display: flex;
    justify-content: center; /* Centrados por defecto */
    flex-wrap: wrap; /* Para que bajen en lugar de amontonarse en PC */
    gap: 15px; /* Espacio entre botones */
    margin: 40px auto;
    padding: 0 20px;
    max-width: 1200px;
    
    /* MAGIA DEL SCROLL HORIZONTAL */
    overflow-x: auto; /* Permite scroll solo horizontalmente */
    white-space: nowrap; /* Evita que los botones bajen de línea */
    padding: 10px 5% 20px 5%; /* Añade padding a los lados para que respire */
    
    /* Ocultar barra de scroll en móviles (Opcional, se ve más limpio) */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

.filter-btn {
    padding: 12px 25px; /* Más espacio interno para que respiren */    
    flex-shrink: 0; /* Evita que los botones se encojan para caber */
    background: transparent;
    border: 1px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 30px; /* Bordes más redondeados para look moderno */
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    color: #666;
}

.filter-btn.active, .filter-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Lógica de filtrado visual */
.project-card {
    transition: all 0.4s ease;
}

.project-card.hide {
    display: none;
}




/* --- SECCIÓN CONTACTO FINAL --- */
.contact-section {
    position: relative;
    background-color: #000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 10%;
    color: #fff;
}

/* Mejoramos el difuminado para que sea más sutil */
.contact-fade-top {
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(0,0,0,0) 100%);
}

.section-label-light {
    color: #555; /* Gris más claro que antes para que sea legible */
    letter-spacing: 5px;
    font-size: 0.8rem;
    margin-bottom: 40px;
}

.contact-hero-text {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #aaa; /* Gris plata para que no se pierda */
    font-weight: 300;
    margin-bottom: 30px;
}

.contact-hero-text span {
    color: #fff; /* Blanco puro para resaltar la palabra clave */
    font-weight: 700;
}

/* EMAIL IMPACTANTE */
.contact-email-big {
    font-size: clamp(1.2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: -2px;
    display: inline-block;
    margin-bottom: 80px;
    transition: all 0.4s ease;
}

.contact-email-big:hover {
    color: #aaa;
    transform: scale(1.02);
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

/* ESTILO DE REDES SOCIALES */
.contact-footer-links {
    display: flex;
    gap: 60px;
}

.social-box-link {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s ease;
}

.social-box-link i {
    font-size: 2.5rem; /* Iconos grandes */
    color: #888;
    transition: color 0.3s;
}

.social-box-link:hover i {
    color: #fff; /* El icono se ilumina al pasar el mouse */
}

.social-box-link:hover {
    transform: translateY(-5px);
}

.social-tag {
    display: block;
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.social-handle {
    font-size: 1rem;
    color: #fff;
}



/* JERARQUÍA DE TEXTOS */
.contact-hero-text {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #666;
    margin-bottom: 20px; /* Espacio antes del email */
}

.contact-email-big {
    font-size: clamp(1.8rem, 5vw, 4rem); /* Un poco menos gigante para que no se amontone */
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: -1px;
    display: block;
    margin-bottom: 60px; /* MUCHO espacio abajo */
    transition: color 0.3s ease;
}

/* CONTENEDOR DE REDES CON ICONOS */
.contact-footer-links {
    display: flex;
    gap: 100px; /* Separación generosa entre LinkedIn y GitHub */
    margin-top: 40px;
}

.social-box-link {
    text-decoration: none;
    display: flex;
    align-items: center; /* Alinea icono y texto */
    gap: 15px;
    transition: opacity 0.3s;
}

.social-box-link:hover {
    opacity: 0.6;
}

/* Estilo para los nombres de usuario */
.social-handle {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.social-tag {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.social-handle {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.social-box-link:hover .social-handle {
    border-color: #fff;
}

/* Ajuste del tamaño del Email (más imponente) */
.contact-email-big {
    font-size: clamp(1.8rem, 7vw, 5rem); /* Aumentamos el tamaño máximo */
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -3px;
    display: inline-block;
}

/* --- CONFIGURACIÓN PARA QUE SALGAN LOS PROYECTOS EN LA PANTALLA */

/* --- CONFIGURACIÓN DEL MODAL (ESTILO FONDO BLANCO) --- */
.modal {
    display: none; 
    position: fixed;
    z-index: 9999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Oscurece el fondo de la página */
    overflow-y: auto;
}

.modal-content {
    background-color: #ffffff; /* Fondo Blanco */
    margin: 5% auto;
    padding: 50px 40px;
    width: 90%;
    max-width: 900px;
    color: #333; /* Texto oscuro para legibilidad */
    position: relative;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* BOTÓN CERRAR (X NEGRA CON FONDO BLANCO CIRCULAR) */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #ffffff; /* Fondo de la X */
    color: #000000 !important; /* Color de la X */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
    z-index: 10001;
}

.close-modal:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

/* ESTILOS DEL CONTENIDO INTERNO (Para que combine con el fondo blanco) */
#modal-body h2 { 
    font-size: 2.2rem; 
    color: #000; 
    margin-bottom: 20px;
    font-weight: 800; 
}

#modal-body p { 
    line-height: 1.8; 
    color: #444; 
    margin-bottom: 20px; 
    font-size: 1.1rem;
}

#modal-body h4 { 
    color: #000; 
    margin-top: 30px; 
    border-left: 4px solid #000;
    padding-left: 15px;
}

#modal-body img { 
    width: 100%; 
    height: auto; 
    border-radius: 10px; 
    margin: 25px 0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Estilo para bloques de código dentro del modal */
#modal-body pre, #modal-body .codigo {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    color: #333;
}



/* ============================================================
   OPTIMIZACIÓN PARA MÓVILES (RESPONSIVE)
   ============================================================ */


   /* Ajuste específico para celulares muy pequeños */
@media (max-width: 400px) {
    .project-grid {
        grid-template-columns: 1fr !important; /* Una sola columna obligatoria */
        width: 95% !important;
    }
    
    .project-card {
        max-width: 280px !important; /* Un poco más pequeña para evitar desbordes */
    }
}

@media (min-width: 1px) and (max-width: 710px) {

    /* --- SECCIÓN FOTO DE PERFIL Y DESCRIPCIÓN --- */
   .about-grid {
        display: flex !important;
        flex-direction: column !important; /* Foto arriba, texto abajo */
        align-items: center !important;    /* Centra los elementos */
        gap: 40px !important;              /* Espacio entre foto y texto */
    }

    /* --- SECCIÓN CERTIFICADOS --- */
    .certificates-grid {
        width: 100% !important; /* Cambiado de 150% a 100% para que no desborde */
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    /* Centra las tarjetas verticalmente en la columna */
        justify-content: center !important;
        gap: 30px !important;              /* Espacio uniforme entre certificados */
        margin: 0 auto !important;         /* Asegura el centrado del contenedor */
        padding: 0 !important;
    }

    .certificate-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 280px !important;       /* Mantiene el tamaño visual que te gusta */
    margin: 0 auto !important;         /* Centra cada item individualmente */
    text-align: center !important;
    }

    .certificate-item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;                /* Opcional: para suavizar las esquinas como los proyectos */
    }

    /* 1. Contenedor principal con margen de respiro */
    .contact-container {
        width: 100% !important;
        padding: 0 25px !important; /* Margen lateral de seguridad */
        box-sizing: border-box !important;
        overflow: hidden; /* Evita que cualquier cosa estire la pantalla */
    }

    /* 2. Ajuste del Título Hero (¿Listo para transformar...) */
    .contact-hero-text {
        font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
        line-height: 1.3 !important;
        width: 100% !important;
        margin: 0 auto 30px auto !important;
    }

    /* 3. Ajuste del Correo (El problema principal de la foto) */
    .contact-email-big {
        /* Bajamos el tamaño máximo y usamos break-word por seguridad */
        font-size: clamp(1rem, 6vw, 1.6rem) !important; 
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
        letter-spacing: -0.5px !important; /* Reducimos el espaciado negativo */
        margin-bottom: 50px !important;
    }

    /* 4. Ajuste de los botones de redes sociales */
    .contact-footer-links {
        gap: 15px !important;
    }

    .social-box-link {
        width: 100% !important; /* Que ocupen el ancho disponible */
        max-width: 300px !important; 
        padding: 12px !important;
    }

    /* Ajustamos el texto interno de los links para que no se amontone */
    .social-handle {
        font-size: 0.8rem !important; 
        display: block;
    }

       /* --- PONE EL ICONO DE GITHUB Y LINKEDIN DEBAJO DEL OTRO --- */
    .contact-footer-links {
        display: flex !important;
        flex-direction: column !important; /* LinkedIn arriba, GitHub abajo */
        align-items: center !important;
        gap: 20px !important; /* Espacio entre los dos bloques */
        width: 100% !important;
    }

    /* --- CONTENEDOR DEL PROYECTO --- */

    .portfolio-container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important; /* Centra el contenido si sobra espacio */
    }

    .project-grid {
        display: grid !important;
        /* Esto crea columnas automáticas que no bajan de 280px ni suben de 1fr */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        width: 90% !important; /* Deja un 5% de margen a cada lado */
        max-width: 1100px !important;
        margin: 0 auto !important; /* Centra el bloque completo */
        padding: 20px 0 !important;
        justify-items: center !important; /* Centra las tarjetas dentro de su columna */
    }

    .project-card {
        width: 100% !important;
        max-width: 320px !important; /* Tamaño máximo para que no se vea gigante */
        margin: 0 auto !important;
        cursor: pointer;
        overflow: hidden;
    }

    /* MENU HAMBURGESA */
    /* Botón de cerrar tipo "Floating Action Button" */
    .close-modal {
        position: fixed; /* Se queda fijo arriba a la derecha del viewport */
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        background-color: #000 !important; /* Fondo negro circular */
        color: #fff !important; /* X blanca */
        border-radius: 50%; /* Lo hace redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        z-index: 4000; /* Siempre por encima del contenido del modal */
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        cursor: pointer;
        border: none;
    }

    /* Desactivar el tooltip de escritorio */
    .nav-item::after {
        display: none !important;
    }

    /* Mostrar el texto al lado del icono */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 20px;
        width: auto;
        color: white !important;
    }

    /* Si pusiste el nombre dentro de un <span> en el HTML, lo mostramos */
    .nav-item span {
        display: inline-block;
        font-size: 1.5rem;
    }

    .nav-links .nav-item {
    color: #ffffff !important; /* Blanco para el texto */
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    }

    .nav-links .nav-item i {
    color: #ffffff !important; /* Blanco para los iconos (LinkedIn/GitHub/Home) */
    font-size: 1.8rem;
    }

    .main-header {
        width: 100%;
        height: 70px;
        flex-direction: row;
        padding: 0 20px;
        justify-content: space-between;
    }

    .brand {
        writing-mode: horizontal-tb;
        transform: rotate(0);
        font-size: 0.8rem;
    }

    /* Ocultar links por defecto en móvil */
    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        display: flex;
        flex-direction: column;
        
        /* CAMBIOS AQUÍ: Centrado total */
        justify-content: center; 
        align-items: center; 
        
        padding: 0; /* Quitamos el padding lateral para centrar real */
        gap: 40px; /* Más espacio entre cada botón */
        
        transition: 0.4s ease;
        z-index: 2500;
    }

    .nav-links.active {
        left: 0;
    }

    /* Forzar color blanco en móvil */
    .nav-links .nav-item, 
    .nav-links .nav-item i {
        color: #ffffff !important;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* Ajustar el contenido principal para que no se pegue arriba */
    .main-content {
        margin-left: 0 !important;
        padding-top: 90px;
    }

    .menu-toggle {
        display: block; /* Aparece la hamburguesa */
        z-index: 3000;
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background: #fff;
        display: block;
        transition: 0.3s;
    }

    /* Animación a 'X' al abrir */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .main-content {
        margin-left: 0;
        padding-top: 100px;
    }

}


/* --- MENÚ HAMBURGUESA Y RESPONSIVE --- */
@media (min-width: 711px) and (max-width: 900px) {


    /* --- SOLO PARA ESCRITORIO --- */
    .main-content {
        margin-left: 70px; /* Espacio para la barra lateral negra */
    }
    
    .nav-links .nav-item i {
        color: #fff; /* O el color que prefieras para los iconos laterales */
    }

    /* --- SECCIÓN CERTIFICADOS --- */
    .certificates-grid {
        width: 100% !important; /* Cambiado de 150% a 100% para que no desborde */
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    /* Centra las tarjetas verticalmente en la columna */
        justify-content: center !important;
        gap: 30px !important;              /* Espacio uniforme entre certificados */
        margin: 0 auto !important;         /* Asegura el centrado del contenedor */
        padding: 0 !important;
    }

    .certificate-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 280px !important;       /* Mantiene el tamaño visual que te gusta */
    margin: 0 auto !important;         /* Centra cada item individualmente */
    text-align: center !important;
    }

    .certificate-item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;                /* Opcional: para suavizar las esquinas como los proyectos */
    }

    /* --- SECCIÓN FOTO DE PERFIL Y DESCRIPCIÓN --- */
   .about-grid {
        display: flex !important;
        flex-direction: column !important; /* Foto arriba, texto abajo */
        align-items: center !important;    /* Centra los elementos */
        gap: 40px !important;              /* Espacio entre foto y texto */
    }

    /* 2. Ajustamos el contenedor de la foto para que no sea gigante */
    .profile-frame {
        width: 100% !important;
        max-width: 320px !important; /* Tamaño ideal para móvil */
        margin: 0 auto !important;
    }

    /* 3. Centramos los textos para mejorar la estética en móvil */
    .about-text {
        text-align: center !important;
        width: 100% !important;
    }

    /* 4. Mantenemos la descripción alineada a la izquierda para lectura cómoda */
    .about-description {
        text-align: left !important;
        margin-top: 20px !important;
    }

    /* 5. Centramos las habilidades y certificados */
    .skills-minimal, 
    .certificates-grid {
        justify-content: center !important;
    }

    /* --- SECCIÓN DE PORTAFOLIO --- */
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    /* 1. SECCIÓN CONTACTO (Prioridad Alta) */
    #contacto {
        min-height: 80vh !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
        padding: 40px 20px !important;
        background-color: #000;
    }

    /* --- ESTO ES LO QUE PONE LOS BOTONES EN VERTICAL EN MÓVIL --- */
    .contact-footer-links {
        display: flex !important;
        flex-direction: column !important; /* LinkedIn arriba, GitHub abajo */
        align-items: center !important;
        gap: 20px !important; /* Espacio entre los dos bloques */
        width: 100% !important;
    }

    .social-box-link {
        display: flex !important;
        flex-direction: row !important; /* El icono y el texto siguen juntos en su fila */
        align-items: center !important;
        justify-content: flex-start !important;
        width: 280px !important; /* Ancho fijo para que se vean parejos y centrados */
        padding: 15px !important;
    }

    /* Bajamos un poco el título para que respire respecto al degradado superior */
    #contacto h2 {
        margin-top: 20px !important;
        font-size: 1.1rem !important;
        color: rgba(255,255,255,0.8); /* Un gris claro para el subtítulo */
    }

    /* 3. CORREO: Ajuste dinámico para que NUNCA se salga de la pantalla */
    .contact-email-big {
        /* Ajustamos el tamaño para que no sea tan invasivo pero destaque */
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
        margin: 30px 0 !important;
        color: #fff !important;
        width: 90%;
    }

    /* SOLO ESTO PARA EL CONTACTO */
    .contact-socials {
    display: flex !important;
    flex-direction: column !important; /* Esto los pone uno debajo del otro */
    align-items: center !important;
    gap: 20px !important;
    margin-top: 30px !important;
    }

    .contact-socials a {
    display: block !important; /* Fuerza a que cada link ocupe su propia fila */
    width: fit-content;
    }

    /* Aseguramos que el texto 'LinkedIn/GitHub' solo se vea en el contacto */
    .contact-socials a span {
        display: inline-block !important;
        font-size: 1.1rem;
        color: #fff;
    }

    .social-mobile a span {
        display: none !important; /* Lo ocultamos en el menú de arriba para que no estorbe */
    }

    /* 5. Filtros del Portafolio (Corrección de la captura donde se cortan) */
    .portfolio-filters {
        display: flex;
        flex-wrap: wrap; /* Permite que los botones bajen si no caben */
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    /* MENU HAMBURGESA */
    /* Botón de cerrar tipo "Floating Action Button" */
    .close-modal {
        position: fixed; /* Se queda fijo arriba a la derecha del viewport */
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        background-color: #000 !important; /* Fondo negro circular */
        color: #fff !important; /* X blanca */
        border-radius: 50%; /* Lo hace redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        z-index: 4000; /* Siempre por encima del contenido del modal */
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        cursor: pointer;
        border: none;
    }

    /* Desactivar el tooltip de escritorio */
    .nav-item::after {
        display: none !important;
    }

    /* Mostrar el texto al lado del icono */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 20px;
        width: auto;
        color: white !important;
    }

    /* Si pusiste el nombre dentro de un <span> en el HTML, lo mostramos */
    .nav-item span {
        display: inline-block;
        font-size: 1.5rem;
    }

    .nav-links .nav-item {
    color: #ffffff !important; /* Blanco para el texto */
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    }

    .nav-links .nav-item i {
    color: #ffffff !important; /* Blanco para los iconos (LinkedIn/GitHub/Home) */
    font-size: 1.8rem;
    }

    .main-header {
        width: 100%;
        height: 70px;
        flex-direction: row;
        padding: 0 20px;
        justify-content: space-between;
    }

    .brand {
        writing-mode: horizontal-tb;
        transform: rotate(0);
        font-size: 0.8rem;
    }

    /* Ocultar links por defecto en móvil */
    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        display: flex;
        flex-direction: column;
        
        /* CAMBIOS AQUÍ: Centrado total */
        justify-content: center; 
        align-items: center; 
        
        padding: 0; /* Quitamos el padding lateral para centrar real */
        gap: 40px; /* Más espacio entre cada botón */
        
        transition: 0.4s ease;
        z-index: 2500;
    }

    .nav-links.active {
        left: 0;
    }

    /* Forzar color blanco en móvil */
    .nav-links .nav-item, 
    .nav-links .nav-item i {
        color: #ffffff !important;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* Ajustar el contenido principal para que no se pegue arriba */
    .main-content {
        margin-left: 0 !important;
        padding-top: 90px;
    }

    .menu-toggle {
        display: block; /* Aparece la hamburguesa */
        z-index: 3000;
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background: #fff;
        display: block;
        transition: 0.3s;
    }

    /* Animación a 'X' al abrir */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .main-content {
        margin-left: 0;
        padding-top: 100px;
    }

}


@media (min-width: 901px) and (max-width: 1800px) {
    
    /* 1. SECCIÓN CONTACTO (Prioridad Alta) */
    #contacto {
        min-height: 80vh !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
        padding: 40px 20px !important;
        background-color: #000;
    }

    /* Bajamos un poco el título para que respire respecto al degradado superior */
    #contacto h2 {
        margin-top: 20px !important;
        font-size: 1.1rem !important;
        color: rgba(255,255,255,0.8); /* Un gris claro para el subtítulo */
    }

    /* 3. CORREO: Ajuste dinámico para que NUNCA se salga de la pantalla */
    .contact-email-big {
        /* Ajustamos el tamaño para que no sea tan invasivo pero destaque */
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
        margin: 30px 0 !important;
        color: #fff !important;
        width: 90%;
    }

    /* --- PONE EL ICONO DE GITHUB Y LINKEDIN DEBAJO DEL OTRO --- */
    .contact-footer-links {
        display: flex !important;
        flex-direction: column !important; /* LinkedIn arriba, GitHub abajo */
        align-items: center !important;
        gap: 20px !important; /* Espacio entre los dos bloques */
        width: 100% !important;
    }

    .social-box-link {
        display: flex !important;
        flex-direction: row !important; /* El icono y el texto siguen juntos en su fila */
        align-items: center !important;
        justify-content: flex-start !important;
        width: 280px !important; /* Ancho fijo para que se vean parejos y centrados */
        padding: 15px !important;
    }

    
}