body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #ffffff;
}
h1 {
  font-family: "Sora", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 0px;
}
h2 {  
  font-family: "Sora", sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
  line-height: 1.3;
}
h3 {  
  font-family: "Sora", sans-serif;
  margin: 0rem;
  font-weight: 500;
  font-size: 1.2rem;
} 

ul {
  font-size: 0.7rem;
  list-style-position: outside;
  padding-left: 15px;
  margin: 0;
}
a:link {
  text-decoration: none;
  color: #757575;
}

a:visited {
  text-decoration: none;
  color: #757575;
}

a:hover {
  text-decoration: underline;
  color: #757575;
}

a:active {
  text-decoration: underline;
  color: #757575;
}

table {
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: left;
  font-size: 0.6rem;
  border: none;
}

table, td {
  border: none !important;
  color: #757575;
  padding: 1px;
  line-height: 1.5;
  vertical-align: baseline;
}

table, tr {
  border-top: 1px solid #ddd;
}

.table1 {
  height: auto;
}

table.table1 tr {
  border-top: 5px solid #111;
}
table.table1 td {
  color:  #fff;
  vertical-align: top;
}

.teta1 {
color:  #fff;
font-size: 0.7rem;
line-height: 1.1rem;
margin: 0px;
  }

/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid #eee;
  z-index: 999;
}
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1070px;
  margin: 0 auto;
  padding: 2rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  font-size: 1.1rem;
}

.material-symbols-outlined {
  margin-right: 0.4rem;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6rem;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 5px;
  position: absolute;
  left: -45px;
  top: 30px;
  z-index: -1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.galeria {
  margin: 7rem auto 0 auto;
  max-width: 1070px;
  padding: 15px 15px 50px 15px;
  resize: both;
  overflow: auto;
  display: grid;
  gap: 1rem;
  row-gap: 1rem;
  
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

/* Fondo individual para cada item */

.item1 {
  background-image: url('assets/ps01.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item2 {
  background-image: url('assets/ps02.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item3 {
  background-image: url('assets/ps03.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item4 {
  background-image: url('assets/ps04.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item5 {
  background-image: url('assets/ps05.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item6 {
  background-image: url('assets/ps06.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item7 {
  background-image: url('assets/ps07.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item8 {
  background-image: url('assets/ps08.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item9 {
  background-image: url('assets/ps09.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item10 {
  background-image: url('assets/ps10.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item11 {
  background-image: url('assets/ps11.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item12 {
  background-image: url('assets/ps12.jpg');
 width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item13 {
  background-image: url('assets/ps13.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item14 {
  background-image: url('assets/ps14.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item15 {
  background-image: url('assets/ps15.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item16 {
  background-image: url('assets/ps16.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item17 {
  background-image: url('assets/ps17.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item18 {
  background-image: url('assets/ps18.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.item19 {
  background-image: url('assets/ps19.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.item20 {
  background-image: url('assets/ps20.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item21 {
  background-image: url('assets/ps21.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item22 {
  background-image: url('assets/ps22.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item23 {
  background-image: url('assets/ps23.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item24 {
  background-image: url('assets/ps24.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item25 {
  background-image: url('assets/ps25.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item26 {
  background-image: url('assets/ps26.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item27 {
  background-image: url('assets/ps27.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item28 {
  background-image: url('assets/ps28.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item29 {
  background-image: url('assets/ps29.jpg');
  width: 165px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.item30 {
  background-image: url('assets/ps30.jpg');
  width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}

.item31 {
  background-image: url('assets/ps31.jpg');
   width: 346px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
}


.project-info {
  color: white;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  margin: 119px 0px 0px 0px;
  margin-top: auto;
}


.project-info .material-symbols-outlined {
font-size: 18px;
vertical-align: bottom;
}

/* === Popup === */
.popup {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.popup-content {
  background-color: #fff;
  margin: 5% auto;
  border-radius: 3px;
  max-width: 1000px;
  width: 95%;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease-in-out;
}

/* Botón cerrar popup */
.cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #a5a5a5;
  background: none;
  border: none;
  transition: background 0.2s;
}

.cerrar:hover {
  background: #fff;
}

/* Grid del popup */
.popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: flex-start;
}

/* Galería de imágenes en el popup */
.popup-galeria {
  display: flex;
  flex-direction: column;
}

.popup-galeria img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
/* Títulos dentro del popup */
.popup-texto h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* Ajuste general para el texto del popup */
.popup-texto {
  margin: 2rem;
  font-size: 0.8rem;
  color: #444;
  line-height: 1.6rem;
}


/* === footer === */
.foot {
  text-align: center;
  background-color: #111;
color: #ccc;
padding: 1rem 1.5rem;
font-family: 'Helvetica Neue', sans-serif;
font-size: 0.7rem;
line-height: 1.5;
}

/* === Responsive === */

@media (max-width: 768px) {

  .galeria{
margin-top: 100px;
  padding: 15px;
  }

  .imagen {
    order: -1;
  }

  .popup-grid {
    grid-template-columns: 1fr;
  }

  .popup-galeria {
    flex-direction: row;
    overflow-x: auto;
  }

  .popup-galeria img {
    min-width: 200px;
    height: auto;
  }

  .cerrar {
    top: 10px;
    right: 10px;
  }
 
}
 
/* === Formulario === */
.formulario {
  padding-top: 2px;
}

.formulario form {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.formulario input,
.formulario textarea {
  padding: 0.3rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  border:none;
  background-color: #111;
  color: #ccc;
}

.formulario button {
width: 60px;
color: #ddd;
padding: 6px;
border: 2px solid #ddd;
cursor: pointer;
background-color: #111;
margin-top: 5px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
}

.formulario button:hover {
  background-color: #000;
}

.acordeon {
      width: 100%;
    }

    .acordeon-item {
      border-bottom: 0px solid #ddd;
    }

    .acordeon-item:last-child {
      border-bottom: none;
    }

    .acordeon input[type="checkbox"] {
      display: none;
    }

    .acordeon label {
      display: block;
      padding-top: 10px;
      cursor: pointer;
    color: #f3f3f3;
    }

    .acordeon .contenido {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding: 0 15px;
    }

    .acordeon input[type="checkbox"]:checked ~ .contenido {
      max-height: 650px; /* Ajusta según necesidad */
      padding: 0px;
      text-align: justify;
      font-size: 0.6rem;
      line-height: 0.8rem;

    }

footer {
  background-color: #111;
  color: #f3f3f3;
  padding: 1rem 1.5rem;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 0.7rem;
  line-height: 1.7;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

.footer-block {
  flex: 1 1 200px; /* mínimo 200px por bloque */
  max-width: 260px;
}

.footer-block h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #fff;
  font-weight: bold;
}

.footer-block p {
  color: #ccc;
  margin: 0;
}

/* Responsivo */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-block {
    max-width: 100%;
  }
}