:root {
    --main-color: #010123; /* Azul oscuro */
    --second-color: #b5babe; /* Gris */
    --third-color: #910bcf;
}


.contieneCards {
    max-width: 1220px;
    height: 95vh;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-color: yellowgreen;
    display: flex;
    margin-left: 80px;
    justify-content: center;
}

.columnP3 {
    width: 300px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    width: 40%;
    height: 90vh;
    border: 2px solid #007BFF; /* Cambia el color y el grosor del borde aquí */
}

.columnP3 h2 {
    color: var(--third-color);
}

.card p {
    color: var(--third-color); /* Cambia el color de los párrafos dentro de la card */
}

/*.hexagono {
    width: 150px; /* Cambia este valor al tamaño que prefieras */
    /*height: 150px; /* Cambia este valor al tamaño que prefieras */
    /*overflow: hidden; /* Para ocultar cualquier parte de la imagen que se salga del contenedor */
/*}*/

.hexagono img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la imagen ocupe toda la altura del contenedor */
    object-fit: cover; /* Ajusta la imagen para llenar el contenedor sin distorsionarse */
    animation: flotante 3s ease-in-out infinite;
}



@keyframes flotante {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Desplaza la imagen hacia arriba */
    }
    100% {
        transform: translateY(0);
    }
}


.sobre-mi-contenido h2 {
    text-align: left;
    line-height: 1.2;
    color: var(--second-color);
}

.sobre-mi-contenido h3 {
    font-size: 1.6rem;
    color: var(--third-color);
}


.sobre-mi-contenido p {
    font-size: 1.6rem;
    margin: 1rem 0 1rem;
    color: var(--second-color);
}

.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    border: .2rem solid var(--third-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--third-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .5s ease;
}

.social-media a:hover {
    background: var(--third-color);
    color: var(--second-color);
    box-shadow: 0 0 1rem var(--third-color);
}


#maquina-escribir {
    display: inline-block;
    width: 320px; /* Ajusta este valor al ancho que necesites */
    height: 30px; /* También puedes ajustar la altura si es necesario */
    border-right: 2px solid var(--third-color); /* Línea que simula el cursor */
    white-space: nowrap;
    overflow: hidden; /* Oculta el texto que aún no se ha mostrado */
    text-align: left; /* Centra el texto en el contenedor */
    vertical-align: middle; /* Alinea verticalmente el texto */
    animation: parpadeoCursor 0.75s steps(40) infinite normal;
}


/* Animación para el cursor parpadeante */
@keyframes parpadeoCursor {
    from { border-right-color: var(--third-color); }
    to { border-right-color: transparent; }
}


/*-------------------------------------------------------- ANIMACIÓN 2 ----------------------------------------------------------*/

.card2 {
    display: flex;                    /* Alinear horizontalmente los elementos */
    justify-content: flex-start;      /* Alinear al inicio */
    align-items: center;              /* Centrado vertical */
    gap: 30px;                        /* Espacio entre los dos conjuntos (ícono + texto) */
    padding: 10px;
}

.social-media2 {
    display: flex;                    /* Alinear ícono y texto en línea */
    align-items: center;              /* Centrar verticalmente */
    gap: 10px;                        /* Espacio entre el ícono y el texto */
}

.social-media2 a {
    display: flex;                    /* Flexbox para centrar el ícono */
    justify-content: center;          /* Centrar horizontalmente */
    align-items: center;              /* Centrar verticalmente */

    width: 3.5rem;                    /* Botón circular */
    height: 3.5rem;
    background: transparent;
    border: .2rem solid var(--third-color);
    border-radius: 50%;               /* Mantiene el botón redondo */

    transition: .5s ease;             /* Efecto hover */
}

.icon i {
    color: #22b5c9;                   /* Color del ícono */
    font-size: 20px;                  /* Tamaño del ícono */
}

/* Texto al lado del botón */
.social-media2 span {
    font-size: 0.85rem;                  /* Tamaño del texto */
    color: var(--third-color);        /* Color del texto */
    font-weight: bold;                /* Opcional: hace el texto más visible */
}

/* Efecto hover en el ícono */
.social-media2 a:hover {
    background: var(--third-color);
    color: var(--second-color);
    box-shadow: 0 0 1rem var(--third-color);
}



#maquina-escribir2 {
    display: inline-block;
    width: 320px; /* Ajusta este valor al ancho que necesites */
    height: 30px; /* También puedes ajustar la altura si es necesario */
    border-right: 2px solid var(--third-color); /* Línea que simula el cursor */
    white-space: nowrap;
    overflow: hidden; /* Oculta el texto que aún no se ha mostrado */
    text-align: left; /* Centra el texto en el contenedor */
    vertical-align: middle; /* Alinea verticalmente el texto */
    animation: parpadeoCursor 0.75s steps(40) infinite normal;
}

.circle {
    display: flex;               /* Activa Flexbox */
    justify-content: center;     /* Centra horizontalmente */
}

.circle img {
    width: 60%;                  /* Controla el tamaño de la imagen */
    height: 60%;
    object-fit: cover;           /* Mantiene la proporción sin distorsión */
    animation: flotante 3s ease-in-out infinite;
}


/* Animación para el cursor parpadeante */
@keyframes parpadeoCursor {
    from { border-right-color: var(--third-color); }
    to { border-right-color: transparent; }
}