@font-face {
    font-family: 'Outfit-bold';
    /* Nombre que usarás en el resto de tu CSS */
    src: url('../font/Outfit-Bold.ttf') format('truetype'),
  }

  @font-face {
    font-family: 'Outfit';
    /* Nombre que usarás en el resto de tu CSS */
    src: url('../font/Outfit-Regular.ttf') format('truetype'),
  }

  html {
    box-sizing: border-box;
    font-family: "Outfit";

  }

  body {
    margin: 0;
  }

  header {
    width: 100%;
    height: 10rem;
    background-color: rgb(63, 63, 63);
    /* Fondo sólido */
    display: flex;
    flex-direction: row;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 0 4% 0 6%;
    /* Espaciado dentro del header */
    box-sizing: border-box;
    justify-content: space-between;
    /* Asegura que haya espacio entre los elementos */
    align-items: center;
    /* Centra los elementos en la vertical */
  }

  header .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    /* Separación entre las imágenes */
    flex: 1;
  }

  header .img-fbuesa {
    width: 10rem;
    height: 100%;
  }

  header .logo a {
    display: block;
    /* Asegura que los enlaces no tengan espacio extra */
  }

  header .img-memorial {
    width: 8rem;
    height: 70%;
  }

  header .logo img {
    /* Las imágenes ocuparán toda la altura del contenedor */
    max-width: 160px;
    /* Limitar el ancho para evitar que se estiren demasiado */

    object-fit: contain;
    /* Mantener la relación de aspecto */
  }


  /* Estilos para el nav */
  nav {
    display: flex;
    justify-content: flex-end;
    /* Esto asegura que los items del nav se alineen a la derecha */
    align-items: center;
    width: 65%;

  }

  nav ul {
    display: flex;
    justify-content: flex-end;
    /* Esto alinea los elementos de la lista (a la derecha) */
    gap: 10%;
    list-style-type: none;
    margin-right: 1%;
  }

  nav li {
    color: white;
    font-size: 25px;
    white-space: nowrap;
  }

  nav a {
    text-decoration: none;
    color: white;
  }
  header nav li:hover{
    font-weight: bold;
  }
  .separator {
    width: 100%;
    height: 1rem;
    display: flex;
    flex-direction: row;
    margin: 2rem 0;
  }

  .orange {
    background-color: #dc9c64;
    width: 33.33%;
    height: 1rem;
  }

  .green {
    background-color: #6eab27;
    width: 33.33%;
    height: 1rem;
  }

  .black {
    background-color: #1d1d1b;
    width: 33.34%;
    height: 1rem;
  }


  footer {
    background-color: #444444;
    color: white;
    display: flex;
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten si es necesario */
    justify-content: space-between;
    padding: 1rem;
    gap: 2vh;
  }

  /* Cada columna ocupará un 23% del ancho, para permitir un pequeño espacio entre ellas */
  footer .column {
    flex: 1 1 16%;

  }

  /* Ajustar imágenes dentro de las columnas */
  footer img {
    width: 65%;
    /* Las imágenes se ajustan al ancho de su contenedor */
    height: 60%;
  }

  /* Estilos de los textos */
  footer .column-text {
    flex: 1 1 23%;
    margin-top: 2.7%;
  }

  footer .img-two {
    margin-top: 1.5rem;
  }

  footer .img-column p {
    margin: 0;
    border-left: 1px white solid;
    padding-left: 1rem;

  }

  footer .img-column {
    margin-top: 1rem;
  }

  footer .last {
    flex: 1 1 23%;
    margin-left: 0%;
  }

  /* Estilos de los textos secundarios */
  footer .footer-text {
    font-size: 0.875rem;
    display: block;
  }

  footer .column-text p {
    margin-top: 1.3rem;
  }

  b {
    font-size: 1.1rem;
  }

  footer a {
    color: white;
    text-decoration: none;
  }

  footer .first {
    margin-left: 13%;
  }


  /* Media queries para pantallas más pequeñas */
  @media (max-width: 1800px) {
    header {
      height: 8rem;
    }


    header .img-memorial {
      width: 8rem;
    }

    header .img-fbuesa {
      width: 10rem;
    }

  }

  @media(max-width:1600px) {
    footer .first {
      margin-left: 5%;
    }

    footer .column p,
    footer .column-text span {
      font-size: 11px !important;
    }

    footer .column-text b {
      font-size: 12px !important;
    }

    footer .column-text p {
      margin-top: 1vw
    }

    footer img {
      width: 6.4rem;
    }

    footer .first {
      margin-top: 3.2vw;
    }

    footer .img-two {
      margin-top: 4vw;
    }
  }

  @media (max-height:400px) {
    header {
      position: static;
    }
  }

  /* Media queries para pantallas más pequeñas */
  @media (max-width: 1025px) {
    header {
      position: static;
    }

    footer .column p,
    footer .column-text span {
      font-size: 15px !important;
    }

    footer .column-text b {
      font-size: 16px !important;
    }

    footer {
      gap: 1rem;
      /* Reducir el espacio entre columnas */
      margin: 0;
      font-size: 100%;
    }

    footer img {
      width: 50% !important;
      height: 20% !important;

    }

    footer .column,
    footer .column-text {
      flex: 1 1 44%;
      /* Las columnas ocuparán el 48% del espacio disponible en pantallas más pequeñas */
    }

    footer .img-column p {
      text-align: left;
      padding-left: 0;
      border-left: none;
    }

    footer .img-two {
      margin-top: 6vw;
    }

    footer .first,
    footer .third {
      margin-left: 5%;
      margin-top: 3.5%;
    }

    header .img-memorial {
      width: 8rem;
    }

    main {
      display: flex !important;
      flex-direction: column-reverse;
    }

    .img-project {
      display: flex !important;
      flex-direction: row;
    }

    .img-logo {
      width: 100% !important;
      margin-bottom: 0 !important;
    }

    .text-project {
      display: flex !important;
      flex-direction: column;
    }

    .title {
      margin-top: 0 !important;
      justify-content: center !important;
      align-items: center !important;
      margin-bottom: 0 !important;

    }

    .title h1 {
      font-size: 5vw !important;
    }

    .text {
      align-items: center !important;
      justify-content: center !important;
      margin-left: 10% !important;
      margin-right: 10%;
      margin-bottom: 10% !important;
    }

    .img-logo.second {
      align-items: end !important;
    }

    .text p {
      text-align: center;
      font-size: 3vw;
    }
  }

  @media (max-width: 768px) {

    header {
      height: 7rem;
    }

    footer {
      gap: 1rem;
      /* Reducir el espacio entre columnas */
      margin: 0;
      font-size: 100%;
    }

    footer .img-column p {
      text-align: left;
      padding-left: 0;
      border-left: none;
    }

    footer img {
      width: 40%;
      height: 10%;
    }

    footer .first {
      margin-left: 5%;
      margin-top: 1%;
    }

    footer .third {
      margin-left: 5%;
    }

    footer span {
      font-size: 12px;
    }

    footer b {
      font-size: 15px;
    }

    footer .column p {
      font-size: 12px;
    }

    footer .column,
    footer .column-text {
      flex: 1 1 40%;
      /* En pantallas más pequeñas, cada columna ocupa el 100% */
    }

    footer .column-text {
      margin-left: 5%;
    }

    footer .img-column p {
      text-align: left;
      padding-left: 0;
      border-left: none;
    }


    footer img {
      width: 40% !important;
    }

    footer .img-two {
      margin-top: 4vw;
    }

    footer .footer-text {
      font-size: 0.75rem;
      /* Reducir el tamaño del texto en pantallas más pequeñas */
    }

    footer .column {
      margin-left: 5%;
    }

    footer .first {
      margin-top: 2%;
    }

    header .logo {
      width: 30%;
    }

    nav {
      width: 55%;
    }

    nav li {
      font-size: 15px;
    }

    header .logo {
      gap: 1vw;
    }

    header .logo img {
      max-width: 90%;
    }

    header .img-fbuesa {
      width: 7rem;
      height: 6rem;
    }

    header .img-memorial {
      width: 6rem;
      height: 4rem;
    }
  }

  @media (max-width: 470px) {
    header {
      height: 5rem;
    }

    footer .column {
      margin-left: 5%;
    }

    footer .column-text {
      margin-top: 0;
    }

    footer .column p,
    footer .column-text span,
    footer .column-text p {
      font-size: 15px;
    }

    footer .column-text b {
      font-size: 10px;
    }

    footer .column,
    footer .column-text {
      flex: 1 1 40%;
      /* En pantallas más pequeñas, cada columna ocupa el 100% */
    }

    footer img {
      width: 60% !important;
    }

    .logo img {
      width: 100%;
      height: 100%;
      max-width: 100% !important;
    }

    .logo {
      width: 50%;
    }

    .logo .img-memorial {
      max-width: 90%;
      width: 4rem;
    }

    .logo .img-fbuesa {
      max-width: 90%;
      width: 5rem;
    }

    header a {
      font-size: 70%;
    }


  }
  @media (max-width:570px){
    footer .column p,
    footer .column-text span,
    footer .column-text p {
      font-size: 2vw !important;
    }
    footer .column-text b {
      font-size: 2.5vw !important;
    }
  
  }




  /* Usamos grid en el contenedor main */
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Dos columnas de igual tamaño */
    gap: 2rem;
    /* Espacio entre las columnas */
    margin-top: 5%;
  }

  /* Usamos grid en los contenedores internos */
  .text-project,
  .img-project {
    display: grid;
    grid-template-rows: 1fr 1fr;
    /* Dos columnas de igual tamaño */
    gap: 1rem;
    /* Espacio entre las columnas */
  }

  /* Estilo de las imágenes dentro de img-project */
  main img {
    width: 60%;
  }

  /* Título dentro de .title */
  .title h1 {
    margin: 0;
    color: gray;
    white-space: nowrap;
    font-size: 3vw;
    font-family: "Outfit-bold";
    text-align: right;
    /* Centra el texto dentro del contenedor */
  }

  /* Estructura interna de .title */
  .title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 10%;
    margin-top: 24%;
  }

  /* Estilo para el texto descriptivo */
  .text {
    margin-left: 29%;
    text-align: right;
    margin-bottom: 20%;
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 1.3vw;
  }

  /* Estilo para las imágenes dentro de .img-logo */
  .img-logo img {
    width: 70%;
  }

  /* Asegura que las imágenes de .img-logo no se desborden y tengan un margen adecuado */
  .img-logo {
    width: 100%;
    margin-bottom: 10%;
  }

  .img-project {
    display: grid;
    grid-template-rows: 1fr 1fr;
    /* Dos filas de igual tamaño */
    grid-template-columns: 1fr;
    /* Solo una columna */
    gap: 1rem;
    position: relative;
    /* Para manejar el posicionamiento de los elementos dentro de este contenedor */
    margin-left: 10%;
  }

  /* Estilo para .first */
  .img-logo.first {
    grid-row: 1;
    /* Colocamos este elemento en la segunda fila (abajo) */
    display: grid;
    align-items: end;
  }

  /* Estilo para .second */
  .img-logo.second {
    grid-row: 2;
    /* Colocamos este elemento en la primera fila (arriba) */
    justify-self: start;
    /* Alineamos a la izquierda */
    display: grid;
    align-items: start;
  }