@charset "UTF-8"; * { margin: 0; padding: 0; box-sizing: border-box; } /* Estilos generales de todas las paginas. */ body { /* Fuente de Google fonts para todo el sitio: Oswald */ font-family: "Oswald"; background: url(../assets/imagenes/background-body.png); background-size: cover; background-attachment: fixed; min-height: 100vh; } h2 { font-size: 1.5rem; color: white; margin-left: 2.5%; padding-top: 10px; } h3 { color: white; font-size: 1.5rem; margin-left: 2.5%; margin-top: 4.5vh; } iframe { /* No olvidar sacar los atributos en linea de los iframe, por ejemplo el border */ height: 30vh; width: 95%; margin: 2.5%; border-radius: 5px; border: 2.5px solid #690202; } p { font-size: 1.5rem; color: white; } a { text-decoration: none; /* Color heredado si no se especifica */ color: inherit; } header { border-bottom: 1vh solid #690202; /* Banner del

distinto del , imagen centrada */ background: url(../assets/imagenes/banner-background.png) no-repeat; background-position: center; background-size: cover; margin-bottom: 2%; } header nav { margin-left: 2%; } .navbar { /* "flex-wrap: wrap" para que se coloque debajo si no entra. */ display: flex; flex-wrap: wrap; align-items: end; } .navbar h1 { font-size: 2.5rem; color: #690202; text-shadow: white -3px 3px 1px; } .navbar-brand img { height: 5rem; /* Brillo normal */ filter: brightness(100%); /* Suaviza la transición */ transition: filter 0.3s ease-in-out; } .navbar-brand img:hover { /* Aumenta el brillo al pasar el mouse */ filter: brightness(150%); } /* CSS personalizado para el botón hamburguesa */ .navbar-toggler .navbar-toggler-icon { background-color: #690202; } .navbar-nav { display: flex; align-items: center; gap: 0; } .navbar-nav a { color: #690202; font-size: 1.2rem; font-weight: bold; padding: 0.1rem 1rem; text-align: center; background-color: rgba(255, 255, 255, 0.514); border-radius: 5px; transition: background-color 0.3s ease, transform 0.2s ease; } .navbar-nav a:hover { background-color: rgba(255, 255, 255, 0.603); transform: scale(1.1); color: #690202; } footer { display: flex; flex-direction: column; background-color: #690202; text-align: center; font-size: 1.2rem; color: white; padding: 5px; margin-top: 2%; } footer a { margin: 0; justify-content: space-around; } /* Cambiamos flexbox por grid con responsive entre mobile y desktop */ .catalogo { display: grid; /* 2 columnas en mobile */ grid-template-columns: 1fr 1fr; /* Espacio entre elementos */ width: 95%; margin: 1% auto; box-sizing: border-box; } .catalogo a { /* Atributos necesarios para que las cajas de las imagenes se vean iguales. Acompañar con "object-fit: cover" en las imagenes. */ display: flex; justify-content: center; align-items: center; min-height: 15vh; /* Altura fija para mantener uniformidad */ overflow: hidden; /* Position relative ayuda a posicionar el overlay dentro del contenedor */ position: relative; /* Evita desbordes de imágenes grandes */ } .catalogo a img { width: 100%; height: 100%; /* Cover recorta imágenes manteniendo la proporción. */ object-fit: cover; border-radius: 5px; border: 2.5px solid #690202; } .catalogo a .overlay { position: absolute; width: 100%; height: 100%; /* Fondo semitransparente */ background: rgba(0, 0, 0, 0.5); color: white; display: flex; align-items: end; justify-content: start; text-align: right; text-transform: uppercase; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: 5px; border: 2.5px solid #690202; } .catalogo a .overlay .texto-overlay { margin: 10%; } .catalogo a:hover .overlay { opacity: 1; } /* .caja-index Utiliza flexbox para mobile y Grid para Desktop. */ .caja-index { display: flex; flex-direction: column; margin: 2%; } .noticia { display: flex; flex-direction: column; border-top: 2px solid #690202; border-bottom: 2px solid #690202; padding: 5px; margin: 0 2.5%; width: 95%; } .noticia .contenido-noticia h3 { font-size: 1.2rem; margin: 2%; } .noticia .contenido-noticia p { color: antiquewhite; font-size: 1.2rem; } .noticia img { width: 60vw; /* Height auto para que no se deforme la imagen */ height: auto; margin-top: 10px; align-self: center; border-radius: 5px; border: 2.5px solid #690202; } .formulario { color: white; display: flex; /* flex-direction para acomodarlo en columna */ flex-direction: column; max-width: 80%; /* Manera de acomodarlo. Cada valor es una dirección, arriba, derecha, abajo e izquierda */ margin: 0 10%; /* atributo gap para separar los distintos label/input */ gap: 10px; } .formulario label { font-size: 1.5rem; } .formulario input, .formulario select, .formulario textarea { margin: 0.2rem; padding: 10px; border-radius: 5px; border: 2.5px solid #690202; } .formulario input[type=submit] { background-color: #690202; color: white; border: none; cursor: pointer; padding: 10px; border-radius: 5px; /* Para alejarlo del footer */ margin-bottom: 7vh; } .formulario input[type=submit]:hover { /* cambiar de color (más oscuro al pasar el mouse) */ background-color: rgb(79.976635514, 1.523364486, 1.523364486); } .texto-con-gif { display: flex; align-items: center; justify-content: center; } .texto-con-gif h2 { margin-right: 2.5%; } .texto-con-gif img { height: 10vh; border-radius: 100px; } /* Este SCSS contiene los estilos de dos paginas distintas restaurantes.html y noticias.html. Ambas utilizan los mismos estilos que serian como tarjetas con enlaces a sus respectivas paginas. */ .preview { /* Esto es lo que contiene cada link */ text-decoration: none; display: flex; flex-direction: column; width: 95%; margin: 0 2.5%; border-top: 1px solid #690202; border-bottom: 2px solid #690202; padding: 15px 0; } .preview .preview-caja { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0 2vh; text-align: center; } .preview .preview-caja .preview-imagen { flex: 1; object-fit: cover; align-items: center; /* Para que no se pegue al texto. */ margin-bottom: 2%; border-radius: 5px; border: 2.5px solid #690202; height: 1vh; max-height: 20vh; width: 70%; } .preview .preview-caja .preview-texto { /* Solución para que el texto ocupe toda la caja en una proporcion 1 a 2. */ flex: 2; } .preview .preview-caja .preview-texto .preview-titulo { margin: 0; font-size: 1.2rem; color: white; } .preview .preview-caja .preview-texto .preview-descripcion { font-size: 1.2rem; color: antiquewhite; } .nota-periodistica { display: flex; flex-direction: column; align-items: center; margin: 2.5%; width: 95%; } .nota-periodistica img { border-radius: 5px; border: 2.5px solid #690202; width: 90%; height: auto; display: block; margin: 0 auto; } .nota-periodistica p { flex: 1; /* Usar display flex aunque la clase nota-periodistica tenga display flex para que funcione en sus elementos "hijos" */ display: flex; align-items: center; justify-content: center; text-align: justify; margin: 2.5%; font-size: 1.2rem; } /* Similar a la clase preview pero un poco mas compleja. */ .producto { display: flex; flex-direction: column; margin: 2.5%; text-align: center; } .producto .producto-logo { flex: 1; width: 100%; border-radius: 5px; border: 2.5px solid #690202; background-color: #690202; padding-top: 2.5vh; } .producto .producto-logo div .logo { height: 20vh; object-fit: cover; width: 70%; } .producto .producto-logo address { /* Se aplica a los iconos de E-mail, telefono y Instagram. */ display: flex; justify-content: space-around; padding-top: 5%; } .producto .producto-logo address a img { height: 5vh; /* Con filter: invert cambiamos los iconos negros por blancos con el valor 1 */ filter: invert(1); } .producto .producto-descripcion { flex: 4; /* Los border-radius varian segun el tipo de pantalla. */ } .producto .producto-descripcion h2 { color: white; padding: 5px; background-color: #690202; margin: 0; padding-left: 20px; border-top-right-radius: 10px; border-top-left-radius: 10px; } .producto .producto-descripcion p { font-size: 1.2rem; line-height: 120%; color: #690202; background-color: #ffcc00; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; width: 100%; height: auto; border: 5px solid #690202; text-align: center; display: flex; } .informacion { display: grid; grid-template-columns: 1fr; justify-items: space-around; margin: 2.5%; border-top: 10px double #690202; } .informacion #carouselExampleCaptions { height: 35vh; width: 80%; overflow: hidden; margin: 0 auto; border-radius: 5px; border: 2.5px solid #690202; } .carousel-inner, .carousel-item { height: 100%; } .carousel-item img { height: 100%; width: 100%; object-fit: cover; display: block; } .about-us { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80vh; font-family: sans-serif; margin: 5% 0; /* Botón simulando click */ } .about-us input[type=checkbox] { display: none; } .about-us .toggle-libro { margin-bottom: 20px; padding: 10px 15px; font-size: 1.2rem; /* Fondo animado de boton con linear-gradient. Aplicado automaticamente con @keyframes. */ background: linear-gradient(270deg, #f5d776, #c49704, #f5d776); background-size: 200% 200%; /* Duración de la animacion y tipo de aceleración. */ animation: fondo-dorado 6s ease infinite; color: black; border: none; /* Cursor para que se note que es un botón. */ cursor: pointer; border-radius: 8px; font-family: "Kaushan Script", cursive; } .about-us .libro { position: relative; width: 80vw; height: 90vh; perspective: 1800px; } .about-us .libro .pagina { position: absolute; width: 100%; height: 100%; border: 7px inset darkgoldenrod; transform-origin: left; transition: transform 2s linear; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); background-image: url(../assets/imagenes/tapa-libro.jpg); background-size: cover; display: flex; } .about-us .libro .pagina img { width: 100%; max-height: auto; justify-self: center; object-fit: contain; filter: brightness(1.5); transition: opacity 0.5s linear 1s; /* Espera 1 segundo para ocultar. */ } .about-us .libro .contenido { display: grid; overflow: auto; position: absolute; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; z-index: -1; background-image: url(../assets/imagenes/hoja-papel.jpg); background-size: cover; background-position: center; border-left: 10px inset rgba(234, 225, 206, 0.7); border: 5px double rgba(234, 225, 206, 0.7); box-shadow: 0 -2px 10px -2px rgba(234, 225, 206, 0.7), 0 -4px 12px -3px rgba(212, 200, 180, 0.7), 0 -6px 15px -4px rgba(191, 177, 158, 0.7), 2px 0 10px -2px rgba(234, 225, 206, 0.7), 4px 0 12px -3px rgba(212, 200, 180, 0.7), 6px 0 15px -4px rgba(191, 177, 158, 0.7); } .about-us .libro .contenido p { color: black; font-size: 1.2rem; text-align: center; line-height: 95%; } @keyframes fondo-dorado { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Cuando está marcado el checkbox la pagina aplica transform: rotate y transition: opacity a la imagen. */ /* El selector "+" es para cada elemento hermano, es decir elementos en el mismo nivel. */ #abrir-libro:checked + label + .libro .pagina { transform: rotateY(-160deg); } #abrir-libro:checked + label + .libro .pagina img { opacity: 0; transition: opacity 1.7s ease 0s; /* Se oculta rápido */ } /* Estilos para mobile en landscape/apaisado. */ @media (orientation: landscape) { main { padding: 0 5%; } .catalogo { display: grid; grid-template-columns: repeat(4, 1fr); } .catalogo a { height: 30vh; } footer { flex-direction: row; justify-content: space-around; } iframe { height: 60vh; width: 70%; margin: 2.5%; margin: 2% auto; } .caja-index { display: grid; grid-template-columns: 1fr 2fr; } .caja-index iframe { width: 80%; height: auto; } .caja-index .noticia { margin: 1%; display: grid; grid-template-columns: 1fr 3fr; line-height: 110%; height: 20vh; border: none; } .caja-index .noticia .contenido-noticia h3 { font-size: 1.2rem; overflow: hidden; } .caja-index .noticia .contenido-noticia p { display: none; } .caja-index .noticia img { width: 15vw; margin-right: 2vw; } .formulario { padding: 0 10%; } .preview .preview-caja { flex-direction: row; } .preview .preview-caja .preview-imagen { height: 100%; width: 25%; object-fit: center; } .preview .preview-caja .preview-texto { line-height: 120%; margin-left: 2.5vw; } .producto { flex-direction: row; } .producto .producto-logo { flex: 2; height: 50vh; } .producto .producto-logo .logo { height: 30vh; } .producto .producto-descripcion { line-height: 120%; } .nota-periodistica div img { width: 70%; } /* Clase carousel de Bootstrap. En mobile landscape no aparece. */ .carousel { display: none; } } @media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) { .navbar h1 { font-size: 3.5rem; } .navbar-brand img { height: 5.5rem; } .navbar-toggler-icon { height: 5vh; width: 6vw; } footer { flex-direction: row; justify-content: space-around; } main { padding: 0 5%; } h2 { font-size: 2.5rem; } iframe { height: 40vh; width: 85%; margin: 2.5% 7.5%; } .catalogo a { height: 20vh; } .noticia { flex-direction: row; } .noticia img { width: 30vw; margin-right: 5vw; } .contenido-noticias h3 { font-size: 1.8rem; } .texto-con-gif { justify-content: center; } .preview-caja { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .preview-caja > * { max-width: 95%; } .preview-caja .preview-imagen { height: 25vh; width: 85%; } .preview-caja .preview-texto .preview-titulo { font-size: 1.5rem; } .nota-periodistica p { font-size: 1.5rem; } .nota-periodistica img { width: 80vw; margin: 2vh 0; } .producto .producto-logo { width: 70%; align-self: center; } .producto .producto-descripcion p { font-size: 1.5rem; } .about-us .libro .contenido p { font-size: 1.8rem; } } /* Clase carousel de Bootstrap. */ #carouselExampleCaptions { height: 35vh; width: 80%; overflow: hidden; border-radius: 5px; border: 2.5px solid #690202; } .carousel-inner, .carousel-item { height: 100%; } .carousel-item img { height: 100%; width: 100%; object-fit: cover; display: block; } .carousel-caption h5 { padding: 2%; background-color: black; border-radius: 10px; } /* Estilos para tablet con orientación */ @media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) { main { padding: 0 5%; } .navbar h1 { font-size: 2.5rem; } .navbar-nav { gap: 0.5rem; } main { padding: 0 2.5%; } iframe { height: 40vh; width: 100%; } .catalogo { grid-template-columns: repeat(4, 1fr); } .catalogo a { height: 20vh; } .caja-index { grid-template-columns: 1.5fr 2fr; justify-content: center; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .caja-index > * { max-width: 95%; } .caja-index iframe { height: 40vh; } .caja-index .noticia { flex-direction: row; height: 15vh; align-items: center; border-bottom: 5px solid #690202; } .caja-index .noticia .contenido-noticia { overflow: hidden; text-overflow: ellipsis; } .caja-index .noticia .contenido-noticia h3 { font-size: 1.2rem; } .caja-index .noticia .contenido-noticia p { font-size: 1.2rem; display: none; } .caja-index .noticia img { width: 90%; height: auto; } footer { flex-direction: row; justify-content: space-around; } .seccion-dividida { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .seccion-dividida > * { max-width: 95%; } .preview { height: 20vh; overflow: hidden; justify-content: center; } .preview .preview-caja { flex-direction: row; text-align: left; } .preview .preview-caja .preview-imagen { flex: 1; height: 15vh; width: 40%; margin-right: 5%; } .preview .preview-caja .preview-texto { flex: 2; } .preview .preview-caja .preview-texto .preview-descripcion { display: none; } .about-us p { font-size: 1.8rem; } .pagina img { width: 70%; margin: 0 auto; } .formulario { margin: 0 15%; width: 100%; } .nota-periodistica { flex-direction: row; flex-wrap: wrap; display: block; justify-content: center; } .nota-periodistica p { font-size: 1.5rem; } .nota-periodistica div { display: grid; align-items: center; justify-content: center; grid-template-columns: 1fr; } .nota-periodistica div p { font-size: 1.5rem; } .nota-periodistica div img { margin: 0 auto; height: 40vh; } .about-us .libro { width: 60%; } .about-us .libro .contenido p { font-size: 1.5rem; } .formulario { margin: 0 auto; } .producto { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .producto > * { max-width: 95%; } .producto .producto-logo { height: 40vh; width: 90%; } .producto .producto-logo div .logo { width: 60%; } .producto .producto-logo address a img { height: 5vh; } .informacion { display: grid; grid-template-columns: repeat(3, 1fr); border: none; } .informacion iframe { height: 30vh; margin: 0 auto; } .informacion #carouselExampleCaptions { display: block; height: 30vh; width: 100%; overflow: hidden; margin: 0 auto; border-radius: 5px; border: 2.5px solid #690202; } /* Clase carousel de Bootstrap. */ } @media (min-width: 1200px) { main { padding: 0; } /* Clase creada especificamente para pantallas grandes. */ .logo-desktop { display: flex; flex-direction: column; align-items: start; } .navbar h1 { font-size: 6rem; line-height: 80px; } .navbar-brand img { height: 18vh; /* transform translate x o y para moverlo ligeramente por cuestiones esteticas sin tocar la imagen. Averiguar si existe otra forma */ transform: translateY(1vh); } .navbar-nav { flex-wrap: wrap; gap: 1rem; } .navbar-nav .nav-item { flex: 1 1 auto; } .navbar-nav a { margin-top: 2.5%; font-size: 1.8rem; } .catalogo { /* 4 columnas en pantallas grandes */ grid-template-columns: repeat(4, 1fr); } .catalogo a { /* Aumenta la altura para pantallas más grandes */ height: 25vh; } h2 { color: white; font-size: 3rem; font-style: italic; } h3 { font-size: 2.5rem; margin-left: 2.5%; margin-top: 2.5vh; } .caja-index { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .caja-index > * { max-width: 95%; } .caja-index .pagina-principal { flex: 1; border-bottom: 5px double #690202; } .caja-index .noticia { flex-direction: row; padding: 2%; border-top: 5px solid #690202; } .caja-index .noticia .contenido-noticia { overflow: auto; } .caja-index .noticia .contenido-noticia h3 { font-size: 1.5rem; } .caja-index .noticia .contenido-noticia p { display: block; line-height: 130%; } .caja-index .noticia img { width: 90%; height: 90%; margin-right: 1rem; margin-top: 0; } .caja-index iframe { width: 80%; height: 80%; } footer { flex-direction: row; justify-content: space-around; font-size: 1.5rem; } .formulario { max-width: 70%; align-items: center; font-size: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .formulario > * { max-width: 95%; } .texto-con-gif { justify-content: start; margin-left: 10%; } .preview { display: flex; height: 20vh; overflow: auto; } .preview .preview-caja { flex-direction: row; } .preview .preview-caja .preview-imagen { flex: 1; margin: 0 2.5%; height: 16vh; } .preview .preview-caja .preview-texto { flex: 2; } .preview .preview-caja .preview-texto .preview-titulo { font-size: 1.5rem; } .preview .preview-caja .preview-texto .preview-descripcion { font-size: 1.2rem; line-height: 120%; } .nota-periodistica { flex-direction: row; flex-wrap: wrap; display: block; justify-content: center; } .nota-periodistica p { font-size: 1.8rem; margin: 2%; } .nota-periodistica img { margin: 0 2%; height: 50vh; width: 40%; /* Float hace que el texto fluya alrededor de la imagen.*/ float: inline-start; } .producto { margin: 0 auto 5% auto; height: 40vh; width: 90%; } .producto .producto-logo { padding: 0; border-top-right-radius: 0px; } .producto .producto-logo div .logo { height: 25vh; margin-top: 3%; width: 70%; } .producto .producto-logo address a img { height: 8vh; } .producto .producto-descripcion h2 { border-top-left-radius: 0px; } .producto .producto-descripcion p { font-size: 1.8rem; border-bottom-left-radius: 0px; line-height: 150%; } .informacion { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; height: 40vh; } .informacion iframe { height: 40vh; width: 100%; margin: 2%; } .informacion #carouselExampleCaptions { margin-top: 2%; height: 40vh; display: block; } /* Clase carousel de Bootstrap. */ .carousel-caption h5 { padding: 2%; background-color: black; border-radius: 10px; } .seccion-dividida { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 2.5%; /* "& > *" Aplica estilos a todos los hijos de este mixin. Va a tener un margen de 5% entre los dos costados por eso sus hijos deberian ocupar el 95% del contenedor. */ } .seccion-dividida > * { max-width: 95%; } .about-us { height: 90vh; margin: 0; } .about-us .toggle-libro { height: 10vh; width: 18vw; text-align: center; display: grid; align-items: center; font-size: 2.5rem; } .about-us .libro { width: 50vw; height: 80vh; } .about-us .libro .contenido p { font-size: 2.5rem; } } /*# sourceMappingURL=styles.css.map */