/* 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 {
    --color-oscuro: #0f172a;
    --blanco-fondo: white;
    --gris-marquito: #334155;
    --color-texto-claro: #e2e8f0;
    --borde-tarjeta-grueso: 2px solid #334155;
    --borde-tarjeta: 1px solid #334155;
    --margen-seccion: 30px;
    --padding-caja: 20px;
    --negro-terminal: black;
    --color-neon-default: #00ffcc;
    --fuente-codigo: monospace;
    --radio-bordes: 10px;
}

/* le quito todo lo que el navegador le pone de mas */
* {
    margin: 0;
    /* sin margenes */
    padding: 0;
    /* sin relleno */
    box-sizing: border-box;
    /* bordes no agrandan la caja */
}

/* cuerpo de las paginas de especialidades */
body {
    font-family: 'Inter', system-ui, sans-serif;
    /* letra arial o tipo codigo */
    /* monospace es por si arial falla */
    background-color: var(--color-oscuro);
    /* fondo azul oscuro usando mis variables */
    color: var(--blanco-fondo);
    /* texto blanco */
}

/* la barra de arriba de cada especialidad */
header {
    padding: 30px 10px;
    /* relleno grande arriba y abajo */
    text-align: center;
    /* texto centrado */
    font-size: 24px;
    /* letra grande */
    font-weight: bold;
    /* negritas */
    background-color: #800020;
    /* fondo color guinda */
    color: white;
    /* letras blancas */
    border-bottom: 4px solid #00ffcc;
    /* raya cyan por defecto abajo */
    /* este color se cambia dependiendo la carrera */
}

/* aqui cambiamos el color de la raya segun la especialidad */
/* cada pagina html tiene una clase diferente en el body */

/* programacion = cyan */
.progra header {
    border-bottom-color: #00ffcc;
}

/* contabilidad = verde */
.conta header {
    border-bottom-color: #22c55e;
}

/* recursos humanos = azul */
.recursos header {
    border-bottom-color: #3b82f6;
}

/* fuentes alternas de energia = amarillo */
.fuentes header {
    border-bottom-color: #eab308;
}

/* laboratorio clinico = rojo */
.lab header {
    border-bottom-color: #ef4444;
}

/* comercio internacional = morado */
.comer header {
    border-bottom-color: #a855f7;
}

/* ofimatica = cyan clarito */
.ofi header {
    border-bottom-color: #06b6d4;
}

/* la zona donde va la foto y el texto de cada carrera */
.zona-medio {
    padding: 30px;
    /* espacio alrededor */
    text-align: center;
    /* centramos foto y caja */
}

/* la imagen grande de la especialidad */
.zona-medio img {
    width: 100%;
    /* se adapta al ancho disponible */
    max-width: 400px;
    /* pero no crece mas de 400 pixeles */
    border: var(--borde-tarjeta-grueso);
    /* marco gris oscuro */
    border-radius: var(--radio-bordes);
    /* esquinas redondeadas */
    margin-bottom: var(--padding-caja);
    /* espacio abajo para separar del texto */
}

/* la caja oscura donde va la descripcion de la carrera */
.caja-texto {
    max-width: 600px;
    /* no muy ancha para que sea comodo leer */
    margin: 0 auto;
    /* centrada en la pantalla */
    text-align: left;
    /* texto pegado a la izquierda para leer bien */
    background-color: #1e293b;
    /* fondo gris oscuro */
    padding: var(--padding-caja);
    /* relleno interior */
    border-radius: var(--radio-bordes);
    /* esquinas redondas */
}

/* el titulo con efecto de terminal */
.titulo-maq {
    color: var(--color-neon-default);
    /* letra cyan neon */
    font-size: 22px;
    /* tamaño mediano */
    margin-bottom: 15px;
    /* espacio abajo */
    border-bottom: 1px dashed var(--color-neon-default);
    /* linea punteada cyan abajo */
    padding-bottom: 5px;
    /* espacio entre texto y linea punteada */
}

/* los parrafos de descripcion de la carrera */
.caja-texto p {
    margin-bottom: 15px;
    /* espacio entre parrafos */
    line-height: 1.5;
    /* mas espacio entre renglones para leer comodo */
    color: var(--color-texto-claro);
    /* letra gris clarita */
}

/* cajita negra de datos para las carreras que no son progra */
.cajita-datos {
    margin-top: 20px;
    /* espacio arriba */
    padding: 15px;
    /* relleno */
    background-color: var(--negro-terminal);
    /* fondo negro */
    border: var(--borde-tarjeta);
    /* borde gris */
    color: var(--color-texto-claro);
    /* letra gris clara */
    font-family: var(--fuente-codigo);
    /* letra tipo maquina de escribir */
}

/* la caja negra que simula una terminal de codigo */
.terminal {
    margin-top: var(--padding-caja);
    /* espacio arriba */
    background-color: var(--negro-terminal);
    /* fondo negro */
    border: var(--borde-tarjeta);
    /* borde gris */
}

/* la barrita de arriba de la terminal con las bolitas */
.nav-puntos {
    background-color: #1e293b;
    /* fondo gris */
    padding: 5px 10px;
    /* relleno chiquito */
    border-bottom: var(--borde-tarjeta);
    /* linea gris que separa del codigo */
}

/* las bolitas tipo mac de la barrita */
.bolit {
    width: 12px;
    /* ancho del cuadrito */
    height: 12px;
    /* alto igual para hacer cuadro */
    border-radius: 6px;
    /* la mitad del tamaño = hace circulo */
    display: inline-block;
    /* una al lado de otra */
    margin-right: 5px;
    /* espacio entre cada bolita */
}

/* colores de cada bolita */
/* roja como el boton de cerrar */
.roja {
    background-color: #ff5f56;
}

/* naranja como el de minimizar */
.nara {
    background-color: #ffbd2e;
}

/* verde como el de expandir */
.verd {
    background-color: #27c93f;
}

/* el codigo que va dentro de la terminal */
.terminal pre {
    padding: 15px;
    /* relleno interno */
    color: var(--color-neon-default);
    /* texto cyan neon */
    font-size: 14px;
    /* letra chiquita tipo codigo */
    font-family: var(--fuente-codigo);
    /* todas las letras del mismo ancho */
    overflow-x: auto;
    /* si el codigo es muy largo pone scroll horizontal */
}

/* el boton de volver al menu principal */
.btn-regresar {
    display: block;
    /* que ocupe todo el ancho */
    margin-top: var(--margen-seccion);
    /* espacio arriba */
    padding: 12px var(--padding-caja);
    /* relleno para que se vea grande */
    background-color: var(--color-neon-default);
    /* fondo cyan brillante */
    color: var(--negro-terminal);
    /* letras negras */
    font-weight: bold;
    /* negritas */
    text-align: center;
    /* texto centrado */
    text-decoration: none;
    /* sin raya de link */
    border-radius: 5px;
    /* esquinas redondeadas */
}

/* cuando le pasas el mouse al boton de volver */
.btn-regresar:hover {
    background-color: #00cca3;
    /* se oscurece un poco */
}

/* pie de pagina del sitio */
footer {
    text-align: center;
    padding: 15px;
    background-color: #1e293b;
    color: #94a3b8;
    font-size: 14px;
    border-top: 2px solid #334155;
    margin-top: 20px;
}

/* que figure no meta margenes extras */
figure {
    margin: 0;
}

/* pie de foto debajo de las imagenes */
figcaption {
    font-size: 13px;
    color: #64748b;
    margin-top: 5px;
}

/* =========================================================
    (MEDIA QUERIES)
   asi le digo a la pagina como acomodarse 
   ========================================================= */

/* si la pantalla es de un cel de los más comunes o un chiquito (hasta 480px de ancho) */
@media screen and (max-width: 480px) {
    /* tomo todo el bloque central donde va el contenido de texto fuerte */
    .zona-medio {
        /* modifico sus espacios interiores bajándolos a 15px de padding para ganar un poco de aire libre en la pantalla estrecha */
        padding: 15px;
    }

    /* apunto al gran título de la página web */
    .titulo-maq {
        /* me traigo el tamaño de la fuente para abajo a 18px para que la palabra no se quede cortada en la pantalla de un cel chico */
        font-size: 18px;
    }
}

/* aquí acomodo las medidas para iPads o tablets estándar (entre 481px y 1024px) */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    /* selecciono de vuelta el área limpia de en medio */
    .zona-medio {
        /* le abro un poquito más de relleno a 25px ya que la tablet tiene algo más de anchura nativa */
        padding: 25px;
    }

    /* voy sobre el titulo principal que adorna la cabecera del cuerpo */
    .titulo-maq {
        /* lo dejo de un tamaño bonito acomodándolo en 20px, se lee re lindo con la tablet a dos manos */
        font-size: 20px;
    }
}

/* para los celulares muy chiquititos (como el iPhone clásico), con máximo 360px de anchura */
@media screen and (max-width: 360px) {
    /* agarro directamente el cuadrito transparente de colorcito oscuro que contiene el texto de la especialidad */
    .caja-texto {
        /* le disminuyo su padding propio a 10px, aquí la meta es exprimir el espacio que apenas existe */
        padding: 10px;
    }
}

/* este lo tengo aquí para las vistas desde laptop común de escritorio (rango de 1025px a 1200px) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* pesco mi misma zona central del medio de mi HTML */
    .zona-medio {
        /* le meto unos generosos 40px completos de padding interior dándole respiro a los márgenes para que ya no roce con la pantalla grande de las laptops */
        padding: 40px;
    }
}

/* ahora para monitores amplios más grandesitos (de 1201px adelante) */
@media screen and (min-width: 1201px) {
    /* tomo de nuevo el bloque de la zona de en medio */
    .zona-medio {
        /* lo inflo todo usando su espaciado global de 50px por los 4 lados... aquí sí sobran píxeles así que es un aspecto enorme elegante en sitio web */
        padding: 50px;
    }

    /* y voy por la caja suela central donde está agrupado nuestro buen párrafo */
    .caja-texto {
        /* les limito a este bendito div principal un límite de max-width dejándolo fijo a 800px para que las líneas de letras no abarquen distancias kilométricas en estas pantallotototas */
        max-width: 800px;
    }
}

/* si me pongo romántica para la gente como yo que siempre escoge los modos "darks" nativos :) */
@media (prefers-color-scheme: dark) {
    /* atrapo todas mis queridísimas variables del raíz html :root */
    :root {
        /* sobreescribo el código del color oscuro global, dándole un tono #0a0f1d... este relaja la vista mucho, es un negrito con poquita azulidez */
        --color-oscuro: #0a0f1d;
    }
}

/* esto es de mis clases de accesibilidad... cuando se detectan las famosas retinas de alto pixelaje o 2dppx */
@media screen and (min-resolution: 2dppx) {
    /* agarro toditas las fotitos preciosas img cargadas allá afuera dentro de nuestra grilla grandota */
    .zona-medio img {
        /* lo único q quiero en sí es encogerles su propio re-border exterior forzándolo a 1px, si tienen doble pixel en resolución se les vuelve grueso horrorosamente de gratis */
        border-width: 1px;
    }
}

/* si cae un tel súper mini tipo 320 pxitos.. me achicho, perrrdddoooonnn :( */
@media screen and (max-width: 320px) {
    /* apunto aquí mismito sobre el letrero lindo de texto H1 de lo que estudiamos */
    .titulo-maq { 
        /* lo reduzco a amables pero justitos 16px para forzar que sus largas letritas puedan ser visualizadas comodísimamente enteras en esta pequeña ventanota ! */
        font-size: 16px; 
    }
}

/* monitores normales grandes enormes 1920pxitos */
@media screen and (min-width: 1920px) {
    /* saco directo a todo mi bloque del centro del cuerpo html */
    .zona-medio { 
        /* le voy a poner límite con sus máximos cerrados limitándole max-width a 1400px... no lo quiero infinito */
        max-width: 1400px; 
        /* me robo el mejor trick CSS: uso este div con los puritos valores "margin: 0 auto" logrando una caja centraditititita automáticamente */
        margin: 0 auto; 
    }
}

/* por si deciden tirarse a la cama y voltear al horizonte su smartphone o "landscape", desde los 896px abajito max */
@media screen and (max-width: 896px) and (orientation: landscape) {
    /* capturo mi amada y enorme bolsita de párrafo html del sitio .caja-texto */
    .caja-texto { 
        /* su relleno se clava y apaga en solitarios 8px, para ahorrar a toda costa el escasillo nivel de altura visible vertical de mi gente acostada de ladito ;3 */
        padding: 8px; 
    }
}

/* unas tabletonas grandes o largas larguísimas que lleguen más altas arriba de los mil píxeles */
@media screen and (min-height: 1000px) and (min-width: 768px) {
    /* la vuelvo a atrapar a todo content middle principal */
    .zona-medio { 
        /* ya de una vez deslizo todo echándole desde la cabecitita principal arriba un buen tirón extra: al margin top, poniéndole amables 5vh libres para balancearlo visual */
        margin-top: 5vh; 
    }
}

/* si está configurado para la gente de muy visual, un prefer contrast fuerte encendido directito general */
@media (prefers-contrast: high) {
    /* apreso nuevamente solitos títulos principales míos bonitos */
    .titulo-maq { 
        /* se los remalco con amor super ponchado como de libro de texto antiguo clavando un subrayadito intenso (una super line text decoration eh chulisima underline) jejeje */
        text-decoration: underline; 
    }
}