/* Estilo general */
/* INICIO ENCABEZADO */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: linear-gradient(to bottom, hsla(182, 100%, 80%, 0.1), #eeee);
    color: #333;
    font-size: 1rem; /* 1rem = 16px por defecto */
}

header {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.5), transparent);
    padding: 1.25rem; /* 1.25rem = 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

header a {
    position: relative;
    text-decoration: none;
    font-size: 1.625rem; /* 1.625rem = 26px */
    color: #fff;
    font-weight: 700;
}

/* Asegurarse de que el enlace .logo no tenga borde ni subrayado */
.logo {
    position: absolute;  /* Coloca el logo de forma absoluta para que no afecte al flujo del contenido */
    top: 1%;  /* Ajusta la distancia desde la parte superior */
    left: 10%;  /* Ajusta la distancia desde la parte izquierda */
    padding: 0rem;  /* Elimina cualquier padding que pueda interferir */

}

/* Asegurarse de que la imagen no tenga borde ni contorno */
.logo img {
    width: 15%;  /* Cambia el tamaño de la imagen del logo */
    height: auto;  /* Mantiene la proporción original de la imagen */
    display: block;  /* Elimina el espacio en blanco debajo de la imagen */
    max-width: 15%;  /* Asegura que la imagen no se desborde si el contenedor cambia de tamaño */
    border: none;  /* Elimina cualquier borde alrededor de la imagen */
    outline: none;  /* Elimina cualquier contorno alrededor de la imagen */
    transition: transform 1s ease;  /* Transición suave para la transformación */
}

/* Efecto de hover para agrandar el logo y moverlo hacia abajo y la derecha */
.logo:hover img {
    transform: scale(1.2) translate(1.5rem, 1.5rem); /* Escala la imagen y la mueve */
}

a.logo {
    position: absolute;
    top: 2rem;
    right: 3rem;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    z-index: 10;
    pointer-events: none; /* El contenedor no recibe eventos */
}

a.logo img {
    width: 15%;  /* La imagen ocupa un 15% del ancho de la pantalla */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
    object-fit: contain; /* Mantiene la imagen dentro del contenedor sin recortes */
    border: none;
    outline: none;
    transition: transform 0.5s ease;
    pointer-events: auto; /* Solo la imagen es interactiva */
}

/* Efecto hover solo en la imagen */
a.logo img:hover {
    transform: scale(1.2) translate(0.5rem, 0.5rem);
}


.menu-container {
    margin-left: 10rem; /* Ajusta para dejar espacio para el logo */
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-120%, -50%);
    width: 15rem;
}

.menu-button .texto-recetario {
    font-size: 120%; /* Puedes ajustar este valor como 120%, 80%, etc. */
}

.menu-button {
    margin-top: 10%;
    background-color: hsla(0, 0%, 21%, 0.1); /* Gris oscuro con 50% de opacidad */
    border: none;
    color: white;
    padding: 0.8rem; /* 0.5rem = 8px */
    cursor: pointer;
    font-size: 150%;
    border-radius: 0.3125rem 0.3125rem 0 0; /* 0.3125rem = 5px */
    transition: background-color 0.3s ease;
}

.menu-button:hover {
    background-color: hsla(0, 0%, 90%, 0.3); /* Gris oscuro con 30% de opacidad */
}

.menu-content {
    display: none; /* Ocultar inicialmente */
    position: absolute;
    background-color: hsla(0, 0%, 20%, 0.5); /* Gris oscuro con 50% de opacidad */
    min-width: 82%; /* 10.4375rem = 167px */
    z-index: 1;
    box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.2); /* 0.5rem = 8px, 1rem = 16px */
    border-radius: 0 0 0.3125rem 0.3125rem;
    top: 100%; /* Asegurarse que aparezca debajo del botón */
    left: 0;
}

.menu-button:hover + .menu-content {
    display: block; /* Mostrar cuando el botón es hover */
}

.menu-content a {
    color: white;
    padding: 0.5rem 0.5rem; /* 0.75rem = 12px, 1rem = 16px */
    text-decoration: none;
    display: block;
    font-size: 100%; /* 1.1rem = 17.6px */
    border-radius: 0 0 0.3125rem 0.3125rem;
    transition: background-color 0.3s ease;
}

.menu-content a:hover {
    background-color: hsla(0, 1%, 83%, 0.5); /* Resaltar cuando el mouse pasa sobre el enlace */
}

.menu-container:hover .menu-content {
    display: block;
}

/* Estilo para el contenedor */
.contenedor {
    text-align: left; /* Alinea todo el contenido a la izquierda */
}

.button-buscar {
    top: 1rem;
    right: 8rem; /* o left: 1rem si lo querés del otro lado */
    z-index: 9; /* Muy alto para que quede encima de todo */
    padding: 0.6rem 1.25rem;
    background-color: hsla(0, 0%, 20%, 0.1);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin-right: 0; /* El margin ya no es necesario si estás usando position */
}


.button-buscar:hover {
    background-color: hsla(0, 0%, 90%, 0.3); /* Gris oscuro con 30% de opacidad */
}



/* Contenido principal */
.main-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3.75rem 1.875rem; /* 3.75rem = 60px, 1.875rem = 30px */
    background-color: #f9f9f9;
    box-shadow: 0px 0.75rem 1.5rem rgba(0, 0, 0, 0.12); /* 0.75rem = 12px, 1.5rem = 24px */
    margin: 0 auto;
    max-width: 75rem; /* 75rem = 1200px */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0.9375rem; /* 0.9375rem = 15px */
}


.header {
    position: relative; /* Habilita posicionamiento absoluto dentro del contenedor */
    text-align: center;
    height: 400px; /* Ajusta la altura según el tamaño de la imagen */
    background-color: transparent; /* Fondo opcional */
}

.header h1{
    font-size: 205%;
    position: absolute; /* Posiciona el texto encima de la imagen */
    top: 25%; /* Centra el texto verticalmente */
    left: 50%; /* Centra el texto horizontalmente */
    transform: translate(-50%, -60%); /* Ajusta la posición para centrar correctamente */
    color: white; /* Cambia el color del texto para que se vea sobre la imagen */
    z-index: 0; /* Asegura que el texto esté por encima de la imagen */
    margin: 0;
}

.header p {
    font-size: 120%;
    position: absolute; /* Posiciona el texto encima de la imagen */
    top: 45%; /* Centra el texto verticalmente */
    left: 50%; /* Centra el texto horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta la posición para centrar correctamente */
    color: white; /* Cambia el color del texto para que se vea sobre la imagen */
    z-index: 0; /* Asegura que el texto esté por encima de la imagen */
    margin: 0;
}

.header-image {
    position: absolute; /* Posiciona la imagen en el fondo */
    top: -25%;
    left: 0;
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Asegura que la imagen ocupe todo el alto del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra todo el área sin distorsionarse */
    z-index: -1; /* Coloca la imagen detrás del texto */
}


h2, p {
    text-align: center;
    font-family: 'script', sans-serif;
    font-weight: 600;
    margin: 1rem 0; /* 0.9375rem = 15px */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3{
    text-align: center;
    font-size: 2.625rem; /* 2.625rem = 42px */
    color: #0a979c;
    letter-spacing: 0.0625rem; /* 0.0625rem = 1px */
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 5rem;
}

h2 {
    font-size: 1.75rem; /* 1.75rem = 28px */
    color: #333;
    font-weight: 500;
    margin-top: 0.625rem; /* 0.625rem = 10px */
}

p {
    font-size: 1.125rem; /* 1.125rem = 18px */
    color: #7ecbce;
    font-weight: 400;
    line-height: 1.6;
    max-width: 56.25rem; /* 56.25rem = 900px */
    margin: 0 auto;
}

.main-content {
    margin-top: -7rem;
    margin-bottom: 5%;
}
/* Galería responsiva */
.preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 17.5rem = 280px */
    gap: 1rem; /* 1rem = 16px */
    justify-content: center;
    max-width: 75rem; /* 75rem = 1200px */
    margin: 1.25rem auto; /* 1.25rem = 20px */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.preview-item {
    border: 1px solid #ddd;
    border-radius: 0.5rem; /* 0.5rem = 8px */
    background-color: #ffffff;
    cursor: pointer;
    box-shadow: 0px 0.375rem 0.75rem rgba(0, 0, 0, 0.1); /* 0.375rem = 6px, 0.75rem = 12px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0.625rem; /* 0.625rem = 10px */
}

.preview-item:hover {
    transform: translateY(-0.3125rem); /* 0.3125rem = 5px */
    box-shadow: 0px 0.75rem 1.5rem rgba(0, 0, 0, 0.15); /* 0.75rem = 12px, 1.5rem = 24px */
}

.image-slider {
    width: 100%;
    height: 15.625rem; /* 15.625rem = 250px */
    overflow: hidden;
    position: relative;
    border-radius: 0.625rem; /* 0.625rem = 10px */
    margin-bottom: 0.9375rem; /* 0.9375rem = 15px */
}

.carousel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    border-radius: 0.625rem; /* 0.625rem = 10px */
}

.carousel-image.active {
    opacity: 1;
}

.image-description {
    padding: 1.25rem; /* 1.25rem = 20px */
    font-size: 1.375rem; /* 1.375rem = 22px */
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.6); /* 0.125rem = 2px */
    text-align: center;
    border-radius: 0.5rem; /* 0.5rem = 8px */
}

/* Relleno de botones */
button {
    background-color: #0a979c;
    color: #fff;
    font-size: 1rem; /* 1rem = 16px */
    padding: 0.75rem 1.5625rem; /* 0.75rem = 12px, 1.5625rem = 25px */
    border-radius: 1.875rem; /* 1.875rem = 30px */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.25rem; /* 1.25rem = 20px */
}

button:hover {
    background-color: #078f8f;
    box-shadow: 0px 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 0.25rem = 4px, 0.5rem = 8px */
}

/* Pie de página */
footer {
    background-color: #078f8f;
    color: white;
    text-align: center;
    padding: 1.875rem 1.25rem; /* 1.875rem = 30px, 1.25rem = 20px */
    position: bottom;
    width: 100%;
    margin: 0;  /* Elimina margen en todas las direcciones */
    margin-bottom: -15%;  /* Asegura que no haya margen en la parte inferior */
}


footer .footer-links {
    margin-top: 1rem; /* 0.9375rem = 15px */
}

footer .footer-links a {
    color: white;
    margin: 0 1rem; /* 0.9375rem = 15px */
    font-size: 1rem; /* 1rem = 16px */
    text-decoration: none;
}

footer .footer-links a:hover {
    color: #a8dadc;
}

footer h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem; /* 1rem = 16px por defecto */
    color: #f9f9f9;
}

footer a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del texto o de su contenedor */
}

footer a:hover {
    text-decoration: none; /* Asegura que no aparezca subrayado cuando el enlace se selecciona */
}

.contact-icons a img {
    width: 4.2rem;  /* Ajusta el tamaño de las imágenes */
    margin: 0.5rem;
    transition: transform 0.3s ease;
}

.contact-icons a img:hover {
    transform: scale(1.3);  /* Efecto al pasar el ratón */
}

@media (max-width: 30rem) {

.header h1 {
    font-size: 1.8rem;
    top: 15%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    }

.header p {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    font-size: 5vw; /* El tamaño del texto se adapta al ancho del viewport */
    }
    

.header-image {
    position: absolute; /* Posiciona la imagen en el fondo */
    top: -36%;
    left: 0;
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Asegura que la imagen ocupe todo el alto del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra todo el área sin distorsionarse */
    z-index: -1; /* Coloca la imagen detrás del texto */
    }

.menu-container {
    font-size: 0.5rem;

    margin-left: 8rem; /* Ajusta para dejar espacio para el logo */
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-160%, -50%);
    width: 8rem;
    }

.menu-content a {
    color: white;
    padding: 0.3rem 0.58rem; /* 0.75rem = 12px, 1rem = 16px */
    text-decoration: none;
    display: center;
    font-size: 0.6rem;
    border-radius: 0 0 0.3125rem 0.3125rem;
    transition: background-color 0.3s ease;
    width: 5.8rem;
    }


.button-buscar {
    display: block;
    margin-left: 12.5rem;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    width: 80%;
    }
}

.preview-container {
    margin-top: -3rem;

}