/* ========================================================================= CÁTEDRA FINANCIERA — Hoja de estilos principal Solo CSS3 puro. Comentado en español para fines didácticos. ========================================================================= */ /* ------------------------------------------------------------------------- 1) VARIABLES DE DISEÑO (sistema de diseño) Se definen en :root para poder reutilizarlas en todo el sitio con var(). ------------------------------------------------------------------------- */ :root { /* Paleta de colores */ --azul-petroleo: #003366; --azul-claro: #0073B1; --dorado: #C5A46D; --gris-claro: #F5F5F5; --blanco: #FFFFFF; /* Tipografías (cargadas desde Google Fonts en el ) */ --fuente-titulos: 'Montserrat', sans-serif; /* Para títulos */ --fuente-texto: 'Lato', sans-serif; /* Para el texto */ --fuente-citas: 'Merriweather', serif; /* Para citas */ /* Otros valores reutilizables */ --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.08); --transicion: 0.3s ease; /* Transiciones suaves de 0.3s */ --radio: 0; /* Bordes rectos (estilo rectangular) */ --ancho-maximo: 1100px; /* Ancho máximo del contenido */ } /* ------------------------------------------------------------------------- 2) RESET BÁSICO Y AJUSTES GLOBALES ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; /* El padding no agranda el ancho total */ margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Desplazamiento suave al usar anclas */ } body { font-family: var(--fuente-texto); color: #222; background-color: var(--blanco); line-height: 1.6; } /* Imágenes responsivas por defecto */ img { max-width: 100%; height: auto; display: block; } /* Enlaces sin subrayado por defecto */ a { text-decoration: none; color: var(--azul-claro); } /* Foco visible para navegación con teclado (accesibilidad) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; } /* ------------------------------------------------------------------------- 3) UTILIDADES DE MAQUETACIÓN ------------------------------------------------------------------------- */ /* Contenedor centrado con ancho máximo */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 1.5rem; } /* Variante más estrecha para textos largos (mejor legibilidad) */ .contenedor--estrecho { max-width: 760px; } /* ------------------------------------------------------------------------- 4) BOTONES Rectangulares, en azul claro, con hover en dorado. ------------------------------------------------------------------------- */ .boton { display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1rem; color: var(--blanco); background-color: var(--azul-claro); border: none; border-radius: var(--radio); padding: 0.85rem 1.75rem; cursor: pointer; transition: background-color var(--transicion), color var(--transicion); } .boton:hover, .boton:focus-visible { background-color: var(--dorado); color: var(--azul-petroleo); } /* Botón deshabilitado (por ejemplo, en el formulario de contacto) */ .boton:disabled { background-color: #b9c4cf; color: var(--blanco); cursor: not-allowed; } /* ------------------------------------------------------------------------- 5) ENCABEZADO (HEADER) Y NAVEGACIÓN ------------------------------------------------------------------------- */ .cabecera { background-color: var(--azul-petroleo); /* Encabezado en azul petróleo */ box-shadow: var(--sombra-suave); position: sticky; /* Se mantiene visible al hacer scroll */ top: 0; z-index: 100; } .cabecera__interior { display: flex; align-items: center; justify-content: space-between; min-height: 70px; } /* Logo del encabezado (imagen que ya incluye el texto de marca) */ .logo { display: inline-flex; align-items: center; /* Centra el logo respecto a los enlaces */ font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.4rem; color: var(--blanco); letter-spacing: 0.5px; transition: color var(--transicion); } .logo:hover, .logo:focus-visible { color: var(--dorado); } /* Imagen del logo */ .logo-img { height: 48px; width: auto; display: block; /* Evita el hueco de línea base bajo la imagen */ } /* En móvil el logo se reduce para convivir con el botón hamburguesa */ @media (max-width: 768px) { .logo-img { height: 38px; } } /* Lista de navegación */ .navegacion__lista { list-style: none; display: flex; gap: 1.5rem; } .navegacion__enlace { font-family: var(--fuente-titulos); font-weight: 500; color: var(--blanco); /* Enlaces en blanco sobre el azul */ padding: 0.4rem 0; border-bottom: 2px solid transparent; /* Espacio para el subrayado del hover */ transition: color var(--transicion), border-color var(--transicion); } .navegacion__enlace:hover, .navegacion__enlace:focus-visible { color: var(--dorado); /* Hover en dorado */ border-bottom-color: var(--dorado); } /* Enlace de la página actual */ .navegacion__enlace--activo { color: var(--dorado); /* Activo en dorado */ border-bottom-color: var(--dorado); } /* Botón hamburguesa (oculto en escritorio, se muestra en móvil) */ .hamburguesa { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: none; border: none; cursor: pointer; } .hamburguesa span { display: block; height: 3px; width: 100%; background-color: var(--blanco); /* Barras blancas sobre el azul */ border-radius: 2px; transition: transform var(--transicion), opacity var(--transicion); } /* ------------------------------------------------------------------------- 6) SECCIÓN HERO (portada de inicio) ------------------------------------------------------------------------- */ .hero { background-color: var(--azul-petroleo); color: var(--blanco); text-align: center; padding: 5rem 0; } .hero__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 2.8rem; margin-bottom: 1rem; } .hero__frase { font-family: var(--fuente-citas); font-style: italic; font-size: 1.3rem; color: var(--dorado); margin-bottom: 2rem; } /* ------------------------------------------------------------------------- 7) SECCIONES GENÉRICAS ------------------------------------------------------------------------- */ .seccion { padding: 3.5rem 0; } /* La sección de Cursos va pegada a Materias, como continuación: se elimina su padding superior para no sumarlo al inferior de Materias. */ #cursos { padding-top: 0; } /* Variante con fondo gris claro para alternar bloques */ .seccion--gris { background-color: var(--gris-claro); } .seccion__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.8rem; color: var(--azul-petroleo); margin-bottom: 1.25rem; text-align: center; } .seccion__texto { font-size: 1.05rem; margin-bottom: 1.25rem; } /* Encabezado superior de las páginas internas */ .encabezado-pagina { background-color: var(--azul-petroleo); /* Franja en azul petróleo */ padding: 2.5rem 0; border-bottom: 3px solid var(--dorado); /* Filo dorado para contraste */ } .encabezado-pagina__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 2.2rem; color: var(--blanco); /* Título en blanco */ } .encabezado-pagina__subtitulo { margin-top: 0.5rem; color: #e6edf5; /* Descripción en blanco (ligeramente atenuado) */ } /* ------------------------------------------------------------------------- 8) TARJETAS Fondo gris claro, sombra suave y borde azul petróleo. ------------------------------------------------------------------------- */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .tarjeta { display: block; background-color: var(--gris-claro); border: 1px solid var(--azul-petroleo); border-radius: var(--radio); box-shadow: var(--sombra-suave); padding: 1.75rem; color: inherit; transition: transform var(--transicion), box-shadow var(--transicion); } /* Solo las tarjetas que son enlaces "se elevan" al pasar el cursor */ a.tarjeta:hover, a.tarjeta:focus-visible { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } .tarjeta__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.25rem; color: var(--azul-petroleo); margin-bottom: 0.75rem; } .tarjeta__texto { font-size: 0.98rem; margin-bottom: 1rem; } .tarjeta__enlace { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-claro); } /* ------------------------------------------------------------------------- 9) ARTÍCULO Y CITAS ------------------------------------------------------------------------- */ .articulo__subtitulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.3rem; color: var(--azul-petroleo); margin: 1.5rem 0 0.75rem; } /* Cita destacada con la tipografía Merriweather */ .cita { font-family: var(--fuente-citas); font-style: italic; font-size: 1.2rem; color: var(--azul-petroleo); border-left: 4px solid var(--dorado); background-color: var(--gris-claro); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } /* ------------------------------------------------------------------------- 10) BLOQUE "PRÓXIMAMENTE" (simuladores) ------------------------------------------------------------------------- */ .proximamente { text-align: center; background-color: var(--gris-claro); border: 1px dashed var(--azul-petroleo); padding: 3rem 1.5rem; } .proximamente__etiqueta { display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; color: var(--blanco); background-color: var(--dorado); padding: 0.35rem 1rem; margin-bottom: 1rem; } /* ------------------------------------------------------------------------- 11) FORMULARIO DE CONTACTO ------------------------------------------------------------------------- */ /* Aviso informativo (formulario aún no activo) */ .aviso { background-color: var(--gris-claro); border-left: 4px solid var(--azul-claro); padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 0.98rem; } .formulario { display: flex; flex-direction: column; gap: 1.25rem; } .campo { display: flex; flex-direction: column; } .campo__etiqueta { font-family: var(--fuente-titulos); font-weight: 600; margin-bottom: 0.4rem; color: var(--azul-petroleo); } /* Campos de texto (input y textarea) */ .campo__control { font-family: var(--fuente-texto); font-size: 1rem; padding: 0.75rem; border: 1px solid #ccc; border-radius: var(--radio); background-color: var(--blanco); transition: border-color var(--transicion); } .campo__control:focus { border-color: var(--azul-claro); } /* Campos deshabilitados (vista previa) */ .campo__control:disabled { background-color: #f0f0f0; cursor: not-allowed; } /* Casilla de consentimiento: etiqueta al lado de la casilla */ .campo--checkbox { flex-direction: row; align-items: flex-start; gap: 0.6rem; } .campo__checkbox { margin-top: 0.35rem; width: 18px; height: 18px; flex-shrink: 0; } .campo__etiqueta-checkbox { font-size: 0.95rem; } /* ------------------------------------------------------------------------- 11b) PÁGINA DE ERROR 404 ------------------------------------------------------------------------- */ .error404 { text-align: center; padding: 2rem 0; } .error404__codigo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 5rem; line-height: 1; color: var(--dorado); margin-bottom: 0.5rem; } /* ------------------------------------------------------------------------- 12) PIE DE PÁGINA (FOOTER) ------------------------------------------------------------------------- */ .pie { background-color: var(--azul-petroleo); color: var(--blanco); padding: 2.5rem 0; text-align: center; } .pie__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.2rem; margin-bottom: 0.5rem; } .pie__copy { font-size: 0.9rem; color: #cfd8e3; margin-bottom: 1rem; } .pie__enlaces { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .pie__enlace { color: var(--dorado); font-size: 0.9rem; transition: color var(--transicion); } .pie__enlace:hover, .pie__enlace:focus-visible { color: var(--blanco); } /* ========================================================================= 12b) LANDING DE INICIO (solo se usa en index.html) ========================================================================= */ /* Variante de título alineado a la izquierda (para columnas de texto) */ .seccion__titulo--izq { text-align: left; } /* Acciones centradas debajo de una sección (p. ej. botón "Ver artículos") */ .seccion__acciones { text-align: center; margin-top: 2.5rem; } /* ---- 1) HÉROE CON IMAGEN DE FONDO A TODO EL ANCHO ---- */ /* Una sola imagen detrás de todo; encima va un degradado y, sobre él, la foto del profesor (izquierda) y el texto (centro). */ .hero-landing { position: relative; /* Referencia para la capa de superposición */ width: 100%; min-height: 560px; /* Alto del héroe (~560px), responsive */ background-color: var(--azul-petroleo); /* Respaldo si la imagen no carga */ background-image: url('../assets/img/hero-fondo.png'); background-repeat: no-repeat; background-size: cover; /* La imagen cubre TODO el héroe */ background-position: center; /* Centrada */ color: var(--blanco); overflow: hidden; /* Evita que la foto se desborde */ } /* Degradado horizontal de superposición (azul petróleo #003366): más oscuro a la izquierda (donde van el profesor y el texto) y casi transparente a la derecha, para que se vea la imagen de fondo. */ .hero-landing::before { content: ""; position: absolute; inset: 0; /* Cubre todo el héroe */ background-image: linear-gradient( to right, rgba(0, 51, 102, 0.55) 0%, rgba(0, 51, 102, 0.45) 45%, rgba(0, 51, 102, 0.12) 100% ); z-index: 0; } .hero-landing__grid { position: relative; /* Por encima de la capa */ z-index: 1; min-height: 560px; /* Acorde con el alto del héroe */ display: grid; grid-template-columns: 1.15fr 1.1fr; /* Algo más de espacio para la foto */ align-items: end; /* Ancla la foto a la parte INFERIOR del héroe */ gap: 3rem; } /* Contenedor de la foto: ocupa el alto del héroe y recorta por abajo. La imagen se alinea arriba (object-position: top), de modo que el corte inferior quede a la altura del pecho (se ve del rostro al pecho). */ .hero-landing__foto { align-self: end; /* Pegada al borde inferior */ height: 560px; /* Acorde con el alto del héroe */ overflow: hidden; } .hero-landing__foto img { width: 100%; max-width: 500px; /* Foto más prominente */ height: 100%; object-fit: cover; /* Escala la foto para llenar el alto */ object-position: top center; /* Muestra desde la cabeza hacia abajo */ margin: 0 auto; display: block; } /* Columna de texto: queda centrada verticalmente en el héroe */ .hero-landing__texto { align-self: center; padding: 2.5rem 0; } /* Sombra de texto sutil para mejorar la lectura sobre la imagen */ .hero-landing__nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 3.4rem; /* Título principal grande */ line-height: 1.1; margin-bottom: 0.6rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .hero-landing__subtitulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.5rem; /* Subtítulo mediano */ color: var(--dorado); margin-bottom: 1rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .hero-landing__frase { font-family: var(--fuente-citas); font-style: italic; font-size: 1.3rem; /* Frase legible */ color: #ffffff; margin-bottom: 1.75rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } /* ---- 2) GRILLA DE MATERIAS ---- */ .materias { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 por fila en escritorio */ gap: 1rem; /* Algo más juntas */ margin-top: 1.5rem; } /* Tarjetas compactas: icono a la IZQUIERDA del texto, fila horizontal. Azul petróleo con degradado sutil y esquinas redondeadas. */ .materia { display: flex; /* Icono + texto en una fila */ align-items: center; gap: 0.7rem; background-image: linear-gradient(135deg, #00407f 0%, var(--azul-petroleo) 100%); border: none; /* Sin borde rígido */ border-radius: 12px; /* Esquinas redondeadas */ box-shadow: var(--sombra-suave); /* Sombra suave */ padding: 0.7rem 0.9rem; /* Menos alto y ancho (más compacta) */ text-align: left; transition: transform var(--transicion), box-shadow var(--transicion), background-image var(--transicion); } .materia:hover { background-image: linear-gradient(135deg, #0086cf 0%, var(--azul-claro) 100%); /* Degradado azul claro */ transform: translateY(-4px); /* y se eleva un poco */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20); } /* Icono SVG en BLANCO (hereda el color mediante currentColor) */ .materia__icono { width: 30px; height: 30px; color: var(--blanco); flex-shrink: 0; /* No se encoge junto al texto */ } .materia__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; /* Tipografía legible (sin reducir) */ line-height: 1.2; color: var(--blanco); /* Texto en blanco */ overflow-wrap: break-word; /* Títulos largos envuelven sin desbordar */ min-width: 0; /* Permite que el texto se ajuste dentro del flex */ } /* ---- Ítem especial: filosofía ligada a Finanzas Sostenibles ---- Estilo DISTINTO: fondo claro, icono verde y texto azul petróleo. */ .materia-especial { display: flex; align-items: center; justify-content: center; gap: 0.9rem; max-width: 520px; margin: 1.25rem auto 0; /* Centrado debajo de la grilla */ background-color: var(--blanco); border: 1px solid #d6e3d0; /* Verde muy tenue */ border-radius: 12px; box-shadow: var(--sombra-suave); padding: 1rem 1.5rem; transition: transform var(--transicion), box-shadow var(--transicion); } .materia-especial:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* Icono de hoja en verde */ .materia-especial__icono { width: 36px; height: 36px; color: #2e8b57; /* Verde */ flex-shrink: 0; } .materia-especial__nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.1rem; color: var(--azul-petroleo); /* Texto en azul petróleo */ } /* Variante azul de la tarjeta especial (Cursos y formación empresarial). Mismo formato que la original; solo cambia el verde por azul. */ .materia-especial--cursos { border-color: #c5d4e6; /* Azul muy tenue en vez del verde */ } .materia-especial--cursos .materia-especial__icono { color: var(--azul-petroleo); /* Icono azul en vez de verde */ } /* ---- 3 y 4) DOS BLOQUES LADO A LADO (Sobre el profesor + Publicaciones) ---- */ .bloques-dobles { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas iguales en escritorio */ gap: 3rem; align-items: start; } /* Entrevistas: va debajo de "Últimas publicaciones", con aire de separación. */ .bloque--entrevistas { margin-top: 2.5rem; } /* Botón alineado a la izquierda dentro de un bloque */ .seccion__acciones--izq { text-align: left; margin-top: 1.5rem; } /* Foto real (escena): ocupa el ancho del bloque con esquinas suaves y sombra */ .sobre__foto img { width: 100%; margin-bottom: 1.25rem; border-radius: 6px; box-shadow: var(--sombra-suave); display: block; } /* Lista con viñetas personalizadas en dorado */ .lista-viñetas { list-style: none; margin: 1.25rem 0 1.75rem; } .lista-viñetas li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; } .lista-viñetas li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background-color: var(--dorado); border-radius: 50%; } /* Publicaciones: lista vertical de tarjetas horizontales (imagen + texto) */ .publicaciones { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; } .publicacion { background-color: var(--blanco); border: 1px solid #dfe4e9; border-radius: 8px; box-shadow: var(--sombra-suave); display: flex; /* Imagen a la izquierda, texto a la derecha */ overflow: hidden; color: inherit; /* Si la tarjeta es un enlace, no hereda el azul */ text-decoration: none; transition: transform var(--transicion), box-shadow var(--transicion); } .publicacion:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } /* Imagen de marcador (recuadro gris con texto centrado) */ .publicacion__imagen { flex-shrink: 0; width: 110px; background-color: #e4e7ea; color: #8a939b; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Si el recuadro lleva una imagen real, la rellena con recorte limpio */ .publicacion__imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .publicacion__cuerpo { padding: 1.1rem 1.25rem; } .publicacion__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.1rem; color: var(--azul-petroleo); margin-bottom: 0.4rem; } .publicacion__resumen { font-size: 0.95rem; } /* Etiqueta discreta "Próximamente" en tarjetas de adelanto */ .publicacion__etiqueta { font-size: 0.85rem; color: #888; } /* ---- 5) DOS TARJETAS GRANDES CON IMAGEN DE FONDO ---- */ .destacadas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* La tarjeta usa la imagen de fondo (definida en el HTML con style) */ .destacada { position: relative; background-size: cover; background-position: center; border-radius: 12px; overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; /* El contenido se apoya abajo */ box-shadow: var(--sombra-suave); } /* Capa oscura para que el texto blanco se lea sobre la imagen */ .destacada::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( to top, rgba(0, 51, 102, 0.85) 0%, rgba(0, 51, 102, 0.45) 60%, rgba(0, 51, 102, 0.30) 100% ); } .destacada__contenido { position: relative; /* Por encima de la capa oscura */ z-index: 1; padding: 2rem; color: var(--blanco); } .destacada__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.5rem; color: var(--blanco); margin-bottom: 0.6rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .destacada__texto { margin-bottom: 1.25rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ========================================================================= 12c) PÁGINAS ADICIONALES (Artículos, Trayectoria, Simuladores, Clases) ========================================================================= */ /* Grilla responsive genérica de tarjetas */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* ------------------------------------------------------------------------- REFERENCIAS BIBLIOGRÁFICAS (APA) Sangría francesa para las entradas y encabezado de bloque temático. ------------------------------------------------------------------------- */ .ref { margin: 0 0 .65em; padding-left: 1.6em; text-indent: -1.6em; line-height: 1.5; } .ref-bloque { margin: 1.8em 0 .9em; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; color: var(--azul-petroleo); } /* Asterisco que marca las lecturas centrales y su leyenda */ .ref-marca { color: var(--dorado); font-weight: 700; margin-right: .3em; } .leyenda-ref { font-size: .92rem; color: #5A6B7B; margin: 0 0 1.4em; padding-left: 1.6em; } /* Tarjeta genérica (artículo / simulador) */ .card { display: flex; flex-direction: column; background-color: var(--blanco); border: 1px solid #dfe4e9; border-radius: 8px; overflow: hidden; box-shadow: var(--sombra-suave); transition: transform var(--transicion), box-shadow var(--transicion); } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } /* Variante: tarjeta enteramente clicable (todo el bloque es el enlace). Se define después de .card para que gane en la cascada. */ .card--enlace { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } .card--enlace:hover, .card--enlace:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22, 50, 79, 0.12); border-color: var(--dorado); } .card--enlace .card__titulo { color: var(--azul-petroleo); } /* Imagen de marcador (recuadro gris con texto centrado) */ .card__media { height: 160px; background-color: #e4e7ea; color: #8a939b; font-family: var(--fuente-titulos); font-weight: 600; display: flex; align-items: center; justify-content: center; } .card__cuerpo { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.5rem; flex-grow: 1; /* Empuja el enlace/botón hacia abajo */ } .card__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.15rem; color: var(--azul-petroleo); } .card__texto { font-size: 0.98rem; } /* Enlace tipo "Leer más" */ .card__enlace { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-claro); margin-top: auto; /* Alineado al fondo de la tarjeta */ transition: color var(--transicion); } .card__enlace:hover, .card__enlace:focus-visible { color: var(--dorado); } /* Acciones del artículo de investigación (fila de botones) */ .articulo__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1rem; } /* Botón destacado: acento dorado (resalta frente a los azules) */ .boton--destacado { background-color: var(--dorado); color: var(--azul-petroleo); } .boton--destacado:hover, .boton--destacado:focus-visible { background-color: var(--azul-petroleo); color: var(--blanco); } /* Fila de enlaces de descarga dentro de la tarjeta */ .card__acciones { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: auto; /* Empuja las acciones hacia el fondo */ } /* Botón dentro de la tarjeta, anclado abajo y alineado a la izquierda */ .card .boton { margin-top: 1rem; align-self: flex-start; } /* ---- Mosaico de clases grabadas ---- */ .mosaico { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .clase { background-color: var(--blanco); border: 1px solid #dfe4e9; border-radius: 8px; overflow: hidden; box-shadow: var(--sombra-suave); transition: transform var(--transicion), box-shadow var(--transicion); } .clase:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } /* Miniatura de marcador con el botón de "play" encima */ .clase__thumb { position: relative; height: 160px; background-color: #d7dde3; display: flex; align-items: center; justify-content: center; } .clase__play { width: 54px; height: 54px; border-radius: 50%; background-color: rgba(0, 51, 102, 0.85); color: var(--blanco); display: flex; align-items: center; justify-content: center; transition: background-color var(--transicion); } .clase:hover .clase__play { background-color: var(--azul-claro); } .clase__play svg { width: 24px; height: 24px; } .clase__cuerpo { padding: 1rem 1.25rem; } .clase__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; color: var(--azul-petroleo); margin-bottom: 0.3rem; } .clase__duracion { font-size: 0.85rem; color: #666; } /* ---- Botón "Volver al inicio" (debajo de la franja de título) ---- */ .volver-barra { padding: 1.25rem 0 0; } .boton-volver { display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.95rem; color: var(--azul-petroleo); background-color: var(--gris-claro); border: 1px solid var(--azul-petroleo); border-radius: 6px; padding: 0.5rem 1.1rem; transition: background-color var(--transicion), color var(--transicion); } .boton-volver:hover, .boton-volver:focus-visible { background-color: var(--azul-petroleo); color: var(--blanco); } /* ---- Tres botones grandes de acceso en las páginas de materia ---- */ .materia-accesos { display: grid; grid-template-columns: repeat(3, 1fr); /* En fila en escritorio */ gap: 1rem; margin-top: 1.75rem; } /* Botones grandes, centrados */ .materia-accesos .boton { text-align: center; padding: 1.25rem 1rem; font-size: 1.05rem; } /* En móvil se apilan en una columna */ @media (max-width: 768px) { .materia-accesos { grid-template-columns: 1fr; } } /* ---- Marca de agua de la introducción (distinta por materia) ---- La imagen se define por página con la variable --marca-agua (estilo inline). Nunca se edita la imagen: solo se referencia mediante un pseudo-elemento. */ .intro-materia { position: relative; } .intro-materia::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 300px; height: 300px; background: no-repeat center / contain; background-image: var(--marca-agua); opacity: 0.08; pointer-events: none; z-index: 0; } /* El contenido va por encima de la marca de agua */ .intro-materia > * { position: relative; z-index: 1; } /* En móvil se reduce; si la pantalla es muy pequeña, se prioriza la lectura */ @media (max-width: 768px) { .intro-materia::before { width: 180px; height: 180px; opacity: 0.07; } } @media (max-width: 480px) { .intro-materia::before { display: none; /* En pantallas muy pequeñas no debe estorbar al texto */ } } /* ---- Accesos tipo tarjeta (estética de las materias del inicio) ---- */ .accesos-materia { display: grid; grid-template-columns: repeat(3, 1fr); /* En fila en escritorio */ gap: 1rem; margin-top: 1.75rem; } .acceso-materia { display: flex; align-items: center; gap: 0.7rem; background-image: linear-gradient(135deg, #003366 0%, #0a4a7a 100%); /* Degradado sutil */ border-radius: 12px; box-shadow: var(--sombra-suave); padding: 1rem 1.1rem; color: var(--blanco); transition: transform var(--transicion), box-shadow var(--transicion), background-image var(--transicion); } .acceso-materia:hover, .acceso-materia:focus-visible { background-image: linear-gradient(135deg, #0a4a7a 0%, var(--azul-claro) 100%); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20); } /* Icono blanco a la izquierda del texto */ .acceso-materia__icono { width: 30px; height: 30px; color: var(--blanco); flex-shrink: 0; } .acceso-materia__texto { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; color: var(--blanco); } /* En móvil se apilan en una columna */ @media (max-width: 768px) { .accesos-materia { grid-template-columns: 1fr; } } /* ---- Trayectoria / CV (líneas de experiencia y docencia) ---- */ .cv-lista { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; } .cv-item { background-color: var(--blanco); border: 1px solid #dfe4e9; border-left: 4px solid var(--dorado); /* Acento dorado */ border-radius: 0 8px 8px 0; box-shadow: var(--sombra-suave); padding: 1.1rem 1.4rem; } .cv-item__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.1rem; color: var(--azul-petroleo); margin-bottom: 0.2rem; } .cv-item__periodo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.82rem; color: var(--dorado); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .cv-item__texto { font-size: 0.98rem; } /* ---- Material bibliográfico (imagen, audio y citas) ---- */ /* Imagen/infografía al ancho del contenido */ .media-full { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--sombra-suave); display: block; } /* Reproductor de audio a todo el ancho */ .audio-curso { width: 100%; margin-top: 0.5rem; } /* Lista de lecturas recomendadas (citas) */ .lista-citas { margin: 0.5rem 0 0 1.2rem; } .lista-citas li { margin-bottom: 0.6rem; line-height: 1.5; } /* ---- Contacto (tarjeta de correo + perfiles) ---- */ .contacto-tarjeta { max-width: 520px; margin: 0 auto; text-align: center; background-color: var(--blanco); border: 1px solid #dfe4e9; border-top: 4px solid var(--dorado); /* Acento dorado superior */ border-radius: 10px; box-shadow: var(--sombra-suave); padding: 2.5rem 2rem; } .contacto__icono { display: block; width: 48px; height: 48px; color: var(--azul-petroleo); margin: 0 auto 1rem; } .contacto__correo { display: inline-block; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.4rem; color: var(--azul-petroleo); word-break: break-word; transition: color var(--transicion); } .contacto__correo:hover, .contacto__correo:focus-visible { color: var(--dorado); } .contacto__nota { max-width: 560px; margin: 1.5rem auto 0; text-align: center; color: #555; } /* Perfiles académicos y profesionales */ .perfiles { margin-top: 2.75rem; text-align: center; } .perfiles__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.2rem; color: var(--azul-petroleo); margin-bottom: 0.5rem; } .perfiles__estado { display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blanco); background-color: var(--dorado); padding: 0.2rem 0.7rem; border-radius: 999px; margin-bottom: 1.25rem; } .perfiles__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .perfil { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border: 1px solid var(--azul-petroleo); border-radius: 8px; background-color: var(--gris-claro); color: var(--azul-petroleo); font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.95rem; transition: background-color var(--transicion), color var(--transicion); } .perfil svg { width: 20px; height: 20px; } /* Perfiles aún sin URL: se ven preparados pero no activos */ .perfil[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; } .perfil:not([aria-disabled="true"]):hover, .perfil:not([aria-disabled="true"]):focus-visible { background-color: var(--azul-petroleo); color: var(--blanco); } /* Fila de perfiles del profesor (iconos redondos). Namespace propio para no colisionar con el bloque .perfiles de contacto.html. Ampliable: basta añadir más dentro de .perfiles-social (Google Scholar, ResearchGate, ORCID…). */ .perfiles-social { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .perfiles-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d6dde5; color: var(--azul-petroleo); background: #fff; transition: transform .15s, background .15s, border-color .15s; } .perfiles-social a:hover { transform: translateY(-2px); background: var(--azul-petroleo); color: #fff; border-color: var(--azul-petroleo); } .perfiles-social a svg { width: 20px; height: 20px; } /* ========================================================================= 12d) CÁTEDRA — ÁREAS DE CONOCIMIENTO (tarjetas expandibles
) Namespace propio (.catedra-areas / .area-card) para no afectar otras secciones. ========================================================================= */ .catedra-areas { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */ gap: 1.5rem; align-items: start; /* Cada tarjeta crece sola al expandir */ margin-top: 1.5rem; } .area-card { background-color: var(--blanco); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-suave); } /* Encabezado clicable (summary) con degradado azul petróleo → azul */ .area-card__head { display: block; background-image: linear-gradient(135deg, #003366 0%, #0a4a7a 100%); color: var(--blanco); padding: 1.4rem; cursor: pointer; list-style: none; /* Oculta el marcador por defecto */ transition: filter var(--transicion); } .area-card__head::-webkit-details-marker { display: none; } .area-card__head:hover { filter: brightness(1.08); } .area-card__head:focus-visible { outline: 3px solid var(--dorado); outline-offset: -3px; } .area-card__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; } .area-card__corta { font-size: 0.95rem; color: #e6edf5; margin-bottom: 0.9rem; } /* Indicador "Ver cursos" + chevron que rota al abrir */ .area-card__ver { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dorado); } .area-card__ver svg { width: 16px; height: 16px; transition: transform var(--transicion); } .area-card[open] .area-card__ver svg { transform: rotate(180deg); } /* Cuerpo expandible (interior) */ .area-card__cuerpo { padding: 1.4rem; } .area-card__explicacion { font-size: 0.98rem; color: #444; margin-bottom: 1.2rem; } .area-cursos__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--azul-petroleo); margin-bottom: 0.7rem; } .area-cursos { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; } .area-curso__nombre { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-claro); } a.area-curso__nombre:hover, a.area-curso__nombre:focus-visible { color: var(--dorado); } .area-curso__nombre--proximo { color: #9aa3ad; } /* Atenuado, sin enlace */ .area-curso__desc { margin-top: 0.15rem; font-size: 0.92rem; color: #555; } .area-curso--proximo .area-curso__desc { color: #8a929b; } .area-desarrollo { font-style: italic; color: #555; } /* Etiquetas/badges */ .badge { display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.14rem 0.55rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; } .badge--proximo { background-color: var(--gris-claro); color: #6b6b6b; border: 1px solid #d4d9de; } .badge--desarrollo { background-color: var(--dorado); color: var(--azul-petroleo); } /* Responsive de la grilla de áreas */ @media (max-width: 992px) { .catedra-areas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .catedra-areas { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 13) DISEÑO RESPONSIVE ------------------------------------------------------------------------- */ /* --- Tablet: hasta 992px --- */ @media (max-width: 992px) { /* Materias: de 4 a 2 columnas */ .materias { grid-template-columns: repeat(2, 1fr); } /* Los dos bloques (Sobre el profesor + Publicaciones) se apilan */ .bloques-dobles { grid-template-columns: 1fr; gap: 2.5rem; } } /* --- Móvil: hasta 768px (aquí aparece el menú hamburguesa) --- */ @media (max-width: 768px) { /* Se muestra el botón hamburguesa */ .hamburguesa { display: flex; } /* El menú se oculta por defecto y se despliega en vertical */ .navegacion__lista { position: absolute; top: 70px; /* Justo debajo del header */ left: 0; right: 0; flex-direction: column; gap: 0; background-color: var(--azul-petroleo); /* Mismo azul que el encabezado */ box-shadow: var(--sombra-suave); /* Oculto: se mostrará al añadir la clase con JavaScript */ display: none; } /* Clase que añade el JavaScript para mostrar el menú */ .navegacion__lista.abierto { display: flex; } .navegacion__lista li { border-top: 1px solid rgba(255, 255, 255, 0.15); /* Separador tenue sobre el azul */ } .navegacion__enlace { display: block; padding: 1rem 1.5rem; border-bottom: none; } /* Hero un poco más compacto en móvil */ .hero { padding: 3.5rem 0; } .hero__titulo { font-size: 2rem; } .hero__frase { font-size: 1.1rem; } /* ---- Ajustes de la landing en móvil ---- */ /* Héroe: una sola columna (foto arriba, texto debajo) y texto centrado */ .hero-landing { padding: 2.5rem 0; /* Aire arriba y abajo al apilar */ aspect-ratio: auto; /* Quitamos la forma de banner en móvil */ min-height: 380px; /* Altura mínima menor en móvil */ max-height: none; /* Puede crecer según el contenido apilado */ background-position: center bottom; /* Centrado abajo en pantallas pequeñas */ } .hero-landing__grid { grid-template-columns: 1fr; align-items: stretch; /* Ya no anclamos a la base */ gap: 1.5rem; height: auto; /* La altura la marca el contenido */ text-align: center; } /* Foto algo más baja en móvil; sigue mostrando del rostro al pecho */ .hero-landing__foto { align-self: auto; height: 320px; } .hero-landing__foto img { max-width: 260px; } .hero-landing__nombre { font-size: 2.3rem; /* Título grande pero ajustado a móvil */ } .hero-landing__subtitulo { font-size: 1.25rem; } .hero-landing__frase { font-size: 1.1rem; } /* Materias: 1 columna */ .materias { grid-template-columns: 1fr; } /* Las tarjetas destacadas se apilan en una columna */ .destacadas { grid-template-columns: 1fr; } } /* --- Ajustes responsive adicionales (pasada de auditoría) --- */ @media (max-width: 768px) { /* Títulos de página y de sección: proporcionales y sin cortes feos */ .encabezado-pagina__titulo { font-size: 1.7rem; overflow-wrap: break-word; } .seccion__titulo { font-size: 1.5rem; } .hero-landing__nombre { overflow-wrap: break-word; } /* Tarjeta especial "Economía Aplicada a Finanzas" a ancho completo */ .materia-especial { max-width: none; width: 100%; } /* Acciones del artículo (investigación): apiladas a ancho completo */ .articulo__acciones { flex-direction: column; align-items: stretch; } .articulo__acciones .boton, .boton--destacado { width: 100%; } /* Acciones dentro de tarjetas (artículos): apiladas */ .card__acciones { flex-direction: column; gap: 0.5rem; } .card .boton { width: 100%; } /* Área táctil cómoda (>=44px) en botones y enlace de regreso */ .boton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .boton-volver { padding: 0.7rem 1.2rem; } } /* --- Pantallas muy pequeñas (móvil estrecho) --- */ @media (max-width: 480px) { .hero-landing__nombre { font-size: 1.9rem; } .encabezado-pagina__titulo { font-size: 1.5rem; } }