/* base.css — Estilos generales y piezas comunes. Va SIEMPRE el primero. */

/* ==========================================================================
   TIPOGRAFÍA: FREDOKA (archivos en assets/fonts/fredoka/)
   Un @font-face por cada grosor. "latin" cubre el español (á, ñ, ¿...);
   "latin-ext" solo se descarga si aparece algún carácter de su rango.
   ========================================================================== */

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-display: swap;          /* Muestra texto con otra fuente mientras carga */
    src: url('../assets/fonts/fredoka/fredoka-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   GENERAL
   ========================================================================== */

html {
    scroll-behavior: smooth;      /* Desliza en vez de saltar de golpe */
}

body {
    margin: 0;                    /* Quita el margen de 8px que pone el navegador */
    font-family: 'Fredoka', system-ui, sans-serif;
}

/* Tu header es "sticky" y taparía el título de la sección al saltar.
   Esto deja 90px de margen arriba al llegar con un enlace #. */
section[id] {
    scroll-margin-top: 90px;
}


/* ==========================================================================
   PIEZAS COMUNES
   ========================================================================== */

/* Píldora de categoría ("Videojuegos", "Web"...) */
.etiqueta {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f2f4;
}

/* Lista de tecnologías ("Godot", "C#"...) */
.tecnologias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tecnologias span {
    font-size: 13px;
    background: #f1f2f4;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Fila de datos: Año, Rol, Estado */
.datos {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.datos span {             /* La etiqueta pequeña: "AÑO", "ROL"... */
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #5f636a;
}

/* Botones */
.boton {
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 600;
    text-align: center;
}

.boton-principal {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* .boton estaba pensado para <a>; un <button> trae su propio estilo y hay que igualarlo */
button.boton {
    font: inherit;
    background: #fff;
    cursor: pointer;
}


/* ==========================================================================
   MODO OSCURO
   ========================================================================== */

body.dark-mode {
    background-color: #121212;
    color: #f1f1f1;
}

/* Iconos negros que pasan a blancos */
body.dark-mode .icono-github,
body.dark-mode .theme-icon {
    filter: invert(1);        /* Pasa de oscuro a claro */
}

body.dark-mode .etiqueta,
body.dark-mode .tecnologias span       { background: #2a2a2a; color: #f1f1f1; }
body.dark-mode .boton                  { color: #f1f1f1; border-color: #444; }
body.dark-mode .boton-principal        { background: #f1f1f1; color: #121212; }
body.dark-mode button.boton            { background: #1e1e1e; }