/* AddingtonCF-Medium */
@font-face {
    font-family: 'AddingtonCF-Medium';
    src: url(../fonts/AddingtonCF-Medium.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Proxima Nova Alt Black */
  @font-face {
    font-family: 'Proxima Nova Alt Black';
    src: url(../fonts/Proxima\ Nova\ Alt\ Black.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Proxima Nova Alt Light */
  @font-face {
    font-family: 'Proxima Nova Alt Light';
    src: url(../fonts/Proxima\ Nova\ Alt\ Light.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Proxima Nova Alt Reg */
  @font-face {
    font-family: 'Proxima Nova Alt Reg';
    src: url(../fonts/Proxima\ Nova\ Alt\ Reg.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Proxima Nova Reg */
  @font-face {
    font-family: 'Proxima Nova Reg';
    src: url(../fonts/Proxima\ Nova\ Reg.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
  }

:root {
    --green: #262b29ff;
    --brown: #8e6c53ff;
    --bone: #f3efecff;
    --transparent: #ffffff00;

    --h1-size: clamp(2rem, calc(1.5rem + 2.5vw), 3.5rem);
    --h2-size: clamp(1.75rem, calc(1.25rem + 2vw), 2rem);
    --h3-size: clamp(1.5rem, calc(1rem + 1.5vw), 2.25rem);
    --h4-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
    --h5-size: clamp(1.1rem, calc(0.75rem + 1vw), 1.5rem);
    --h6-size: clamp(1rem, calc(0.7rem + 0.8vw), 1.25rem);
    --p-size: clamp(0.875rem, calc(0.75rem + 0.5vw), 1.125rem);
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  color: var(--brown);
}

html {
    touch-action: manipulation;
}

body {
  font-family: 'Proxima Nova Alt Reg' ;
  font-size: var(--p-size);
  font-weight: 400;
  margin: 0;
}

a, .w3-bar-item {
  color: var(--bone);
  text-decoration: none;
}

h1,h2,h3 {
  color:var(--brown);
  border-bottom: solid 1px var(--brown);
  font-family: 'AddingtonCF-Medium';
  font-weight: 600;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }

#menu-1 {
  font-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
  transition: background-color 0.3s ease;
}
#menu-1 .w3-bar-item {
  color: var(--bone);
  text-decoration: none;
}
#menu-1 .w3-bar-item:hover {
  color:var(--brown);
  text-decoration: underline;
}
.transparente {
  background-color: var(--transparent);
}
.con-fondo {
  background-color: var(--green); /* Reemplaza con el color que quieras */
}

header > .bg {
  width:100%;
}
header > .logo {
  margin-left: 8rem;
  width: 45vw;

}

main {
  color: var(--green);
  background-color: var(--bone);
  padding: 0rem 8rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-right: -8rem;
}
main > .vignette {
  width:300vw;
}
main > content {
  font-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
}


.services {
  display: flex;
  flex-direction: row;
  /*align-items: top;
  justify-content:top;*/
  gap: 4rem;
  padding: 8rem;

  color: var(--bone);
  background-color: var(--green);
  font-size: 1.5rem;

  #service-photo { height:auto; width:100%; }
  ul { list-style-type:none; padding: 0; margin: 0; }
  ul li { font-weight: 600; width: 100%; padding:.5rem 1rem; }
  ul li:hover{ color:var(--green); cursor: pointer; background-color: var(--bone);}
  .service {
    display: none;
    font-size: 1.15rem;
    padding: 1rem;
  }
  .service > div {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
  } 
  .service > div::before {
    content: "⚫︎";
    position: absolute;
    left: 0;
    color: var(--brown);
    font-size: 1.2rem;
    line-height: 1;
  }

}
.photo-column {
  width: 40%;
}
.content-column {
  margin-top:-3rem;
  width: 60%;
}
/* Animación para DISSOLVE (aparecer) */
@keyframes dissolveDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación para DISSOLVE (desaparecer) */
@keyframes dissolveUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Clase para aplicar la animación al aparecer */
.dissolve-down {
  animation: dissolveDown 0.5s ease-out forwards;
  display: block !important; /* Forzar que se muestre durante la animación */
}

/* Clase para aplicar la animación al desaparecer */
.dissolve-up {
  animation: dissolveUp 0.5s ease-out forwards;
}

.our-clients {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 8rem;
  align-items: center;
  justify-content: center;

  color: var(--green);
  background-color: var(--bone);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .services {
    flex-direction: column;
    padding: 4rem;
  }
  .photo-column,
  .content-column {
    width: 100%;
  }
  .content-column > ul {
      margin-left: -1.5rem;
  }
}