/* meto variables aqui pa no repetir colores a cada rato y tener control total */
/* Fuentes locales para evitar Google Fonts */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --fondo-principal: #0f172a;
    --texto-blanco: white;
    --color-guinda: #800020;
    --color-vino: #5a0016;
    --fondo-carta: #1e293b;
    --borde-carta: #334155;
    --btn-blanco-hover: #e2e8f0;
    --btn-rojo: #ff003c;
    --btn-rojo-hover: #cc0030;
    --texto-gris: #94a3b8;
    --fondo-nav-cel: #600018;
    --fuente-base: 'Inter', system-ui, sans-serif;
    --radio-botones: 5px;
    --radio-cartas: 10px;
    --padding-normal: 20px;
    --margen-grande: 30px;
}

/* le quito los margenes que el navegador pone solo */
* {
    margin: 0;
    /* sin espacio afuera */
    padding: 0;
    /* sin espacio adentro */
    box-sizing: border-box;
    /* que los bordes no agranden las cajas */
}

/* aqui le pongo el fondo y la letra a toda la pagina */
body {
    font-family: var(--fuente-base);
    /* letra arial o alguna parecida */
    background-color: var(--fondo-principal);
    /* fondo azul oscuro usando variable */
    color: var(--texto-blanco);
    /* letras blancas de la var */
}

/* la barra guinda de arriba con el nombre y boton */
.cabecera {
    background-color: var(--color-guinda);
    /* fondo guinda usando var */
    padding: var(--padding-normal);
    /* relleno normal */
    text-align: center;
    /* centramos todo */
    border-bottom: 2px solid var(--color-vino);
    /* linea vino oscuro abajo */
}

/* el nombre de la escuela que va arriba */
.nombre {
    font-size: 28px;
    /* letra grande */
    margin-bottom: 10px;
    /* espacio abajo para separar del boton */
}

/* botones base compartidos */
.btn,
.btn-rojo {
    padding: 10px var(--padding-normal);
    border-radius: var(--radio-botones);
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

/* el boton blanco de ir a novedades */
.btn {
    background-color: var(--texto-blanco);
    color: var(--color-guinda);
}

/* cuando le pasas el mouse al boton blanco */
.btn:hover {
    background-color: var(--btn-blanco-hover);
}

/* la zona donde van las tarjetas y el subtitulo */
.contenedor {
    padding: var(--margen-grande);
    /* espacio interior */
    text-align: center;
    /* todo centrado */
}

/* el texto de selecciona tu especialidad */
.subtitulo {
    font-size: 24px;
    /* letra mediana grande */
    margin-bottom: 30px;
    /* espacio abajo para las tarjetas */
}

/* la cuadricula donde acomodo las tarjetas juntas */
.grilla {
    width: 90%;
    /* que no toque las orillas */
    margin: 0 auto;
    /* truco para centrar */
}

/* cada tarjeta individual de especialidad */
.carta {
    background-color: var(--fondo-carta);
    /* fondo gris azulado */
    border: 1px solid var(--borde-carta);
    /* borde delgadito */
    border-radius: var(--radio-cartas);
    /* esquinas redondeadas */
    margin-bottom: var(--margen-grande);
    /* espacio abajo entre tarjetas */
    width: 300px;
    /* ancho fijo */
    display: inline-block;
    /* que se pongan lado a lado */
    vertical-align: top;
    /* alineadas desde arriba */
    margin-right: 20px;
    /* espacio entre una tarjeta y otra */
}

/* la foto dentro de cada tarjeta */
.carta img {
    width: 100%;
    /* que ocupe todo el ancho de la tarjeta */
    height: 180px;
    /* alto fijo para que se vean parejas */
    border-top-left-radius: 10px;
    /* esquina arriba izquierda redondeada */
    border-top-right-radius: 10px;
    /* esquina arriba derecha redondeada */
}

/* la parte de abajo de la tarjeta con el nombre y boton */
.info {
    padding: 20px;
    /* espacio para que no este pegado */
}

/* el nombre de la carrera dentro de la tarjeta */
.info h3 {
    margin-bottom: 15px;
    /* espacio entre el nombre y el boton */
    font-size: 20px;
    /* tamaño de la letra */
}

/* el boton rojo de entrar a cada especialidad */
.btn-rojo {
    background-color: var(--btn-rojo);
    color: var(--texto-blanco);
}

/* cuando le pasas el mouse al boton rojo */
.btn-rojo:hover {
    background-color: var(--btn-rojo-hover);
}

/* diseño responsive para cuando se ve en celular */
@media(max-width:768px) {

    /* las tarjetas se acomodan una debajo de otra */
    .carta {
        width: 90%;
        /* mas anchas en celular */
        margin-right: 0;
        /* ya no necesitan espacio al lado */
        display: block;
        /* una debajo de otra */
        margin: 0 auto 30px auto;
        /* centradas con espacio abajo */
    }
}

/* pie de pagina del sitio */
footer {
    text-align: center;
    padding: 15px;
    background-color: var(--fondo-carta);
    color: var(--texto-gris);
    font-size: 14px;
    border-top: 2px solid var(--borde-carta);
    margin-top: 20px;
}

/* que figure no meta margenes ni rompa las tarjetas */
figure {
    margin: 0;
}

/* que el figcaption no cambie el texto de las especialidades */
figcaption {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 5px;
}

/* ---- menú de navegación y botón hamburguesa ---- */

/* el botón de las rayitas, solo se ve en cel */
#btn-hamburguesa {
    display: none;
    /* en escritorio no aparece */
    background: none;
    /* sin fondo */
    border: 2px solid var(--texto-blanco);
    /* borde blanco */
    color: var(--texto-blanco);
    /* icono blanco */
    font-size: 22px;
    /* tamaño del ícono */
    cursor: pointer;
    /* cursor de mano */
    padding: 4px 10px;
    /* un poco de relleno */
    border-radius: 4px;
    /* esquinas redondas */
}

/* los links del nav en escritorio van en linea */
#nav-links {
    display: inline-flex;
    /* uno al lado del otro */
    gap: 15px;
    /* espacio entre links */
    margin-top: 8px;
}

/* estilo de cada link del nav */
#nav-links a {
    color: var(--texto-blanco);
    /* color blanco */
    text-decoration: none;
    /* sin raya */
    font-weight: bold;
    /* negritas */
    padding: 6px 12px;
    /* espacio interno */
    border-radius: 4px;
    /* esquinas */
    transition: background-color 0.2s;
    /* animación suave al hover */
}

/* hover de los links del nav */
#nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    /* fondo semitransparente */
}

/* link activo (la página donde estoy) */
#nav-links a.activo {
    background-color: rgba(255, 255, 255, 0.25);
    /* más opaco */
    border-bottom: 2px solid var(--texto-blanco);
    /* rayita abajo */
}




/* aquí ajusto el diseño para cuando la pantalla es chiquita como de celular (menos de 768px de ancho) */
@media screen and (max-width: 768px) {

    /* hago visible el botón del menú de hamburguesa para poder darle tap */
    #btn-hamburguesa {
        /* le pongo inline-block para que se muestre en línea pero con márgenes */
        display: inline-block;
    }

    /* escondo la barra de navegación normal para que no abarque toda la pantalla del cel */
    #nav-links {
        /* oculto por defecto con display none */
        display: none;
        /* cambio la dirección a columna para que los botones salgan acostaditos uno bajo otro */
        flex-direction: column;
        /* hago que la caja tome todo el ancho disponible del 100% */
        width: 100%;
        /* le doy un margen arriba de 10px para que no se pegue tanto */
        margin-top: 10px;
        /* le pongo el fondo guinda que guardé en mis variables */
        background-color: var(--fondo-nav-cel);
        /* redondeo un poquito las esquinas a 6px para que se vea más lindo */
        border-radius: 6px;
        /* le doy un relleno arriba y abajo de 10px, a los lados nada (0) */
        padding: 10px 0;
    }

    /* esta clase se la pongo con js cuando abro el menú, así pasa a verse en formato flex */
    #nav-links.nav-abierto {
        /* vuelve a verse en pantalla pero ahora con flexbox */
        display: flex;
    }

    /* los botones sueltos (enlaces) los centro para que sea más fácil tocarlos */
    #nav-links a {
        /* centro el texto adentro de su caja */
        text-align: center;
        /* les doy 10px de padding para hacerlos botones más grandesitos al dedo */
        padding: 10px;
    }
}

/* esta regla la uso para pantallitas súper estrechas (de menos de 480px) */
@media screen and (max-width: 480px) {
    /* agarro el contenedor principal */
    .contenedor {
        /* le quito casi todo el padding para aprovechar al máximo el espacio en la pantallita */
        padding: var(--padding-normal, 15px);
    }
}

/* para los celulares que son un poco más anchos pero sin ser tablet chica (entre 481px y 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
    /* selecciono las tarjetas individuales de información */
    .carta {
        /* le digo que abarque todo el ancho disponible del 100% */
        width: 100%;
        /* le quito el margen derecho pasándolo a 0 para que no se desfase */
        margin-right: 0;
    }
}

/* para tablets normales o celulares si los acuestas horizontalmente (768 a 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* tomo el contenedor de la grilla de fotos/elementos */
    .grilla {
        /* hago que ocupe el 95% del ancho para no pegarlo tanto a los bordes de la tablet */
        width: 95%;
    }
}

/* ahora para las pantallas grandes como laptops, que empiecen a partir de 1024px */
@media screen and (min-width: 1024px) {
    /* agarro otra vez la grilla */
    .grilla {
        /* la achico al 80% porque en pantallas grandes se estira muchísimo y se ve raro */
        width: 80%;
    }

    /* modifico los subtítulos para la laptop */
    .subtitulo {
        /* como hay más espacio, crezco la letra a 28px para que resalte más */
        font-size: 28px;
    }
}

/* para los monitores de escritorio estándar de tamaño completo (arriba de 1200px) */
@media screen and (min-width: 1200px) {
    /* tomo la grilla */
    .grilla {
        /* la reduzco un poquito más a 75% del ancho para que la vista descanse */
        width: 75%;
    }
}

/* si de plano usan monitores ultra anchos enormes (1440px o más) */
@media screen and (min-width: 1440px) {
    /* agarro la grilla por última vez */
    .grilla {
        /* la fijo al 70% porque la pantalla es enorme y no quiero que parezca una tira larga */
        width: 70%;
    }
}

/* esto es por si alguien voltea su cel en horizontal y la altura queda muy corta (máximo 500px) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* atrapo la cabecera principal */
    .cabecera {
        /* reduzco su padding a 10px para que no tape todo lo demás de la vista */
        padding: 10px;
    }
}

/* por si a alguien se le da por imprimir esta página en papel */
@media print {
    /* agarro la cabecera del sitio */
    .cabecera {
        /* le quito el fondo oscuro poniéndole background transparente para ahorrar tinta */
        background-color: transparent;
        /* pongo la letra en negro fijo (black) para que sea súper legible en el papel */
        color: black;
    }
}

/* para relojes inteligentes o teles súper chiquitas viejas (máximo 280px) */
@media screen and (max-width: 280px) {
    /* selecciono la cabecera */
    .cabecera { 
        /* le doy un padding mínimo de 5px nada más para que no ahogue la pantallita */
        padding: 5px; 
    }
}

/* por si usan su tablet acostada viendo las cartas (mínimo 768px y formato horizontal landscape) */
@media screen and (min-width: 768px) and (orientation: landscape) {
    /* agarro las tarjetas */
    .carta { 
        /* les fijo una altura mínima de 200px para que se vean proporcionadas */
        min-height: 200px; 
    }
}

/* para los celulares que son larguísimos en altura tipo Z Flip (mínimo 900 de alto, máximo 500 de ancho) */
@media screen and (min-height: 900px) and (max-width: 500px) {
    /* modifico el contenedor general */
    .contenedor { 
        /* lo bajo un poco dándole un margin arriba de 50px para compensar su pantalla alargada */
        margin-top: 50px; 
    }
}

/* para las mini pantallas o netbooks (máxima altura de 400px) */
@media screen and (max-height: 400px) {
    /* selecciono el pie de página */
    footer { 
        /* reduzco su padding a 5px, de nuevo para salvar algo de espacio visual */
        padding: 5px; 
    }
}

/* para las tablets iPad Pro súper grandes (entre 1024px y 1366px de ancho) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    /* aplico a la grilla main */
    .grilla { 
        /* le aumento el espacio entre los elementos a 15px (gap) en la grilla flex/grid */
        gap: 15px; 
    }
}

/* si alguien le hace mucho zoom desde el navegador o tiene resoluciones raras (arriba de 150dpi) */
@media (min-resolution: 150dpi) {
    /* agarro todo el cuerpo de la página */
    body { 
        /* subo el tamaño base de la fuente al 105% para ayudar a leer mejor */
        font-size: 105%; 
    }
}