*{
    margin: 0;
    padding: 0;
}

/*VARIABLES DE ESTILO*/
:root {
    /* COLORES */
    --primary-color: #E1E1E1;
    --secondary-color: #1B1B1B; 
    --accent-color: #6424C9;
    --accent-color_50: rgba(100, 36, 201, 0.5);
    --grey-color: #4d4d4d;


    /* TIPOGRAFÍAS */
    --h1-font-family: "Figtree", sans-serif;
    --h1-font-size: 2.5em;

    --h2-font-size: 1.7em;
    --h2-font-weight: 500;

    --p-font-family: "Fragment Mono", sans-serif;
    
    /* ESTILOS DE TIPOGRAFÍA  */
    --letter-spacing: -1px;
    --uppercase: uppercase;

}

/* COLORES EN DARK MODE */
.darkmode{
    --primary-color: #1B1B1B;
    --secondary-color: #E1E1E1; 
    --accent-color: #A788FA;
    --accent-color_50: rgba(167, 136, 250, 0.5);
    --grey-color: #9F9F9F;
}

/* COLORES PREDETERMINADOS  */
body{
    background-color: var(--primary-color);
    color: var(--secondary-color); 
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

/* HEADER */
header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    z-index: 5;
    position: sticky;
    top: 0;
    background-color: var(--primary-color);
    transition: background-color 0.4s ease-in-out;
    border-bottom: 1px solid rgb(48, 48, 48);
}

a{
    text-decoration: none;
    color: var(--secondary-color)
}

h1{
    font-family: var(--p-font-family);
    font-weight: 500;
    font-size: 2.5em;
    letter-spacing: var(--letter-spacing);
}


.nombre-corto { 
    display: none; 
}

ul{
    list-style: none;
}
.detalle_descripcion{
    list-style:inside;
}

button{
    border: none;
}

/* NAVEGACIÓN */
.nav_header ul{
    font-family: var(--p-font-family);
    text-transform: var(--uppercase);
    letter-spacing: var(--p-letter-spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 52px;
}

.nav_header a{
    text-decoration: none;
    color: var(--secondary-color);
}

.nav_header a:hover,
.nav_header a.activo {
    color: var(--accent-color);
}

.nav_header a.activo::before,
.nav_header a.activo::after {
    opacity: 1;
}

.nav_header a::before {
    content: "[";
    margin-right: 5px;
    display: inline-block;
    opacity: 0;
}

.nav_header a::after {
    content: "]";
    margin-left: 5px;
    display: inline-block;
    opacity: 0;
}

.nav_header a:hover:before,
.nav_header a:hover:after,
.nav_header a:active:before,
.nav_header a:active:after,
.nav_header a:focus:before,
.nav_header a:focus:after{
    opacity: 1;
}

.abrir-menu, .cerrar-menu{
    display: none;
    cursor: pointer;
}

/* CURSOR  */
#mi-cursor {
    position: fixed; 
    /* Hace que el elemento no sea clicable: */
    pointer-events: none; 
    z-index: 100; 
    /*Baja la opacidad para que al cargar la página no se vea el cursor en flujo normal:*/
    opacity: 0; 
    transition: opacity 0.3s ease-out;
}

#mi-cursor circle {
    fill: var(--accent-color);
    transition: fill 0.4s ease-in-out;
}

/* Oculta el cursor personalizado en pantallas táctiles */
@media (pointer: coarse) {
    #mi-cursor { display: none; }
}

/* TOGGLE LIGHT Y DARK MODE  */
#modo-toggle {
    cursor: pointer;
}

/*Light mode */
#modo-toggle .bg { 
    fill: var(--secondary-color); 
}
#modo-toggle .circulo {
    fill: #A788FA;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}
#modo-toggle .sol { 
    fill: var(--secondary-color); 
}
#modo-toggle .luna { 
    fill: var(--grey-color); 
}

/*Dark mode */
#modo-toggle.dark .bg {
    fill: #FAFAFA;
}

/*cx modifica la posición del círculo */
#modo-toggle.dark .circulo {
    transform: translateX(30px); 
    fill: #6424C9;
}

#modo-toggle.dark .sol {
    fill: #6C6C6C;
}

#modo-toggle.dark .luna {
    fill: #FAFAFA;
}


/* HOME */
/* HERO */
.hero {
    height: calc(100dvh - 84px - 44px);
    display: flex;
    align-items: flex-end;
    padding: 0 20px;
    padding-bottom: 1.5rem;
}

.hero_texto {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 3em;
    position: relative;
}

.hero_año {
    font-family: var(--p-font-family);
    font-size: 1rem;
    color: var(--accent-color);
    margin-bottom: 0.2rem;
    position: absolute;
    top: -20px;
    left: 16px;
}

.hero_titulo {
    font-family: var(--p-font-family);
    font-size: clamp(5rem, 14vw, 14rem);
    font-weight: 400;
    letter-spacing: -4px;
    line-height: 0.9;
    color: var(--secondary-color);
}

.hero_subtitulo {
    font-family: var(--p-font-family);
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--grey-color);
    letter-spacing: 0.05em;
    margin-top: 1rem;
    margin-left: 1.1em;
}

/* PROYECTOS DESTACADOS */
.destacados {
    padding-bottom: 44px;
}

.destacados_cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 20px;
}

.destacados_etiqueta {
    font-family: var(--p-font-family);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-color);
}

.destacados_ver_todos {
    font-family: var(--p-font-family);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.destacados_ver_todos:hover {
    color: var(--accent-color);
}

/* Item base: numero | info | imagen */
.destacado_item {
    display: grid;
    grid-template-columns: 4.5rem 1fr 58%;
    min-height: 68vh;
    overflow: hidden;
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(55px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}

.destacado_item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Item invertido: imagen | info | numero */
.destacado_item--invertido {
    grid-template-columns: 58% 1fr 4.5rem;
}

.destacado_item--invertido .destacado_imagen_wrap {
    order: 1;
}

.destacado_item--invertido .destacado_info {
    order: 2;
}

.destacado_item--invertido .destacado_numero {
    order: 3;
    justify-content: center;
}

/* Columna número */
.destacado_numero {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.4rem;
    font-family: var(--p-font-family);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--grey-color);
    transition: color 0.35s ease;
}

/* Columna info */
.destacado_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.4rem 2rem 2.2rem;
}

.destacado_categoria {
    font-family: var(--p-font-family);
    font-size: 0.9rem;
    padding-left: 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-color);
    padding-bottom: 0.6em;
}

.destacado_info_bottom {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.destacado_titulo {
    font-family: var(--p-font-family);
    font-size: clamp(2rem, 4vw, 4.8rem);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 0.93;
    color: var(--secondary-color);
    transition: color 0.35s ease;
}


/* Columna imagen */
.destacado_imagen_wrap {
    overflow: hidden;
}

.destacado_imagen_wrap a {
    display: block;
    height: 100%;
}

.destacado_imagen_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.7s ease;
}

.destacado_imagen_wrap:hover img {
    filter: grayscale(0%);
    transform: scale(1.04);
}

/* Hover en el item: número y título en accent */
.destacado_item:hover .destacado_numero {
    color: var(--accent-color);
}


/* SECCIÓN CTA */
.cta {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    padding-bottom: 5rem;
    padding-top: 5rem;
    gap: 3rem;
    align-items: center;
    justify-content: space-evenly;
    height: 50dvh;
}

.cta_titulo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--p-font-family);
    font-size: 10rem;
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 0.95;
    color: var(--secondary-color);
}

.cta_titulo span:first-child {
    align-self: flex-start;
}

.cta_titulo span:last-child {
    align-self: flex-end;
}

.cta_contacto {
    display: flex;
    flex-direction: column;
    padding-top: 2em;
    padding-right: 2em;
}

.cta_contacto .contacto_item {
    flex: 1;
    padding: 1rem;
}

/* PÁGINA PROYECTOS */
.pagina_proyectos {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/*Transición a todos los colores y posiciones */
#modo-toggle .bg,
#modo-toggle .circulo,
#modo-toggle .sol,
#modo-toggle .luna {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*Layout de dos columnas*/
.proyectos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: hidden;
    align-items: end;
}

/*Menú izquierdo estático */
.proyectos_menu {
    display: flex;
    align-items: center;
    padding: 2rem;
}

/*Botones del menú */
.proyectos_btn {
    background: none;
    cursor: pointer;
    font-family: var(--p-font-family);
    font-size: 1rem;
    color: var(--grey-color);
    transition: opacity 0.3s ease;
    padding: 0.5rem 0;
    display: block;
}

/* Estado activo: proyecto visible */
.proyectos_btn.activo {
    opacity: 1;
    color: var(--accent-color);
}

/* Columna derecha: scroll oculto */
.proyectos_imagenes {
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* Hueco debajo de la ultima imagen para permitir que haga snap arriba: */
.proyectos_imagenes::after {
    content: "";
    display: block;
    height: 100%;
    flex-shrink: 0;
}

/* Cada proyecto ocupa el 100% del contenedor */
.proyectos_item {
    height: auto;
    display: flex;
    align-items: start;
    scroll-snap-align: start;
}


/* Enlace que envuelve la imagen */
.proyectos_item a {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Imagen con animación de entrada */
.proyectos_item img {
    width: 100%;
    height: auto;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.proyectos_item video {
    width: 100%;
    height: auto;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Imagen y vídeo en blanco y negro por defecto */
.proyectos_item img,
.proyectos_item video {
    width: 100%;
    height: auto;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

/* En color al pasar el cursor */
.proyectos_item a:hover img,
.proyectos_item a:hover video {
    filter: grayscale(0%);
}

/* PÁGINA SOBRE MÍ */
.pagina_sobremi {
    min-height: 100dvh;      /* era: height: 100dvh */
    display: flex;
    flex-direction: column;
}

/* SECCIÓN SOBRE MÍ */
.sobremi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;                 /* ocupa el espacio disponible entre header y footer */
    
    /* ELIMINAR: height, position: fixed, top, left, width */
    min-height: 0;           /* permite que flex respete el contenido */
}

/* COLUMNA IZQUIERDA: foto + contacto */
.fotoycontacto {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
}

/* Foto */
.sobremi_foto {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    overflow: hidden;
}

.sobremi_foto img {
    width: 47%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

/* Grid de contacto 2x2 */
.contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 50%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Cada celda */
.contacto_item {
    padding: 1.5rem;
}

.contacto_item a {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--secondary-color);
    text-decoration: none;
}

.contacto_item a:hover .sobremi_titulo {
    color: var(--accent-color);
}

/* Nombre del enlace: Email, Behance... */
.sobremi_titulo {
    font-family: var(--h1-font-family);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.sobremi_titulo{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Handle: /ROCIOVILLALON... */
.sobremi_info {
    font-family: var(--p-font-family);
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--grey-color);
    letter-spacing: 0.05em;
}

.trayectoria{
    margin-top: 3px;
}

/* COLUMNA DERECHA: texto */
.textoyskills{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2em;
}

.sobremi_texto {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4rem;
    padding-top: 1.5rem;
    gap: 1.2rem;
    max-width: 800px;
}


.sobremi_texto p {
    font-family: var(--h1-font-family);
    font-size: 1.5em;
    font-weight: var(--h2-font-weight);
    line-height: 1.3;
}

.sobremi_skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 0 4rem;
    margin-bottom: 2em;

}

.skills_titulo {
    font-family: var(--p-font-family);
    text-transform: var(--uppercase);
    letter-spacing: var(--letter-spacing);
    color: var(--secondary-color);
    margin-bottom: 1.2rem;
}

.skills_lista li{
    font-family: var(--p-font-family);
    font-size: 0.85rem;
    letter-spacing: var(--letter-spacing);
    padding: 0.4rem 0;
    color: var(--grey-color);
    text-transform: var(--uppercase);
}

.subtitulo {
    font-family: var(--p-font-family);
    font-size: 0.85rem;
    letter-spacing: var(--letter-spacing);
    padding-top: 0.8em;
    color: var(--grey-color);
}

.herramientas{
    display: flex;
    gap: 5rem;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 20px;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--p-font-family);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey-color);
    background-color: var(--primary-color);
    box-sizing: border-box;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    z-index: 5;
    border-top: 1px solid rgb(48, 48, 48);
}


/* FOOTER PÁGINA PROYECTO */
.footer_static {
    position: static;
    display: flex;
    bottom: 0;
    left: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 44px;
    flex-shrink: 0;
    font-family: var(--p-font-family);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey-color);
    border-top: 1px solid rgb(48, 48, 48);
}

/* PÁGINA WEB */
.pagina_web {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.web {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Contenedor con scroll horizontal */

.galeria {
    flex: 1;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    padding: 0 1.3rem;
    padding-top: 4rem;
    min-height: 0;
}

.galeria_vertical{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 90%;

}

.carrusel {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    height: 100%;
}

.carrusel_item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.carrusel_item picture {
    overflow: hidden;
}

.carrusel_item img {
    height: 55dvh;
    width: auto;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.carrusel_item:hover img {
    filter: grayscale(0%);
}

/* Info debajo de la imagen */
.carrusel_item_info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0;
}

.carrusel_item_nombre {
    font-family: var(--p-font-family);
    text-transform: var(--uppercase);
    letter-spacing: var(--letter-spacing);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.carrusel_item:hover .carrusel_item_nombre{
    color: var(--accent-color);
}


.carrusel_item_subtitulo {
    font-family: var(--p-font-family);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey-color);
}

/* Barra inferior */
.info_categoria {
    height: 6rem;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid var(--grey-color);
}

.numero_categoria,
.nombre_categoria {
    font-family: var(--p-font-family);
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: var(--letter-spacing);
    color: var(--secondary-color);
}

/* PÁGINA PROYECTO INDIVIDUAL */
.pagina_proyecto {
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.pagina_proyecto_largo {
    display: flex;
    flex-direction: column;
}

.pagina_proyecto_scroll{
    display: flex;
    flex-direction: column;
}

.proyecto {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    flex: 1;  
    padding: 1em;
}

/* COLUMNA IZQUIERDA */
.proyecto_info {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 2rem;
    
}

.proyecto_contenido {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.proyecto_titulo {
    font-family: var(--p-font-family);
    font-size: 3.5rem;
    color: var(--accent-color);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1;
}

.proyecto_descripcion {
    font-family: var(--h1-font-family);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--secondary-color);
    max-width: 300px;
}

.proyecto_link {
    font-family: var(--p-font-family);
    font-size: 0.9rem;
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.proyecto_link:hover {
    color: var(--secondary-color);
}

.proyecto_link_intercalado {
    font-family: var(--p-font-family);
    font-size: 0.9rem;
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.proyecto_link_intercalado:hover {
    color: var(--secondary-color);
}

.texto_link {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.texto_link:hover {
    color: var(--secondary-color);
}

.proyecto_pie {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.proyecto_herramientas {
    display: flex;
    flex-direction: column;
}

/* COLUMNA DERECHA */
.proyecto_preview {
    display: flex;
    padding: 1em;
    justify-content: flex-end;
    padding-top: 0.4em;
}

.unacolumna {
    display: flex;
    max-width: 1078px;
    padding-right: 1.5em;
    align-items: center;
}

.doscolumnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    max-width: 1078px;
    padding-right: 1.5em;
    align-items: center;
}



.unacolumna img,
.doscolumnas img,
.trescolumnas img {
    width: 100%;
    max-height: 82dvh;
    object-fit: contain;
    display: block;
    padding-bottom: 2em;
}

.ss .trescolumnas{
    gap: 0.3em;
}
.ss2 .trescolumnas{
    gap: 0em;
}


.trescolumnas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5em;
    max-width: 1078px;
    padding-right: 1.5em;
    align-items: center;
}

.unacolumna_intercalado img,
.doscolumnas_intercalado img,
.trescolumnas_intercalado img {
    width: 120%;
    max-height: 82dvh;
    object-fit: contain;
    display: block;
    padding-bottom: 2em;
}


.trescolumnas_intercalado {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 130%;
    gap: 6.5em;
    align-items: center;
    justify-items: center;
}

.doscolumnas_intercalado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
    align-items: center;
    justify-items: center;
    justify-content: space-evenly;
}

/* VIDEO EMBED PROYECTO */
.proyecto_video {
    width: 100%;
    max-width: 1100px;
    align-self: center;
    padding-bottom:3em;
}

.proyecto_video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: 2px;
}

.proyecto_short {
    width: 100%;
    max-width: 400px;     
    align-self: center;
    padding-bottom:2.5em;
}

.proyecto_short iframe {
    width: 100%;
    aspect-ratio: 9 / 16;  
    display: block;
    max-height: 80dvh;  
}

.proyecto_cuadrado {
    width: 100%;
    max-width: 600px;     
    align-self: center;
    padding-bottom:2.5em;
}

.proyecto_cuadrado iframe {
    width: 100%;
    aspect-ratio: 1 / 1;  
    display: block;
    max-height: 90dvh;  
}

/* Etiqueta de categoría: oculta en desktop, visible en móvil */
.proyectos_label {
    display: none;
}

/* ── SCROLL INDICATOR ─────────────────────────── */
.scroll-indicator {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 1;
    transition: opacity 0.5s ease;
    animation: bounce 1.8s ease-in-out infinite;
    pointer-events: none;
    background-color: var(--accent-color); /* usa tu color accent */
    color: var(--primary-color);                /* icono en color de fondo para contraste */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ── GRID DE PROYECTOS ────────────────────────── */
.proyectos_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.grid_item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
}

.grid_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.grid_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
}

.grid_item:hover img {
    transform: scale(1.05);
    filter: brightness(0.75);
}

.grid_item:hover .grid_overlay {
    background: rgba(0, 0, 0, 0.15);
}



@media (max-width: 500px) {
    .proyectos_grid {
        grid-template-columns: 1fr;
    }
}

.scroll-indicator.oculto {
    opacity: 0;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ── SECCIONES DETALLE PROYECTO ───────────────── */
.proyecto_detalle {
    padding: 4rem 2rem 6rem;
    max-width: 548px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.detalle_seccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Elimina o deja vacía la regla --invertida, ya no hace falta */
.detalle_seccion--invertida {
    direction: ltr;
}

.detalle_titulo {
    font-family: 'Fragment Mono', monospace;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 1rem;
    font-weight: 400;
}

.detalle_descripcion {
    font-family: 'Figtree', sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    line-height: 1.7;
    opacity: 0.90;
}

.detalle_imagen {
    width: 150%;
}
.detalle_seccion .imagen_izq {
    align-self: flex-start;
}

.detalle_seccion .imagen_dere{
    align-self: flex-end;
}

.detalle_texto{
    margin-bottom: 2rem;
}

.detalle_texto_intercalado{
    margin: 2rem 0rem;
}

.detalle_imagen img {
    width: 100%;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}

.detalle_imagen img:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
    cursor: zoom-in;
}

.lightbox.activo {
    opacity: 1;
    pointer-events: all;
}

.lightbox_contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.lightbox_contenido img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox_contenido img.zoomed {
    cursor: grab;
}

.lightbox_cerrar {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 10;
}

.lightbox_cerrar:hover {
    opacity: 1;
}

.quote{
    font-size: 2em;
    font-style: oblique;
    line-height: 124%;
    padding: 2em 0em;
}

.quote2{
    font-size: 2em;
    font-style: oblique;
    line-height: 124%;
}

/* MEDIA QUERIES */
@media screen and (max-width:1500px) {

    /* HOME  */

    .hero_año {
        left: 12px;
    }


    .cta_titulo {
        font-size: 7rem;
        max-width: 100%;
        letter-spacing: -1px;
    }

    /* FOOTER  */
    .footer_static{
        position:static;
    }

    /* SOBRE MI  */
    .sobremi {
    grid-template-columns: 1fr 1.6fr;

    }
    
    .sobremi_foto img {
        height: 100%;
        object-fit: cover;
        object-position: 40% 100%;
        min-width: 320px;
    }
    

    .sobremi_texto {
        padding: 2rem 3rem;
        gap: 0.7rem;
    }

    .sobremi_texto p {
        font-size: 1.5em;
    }

    .sobremi_skills {
        padding: 0 3rem;
        padding-top: 1rem;
        gap: 1rem;
    }

    .skills_lista li {
        font-size: 0.85rem;
    }

    .fotoycontacto {
        padding-left: 1.5rem;
    }

    .contacto {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .contacto_item {
        padding: 0.8rem;
    }

    .herramientas {
        display: flex;
        gap: 3rem;
    }

    /* PÁGINA PROYECTO INDIVIDUAL */
    .proyecto{
        padding-bottom: 2em;
    }
    .proyecto_titulo {
        font-size: 2.5rem;
    }

    .proyecto_preview img {
        padding: 0.25em;
    }
    .proyecto_preview {
        display: flex;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
        height: 100%;
    }

    .pagina_proyecto,
    .pagina_proyecto_scroll {
        height: auto;
        overflow: visible;
    }
    

    .proyecto {
        grid-template-columns: 1fr;
        overflow: visible;
        align-content: space-around;
    }

    .proyecto_info {
        flex-direction: row;
        gap: 6rem;
        padding: 0.5rem;
        padding-bottom: 4em;
        padding-top: 5em;
        justify-content: center;
    }

    .doscolumnas,
    .trescolumnas {
        padding: 0;
    }

}

@media screen and (max-width:1200px) {

    /* HOME  */
    
    .hero_año {
        left: 9px;
    }

    .cta {
        flex-direction: column;
        height: auto;
        padding: 5rem 0px;
        gap: 2rem;
        align-items: center;
        justify-content: center;
    }

    .cta_titulo {
        font-size: 7rem;
        max-width: 100%;
        letter-spacing: -1px;
    }

    .cta_contacto {
        flex-direction: row;
        padding: 0;
        width: 728px;
        padding-left: 5em;
    }

        .detalle_seccion .imagen_izq,
        .detalle_seccion .imagen_dere {
        align-self: center;
    }

}


@media screen and (max-width:900px) {

    /* NAVEGACIÓN */
    .nav_header{
        position:fixed;
        top:-100dvh;
        left: 0;
        padding: 20px;
        background-color: var(--secondary-color);
        width: calc(100% - 40px); 
        height: calc(100dvh - 40px);
        transition: top 0.6s;
        z-index: 10;
    }

    .desplegado{
        top:0;
        display: flex;
        align-items: center;
    }

    .nav_header ul{
        display: block;
    }

    .nav_header li:last-child{
        padding: 6px 0px 0px 40px;

    }

    .nav_header a{
        color: white;
        font-size: 3em;
        text-decoration: none;
    }

    body.darkmode .nav_header a{
        color: var(--primary-color);
    }

    .nav_header a:hover{
        color: white;
    }

    .nav_header a:focus{
        color: #A788FA;
    }

    body.darkmode .nav_header a:focus{
        color: #6424C9;
    }

    .cerrar-menu{
        display: block;
        background-color: transparent;
        color: var(--primary-color);
        font-size: 2em;
        position: absolute;
        right: 24px;
        top:24px;
    }

    body.darkmode .cerrar-menu {
    color: var(--primary-color); 
    }

    .abrir-menu{
        display: block;
        background-color: transparent;
        color: var(--secondary-color);
        padding: 5px 5px 0;
        transform: translateY(-2px);
    }

    body.darkmode .abrir-menu {
        color: var(--secondary-color); 
    }

    /* Botón toggle del menu desplegable con colores invertidos */
    /* LIGHT MODE  */
    .nav_header #modo-toggle .bg { 
        fill: #FAFAFA; 
    }
    .nav_header #modo-toggle .circulo {
        fill: var(--accent-color); 
    }
    .nav_header #modo-toggle .sol { 
        fill: #FAFAFA; 
    }
    .nav_header #modo-toggle .luna { 
        fill: #9F9F9F; 
    }

    /* DARK MODE  */
    body.darkmode .nav_header #modo-toggle .bg { 
        fill: var(--primary-color); 
    }
    body.darkmode .nav_header #modo-toggle .circulo { 
        fill: #A788FA; 
    }
    body.darkmode .nav_header #modo-toggle .sol { 
        fill: #B4B3B3; 
    }
    body.darkmode .nav_header #modo-toggle .luna { 
        fill:  var(--primary-color); 
    }

    /* HOME  */
    /* HERO  */
    .hero_año {
        left: 4px;
    }

    .hero_subtitulo {
    margin-left: 0.4em;
    }

    /* CTA */
    .cta {
        flex-direction: column;
        height: auto;
        padding: 5rem 20px 5rem;
        gap: 2rem;

    }

    .cta_titulo {
        font-size: 5rem;
        max-width: 100%;
    }

    .cta_contacto {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 65%;
    }
    

    /* PROYECTOS DESTACADOS  */
    .destacado_item,
    .destacado_item--invertido {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .destacado_item .destacado_imagen_wrap,
    .destacado_item--invertido .destacado_imagen_wrap {
        order: 1;
        height: 56vw;
        border-right: none;
        border-left: none;
    }

    .destacado_item .destacado_numero,
    .destacado_item--invertido .destacado_numero {
        order: 2;
        border-right: none;
        border-left: none;
        padding: 0.8rem 20px;
        padding-top: 2em;
        justify-content: flex-start;
        align-items: center;
    }

    .destacado_item .destacado_info,
    .destacado_item--invertido .destacado_info {
        order: 3;
        border-right: none;
        border-left: none;
        padding: 1.5rem 20px 2.2rem;
        padding-bottom: 5rem;
        padding-top: 0.8em;
    }

    .destacado_item:nth-of-type(2) .destacado_imagen_wrap img,
    .destacado_item:nth-of-type(3) .destacado_imagen_wrap img {
        object-position: 50% -2%;
    }

    /* PÁGINA PROYECTOS */
    .pagina_proyectos {
        height: auto;
        overflow: visible;
    }

    .proyectos {
        display: block;
        overflow: visible;
        height: auto;
        padding-bottom: 4em;
    }

    .proyectos_menu {
        display: none;
    }

    .proyectos_imagenes {
        height: auto;
        overflow: visible;
        scroll-snap-type: none;
        display: flex;
        flex-direction: column;
        padding: 0 20px 3rem;
    }

    .proyectos_item {
        height: auto;
        scroll-snap-align: none;
        display: flex;
        flex-direction: column;
    }

    .proyectos_item a {
        display: flex;
        flex-direction: column;
        overflow: visible;
        width: 100%;
    }

    .proyectos_label {
        display: block;
        font-family: var(--p-font-family);
        font-size: 2rem;
        color: var(--accent-color);
        padding: 1rem 0 1rem;
        padding-top: 1.5em;
    }


    /* PÁGINA SOBRE MÍ */
    .pagina_sobremi {
        height: auto;
    }

    .pagina_sobremi header{
        height: auto;
    }

    .sobremi {
        grid-template-columns: 1fr;
        height: auto;
        position: static;
        padding-bottom: 4em;
    }

    .pagina_sobremi header {
    position: relative;
    z-index: 10;
    }

    .trayectoria{
        margin-top: 0px;
    }


    /* Fila superior: contacto izquierda, foto derecha */
    .fotoycontacto {
        flex-direction: row-reverse;
        align-items: stretch;
        padding-left: 0;
        padding-top: 2em;
    }

    /* Foto ocupa la mitad derecha */
    .sobremi_foto {
        flex: 1;
        justify-content: center;
        overflow: hidden;
        padding-right: 2rem;   
    }

    .sobremi_foto img {
        width: 100%;
        object-fit: cover;
        object-position: 45% 100%;
        min-width: 0;
        height: auto;
        max-height: 50dvh;
    }

    /* Contacto ocupa la mitad izquierda en columna */
    .contacto {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: none;
        margin: 0;
        padding: 1.5rem;
    }

    /* Fila inferior: texto y skills en columna */
    .textoyskills {
        display: flex;
        flex-direction: column;
    }

    .sobremi_texto {
        padding: 2rem 1.5rem;
        padding-top: 1rem;
        gap: 1.5rem;
    }

    .sobremi_skills {
        grid-template-columns: 1fr 1fr;
        padding: 0 1.5rem 2rem;
        padding-top: 1rem;
    }

    /* PÁGINA WEB  */
    .galeria {
        align-items: flex-start;
        padding: 0 1.3rem;
        padding-top: 5rem;
    }



    .detalle_imagen {
        width: 100%;
    }

    .carrusel {
        height: 55%;
    }

    .numero_categoria,
    .nombre_categoria {
        font-size: 2.5rem;
    }

    .info_categoria {
        height: 5rem;
    }

    .proyecto_preview{
        padding: 0;
    }

    .proyecto_preview img{
        padding: 0.5em;
    }

    .proyecto_pie {
        padding-top: 0em;
    }

    .doscolumnas,
    .trescolumnas {
        grid-template-columns: 1fr;
        max-height: 50%;
        gap: 0.6em;
        padding: 0;
    }

    .doscolumnas_intercalado,
    .trescolumnas_intercalado {
        grid-template-columns: 1fr;
        gap: 0em;
        padding: 0;
        max-width: 90%;
    }

    .doscolumnas img,
    .trescolumnas img {
        max-height: none;
        padding: 0;
        gap: 0.35em;
    }

    .doscolumnas_intercalado img,
    .trescolumnas_intercalado img {
        max-height: none;
        padding: 0;
        gap: 0.35em;
    }

    /* Sin desaturación en touch: no hay hover */
    .destacado_imagen_wrap img,
    .proyectos_item img,
    .proyectos_item video,
    .sobremi_foto img,
    .carrusel_item img {
        filter: grayscale(0%);
    }

    .footer{
        position: static;
    }


}

/* ── RESPONSIVE DETALLE ───────────────────────── */
@media (max-width: 768px) {
    .detalle_seccion {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .detalle_seccion--invertida {
        direction: ltr;
    }

    .proyecto_detalle {
        gap: 4rem;
        padding: 3rem 1.2rem 4rem;
    }

}

@media screen and (max-width:620px) {

    /* HOME  */

    .hero_subtitulo {
    margin-left: 0.4em;
    }

    .cta_contacto {
        padding-left: 2em;
        width: 80%;
    }

    .cta_titulo{
        font-size: 4rem;
    }

    .cta_contacto .contacto_item {
        border-right: none;
        padding: 1rem 0;
    }

    .cta_contacto .contacto_item:last-child {
        border-bottom: none;
    }

    /* PÁGINA SOBRE MÍ */

    .sobremi_texto {
        padding: 2rem 1.5rem;
        gap: 1rem;
    }

    .sobremi_foto {
        padding-right: 1.5rem;
    }

    .contacto_item {
        padding: 0.8rem;
        padding-left: 0;
    }

    .sobremi_texto p {
        font-size: 1.3rem;
    }

    .sobremi_skills {
        display: flex;
        flex-direction: column;
        gap: 3em;
    }

    .herramientas{
    gap: 5rem;
    }

    /* PÁGINA WEB  */
    .pagina_web {
        height: auto;
        overflow: visible;
    }

    .web {
        overflow: visible;
        height: auto;
    }

    .galeria {
        overflow: visible;
        height: auto;
        display: block;
        padding-top: 2rem;
    }

    .carrusel {
        flex-direction: column;
        gap: 0.4rem;
        height: auto;
        width: 100%;
    }

    .carrusel_item {
        width: 100%;
        padding-bottom: 1em;
    }

    .carrusel_item:last-child{
        padding-bottom: 10em;
    }

    .carrusel_item img {
        height: auto;
        width: 100%;
    }

    .numero_categoria,
    .nombre_categoria {
        font-size: 1.8rem;
    }

    .info_categoria {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        z-index: 10;
        padding: 0 1.5rem;
        box-sizing: border-box;
        height: 5rem;
    }
}

@media screen and (max-width:600px){
    .footer,
    .footer_static {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        height: auto;
        padding: 1rem 20px;
        padding-bottom: 1.5em;
        text-align: center;
    }
}

@media screen and (max-width:500px) {

    /* HEADER */
            
    header{
        display: flex;
        align-items: center;
    }

    h1{
        font-size: 2.2em;
    }

    .nombre-completo { 
        display: none; 
    }
    .nombre-corto { 
        display: inline; 
    }

    /* INDEX  */
    /* HERO  */


    .hero_titulo span {
        display: block;
        line-height: 0.95;
    }

    .hero_titulo {
        font-size: 4.5rem;
        letter-spacing: -2px;
        word-break: break-all;
        word-spacing: 100vw;
    }

    /* PÁGINA SOBRE MÍ */
    .fotoycontacto {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 2em;
        max-height: 75dvh;
    }

    .sobremi_foto {
        padding: 0 1.5rem;   
    }

    .textoyskills{
        padding-top: 0;
    }

    .sobremi_texto {
        padding: 1rem 1.5rem;
    }

    .contacto {
        padding: 0.5rem 1.5rem;
    }

    .herramientas {
        column-gap: 3rem;
    }

    .sobremi_skills {
        padding: 2.5rem 1.5rem;
    }

    .cta_titulo{
        font-size: 2.5rem;
    }

    .cta_contacto {
        width: 90%;
        display: flex;
        flex-direction: column;
    }

    /* PÁGINA PROYECTO INDIVIDUAL */

    .proyecto_titulo {
        font-size: 2.5rem;
    }


    .proyecto_info {
        flex-direction: column;
        padding: 0.5rem;
        padding-top: 3em;
        padding-bottom: 2em;
        gap: 3rem;

    }



}