:root {
    --color-fondo: #000000;
    --color-texto: #f7f1fd;
    --color-suave: #513e61;
    --color-acento: #e5d265;
    --color-borde: #ddd4c8;

    --fuente:'Neue Haas Grotesk Display Pro', sans-serif;

    --ancho-max: 900px;   /* ancho del contenido */
    --espacio: 1.5rem;    /* separación base */
    --radio: 17px;
}

* {
    box-sizing: border-box;
}

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

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

/* Cada <section> centra su contenido y respira. */
section {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: calc(var(--espacio) * 2) var(--espacio);
    margin-bottom: calc(var(--espacio) * 2);
}

h2 {
    font-size: clamp(1.35rem, 4vw + 0.5rem, 1.75rem);
    margin: 0 0 var(--espacio);
    text-align: center;
}

/* SECCIONES */
.hero {
    max-width: none;   /* la imagen va a todo el ancho */
    padding: 0;
}

.hero img {
    width: 100%;
    height: auto;   /* banner 1600x500: escala entero, sin recortar los costados */
}

.header img {
    height: 44px;
    width: auto;
    display: block;
}
.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem var(--espacio);
    margin-bottom: calc(var(--espacio) * 2);
}

.contacto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--espacio) / 2);
}

.contacto a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-suave);
    color: var(--color-texto);
    transition: background 0.2s, color 0.2s;
}

.contacto a:hover {
    background: var(--color-acento);
    color: var(--color-fondo);
}
/*Botones*/
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio);
    justify-content: center;
}

/* Son <a>, no <button>: navegan solos, sin JS. */
.buttons a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: inherit;        /* hereda familia, tamaño e interlineado del body */
    font-weight: 700;     /* va DESPUÉS del shorthand, si no lo pisa */
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radio);
    background-color: var(--color-suave);
    color: var(--color-texto);
    transition: background 0.2s, color 0.2s;
}

.buttons a:hover {
    background: var(--color-acento);
    color: var(--color-fondo);
}

/*Info*/
/* ~65 caracteres por renglón: el largo cómodo para leer.
   La sección sigue a todo el ancho (por el fondo), el texto no. */
.info-text {
    max-width: 65ch;
    margin: 0 auto;
}

.info-text p {
    color: var(--color-texto);
    margin: 0;
    text-align: center;
    white-space: pre-line;
}

.header, .buttons, .info, .universitario {
    background-image: url('fotos/fondo.jpeg');
    background-size: cover;
    background-position: center;
    max-width: none;
}

/*Universitario — foto a todo el ancho*/
.universitario {
    padding: 0;
    margin-bottom: 0;
}

/* La foto original es 16:9. Se recorta a una banda ancha en desktop y a un
   formato más alto en mobile, para que nunca quede como una tira fina.
   El degradado de los bordes la funde con el fondo granulado, en vez de
   dejarla como un rectángulo pegado encima. */
.universitario img {
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 70vh;          /* tope para monitores panorámicos */
    object-fit: cover;
    object-position: center 60%;   /* prioriza al público, recorta el techo oscuro */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/*Contacto*/
/* (sección vacía por ahora) */

/*Footer*/
.footer {
    border-top: 1px solid var(--color-borde);
    padding: calc(var(--espacio) * 1.5) var(--espacio);
    text-align: center;
    color: var(--color-texto);
    font-size: 0.875rem;
}

.footer-contacto {
    margin-bottom: var(--espacio);
}

/* "CONTACTO" chiquito y espaciado, como etiqueta */
.footer-etiqueta {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.35rem;
}

.footer-contacto a {
    font-size: 1.125rem;
    color: var(--color-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--color-acento);
    padding-bottom: 2px;
    transition: color 0.2s;
}

.footer-contacto a:hover {
    color: var(--color-acento);
}

.footer-credito {
    margin: 0;
    opacity: 0.7;
}

.footer-credito a {
    color: var(--color-acento);
    text-decoration: none;
}

.footer-credito a:hover {
    text-decoration: underline;
}

/* 4) RESPONSIVE
   Todo lo de arriba es mobile-first; acá solo los ajustes. */
@media (max-width: 600px) {
    :root {
        --espacio: 1rem;
    }

    .header img {
        height: 32px;
    }

    .contacto a {
        width: 34px;
        height: 34px;
    }

    .buttons {
        flex-direction: column;
    }

    .buttons a {
        width: 100%;
    }

    /* En mobile una banda 21:9 quedaría como una tira de 160px. */
    .universitario img {
        aspect-ratio: 4 / 3;
    }
}