/*TIPOGRAFIAS: POPPINS */

/* PALETA:
Violeta: #ac4af8
Negro: #000000
Blanco: #ffffff 
 */

html {
    scroll-behavior: smooth;
}
main {
    overflow-x: hidden; /* Oculta cualquier desborde horizontal */
}
* {
    margin: 0;
    padding: 0;
}

/* HEADER */

header {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #ac4af8;
    background-color: #ffffff;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    width: 100%;
    padding: 15px 0;
    margin: 0;
}

nav a,
ul a {
    text-decoration: none;
    color: #ac4af8;
}

/* NAV */
.nav-proyectos {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}
/* ==========================================================================
   EFECTO HOVER EN VIOLETA (SIN PERDER TU COLOR)
   ========================================================================== */

/* 1. Preparamos los links para que la transición sea suave */
nav ul li a {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    text-decoration: none;
    color: #ac4af8; 
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
}

/* 2. Cuando pasás el mouse por arriba del menú... */
/* Los botones que NO tienen el mouse encima se vuelven más tenues (opacidad al 40%) */
nav ul:hover li a:not(:hover) {
    opacity: 0.4; 
}

/* 3. El botón que SÍ tiene el mouse encima se queda al 100% de opacidad brillando en violeta */
nav ul li a:hover {
    opacity: 1;
}

/* MAIN */

/* PORTADA */
.portfolio {
    width: 100vw;
    min-height: 100vh;
    height: 200px;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* FOTO */
.photo-container-scher {
    height: 400px;
    background-color: #000000;
    border: 6px solid #000000;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.photo-container-scher img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* Contenedor general que separa las dos columnas principales */
.seccion-presentacion {
    display: flex;
    font-family: sans-serif;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    gap: 40px;
}

/* --- ESTILOS COLUMNA IZQUIERDA --- */
.columna-izquierda {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 320px;
}


/* Contenedor de dirección */
.bloque-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-contacto {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Los cuadritos negros de referencia al lado de Dirección*/
.item-contacto img {
    width: 30px;
}

.item-contacto p {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    margin: 0;
    color: #000000;
}

/* --- ESTILOS COLUMNA DERECHA --- */
.columna-derecha {
    flex: 1;
    /* Ocupa todo el espacio restante a la derecha */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tu nombre en grande */
.columna-derecha h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
    color: #ac4af8;
}

/* El bloque de texto de descripción */
.texto-descripcion {
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
    text-align: justify;
    margin: 0;
}

/* SOFTWARES */

/* 1. ACHICAR LA TARJETA GENERAL */
.tarjeta-software-negra {
    width: 100%;
    max-width: 400px;
    background-color: #000000;
    border-radius: 20px;
    padding: 25px 35px;
    font-family: 'Arial Black', Gadget, sans-serif;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.35);
}

/* 2. ESCALAR EL TÍTULO */
.tarjeta-software-negra h2 {
    text-align: center;
    color: #ffffff;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* 3. PEINAR EL ESPACIADO DE LA GRILLA */
.grilla-software-dos-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}

.columna-soft {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 4. ACHICAR TEXTOS Y CÍRCULOS */
.label-soft {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

/* 1. CÍRCULOS VIOLETAS (Habilidades activas) */
.puntos-nivel .activo {
    color: #8c64b7 !important;
}

/* 2. CÍRCULOS BLANCOS (Los vacíos de la derecha) */
.puntos-nivel .inact-blanco {
    color: #ffffff !important;
}

/* 3. CÍRCULOS GRISES OSCUROS O BLANCOS (Los vacíos de Figma a la izquierda) */
.puntos-nivel .inactivo {
    color: #ffffff !important;
}

/* INFORMACION */
/* Contenedor externo para darle aire y centrar el bloque */
.contenedor-cv-tarjetas {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-color: #ffffff;
}

/* LA TARJETA PRINCIPAL CON BORDE VIOLETA Y SOMBRA */
.tarjeta-cv-borde {
    width: 1000px;
    border: 3px solid #8c64b7;
    border-radius: 25px;
    padding: 35px;
    background-color: #ffffff;
    font-family: Arial, sans-serif;

    /* LA SOMBRITA DETRÁS: Suave, blanda y sutil */
    box-shadow: 0px 10px 25px rgba(140, 100, 183, 0.15);
}

/* LA GRILLA INTERNA (2 columnas x 2 filas) */
.grilla-cv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px 40px;
}

/* Cada uno de los 4 bloques internos */
.bloque-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 50px;
}

/* Títulos de las secciones (EDUCACION, EXPERIENCIA, etc.) */
.bloque-info h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #8c64b7;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Contenido de texto debajo de los títulos */
.bloque-info h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #000000;
}

/* RESPONSIVE: Si se ve en el celular, se transforma en una sola columna para que no se encime el texto */
@media (max-width: 550px) {
    .grilla-cv {
        grid-template-columns: 1fr;
        gap: 25px 0;
    }

    .tarjeta-cv-borde {
        padding: 25px;
    }
}


/* PROYECTOS */

.nav-proyectos {
    background-image: url(../imagenes/fondo.jpg);

}

.nav-proyectos ul a {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #ffffff;
}

.titulo {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    font-weight: bold;
    color: #ac4af8;
    text-align: center;
    margin: 50px 0px 0px 0px;
    letter-spacing: 1px;
    background-color: #000000;
}

/* Contenedor general centrado al ancho de tu portfolio */
.seccion-bloques-fotos {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* Estilos para el Título y Subtítulo */
.encabezado-fotos {
    text-align: center;
}

.encabezado-fotos h2 {
    font-size: 42px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.encabezado-fotos h3 {
    font-size: 24px;
    font-weight: normal;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Grilla para poner las dos fotos en paralelo */
.grilla-dos-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


/* Contenedor de cada foto individual (mantiene formato cuadrado) */
.cartas-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    background-color: #f9f9f9;
}

/* Ajuste de la imagen para que rellene el cuadrado sin deformarse */
.cartas-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texto largo inferior */
.texto-inferior-fotos {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    margin-top: 30px;
}


/* Optimización para que no se rompa en pantallas de celular */
@media (max-width: 768px) {
    .encabezado-fotos h2 {
        font-size: 32px;
    }

    .encabezado-fotos h3 {
        font-size: 18px;
    }

    .grilla-dos-fotos {
        grid-template-columns: 1fr;
        /* Pasan a ponerse una abajo de la otra en celular */
        gap: 20px;
    }
}

/* PROYECTOS */
/* Contenedor general centrado al ancho de tu portfolio */
.seccion-bloques-fotos {
    width: 100%;
    margin: 60px auto;
    box-sizing: border-box;
    padding-bottom: 50px;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* Estilos para el Título y Subtítulo */
.encabezado-fotos {
    text-align: center;
}

.encabezado-fotos h2 {
    font-size: 42px;
    font-weight: bold;
    color: #ac4af8;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.encabezado-fotos h3 {
    font-size: 24px;
    font-weight: normal;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.encabezado-fotos span {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

/* Grilla para poner las dos fotos en paralelo */
.grilla-dos-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.grilla-una-foto {
    /* 1. Cambiamos a una sola columna para que use todo el ancho central */
    display: grid;
    grid-template-columns: 1fr;

    /* 2. El truco clave para centrar el bloque entero */
    margin: 0 auto;

    /* 3. Le damos un ancho máximo lindo para que una sola foto no ocupe toda la pantalla gigante */
    max-width: 500px;
    /* Podés subirlo a 600px si la querés más grande */
    width: 100%;

    /* 4. Aseguramos que el contenido de adentro se alinee en el eje central */
    justify-items: center;
    align-items: center;
}

/* CARTAS */
/* Contenedor invisible pero con volumen */
.cartas-foto {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transform: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Forzamos a la imagen a rellenar el espacio sin dejar luces */
.cartas-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
}

/* Efecto sutil al pasar el cursor: sube un poquito en el eje vertical */
.cartas-foto:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}


.tarjeta-foto-item:hover {
    transform: scale(1.03) !important;
    box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Optimización para que no se rompa en pantallas de celular */
@media (max-width: 768px) {
    .encabezado-fotos h2 {
        font-size: 32px;
    }

    .encabezado-fotos h3 {
        font-size: 18px;
    }

    .grilla-dos-fotos {
        grid-template-columns: 1fr;
        /* Pasan a ponerse una abajo de la otra en celular */
        gap: 20px;
    }
}

/* LOVECRAFT */
/* Contenedor invisible pero con volumen */
.lovecraft-fotos {
    width: 100% !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transform: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Forzamos a la imagen a rellenar el espacio sin dejar luces */
.lovecraft-fotos img {
    width: 100% !important;
    object-fit: cover !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Efecto sutil al pasar el cursor: sube un poquito en el eje vertical */
.lovecraft-fotos:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}

/* --- MOTORFIX --- */
/* Contenedor invisible pero con volumen */
.motorfix-foto {
    width: 100% !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transform: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Forzamos a la imagen a adaptarse de forma rectangular sin recortarse */
.motorfix-foto img {
    /* 2. CONFIGURACIÓN CORRECTA PARA FOTOS APAISADAS */
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
}

/* Efecto sutil al pasar el cursor: sube un poquito en el eje vertical */
.motorfix-foto:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}

/* --- PETSHOP: EL RINCON --- */
/* Contenedor invisible pero con volumen */
.petshop-foto {
    width: 100% !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transform: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Forzamos a la imagen a adaptarse de forma rectangular sin recortarse */
.petshop-foto img {
    /* 2. CONFIGURACIÓN CORRECTA PARA FOTOS APAISADAS */
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
}

/* Efecto sutil al pasar el cursor: sube un poquito en el eje vertical */
.petshop-foto:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}

/* --- TARJETAS (VERSIÓN DEFINITIVA) --- */
.tarjetas-foto {
    /* 1. Obliga al contenedor a ignorar la grilla de dos columnas y ocupar todo el renglón */
    grid-column: 1 / -1 !important;
    display: block !important;
    margin: 30px auto !important;
    width: 100% !important;
    max-width: 600px !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Forzamos a la imagen a ser una foto normal y fluida */
.tarjetas-foto img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: fill !important;
    border: none !important;
}

/* Efecto al pasar el cursor */
.tarjetas-foto:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}

/* --- MALBA (SOLUCIÓN DEFINITIVA PARA AGRANDAR) --- */

.malba-foto {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 950px !important;
    margin: 40px auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: 0 4px 20px rgba(27, 18, 43, 0.12) !important;
    transform: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.malba-foto img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    border: none !important;
}

/* Efecto de subida al pasar el mouse */
.malba-foto:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(27, 18, 43, 0.22) !important;
}

.pagina-malba{
    color: #000000;
    font-weight:900;
    text-decoration: none;
}



/* FOOTER */
footer {
    height: 70px;
    background-image: url(../imagenes/fondo.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

footer img {
    width: 30px;
}

footer a {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    color: #ac4af8;
}

.behance {
   display: flex;
    justify-content: center;
    align-items: center;
}

.instagram{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* EFECTO HOVER (Cuando pasás el mouse por encima) */

/* 1. El texto cambia de color suavemente */
footer a {
    transition: color 0.3s ease; 
}

/* EFECTO HOVER*/

/* Hace que todo el bloque (logo + texto) tenga una transición suave */
footer .behance, 
footer .instagram {
    transition: opacity 0.3s ease;
}

/* Cuando pasás el mouse por encima de la cajita, todo se aclara un toque */
footer .behance:hover, 
footer .instagram:hover {
    opacity: 0.7; 
    cursor: pointer; 
}

/* Si además querés que el texto cambie a blanco, dejás esto; si no, borralo: */
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #ffffff; 
}