:root{
    --delft-blue: #3D405Eff;
    --glaucous: #6A729Dff;
    --columbia-blue: #C9D8EEff;
    --picton-blue: #00ABE4ff;
    --white: #FEFEFEff;
    --blue-crayola-2: #2373FFff;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
    -ms-overflow-style:none;
}
body{
   animation-timeline: scroll();
   background: rgb(201,216,224);
   background: linear-gradient(0deg, rgba(201,216,224,1) 0%, rgba(254,254,254,1) 88%);
}
.header{
    display: flex;
    padding: 2rem 6rem; 
    justify-content:space-between;
    z-index: 999;
}


.nav{
    display: flex;
    align-items: center;
}
.nav-list{
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 3rem;
    
}

header a{
    text-decoration: none;
}
.logo-click{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.logo-click img{
    max-width: 1521rem; 
}

.abrir-menu, 
.cerrar-menu{
    display: none;
}
.bi-list {
    font-size: 2rem; /* Cambia el tamaño del ícono con la clase bi-list */
}

.bi-x {
    font-size: 3rem; /* Cambia el tamaño del ícono con la clase bi-x */
}

@media screen and (max-width:715px){
    .header{
        padding: 1rem;
    }
    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 1.25rem;
        background-color: transparent ;
        cursor: pointer;
    }

    .abrir-menu {
        color: var(--delft-blue);
    }

    .cerrar-menu {
        color: var(--glaucous);
    }

    .nav {
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-color:var(--columbia-blue);
        padding: 2rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }
    .nav.visible {  
        opacity: 1;
        visibility: visible;
        height: 450px;
    }
        
    .nav-list {
        flex-direction: column;
        align-items: end;
    }
    .nav-list li a {  
        color:var(--delft-blue); 
    }  
}
.nav-list li{
    overflow: hidden;
}

.nav-list li a{
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--delft-blue);
    position: relative;
    &::after{
        content: "";
        position: absolute;
        left: -100%; /* Empieza fuera del elemento */
        bottom: 0;
        width: 100%;
        height: 2px; /* Alorange;ge;ge; del borde */
        background-color: var(--picton-blue);
        transition: left 0.5s ease;
    }
    &:hover::after{
        left: 0; /* Se mueve a la izquierda */
    }
}

.fixed-icons{
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    cursor: pointer;
    bottom: 0px;
    right: 1rem;
    bottom: 10px;
}
.fixed-icons a img{
    width: 50px;
    border-radius: 40px;
}
.fixed-icons :nth-child(2) { 
    animation: shake 0.80s 8;
}

@keyframes shake {
    0% { transform: skewX(-15deg); }
    10% { transform: skewX(15deg); }
    20% { transform: skewX(-15deg); }
    30% { transform: skewX(15deg); }
    40% { transform: skewX(0deg); }
}



 /* 
 
 HOME
 
 */
/* Contenedor principal */
.container {
  
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem 6rem; /* Espaciado interno del contenedor */
    gap: 120px;
}

/* Estilos del contenido del héroe */
.hero {
  
    font-family: 'Brush Script','Poppins', sans-serif;
    max-width: 800px;
    height: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    align-content: center;/* Asegura que el texto y el botón estén en columna */

  }

.hero h2 {
    font-size: 3.3rem;
    margin-bottom: 20px;
     color:var(--picton-blue); 
    text-shadow: 0 0 6px #fff;
    animation: scale 3s alternate infinite;
}
@keyframes scale{
  from{
    color: var(--picton-blue);
    scale:1.5;
  }
  to{
    color: var(--blue-crayola-2); 
    scale:2;
  }
}



.hero p {
    font-size: 1.5rem;
    line-height: 3;
    margin-bottom: 20px;
    color: var(--glaucous);
    text-align: center;
}
.hero p span{
    color: var(--delft-blue);
    text-shadow: 0 0 8px;
}

.hero a {
    display: inline-block; /* Permite aplicar padding y otras propiedades de tamaño */
    padding: 10px 20px; /* Espacio interno alrededor del texto del botón */
    margin: 20px 0; /* Espacio externo alrededor del botón */
    border: 2px solid var(--picton-blue); 
    border-radius: 6px; /* Bordes redondeados */
    background-color: var(--picton-blue); 
    color: white; /* Color del texto del botón */
    text-align: center; /* Centra el texto dentro del botón */
    text-decoration: none; /* Elimina el subrayado del enlace */
    font-size: 1.3rem; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    transition: background-color 0.3s, border-color 0.3s; /* Transiciones suaves para color de fondo y borde */
}

.hero a:hover {
    background-color: var(--blue-crayola-2);
    border-color: var(--blue-crayola-2);
}

.hero-img {
        display: flex;
        place-content: center;
        flex: 1 1 400px; /* Ocupa el resto del espacio disponible */
        width: 700px;
        height: 700px; /* Espacio entre el texto y la imagen */
}

.hero-img img {
    border-radius: 80px;
    width: 80%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para llenar el contenedor sin distorsionarla */
    object-position: center; /* Centra la imagen dentro del contenedor */
    top: 0;
    left: 0;
}


@media (max-width: 600px) {
  .container {
      flex-direction: column; /* Cambia la dirección a columna para apilar elementos verticalmente en pantallas pequeñas */
      align-items: center; /* Centra los elementos horizontalmente */
      padding: 0 1rem; /* Añade un poco de relleno horizontal para evitar que el contenido toque los bordes */
      height: 960px;
      justify-content: center;
      gap: 0px;
    }

  .hero {
    
      flex-direction: column; 
      max-width: 100%; /* Asegura que el héroe no se desborde */
      padding: 1rem; /* Padding reducido pero suficiente para móviles */
      text-align: center; /* Centra el texto */
      margin-bottom: 1rem; /* Añade un margen inferior para separar del contenido siguiente */
      justify-content: space-around
    }

  .hero h2 {

      font-size: 1.75rem; /* Tamaño del texto ajustado para móviles */
  }

  .hero p {
      font-size: 1.25rem; /* Tamaño del texto ajustado */
      line-height: 1.5; /* Line-height ajustado para mejorar la legibilidad */
      
  }

  .hero a {
      font-size: 1.125rem; /* Tamaño del texto ajustado para el botón */
      padding: 12px 20px; /* Espacio interno aumentado alrededor del botón */
      color: white; /* Color del texto del botón */
      border-radius: 5px; /* Bordes redondeados del botón */
      text-decoration: none; /* Elimina el subrayado del enlace */
      display: inline-block; /* Hace que el botón se ajuste al tamaño del contenido */
  }
  .hero-img {
      position: relative;
      display: flex; /* Centra la imagen horizontalmente */
      justify-content:start; /* Centra la imagen dentro del contenedor */ /* Margen vertical para separar la imagen del contenido */
      height: 300px;
      width: 300px;
    }

  .hero-img img {
      width: 300px;
      height: 300px;
      border-radius: 10px; /* Añade bordes redondeados a la imagen */
  }
}

@media only screen and (min-width: 601px) and (max-width: 1224px) {
    /* Ajustes para pantallas medianamente grandes */
    .container {
        padding: 1.5rem;
        flex-direction: column;
        gap: 0;
    }

    .hero {
        flex-direction: column;
        justify-content: space-around;
        max-width: 100%;
        text-align: center;
    }

    .hero h2 {
        font-size: 2.5rem; 
    }
    .hero p {
        font-size: 1.5rem;
        line-height: 1.8;
    }
    .hero-img img{
      max-width: 100%;
      height: 400px;
    }
}

main{
    
    margin-top: 40px;
    padding: 2rem 6rem;
    margin: 20 0;
    display: flex;
    flex-direction: column;
}
.QueHacemos {
    display: grid;
    width: 100%;
    grid-template-areas: 
        "head head"
        "icon1 icon2 "
        "text1 text2 "
        "icon3 icon4 "
        "text3 text4 ";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    justify-content: space-around;
    gap: 10px; 
   
}
@media screen and (max-width: 760px) {
    main{
        padding: 0;
    }
    .QueHacemos {
        grid-template-areas: 
            "head"
            "icon1"
            "text1"
            "icon2"
            "text2"
            "icon3"
            "text3"
            "icon4"
            "text4";
        grid-template-columns: 1fr; 
    }
}
.QueHacemos p {
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0; /* Elimina el margen por defecto de los párrafos */
    padding: 10px; /* Agrega padding para un mejor espaciado interno */
    text-align: center; /* Centra el texto dentro de cada área */
    color: var(--delft-blue);
}

.QueHacemos .icon-service {
    width: 150px;
    height: 150px;
    align-self: center;
    justify-self: center;
    max-width: 100%; /* Asegura que las imágenes no se desborden */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacio extra debajo de las imágenes */
    animation: jump-shaking 2s infinite;
}
.QueHacemos header {
    justify-self: center;
    align-self: center;
    grid-area: head;
    margin-bottom: 40px;
    & h3{
        font-size: 2.2rem;    
        color: var(--picton-blue);
        text-shadow: 0 0 6px var(--picton-blue);    
    }
    & h3 span:first-child{
      color:var(--glaucous);
      text-shadow: 0 0 6px var(--glaucous); 
    }

}
.QueHacemos .icono{
  width: 50px;
  height: 50px;
}

.QueHacemos .icon-service::nth-child(1) {
    grid-area: icon1;
}

.QueHacemos p:nth-of-type(1) {
    grid-area: text1;
}

.QueHacemos .icon-service::nth-child(2) {
    grid-area: icon2;
}

.QueHacemos p:nth-of-type(2) {
    grid-area: text2;
}

.QueHacemos .icon-service::nth-child(3) {
    grid-area: icon3;
}

.QueHacemos p:nth-of-type(3) {
    grid-area: text3;
}

.QueHacemos .icon-service::nth-child(4){
    grid-area: icon4;
}

.QueHacemos p:nth-of-type(4) {
    grid-area: text4;
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

/*----------------------------------------------------------------


CARRUSEL

*/


.Galeria-header{
  margin-top: 50px;
  display: flex;
  place-content: center;
  & h3{
    font-size: 2.2rem;    
    color: var(--picton-blue);
    text-shadow: 0 0 6px var(--picton-blue)    
  }
  & h3 span:first-child{
    color:var(--glaucous);
    text-shadow: 0 0 6px var(--glaucous); 
  }
}
.icono-galery{
  width: 50px;
  height: 50px;
}


.Galeria-description{
  color: var(--delft-blue);
  padding: 2rem;
  font-size: 1.3rem;
  text-align: center;
}

@keyframes tonext {
    75% {
      left: 0;
    }
    95% {
      left: 100%;
    }
    98% {
      left: 100%;
    }
    99% {
      left: 0;
    }
  }
  
  @keyframes tostart {
    75% {
      left: 0;
    }
    95% {
      left: -300%;
    }
    98% {
      left: -300%;
    }
    99% {
      left: 0;
    }
  }
  
  @keyframes snap {
    96% {
      scroll-snap-align: center;
    }
    97% {
      scroll-snap-align: none;
    }
    99% {
      scroll-snap-align: none;
    }
    100% {
      scroll-snap-align: center;
    }
  }
  
  
  *::-webkit-scrollbar {
    width: 0;
  }
  
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  
  *::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }
  
  * {
    -ms-overflow-style: none;
  }
  
  ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .carousel {

    position: relative;
    padding-top: 75%;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;
  }
  
  .carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
    

  .carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    counter-increment: item;
    background-size: cover;
    background-position:center center;
    background-repeat: no-repeat;
  }
  .carousel__slide:first-child{
    background-image: url(images/image-2.jpg);  
  }
  .carousel__slide:nth-child(2) {
    background-image: url(images/image-1.jpg);

  }
  .carousel__slide:nth-child(3) {
    background-image: url(images/image-3.jpg);

  }
  .carousel__slide:nth-child(4) {
    background-image: url(images/image-4.jpg);

  }
  .carousel__slide:nth-child(5) {
    background-image: url(images/image-5.jpg);

  }
  .carousel__slide:nth-child(6) {
    background-image: url(images/image-6.jpg);

  }
  
  
  .carousel__slide:before {
    content: counter(item);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-40%,70px);
    color: #fff;
    font-size: 2em;
  }
  
  .carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    scroll-snap-align: center;
  }
  
  @media (hover: hover) {
    .carousel__snapper {
      animation-name: tonext, snap;
      animation-timing-function: ease;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
  
    .carousel__slide:last-child .carousel__snapper {
      animation-name: tostart, snap;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
      animation-name: none;
    }
  }
  
  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {
    animation-name: none;
  }
  
  .carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  
  .carousel__navigation-list,
  .carousel__navigation-item {
    display: inline-block;
  }
  
  .carousel__navigation-button {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #333;
    background-clip: content-box;
    border: 0.25rem solid transparent;
    border-radius: 50%;
    font-size: 0;
    transition: transform 0.1s;
  }
  .carousel::before,
  .carousel::after,
  .carousel__prev,
  .carousel__next {
    position: absolute;
    top: 0;
    margin-top: 37.5%;
    width: 4rem;
    height: 4rem;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 0;
    outline: 0;
  }
  
  .carousel::before,
  .carousel__prev {
    left: .5rem;
  }
  
  .carousel::after,
  .carousel__next {
    right: .5rem;
  }
  @media screen and (max-width:750px){

    .carousel__viewport {
      overflow-y: hidden; /* Evita la barra vertical */
    }
    .carousel__snapper {
      height: auto; /* Ajusta la altura si es necesario */
    }
    .carousel::before,
    .carousel__prev {
      left: .5rem;
      display: none;
    }
    
    .carousel::after,
    .carousel__next {
      right: .5rem;
      display: none;
    }
  }
  .carousel::before,
  .carousel::after {
    content: '';
    z-index: 1;
    background-color:var(--columbia-blue);
    background-size: 4rem 4rem;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 4rem;
    text-align: center;
    pointer-events: none;
  }
  
  .carousel::before {
    background-image: url(images/left-arrow.png);
  }
  
  .carousel::after {
    background-image: url(images/right-arrow.png);
  }


  @media screen and (min-width: 1920px) {
    .carousel {
      box-sizing: border-box;
      height: 700px; /* Ajusta la altura del carrusel según tus necesidades */
      padding-top: 55%; /* Ajusta la relación de aspecto si es necesario */
    }
  
    .carousel__slide {
      height: 100%; /* Ocupa el 100% de la altura del viewport del carrusel */
      background-size: cover; /* Asegura que las imágenes se cubran completamente */
      background-position: center center; /* Centra la imagen */
    }
  
    .carousel__viewport {
      height: 100%; /* Ocupa el 100% de la altura del carrusel */
      overflow: hidden; /* Evita el desbordamiento */
    }
  }

/*  =================================================================

CONTACTOS

================================================================
*/

footer {
  background-color: var(--white);
  color: var(--picton-blue);
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.footer{
  margin-top: 40px;
  padding: 2rem 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 160px;
  box-sizing: border-box;
}

.logo-footer {
  width: 200px; /* Ajusta el tamaño del logo */
  height: auto;
}

.enlace-contactos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.enlace-contactos p {
  font-size: 1rem;
  margin: 0; 
}

.enlace-contactos a {
  display: flex;
  align-items: center;
}

.enlace-contactos img {
  width: 24px; 
  height: auto;
}

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

  .footer {
    flex-direction: column;
    align-items: center;
  }
  .logo-footer {
    width: 100px; 
  }

  .enlace-contactos {
    flex-direction: column;
    gap: 10px;
  }

  .enlace-contactos img {
    width: 30px; 
  }

  .enlace-contactos p {
    font-size: 0.875rem; 
  }
}