/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* =========================================================
   Ricardo Portfolio
   Sistema visual
   ========================================================= */
/* =========================================================
   IBM Plex
   ========================================================= */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("assets/fonts/IBMPlexSans-Regular.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("assets/fonts/IBMPlexSans-Medium.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("assets/fonts/IBMPlexSans-SemiBold.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("assets/fonts/IBMPlexMono-Regular.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("assets/fonts/IBMPlexMono-Medium.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
:root {
    /* GeneratePress - modo claro */
    --contrast: #171717;
    --contrast-2: #60646c;
    --contrast-3: #9ca3af;

    --base: #e5e7eb;
    --base-2: #f7f8f9;
    --base-3: #ffffff;

    --accent: #2563eb;

    /* Portfolio */
    --portfolio-bg: var(--base-3);
    --portfolio-bg-soft: var(--base-2);

    --portfolio-text: var(--contrast);
    --portfolio-text-muted: var(--contrast-2);

    --portfolio-border: #d9dce1;

    --portfolio-accent: var(--accent);
    --portfolio-accent-hover: #1d4ed8;

    /* Layout */
    --portfolio-width: 1120px;
    --portfolio-content-width: 760px;

    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;

    /* Bordes */
    --radius-sm: 4px;
    --radius-md: 8px;

    /* Animaciones */
    --transition-fast: 150ms ease;
    --transition-normal: 220ms ease;
}


/* =========================================================
   Modo oscuro automático
   ========================================================= */

@media (prefers-color-scheme: dark) {

    :root {
        /* GeneratePress */
        --contrast: #f3f4f6;
        --contrast-2: #b5bac3;
        --contrast-3: #7d8590;

        --base: #2a2d31;
        --base-2: #111214;
        --base-3: #181a1d;

        --accent: #60a5fa;

        /* Portfolio */
        --portfolio-bg: #111214;
        --portfolio-bg-soft: #181a1d;

        --portfolio-text: #f3f4f6;
        --portfolio-text-muted: #b5bac3;

        --portfolio-border: #303238;

        --portfolio-accent: #60a5fa;
        --portfolio-accent-hover: #93c5fd;
    }
}


/* =========================================================
   Tema claro forzado manualmente
   ========================================================= */

html[data-theme="light"] {

    --contrast: #171717;
    --contrast-2: #60646c;
    --contrast-3: #9ca3af;

    --base: #e5e7eb;
    --base-2: #f7f8f9;
    --base-3: #ffffff;

    --accent: #2563eb;

    --portfolio-bg: #ffffff;
    --portfolio-bg-soft: #f7f8f9;

    --portfolio-text: #171717;
    --portfolio-text-muted: #60646c;

    --portfolio-border: #d9dce1;

    --portfolio-accent: #2563eb;
    --portfolio-accent-hover: #1d4ed8;
}


/* =========================================================
   Tema oscuro forzado manualmente
   ========================================================= */

html[data-theme="dark"] {

    --contrast: #f3f4f6;
    --contrast-2: #b5bac3;
    --contrast-3: #7d8590;

    --base: #2a2d31;
    --base-2: #111214;
    --base-3: #181a1d;

    --accent: #60a5fa;

    --portfolio-bg: #111214;
    --portfolio-bg-soft: #181a1d;

    --portfolio-text: #f3f4f6;
    --portfolio-text-muted: #b5bac3;

    --portfolio-border: #303238;

    --portfolio-accent: #60a5fa;
    --portfolio-accent-hover: #93c5fd;
}

/* =========================================================
   Documento
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--base-2);
    color: var(--contrast);

    font-family:
		"IBM Plex Sans",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

    font-size: 17px;
    line-height: 1.7;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}
.site-header,
.main-navigation,
.inside-article,
.widget,
.site-info {
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}

/* =========================================================
   Tipografía
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:
        "IBM Plex Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
	
    color: var(--portfolio-text);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2.25rem, 6vw, 4.5rem);
}

h2 {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

h3 {
    font-size: 1.35rem;
}

p {
    margin-bottom: 1.5rem;
}


/* =========================================================
   Enlaces
   ========================================================= */

a {
    color: var(--portfolio-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--portfolio-accent-hover);
}


/* =========================================================
   Datos técnicos
   ========================================================= */

.portfolio-mono,
.project-year,
.project-tech,
.project-meta {
    font-family:
        "IBM Plex Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    letter-spacing: -0.02em;
}


/* =========================================================
   Selección
   ========================================================= */

::selection {
    background: var(--portfolio-accent);
    color: #ffffff;
}

/* =========================================================
   Layout general
   ========================================================= */

.portfolio-shell {
    width: min(
        calc(100% - 48px),
        var(--portfolio-width)
    );

    margin-inline: auto;
}


/* =========================================================
   Cabecera
   ========================================================= */

.portfolio-header {
    background: var(--portfolio-bg);

    border-bottom:
        1px solid var(--portfolio-border);

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal);
}


.portfolio-header__inner {
    min-height: 78px;

    display: flex;
    align-items: center;

    gap: 2rem;
}


/* Marca */

.portfolio-brand {
    display: inline-flex;
    align-items: center;

    gap: 0.85rem;

    margin-right: auto;

    color: var(--portfolio-text);

    text-decoration: none;
}


.portfolio-brand:hover {
    color: var(--portfolio-text);
}


.portfolio-brand__mark {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--portfolio-border);

    border-radius: 6px;

    color:
        var(--portfolio-text);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.76rem;
    font-weight: 500;

    letter-spacing: -0.03em;

    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.portfolio-brand:hover
.portfolio-brand__mark {

    color:
        var(--portfolio-accent);

    border-color:
        var(--portfolio-accent);

    background:
        var(--portfolio-bg-soft);

    transform:
        translateY(-2px);
}


.portfolio-brand__name {
    font-size: 0.95rem;
    font-weight: 600;

    letter-spacing: -0.01em;
}


/* Navegación */

.portfolio-nav {
    display: flex;
    align-items: center;

    gap: 1.5rem;
}


.portfolio-nav__list {
    display: flex;
    align-items: center;

    gap: 1.7rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


.portfolio-nav__list li {
    margin: 0;
}


.portfolio-nav__list a {
    color: var(--portfolio-text-muted);

    font-size: 0.9rem;
    font-weight: 500;

    text-decoration: none;

    transition:
        color var(--transition-fast);
}


.portfolio-nav__list a:hover,
.portfolio-nav__list a:focus,
.portfolio-nav__list
.current-menu-item > a {

    color:
        var(--portfolio-accent);
}


/* =========================================================
   Botón claro / oscuro
   ========================================================= */

.portfolio-theme-toggle {
    width: 38px;
    height: 38px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--portfolio-text-muted);

    background: transparent;

    border:
        1px solid var(--portfolio-border);

    border-radius: 6px;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.portfolio-theme-toggle:hover {
    color:
        var(--portfolio-accent);

    border-color:
        var(--portfolio-accent);

    background:
        var(--portfolio-bg-soft);

    transform:
        translateY(-1px);
}


.portfolio-theme-icon {
    width: 18px;
    height: 18px;
}


.portfolio-theme-icon--sun {
    display: none;
}


.portfolio-theme-icon--moon {
    display: block;
}


/* Sistema operativo oscuro */

@media (prefers-color-scheme: dark) {

    .portfolio-theme-icon--moon {
        display: none;
    }

    .portfolio-theme-icon--sun {
        display: block;
    }
}


/* Override manual */

html[data-theme="light"]
.portfolio-theme-icon--moon {

    display: block;
}


html[data-theme="light"]
.portfolio-theme-icon--sun {

    display: none;
}


html[data-theme="dark"]
.portfolio-theme-icon--moon {

    display: none;
}


html[data-theme="dark"]
.portfolio-theme-icon--sun {

    display: block;
}


/* =========================================================
   Botón menú móvil
   ========================================================= */

.portfolio-menu-toggle {
    display: none;

    width: 38px;
    height: 38px;

    padding: 8px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    color: var(--portfolio-text);

    background: transparent;

    border:
        1px solid var(--portfolio-border);

    border-radius: 6px;

    cursor: pointer;
}


.portfolio-menu-toggle span {
    width: 17px;
    height: 1px;

    display: block;

    background:
        currentColor;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


/* =========================================================
   Footer
   ========================================================= */

.portfolio-footer {
    margin-top:
        var(--space-xl);

    border-top:
        1px solid var(--portfolio-border);

    color:
        var(--portfolio-text-muted);

    transition:
        border-color var(--transition-normal);
}


.portfolio-footer__inner {
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.78rem;
}


.portfolio-footer__status {
    text-align: right;
}


/* =========================================================
   Portada temporal
   ========================================================= */

.home .inside-article {
    padding: 0;

    background:
        transparent;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {

    .portfolio-shell {
        width:
            min(
                calc(100% - 32px),
                var(--portfolio-width)
            );
    }


    .portfolio-header__inner {
        min-height: 68px;

        flex-wrap: wrap;
    }


    .portfolio-brand__name {
        display: none;
    }


    .portfolio-menu-toggle {
        display: flex;
    }


    .portfolio-nav {
        display: none;

        width: 100%;

        flex-basis: 100%;

        align-items: flex-start;

        gap: 1rem;

        padding:
            0.5rem 0 1.25rem;
    }


    .portfolio-nav.is-open {
        display: flex;
    }


    .portfolio-nav__list {
        flex: 1;

        flex-direction: column;
        align-items: flex-start;

        gap: 0;
    }


    .portfolio-nav__list li {
        width: 100%;
    }


    .portfolio-nav__list a {
        display: block;

        width: 100%;

        padding:
            0.65rem 0;
    }


    .portfolio-theme-toggle {
        margin-top:
            0.35rem;
    }


    .portfolio-footer__inner {
        min-height: 120px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 0.5rem;
    }


    .portfolio-footer__status {
        text-align: left;
    }
}
/* =========================================================
   Accesibilidad
   ========================================================= */

:where(
    a,
    button,
    input,
    textarea,
    select,
    [tabindex]
):focus-visible {

    outline:
        2px solid var(--portfolio-accent);

    outline-offset: 4px;
}


/*
 * Los navegadores pueden utilizar correctamente
 * controles claros/oscuros.
 */

:root {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {

    :root {
        color-scheme: dark;
    }
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}


/* =========================================================
   Renderizado tipográfico
   ========================================================= */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering:
        optimizeLegibility;
}


/* =========================================================
   Anclas
   ========================================================= */

#proyectos,
#contacto {
    scroll-margin-top: 40px;
}
/* =========================================================
   Entrada de página
   ========================================================= */

@keyframes portfolio-page-enter {

    from {
        opacity: 0;
        transform:
            translateY(20px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


.portfolio-home,
.projects-archive,
.project-page {

    animation:
        portfolio-page-enter
        340ms
        ease-out
        both;
}

/* =========================================================
   Reducir movimiento
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}