@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

body {
    background: linear-gradient(#233554);
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    position: relative;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    overflow-x: hidden;
}


.bg-icons {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    /* Asegura que los iconos estén detrás */
    overflow: hidden;
}

.bg-icon {
    position: absolute;
    opacity: 0.45;
    /* Aumenta la opacidad si lo deseas */
    pointer-events: none;
    z-index: 0;
    animation: icon-pulse 4s ease-in-out infinite;
}

/* Posiciones y tamaños personalizados para cada icono */
.icon-html {
    left: 2vw;
    top: 4vh;
    width: 90px;
    height: 90px;
}

.icon-js {
    right: 8vw;
    top: 10vh;
    width: 70px;
    height: 70px;
}

.icon-react {
    left: 18vw;
    bottom: 8vh;
    width: 100px;
    height: 100px;
}

.icon-briefcase {
    right: 6vw;
    bottom: 6vh;
    width: 80px;
    height: 80px;
}

.icon-code {
    left: 48vw;
    top: 58vh;
    width: 80px;
    height: 80px;
}

.icon-db {
    right: 38vw;
    top: 28vh;
    width: 90px;
    height: 90px;
}

.icon-html-extra {
    left: 10vw;
    top: 80vh;
    width: 48px;
    height: 48px;
}

.icon-react-extra {
    right: 10vw;
    bottom: 20vh;
    width: 70px;
    height: 70px;
}

.icon-js-extra {
    left: 80vw;
    top: 15vh;
    width: 40px;
    height: 40px;
}

.icon-html-more {
    left: 80vw;
    top: 60vh;
    width: 70px;
    height: 70px;
}

.icon-react-more {
    right: 20vw;
    bottom: 40vh;
    width: 90px;
    height: 90px;
}

/* Posiciones y tamaños personalizados para los nuevos iconos */
.icon-bootstrap {
    left: 60vw;
    top: 70vh;
    width: 70px;
    height: 70px;
}

.icon-python {
    right: 14vw;
    top: 36vh;
    width: 80px;
    height: 80px;
}

.icon-django {
    left: 10vw;
    top: 32vh;
    width: 70px;
    height: 70px;
}

/* Responsive: ajusta posiciones y tamaños en móvil */
@media (max-width: 700px) {
    .icon-html {
        left: 2vw;
        top: 6vh;
        width: 38px;
        height: 38px;
    }

    .icon-js {
        right: 4vw;
        top: 10vh;
        width: 32px;
        height: 32px;
    }

    .icon-react {
        left: 10vw;
        bottom: 8vh;
        width: 40px;
        height: 40px;
    }

    .icon-briefcase {
        right: 2vw;
        bottom: 6vh;
        width: 32px;
        height: 32px;
    }

    .icon-code {
        left: 40vw;
        top: 70vh;
        width: 32px;
        height: 32px;
    }

    .icon-db {
        right: 20vw;
        top: 40vh;
        width: 36px;
        height: 36px;
    }

    .icon-bootstrap {
        left: 60vw;
        top: 80vh;
        width: 32px;
        height: 32px;
    }

    .icon-python {
        right: 8vw;
        top: 50vh;
        width: 36px;
        height: 36px;
    }

    .icon-django {
        left: 6vw;
        top: 44vh;
        width: 32px;
        height: 32px;
    }
}

/* Mejora el tamaño y la proximidad de imagen y texto en pantallas grandes */
@media (min-width: 992px) {
    .hero-image {
        margin-top: 60px !important;
        margin-bottom: 0 !important;
    }

    .hero-image img {
        max-width: 820px !important;
        min-width: 420px !important;
        border-width: 3px !important;
    }

    .main-hero-container .col-md-6 {
        margin-left: -24px !important;
        font-size: 1.65rem !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .main-hero-container .d-flex.align-items-center.mb-4 {
        gap: 32px !important;
    }

    .main-hero-container h1 {
        font-size: 3rem !important;
    }

    .main-hero-container img[alt="Ascendev Logo"] {
        max-width: 260px !important;
        height: 72px !important;
        min-width: 120px !important;
    }

    .main-hero-container .lead {
        font-size: 1.45rem !important;
    }

    .main-hero-container .btn {
        font-size: 1.25rem !important;
        padding: 1em 2.5em !important;
    }
}

/* Animacion de aumentoi de tamaño en cada icono de fondo */
@keyframes icon-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

/* Aplica la animación a todos los iconos de fondo */
.bg-icon {
    animation: icon-pulse 4s ease-in-out infinite;
}

/* Delays individuales para intercalar el efecto */
.icon-html {
    animation-delay: 0s;
}

.icon-js {
    animation-delay: 0.8s;
}

.icon-react {
    animation-delay: 1.6s;
}

.icon-briefcase {
    animation-delay: 2.4s;
}

.icon-code {
    animation-delay: 1.2s;
}

.icon-db {
    animation-delay: 2s;
}

.icon-html-extra {
    animation-delay: 0.4s;
}

.icon-react-extra {
    animation-delay: 1.8s;
}

.icon-js-extra {
    animation-delay: 2.8s;
}

.icon-html-more {
    animation-delay: 1.1s;
}

.icon-react-more {
    animation-delay: 2.2s;
}

.icon-bootstrap {
    animation-delay: 2.6s;
}

.icon-python {
    animation-delay: 1.4s;
}

.icon-django {
    animation-delay: 3s;
}

.icon-bootstrap,
.icon-python {
    opacity: 0.7;
}


.icon-html-extra {
    left: 10vw;
    top: 80vh;
    width: 48px;
    height: 48px;
}

.icon-js-extra {
    left: 80vw;
    top: 15vh;
    width: 40px;
    height: 40px;
}

.icon-briefcase-extra {
    left: 60vw;
    top: 70vh;
    width: 56px;
    height: 56px;
}

.icon-code-extra {
    left: 20vw;
    top: 10vh;
    width: 36px;
    height: 36px;
}

.icon-db-extra {
    left: 70vw;
    top: 50vh;
    width: 44px;
    height: 44px;
}

.icon-bootstrap-extra {
    left: 30vw;
    top: 60vh;
    width: 52px;
    height: 52px;
}

.icon-python-extra {
    left: 85vw;
    top: 80vh;
    width: 38px;
    height: 38px;
}

.icon-django-extra {
    left: 5vw;
    top: 30vh;
    width: 50px;
    height: 50px;
}

/* Asegúrate que .bg-icon tenga position: absolute y el contenedor .bg-icons tenga position: relative o absolute */




/* Fuente elegante para el navbar */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Playfair+Display:wght@600&display=swap');

.nav-elegant .nav-link {
    font-family: 'Playfair Display', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.13rem;
    letter-spacing: 0.5px;
    color: #fff !important;
    transition: color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
    border-radius: 10px;
    padding: 0.45em 1.1em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Animación elegante al pasar el mouse */
.nav-animated:hover,
.nav-animated:focus {
    color: #afe6ff !important;
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-3px) scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 18px 0 rgba(255, 255, 255, 0.10);
    text-shadow: 0 2px 8px rgba(35, 53, 134, 0.12);
}

.nav-animated i {
    transition: transform 0.22s cubic-bezier(.25, .8, .25, 1), color 0.18s;
}

.nav-animated:hover i,
.nav-animated:focus i {
    transform: scale(1.18) rotate(-8deg);
    color: #21b9df !important;
}


/* 
css gato programador animado */
@keyframes floatY {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0);
    }
}



@keyframes floatGlow {

    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.06) translateY(-16px);
    }
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

/* Orbit animations for icons */
@keyframes orbit1 {
    0% {
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}

@keyframes orbit2 {
    0% {
        transform: rotate(60deg) translateX(90px) rotate(-60deg);
    }

    100% {
        transform: rotate(420deg) translateX(90px) rotate(-420deg);
    }
}

@keyframes orbit3 {
    0% {
        transform: rotate(120deg) translateX(100px) rotate(-120deg);
    }

    100% {
        transform: rotate(480deg) translateX(100px) rotate(-480deg);
    }
}

@keyframes orbit4 {
    0% {
        transform: rotate(180deg) translateX(100px) rotate(-180deg);
    }

    100% {
        transform: rotate(540deg) translateX(100px) rotate(-540deg);
    }
}

@keyframes orbit5 {
    0% {
        transform: rotate(240deg) translateX(110px) rotate(-240deg);
    }

    100% {
        transform: rotate(600deg) translateX(110px) rotate(-600deg);
    }
}

@keyframes orbit6 {
    0% {
        transform: rotate(300deg) translateX(100px) rotate(-300deg);
    }

    100% {
        transform: rotate(660deg) translateX(100px) rotate(-660deg);
    }
}



/* Ajustes responsivos para el texto del hero */
@media (max-width: 991px) {
    .main-hero-container {
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
    }

    .main-hero-text {
        font-size: 1.1rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .main-hero-text h1,
    .main-hero-text span {
        font-size: 2.7rem !important;
    }

    .main-hero-text .lead {
        font-size: 1.15rem !important;
        margin-bottom: 1.2rem !important;
    }

    .main-hero-text .btn {
        font-size: 1rem !important;
        padding: 0.7em 1.2em !important;
        margin-top: 1.2rem !important;
    }

    /* ALEJA MÁS la imagen del gato en responsive */
    .main-hero-container>.col-md-5,
    .main-hero-container>.col-12.col-md-5 {
        margin-top: 6rem !important;
    }
}

/* HERO más compacto en móviles: texto, botones e imagen más pequeños y menos padding */
@media (max-width: 600px) {
    .main-hero-container {
        margin-top: 0 !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }

    .main-hero-text {
        margin-top: 20px !important;
        font-size: 1.1rem !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }

    .main-hero-text h1,
    .main-hero-text span {

        font-size: 2.1rem !important;
        line-height: 1.1 !important;
    }

    .main-hero-text .lead {
        font-size: 1.15rem !important;
        margin-bottom: 0.9rem !important;
    }

    .main-hero-text .btn {
        margin-top: 40px !important;
        font-size: 1.1rem !important;
        padding: 0.7em 1.2em !important;
        margin-top: 0.7rem !important;
    }

    .main-hero-container>.col-md-5,
    .main-hero-container>.col-12.col-md-5 {
        margin-top: 0.5rem !important;
    }

    .main-hero-container img[alt="Programmer Cat"] {
        margin-top: 20px !important;
        max-width: 260px !important;
        min-width: 120px !important;
        border-radius: 1.2rem !important;
    }

    .main-hero-container .d-flex.align-items-center.mb-5 {
        gap: 18px !important;
        margin-bottom: 1.5rem !important;
    }

    /* Separa más el botón de "See Our Work" del texto */
    .main-hero-text>div[style*="inline-block"] {
        margin-top: 2.2rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    .main-hero-text .btn-see-our-work {
        margin-top: 0 !important;
    }
}


/* Estilos personalizados para la modal azul */
.modal-content.custom-blue-modal {
    background: linear-gradient(120deg, #233586 70%, #2a3eb1 100%);
    border-radius: 1.2rem;
    color: #e3f0ff;
    border: none;
    box-shadow: 0 8px 40px 0 rgba(35, 53, 134, 0.25);
    max-width: 900px;
    margin: auto;
}

.modal-header.custom-blue-modal-header {
    border-radius: 1.2rem 1.2rem 0 0;
    border-color: #8ecaff;
    background: transparent;
    color: #d7edff;
}

.modal-title {
    color: #d7edff !important;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

.btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}

.modal-body.custom-blue-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 2.5rem 1rem 1.5rem 1rem;
}

#modalImagenProyectoImg {
    width: 750px;
    height: 400px;
    object-fit: cover;
    object-position: top left;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px #0006;
    background: #1a237e22;
    border: 2.5px solid #8ecaff;
    margin: 0 auto;
    display: block;
}

.modal-footer.custom-blue-modal-footer {
    border-radius: 0 0 1.2rem 1.2rem;
    border-color: #8ecaff;
    background: transparent;
}

.modal-footer .btn-secondary {
    background: #3854cf;
    border: none;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 2rem;
    transition: background 0.2s;
}

.modal-footer .btn-secondary:hover {
    background: #233586;
    color: #e3f0ff;
}

/* Ajuste para todas las imágenes de proyectos */
.card .card img[data-bs-toggle="modal"] {
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 2.5px solid #8ecaff;
    background: #e3f0ff22;
    margin: 0 auto;
    box-shadow: 0 2px 12px #23358633;
}



/* Ajuste para todas las imágenes de proyectos */
.card .card img[data-bs-toggle="modal"] {
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 2.5px solid #8ecaff;
    background: #e3f0ff22;
    margin: 0 auto;
    box-shadow: 0 2px 12px #23358633;
}

.container.d-flex.justify-content-center {
    max-width: 100vw !important;
}

/* ajuste al nav bar */

.nav-elegant .nav-link {
    font-size: 0.97rem;
    padding: 0.32em 0.7em;
    min-width: 90px;
    max-width: 140px;
    text-align: center;
    letter-spacing: 0.1px;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
    border-radius: 0.5rem;
}

/* Navbar SIEMPRE FIJO ARRIBA */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1050;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 2px solid #233586 !important;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
}


/* Animacion del boton see our work */
/* Animación elegante igual a los botones del navbar para el botón See Our Work */
.btn-see-our-work {
    position: relative;
    overflow: visible;
    transition: color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
    background: linear-gradient(90deg, #3854cf 0%, #233586 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Playfair Display', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 1;
}

.btn-see-our-work:hover,
.btn-see-our-work:focus {
    color: #afe6ff !important;
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-3px) scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 18px 0 rgba(255, 255, 255, 0.10);
    text-shadow: 0 2px 8px rgba(35, 53, 134, 0.12);
}

/* Floating folder icon for See Our Work button */
.btn-project-icon-float {
    position: absolute;
    top: -1.8rem;
    right: -1.8rem;
    font-size: 2.2rem;
    color: #8ecaff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, color 0.25s;
    z-index: 10;
}

.btn-see-our-work:hover+.btn-project-icon-float,
.btn-see-our-work:focus+.btn-project-icon-float {
    opacity: 1;
    transform: scale(1.15) rotate(-8deg);
    color: #fff176;
    animation: btnProjectIconFloat 1.2s ease-in-out infinite alternate;
}

@keyframes btnProjectIconFloat {
    0% {
        transform: scale(1.15) rotate(-8deg) translateY(0);
    }

    100% {
        transform: scale(1.15) rotate(-8deg) translateY(-10px);
    }
}

#projects .card.h-100 {
    transition: transform 0.22s cubic-bezier(.25, .8, .25, 1), box-shadow 0.22s cubic-bezier(.25, .8, .25, 1);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#projects .card.h-100:hover,
#projects .card.h-100:focus-within:not(:has(a:focus)) {
    transform: translateY(-12px) rotate(-1deg);
    z-index: 2;
}

#projects .card.h-100 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animación suave de arriba a abajo para los iconos de las cards */
@keyframes floatCardIcon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Brillo leve y animación para cada icono de card según su color */
.portfolio-icon-glow i.fa-python {
    box-shadow: 0 0 18px 0 #347fc0, 0 0 32px 0 #30699855;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-html5 {
    box-shadow: 0 0 18px 0 #e44d26, 0 0 32px 0 #e44d2655;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-js-square {
    box-shadow: 0 0 18px 0 #f7df1e, 0 0 32px 0 #f7df1e55;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-css3-alt {
    box-shadow: 0 0 18px 0 #2196f3, 0 0 32px 0 #2196f355;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-database {
    box-shadow: 0 0 18px 0 #fbbc05, 0 0 32px 0 #fbbc0555;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-bootstrap {
    box-shadow: 0 0 18px 0 #7952B3, 0 0 32px 0 #7952B355;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

.portfolio-icon-glow i.fa-github {
    box-shadow: 0 0 18px 0 #5b4e6e, 0 0 32px 0 #7952B355;
    border-radius: 50%;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

/* Django: usa el mismo color que python pero con el texto Dj */
.portfolio-icon-glow .fa-python+span {
    /* El brillo se aplica al icono, el texto Dj no necesita brillo extra */
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

/* Quita el borde circular y solo deja el brillo animado en el icono */
.portfolio-icon-glow i.fa-python,
.portfolio-icon-glow i.fa-html5,
.portfolio-icon-glow i.fa-js-square,
.portfolio-icon-glow i.fa-css3-alt,
.portfolio-icon-glow i.fa-database,
.portfolio-icon-glow i.fa-bootstrap {
    box-shadow: 0 0 18px 0 currentColor, 0 0 32px 0 currentColor;
    border-radius: 0;
    /* Elimina el círculo */
    border: none;
    /* Elimina cualquier borde */
    background: none;
    /* Sin fondo */
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

/* Solo animación de arriba a abajo, sin sombra, sin borde, sin fondo */
.portfolio-icon-glow i.fa-python,
.portfolio-icon-glow i.fa-html5,
.portfolio-icon-glow i.fa-js-square,
.portfolio-icon-glow i.fa-css3-alt,
.portfolio-icon-glow i.fa-database,
.portfolio-icon-glow i.fa-bootstrap {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    animation: floatCardIcon 3.2s ease-in-out infinite;
}

body.light-theme .fa-code {
    color: #1d237a;
}

body.light-theme .custom-blue-modal {
    background: linear-gradient(180deg, #90c0f3 0%, #6796c9 40%, #2a5ea3 100%) !important;
}

/* Footer estilo */
#footer {
    background: linear-gradient(90deg, rgba(35, 53, 134, 0.12), rgba(42, 62, 177, 0.08));
    border-top: 1px solid rgba(142, 202, 255, 0.08);
    backdrop-filter: blur(6px);
}

#footer .footer-social {
    color: #8ecaff;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    transition: transform 0.16s ease, color 0.16s ease, background 0.16s ease;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.02);
}

#footer .footer-social:hover,
#footer .footer-social:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 6px 18px rgba(35, 53, 134, 0.12);
}

/* Stack footer content on small screens */
@media (max-width: 767px) {
    #footer .container {
        gap: 0.6rem;
    }

    #footer .footer-social {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }
}

/* ============================
   Light tema blanco
   ============================ */
body.light-theme {
    background: #ffffff !important;
    color: #0b0b0b !important;
    transition: background .28s ease, color .28s ease;
}

/* Main hero and general containers */
body.light-theme .main-hero-bg {
    background: #ffffff !important;
    color: #0b0b0b !important;
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06) !important;
    border: 1px solid #e6e6e6 !important;
}

body.light-theme .card-body {
    background: linear-gradient(180deg, #bfdbf9 0%, #6796c9 40%, #2a5ea3 100%) !important;
    border-radius: 1.5rem !important;
}

body.light-theme .card-body .about-project-container {
    border-radius: 0 0 1rem 1rem !important;
}

body.light-theme .skill-border-radius {
    border-radius: 0 0 1rem 1rem !important;
}

body.light-theme .lead,
body.light-theme h1,
body.light-theme h2,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .card-title {
    color: #1d237a !important;
}

body.light-theme .card-text {
    color: #d7edff !important;
}

body.light-theme #footer .fa-brands,
body.light-theme #footer .fa-envelope {
    color: #1d237a !important;
}

/* Buttons: make primary buttons dark on white bg */
body.light-theme .btn-see-our-work {
    background: linear-gradient(90deg, #ffffff, #111) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08) !important;
}

body.light-theme .btn-outline-light {
    color: #ffffff !important;
    border-color: #ddd !important;
    background: transparent !important;
}

body.light-theme .btn-outline-light:hover {
    background: #f4f4f4 !important;
    color: #111 !important;
}

/* Modal image border and shadows */
body.light-theme #modalImagenProyectoImg {
    border: 1px solid #e6e6e6 !important;
    background: #fff !important;
    box-shadow: 0 6px 28px rgba(16, 24, 40, 0.06) !important;
}

/* Footer */
body.light-theme #footer {
    background: linear-gradient(rgb(191, 219, 249) 0%, rgb(169 197 227) 40%, rgb(42, 94, 163) 100%) !important;
    border-top: 1px solid #000000 !important;
    color: #0b0b0b !important;
}

body.light-theme #footer .footer-text {
    color: #1d237a;
}

/* Footer social icons */
body.light-theme #footer .footer-social {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #111 !important;
}

/* Background decorative icons: make them visible and more legible in light mode */
body.light-theme .bg-icons {
    display: block !important;
    pointer-events: none;
    z-index: 0;
}

/* General adjustment: increase visibility and add subtle shadow for contrast */
body.light-theme .bg-icon {
    position: absolute;
    opacity: 0.45 !important;
    /* base visibility in light mode */
    filter: grayscale(0%) contrast(1.02) brightness(0.92) saturate(0.9) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.06));
    mix-blend-mode: normal;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

/* Make key icons more prominent (DB, Python, Bootstrap, Code) */
body.light-theme .bg-icon.icon-db,
body.light-theme .bg-icon.icon-python,
body.light-theme .bg-icon.icon-bootstrap,
body.light-theme .bg-icon.icon-code {
    opacity: 0.78 !important;
    filter: grayscale(0%) contrast(1.05) brightness(0.85) saturate(1.05) drop-shadow(0 8px 26px rgba(0, 0, 0, 0.08));
}

/* Keep some icons softer so they no compitan con el contenido (HTML/JS pequeños) */
body.light-theme .bg-icon.icon-html,
body.light-theme .bg-icon.icon-js,
body.light-theme .bg-icon.icon-html-extra,
body.light-theme .bg-icon.icon-js-extra,
body.light-theme .bg-icon.icon-html-more {
    opacity: 0.28 !important;
    filter: grayscale(20%) contrast(0.95) brightness(0.95) saturate(0.85);
}

/* Ensure SVG shapes get the drop-shadow for contrast (works across <path>, <rect>, <ellipse>, <polyline>, <text>) */
body.light-theme .bg-icon path,
body.light-theme .bg-icon rect,
body.light-theme .bg-icon ellipse,
body.light-theme .bg-icon polyline,
body.light-theme .bg-icon circle,
body.light-theme .bg-icon text {
    /* do not force fill — keep original colors but add subtle shadow for separation */
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.06));
    transition: filter .25s ease, opacity .25s ease;
}

/* Slight scale on hover (disabled pointer events on container, but handy if enabling later) */
body.light-theme .bg-icon:hover {
    transform: scale(1.03);
    opacity: 0.95 !important;
}

/* En modo claro: forzar texto negro en el contenedor principal (main-hero-container) */
body.light-theme .main-hero-container,
body.light-theme .main-hero-container p,

body.light-theme .main-hero-container .lead,
body.light-theme .main-hero-container h1,
body.light-theme .main-hero-container h2,
body.light-theme .main-hero-container h3,
body.light-theme .main-hero-container h4,
body.light-theme .main-hero-container h5,
body.light-theme .main-hero-container h6,
body.light-theme .main-hero-container small,
body.light-theme .main-hero-container label,
body.light-theme .main-hero-container .card-title,
body.light-theme .main-hero-container .card-text {
    color: #10155c !important;
}

body.light-theme .build-future-text,
body.light-theme .ascendev-text {
    color: #1d237a !important;
}

body.light-theme .btn-project-icon-float {
    color: #f7df1e !important;
}

/* Hacer el main hero más oscuro en modo claro */
body.light-theme .main-hero-bg {
    background: linear-gradient(120deg,
            #ffffff 0%,
            /* tono muy oscuro azulado */
            #ffffff 30%,
            #447fff 60%,
            #0400ffcc 100%) !important;
    color: #000000 !important;
    position: relative;
    overflow: hidden;
}

/* Capa difusa para intensificar el oscurecimiento (modo claro) */
body.light-theme .main-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.16));
    filter: blur(10px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
}

/* Light-theme: main hero con azul difuminado INSIDE el contenedor */
body.light-theme .main-hero-bg {
    position: relative;
    /* necesario para el pseudo-elemento */
    overflow: hidden;
    /* evita que el blur se salga */
    isolation: isolate;
    /* mantiene stacking context local */
    background: linear-gradient(180deg, #e6f2ff 0%, #c9e3ff 40%, #9cc6ff 100%) !important;
    color: #062a4a !important;
    /* texto oscuro para contraste */
}

/* Capa difusa dentro del contenedor (solo en modo claro) */
body.light-theme .main-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(77, 166, 255, 0.10), transparent 18%),
        radial-gradient(circle at 85% 70%, rgba(60, 94, 241, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.00));
    filter: blur(18px) saturate(1);
    opacity: 0.92;
}

s

/* Asegurar contenido encima de la capa difusa */
body.light-theme .main-hero-bg>*,
body.light-theme .main-hero-bg .main-hero-container,
body.light-theme .main-hero-bg .main-hero-text {
    position: relative;
    z-index: 1;
    /* Refuerza color legible del texto (ajusta si ya se fuerza en otras reglas) */
    color: #062a4a !important;
}

/* Botón "See Our Work" más claro en modo claro */
body.light-theme .btn-see-our-work {
    background: linear-gradient(90deg, #5db1ff 0%, #7bb6ff 100%) !important;
    color: #03203a !important;
    box-shadow: 0 8px 30px rgba(97, 154, 255, 0.16) !important;
    border: none !important;
}

/* Hover del botón en modo claro */
body.light-theme .btn-see-our-work:hover,
body.light-theme .btn-see-our-work:focus {
    background: linear-gradient(90deg, #09a1ff 0%, #7db6ff 100%) !important;
    color: #021428 !important;
    transform: translateY(-3px) scale(1.03);
}

/* Contenedor De La Bienvenida */
.main-hero-container {
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    z-index: 101;
    position: relative;
    margin-bottom: 10vh;
}

/* Barra De Navegación */
.ascendev-navbar {
    background: linear-gradient(100deg, #2a3eb1 0%, #3854cf 60%, #233586 100%);
    box-shadow: 0 4px 24px 0 rgba(35, 53, 134, 0.13), 0 2px 12px 0 rgba(70, 21, 161, 0.10);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1050;
    padding-top: 0.7rem;
    padding-bottom: 0.3rem;
    margin-left: 0;
    margin-right: 0;
    border: 2px solid #233586;
}

/* Bienvenida */
.main-hero-bg {
    background: linear-gradient(120deg,
            #04061a 0%,
            /* muy oscuro - casi negro azulado */
            #0b1b4a 20%,
            /* azul profundo */
            #1a237e 45%,
            /* azul principal */
            #233586cc 70%,
            /* azul intermedio semitransparente */
            #4da6ff 88%,
            /* celeste saturado para contraste */
            #8ecaffcc 100%
            /* celeste final */
        );
    min-height: 80vh;
    max-width: 100vw;
    margin: 0;
    position: relative;
    z-index: 102;
    box-shadow: none;
    padding: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 0;
    margin-top: 50px;
}

#themeToggleBtn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.welcome-to-text {
    font-size: 6.2rem;
    line-height: 1.08;
    letter-spacing: 2px;
}

.welcome-to-ascendev-container {
    gap: 15px;
}

.ascendev-text {
    font-size: 4.2rem;
    font-weight: bold;
    color: #d7edff;
    letter-spacing: 2px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.we-are-text {
    font-size: 4.7rem;
    font-weight: 500;
    text-align: justify;
}

.build-future-text {
    color: #dde4ff;
    font-weight: 700;
}

.our-work-button {
    margin-top: 1rem;
    position: relative;
    display: inline-block;
    width: fit-content;
}

.btn-see-our-work {
    font-size: 1.6rem;
    letter-spacing: 1.5px;
}

.programmer-cat-container {
    min-height: 340px;
}

.programmer-cat-div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    min-width: 220px;
    height: 100%;
    background: transparent;
}

.programmer-cat-languages {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 32px;
    pointer-events: none;
}

.fa-html5 {
    color: #e44d26;
    font-size: 2.7rem;
    animation: floatIcon 2.5s ease-in-out infinite;
}

.fa-js-square {
    color: #f7df1e;
    font-size: 2.5rem;
    animation: floatIcon 2.8s ease-in-out infinite 0.2s;
}

.fa-python {
    color: #306998;
    font-size: 2.6rem;
    animation: floatIcon 2.7s ease-in-out infinite 0.4s;
}

.fa-css3-alt {
    color: #2196f3;
    font-size: 2.5rem;
    animation: floatIcon 2.6s ease-in-out infinite 0.6s;
}

.fa-code {
    color: #fff;
    font-size: 2.2rem;
    animation: floatIcon 2.9s ease-in-out infinite 0.3s;
}

.programmer-cat-img {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    height: auto;
    border-radius: 2rem;
    background: transparent;
    animation: floatY 3.5s ease-in-out infinite;
}

.projects-container {
    position: relative;
    z-index: 50;
    padding: 0;
    margin-bottom: 10vh;
}

.projects-container-big-card {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    border-radius: 1.5rem;
    border: none;
    background: linear-gradient(120deg, #2a3eb1 70%, #3b53c7 100%);
    color: #fff;
    position: relative;
    z-index: 51;
}

body,
.main-hero-bg,
.navbar,
.projects-container {
    width: 100%;
}

.projects-title {
    font-size: 2.3rem;
    letter-spacing: 1px;
    color: #d7edff;
}

.project-card1 {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.07);
    color: #e3f0ff;
}

.project-card2 {
    width: 100%;
    height: 210px;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    background: #e3f0ff22;
    border-bottom: 2.5px solid #8ecaff;
    cursor: pointer;
}

.project-card2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
    margin: 0;
}

.about-project-container {
    flex: 1;
}

.project-title {
    color: #7fc3ff;
}

.card-text {
    color: #e3f0ff;
}

.new-projects-and-skills-container {
    position: relative;
    z-index: 50;
    max-width: 100vw;
}

.new-projects-and-skills-div {
    max-width: 1200px;
    width: 100%;
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(26, 47, 139, 0.03));
    border: 5px solid rgba(0, 0, 0, 0.1);
}

.new-projects-and-skills-title {
    color: #d7edff;
    font-weight: 700;
    margin: 0;
    font-size: 1.75rem;
}

.new-projects-and-skills-description {
    color: #e3f0ff;
    margin-top: 0.5rem;
    font-size: 1rem;
}

.skills-container {
    position: relative;
    z-index: 50;
    padding: 0;
    margin-bottom: 10vh;
}

.skills-container-big-card {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    border-radius: 1.5rem;
    border: none;
    background: linear-gradient(120deg, #2a3eb1 70%, #3b53c7 100%);
    color: #fff;
    position: relative;
    z-index: 51;
}

.project-photo-modal {
    z-index: 9999;
}

.skills-title {
    font-size: 2.3rem;
    letter-spacing: 1px;
    color: #d7edff;
}

.skill-card {
    border-radius: 1rem;
    overflow: hidden;
}

.skill-logo {
    width: 100%;
    height: 160px;
    background: #f7fafd;
}

.skill-logo-big-python {
    font-size: 6rem;
    color: #306998;
}

.skill-logo-big-django1 {
    font-size: 6rem;
    color: #75b79e;
    filter: drop-shadow(0 0 18px #8ecaff88);
}

.skill-logo-big-django2 {
    position: absolute;
    font-size: 2.2rem;
    color: #092e20;
    left: 50%;
    transform: translateX(-50%) translateY(38px);
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.skill-logo-big-html {
    font-size: 6rem;
    color: #e44d26;
    filter: drop-shadow(0 0 18px #e44d2688);
}

.skill-logo-big-js {
    font-size: 6rem;
    color: #f7df1e;
    filter: drop-shadow(0 0 18px #fff176);
}

.skill-logo-css {
    font-size: 6rem;
    color: #2196f3;
    filter: drop-shadow(0 0 18px #90caf9);
}

.skill-logo-mysql {
    font-size: 6rem;
    color: #fbbc05;
    filter: drop-shadow(0 0 18px #fbbc0588);
}

.skill-logo-bootstrap {
    font-size: 6rem;
    color: #7952B3;
    filter: drop-shadow(0 0 18px #b39ddb);
}

.skill-logo-github {
    font-size: 6rem;
    color: #000000;
    filter: drop-shadow(0 0 18px #b39ddb);
}

.skill-name {
    flex: 1;
    background: rgba(42, 62, 177, 0.92);
    color: #e3f0ff;
    border-radius: 0 0 1rem 1rem;
}

.skill-title {
    color: #d7edff;
}

.skill-description {
    color: #e3f0ff;
    text-align: center;
}

@media (max-width: 768px) {

    .main-hero-bg {
        margin-top: 0;
    }

    .programmer-cat-languages {
        gap: 20px;
    }

    .build-future-text {
        font-size: 1rem !important;
    }

    .px-md-5 {
        padding: 1rem !important;
    }

    .modal-dialog {
        max-width: 95%;
        margin: 0 auto;
    }

    #modalImagenProyectoImg {
        width: 100%;
    }

    .projects-container-big-card {
        width: 95%;
    }

    .skills-container-big-card {
        width: 95%;
    }
}

@media (max-width: 425px) {

    .main-hero-bg {
        margin-top: 3rem;
    }

    #modalImagenProyectoImg {
        width: 100%;
        height: 100%;
    }

    .modal-title {
        font-size: 1rem;
    }
}

.footer-text {
    color: #299fff;
    font-weight: 600;
}

.footer-container {
    padding: 1.6rem 0;
    position: relative;
    z-index: 60;
}

.footer-div {
    max-width: 1200px;
}


/* Badge pequeño sobre iconos de LinkedIn en footer (usa mismo formato de .footer-social) */
.footer-linkedin {
    position: relative;
    /* para ubicar la letra */
}

.footer-linkedin .linkedin-letter {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #0a66c2;
    /* azul LinkedIn */
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
    line-height: 1;
    pointer-events: none;
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 576px) {
    .footer-linkedin .linkedin-letter {
        top: -6px;
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
    }
}