/* Reset general */
* {
    margin: 0; /* Elimina los márgenes predeterminados de todos los elementos */
    padding: 0; /* Elimina los rellenos predeterminados de todos los elementos */
    box-sizing: border-box; /* Hace que el ancho y alto incluyan el padding y border */
    font-family: "Questrial", sans-serif; /* Aplica la fuente 'Questrial' a todos los elementos */
}

body {
  font-family: "DM SANS", sans-serif; /* fuente alternativa */
  background-color: #203145;
  color: rgb(232, 238, 241);
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Pantalla de carga (cubre todo) */
#pantalla-carga {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #203145;
    color: rgb(232, 238, 241);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 1000;
    transition: opacity 1s ease-out; /* Para que desaparezca suavemente */
}

/* Barra de progreso */
#barra-container {
    width: 80%;
    max-width: 400px;
    height: 10px;
    background-color: #203145;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

#barra {
    width: 0%;
    height: 100%;
    background-color: rgb(232, 238, 241);
    transition: width 0.1s;
}

/* Contenido oculto al inicio */
#contenido {
    display: none;
    background-color: #203145;
    color: rgb(232, 238, 241);
    text-align: center;
}
a {
    text-decoration: none;
    text-decoration: #203145;
}
/* Header */
header {
    background: #203145; /* Fondo negro */
    padding: 10px 0; /* Espaciado vertical de 10px */
    display: flex; /* Usa flexbox para organizar los elementos */
    justify-content: space-between; /* Distribuye los elementos a los extremos */
    align-items: center; /* Alinea los elementos verticalmente */
    max-width: 100%; /* Se asegura de que el header ocupe todo el ancho */
}

nav {
    display: flex; /* Activa flexbox en la barra de navegación */
    align-items: center; /* Alinea los elementos verticalmente */
    width: 100%; /* Ocupa todo el ancho del contenedor */
    justify-content: space-between; /* Distribuye los elementos uniformemente */
    padding: 0 20px; /* Agrega un margen interno de 20px en los lados */
}

.year {
    font-size: 18px; /* Tamaño del texto */
}

.logo {
    height: 1.8rem; /* Define la altura del logo */
}

.contact-link {
    color: rgb(232, 238, 241); /* Color del texto en blanco */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

h1 {
    text-align: left;
    display: inline-block;
    font-weight: 400; /* Define un peso normal en la fuente */
    font-style: normal; /* Asegura que no tenga estilo cursivo */
    font-size: 1.5rem;
}
p {
    text-align: justify;
    display: inline-block;
    font-weight: 400; /* Define un peso normal en la fuente */
    font-style: normal; /* Asegura que no tenga estilo cursivo */
}
.overlay .azul {
  text-decoration: #203145;
}
/* TÍTULO PRINCIPAL */
.titulo {
    overflow: hidden; 
    max-width: 100vw;          /* Que no supere ancho viewport */
    margin-top: 1.5rem;
    margin-bottom: 5rem;
}
.titulo h2 {
    letter-spacing: -0.8vw; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 16vw; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    text-justify: distribute-all-lines;
}
.item h4 {
    letter-spacing: -0.8vw; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 12vw; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    text-justify: distribute-all-lines;
}
.hidden {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.show {
    opacity: 1;
    transform: translateY(0);
}
/* Contenedor principal */
.container {
    max-width: 95%; /* Ocupa casi todo el ancho de la pantalla */
    margin: 0px auto; /* Agrega margen superior e inferior de 40px y centra horizontalmente */
    padding: 0 20px; /* Margen interno a los lados */
}

/* Masonry en una columna en móviles */
.masonry {
    columns: 3; /* Divide el contenido en 2 columnas tipo masonry */
    column-gap: 40px; /* Espaciado entre las columnas */
}
.masonry2 {
        display: grid;
        column-gap: 40px; /* Espaciado entre las columnas */
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
}
@media (max-width: 1300px) {
    .masonry {
        columns: 2; /* Reduce a una columna en pantallas pequeñas */
    }
    .item h2 {
        letter-spacing: -1vw;
        font-size: 15vw; /* Ajusta el tamaño del título en pantallas más pequeñas */
    }
}

@media (max-width: 768px) {
    .masonry {
        columns: 1; /* Reduce a una columna en pantallas pequeñas */
    }
    .masonry2 {
        grid-template-columns: 1fr; /* Solo 1 columna */
    }
    .item h2 {
        letter-spacing: -1vw;
        font-size: 15vw; /* Ajusta el tamaño del título en pantallas más pequeñas */
    }
}

/* Estilos para imágenes y texto */
    .item.invisible {
        margin-bottom: 0px;
    }
.item {
    border-radius: 10px; /* Bordes redondeados */
    display: inline-block; /* Permite que las imágenes se comporten como bloques */
    width: 100%; /* Ocupa todo el ancho disponible */
    margin-bottom: 40px; /* Espaciado entre elementos */
    position: relative; /* Permite posicionar elementos internos de manera absoluta */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga */
    border-radius: 10px;
}

.item img {
    width: 100%; /* Hace que las imágenes sean responsivas */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacios no deseados alrededor de la imagen */
    transition: transform 0.3s, filter 0.3s; /* Efecto de transición suave en escala y filtro */
    border-radius: 10px;
}


/* Efecto hover */
.item:hover img {
    transform: scale(1.05); /* Aumenta la escala de la imagen al hacer hover */
    filter: blur(15px); /* Aplica un desenfoque ligero */
}

/* Overlay */
.overlay {
    position: absolute; /* Posiciona el overlay sobre la imagen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Organiza los elementos en columna */
    padding: 20px; /* Espaciado interno */
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.3s; /* Transición suave */
    z-index: 2;
}

/* Mostrar overlay al hacer hover */
.item:hover .overlay, .item.activo .overlay{
    opacity: 1; /* Hace visible el overlay al pasar el mouse */
}

/* Título arriba izquierda */
.overlay .h1 .p {
    align-self: flex-start; /* Alinea el título en la esquina superior izquierda */
}

.suelta h1 {
    max-width: 100%;
    overflow: hidden; 
    max-width: 100vw; 
    font-size: 1.4rem;
    text-align: justify;
    border-radius: 10PX;
    background-color: #203145;
    padding: 0rem 5rem;
}
/* servicios */
.servicios{
    text-align: justify;
    flex: 1 1 48%;
    border-radius: 10PX;
    background-color: #4E6A74;
    align-self: flex-start; /* Alinea el título en la esquina superior izquierda */
    max-width: 92%; /* Ocupa casi todo el ancho de la pantalla */
    margin: auto; /* Agrega margen superior e inferior de 40px y centra horizontalmente */
    padding: 40px 40px; /* Margen interno a los lados */
    margin-bottom: 2.5rem;
}
.servicios .item {
    margin-bottom: 0;
}
.contenedor-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
    margin: auto;
}

.servicios details {
        outline: none;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.servicios summary {
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    outline: none;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    transition: color 0.3s;
     gap: 10 px; /* <-- aquí está el espacio */
}

.servicios .flecha {
    transition: transform 0.3s ease;
    font-size: 1.3rem;
    display: inline-block; /* necesario para que transform funcione bien */
    transform: rotate(0deg); /* rota la flecha hacia abajo */
}

/* Al hacer hover en el summary, rota la flecha */
.servicios summary:hover .flecha {
    transform: rotate(45deg); /* 🡲 hacia la derecha */
}
.servicios a {
    text-decoration: none;
    color: #FF6F59;
}

/* Opcional: al pasar el ratón por encima */
.servicios a:hover {
    text-decoration: underline;
    color: #FF6F59; /* o un tono un poco más oscuro si quieres efecto visual */
}
/* Cuando el details está abierto, rota la flecha también */
.servicios details[open] summary .flecha {
    transform: rotate(90deg); /* 🡲 */
}
.servicios summary::after {
    position: absolute;
    right: 0;
    transition: transform 0.3s;
}

.servicios details[open] summary::after {
    transform: rotate(180deg);
}

.servicios h1 {
    margin-top: 10px;
    font-size: 1em;
    color: #cfd8e3;
}
/* Botón abajo derecha */
.overlay button {
    border: none; /* Elimina el borde */
    outline: none; /* Elimina el contorno */
    align-self: flex-end; /* Alinea el botón en la esquina inferior derecha */
    margin-top: auto;
    padding: 5px 10px; /* Agrega relleno */
    border-radius: 50px; /* Hace el botón redondeado */
    background: #203145; /* Fondo negro */
}

.overlay a {
    font-size: 1rem;
    background: #203145; /* Fondo negro */
    color:  rgb(232, 238, 241); /* Texto blanco */
}

/* SECCIÓN Slider */
.slider {
    width: 100%;
    position: relative;
}

.slides {
    will-change: transform;
    display: flex;
    width: 100%; /* 4 imágenes */
    animation: slide 16s infinite;
    border-radius: 10px;
}

.slide-item {
    display: flex;
    flex: 0 0 100%;
    position: relative;
    overflow: hidden;
    flex: 0 0 calc(100%); /* Compensa el espacio */
}

.slide-item img {
    border-radius: 0px;
    width: 100%;
    height: auto;
}

/* Animación del slider */
/* Animación hacia la izquierda */
.slides-izquierda {
    animation-name: slide-izquierda;
  }
@keyframes slide-izquierda {
    0% { transform: translateX(0%); }
    25% { transform: translateX(0%); }
    50% { transform: translateX(-100%); }
    75% { transform: translateX(-200%); }
    100% { transform: translateX(-300%); }
}

/* Animación hacia la derecha */
.slides-derecha {
    animation-name: slide-derecha;
  }
  
  @keyframes slide-derecha {
    0% { transform: translateX(-300%); }
    25% { transform: translateX(-300%); }
    50% { transform: translateX(-200%); }
    75% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
  }

/* SECCIÓN CONTACTO */
.link-container h1 {
    font-size: 1rem;
}
.link-container {
    width: 80%;
    text-align: center;
    margin-top: 6%;
    margin: auto auto;
  }
  #abrir-formulario:hover {
    color: rgb(255, 255, 255); /* o cualquier color que quieras al pasar el mouse */
  }
  #abrir-formulario {
    color: #4E6A74;
    letter-spacing: -0.3rem; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 4.5rem; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  #formulario-container {
    background-color: #203145;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #203145;
    z-index: 9999;
    overflow: auto;
    padding: 40px 20px;
    box-sizing: border-box;
  }
  
  form {
    max-width: 900px;
    margin: 0 auto;
    background-color:#203145;
    padding: 30px;
    border-radius: 15px;
  }
  
  form h2 {
    margin-top: 0;
    text-align: left;
  }
  
  label {
    text-align: left;
    display: block;
    margin: 15px 0 5px;
  }
  
  input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  
  button[type="submit"] {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #305669;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
  
  button[type="submit"]:hover {
    background-color: #8cd682;
  }
  
  #cerrar-formulario {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #E8EEF1;
  }
#contacto {

    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
  #quieres-cita {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  
  #seccion-cita {

    transition: all 0.3s ease;
  }
/* Redes sociales */
.social-links {
    width: 80%;
    gap: 10px; /* Espacio entre enlaces */
    margin: auto auto; /* Centra horizontalmente */
}

.social-links a {
    padding: 3px;
    color: #305669;
    text-decoration: none;
    font-size: 30px;
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-links a:hover i {
    color: #305669; /* o cualquier color que quieras al pasar el mouse */
    transform: scale(1.2); /* efecto de zoom suave */
  }

/* Footer */
footer {
    text-align: center; /* Centra texto en el footer */
    padding: 1rem 4rem; /* Espaciado arriba/abajo e izquierda/derecha */
    font-size: 0.9rem;
    background-color: #203145; /* Gris oscuro */
  }
/* 🌟 MEDIA QUERIES para RESPONSIVE */

@media (max-width: 1260px) {
    .item.invisible {
        margin-bottom: 70px;
    }
      .suelta h1 {
    padding: 1rem 3.4rem;
    font-size: 1.2rem;
    text-align: justify;
  }
        .titulo h2 {
    letter-spacing: -0.8vw; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 15vw; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    text-justify: distribute-all-lines;
}
}
@media (max-width: 965px) {
    .item.invisible {
        margin-bottom: 70px;
    }
  .suelta h1 {
    padding: 1rem 3rem;
    font-size: 1.2rem;
    text-align: justify;
  }
      .titulo h2 {
    letter-spacing: -0.8vw; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 15vw; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    text-justify: distribute-all-lines;
}
}

@media (max-width: 768px) {
        .item.invisible {
        margin-bottom: 0px;
    }
    .titulo h2 {
    letter-spacing: -0.8vw; /* Reduce el espacio entre letras para un diseño compacto */
    font-size: 14vw; /* Tamaño de fuente muy grande */
    font-weight: 400; /* Peso de la fuente normal */
    font-stretch: expanded; /* Hace la fuente más ancha */
    transform: scaleX(1.15); /* Aumenta el ancho de la fuente en un 20% */
    text-justify: distribute-all-lines;
}
    .container {
            margin: 0rem auto; /* Agrega margen superior e inferior de 40px y centra horizontalmente */

    }
    .contact-content {
        flex-direction: column; /* Apila los elementos en móvil */
        align-items: center;
        text-align: center;
    }

    .social-links {
        width: 100%;
        justify-content: center;
    }

    .contact-button {
        font-size: 18px;
        padding: 10px 25px;
    }

    .contact-form {
        width: 90%;
        height: 75vh;
    }
    .encima {
        font-size: 1rem;
        position: absolute;
        padding: 2% 2%;
        top: 0%;
        transform: translate(0%, 0%);
    }
}
@media screen and (max-width: 600px) {
    .item.invisible {
        margin-bottom: 0px;
    }
  .suelta h1 {
    padding: 0rem 2rem;
    font-size: 1rem;
    line-height: 1.4; /* Opcional: mejora la legibilidad en móviles */
    text-align: justify;
  }
      .servicios {
    max-width: 86%;}
    .carteleria {
    margin-bottom: 2.5rem;}
    .servicios summary {
    font-size: 1.1rem; /* o incluso 1rem si querés más compacto */
  }
}


@media (max-width: 480px) {
    .contact-form {
        width: 95%;
        height: 80vh;
    }
    .encima {
        font-size: 1rem;
        position: absolute;
        padding: 2% 2%;
        top: 0%;
        transform: translate(0%, 0%);
    }
    .social-links a {
        font-size: 24px;
    }

    .contact-button {
        font-size: 16px;
        padding: 8px 20px;
    }
      .servicios {
    max-width: 86%;}
    .servicios summary {
    font-size: 1.1rem; /* o incluso 1rem si querés más compacto */
  }

}