/* ==========================================================================
   1. ESTILOS GLOBALES Y RESET BÁSICO
   ========================================================================== */
/* Un reset simple para consistencia entre navegadores */
*, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
html {
     scroll-behavior: smooth;
}
body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     background-color: #f3f4f6; /* Equivalente a bg-gray-100 */
     color: #1f2937; /* Color de texto por defecto */
     line-height: 1.5;
}
a {
     color: inherit;
     text-decoration: none;
}
ul {
     list-style: none;
}
img {
     max-width: 100%;
     display: block;
}

/* ==========================================================================
   2. CLASES DE UTILIDAD GENERAL (Contenedor, Títulos, etc.)
   ========================================================================== */
.container {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1rem;
     padding-right: 1rem;
}
.somos-section {
     max-width: 1500px;
     margin: 60px auto;
}
.somos-section h2 {
     text-align: center;
     color: #658161;
     font-size: 45px;
     font-weight: bold;
}
.somos-section-container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 50px;
}
.somos-section-container > img {
     padding-left: 7em;
}
.somos-section-tittles {
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}
.somos-section-tittles h2 {
     color: #847F7F;
     text-shadow: #676060 1px 1px 1px;
     font-size: 40px;
     font-weight: normal;
}
.somos-section-tittles > div {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 80px;
     margin-top: 40px;
}
.somos-section-tittles > div h3 {
     color: #658161;
     font-size: 35px;
     font-weight: bold;
}
.somos-section-tittles > div button {
     background-color: #49AF25;
     border: 1px solid #707070;
     border-radius: 15px;
     width: 203px;
     height: 74px;
     cursor: pointer;
}
#menu {
     background-color: #070707;
     padding: 4rem 0;
}
/* Puntos de quiebre (breakpoints) para el contenedor */
@media (min-width: 640px) {
     .container {
          max-width: 640px;
     }
}
@media (min-width: 768px) {
     .container {
          max-width: 768px;
     }
}
@media (min-width: 1024px) {
     .container {
          max-width: 1024px;
     }
}
@media (min-width: 1280px) {
     .container {
          max-width: 1460px;
     }
}
.section-title {
     font-size: 1.875rem; /* text-3xl */
     font-weight: 700; /* font-bold */
     color: #1f2937; /* text-gray-800 */
     margin-bottom: 1.5rem; /* mb-6 */
     text-align: center;
}
.section-note {
     text-align: center;
     margin-top: 1rem; /* mt-4 */
     font-size: 0.875rem; /* text-sm */
     color: #4b5563; /* text-gray-600 */
}
.page-content {
     padding-top: 2rem; /* p-8 en md */
     padding-bottom: 2rem;
}
/* ==========================================================================
   3. ESTILOS DE COMPONENTES
   ========================================================================== */
/* --- Hero Section --- */
.hero-section {
     position: relative;
}
.hero-image {
     width: 100%;
     height: 16rem; /* h-64 */
     object-fit: cover;
}
.hero-overlay {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.3); /* bg-black bg-opacity-30 */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     padding: 1rem;
}
.hero-title {
     font-size: 1.875rem; /* text-3xl */
     font-weight: 700; /* font-bold */
     text-align: center;
}
.hero-subtitle {
     margin-top: 0.5rem; /* mt-2 */
     text-align: center;
}
/* --- Navegación --- */
.main-nav {
     background-color: #658161; /* bg-gray-800 */
     color: #ffffff;
     position: sticky;
     top: 0;
     z-index: 50;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
}
.nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 4rem; /* h-16 */
}
.nav-logo {
     font-size: 1.25rem; /* text-xl */
     font-weight: 700; /* font-bold */
}
.menu-toggle {
     background: none;
     border: none;
     color: #ffffff;
     cursor: pointer;
}
.menu-toggle:focus {
     outline: none;
}
.menu-toggle-icon {
     width: 1.5rem; /* w-6 */
     height: 1.5rem; /* h-6 */
}
/* Lógica de menú hamburguesa (original del usuario) */
.nav-links {
     display: none; /* Oculto por defecto en móvil */
}
.nav-links.active {
     display: block; /* Mostrar cuando está activo */
}
.nav-links-desktop {
     gap: 1rem; /* space-x-4 */
}
.nav-links-desktop a:hover {
     color: #d1d5db; /* hover:text-gray-300 */
}
.nav-links-mobile {
     padding-bottom: 0.5rem; /* py-2 */
}
.nav-links-mobile li a {
     display: block;
     padding: 0.25rem 1rem; /* px-4 py-1 */
     border-radius: 0.25rem; /* rounded */
}
.nav-links-mobile li a:hover {
     background-color: #374151; /* hover:bg-gray-700 */
}
/* --- Sección de Ofertas (Carrusel) --- */
.offers-section {
     margin-top: 2rem; /* my-8 */
     margin-bottom: 2rem;
}
.continuous-scroll-container {
     overflow: hidden;
     width: 100%;
     background-color: #d4e2d2; /* bg-gray-200 */
     padding: 1rem; /* p-4 */
     border-radius: 0.5rem; /* rounded-lg */
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}
.continuous-scroll-track {
     display: flex;
     width: calc(300px * 20); /* 300px por imagen * 20 imágenes */
     animation: scroll 60s linear infinite;
}
.continuous-scroll-track:hover {
     animation-play-state: paused;
}
.continuous-scroll-track img {
     width: 400px;
     height: 380px;
     object-fit: cover;
     margin-right: 15px;
     border-radius: 0.5rem;
}
@keyframes scroll {
     0% {
          transform: translateX(0);
     }
     100% {
          transform: translateX(calc(-300px * 10));
     }
}
/* --- Sección Destacados (Galería de fotos) --- */
.featured-section {
     margin-bottom: 3rem; /* mb-12 */
}
.photo-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem; /* gap-6 */
}
.photo-card {
     background-color: #ffffff;
     border-radius: 0.5rem; /* rounded-lg */
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
     overflow: hidden;
}
.photo-card img {
     width: 100%;
     height: 16rem; /* h-64 */
     object-fit: cover;
}
/* --- Sección de Productos --- */
.products-section {
     margin-bottom: 3rem; /* mb-12 */
}
.products-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem; /* gap-6 */
}
.product-card {
     background-color: #ffffff;
     border-radius: 0.5rem; /* rounded-lg */
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
     overflow: hidden;
     transition: transform 0.3s ease;
}
.product-card:hover {
     transform: scale(1.05);
}
.product-card-img {
     width: 100%;
     height: 12rem; /* h-48 */
     object-fit: cover;
}
.product-card-body {
     padding: 1rem; /* p-4 */
}
.product-card-title {
     font-size: 1.25rem; /* text-xl */
     font-weight: 600; /* font-semibold */
     margin-bottom: 0.5rem; /* mb-2 */
}
.product-card-text {
     color: #4b5563; /* text-gray-600 */
     font-size: 0.875rem; /* text-sm */
     margin-bottom: 0.75rem; /* mb-3 */
}
.btn-primary {
     display: inline-block;
     background-color: #658161; /* bg-blue-600 */
     color: #ffffff;
     padding: 0.5rem 1rem; /* px-4 py-2 */
     border-radius: 0.25rem; /* rounded */
     transition: background-color 0.15s ease-in-out;
}
.btn-primary:hover {
     background-color: #9BB797; /* hover:bg-blue-700 */
}
/* --- Sección Sobre Nosotros --- */
.about-section {
     margin-bottom: 3rem; /* mb-12 */
     background-color: #d4e2d2;
     padding: 1.5rem; /* p-6 */
     border-radius: 0.5rem; /* rounded-lg */
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.about-sectionV {
     margin-bottom: 3rem; /* mb-12 */
     background-color:  #658161;
     padding: 1.5rem; /* p-6 */
     border-radius: 0.5rem; /* rounded-lg */
     color: #FCFCFC;
}
.about-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem; /* gap-6 */
}
.about-image-wrapper {
     width: 100%;
}
.about-image {
     border-radius: 0.5rem; /* rounded-lg */
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
     width: 100%;
}
.about-text {
     color: #374151; /* text-gray-700 */
}

.about-text p {
     margin-bottom: 1rem; /* mb-4 */
}
.about-text p:last-child {
     margin-bottom: 0;
}

/* --- Footer --- */
.main-footer {
     background-color: #658161; /* bg-gray-900 */
     color: #d1d5db; /* text-gray-300 */
     padding-top: 2.5rem; /* pt-10 */
     padding-bottom: 1.5rem; /* pb-6 */
}
.footer-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 2rem; /* gap-8 */
     margin-bottom: 2rem; /* mb-8 */
}
.footer-column h3 {
     font-size: 1.25rem; /* text-xl */
     font-weight: 600; /* font-semibold */
     color: #ffffff;
     margin-bottom: 0.75rem; /* mb-3 */
}
.footer-column p, .footer-column li {
     margin-bottom: 0.5rem;
}
.footer-column a:hover {
     color: #ffffff;
}
.map-container {
     border-radius: 0.5rem; /* rounded-lg */
     overflow: hidden;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     /* Para mantener la proporción 16:9, si es necesario */
     /* position: relative; padding-bottom: 56.25%; height: 0; */
}
.footer-links {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
}
.footer-divider {
     border-color: #374151; /* border-gray-700 */
     margin-top: 1.5rem; /* my-6 */
     margin-bottom: 1.5rem;
}
.footer-copyright {
     text-align: center;
     font-size: 0.875rem; /* text-sm */
}
.banerTitulo {
     height: 115px;
     width: 100%;
     background-color: #D4E2D2;
}
.contenedorFormulario {
     width: 430px;
     height: 380px;
     padding: 20px;
     background-color: #658161;
     margin-left: 30px;
     border-radius: 0.5rem;
}
.contenedorTextoContacto {
     width: 330px;
     height: 350px;
     border-radius: 10px;
}
.tituloFormulario {
     font-size: 25px;
     color: white;
     font-weight: 500;
     text-align: center;
     margin: 15px 0px;
}
.formularioItem {
     width: 90%;
     margin: 5px 15px;
     height: 25px;
}
.itemComentario {
     width: 90%;
     margin: 5px 15px;
     height: 80px;
}
.BotonContacto {
     width: 130px;
     height: 45px;
     font-size: 20px;
     font-weight: 700;
     background-color: #D4E2D2;
     text-align: center;
     padding-top: 6px;
     border-radius: 10px;
     margin: 10px 35px;
     float: right;
     color: rgba(68, 48, 8, 1);
}
.BotonContacto:hover {
     background-color: #658161;
     color: #FBF5F6;
     transition-duration: 1s;
}
.sectionContacto {
     background-image: url("../images/desayunoFondo.jpg");
     object-fit: cover;
     height: 600px;
}
.tituloContacto {
     font-size: 40px;
     color: white;
     font-weight: 500;
     margin-top: 0px;
     margin-bottom: 15px;
}
.contenedorContacto {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 70px 50px;
}
.subtituloContacto {
     font-size: 25px;
     color: white;
     font-weight: 500;
     margin: 10px 0px;
}

.centrado{
     text-align: center;
}

.textoContacto {
     font-size: 18px;
     color: white;
     font-weight: 500;
     margin: 5px;
}
.telefonoContacto {
     text-decoration: none;
     color: white;
     margin: 0px;
}
/* ==========================================================================
   4. MEDIA QUERIES PARA RESPONSIVE DESIGN
   ========================================================================== */
@media (min-width: 640px) {
     /* sm */
     .products-grid {
          grid-template-columns: repeat(2, 1fr);
     }
    .sectionContacto {
          background-image: url("../images/desayunoFondo.jpg");
          object-fit: contain;
          height: auto;
     }
}
@media (min-width: 350px) {
    .sectionContacto {
          background-image: url("../images/desayunoFondo.jpg");
          object-fit: contain;
          height: auto;
     }
}
@media (min-width: 768px) {
     /* md */
     /* Hero */
     .hero-image {
          height: 24rem;
     } /* h-96 */
     .hero-title {
          font-size: 3rem;
     } /* text-5xl */
     .hero-subtitle {
          font-size: 1.25rem;
     } /* text-xl */
     /* Nav */
     .menu-toggle {
          display: none;
     }
     #menu-toggle-button {
          display: none;
     }
     .nav-links {
          display: flex;
     }
     .nav-links-mobile {
          display: none !important;
     }
     /* Secciones */
     .offers-section {
          margin-top: 3rem;
          margin-bottom: 3rem;
     }
     .photo-grid {
          grid-template-columns: repeat(2, 1fr);
     }
     .products-grid {
          grid-template-columns: repeat(3, 1fr);
     }
     .about-section {
          padding: 2.5rem;
     }
     .about-content {
          flex-direction: row;
          gap: 2.5rem;
     }
     .about-image-wrapper {
          width: 50%;
     }
     .about-text {
          width: 50%;
     }
     /* Footer */
     .footer-grid {
          grid-template-columns: repeat(2, 1fr);
     }
    .sectionContacto {
          background-image: url("../images/desayunoFondo.jpg");
          object-fit: contain;
          height: auto;
     }
    
}
@media (min-width: 1024px) {
     /* lg */
     /* Hero */
     .hero-image {
          height: 500px;
     } /* h-[500px] */
     /* Grids */
     .photo-grid {
          grid-template-columns: repeat(3, 1fr);
     }
     .products-grid {
          grid-template-columns: repeat(4, 1fr);
     }
     .footer-grid {
          grid-template-columns: repeat(3, 1fr);
     }
}