/* para que los comentarios en este CSS se vean correctamente cuando se inspecciona el codigo en todos los navegadores */
@charset "utf-8";
/* selector universal */
* {
/* paraq ancho de TODOS los elementos HTML se calculen hasta bordes y NO solo por contenidos,cambiando lo que viene predeterminado */
box-sizing: border-box; }
/* -------------------
reglas generales
------------------- */
html {
scroll-behavior: smooth;}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
background-color: #fffaf6; }
p {
text-wrap: pretty; }
h1, h2, h3, h4, h5 {
line-height: 1.1; /* parecido a interlineado, valor 1 equivaldria a interlineado igual al tamaño de la tipografia */
text-wrap: balance; /* si ocupa mas de una linea, se equilibran los anchos de esas lineas */ }
img {
max-width: 100%; /* mediran como maximo, el tamaño del bloque html que las contiene */ }
a { /* vinculos */
text-decoration: none; /* sin subrayado */
font-weight: bold;
color:#ffffff;
}
ul, ol { /* listas */
list-style: none; /* elimina bullets, numeros etc. */
padding: 0; /* retira el relleno izquierdo predeterminado */ }
/* cajas contenedoras centradas y con ancho maximo */
.contenedora {
max-width: 93rem;
margin-inline: auto; /* centrado horizontal (si sobra espacio, lo distribuye a izquierda y derecha por igual) */ }
/*------------------------
caja modal de diálogo
--------------------------*/
dialog {
background-color: hsl(0, 0%, 100%);
inline-size: min(20em, 80%);
border: solid 2px #362983;
border-radius: .5em;
box-shadow: 0 0 0 0 hsl(0 0% 10%);
padding: .5em;
position: fixed;
inset: 0;
margin: auto;
transform: translateY(-100vh);
transition: .5s;
}
dialog.visible {
box-shadow: 0 10px 10px 0 hsl(0 0% 0% / 20%);
transform: translateY(0);
transition: .5s;
transition-delay: .5s;
}
dialog::backdrop {
opacity: 0;
}
dialog.visible::backdrop {
opacity: 1;
transition: 1s;
background-image:
linear-gradient(
135deg,
rgba(255, 77, 31, 0.75),
rgba(252, 158, 211, 0.75),
rgba(54, 41, 131, 0.75));
}
form {
display: grid;
gap: 1em;
padding: 1em;
}
.form__grupo {
position: relative;
color: hsl(0 0% 35% / 50%);
}
.form__input {
width: 100%;
background: white;
color: hsl(0 0% 50%);
font-size: 1rem;
padding: 1em .5em;
border: solid 1px #362983;
border-radius: .25em;
outline: none;
font-family: inherit;
transition: 1s;
}
.form__input:focus {
color: #362983;
font-weight: 700;
}
.form__label {
color: #362983;
position: absolute;
top: 0;
left: .5em;
transform: translateY(.5em);
transition:
transform .5s,
color .3s,
padding .5s;
background-color: hsl(0 0% 100%);
padding: 0;
}
:is(.form__input:not(:placeholder-shown),
.form__input:focus) {
color: #362983;
}
:is(.form__input:not(:placeholder-shown),
.form__input:focus) + .form__label {
transform: translateY(-.6em) scale(.7);
transform-origin: left top;
padding: 4px;
color: #362983;
}
.form__submit {
background-color: #362983;
color: hsl(0 0% 100%);
font-family: inherit;
font-size: inherit;
padding: .25em 1em;
inline-size: max-content;
border: none;
border-radius: 1rem;
outline: none;
justify-self: end;
transition: .5s;
}
.form__submit:focus,
.form__submit:hover {
background-color: #362983;
}
.form-botones {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
/* --------------------
componente superior
y sus contenidos
-------------------- */
header,
footer {
background:#362983;
color: #fde8d7; }
header {
display: flex; /* para alinear los elementos */
align-items: center;
height: 60px; /* tamaño de alto */ }
#logo-motivuni {
padding-left: 2rem;
font-size: 1.5rem;
text-transform: lowercase;
}
/* Estilos para el header fijo utilizando position: sticky */
header {
position: sticky;
top: 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* sombra suave */
z-index: 1000;
}
/* -------------------
menu
-------------------*/
nav {
flex-grow: 1;}
.menu {
display: flex;
justify-content: flex-end;
padding-right: 2rem; }
.menu li {
margin: 0 1rem; }
.menu a {
color: white;
transition: transform 0.3s; /* transicion suave para el efecto */}
/* Para que cambie color cuando pones el cursor arriba */
.menu a:hover, .menu a:focus, .menu a:active {
color: #ff4d1f; }
#logo-motivuni a {
padding: .5em;
}
/* Estilos para el botón hamburguesa y menú responsivo
--------------------------------------------------------*/
.menu-btn {
display: none; /* Ocultar el botón en pantallas más grandes */
cursor: pointer;
position: absolute;
bottom: 15px;
right: 20px; /* Ajustar la posición según sea necesario */
z-index: 1000; /* Asegurar que esté por encima del contenido */
}
.menu-btn .btn-linea {
width: 28px;
height: 3.2px;
background-color: #fff; /* Color blanco para las líneas */
margin: 5px;
}
.menu.active {
display: block; /* Mostrar el menú cuando el botón se activa */
position: absolute;
background-color: #fff; /* Color de fondo del menú */
z-index: 1000; /* Asegurar que esté por encima del contenido */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra para el menú */
border-radius: 8px;
}
@media (max-width: 1400px) {
.menu {
display: block;
padding: 0%;
}
.menu-btn {
display: block; /* Mostrar el botón en pantallas más pequeñas */
}
nav {
/* para origen de coordenadas de sus elementos hijos */
position: relative;
}
/* botón "hamburguesa" */
.menu-btn,
.menu-fondo {
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-out; /* anima el "hover" */
/* fijo, no "scrolea", no genera scroll */
position: fixed;
/* emplazamiento 1 renglón del borde superior */
top: 1em;
/* emplazamiento 1 renglón del borde derecho */
right: 1em;
/* en capa superior, casi arriba de todo */
z-index: 9000;
}
/* fondo del botón "hamburguesa" */
.menu-fondo {
background: hsl(0 0% 100% / 0.25);
box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
/* capa superior, pero abajo del menu ppte dicho */
z-index: 8000;
}
/* cuando "nav" tiene la clase "menuVisible" */
.menuVisible .menu-fondo {
background: hsla(249, 52%, 34%, 0.863);
border-radius: 0;
width: 62%;
height: 100%;
inset: 0 0 auto auto;
}
/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
width: 25px;
height: 3px;
margin: 4px 0 4px 0;
background: hsl(0 0% 90%);
transition: all 0.3s ease-out;
/* capa superior, pero no parece */
position: relative;
/* capa superior, casi arriba de todo */
z-index: 9000;
}
/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
transform: rotate(180deg);
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
transform: rotate(-45deg) translate(4px, -6px);
}
/* menú propiamente dicho */
nav ul {
opacity: 0; /* transparente */
visibility: hidden; /* no se ve */
position: absolute; /* sale del fondo, con relación a su contenedor */
right: 0.8rem; /* emplazamiento, 1 r-renglon del borde derecho */
top: calc(100% + 4rem); /* emplazamiento, 100% + 4 r-renglones del borde superior */
z-index: 9999; /* capa superior, arriba de todo */
transition: all .5s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}
/* el menu cuando "nav" tiene la clase "menuVisible" */
.menuVisible ul {
visibility: visible; /* se ve */
opacity: 100%; /* opaco */
}
/* cada vínculo del menu */
nav ul li a {
color: white;
display: block;
font-size: 1.2rem;
text-align: end;
padding: .6rem;
}
}
/* BUSCADOR SIMULADO
-------------------------*/
.buscador {
margin-left: 30px; /* para ajustar el margen izquierdo */}
.buscador .container {
position: relative;
box-sizing: border-box;
width: fit-content;
}
/* Estilo general del contenedor principal */
.mainbox {
box-sizing: border-box;
position: relative;
width: 36px;
height: 36px;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
border-radius: 160px;
background-color: #ffffff;
transition: all 0.3s ease;
}
/* Estilo del checkbox */
.checkbox {
box-sizing: border-box;
width: 10px;
height: 30px;
position: absolute;
right: 17px;
top: 10px;
z-index: 9;
cursor: pointer;
appearance: none;
/* Oculta el checkbox */
opacity: 0;
pointer-events: none;
}
/* Cuando el ratón pasa por encima de .mainbox */
.mainbox:hover,
.mainbox:focus-within {
width: 250px;
}
.mainbox:hover .search_input,
.mainbox:focus-within .search_input {
width: 170px;
height: 100%;
}
.mainbox:hover .iconContainer,
.mainbox:focus-within .iconContainer {
padding-right: 8px;
}
/* Estilo del input de búsqueda */
.search_input {
box-sizing: border-box;
height: 10%;
width: 0; /* Inicialmente está escondido */
background-color: transparent;
border: none;
outline: none;
color: #362983;
transition: all 0.3s ease;
}
/* Placeholder del input de búsqueda */
.search_input::placeholder {
color: #362983;
}
/* Estilo del contenedor del icono */
.iconContainer {
padding: 0; /* Asegura que no haya padding extra */
margin-right: 3px; /* Espacio entre el icono y el borde del contenedor */
display: flex;
align-items: center;
justify-content: center; /* Centra el icono dentro del contenedor */
}
/* Estilo del icono de búsqueda */
.search_icon {
box-sizing: border-box;
fill: #362983;
font-size: 1em;
}
@media (max-width: 540px) {
/* Cuando el ratón pasa por encima de .mainbox */
.mainbox:hover,
.mainbox:focus-within {
width: 190px;
height: 30px;}
.buscador{
margin: 0%;
margin-left: 0.5rem;}
.logo-motivuni{
padding: 0%;
}
}
/*-------------------
BOTONES LINKS
-------------------*/
.boton-info {
background-color: #ffffff;
color: #362983;
font-weight: bold; /* texto en negrita */
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
text-decoration: none;
margin-top: 14px;
font-size: 12px; }
.boton-info:hover {
background-color:#ff4d1f;
color: #ffffff;
transform: scale(1.05); /* Escala un 5% más grande al hacer hover */
}
.planestudios .boton-info:hover {
background-color:#362983;
color: #ffffff;
}
/* ---------------------------------------------------------------------------------------------------------
motivuni header
---------------------------------------------------------------------------------------------------------*/
.motivuni {
background-image: url(../imagenes/fotodefondo_faduprincipal_escritorio.png); /* imagen de fondo header */
background-size: cover;
color: #362983;
height: 200px;
display: flex;
justify-content: center;
align-items: center;}
/* sombra para los headers de distintos index */
.motivuni,
.headerfadupatio,
.martinaflor,
.cococerrella,
.melanieanton {
box-shadow:
0 /* desplazamiento horizontal */
4px /* desplazamiento vertical */
4px /* desenfoque */
hsl(0 0% 0% / 20%) /* color */ }
.motivuni h1 {
font-size: 50px; /* tamaño de fuente mas grande */
margin: 0 18px; /* margen izquierdo y derecho */
text-transform: lowercase; }
.motivuni h4 {
font-size: 15px;
margin: 0 20px; /* margen izquierdo y derecho */}
/* --------------------------------------------------------------------------------------------------------
seccion te ayudamos
--------------------------------------------------------------------------------------------------------*/
.teayudamos {
padding: 30px;
padding-bottom: 0.5%;}
.teayudamos h2 {
color: #ff4d1f;}
#parrafo1 {
background-color: transparent;
border: 3px solid #fc9ed3;
color: #362983;
padding: 20px;
border-radius: 5px;}
#parrafo2 {
background-color: transparent; /* fondo transparente */
border: 3px solid #fc9ed3 ;; /* borde rojo */
color: #362983;
padding: 20px;
border-radius: 5px;}
/* CONTENEDOR PARA LOS PARRAFOS - para que se vean en dos columnas*/
.texto-contenedor {
display: flex;
flex-direction: column;
gap: 2px;}
/* ----------------------------------------------------------------------------------------------------------
seccion inspiracion columnas
----------------------------------------------------------------------------------------------------------*/
.bloque-martina {
display: flex;
align-items: center;}
.bloque-martina img {
padding-bottom: 0%;
}
.inspiracion h2 {
color: #362983;
margin-left: 28px;
}
/* ----------------------
galeria de imagenes
-------------------------*/
.galeria {
padding: 0 0 0 0;
width: min(100%, 100%);
margin-inline: auto;
}
.slider {
width: 100%;
height: max(40vh, 450px);
position: relative;
overflow: hidden;
}
.slide {
height: 100%;
position: absolute;
transition: all 0.5s;
}
.slide img {
border-radius: .25em;
width: 100%;
height: 100%;
object-fit: cover;
}
.bloque-martina img {
width: 50%;
margin-top: 60%;
}
.slide figcaption {
background-color: hsla(12, 100%, 56%, 0.851);
border-radius: .5em;
color: white;
padding: 1em;
padding-bottom: 4%;
position: absolute;
inset: 7em 0.5em 2em;
grid-template-rows: auto 1fr auto;
gap: 1em;
}
.slide figcaption span {
display: block;
font-size: .85em;
color: white;
text-transform: none;
}
.slide a {
background-color: #362983;
color: white;
padding: .30em 1em;
border-radius: 2em;
margin-top: 10rem;
}
.slide a:hover {
box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
color: #fc9ed3;
}
@media (min-width: 320px) {
.slide figcaption {
font-size: 14px;
transition: .5s;
}
}
@media (min-width: 1024px) {
.slide figcaption {
font-size: 18px;
}
.bloque-martina #martina-flor {
width: 100%;
padding-left: 1rem;
object-position: bottom;
}
}
.galeria .btn {
position: absolute;
z-index: 10;
top: 2em;
width: 2.5em;
aspect-ratio: 1;
border: none;
border-radius: 50%;
cursor: pointer;
background-color: hsl(12,100%,56%);
color: white;
font-size: 1.1em;
opacity: .75;
}
.btn:active,
.btn:hover {
opacity: .9;
border: solid 1px white;
}
.btn-prev {
left: calc(100% - 6.25em);
}
.btn-prox {
right: 1em;
}
/* ----------------------------------------------------------------------------------------------------------------------
seccion noticias y plan de estudio
---------------------------------------------------------------------------------------------------------------------- */
.noticias h2,
.planestudios h2 {
color: #362983;
margin-left: 28px;
margin-top: 2rem; }
.noticias p,
.planestudios p {
font-size: 14px; }
.noticias-columnas,
.plan-columnas {
display: flex; /* en dos columnas */
padding: 29px;
gap: 1.3rem;
padding-top: 1rem;}
.noticias-columna{
background-color: #362983;
color: white;
margin-bottom: 20px; /* margen inferior para separar las columnas */
border-radius: 5px;
width: 50%; /* Establece el ancho de las columnas */
display: block;
flex-direction: column;}
.noticias-columna p,
.noticias-columna h4 {
padding:20px;
margin: 0%;}
.noticias .noticias-columna img {
max-width: 100%;
width: 45em;
border-radius: 5px;
max-width: 100%;
margin: auto;}
.noticias-columna .boton-info {
margin-left: 1rem;
margin-bottom: 1rem;
}
/* --------------------------------------------------------------------------------------------------------------------
solo seccion plan de estudios
-------------------------------------------------------------------------------------------------------------------- */
.headerfadupatio {
background-image: url(../imagenes/fadupatio-header.jpg); /* imagen de fondo fadu patio */
background-size: cover;
background-position: center;
height: 290px;}
.plan-columna1 {
background-color: #ff4d1f;
color: white;
padding: 30px;
border-radius: 5px;
width: 50%; /* Establece el ancho de las columnas */
display: flex;
flex-direction: column;}
.plan-columna2 {
background-color: #fc9ed3;
color: #362983;
padding: 30px;
border-radius: 5px;
width: 50%; /* Establece el ancho de las columnas */
display: flex;
flex-direction: column; }
.planestudios h3 {
margin-top: 3rem;}
.planestudios h4 {
margin-top: 0;}
/* ----------------------------------------------------------------------------------------------------------------------
seccion calendario y agenda
---------------------------------------------------------------------------------------------------------------------- */
.calendarioyagenda {
display: flex; /* en dos columnas */
padding: 29px;
gap: 2rem; }
.calendarioyagenda h2 {
color: #362983; }
.calendarioyagenda p {
font-size: 14px; }
.calendario-columna {
background-color: #362983;
color: white;
padding: 30px;
border-radius: 5px;
width: 60%; /* el ancho de las columna */
flex-direction: column;}
.calendario-columna img {
display: flex;
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
border-radius: 5px;}
.calendario-columna h2 {
color: #ffffff;
margin-left: 0%;}
/*------------------------------------ */
.agenda-columna {
background-color: transparent;
border: 3px solid #fc9ed3;
color: white;
padding: 20px;
border-radius: 5px;
width: 100%; /* el ancho de las columna */
flex-direction: column;
display: flex;}
.agenda-columna li {
color: #362983;
font-weight: 500; /* texto mas en bold */
font-size: 0.9rem;
line-height: 2; /* más interlineado entre los li */}
.agenda-columna h2 {
margin: 0%;}
/* ----------------------------------------------------------------------------------------------------------------
seccion centros de estudiante
---------------------------------------------------------------------------------------------------------------- */
.centrosestudiantes {
padding: 29px;
}
.centros-columnas img {
width: 100%;
}
#centrorefadu, #centromodulo, #centroauge, #centrocoalision {
width: 100px;
height: 100px;
}
.centrosestudiantes h3,
.planestudios h3 {
color: #362983;}
.centrosestudiantes h4 {
text-transform: uppercase; /* nombres centros en mayuscula */
margin-top: 0.5em;}
.centros-columnas {
display: flex;
flex-direction: row;
padding: 0px;
gap: 1rem;}
.centrosestudiantes h2 {
color: #362983; }
.centrosestudiantes p {
font-size: 12px; }
.centros-columna-1,
.centros-columna-2,
.centros-columna-3,
.centros-columna-4 {
background-color: #362983;
color: white;
margin-bottom: 20px; /* margen inferior para separar las columnas */
padding: 30px;
border-radius: 5px;
flex-direction: column;
display: flex;
gap: 1rem;}
@media only screen and (min-width: 320px) and (max-width: 900px) {
.centros-columnas {
display: block; }
}
/* ---------------------------------------------------------------------------------------------------------------------
seccion votá a tu preferido
--------------------------------------------------------------------------------------------------------------------- */
.votacion {
padding: 29px;}
.votacion h2 {
color: #362983; }
.votacion h4 {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;}
.votacion-columnas {
display: flex;
flex-direction: column;
padding: 0px;}
.columna-votacion1,
.columna-votacion2,
.columna-votacion3,
.columna-votacion4 {
color: white;
margin-bottom: 20px; /* margen inferior para separar las columnas */
border-radius: 5px;
flex-direction: column;}
/* ANIMACION COLUMNA
----------------------*/
.votacion-columnas figure{
/* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
position: relative;
/* para ocultar lo que "excede" sus limites */
overflow: hidden;
margin: 0%; }
.votacion-columnas figcaption {
background-color:hsl(326,94%,80%);
color:#362983;
line-height: 0em;
font-weight: 700;
text-align: center;
/* para superponer el epigrafe sobre la foto */
position:absolute;
/* estirar para que ocupe todo figure */
inset: 0;
/* mover para que se vea apenas el "titulo" de la foto */
transform: translateY(calc(100% - 3.5em));
transition: all .6s ease; }
/* propiedades de figcaption cuando el cursor se coloca encima de "figure" */
.votacion-columnas figure:hover figcaption {
background-color:hsla(326, 94%, 80%, 0.797);
transition: all .3s ease;
/* emplazamiento, 0 del borde superior */
transform: translateY(0);
/* grid */
display: grid;
/* texto centrado */
text-align:center;
place-items: center;
place-content: center;
/* relleno en linea 2 renglones */
padding-inline: 2em;
}
/* BOTON ME GUSTA
----------------------*/
.votacion-columnas .btn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 10px;
border: none;
background-color: transparent;
position: relative;}
.votacion-columnas .btn::after {
content: 'VOTAR';
width: fit-content;
height: fit-content;
position: absolute;
font-size: 20px;
color: #362983;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
opacity: 0;
visibility: hidden;
transition: .2s linear;
top: 115%;
font-weight: bolder;}
.icon {
width: 30px;
height: 30px;
transition: .2s linear;}
.icon path {
fill: white;
transition: .2s linear;}
.votacion-columnas .btn:hover > .icon {
transform: scale(1.2);}
.votacion-columnas .btn:hover > .icon path {
fill: #362983; }
.votacion-columnas .btn:hover::after {
visibility: visible;
opacity: 1;
top: 105%;}
/* COMENTARIOS BOTON
----------------------*/
.bookmarkBtn {
display: flex;
width: 100%;
border: none;
background-color: rgb(255, 255, 255);
align-items: center;
justify-content: center;
cursor: pointer;
transition-duration: .3s;
overflow: hidden;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.062);}
.bookmarkBtn .IconContainer {
width: 100%;
height: 30px;
background-color: #fc9ed3;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 2;
transition-duration: .3s;
margin: 3%;
margin-right: 0%;}
.bookmarkBtn .icon {
border-radius: 1px;}
.bookmarkBtn .text {
height: 100%;
width: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition-duration: .3s;
font-size: 0;
font-weight: 600;
border: none;
padding: 1.6%;
background: none;
outline: none;}
.bookmarkBtn:hover .IconContainer {
width: 35px;
border-radius: 50%;
transition-duration: .3s;}
.bookmarkBtn:hover .text {
transform: translate(0);
width: 100%;
font-size: 1.04em;
transition-duration: .3s;}
.bookmarkBtn:active {
transform: scale(0.95);
transition-duration: .3s;}
/* ------------------------------------------------------------------------------------------------------------------------
seccion los más votados semana pasada...
------------------------------------------------------------------------------------------------------------------------ */
.losmasvotados img {
max-width: 100%; }
.pilardibujito {
background-color: #ff4d1f;
color: #ffffff; }
.agussanmartin{
background-color:#362983;
color: #ffffff; }
.martin{
background-color:#ff4d1f;
color:#ffffff; }
.dolores{
background-color:#fc9ed3;
color:#ffffff; }
.losmasvotados {
padding: 29px;}
.losmasvotados h2 {
color: #362983; }
.losmasvotados h4,
.losmasvotados h3 {
display: flex;
justify-content: center;
align-items: center;}
.losmasvotados-columna1 p,
.losmasvotados-columna2 p {
padding: 5%;
display: grid;
justify-content: center;
align-items: center;
}
.losmasvotados h3 {
font-size: 50px;
margin: 0%;
margin-bottom: 5%;}
.losmasvotados h4 {
font-size: 20px;
margin-bottom: 0%;
margin-top: 5%;}
.losmasvotados-columnas {
display: flex;
flex-direction: column;
padding: 0px;}
.pilardibujito,
.agussanmartin,
.martin,
.dolores {
color: white;
border-radius: 5px;
flex-direction: column;}
.losmasvotadoscolumnas {
display: flex;
justify-content: space-between; /* Espacio entre las columnas */
}
.losmasvotados-columna1,
.losmasvotados-columna2 {
width: 49%; /* Ancho de cada columna, ajustable según necesites */
gap: 1rem;
}
.losmasvotados-columna1 {
display: flex;
}
.columna-arriba {
display: flex;
justify-content: space-between; /* Espacio entre los elementos dentro de columna2 */
gap: 1rem;
}
.martin, .dolores {
width: 60%; /* Ancho de cada bloque dentro de columna2 */
}
.personaqueteinspira {
margin-top: 20px; /* Espacio entre los bloques dentro de columna2 */
}
@media only screen and (min-width: 320px) and (max-width: 920px) {
.losmasvotadoscolumnas,
.losmasvotados-columna1,
.losmasvotados-columna2,
.columna-arriba,
.martin,
.dolores {
display: block;
width: 100%;
}
}
/* input quien te inspira?
-----------------------------*/
.personaqueteinspira form {
display: grid;
gap: 1em;
padding: 1em;
background-color: white ;
border: 3px solid #362983;
border-radius: 5px;
}
.personaqueteinspira .container {
display: flex;
flex-direction: column;
align-items: center;
max-width: 900px;
user-select: none;
}
.personaqueteinspira text {
font-size: 0.8rem;
text-align: left;
width: 100%;
color: black;
font-weight: bold;
margin-bottom: 3px;
}
.personaqueteinspira input {
border-radius: 8px;
width: 100%;
text-align: center;
padding: 6px 0px 9px 10px;
border: 2px solid rgb(184, 180, 180);
outline: none;
transition: 0.5s ease;
}
.personaqueteinspira input:hover {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
border-color: #fc9ed3;
}
.personaqueteinspira input:focus {
border: 2px solid #362983;
box-shadow: rgba(133, 130, 130, 0.1) 0px 4px 12px;
transform: scale(0.99);
}
.personaqueteinspira input::placeholder {
font-size: 13px;
font-weight: 600;
}
.personaqueteinspira button {
padding: 6px 15px;
text-align: center;
color: white;
cursor: pointer;
background-color: #362983;
border-radius: 6px;
border: none;
transition: 0.5s;
width: 100%;
margin-top: 7px;
font-size: 13px;
box-shadow: rgba(104, 100, 100, 0.1) 0px 4px 6px -1px, rgba(49, 42, 42, 0.06) 0px 2px 4px -1px;
}
.personaqueteinspira button:hover {
border-radius: 7px;
background-color: rgb(243, 242, 242);
border-color: rgb(236, 232, 232);
}
.personaqueteinspira h4 {
margin: 0%;
}
/* SECCION SOBRE NOSOTRAS
---------------------------*/
.parrafonosotras {
background-color: transparent;
border: 3px solid #fc9ed3;
color: #362983;
padding: 20px;
border-radius: 5px;}
/* -----------------------------------------------------------------------------------------------------------------------
footer
-----------------------------------------------------------------------------------------------------------------------*/
footer .main-columns {
color: #ffffff;
font-size: 15px; }
.main-columns h4 {
margin: 0%;
margin-top: 1%;
font-size: 30px; }
footer img {
width: 40px;}
.footer {
padding: 20px;
background-color: #362983; }
.main-columns {
display: flex;
justify-content: space-between;}
.column {
flex: 1;
margin: 0 10px;}
.column-right {
border-left: 1px solid #ffffff; /* Línea divisora */
padding-left: 40px; /* Espacio para separar el contenido de la línea */}
.column-left {
margin-left: 2%;}
.sub-column {
display: flex;
justify-content: space-between;
margin-left: 10%;}
.sub-column div {
flex: 1;
margin: 0 10px;}
.sub-column ul li {
margin-bottom: 11px;}
.contact-social {
display: flex;
justify-content: space-between;}
.contact-details {
flex: 1;}
.social-media {
display: flex;
justify-content: flex-start;
flex: 1;
margin-top: 1%; }
.social-media a {
margin-left: 10px; }
.footer-note {
text-align: center;
margin-top: 30px;
padding-left: 1.5%;
padding-right: 1.5%;
font-size: 0.6em;
color: white; }
.footer h4 {
text-transform: lowercase;
}
/* redes sociales animacion
----------------------------- */
.card {
display: flex;
height: 70px;
width: 270px; }
.card svg {
position: absolute;
display: flex;
width: 60%;
height: 100%;
font-size: 24px;
font-weight: 700;
opacity: 1;
transition: opacity 0.25s;
z-index: 2;
cursor: pointer; }
.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 25%;
color: whitesmoke;
font-size: 24px;
text-decoration: none;
transition: 0.25s;
border-radius: 50px; }
.card svg {
transform: scale(1); }
.card .social-link1:hover {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
animation: bounce_613 0.4s linear; }
.card .social-link2:hover {
background-color: #0d0d0d;
animation: bounce_613 0.4s linear; }
.card .social-link3:hover {
background-color: #5865f2;
animation: bounce_613 0.4s linear; }
.card .social-link4:hover {
background-color: #12a50b;
animation: bounce_613 0.4s linear; }
@keyframes bounce_613 {
40% {
transform: scale(1.4);
}
60% {
transform: scale(0.8);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* ------------------------------------------------------------------------------------------------------------------------
1) html martina flor
------------------------------------------------------------------------------------------------------------------------*/
.martinaflor-index h2 {
color: #362983;
margin: 2rem;
margin-left: 2rem;
margin-top: 3rem;}
.martinaflor-index #parrafo1 {
background-color: transparent;
border: 2px solid #362983;
color: #362983;
padding: 20px;
border-radius: 5px;}
.martinaflor-index #parrafo2 {
background-color: transparent;
border: 2px solid #ff4d1f;
color: #ff4d1f;
padding: 20px;
border-radius: 5px;}
.martinaflor {
background-image: url(../imagenes/martinaflor-header2.png); /* imagen de fondo header */
background-size: cover;
color: #362983;
height: 350px;
display: flex;
justify-content: center; /* titulo centrado */
align-items: center;}
.martinaflor h1 {
font-size: 50px; /* tamaño de fuente mas grande */}
.martinaflor h3 {
font-size: 20px;
margin-left: 2.8rem;
color: #362983;}
.martinaflor-index h5 {
margin-left: 1rem;
}
.martinaflor img {
max-width: 15px; /* tamaño del logo lugar */ }
.martinaflor-portfolio-columnas img {
width: 20rem;}
.martinaflor-portfolio-columnas ul {
display: flex; /* Hace que los elementos se muestren en línea */
margin: auto;}
.martinaflor-portfolio-columnas li {
margin-right: 25px; /* Ajusta el valor según el espacio deseado entre los elementos */}
.libros-columnas {
display: flex;
justify-content: space-between;
margin-top: 20px; /* Ajusta el margen superior según sea necesario */
gap: 1.4rem;}
.libros-columnas img {
display: flex;
max-width: 100%;}
.libros-columnas p {
font-size: 15px;
margin: 0;}
.martinaflor-index .noticias-columna img {
height: 280px;
margin: auto;}
.boton-infolibros {
background-color: #ffffff;
color: #362983;
font-weight: bold; /* texto en negrita */
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
margin-left: 1rem;
margin-bottom: 1rem;}
.martinaflor-index .contenedora {
max-width: 95rem;
margin-inline: auto; /* centrado horizontal (si sobra espacio, lo distribuye a izquierda y derecha por igual) */ }
/* HTML MARTINA FLOR - MEDIA QUERIES (CELULAR) */
@media (max-width: 768px) {
.martinaflor-index .martinaflor h1 {
font-size: 30px;}
.martinaflor-index .martinaflor h3{
font-size: 16px;
margin-left: 1rem;}
.martinaflor-index .martinaflor {
background-image: url(../imagenes/martinaflor-headercelular.png); /* imagen de fondo header */
height: 12.5rem; }
.martinaflor-index .contenedora {
margin-inline: auto;
padding-left: 2rem;
padding-right: 2rem;}
.martinaflor-index .libros-columnas {
display: block}
.martinaflor-index .noticias-columna {
width: 100%;
display: block;}
.martinaflor-portfolio-columnas ul {
display: block;}
.martinaflor-portfolio-columnas li {
margin: 5px;
padding: 0%;}
}
/* ------------------------------------------------------------------------------------------------------------------------
2) html coco cerella
-----------------------------------------------------------------------------------------------------------------------*/
.cococerrella-index .contenedora {
max-width: 95rem;
margin-inline: auto; /* centrado horizontal contenedores*/ }
.cococerrella-index h2 {
color: #ff4d1f;
margin: 2rem;
margin-left: 0rem;
margin-top: 3rem;}
/* ---------HEADER-------------- */
.cococerrella {
background-image: url(../imagenes/cococerrella-header.png); /* imagen de fondo header */
background-size: cover;
height: 350px;
display: flex;
justify-content: center; /* titulo centrado */
align-items: center;}
.cococerrella h1 {
font-size: 50px; /* tamaño de fuente mas grande */
color: white;
margin-left: 0.7rem;}
.cococerrella h3 {
font-size: 20px;
color: white;
margin-left: 2rem;}
/* ---------BIOGRAFIA----------- */
.cococerrella-index #parrafo1,
.cococerrella-index #parrafo2 {
background-color: transparent;
border: 2px solid #ff4d1f;
color: #ff4d1f;
padding: 20px;
border-radius: 5px;}
/* ---------PORTFOLIO----------- */
.cococerrella-portfolio-columnas {
text-align: center;}
.cococerrella-portfolio-columnas img {
width: 100%;}
.cococerrella-portfolio-columnas ul {
display: flex; /* Hace que los elementos se muestren en línea */
margin: auto; }
.cococerrella-portfolio-columnas li {
margin-right: 25px; /* Ajusta el valor según el espacio deseado entre los elementos */}
/* ---------DISEÑO IDENTIDAD----------- */
.identidad .noticias-columna {
text-align: center;}
.identidad img {
width: 80%;
padding: 2rem;
margin:auto }
.identidad h4,
.identidad p {
padding-top: 0%;
}
/* ---------PROYECTO CARCEL----------- */
.proyectocarcel .noticias-columna {
text-align: center;}
.proyectocarcel img {
width: 100%;
padding: 2rem;}
.proyectocarcel h4,
.proyectocarcel p {
padding-top: 0%;}
/* HTML COCO CERELLA - MEDIA QUERIES (CELULAR) */
@media (max-width: 768px) {
.cococerrella-index .cococerrella h1 {
font-size: 30px;
color: #ff4d1f;
margin-left: 1.5rem;}
.cococerrella-index .cococerrella h3{
font-size: 16px;
margin-left: 1rem;
color: #ff4d1f;}
.cococerrella-index .cococerrella {
background-image: url(../imagenes/cococerrella-headercelular.jpg); /* imagen de fondo header */
height: 12.5rem; }
.cococerrella-index .contenedora {
margin-inline: auto;
padding-left: 2rem;
padding-right: 2rem;}
.cococerrella-index .libros-columnas {
display: block}
.cococerrella-index .noticias-columna {
width: 100%;
display: block;}
.cococerrella-portfolio-columnas ul {
display: block;}
}
/* -----------------------------------------------------------------------------------------------------------------------
3) html melanie anton
-----------------------------------------------------------------------------------------------------------------------*/
.melanie-index .contenedora{
margin-inline: auto;
padding-left: 2rem;
padding-right: 2rem;
}
.melanie-index h2 { /* estilo titulos H2 */
color: #fc9ed3;
margin-top: 3rem;
}
/* ---------HEADER-------------- */
.melanieanton {
background-image: url(../imagenes/melaniefondo.png); /* imagen de fondo header */
background-size:cover;
height: 350px;
display: flex;
justify-content: center; /* titulo centrado */
align-items: center;
color: white; }
.melanieanton h1 {
font-size: 50px; /* tamaño de fuente mas grande */}
.melanieanton h3 {
font-size: 20px;
margin-left: 2.5rem; /* margen izquierdo para centrar titulo */
color: white;}
/* ---------BIOGRAFIA----------- */
.melanie-index .textocontenedora {
display: block; /* para que los 3 parrafos se vean uno arriba del otro */ }
.melanie-index .textocontenedora #parrafo1 {
background-color: #ffd2ec92;
color: #192399;
border:#fc9ed3;
padding: 15px;
border-radius: 8px;
}
.melanie-index .textocontenedora #parrafo2 {
background-color: #ffd2ec92;
color:#192399;
border:#fc9ed3;
padding: 15px;
border-radius: 8px;
}
.melanie-index .textocontenedora #parrafo3 {
background-color: #ffd2ec92;
color: #192399;
border:#fc9ed3;
padding: 15px;
border-radius: 8px;
}
/* ---------PORFFOLIO------------ */
.melaniegaleria {
padding: 0 0 0 0;
width: min(100%, 100%);
margin-inline: auto;
}
.sider-melanie {
width: 100%;
height: max(40vh, 450px);
position: relative;
overflow: hidden;
}
.deslizar {
height: 100%;
position: absolute;
transition: all 0.5s;
margin: 0%;
}
.deslizar img {
border-radius: .25em;
width: 100%;
height: 100%;
object-fit: cover;
}
.deslizar a:hover {
box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
color: #fc9ed3;
}
.melaniegaleria .btn {
position: absolute;
z-index: 10;
bottom: 10rem;
width: 2em;
aspect-ratio: 1;
border: #ff0090;
border-radius: 50%;
cursor: pointer;
background-color: #fc9ed3;
color: white;
font-size: 1em;
opacity: .80;
}
.btn:active,
.btn:hover {
opacity: .9;
border: solid 1px white;
}
.btn-pre {
left: 0.5em;
}
.btn-prx {
right: 0.5em;
}
/* ---------VIDEOCLIPS----------- */
iframe {
width:90vw;
aspect-ratio:16/9;
margin-right:0;
margin-left: 0;
padding: 1px;
justify-content: center;
align-items: center;
}
.videos figure{
margin: 0%;
}
.contenedora .trabajos{
margin-right: 0%;
}
/* ---------NOTICIAS------------- */
.notiscolumnas {
display:grid;
margin:1rem;
padding:1rem;
gap: 1rem; /* espacio entre columnas */
}
.notiscolumnas p {
font-size: 17px;
margin: 0; }
.melanie-index .noticia1,
.melanie-index .noticia2 {
background-color: transparent;
border: 3px solid;
color: #fc9ed3;
margin-bottom: 20px; /* margen inferior para separar las columnas */
padding: 15px;
border-radius: 5px;
width: 100%;
}
.melanie-index .noticia1 img,
.melanie-index .noticia2 img {
max-width: 100%;
width: 25em;
border-radius: 5px;
max-width: 100%;
align-self: center; /* Centra la imagen */
}
.notiscolumnas a {
color: #fc9ed3;
}
/* HTML MELANIE ANTON - MEDIA QUERIES (CELULAR) */
@media (max-width: 768px) {
.melanie-index .noticia1,
.melanie-index .noticia2 {
display: block;
padding: 10px;
gap: 1rem; }
.melanie-index .melanieanton h1 {
font-size: 30px;
color: white;
margin-left: 1.5rem;}
.melanie-index .melanieanton h3{
font-size: 16px;
margin-left: 1.6rem;
color: white;}
.melanie-index .melanieanton {
background-image: url(../imagenes/melanie-headercelular.jpg); /* imagen de fondo header */
height: 12.5rem; }
}
/* ------------------------------------------------------------------------------------------------------------------------
4) html inspiracion
-----------------------------------------------------------------------------------------------------------------------*/
.index-inspiracion body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;}
.filter-container {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;}
.filter {
position: relative;
width: 100%;
margin: 0%;}
.filter-checkbox {
display: none;}
.filter-button {
width: 100%;
padding: 20px;
border: none;
border-radius: 15px;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ccc;
color: white;}
#filter-graphic-design .filter-button {
background-color: #fc9ed3;}
#filter-sound-design .filter-button {
background-color: #ff4d1f;}
#filter-otras-carreras .filter-button {
background-color: #362983;}
.filter-button:hover {
transform: scale(1.02);
opacity: 0.9;}
.filter-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;}
.filter-list li {
padding: 10px;
border-bottom: 1px solid #ddd;}
.filter-list li:last-child {
border-bottom: none;}
.filter-checkbox:checked + .filter-button + .filter-list {
max-height: 200px; }
.arrow {
margin-left: 10px;
transition: transform 0.3s; }
.filter-checkbox:checked + .filter-button .arrow {
transform: rotate(180deg);}
.inspiracion-columnasdgydis {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 2%;
margin-bottom: 3%;}
.inspiracion-columna {
display: flex;
align-items: center;
padding: 18px;
border-radius: 5px;}
.inspiracion-columna img {
max-width: 100%;
border-radius: 5px;
height: auto;}
.inspiracion-columna .texto {
flex: 1;
padding-left: 20px;
text-align: left;}
.inspiracion-columna.azul {
background-color: #362983;
color: white;}
.inspiracion-columna.rojo {
background-color: #ff4d1f;
color: white;}
.inspiracion-columna.rojo .texto {
padding-left: 0px;}
.inspiracion-columna.rojo img {
padding-left: 20px;}
.inspiracion-columna.amarillo {
background-color: #fc9ed3;
color: #362983;}
.inspiracion-columna .texto h4 {
margin: 0 0 10px;}
.inspiracion-columna .texto p {
margin: 0;
font-size: 10px;}
.inspiracion img {
max-width: 100%; /* para que la imagen ocupe todo el ancho disponible */
border-radius: 5px;}
/* media queries inspiracion
------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 1500px) {
.inspiracion-columnasdgydis {
display: block;}
}
.inspiracion-columna {
margin-bottom: 1rem;
}
/* ------------------------------------------------------------------------------------------------------------------------
5) html seccion noticia 1
------------------------------------------------------------------------------------------------------------------------*/
.noticiamain {
margin: 20px; }
.presentacion {
position: relative;
margin: 0 auto;
padding: 20px; }
.presentacion h4 {
position: absolute;
align-items: center;
color: #f1eeea;
background-color:#ff4d1f; /* Fondo semitransparente */
padding: 1em; /* Espaciado interior para el texto */
border-radius: 8px; /* Bordes redondeados para el contenedor del texto */
opacity: 0; /* Inicialmente oculto */
transition: opacity 0.3s ease; /* Transición suave para la propiedad opacity */ }
.presentacion:hover h4 {
opacity: 100; /* Mostrar el h4 al hacer hover sobre .presentacion */ }
.presentacion img {
width: 80%;
display: block;
margin: auto;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
flex-wrap: wrap; }
.galeria.noticias {
display: flex; /* Utiliza flexbox para alinear elementos */
justify-content: center; /* Centra los elementos horizontalmente */
gap: 14px; /* Espacio entre las imágenes */
margin: 20px 0; /* Margen superior e inferior para separar de otros contenidos */
flex-wrap: wrap; }
.galeria.noticias img {
max-width: 400px; /* Asegura que las imágenes no se desborden */
border-radius: 8px; /* Bordes redondeados para las imágenes */
margin-bottom: 2rem; }
.galeria.noticias img:hover {
transform: scale(1.05); /* Escala un 5% más grande al hacer hover */
}
.textodenoticia {
background-color: #fc9ed3;
border: 3px solid #fc9ed3;
color: #131219;
padding: 20px;
border-radius: 5px;
margin: 1em; }
.contenido-dos-columnas {
display: grid;
grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
gap: 30px; /* Espacio entre las columnas */ }
.contenido-dos-columnas .columna1 {
grid-column: 1 / 2; /* Ocupa la primera columna */
background-color: transparent;
border: 3px solid #fc9ed3;
color: #362983;
padding: 20px;
border-radius: 5px;
margin: 1em;}
.contenido-dos-columnas .columna2 {
grid-column: 2 / 3; /* Ocupa la segunda columna */
margin: 1em;}
.segunda-parte p {
margin: 1em;
margin-bottom: 3em;
}
.contenido-dos-columnas p,
.contenido-dos-columnas ul {
margin-bottom: 0; /* Elimina el margen inferior para evitar espacios innecesarios */ }
@media only screen and (min-width: 320px) and (max-width: 910px) {
.contenido-dos-columnas {
display: block;}
.presentacion h2 {
margin: 1em;}
}
/* -------------------------------------------------------------------------------------------------------------------------
6) html planes de estudio
------------------------------------------------------------------------------------------------------------------------*/
.planestudios body {
background-color: #f4f4f9;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.planestudios .container {
display: flex;
justify-content: center;
background: #fff;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-bottom: 2rem;
margin-top: 2rem;
}
.plan-estudio {
display: none;
}
.plan-estudio.active {
display: block;
}
.plan-estudio h2 {
text-align: center;
color: black;
}
.anio, .nivel {
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.toggle-button {
text-align: center;
margin-top: 35px;
margin-left: 100px;
}
#toggleButton {
padding: 10px 20px;
background-color: #362983;
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
display: block;
margin-bottom: 1rem;
}
#toggleButton:hover {
background-color: #fc9ed3;
}
/* media queries plan estudios
--------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 1100px) {
.planestudios .container {
display: block;
padding: 10px;}
.planestudios table {
font-size: 60%; }
.planestudios th,
.planestudios td {
padding:1%; }
.toggle-button {
margin: 0%;
margin-top: 10%;}
}
/* -------------------------------------------------------------------------------------------------------------------------
7) html calendario
-------------------------------------------------------------------------------------------------------------------------*/
.calendario{
display: grid;
align-self: center;
width: 25em;
border-radius: 15px;
margin-top: 2%;
margin-bottom: 2%; }
.mesjulio,
.mesagosto {
width: 100%;
margin:auto;
padding: 0.5em 1.5em 0em 1em;
background-color: white;
border: 3px solid #fc9ed3;
border-radius: 10px; }
.mesjulio h3,
.mesagosto h3 {
display: grid;
justify-content: center; }
.numeroscalendario *:not(.dianombre, .diasengris, .examenes, .inscripciones, .eventos, .hoy) {
color: #000000;
background-color: rgba(246, 247, 251, 0);
width: 1.8em;
height: 1.8em;
border-radius: 50%;
line-height: 3em;
display: flex;
justify-content: center;
align-items: center; }
.numeroscalendario {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: 700;
margin-left: 4%; }
.diasengris {
color: #818181;
background-color: rgba(246, 247, 251, 0);
width: 1.8em;
height: 1.8em;
border-radius: 50%;
line-height: 3em;
display: flex;
justify-content: center;
align-items: center; }
.numeroscalendario li {
margin: 0.1em; }
.examenes {
background-color: #ff4d1f;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
line-height: 3em;
color: white;
display: flex;
justify-content: center;
align-items: center; }
.eventos {
background-color: #362983;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
line-height: 3em;
color: white;
display: flex;
justify-content: center;
align-items: center; }
.inscripciones {
background-color:#fc9ed3;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
line-height: 3em;
color: white;
display: flex;
justify-content: center;
align-items: center; }
.hoy {
background-color:#fffaf6;
width: 1.8em;
height: 1.8em;
line-height: 3em;
color: #362983;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000; /* Borde fino negro */ }
.datosjulio {
display: grid;
align-self: center;
margin-right: 2rem; }
.datos li {
margin-bottom: 10px;
margin-top: 0px;
position: relative;
padding-left: 25px; }
.datos li::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 15px;
height: 15px;
border-radius: 50%; }
/* items circulo colores */
.item-inscripcion::before {
background-color: #fc9ed3; /* Color para inscripción */ }
.item-examenes::before {
background-color: #ff4d1f; /* Color para exámenes */ }
.item-eventos::before {
background-color: #362983; /* Color para eventos */ }
.eventos-adicionales {
display: flex;
justify-content: space-between;
margin-bottom: 4em; }
.evento-columna {
background-color: #362983;
color: white;
padding: 1em;
border-radius: 5px;
width: calc(25% - 1em); /* ancho para que haya espacio entre las columnas */ }
.evento-columna h4 {
margin-top: 0; }
.calendario-columna1 {
display: flex;
align-items: center; /* Centra verticalmente los elementos en la columna */
justify-content: center; /* Centra horizontalmente los elementos en la columna */
position: relative; /* Asegura que las flechas se posicionen correctamente */ }
.flecha-izquierda, .flecha-derecha {
cursor: pointer;
font-size: 35px;
color: #ff4d1f;
display: grid;
align-self: center;
cursor: pointer;
padding: 0.5em;
transform: translateY(-10%);
transition: all 0.3s ease; /* Agrega una transición suave para el cambio de estado */
}
/* Efecto hover para ambas flechas */
.flecha-izquierda:hover, .flecha-derecha:hover {
color: #362983; /* Cambia el color de la flecha al pasar el mouse */
transform: translateY(-10%) scale(1.4); /* Aumenta el tamaño de la flecha */
}
/* media queries de calendario
--------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 910px) {
.eventos-adicionales {
display: block;}
.evento-columna {
width: 93%;
margin: 4%; }
.datos,
.item-eventos {
margin: 6%;}
}
/* --------------------------------------------------------------
MEDIA QUERIES INDEX
--------------------------------------------------------------*/
/* ESTILO PARA PANTALLAS PEQUEÑAS (CELULAR)
------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
/*------------HEADER--------------*/
#logo-motivuni {
padding-left: 0.5rem;
font-size: 1.1rem;}
.motivuni h1 {
font-size: 30px; /* tamaño de fuente mas grande */
margin-left: 2rem;}
/*------------COLUMNAS NOTICIAS Y PLAN--------------*/
.noticias-columnas,
.plan-columnas,
.calendarioyagenda {
display:grid;}
.noticias-columna,
.plan-columna1,
.plan-columna2,
.calendario-columna {
width: 100%;
display: block;}
/*------------FOOTER------*/
.main-columns {
display: block;
}
.sub-column {
margin: 0%;
}
}
@media only screen and (min-width: 320px) and (max-width: 1023px) {
/*------------INSPIRACION------*/
.bloque-martina img {
display: none;}
#slide-martina {
content: url(../imagenes/martina-votacion.png);}
#slide-coco {
content: url(../imagenes/coco-votacion.jpg);}
#slide-melanie {
content: url(../imagenes/melanie-votacion.png);}
#slide-josefina {
content: url(../imagenes/josefina-votacion.jpg);}
}
/* ESTILO PARA PANTALLAS MEDIANAS (TABLET)
-----------------------------------------------------------------*/
@media (max-width: 1400px) {
/*--------------MENU-------------*/
.menu-btn {
display: block; /* muestra el menu hamburguesa en dispositivos moviles */
height: 25px;}
}
@media only screen and (min-width: 950px) and (max-width: 1400px) {
}
/* ESTILO PARA PANTALLAS GRANDES (ESCRITORIO)
-----------------------------------------------------------------*/
@media only screen and (min-width: 1024px) {
/* "html inspiracion" cuatro columnas */
.inspiracion-columnasdgydis {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 0px;
padding-bottom: 0%;
padding-top: 0;}
.inspiracion-columnasdgydis .inspiracion-columna {
flex: 1 1 10%; /* 4 columnas por fila */
margin: 10px;
max-width: 30rem}
/* Parrafos "te ayudamos" en dos columnas */
.texto-contenedor {
flex-direction: row;
justify-content: space-between;}
.home-index #parrafo1,
.home-index #parrafo2,
.martinaflor-index #parrafo1,
.martinaflor-index #parrafo2,
.cococerrella-index #parrafo1,
.cococerrella-index #parrafo2 {
flex: 1;
margin: 10px;}
/* Header "motivuni" */
.motivuni h1 {
font-size: 50px; /* tamaño de fuente mas grande */}
.motivuni h4 {
font-size: 20px;}
.motivuni {
background-image: url(../imagenes/fotodefondo_faduprincipal_escritorio.png); /* imagen de fondo header */
height: 280px; }
/* "votacion" cuatro columnas */
.votacion-columnas {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;}
.votacion-columnas .columna-votacion1,
.votacion-columnas .columna-votacion2,
.votacion-columnas .columna-votacion3,
.votacion-columnas .columna-votacion4 {
flex: 1 1 10%;}
}
@media only screen and (min-width: 1600px) {
/* "centros de estudiante" cuatro columnas */
.centros-columnas {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;}
.centros-columnas .centros-columna-1,
.centros-columnas .centros-columna-2,
.centros-columnas .centros-columna-3,
.centros-columnas .centros-columna-4 {
flex: 1 1 10%;
max-width: 30rem;}
}