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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #0b0b0c;
    color: #e8e8ea;
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor { width: min(100% - 32px, 960px); margin-inline: auto; }

/* Portada */
.portada {
    min-height: 70vh;
    display: flex;
    background: #151518 center / cover no-repeat;
}
.portada__velo {
    flex: 1;
    display: flex;
    align-items: flex-end;
    padding: 64px 0 40px;
    background: linear-gradient(to top, #0b0b0c 0%, rgba(11, 11, 12, .55) 55%, rgba(11, 11, 12, .25) 100%);
}
.portada__nombre {
    margin: 0;
    font: 800 clamp(2.8rem, 12vw, 6rem)/1 Impact, "Arial Narrow", "Haettenschweller", sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.portada__logo { display: block; max-width: min(100%, 520px); max-height: 220px; height: auto; }
.portada__estilo {
    margin: 12px 0 24px;
    font-size: 1.1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b9b9bf;
}

.boton {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    background: var(--acento);
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.boton:hover { text-decoration: none; filter: brightness(1.1); }

/* Contenido */
.bloque { padding: 40px 0 8px; }
.bloque h2 {
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 4px solid var(--acento);
    font: 700 1.5rem/1.2 Impact, "Arial Narrow", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bio { margin: 0; max-width: 70ch; white-space: pre-line; }

.redes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.redes a {
    display: block;
    padding: 8px 18px;
    border: 1px solid var(--acento);
    border-radius: 4px;
    font-weight: 600;
}
.redes a:hover { background: var(--acento); color: #fff; text-decoration: none; }

/* Pie */
.pie {
    margin-top: 64px;
    padding: 24px 0 32px;
    border-top: 1px solid #25252a;
    color: #8d8d95;
    font-size: .9rem;
}
.pie p { margin: 4px 0; }