/* Configuración general */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Variables: colores y fuentes reutilizables */

:root {
    --color-fondo: #171a17;
    --color-panel: #232923;
    --color-texto: #f1e8d5;
    --color-cobre: #dda66d;
    --color-arcano: #a3e478;
    --fuente-texto: Arial, Helvetica, sans-serif;
    --fuente-titulos: Georgia, "Times New Roman", serif;
}

/* Estilos generales */

body {
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    line-height: 1.6;
}

header,
main,
footer {
    width: 92%;
    max-width: 1200px;
    margin-inline: auto;
}

section {
    padding-block: 48px;
}

h1,
h2,
h3 {
    color: var(--color-cobre);
    font-family: var(--fuente-titulos);
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

a {
    color: var(--color-arcano);
}

a:hover {
    text-decoration: none;
}

a:focus-visible {
    outline: 3px solid var(--color-arcano);
    outline-offset: 5px;
}

/* Imágenes */

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.galeria-proyectos img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Cabecera y navegación */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-block: 24px;
    border-bottom: 1px solid var(--color-cobre);
}

header > a {
    color: var(--color-cobre);
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav a {
    text-decoration: none;
}

nav a:hover {
    color: var(--color-cobre);
    text-decoration: underline;
}

/* Presentación */

#inicio {
    display: flex;
    align-items: center;
    gap: 48px;
}

.presentacion {
    flex: 1;
    min-width: 0;
}

.presentacion > p:first-child {
    color: var(--color-arcano);
    font-weight: bold;
}

#inicio .retrato-gazrik {
    width: 42%;
    max-width: 480px;
    border: 2px solid var(--color-cobre);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.acciones a {
    padding: 12px 20px;
    border: 1px solid var(--color-arcano);
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
}

.acciones a:first-child {
    background-color: var(--color-arcano);
    color: var(--color-fondo);
}

.acciones a:hover {
    background-color: var(--color-cobre);
    border-color: var(--color-cobre);
    color: var(--color-fondo);
}

/* Presentación en pantallas pequeñas */

@media (max-width: 800px) {
    #inicio {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    #inicio .retrato-gazrik {
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
    }
}

/* Galería de proyectos */

.galeria-proyectos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.galeria-proyectos article {
    min-width: 0;
    overflow: hidden;
    background-color: var(--color-panel);
    border: 1px solid var(--color-cobre);
    border-radius: 12px;
}

.galeria-proyectos img {
    border-bottom: 1px solid var(--color-cobre);
}

.galeria-proyectos h3 {
    margin: 24px 24px 16px;
}

.galeria-proyectos p {
    margin: 0 24px 20px;
}

.galeria-proyectos article > p:last-child {
    padding-top: 16px;
    border-top: 1px solid var(--color-cobre);
}

.galeria-proyectos strong {
    color: var(--color-arcano);
}

/* Galería en pantallas pequeñas */

@media (max-width: 800px) {
    .galeria-proyectos {
        grid-template-columns: 1fr;
    }
}

/* Contacto y formulario */

#contacto form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
    padding: 32px;
    background-color: var(--color-panel);
    border: 1px solid var(--color-cobre);
    border-radius: 12px;
}

#contacto form > div {
    min-width: 0;
}

#contacto label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-cobre);
    font-weight: bold;
}

#contacto input,
#contacto select,
#contacto textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    border: 1px solid var(--color-cobre);
    border-radius: 6px;
    font: inherit;
}

#contacto input::placeholder,
#contacto textarea::placeholder {
    color: #bcb8ac;
    opacity: 1;
}

#contacto textarea {
    min-height: 160px;
    resize: vertical;
}

#contacto form > div:last-of-type,
#contacto button {
    grid-column: 1 / -1;
}

#contacto input:focus-visible,
#contacto select:focus-visible,
#contacto textarea:focus-visible,
#contacto button:focus-visible {
    outline: 3px solid var(--color-arcano);
    outline-offset: 3px;
}

#contacto button {
    justify-self: start;
    max-width: 100%;
    padding: 14px 24px;
    background-color: var(--color-arcano);
    color: var(--color-fondo);
    border: 1px solid var(--color-arcano);
    border-radius: 6px;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

#contacto button:hover {
    background-color: var(--color-cobre);
    border-color: var(--color-cobre);
}

#aviso-formulario {
    padding-left: 16px;
    border-left: 3px solid var(--color-arcano);
}

/* Formulario en pantallas pequeñas */

@media (max-width: 800px) {
    #contacto form {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* Sobre mí */

#sobre-mi {
    margin-block: 24px;
    padding: 32px;
    background-color: var(--color-panel);
    border: 1px solid var(--color-cobre);
    border-left: 5px solid var(--color-arcano);
    border-radius: 12px;
}

#sobre-mi h2 {
    margin-top: 0;
}

#sobre-mi > p:first-of-type {
    color: var(--color-arcano);
    font-size: 1.2rem;
    font-style: italic;
}

#sobre-mi p {
    max-width: 75ch;
}

#sobre-mi ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    padding-left: 24px;
}

#sobre-mi li::marker {
    color: var(--color-arcano);
}

/* Pie de página */

footer a {
    display: inline-block;
    margin: 8px 12px;
}

footer {
    margin-top: 32px;
    padding-block: 32px;
    border-top: 1px solid var(--color-cobre);
    text-align: center;
}

footer p {
    max-width: 75ch;
    margin-inline: auto;
}

footer p:last-child {
    font-size: 0.875rem;
}

/* Ajustes en pantallas pequeñas */

@media (max-width: 800px) {
    #sobre-mi {
        padding: 24px;
    }

    #sobre-mi ul {
        grid-template-columns: 1fr;
    }
}