*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;/*para cuando el usuario toque un ancla y vaya a la misma página, vaya más suave*/
}
body{
    background: #000;
    background-attachment: fixed;/*el degradado no se mueve al scrollear*/
    color: #F0F0E8;
    display: block;
    font-family: "Poppins", sans-serif;/*tipografía*/
}
.titulo{
    text-align: left;/*alineo los títulos a la izquierda*/
    padding-top: 4rem;/*separados de arriba*/
    padding-left: 50px;/*separado de izquierda*/
    font-size: 100px;/*tamaño de letra*/
    font-weight: bold;/*en negrita*/
    color: #A6FF00;/*color texto*/
}
.titulo:hover{/*hover de los titulos*/
    color: #7DFF00;/*color más oscuro*/
    text-shadow: 0 0 3px #7DFF00;/*sombra del texto*/
    transition: all 0.3s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
h2{/*subtítulos*/
    color: #A6FF00;/*color*/
    padding: 1rem 0 2rem 3rem;/*separaciones*/
}
h2:hover{/*hover de subtítulos*/
    color: #7DFF00;/*color más oscuro*/
    transition: all 0.3s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
.texto p{/*texto de la historia de los proyectos*/
    color: #E5E5E5;/*color de letra*/
    text-align: left;/*texto alineado a la izq*/
    font-size: 18px;/*tamaño de letra*/
    font-weight: bold;/*negrita*/
    padding: 3px;/*separación externa*/
    margin: 1rem 6.25rem 1rem 6.5rem;/*separación interna*/
}
.inicio-contenido {/*Foto de perfil en la introducción*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}
#introduccion-imagen img {
    height: 260px;
    width: auto;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 18px rgba(125, 255, 0, 0.35);/*sombra verde suave*/
    transition: transform 0.4s ease, box-shadow 0.4s ease;/*animación del hover*/
}
#introduccion-imagen img:hover {
    transform: scale(1.06);/*agranda levemente*/
    box-shadow: 0 0 30px rgba(125, 255, 0, 0.6);/*sombra más intensa en hover*/
}
#acercade p{/*texto "acerca de"*/
    color: #E5E5E5;/*color de texto*/
    text-align: left;/*Alineado a la izq*/
    font-size: 18px;/*tamaño de letra*/
    font-weight: bold;/*negrita*/
    padding: 3px;/*separación externa*/
    margin: 1rem 6.25rem 1rem 6.5rem;/*separación interna*/
}
#habilidades,
#acercade,
#proyectos,
#contacto{
    background: linear-gradient(to bottom, #2A2A2A, #000000);
    padding: 2rem 0;
    border-top: 2px solid #7DFF00;
}
#acercade p,
.texto p{
    color: #E5E5E5;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    padding: 3px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.creditos{/*Créditos de los proyectos*/
    background: #000;/*fondo negro*/
    box-shadow: 0 0 5px #7DFF00;/*sombra de la blockquote*/
    border-left: 4px solid #7DFF00;/*borde izquierdo rellenito*/
    border-right: 4px solid #7DFF00;/*borde derecho "*/

    color: #E5E5E5;/*color de la letra, blanco (no puro)*/
    font-style: italic;/*tipo de letra*/
    font-size: 20px;/*tamaño de la letra*/
    text-align: center;/*alineo los nombres al centro*/

    padding-left: 15px;/*espaciado interno (izq)*/
    padding-right: 15px;/*" " (der)*/
    padding-top: 3px;/*" " (arriba)*/
    padding-bottom: 3px;/*" " (abajo)*/
    margin-top: 5px;/*márgen de arriba*/
    margin-bottom: 30px;/*márgen de abajo, más grande*/
    max-width: 700px;/*ancho maximo de la quote*/
    margin-left: auto;/*márgen izq y derecho automatico*/
    margin-right: auto;
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#imagen-proyecto {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}
.imagen-teatro {
    width: 55%;
    max-width: 750px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow:
    0 0 0 2px #2A2A2A,
    0 0 30px 20px #000000,
    0 0 60px 40px rgba(0, 0, 0, 0.85);
    background-color: #000;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}
.imagen-teatro:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow:
    0 0 0 2px #7DFF00,
    0 0 30px 15px rgba(125, 255, 0, 0.2),
    0 0 60px 35px rgba(0, 0, 0, 0.85);
}
.imagen-teatro img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; 
    border-radius: 18px;
    transition: filter 0.4s ease;
    -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, black 65%, transparent 100%);
    mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, black 65%, transparent 100%);
}
.imagen-teatro:hover img {
    filter: brightness(1.1) saturate(1.15);
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
nav{/*NAVEGADOR*/
    background-color: #000;/*color de fondo negro*/
    display: flex;/*las cosas una al lado de la otra*/
    align-items: center;/*alineados al centro*/
    padding: 15px;/*espaciado interno*/
}
.navegador{
    display:flex;
    gap: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    text-decoration: none;
    font-weight: bold;
}
.logo{
    position: static;
    max-width: 100%;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-right: 3rem;
    margin-left: 1rem;
    margin-top: 2rem;
}
.navegador a{/*anchor del nav*/
    text-decoration: none;/*sin decoración*/
    color: #555555/*color "apagado"*/
}
.navegador a:hover{/*Hover de anclas del nav*/
    color: #7DFF00;/*color de texto*/
    transition: all 0.3s ease;/*Animación simple para que no sea tan brusco el cambio*/
    transform: scale(1.1);/*Agranda la palabra*/
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.logo-redes a{
    text-decoration: none;
    margin: 8rem;
}
.logo-redes i{
    font-size: 40px;
    width: 70px;
    height: 70px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    color: #F5F5F5;
    display: inline-block;
    transition: 0.3s;
}
.logo-redes i:hover{/*hover de los iconos de redes*/
    color: #A6FF00;
    transition: all 0.3s ease;/*Animación simple para que no sea tan brusco el cambio*/
    transform: scale(1.1);/*Agranda la palabra*/
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.contenedor-carrusel{
    width: 100%;/*ancho completo*/
    max-width: 900px;/*ancho maximo*/
    margin: 1rem auto 1rem auto;/*centrado horizontal*/
    background: #0D0D0D;/*color de fondo, negro suave*/
    border-radius: 16px;/*borde redondeado*/
    padding: 1.5rem;/*espaciado interno*/
    font-family: system-ui, sans-serif;/*tipografía*/
}
.carrusel-ventana{/*ventana que recorta los slides fuera de vista*/
    width: 100%;/*ancho completo*/
    overflow: hidden;/*oculta lo que se desborda*/
    border-radius: 12px;/*borde redondeado*/
    scroll-behavior: smooth;/*desplazamiento suave interno*/
    scroll-snap-type: x mandatory;/*enganche perfecto al slide*/
}
.diapositivas{
    display: flex;/*imagen al lado del texto*/
    transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);
}
.diapositiva-texto{/*contenedor del titulo y descripcion*/
    flex: 1;/*disposicion del titulo y descripcion*/
}
.diapositiva-titulo{/*titulo de las img del carrusel*/
    font-size: 26px;/*tamaño de letra*/
    color: #CCFF33;/*color del texto*/
    font-weight: bold;/*negrita*/
    margin-bottom: 0.85rem;/*separacion del texto de abajo*/
    line-height: 1.2;/*tamaño de la linea*/
}
.diapositiva-titulo:hover{/*hover del titulo de las img del carrusel*/
    color: #A6FF00;/*color mas oscurito*/
}
.diapositiva-descr{/*descripcion de las img del carrusel*/
    color: #E5E5E5;/*color del texto*/
    text-align: left;/*texto alineado a la izq*/
    font-size: 18px;/*tamaño de la letra*/
    font-weight: bold;/*negrita*/
}
.diapositiva-img {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #0D0D0D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 280px;
}
.diapositiva-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
.proyecto{
    display: flex;
    width: 300%;/*3 diapositivas/slides*/
    animation: carruselAuto 12s infinite;/*animación infinita, que dura 12segundos (está en loop)*/
}
.carrusel-ventana{/*ventana que recorta los slides fuera de vista*/
    width: 100%;/*ancho completo*/
    overflow: hidden;/*oculta lo que se desborda*/
    border-radius: 12px;/*borde redondeado*/
    scroll-behavior: smooth;/*desplazamiento suave interno*/
    scroll-snap-type: x mandatory;/*enganche perfecto al slide*/
}
.proyecto{
    min-width: 100%;/*cada slide ocupa el 100% del ancho*/
    box-sizing: border-box;/*incluye padding en el ancho*/
    display: flex;/*imagen al lado del texto*/
    align-items: center;/*centrado vertical*/
    gap: 2.5rem;/*separación entre texto e imagen*/
    padding: 1.5rem;/*espaciado interno*/
    position: relative;/*para posicionar las flechas*/
    scroll-snap-align: start;/*punto de enganche del scroll*/
}
@keyframes carruselAuto{
    0%  { transform: translateX(0%); }
    30% { transform: translateX(0%); }

    35% { transform: translateX(-100%); }
    65% { transform: translateX(-100%); }

    70% { transform: translateX(-200%); }
    100%{ transform: translateX(-200%); }
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.menuProyectos{
    position: relative;/*necesario para el dropdown*/
    margin-left: 2rem;/*separación de la izq*/
    margin-bottom: 1rem;/*margen base pequeño*/
    display: inline-block;/*ajusta al botón*/
    padding-bottom: 0;
    transition: padding-bottom 0.35s cubic-bezier(.77, 0, .18, 1);
}
.menuProyectos:hover{
    padding-bottom: 280px;/*altura aprox del dropdown desplegado*/
}
.botonProyectos{/*Botón ver más*/
    padding: 12px 22px;/*espaciado interno*/
    border: none;/*sin borde*/
    background: #0D0D0D;/*color de fondo, negro suave*/
    color: #A6FF00;/*color de texto*/
    font-weight: bold;/*en negrita*/
    border-radius: 8px;/*borde del boton*/
    cursor: pointer;/*cursor de mano*/
    font-size: 15px;/*tamaño del texto*/
    transition: all 0.3s ease;/*animación suave*/
    align-items: center;/*centrado vertical*/
    border: 1px solid #7DFF00;/*borde verde brillante*/
    border-radius: 10px;/*borde curvado*/
    box-shadow: 0 4px 15px rgba(125, 255, 0, 0.35);/*glow proyectado*/
}
.menuProyectos:hover .botonProyectos{/*hover del boton via menu*/
    transform: translateY(-2px);/*se levanta levemente*/
}

.listaProyectos{/*lista de los proyectos*/
    margin-top: 8px;/*separación del boton*/
    position: absolute;/*posición que empuja*/
    background: #0D0D0D;/*color de fondo, negro suave*/
    border: 1px solid #7DFF00;/*borde verde brillante*/
    border-radius: 10px;/*borde curvado*/
    min-width: 230px;/*ancho minimo*/
    overflow: hidden;/*recorta los hover internos*/
    box-shadow: 0 8px 25px rgba(125, 255, 0, 0.35);/*glow proyectado*/
    opacity: 0;/*invisible por defecto*/
    visibility: hidden;/*oculto por defecto*/
    transform: translateY(-10px);/*desplazado hacia arriba*/
    transition: all 0.35s cubic-bezier(.77, 0, .18, 1);/*animación suave de entrada*/
    z-index: 10;/*por encima de otros elementos*/
}
.listaProyectos a{/*Lista de todos los proyectos (anchor)*/
    display: block;/*ocupa toda la fila*/
    padding: 12px 18px;/*espaciado interno*/
    text-decoration: none;/*sin decoracion*/
    background: transparent;/*sin color de fondo*/
    color: #E5E5E5;/*color de texto, gris muy claro*/
    font-weight: bold;/*en negrita*/
    border-left: 3px solid transparent;/*borde izq invisible (se rellena en hover)*/
    transition: all 0.25s ease;/*animación suave*/
    position: relative;/*para el ::before*/
}
.botonProyectos:hover{
    color: #A6FF00;/*color verde principal*/
    box-shadow: 0 8px 30px rgba(125, 255, 0, 0.35);/*glow proyectado*/
}
.listaProyectos a:hover{/*hover de las anclas*/
    background: linear-gradient(90deg, rgba(125,255,0,0.15), transparent);/*degradado sutil*/
    color: #A6FF00;/*color verde principal*/
    border-left: 3px solid #A6FF00;/*borde izq verde*/
    padding-left: 22px;/*se desplaza a la derecha*/
}

.menuProyectos:hover .listaProyectos{/*muestra la lista al pasar el mouse*/
    opacity: 1;/*visible*/
    visibility: visible;/*activa*/
    transform: translateY(0);/*en su posición final*/
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.inicio{
    gap: 20px;
    padding: 20px;/*espaciado interno*/
    margin: 100px auto 200px auto;/*centrado horizontal automático*/
    max-width: 900px;/*limita el ancho para que quede centrado*/
}
.introduccion{
    color: #E5E5E5;/*color de letra*/
    text-align: left;/*alinear el texto a la izquierda*/
}
.rocco{/*Palabra "rocco" en Introduccion*/
    font-weight: bold;/*negrita*/
    text-decoration: none;/*sin decoración, pelao*/
    color: #CCFF33;/*color*/ 
}
.rocco:hover{
    font-weight: bold;/*negrita*/
    color: #A6FF00;/*color más oscurito*/
    transition: all 0.5s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
.programador{/*Palabra "programador" en Introduccion*/
    font-weight: bold;/*negrita*/
    text-decoration: none;/*sin decoración, pelao*/
    color: #A0A0A0;/*color*/ 
}
.programador:hover{
    font-weight: bold;/*negrita*/
    color: #555555;/*color más oscurito*/
    transition: all 0.5s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
.argentina{/*Palabra "argentina" en Introduccion*/
    font-weight: bold;/*negrita*/
    text-decoration: none;/*sin decoración, pelao*/
    color: #74ACDF;/*color*/ 
}
.argentina:hover{/*Palabra "cordoba" en Introduccion*/
    font-weight: bold;/*negrita*/
    color: #4A8FC4;/*color más oscurito*/
    transition: all 0.5s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
.cordoba{
    font-weight: bold;/*negrita*/
    text-decoration: none;/*sin decoración, pelao*/
    color: #D52B1E;/*color*/ 
}
.cordoba:hover{
    font-weight: bold;/*negrita*/
    color: #A61E17;/*color más oscurito*/
    transition: all 0.5s ease;/*Animación simple para que no sea tan brusco el cambio*/
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.contenedor-habilidades{/*Contenedor flex que centra y distribuye las tarjetas*/
    display: flex;
    flex-wrap: wrap;/*si no entran, saltan a la siguiente fila*/
    gap: 1.5rem;/*separación entre tarjetas*/
    justify-content: center;/*centrado horizontal*/
    padding: 1rem 2rem 2rem;/*espaciado interno*/
}
.habilidades-tarjeta{/*Cada tarjeta de tecnología*/
    width: 8rem;
    height: 10rem;
    background: #121212;/*fondo negro grafito*/
    border: 1px solid #7DFF00;/*borde verde brillante*/
    border-radius: 12px;/*bordes redondeados*/
    box-shadow: 0 0 10px rgba(125, 255, 0, 0.2);/*glow suave*/
    padding: 1rem;/*espaciado interno*/
    display: flex;
    flex-direction: column;/*ícono arriba, texto abajo*/
    align-items: center;/*centrado horizontal*/
    gap: 2rem;/*separación entre ícono y texto*/
    min-width: 100px;/*ancho mínimo de la tarjeta*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;/*animación suave*/
}
.habilidades-tarjeta:hover{/*Hover de la tarjeta*/
    transform: translateY(-6px);/*se levanta*/
    box-shadow: 0 0 20px rgba(166, 255, 0, 0.5);/*la sombra se intensifica*/
}
.habilidades-tarjeta i{/*Íconos dentro de las tarjetas*/
    font-size: 2.5rem;/*tamaño grande*/
    color: #E5E5E5;/*verde principal*/
}
.habilidades-tarjeta span{/*Texto debajo del ícono*/
    font-size: 0.9rem;
    color: #E5E5E5;
    font-weight: bold;
}
.habilidades-texto-icono{/*reemplazo del ícono de C#, que no existe en font awesome*/
    font-size: 2.2rem !important;
    color: #E5E5E5;
    font-weight: bold !important;
    line-height: 1 !important;
}
.habilidades-tarjeta:hover i,
.habilidades-tarjeta:hover .habilidades-texto-icono{
    color: #A6FF00;
    transition: color 0.3s ease;
}
/*cada tarjeta aparece un poco después que la anterior*/
.habilidades-tarjeta:nth-child(1){animation-delay: 0s;}
.habilidades-tarjeta:nth-child(2){animation-delay: 0.1s;}
.habilidades-tarjeta:nth-child(3){animation-delay: 0.2s;}
.habilidades-tarjeta:nth-child(4){animation-delay: 0.3s;}
.habilidades-tarjeta:nth-child(5){animation-delay: 0.4s;}
.habilidades-tarjeta:nth-child(6){animation-delay: 0.5s;}
/*///////////FOOTER//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#footer{
    background-color: #000000;/*negro absoluto*/
    border-top: 2px solid #7DFF00;/*línea verde arriba*/
    padding: 2rem 1rem;/*espaciado interno*/
    text-align: center;/*todo centrado*/
    margin-top: 4rem;/*separación del contenido*/
}
.footer-texto{/*Texto de copyright*/
    color: #A0A0A0;/*gris medio, segundo plano*/
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.footer-nombre{/*Nombre destacado dentro del copyright*/
    color: #A6FF00;/*verde principal*/
    font-weight: bold;
}

.footer-redes{/*Contenedor de íconos del footer*/
    display: flex;
    justify-content: center;
    gap: 1.5rem;/*separación entre íconos*/
    margin-top: 0.5rem;
}
.footer-redes a{/*íconos del footer*/
    text-decoration: none;
}
.footer-redes i{
    font-size: 1.5rem;
    color: #555555;/*gris apagado por defecto*/
    transition: color 0.3s ease, transform 0.3s ease;
}
.footer-redes i:hover{
    color: #A6FF00;/*verde al hacer hover*/
    transform: scale(1.2);/*leve agrandado*/
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
🟢 Verdes principales (identidad)
Verde neón principal → #A6FF00
Verde brillante → #7DFF00
Verde medio → #39FF14
Verde oscuro → #0F5F00
Verde sombra profunda → #062B00

👉 Usalos así:

Botones: neón
Hover: verde brillante
Fondos secundarios: verde oscuro
⚫ Negros (base del diseño)
Negro absoluto → #000000
Negro suave → #0D0D0D
Negro grafito → #121212
Negro con tinte verde → #0A1A0A

👉 Ideal para:

Fondo principal
Secciones
tarjetas oscuras
⚙️ Grises (equilibrio visual)
Gris oscuro → #2A2A2A
Gris medio → #555555
Gris claro → #A0A0A0
Gris muy claro → #E5E5E5

👉 Usalos para:

Texto secundario
Bordes
UI (inputs, labels)
✨ Colores de acento (efecto graffiti)
Verde glow → #CCFF33
Verde slime → #66FF00
Blanco sucio → #F5F5F5

👉 Para:

efectos de brillo
sombras
detalles tipo "salpicadura"

74ACDF//BANDERA ARGENT
4A8FC4//mas oscuro
D52B1E//BANDERA CORDOBESA
A61E17//mas oscuro




/*SUBRAYADO POR LAS DUDAS
    text-decoration: underline;/*subrayado*/
/*text-underline-offset: 1px;/*separacion del subrayado del texto*/
/*text-decoration-color: #A61E17;/*color de subrayado*/
/*transition: all 0.5s ease;/*Animación simple para que no sea tan brusco el cambio*/