/* Tipografía utilizadas */
@font-face {
    font-family: Editorial Old-Regular;
    src: url(../fonts/PPEditorialOld-Regular.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: Editorial Old-Italic;
    src: url(../fonts/PPEditorialOld-Italic.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: Grafier-Regular;
    src: url(../fonts/PPGrafier-Regular.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: Grafier-Black;
    src: url(../fonts/PPGrafier-Black.otf) format('opentype');
    font-display: swap;
}

:root {
    /* Colores */
    --col-red: #F9064B;
    --col-darkgrey: #0C0C0C;
    --col-lightgrey: #EBE8E3;

    /* Tipo de letra ---------------------------------------------------------------------------------*/
    --font-f-base: Grafier-Regular;
    --font-s-base: 16px;
    --font-color-base: #000000;
}

h2.dark-mode {
    color: var(--col-lightgrey);
}


/* INDEX----------------------------------------------------------------------------------------------------------------- */
body.dark-mode {
    background: var(--col-darkgrey);
}

body.dark-mode a {
    color: var(--col-lightgrey);
}

body.dark-mode a:hover {
    color: var(--col-red);
}

body.dark-mode .right-items{
    color: var(--col-red);
}

body.dark-mode .right-items:hover {
    color: var(--col-lightgrey);
}

body.dark-mode .home-description-left,
body.dark-mode .home-description-right {
    color: var(--col-lightgrey);
}

body.dark-mode .home-description-left:hover,
body.dark-mode .home-description-right:hover {
    color: var(--col-red);
}

body.dark-mode .footer-text, 
body.dark-mode .footer-text-bold {
    color: var(--col-lightgrey);
}

body.dark-mode .separator-white{
    color: var(--col-darkgrey);
}

body.dark-mode .separator-white::before,
body.dark-mode .separator-white::after {
    filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(5819%) hue-rotate(350deg) brightness(91%) contrast(88%);
}

/* body.dark-mode .separator{
    color: var(--col-lightgrey);
}

body.dark-mode .separator::before,
body.dark-mode .separator::after {
    filter: brightness(0) saturate(100%) invert(97%) sepia(8%) saturate(116%) hue-rotate(359deg) brightness(96%) contrast(92%);
} */

body.dark-mode .left-paddle,
body.dark-mode .right-paddle {
        filter: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(5819%) hue-rotate(350deg) brightness(91%) contrast(88%);
}

body.dark-mode .miscellany-container::-webkit-scrollbar-thumb {
    background-color: rgba(12, 12, 12, 0.3);
}

body.dark-mode .miscellany-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(12, 12, 12, 0.75);
}

body.dark-mode .custom-modal-content-vertical::-webkit-scrollbar {
    background-color: #0F0F0F;
}

body.dark-mode .custom-modal-content-horizontal::-webkit-scrollbar {
    background-color: #0F0F0F;
}

body.dark-mode .socials-image {
    color: var(--col-lightgrey);
}

body.dark-mode .socials-image:hover {
    color: var(--col-red);
}

body.dark-mode .socials-image-svg {
    filter: brightness(0) saturate(100%) invert(97%) sepia(8%) saturate(116%) hue-rotate(359deg) brightness(96%) contrast(92%);
}

body.dark-mode .custom-modal-content-vertical,
body.dark-mode .custom-modal-content-horizontal {
    color: var(--col-lightgrey);
    background-color: var(--col-darkgrey);
}

body.dark-mode .modal-description-paragraph {
    color: var(--col-lightgrey);
}

/* Dark mode: forzar texto de .modal-description-text a blanco */
body.dark-mode .modal-description-text,
body.dark-mode .modal-description-text * {
    color: var(--col-lightgrey);
}


body.dark-mode .home-description-mobile:hover {
    color: var(--col-lightgrey);
  }

/* ABOUT----------------------------------------------------------------------------------------------------------------- */

body.dark-mode .about-title,
body.dark-mode .about-description,
body.dark-mode .about-socials-image,
body.dark-mode .CV-text:hover {
    color: var(--col-lightgrey);
}

body.dark-mode .about-socials-image:hover {
    color: var(--col-red);
}

body.dark-mode .logo-video-tipography-light {
    opacity: 0;
    pointer-events: none;
}

body.dark-mode .logo-video-tipography-dark {
    opacity: 1;
    pointer-events: auto;
}

body.dark-mode .about-info-footer::-webkit-scrollbar-track {
    background-color: rgba(15, 15, 15, 0);
}

body.dark-mode .about-info-footer::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    /* color claro con opacidad baja */
}

body.dark-mode .about-info-footer::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}


/* PROJECT-MODALS---------------------------------------------------------------------------------------------------------------- */


body.dark-mode .project-structure-info-bottom,
body.dark-mode .previous-next-project-text-right:hover,
body.dark-mode .previous-next-project-text-left:hover,
body.dark-mode .modal-arrow-text:hover {
    color: var(--col-lightgrey);
}

body.dark-mode .project-modal {
    background: rgba(24, 24, 24, 0.3);
}

/* Cambia aquí los selectores y colores según tus necesidades */

body,
body * {
    transition: background-color 0.7s, color 0.7s, border-color 0.7s;
}

.socials-image-svg,
.left-paddle,
.right-paddle,
.separator-white::after,
.separator-white::before {
    transition: filter 0.7s;
}

body.dark-mode .close-modal-x:hover {
    color: var(--col-lightgrey);
}


body.dark-mode .modal-arrow:hover {
    filter: brightness(10);
  }

/* body.dark-mode .horizontal-modal-arrows {
    background: linear-gradient(rgba(226, 220, 220, 0), rgba(0, 0, 0, 0.5));
} */