/* importo funte */
@font-face {
    font-family: 'Perfect DOS VGA 437';
    src: url('./fuentes/Perfect\ DOS\ VGA\ 437.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Perfect DOS VGA 437 win';
    src: url('./fuentes/Perfect\ DOS\ VGA\ 437\ Win.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body, html {
    margin: 0;
    padding: 0;
    background: #008080;
    font-family: 'Perfect DOS VGA 437 win';
    user-select: none;
    cursor: url('./img/arrow.cur'), auto;
}


/* --- Variables CSS tamaños y espacio responsive --- */
:root {
    /* Desktop (base) */
    --icono-contenedor-width-desktop: 80px; /* Ancho fijo para el contenedor del icono (imagen + texto) */
    --icono-img-size-desktop: 48px;         /* Tamaño de la imagen del icono */
    --icono-fuente-size-desktop: 0.875rem; /* Tamaño de la fuente del texto del icono (14px) */
    --icono-gap-navbar-desktop: 50px;       /* Espacio entre iconos del navbar */
    --icono-gap-extra-desktop: 40px;        /* Espacio entre iconos extra */
    --icono-texto-margin-top-desktop: 0;    /* Margen superior del texto del icono  */

    /* Tablet (hasta 768px) */
    --icono-contenedor-width-tablet: 60px;
    --icono-img-size-tablet: 40px;
    --icono-fuente-size-tablet: 0.75rem;    
    --icono-gap-tablet: 30px;
    --icono-texto-margin-top-tablet: 4px;

    /* Mobile (hasta 480px) */
    --icono-contenedor-min-width-mobile: 50px; 
    --icono-contenedor-max-width-mobile: 90px;
    --icono-img-size-mobile: 35px;
    --icono-fuente-size-mobile: 0.6875rem; 
    --icono-gap-navbar-mobile: 26px;        
    --icono-gap-extra-mobile: 30px;         
    --icono-texto-margin-top-mobile: 2px;
}
h1{
    display: none;
}


/*Navbar estilos*/
.navbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--icono-gap-navbar-desktop);
    padding: 10px;
    margin: 5px auto; 
}
.icono { 
    width: var(--icono-contenedor-width-desktop);
    text-align: center;
    color: black;
    cursor: pointer;
    user-select: none;
    display: inline-block; 
    font-size: var(--icono-fuente-size-desktop); 
    font-weight: bold;
    cursor: url('./img/mano.cur'), pointer;
}

.icono img {
    width: var(--icono-img-size-desktop);
    height: var(--icono-img-size-desktop);
    display: block; 
    margin: 0 auto; 
}
.icono span {
    display: block; 
    margin-top: 10px;
    text-align: center;
}


/* Ventanas */
.ventana {
    width: 500px;
    background: #c0c0c0;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: 1px 1px #808080, 2px 2px #404040;
    position: fixed;
    top: 0;
    margin-top: 50px ;
    left: 50%;
    transform: translateX(-50%);
    user-select: text;
    font-size: 0.875rem; /* equivale a 14px */
    display: none;
    z-index: 100;
    cursor: url('./img/mano.cur'), pointer;
    
}

/*Diseño Barra del Menu modales/ventanas*/
.barra-menu {
    background: #c0c0c0;
    display: flex;
    padding: 4px 8px;
    gap: 20px;
    font-family: 'Perfect DOS VGA 437 win';
    font-size: 0.875rem;
    border-left: 2px solid #404040;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-top: 2px solid #404040;
    position: relative;
}

/* Línea divisoria inferior */
.barra-menu::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, #808080 100%);
}
.barra-menu span:hover {
    background-color: #000080;
    color: white;
    padding: 0 4px;
}
.barra-titulo {
    background: linear-gradient(to right, #000080, #0000cd);
    color: white;
    font-family: 'Perfect DOS VGA 437 win';
    font-weight: bold;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 1px 1px 0 black;
    border-bottom: 2px solid white;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid white;
    cursor: url('./img/arrow.cur'), auto;
    
}
/*h2*/
.barra-titulo-texto h2 { 
    font-size: 0.875rem;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 0 black;
}


/* Estilos botones de minimizar, maximizar y cerrar */
.barra-titulo-controles {
    display: flex;
    gap: 3px;
}

.barra-titulo-cerrar,
.barra-titulo-minimizar,
.barra-titulo-maximizar {
    background: #c0c0c0;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    width: 20px;
    height: 18px;
    line-height: 18px; 
    text-align: center;
    color: black;
    font-family: 'Perfect DOS VGA 437 win';
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    box-shadow: 1px 1px #404040 inset, -1px -1px white inset;
    font-size: 0.875rem;
    display: flex; 
    justify-content: center;
    align-items: start;
    padding-bottom: 10px;
}

.barra-titulo-cerrar:hover {
    background: red;
    color: white;
    border-color: red;
    box-shadow: none;
    cursor: url('./img/mano.cur'), pointer;
}

.barra-titulo-minimizar:hover,
.barra-titulo-maximizar:hover {
    background: #000080;
    color: white;
    border-color: #000080;
    box-shadow: none;
    cursor: url('./img/mano.cur'), pointer;
}


.barra-titulo-minimizar {
    font-size: 1.2rem; 
    line-height: 0.8;
    align-items: center;
}

.ventana-principal {
    background: #ffffff;
    padding: 10px;
    border: 2px solid #808080;
    border-top-color: #404040;
    border-left-color: #404040;
    border-bottom-color: white;
    border-right-color: white;
    color: black;
    font-family: 'Perfect DOS VGA 437 win';
}
.modal-fondo {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: none;
    z-index: 50;
    cursor: pointer;
    cursor: url('./img/mano.cur'), pointer;
}
/* Muestro ventanas y fondo cuando checkbox está activo */
input[id^="modal-"]:checked + .ventana,
input[id^="modal-"]:checked + .ventana + label {
    display: block;
}
.ventana-imagen{
    height: 250px;
    width: 250px;
    object-fit: cover;
}
/* Barra de tareas Windows */
.BarraDeTareas {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px white, inset -1px -1px #404040;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: 'Perfect DOS VGA 437';
    user-select: none;
    color: black;
    font-size: 0.875rem; /* 14px */
}
.boton-inicio {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #000080, #0000cd);
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    cursor: url('./img/mano.cur'), pointer;
    user-select: none;
    box-shadow: 1px 1px #404040 inset, -1px -1px white inset;
    margin-right: 10px;
}
.boton-inicio img {
    height: 18px;
    margin-right: 6px;
}
.boton-inicio span {
    font-size: 0.875rem;
}
.BarraDeTareas-items {
    display: flex;
    gap: 8px;
    flex-grow: 1;
}
.BarraDeTareas-item {
    background: #c0c0c0;
    padding: 4px 20px;
    width: 300px;
    text-align: center;
    box-shadow: 1px 1px #808080, 2px 2px #404040;
    cursor: url('./img/mano.cur'), pointer;
    user-select: none;
    font-size: 0.875rem; /* 14px */
}
.BarraDeTareas-item-sobremi {
    background: #b0b0b0;
    padding: 4px 20px;
    width: 300px;
    text-align: center;
    border: 2px solid;
    border-top-color: #404040;
    border-left-color: #404040;
    border-bottom-color: white;
    border-right-color: white;
    box-shadow: inset 1px 1px #808080, inset -1px -1px #d0d0d0;
    cursor: url('./img/mano.cur'), pointer;
    user-select: none;
    font-size: 0.875rem;
}
.reloj {
    min-width: 70px;
    text-align: center;
    background: #c0c0c0;
    box-shadow: 1px 1px #808080, 2px 2px #404040;
    padding: 4px 6px;
    user-select: none;
    font-size: 0.875rem;
}
/* iconos/carpetas extras*/
.iconos-extra {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--icono-gap-extra-desktop);
    margin: 30px auto; 
    padding: 10px;
}
.icono-extra {
    width: var(--icono-contenedor-width-desktop);
    text-align: center;
    color: black;
    cursor: url('./img/mano.cur'), pointer;
    user-select: none;
    font-size: var(--icono-fuente-size-desktop); 
}
.icono-extra img {
    width: var(--icono-img-size-desktop);
    height: var(--icono-img-size-desktop);
    display: block;
    margin: 10px auto;
}
.icono-extra span {
    display: block;
    margin-top: var(--icono-texto-margin-top-desktop);
}
a{
    display: inline;
    text-decoration: none;
    color: black;
    font-family:'Perfect DOS VGA 437 win' ;
    cursor: url('./img/mano.cur'), pointer;
}

p {
    font-family:'Perfect DOS VGA 437 win';
    font-size: 1rem; 
}
.perfil-texto-imagen{
    width:30px ;
    height: auto;
}
/*formulario contacto*/
#form-contacto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Perfect DOS VGA 437 win';
    font-size: 0.875rem; /* 14px */
}
#form-contacto label {
    font-weight: bold;
    color: black;
    margin-bottom: 2px;
    user-select: none;
    font-size: 0.875rem; /* 14px */
}
#form-contacto input[type="text"],
#form-contacto input[type="email"],
#form-contacto textarea {
    background: #c0c0c0;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: inset 1px 1px white, inset -1px -1px #404040;
    padding: 6px;
    font-family: 'Perfect DOS VGA 437 win';
    font-size: 0.875rem; 
    resize: none;
    color: black;
    outline: none;
}
#form-contacto input[type="text"]:focus,
#form-contacto input[type="email"]:focus,
#form-contacto textarea:focus {
    border-color: #000080;
    box-shadow: 0 0 5px #000080;
    background: #e0e0ff;
}
#form-contacto textarea {
    height: 100px;
}
#form-contacto button {
    width: 100px;
    align-self: flex-start;
    background: #c0c0c0;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: 1px 1px #404040 inset, -1px -1px white inset;
    font-family: 'Perfect DOS VGA 437 win';
    font-weight: bold;
    cursor: pointer;
    padding: 4px;
    user-select: none;
    font-size: 0.875rem; 
}
#form-contacto button:hover {
    background: #000080;
    color: white;
    border-color: #000080;
    box-shadow: none;
}

/* Contenido Modal "Sobre Mí"*/
.sobremi-contenido {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #a0a0a0
}
.perfil-info {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid;
    border-left-color: #404040;
    border-bottom-color: white;
    border-right-color: white;
    padding: 10px;
    background: white;
}
.ventana-imagen {
    height: 180px;
    width: 180px;
    object-fit: cover;
    border: 1px solid;
    border-top-color: #d0d0d0;
    border-left-color: #d0d0d0;
    border-bottom-color: #404040;
    border-right-color: #404040;
}
.perfil-texto{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
}
.perfil-imagenes{
    margin-top: 15px;
}
.perfil-texto h2 {
    font-size: 1.4rem; 
    color: #000080;
}
.perfil-texto h3 {
    font-size: 1.1rem; 
    color: black;
    font-weight: normal;
}
.texto-introduccion {
    background: white;
    border: 2px solid;
    border-top-color: #404040;
    border-left-color: #404040;
    border-bottom-color: white;
    border-right-color: white;
    box-shadow: inset 1px 1px #808080, inset -1px -1px #d0d0d0;
    padding: 10px;
    overflow-y: auto;
    max-height: 200px;
}

.texto-introduccion p {
    margin-bottom: 10px;
    color: #333;
}


/*Habilidades*/
.ventana-habilidades {
    width: 600px;
}

.habilidades-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    background: #c0c0c0;
}

.iconos-habilidades {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.icono-habilidad {
    text-align: center;
    font-size: 0.75rem;
    color: black;
}

.icono-habilidad img {
    width: 100px;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block;
    margin: 0 auto 5px auto;
    border: 1px solid #808080;
    padding: 4px;
}

.icono-habilidad span {
    display: block;
    margin-top: 4px;
}
.habilidades-titulo{
    font-size: 1.5rem;
    margin-bottom: 15px; 
}

/* ---------------------------------------------------- */
/*modal proyecto  */
/* ---------------------------------------------------- */

/* Proyectos */
.proyectos-contenido {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 20px;
    padding: 15px;
    background: #c0c0c0;
    

    max-width: 900px; 
    margin: 0 auto; 
    
   
    overflow-y: auto;
   
    max-height: calc(100vh - 150px); 
}

.proyecto-card {
    background: #ffffff;
    border: 2px solid;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: 1px 1px #808080, 2px 2px #404040;
    padding: 10px; 
    
    
    flex: 1 1 300px; 
    max-width: 45%; 
    min-width: 280px; 
    box-sizing: border-box; 


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

.barra-titulo-card {
    background: linear-gradient(to right, #000080, #0000cd);
    color: white;
    font-family: 'Perfect DOS VGA 437 win';
    font-weight: bold;
    padding: 4px 8px;
    text-shadow: 1px 1px 0 black;
    margin-bottom: 10px; 
    width: 100%; 
    text-align: center; 
}

.barra-titulo-card h3 { 
    font-size: 0.875rem; 
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 0 black;
}

.proyecto-card-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%; 
}

.proyecto-card-contenido img {
    max-width: 100%; 
    height: 150px; 
    object-fit: contain;
    border: 1px solid #808080;
    padding: 5px;
    margin-bottom: 10px; 
}

.proyecto-card-contenido p {
    text-align: center;
    font-size: 0.9rem;
    color: #333;
    flex-grow: 1; 
}

.proyecto-botones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.boton-proyecto {
    background: #c0c0c0;
    border: 2px solid white;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: 1px 1px #404040 inset, -1px -1px white inset;
    font-family: 'Perfect DOS VGA 437 win';
    font-weight: bold;
    cursor: pointer;
    padding: 4px 12px;
    user-select: none;
    font-size: 0.875rem;
    color: black; 
    text-decoration: none; 
    white-space: nowrap;
    cursor: url('./img/mano.cur'), pointer; 
    
}

.boton-proyecto:hover {
    background: #000080;
    color: white;
    border-color: #000080;
    box-shadow: none;
}

/* ---------------------------------------------------- */
/*  MIS  PROYECTOS MODAL     */
/* ---------------------------------------------------- */


.modal-certificados-contenido {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px; 
    background: #c0c0c0; 
    overflow-y: auto; 
    max-height: 400px; 
    justify-content: center; 
}


.modal-certificados-contenido h3 { 
    font-size: 1.2rem;
    color: black;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

.modal-certificados-contenido img {
    width: 100%; 
    height: auto; 
    border: 2px solid #808080;
    border-top-color: white;
    border-left-color: white;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-shadow: 1px 1px #404040 inset, -1px -1px white inset; 
    padding: 5px;
    margin-top: 5px; 
    object-fit: cover; 
    cursor: url('./img/mano.cur'), pointer; 
}

/* Estilos para el modal de imagen certificados grande */
#ventana-imagen-grande {
    width: 90%;
    max-width: 800px; 
    height: auto;
    max-height: 90vh; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 200; 
    display: none; 
    user-select: none; 
}


#ventana-imagen-grande .barra-titulo-texto h2 {
    font-size: 0.875rem; 
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 0 black;
}

.modal-imagen-contenido {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100%; 
    overflow: hidden; 
}

.modal-imagen-contenido img {
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    border: none;
    box-shadow: none; 
    
}


#modal-imagen-grande:checked + #ventana-imagen-grande,
#modal-imagen-grande:checked + #ventana-imagen-grande + label.modal-fondo {
    display: block;
}
/* Scrollbar diseño  */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #c0c0c0; /* Gris clásico */
  border: 2px solid #ffffff; /* Borde blanco */
  box-shadow: inset 1px 1px 0 #000000; 
}

::-webkit-scrollbar-thumb {
  background-color: #808080; /* Gris oscuro */
  border: 2px solid #ffffff; /* Borde blanco */
  box-shadow: inset 1px 1px 0 #000000;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0; /* Gris claro */
}

/* --- Media Queries --- */

/* Ocultar el reloj en tamaños de pantalla intermedios */
@media (max-width: 820px) {
    .reloj {
        display: none;
    }
}

/* Tamaño para tablet  */
@media (max-width: 768px) {
    /* Ajustes para iconos del nav y extras */
    .navbar {
        gap: var(--icono-gap-tablet);
        margin: 10px auto; /* Centro el navbar en tablet */
    }
    .icono {
        width: var(--icono-contenedor-width-tablet);
        font-size: var(--icono-fuente-size-tablet); 
    }
    .icono img {
        width: var(--icono-img-size-tablet);
        height: var(--icono-img-size-tablet);
    }
    .icono span {
        margin-top: 10px
    }

    .iconos-extra {
        gap: var(--icono-gap-tablet); 
        margin: 20px auto; /* Centro los iconos extra en tablet */
    }
    .icono-extra {
        width: var(--icono-contenedor-width-tablet);
        font-size: var(--icono-fuente-size-tablet); 
    }
    .icono-extra img {
        width: var(--icono-img-size-tablet);
        height: var(--icono-img-size-tablet);
    }
    .icono-extra span {
        margin-top: var(--icono-texto-margin-top-tablet); 
    }

    /* Modales */
    .ventana {
        width: 95%; 
        max-width: 500px;
        top: 5%; 
        height: auto;
        max-height: 90vh; 
        overflow-y: auto; 
    }
    .ventana-principal {
        padding: 8px;
    }
    .perfil-info {
        flex-direction: column; 
        text-align: center;
    }
    .ventana-imagen {
        height: 80px;
        width: 80px;
    }
    .perfil-texto h2 {
        font-size: 1.3rem; 
    }
    .perfil-texto h3 {
        font-size: 0.95rem;
    }
    .texto-introduccion {
        max-height: 150px;
    }
    /* Formulario de Contacto */
    #form-contacto input[type="text"],
    #form-contacto input[type="email"],
    #form-contacto textarea {
        padding: 5px;
        font-size: 0.8125rem; 
    }
    #form-contacto button {
        width: 80px;
        padding: 3px;
        font-size: 0.8125rem; 
    }
    /* Barra de Tareas (Footer) */
    .BarraDeTareas {
        height: 35px;
        padding: 0 5px;
        font-size: 0.75rem; 
    }
    .boton-inicio {
        padding: 3px 6px;
        margin-right: 5px;
    }
    .boton-inicio img {
        height: 16px;
        margin-right: 4px;
    }
    .BarraDeTareas-items {
        gap: 5px; 
    }
    .BarraDeTareas-item {
        width: auto; 
        flex-grow: 1;
        padding: 3px 10px;
        font-size: 0.75rem; 
    }
   
    .BarraDeTareas-item-sobremi {
        display: none;
    }
    .ventana-proyectos { 
        width: 98%; 
        top: 3%;
        max-height: 95vh;
        overflow-x: auto;
     
    }
    

    .proyectos-contenido {
        gap: 15px; 
        max-width: 700px; 
    }

    .proyecto-card {
        max-width: 48%; 
        min-width: unset;
    }
}



/* Media query mobile */
@media (max-width: 480px) {
    .navbar {
        gap: var(--icono-gap-navbar-mobile);
    }
    .icono {
        min-width: var(--icono-contenedor-min-width-mobile);
        max-width: var(--icono-contenedor-max-width-mobile);
        font-size: var(--icono-fuente-size-mobile); 
    }
    .icono img {
        width: var(--icono-img-size-mobile);
        height: var(--icono-img-size-mobile);
    }
    .icono span {
        margin-top: 10px;
    }

    .iconos-extra {
        gap: var(--icono-gap-extra-mobile);
    }
    .icono-extra {
        min-width: var(--icono-contenedor-min-width-mobile);
        max-width: var(--icono-contenedor-max-width-mobile);
        font-size: var(--icono-fuente-size-mobile); 
    }
    .icono-extra img {
        width: var(--icono-img-size-mobile);
        height: var(--icono-img-size-mobile);
    }
    .icono-extra span {
        margin-top: var(--icono-texto-margin-top-mobile);
    }
    
    .ventana-proyectos {
        width: 98%; 
        top: 3%;
        max-height: 95vh;
        height: auto;
        
        overflow-x: auto; 
    }
    
    .ventana {
        top: 2%;
        width: 98%;
        max-height: 98%;
        
        overflow-y: auto;
        margin-top: 0;
    }
    .BarraDeTareas-item {
        font-size: 0.6875rem; 
        padding: 3px 5px;
    }
    #ventana-imagen-grande{
        width: 100%;
        
    } 


    .proyectos-contenido {
        flex-direction: row;
        padding: 10px; 
        gap: 15px; 
        max-height: 65vh; 
        max-width: 100%; 
        margin: 0; 
    }

    .proyecto-card {
        width: 100%;
        max-width: 100%; 
        flex: auto; 
    }

    .proyecto-card-contenido img {
        height: 150px;
        object-fit: contain;
         
    }

    .proyecto-card-contenido p {
        font-size: 0.8125rem; 
    }

    .boton-proyecto {
        font-size: 0.6875rem; 
        padding: 4px 8px;
        cursor: url('./img/mano.cur'), pointer; 
        
    }
}