/* =========================================
   Andrés Stangalini — styles.css
   ========================================= */

:root {
    --azul:       #003087;
    --azul-medio: #0056b3;
    --azul-claro: #e8f0fb;
    --negro:      #111827;
    --gris:       #4B5563;
    --gris-claro: #F3F4F6;
    --blanco:     #ffffff;
    --acento:     #E63946;
    --font-title: 'Oswald', sans-serif;
    --font-body:  'Source Serif 4', Georgia, serif;
    --max-width:  1100px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--negro);
    background: var(--blanco);
}

/* ── HEADER / NAV ── */
header {
    background: var(--azul);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

header nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-brand .brand-link {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blanco);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 0.25rem;
}

header nav ul li a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

header nav ul li a:hover,
header nav ul li a[aria-current="page"] {
    background: var(--acento);
    color: var(--blanco);
}

/* ── HERO ── */
.hero,
.hero-biografia,
.hero-equipos,
.hero-contacto {
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, var(--azul) 0%, #001a5c 100%);
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero-biografia::before,
.hero-equipos::before,
.hero-contacto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('images/andres-stangalini-hero.jpg') center/cover no-repeat;
    opacity: 0.18;
}

.hero-biografia::before  { background-image: url('images/andres-stangalini-bio.jpg'); }
.hero-equipos::before    { background-image: url('images/andres-stangalini-equipos.jpg'); }
.hero-contacto::before   { background-image: url('images/andres-stangalini-contacto.jpg'); }

.hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

.hero-content h1 {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.hero-content p,
.hero-sub {
    color: rgba(255,255,255,0.88);
    font-size: 1.1rem;
    max-width: 580px;
    margin-bottom: 1.25rem;
}

.btn {
    display: inline-block;
    background: var(--acento);
    color: var(--blanco);
    padding: 0.7rem 1.6rem;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--font-title);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s;
}

.btn:hover { background: #c1121f; transform: translateY(-2px); }

/* ── MAIN CONTENT ── */
main { max-width: var(--max-width); margin: 0 auto; padding: 2.5rem 1.5rem; }

.content {
    display: grid;
    gap: 2.5rem;
}

.content article {
    background: var(--blanco);
    border-left: 4px solid var(--azul-medio);
    padding: 1.75rem 2rem;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.content article h2 {
    font-family: var(--font-title);
    font-size: 1.4rem;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.content article p { margin-bottom: 0.85rem; color: var(--negro); }
.content article p:last-child { margin-bottom: 0; }

.content article ul {
    padding-left: 1.25rem;
    margin-bottom: 0.85rem;
}

.content article ul li { margin-bottom: 0.4rem; }

/* ── BIOGRAFÍA ── */
.biografia {
    background: var(--blanco);
    padding: 2rem 2.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    max-width: 820px;
    margin: 2rem auto;
}

.biografia h2 {
    font-family: var(--font-title);
    font-size: 1.6rem;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.biografia h3 {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--azul-medio);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.5rem 0 0.5rem;
}

.biografia p { margin-bottom: 1rem; text-align: justify; color: var(--negro); }
.biografia em { color: var(--acento); font-style: italic; }

/* ── EQUIPOS ── */
.equipos {
    max-width: 820px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.equipos > h2 {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.equipos > p { margin-bottom: 1.25rem; color: var(--gris); }

.equipo-item {
    background: var(--gris-claro);
    border-left: 4px solid var(--acento);
    padding: 1.25rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1.25rem;
}

.equipo-item h3 {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

/* ── CONTACTO ── */
.contacto {
    max-width: 680px;
    margin: 2rem auto;
    padding: 2rem 2.5rem;
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.contacto h2 {
    font-family: var(--font-title);
    font-size: 1.4rem;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.contacto p { margin-bottom: 1rem; color: var(--gris); }

.contacto label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    color: var(--negro);
}

.contacto input,
.contacto textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #D1D5DB;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.contacto input:focus,
.contacto textarea:focus {
    outline: none;
    border-color: var(--azul-medio);
}

.contacto button {
    background: var(--azul-medio);
    color: var(--blanco);
    border: none;
    padding: 0.75rem 2rem;
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.contacto button:hover { background: var(--azul); }

/* ── LINKS ── */
a { color: var(--azul-medio); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--acento); text-decoration: underline; }

/* ── FOOTER ── */
footer {
    background: var(--negro);
    color: rgba(255,255,255,0.75);
    margin-top: 4rem;
    padding: 0;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 2.5rem;
}

.footer-about strong {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--blanco);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.6rem;
}

.footer-about p { font-size: 0.9rem; line-height: 1.6; }

.footer-nav h4,
.footer-presencia h4 {
    font-family: var(--font-title);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
}

.footer-nav ul,
.footer-presencia ul {
    list-style: none;
    padding: 0;
}

.footer-nav li,
.footer-presencia li {
    margin-bottom: 0.4rem;
}

.footer-nav a,
.footer-presencia a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-nav a:hover,
.footer-presencia a:hover {
    color: var(--blanco);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding: 1.25rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    header nav {
        flex-direction: column;
        height: auto;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    header nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-content h1 { font-size: 1.6rem; }

    .content article { padding: 1.25rem; }

    .biografia,
    .contacto { padding: 1.25rem; }
}