/* Estilos generales */

* , *::before , *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  html {
    font-size: 62.5%;
  }
    
  body {
    margin: 0 auto;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    background-color: hsl(0, 0%, 100%);
    color: hsl(211, 73%, 15%);
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-weight: 400;
  }

  h2 {
    font-size: 3rem;
    letter-spacing: 2px;
  }

  h3 {
    font-size: 2.2rem;
  }

  h4 {
    font-size: 2rem;
  }

  h5 {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
  }

  p, a {
    font-size: 1.4rem;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .title {
    margin-bottom: 30px;
    text-align: center;
  }

  .scroll-to-top {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    opacity: 0.7;
    z-index: 998;
    transition: opacity 5s ease-in-out;
  }

  .scroll-to-top.show {
    display: block;
  }
  
/* Estilos del topbar */

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 30px;
  }
  
    .topbar-logo {
      width: 150px;
    }

    .topbar-menu {
      position: relative;
    }
    
      .menu-hamburger {
        border: none;
        background: none;
        cursor: pointer;
      }
      
        .hamburger {
          width: 30px;
          height: auto;
          transition: transform 0.3s ease;
        }
    
      .menu-list {
        background-color: hsl(191, 45%, 56%);
        padding: 40px 20px 20px 20px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 200px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .menu-list.show {
        transform: translateX(0%);
      }

        .menu-list li {
          margin: 30px;
          flex-grow: 1;
        }

        .language {
          color: hsl(17, 79%, 62%);
        }

        .language:hover {
          color: hsl(0, 0%, 100%);
        }

        .list {
          flex: 1;
          white-space: nowrap;
          font-size: 1.6rem;
          color: hsl(0, 0%, 100%);
          transition: all 0.3s ease;
        }

        .menu-close {
          border: none;
          background: none;
        }

          .close {
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
            width: 30px;
          }

        .menu-language {
          display: flex;
          gap: 5px;
        }

        .language:not(.show) {
          visibility: hidden;
        }
        
        .menu-language:hover .language {
          visibility: visible;
        }

  
/* Estilos del hero */
  
  .hero {
    height: 100vh;
    width: 100%;
    background-image: url(img/foto-playa-3.JPG);
    background-color: hsl(211, 73%, 15%);
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-image 0.5s ease;
    overflow: hidden;
  }

    .hero-title {
      visibility: hidden;
      font-size: 1px;
    }

    .hero-logo-responsive {
      width: 140px;
      animation: zoom-in 1s forwards;
    }

      @keyframes zoom-in {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }

    .hero-logo {
      display: none;
    }

    .hero-contact {
      background-color: hsla(17, 79%, 62%, 0.487);
      border: 3px solid transparent;
      border-image: linear-gradient(to right, hsl(17, 79%, 62%) 60%, transparent 60%, transparent 70%, hsl(17, 79%, 62%) 70%);
      border-image-slice: 1;
      color: white;
      font-size: 1.6rem;
      font-weight: 600;
      padding: 10px 30px;
      margin-top: 40px;
    }

    .hero-contact:hover {
      background-color: hsl(17, 79%, 62%);
    }

  
/* Estilos de la sección localización */
  
  .location {
    display: flex;
    flex-direction: column-reverse;
    padding: 60px 30px;
    gap: 20px;
  }

    .location-info__links {
      margin: 30px 0 0 0;
      padding: 0;
    }
    
      .location-info__links a {
        margin-bottom: 20px;
        display: flex;
        gap: 20px;
        text-decoration: none;
        align-items: center;
      }

      .location-info__links p {
        color:hsl(211, 73%, 15%);
      }

      .location-info__links img {
        width: 30px;
      }
    
    .location-photo {
      width: 100%;
      height: auto;
    }

/* Estilos de la sección transporte */
  
   .transport {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px 60px 30px;
    height: fit-content;
    gap: 20px;
  }

    .transport a {
      text-align: center;
      display: flex;
      gap: 10px;
    }

    .transport p {
      color: hsl(191, 45%, 56%);
      font-size: 1.6rem;
    }

    .transport img {
      width: 8px;
      padding-bottom: 20px;
    }
  
/* Estilos de la sección horarios */
  
  .schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    background-color: hsl(17, 79%, 62%);
    height: 60vh;
    color: hsl(0, 0%, 100%);
    position: relative;
    z-index: 1;
    gap: 30px;
  }

    .schedule_title {
      display: flex;
      gap: 10px;
      align-items: center;
    }

      .schedule_title img {
        width: 40px;
      }

    .schedule_info {
      text-align: center;
    }

      .schedule_info h5 {
        color: hsl(211, 73%, 15%);
      }

      .schedule_info small {
        padding: 0;
        font-size: 1.2rem;
        font-style: italic;
      }
      
      .schedule_info p {
        font-size: 1.6rem;
        flex-basis: 33.33%;
        margin: 0;
      }

  .schedule_info .dias {
    margin-top: 10px;
  }
  
/* Estilos para la sección de servicios */

  .services {
    background-color: hsl(211, 73%, 15%);
    height: fit-content;
    padding: 60px 30px;
    color: hsl(0, 0%, 100%);
  }
    .services-columns {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .services-list {
      margin: 0;
      padding: 0;
    }

    .service {
      background-color: hsl(0, 0%, 100%);
      color:hsl(211, 73%, 15%);
      padding: 20px;
      width: 100%;
      margin: 20px 0 0 0;
    }

      .service-title {
        display: flex;
      }

        .service-title h5 {
          flex: 1;
          font-size: 1.8rem;
        }

        .service-arrow {
          border: none;
          background: none;
          cursor: pointer;
        }
      
        .service-arrow img {
          width: 20px;
        }
      
        .minus {
          display: none;
        }

      .service-info {
        padding: 30px 10px 20px 30px;
        display: none;
        list-style: circle;
        line-height: 1.5;
      }

        .service-info li {
          margin-top: 5px;
          font-size: 1.4rem;
        }


/* Estilos para la sección de equipo */

  .team {
    padding: 60px 30px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    .team-notarios {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 50px;
    }

      .team-notarios h5 {
        color: hsl(191, 45%, 56%);
        font-size: 1.8rem;
      }

      .team-notarios div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

    .team-other {
      max-width: 200px;
    }


    [class^='column'] > h5 {
      color: hsl(17, 79%, 62%);
      font-size: 1.8rem;
      margin-top: 50px;
    }

    .team-list {
      list-style: none;
    }

      .team-list a {
        display: flex;
        gap: 10px;
        text-decoration: none;
        color:hsl(211, 73%, 15%);
        font-size: 1.6rem;
      }

      .team-list p {
        margin: 0;
      }

      .team-list-name {
        font-size: 1.8rem;
        font-weight: 600;
      }

      .team-list img {
        width: 20px;
        height: 20px;
      }

      .team-list-name {
        font-size: 1.6rem;
        padding: 30px 0 20px 0;
      }

      .team-list-mail {
        padding-bottom: 10px;
      }


/* Estilos para la sección de noticias */

  .news {
    background-color: hsl(191, 45%, 56%);
    padding: 60px 30px 40px 30px;
    height: fit-content;
  }

  .news .title {
    color:hsl(0, 0%, 100%);
  }

  .slider-container {
    position: relative;
    overflow: hidden;
  }
  
  .news-slider {
    margin: 0;
    overflow: hidden;
  }
  
    .news-info {
      display: flex;
      transition: transform 0.3s ease-in-out;
    }
  
    .new {
      display: flex;
      flex: 0 0 calc(100% - 50px);
      margin: auto 25px;
      background-color: hsl(0, 0%, 100%);
      border-radius: 5px;
      overflow: hidden;
      justify-content: space-between;
      
      padding: 20px;
    }

      .new-info {
        width: 80%;
      }

      .new-info h5 {
        font-size: 1.6rem;
      }

      .new-info p {
        padding-top: 10px;
        font-size: 1.2rem;
      }

      .leer-mas img {
        width: 90%;
        padding-top: 5px;
      }
  
      .slider-navigation {
        transform: translateY(-180%);
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
      }
      
        .slider-prev,
        .slider-next {
          cursor: pointer;
        }
        
        .slider-prev {
          margin-right: 15px;
        }
        
        .slider-next {
          margin-left: 15px;
        }

        .slider-prev, .slider-next {
          width: 15px;
        }
  
        .slider-hidden {
          visibility: hidden;
        }

  

/* Estilos para la sección de galería */

  .galery {
    visibility: hidden;
  }


/* Estilos para el footer */

  .footer {
    background-color: hsl(211, 73%, 15%);
    color: hsl(0, 0%, 100%);
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
  }

  .footer-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    .footer h4 {
      margin-bottom: 30px;
    }
  
    .footer a {
      margin-bottom: 15px;
      color: #fff;
      text-decoration: none;
      font-family: 'Inter', sans-serif;
      font-weight: lighter;
      display: flex;
      gap: 10px;
      font-size: 1.6rem;
    }

    .footer p {
      margin: 0;
      font-size: 1.6rem;
    }

    .footer-contacto {
      margin-bottom: 30px;
    }
      .footer-contacto img {
        width: 15px;
      }

      .map {
        width: 100%;
        max-width: 250px;
        margin-top: 5px;
      }

      .map-desktop {
        display: none;
      }

    .footer-links img {
      margin-bottom: 20px;
      width: 10px;
    }


/* Estilos para el postfooter */
  
  .post-footer {
    background-color: #f2f2f2;
    font-size: 1.2rem;
    padding: 20px 30px 30px 30px;
    text-align: center;
  }
  
    .post-footer a {
      color: hsl(17, 79%, 62%);
      text-decoration: none;
      line-height: 2;
    }
  



/* Media queries */

@media screen and (max-width: 340px) {

  h4 {
    font-size: 1.6rem;
  }

  .team-notarios h5, [class^='column'] > h5 {
    font-size: 1.4rem;
  }

}

@media screen and (min-width: 480px) {

  /* topbar */

  .topbar-logo {
    width: 200px;
  }

  .hamburger {
    width: 40px;
  }

  .menu-list {
    display: block;
    height: fit-content;
  }
  
  /* hero */

  .hero {
    height: 70vh;
  }

  .hero-logo-responsive {
    margin-top: 20px;
  }

  .hero-contact {
    margin-top: 20px;
  }

  /* localizacion */

  .location {
    padding: 60px 90px;
  }

  /* servicios */

  .services {
    padding: 60px 90px;
  }

  /* equipo */

  .team {
    padding: 60px 90px;
  }

  /* footer */

  .footer {
    padding: 60px 90px;
  }

}

@media screen and (min-width: 700px) {

  /* hero */

  .hero {
    height: 100vh;
  }

  .hero-logo-responsive {
    display: none;
  }

  .hero-logo {
    display: block;
    width: 450px;
    animation: zoom-in 1s forwards;
  }
  
  /* localizacion */

  .location {
    flex-direction: row;
    padding: 60px;
    gap: 30px;
    justify-content: center;
  }

  .location-photo {
    height: auto;
    width: 300px;
  }

  .location-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* transporte */

  .transport {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    padding: 0 60px 60px 60px;
  }

  /* horarios */

  .schedule {
    flex-direction: row;
    padding: 60px;
    height: fit-content;
  }

  /* servicios */

  .services {
    padding: 60px;
  }

  /* equipo */

  .team {
    padding: 60px 60px 80px 60px;
  }

  .team-info {
    align-items: flex-start;
  }

  .team-notarios, .team-other {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-left: 50px;
  }

  .team-notarios div, .team-other div {
    width: 300px;
  }

  .team-notarios div {
    align-items: flex-start;
  }

  .team-other {
    max-width: 100%;
  }

  /* noticias */

  .news {
    padding: 60px;
  }

  .slider-container {
    padding: 0 10px;
  }

  .new {
    flex: 0 0 calc(50% - 30px);
    margin: auto 15px;
  }

  /* footer */

  .footer {
    padding: 60px;
  }

  .footer-columns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
  }

  .footer a {
    margin-bottom: 20px;
  }

  .post-footer a {
    font-size: 1.5rem;
  }

}

@media screen and (max-width: 770px) and (orientation: landscape) {

  .hero-logo-responsive {
    display: block;
  }

  .hero-logo {
    display: none;
  }  

}

@media screen and (min-width: 800px) {

  .services, .news {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .service, .slider-container, .slider-navigation {
    width: 600px;
  }
  

}

@media screen and (min-width: 1024px) {

  h2, .h2 {
    font-size: 4rem;
  }

  h3, .h3 {
    font-size: 2.8rem;
  }

  h4, .h4 {
    font-size: 2.6rem;
  }

  h5, .h5 {
    font-size: 2.4rem;
  }

  p, a {
    font-size: 1.6rem;
  }

  /* topbar */

  .header {
    display: flex;
    justify-content: center;
  }

  .topbar {
    padding-top: 60px;
    height: 80px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .topbar-logo {
    margin-left: 50px;
  }

  .menu-hamburger, .menu-close {
    display: none;
  }

  .menu-list {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: auto;
    padding: 0;
    background-color: transparent;
    transition: none;
  }

  .menu-list li {
    margin: 15px;
  }

  .list {
    font-size: 1.7rem;
    display: flex;
    align-items: center;
  }

  .list::before {
    content: '';
    display: none; /* Ocultar el icono inicialmente */
    position: absolute;
    width: 15px;
    height: 20px;
    background-image: url('img/icon-book.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    margin-left: -8px;
  }

  .list:hover {
    color: hsl(17, 79%, 62%);
  }

  .list:hover::before {
    display: inline-block;
    opacity: 1;
    transform: translateX(-60%);
    animation: rotateIcon 0.2s linear forwards;
  }

  @keyframes rotateIcon {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(25deg);
    }
  }

  .sticky-header {
    background-color: hsl(211, 73%, 15%);
    height: 90px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .sticky-header .topbar {
    padding-top: 15px;
  }

  .sticky-header .topbar-logo {
    width: 130px;
  }

  .sticky-header .list {
    font-size: 1.5rem;
  }

  /* hero */

  .hero-logo {
    width: 600px;
    margin-top: 100px;
  }

  .hero-contact {
    font-size: 2rem;
  }

  /* localización */

  .location {
    padding: 120px 0 60px 0;
    gap: 60px;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
  }

  .location-photo {
    width: 450px;
  }

  .location-info__links img {
    width: 40px;
  }

  .location-info__links p:hover {
    color:hsl(17, 79%, 62%);
  }

  /* transporte */

  .transport p {
    font-size: 1.8rem;
  }

  .transport p:hover {
    color: hsl(211, 73%, 15%);
  }

  .transport img {
    width: 12px;
  }

  /* horarios */

  .schedule {
    max-width: 900px;
    margin: 0 auto;
    height: 200px;
    padding: 60px;
    gap: 50px;
  }

  /* servicios */

  .services {
    background-color: hsl(211, 73%, 15%);
    padding: 180px 0 90px 0;
    margin-top: -100px;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .services-columns {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 900px;
  }

  .service {
    width: 440px;
  }

  .service-title h5 {
    font-size: 2rem;
  }

  /* equipo */

  .team {
    padding: 120px 0 90px 0;
    max-width: 900px;
    margin: 0 auto;
    gap: 20px;
  }

  .team-info {
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 20px;
  }

  .team-notarios, .team-other {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-left: 100px;
  }

  .team-notarios div, .team-other div {
    width: 430px;
  }

  .team-notarios {
    margin-top: 0;
  }

  .team-notarios h5, .team-other h5 {
    font-size: 2rem;
  }

  .team-list a:hover {
    color: hsl(17, 79%, 62%);
  }

  /* noticias */

  .news {
    padding: 120px 0 30px 0;
    gap: 20px;
  }

  .slider-container {
    width: 1100px;
    padding: 0 20px;
  }

  .slider-navigation {
    width: 1000px;
  }
  
  .news-slider {
    margin: 0 80px;
  }

  .news .title {
    margin-bottom: 60px;
  }
  
  .new {
    flex: 0 0 calc(33.33% - 20px);
    margin: auto 10px;
    padding: 15px;
  }
  
  .new-info {
    display: flex;
    flex-direction: column;
  }

  .new-info h5 {
    margin: 10px;
    flex: 1;
    font-weight: 400;
    font-size: 1.6rem;
  }
  
  .new-info p {
    margin: 10px;
    font-size: 1.3rem;
  }
  
  .leer-mas {
    margin: 10px;
  }
  
  .leer-mas img {
    width: 30px;
  }

  .slider-navigation {
      padding-bottom: 40px;
    }

  /* galeria */

  .galery {
    visibility: visible;
  }

  .galery-container {
    display: flex;
    overflow: hidden;
  }
  
  .image {
    height: 450px;
    width: 33.33%;
    background-size: cover;
    transition: background-image 0.5s ease;
  }
  
  .image1 {
    background-image: url(img/foto-6.jpg);
  }
  
  .image2 {
    background-image: url(img/foto-1.jpg);
  }
  
  .image3 {
    background-image: url(img/foto-4.JPG);
  }
  
  .image4 {
    background-image: url(img/foto-notaria-9.JPG);
  }
  
  .image5 {
    background-image: url(img/foto-2.jpg);
  }
  
  .image6 {
    background-image: url(img/foto-3.jpg);
  }

  /* footer */

  .footer {
    padding: 100px 0 90px 0;
    gap: 20px;
  }

  .footer-columns {
    max-width: 900px;
    margin: 0 auto;
  }

  .footer a {
    margin-bottom: 20px;
  }

  .footer-contacto a:hover {
    color: hsl(17, 79%, 62%);
  }
  
  .map {
    display: none;
  }

  .map-desktop {
    display: block;
    margin-top: 30px;
  }

  .footer-links a:hover {
    color:hsl(191, 45%, 66%);
  }

  .footer-links img {
    width: 12px;
  }

  .footer-contacto img {
      width: 20px;
  }
  
  .post-footer a {
    color: hsla(211, 74%, 15%, 0.749);
    font-size: 1.6rem;
  }
  
  .post-footer a:hover {
    color: hsl(17, 79%, 62%);
  }

  .scroll-to-top.show {
    display: none;
  }

}

@media screen and (min-width: 1024px) and (max-width: 1100px) {

    .list {
      font-size: 1.5rem;
    }

}

@media screen and (min-width: 1500px) {

  h3 {
    font-size: 3.2rem;
  }

  .topbar {
    max-width: 1300px;
  }

  .hero-logo {
    width: 800px;
  }

  .hero-contact {
    font-size: 2.4rem;
  }

  .location, .schedule, .services-columns, .team, .footer-columns {
    max-width: 1100px;
  }

  .location-photo {
    width: 550px;
  }

  .slider-container {
    width: 1300px;
    padding: 0 20px;
  }

  .slider-navigation {
    width: 1200px;
  }

  .service {
    width: 540px;
  }

  .team-notarios, .team-other {
    margin-left: 200px;
  }

  .team-notarios div, .team-other div {
    width: 530px;
  }

  .footer-columns {
    gap: 100px;
  }

}