@charset "UTF-8";
/* CSS Document */

/*
Theme Name: patiotheme
Description: Tema privado desarrollado desde cero exclusivamente para la web de nuestro cliente , prohibida su copia o reproducción.
Author URI:  https://www.seowebb.es
Author:  seowebb
Version: 1.0
*/

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
    transform: transform;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
      transform: translateY(0);
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
      transform: translateY(1rem);
  }
}


@-moz-keyframes logosize {
  from {
    width: 170px; }
  to {
    width: 100px; } 
	}
@-moz-keyframes headersize {
  from {
    height: 225px; }
  to {
    height: 150px; } }
@-webkit-keyframes logosize {
  from {
    width: 170px; }
  to {
    width: 100px; } }
@-webkit-keyframes headersize {
  from {
    height: 225px; }
  to {
    height: 150px; } }
@keyframes logosize {
  from {
    width: 170px; }
  to {
    width: 100px; } }
@keyframes headersize {
  from {
    height: 225px; }
  to {
    height: 150px; } 
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}


.header_main{
    height: 225px;
}

.header_main .top-bar-widget a{
    color:#fff;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: .1rem;
}

/* --- Efecto de línea expansiva en el menú principal --- */

.header_main .nav-link {
    position: relative;
    padding-bottom: 5px; /* Espacio para la línea */
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .1rem;
}

/* Creamos la línea con un pseudoelemento ::after */
.header_main .nav-link::after {
    content: '';
    position: absolute;
    width: 0; /* Empieza con ancho cero */
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #292929; /* O pon tu color corporativo, ej: #007bff */
    transition: width 0.3s ease-in-out;
}

.header_main .nav-link.dropdown-toggle::after{
    background-color: transparent;
}

/* Al pasar el ratón (hover), la línea crece al 100% */
.header_main .nav-link:hover::after {
    width: 100%;
}

/* Para que la página activa también tenga la línea fija (opcional) */
.header_main .nav-item.current-menu-item .nav-link::after {
    width: 100%;
}

.header-fixed{		
	width: 100%;
	-webkit-transition: all ease 500ms;
  	-moz-transition: all ease 500ms;
 	transition: all ease 500ms;
	position: fixed;
	z-index: 9999;
	top: 0;
	background-color: #fff;
	 animation: headersize;
  animation-duration: 3s; 
    height: 150px;
}


.header-fixed .logo img {
    animation-name: logosize;
    animation-duration: 2s;
    width: 100px; }

#modal_top_movil .modal-content{
    border-radius: 0;
    background-color: #fff;
    height: 100%;
}


#modal_top_movil  .modal-dialog{
    max-width: 90%;
    width: 90%;
    margin: 0;
   
    height: 100%;
    transform: translate(0); transition: transform .2s;
}

	

.modal .modal-dialog-aside ul{
	list-style: none;
	
}

.modal .modal-dialog-aside li a,
.modal .modal-dialog-aside li a:hover{
	color:#024589;
    
}

.modal .modal-dialog-aside li{
    font-size:1.2rem;
    font-weight: 300;
    border-bottom:1px solid #024589;
    padding: 1rem 0;
    
}


#modal_top_movil.modal .modal-dialog-aside .modal-content{  height: 100%; border:0; border-radius: 0;}
#modal_top_movil.modal .modal-dialog-aside .modal-content .modal-body{ overflow-y: auto }
#modal_top_movil.modal.fixed-left .modal-dialog-aside{ margin-left:auto;  transform: translateX(100%); }
#modal_top_movil.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }

#modal_top_movil.modal.show .modal-dialog-aside{ transform: translateX(0);  }


.menu-movil .position-absolute{
    right: 10px;
    top:10px;
    z-index: 3333;
}

/* Estilo Elixir para la Carta */
.menu-type-title {
    font-size: 1.2rem;
    
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

/* Divisor sutil entre secciones */
.divider-section {
    width: 60px;
    height: 1px;
    background: var(--dorado);
    margin: 0 auto;
    opacity: 0.5;
}

/* Magia de 2 columnas para el listado */
.menu-items-container ul {
    list-style: none;
    padding: 0;
    column-count: 2; /* Crea las dos columnas de Elixir */
    column-gap: 80px;
}

.menu-items-container .listado{
    column-count: 2; /* Crea las dos columnas de Elixir */
    column-gap: 80px;
}

.menu-items-container .listado p{
     break-inside: avoid; /* Evita que un plato se corte a la mitad entre columnas */
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.menu-items-container .listado p.text-secondary{
    border-bottom: none;
}

.menu-items-container h4
{
    break-inside: avoid; /* Evita que un plato se corte a la mitad entre columnas */
    display: flex;
    justify-content: space-between;
    align-items: baseline;     
    margin-bottom: 1.5rem;
    /*border-bottom: 1px dashed #eee;*/
    padding-bottom: 5px;
}

.menu-items-container li strong,
.menu-items-container p strong{
   
    font-size: 1.1rem;
     color: #cc9933;
    font-weight: 300;
    
    
}

.menu-items-container p strong {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #cc9933;
    min-width: 10%;
    float: right;
   
}

.menu-items-container p strong::before{
    
}

.menu-section-img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 40px;
}



/* Responsive: Una sola columna en móviles */
@media (max-width: 992px) {
    .menu-items-container ul,
    .menu-items-container .listado{
        column-count: 1;
    }
}


/* Estilo para la galería Masonry */
.masonry-grid img {
    transition: transform 0.4s ease;
    cursor: pointer;
}

.masonry-grid img:hover {
    transform: scale(1.03);
}

.lead-text p {
    font-size: 1.15rem;
    color: var(--gris-texto);
    line-height: 1.8;
}


/* Estilos específicos para la Galería Masonry */
.masonry-item img {
    transition: transform 0.4s ease-in-out;
    cursor: pointer;
}

.masonry-item img:hover {
    transform: scale(1.05);
}

/* Asegurar que las tarjetas tengan buen aspecto en Masonry */
.masonry-item .card {
    background: transparent;
}


.masonry-item .card {
    height: auto !important; /* Masonry necesita que las alturas sean naturales */
    margin-bottom: 0; /* El margen lo controla el col (mb-4) */
}

.masonry-grid {
    display: block !important; /* Bootstrap row usa flex, Masonry prefiere block */
}
    
/* ==========================================================================
   ANIMACIONES Y EFECTOS (Lo que te faltaba)
   ========================================================================== */

/* 1. HOVER ZOOM: Para que las fotos cobren vida */
.hover-zoom {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.img-container:hover .hover-zoom, 
.hover-zoom:hover {
    transform: scale(1.08);
}

/* 2. TRANSITION HOVER: Para los bloques de Menú y Carta del Hero */
.transition-hover {
    transition: all 0.4s ease;
    position: relative;
    top: 0;
}

.transition-hover:hover {
    top: -10px; /* Sube ligeramente */
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

/* 3. ANIMATE ON SCROLL: Efecto de aparición suave */
/* Por defecto, los elementos están ocultos y un poco más abajo */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Clase que se añade mediante JS cuando el elemento es visible */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
.font-serif {
    font-family: 'Playfair Display', serif;
}



/* Estilo personalizado para los botones de la carta */
.custom-menu-pills {
    gap: 10px;
}

.custom-menu-pills .nav-link {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0; /* Estilo elegante recto */
    padding: 12px 20px;
    transition: all 0.3s ease;
}

.custom-menu-pills .nav-link:hover {
    background-color: var(--bs-secondary);
    color: var(--bs-primary);
}

.custom-menu-pills .nav-link.active {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Imagen/Icono dentro de la Pill */
.pill-icon {
    height: 40px; /* Tamaño pequeño y constante */
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Pone la imagen blanca por defecto */
    transition: transform 0.3s ease;
}

.custom-menu-pills .nav-link:hover .pill-icon {
    transform: scale(1.1);
}

/* Estado Activo: Cambiamos colores */
.custom-menu-pills .nav-link.active {
    background-color: var(--bs-secondary) !important; /* Tu color dorado/crema */
    color: var(--bs-primary) !important; /* Tu azul noche */
    border-color: var(--bs-secondary);
}

.custom-menu-pills .nav-link.active .pill-icon {
    filter: none; /* Si la imagen original ya tiene color, se verá aquí */
    /* Si quieres que se vea en el azul del texto, usa: filter: brightness(0) saturate(100%) invert(17%) sepia(21%) saturate(2326%) hue-rotate(185deg) brightness(95%) contrast(92%); */
}

.pill-title {
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: 5px;
    line-height: 1.2;
}


/* Animación de entrada extra */
.tab-pane.active {
    animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    
    .custom-menu-pills .nav-link {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}


/* Animación de entrada para el contenido */
.tab-pane.active {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}