.elementor-323 .elementor-element.elementor-element-8fc9774{--display:flex;--min-height:50vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--overlay-opacity:0.3;}.elementor-323 .elementor-element.elementor-element-8fc9774::before, .elementor-323 .elementor-element.elementor-element-8fc9774 > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-8fc9774 > .e-con-inner > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-8fc9774 > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-8fc9774 > .e-con-inner > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-8fc9774 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-323 .elementor-element.elementor-element-f1e0e42 .elementor-heading-title{color:#FFFFFF;}.elementor-323 .elementor-element.elementor-element-7dee70b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-323 .elementor-element.elementor-element-5c42053{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-323 .elementor-element.elementor-element-95413c7{text-align:start;}.elementor-323 .elementor-element.elementor-element-3eeb414{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-323 .elementor-element.elementor-element-1c7bdb6{--display:flex;}.elementor-323 .elementor-element.elementor-element-944a55b{--display:flex;}@media(max-width:767px){.elementor-323 .elementor-element.elementor-element-5c42053{--flex-wrap:wrap;}}/* Start custom CSS for container, class: .elementor-element-7dee70b *//* =========================================
   1. CONTENEDOR PRINCIPAL: GRID/FLEXBOX
========================================= */
/* Convertimos la lista principal y los servicios en flexbox para alinearlos */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-loop-room-type-attributes,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-facilities .mphb-attribute-value {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espacio entre cada tarjeta */
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

/* Ocultamos los títulos redundantes para mantener el estilo de iconos */
.elementor-323 .elementor-element.elementor-element-7dee70b h3.mphb-room-type-details-title,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-facilities .mphb-attribute-title {
    display: none !important; 
}

/* Ocultamos las comas de los servicios */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-facilities .mphb-attribute-value {
    font-size: 0 !important;
}

/* =========================================
   2. EL DISEÑO DE LA TARJETA (CARD)
========================================= */
/* Aplicamos el mismo estilo a los atributos generales y a cada servicio individual */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-loop-room-type-attributes > li:not(.mphb-room-type-facilities),
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-facilities .mphb-attribute-value > span {
    width: 125px; /* Ancho de la tarjeta */
    min-height: 115px; /* Alto de la tarjeta */
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px; /* Variación: Bordes más redondeados que en Tlaquepaque */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Efecto al pasar el ratón: Sombra y borde con el color de Casa Beatriz */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-loop-room-type-attributes > li:not(.mphb-room-type-facilities):hover,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-facilities .mphb-attribute-value > span:hover {
    border-color: #1a6f72;
    box-shadow: 0 8px 15px rgba(26, 111, 114, 0.1);
    transform: translateY(-3px); /* Pequeña elevación elegante */
}

/* =========================================
   3. ESTILOS DE TEXTO E ICONOS
========================================= */
/* Formateo de los textos dentro de la tarjeta */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-attribute-value,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-attribute-value a,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-attribute-title {
    color: #555555 !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    margin: 0;
    display: block;
}

/* Acomodo del icono de Font Awesome en la parte superior */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-attribute-title::before,
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-attribute-value a::before {
    display: block;
    font-size: 26px; /* Tamaño del icono */
    color: #1a6f72; /* Color verde azulado del hotel */
    margin-bottom: 8px; /* Espacio entre el icono y el texto */
    margin-right: 0 !important; 
}

/* =========================================
   4. ASIGNACIÓN DE ICONOS (FONT AWESOME)
========================================= */
/* Atributos Generales */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-total-capacity .mphb-attribute-title::before { content: "\f0c0"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-view .mphb-attribute-title::before { content: "\f06e"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-size .mphb-attribute-title::before { content: "\f31e"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-bed-type .mphb-attribute-title::before { content: "\f236"; font-family: "Font Awesome 5 Free"; font-weight: 900; }

/* Ocultar la categoría si no la quieres como tarjeta (opcional) */
.elementor-323 .elementor-element.elementor-element-7dee70b .mphb-room-type-categories { display: none !important; }

/* Servicios Individuales */
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-bano-privado a::before { content: "\f2cd"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-wifi a::before { content: "\f1eb"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-smart-tv a::before { content: "\f26c"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-ventilador a::before { content: "\f863"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-chapa-inteligente a::before { content: "\f023"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elementor-323 .elementor-element.elementor-element-7dee70b .facility-basicos-de-bano a::before { content: "\f2cc"; font-family: "Font Awesome 5 Free"; font-weight: 900; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3eeb414 *//* =========================================
   1. ESTILOS DEL PRECIO DESTACADO
========================================= */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-regular-price {
    font-size: 18px;
    color: #4a4a4a;
    background-color: #f8fafb;
    padding: 15px 20px;
    border-radius: 12px;
    border-left: 4px solid #1a6f72; /* Acento verde azulado */
    margin-bottom: 25px;
    display: inline-block;
    width: 100%;
}

.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-price {
    color: #1a6f72;
    font-size: 26px;
    font-weight: 700;
}

/* =========================================
   2. REDISEÑO DEL CALENDARIO MOTOPRESS
========================================= */
/* Quitar bordes feos y dar sombra de tarjeta al calendario */
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick {
    border: none !important;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    padding: 0;
    width: 100% !important; /* Para que sea responsivo */
}

/* Cabecera del calendario (Meses y Navegación) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month-header, 
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-nav {
    background-color: #1a6f72 !important; /* Verde azulado */
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
}

/* Enlaces de navegación (<Ant Hoy Sig>) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-nav a {
    color: #ffffff !important;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-nav a:hover {
    opacity: 1;
    background-color: #114c4e !important;
}

/* Días de la semana (Lu, Ma, Mi...) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month th, 
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month th span {
    background-color: #f4f6f7 !important;
    color: #555 !important;
    font-weight: 600;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
}

/* Celdas de los días */
.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month td {
    border: 1px solid #f9f9f9;
}

.elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month td span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 100%;
    border-radius: 4px;
    font-weight: 500;
}

/* Días disponibles (Fondo muy claro, texto verde) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-available-date {
    background-color: #f0f7f7 !important; 
    color: #1a6f72 !important;
    cursor: pointer;
    transition: all 0.2s;
}

/* Efecto al pasar el ratón por días disponibles */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-available-date:hover {
    background-color: #1a6f72 !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

/* Días pasados o no disponibles */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-past-date, 
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booked-date {
    background-color: #ffffff !important;
    color: #cccccc !important;
    text-decoration: line-through;
}

/* =========================================
   3. ESTILOS DEL FORMULARIO DE RESERVA
========================================= */
/* Separación de las etiquetas (Labels) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form label {
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
    display: block;
}

/* Estilo moderno para los campos de texto y .elementor-323 .elementor-element.elementor-element-3eeb414es (Dropdowns) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form input[type="text"],
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form select {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordes redondeados */
    font-size: 15px;
    color: #4a4a4a;
    background-color: #fafafa;
    transition: all 0.3s ease;
    box-shadow: none;
}

/* Efecto al hacer clic en un campo (Focus) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form input[type="text"]:focus,
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form select:focus {
    border-color: #1a6f72;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 111, 114, 0.15); /* Resplandor verde */
}

/* Acomodar Adultos y Niños en una sola fila (Grid) */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-booking-form > p {
    width: 100%;
    margin-bottom: 0;
}
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-adults-wrapper, 
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-children-wrapper {
    width: calc(50% - 7.5px) !important; /* Mitad del ancho menos el gap */
    display: inline-block;
}

/* =========================================
   4. BOTÓN DE "COMPROBAR DISPONIBILIDAD"
========================================= */
.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-reserve-btn {
    background-color: #1a6f72 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin-top: 10px;
}

.elementor-323 .elementor-element.elementor-element-3eeb414 .mphb-reserve-btn:hover {
    background-color: #114c4e !important; /* Verde más oscuro */
    box-shadow: 0 5px 15px rgba(26, 111, 114, 0.3);
    transform: translateY(-2px);
}
/* =========================================
   5. FIX: RESPONSIVIDAD PARA TABLET Y MÓVIL
========================================= */
@media (max-width: 992px) {
    /* Fuerza al contenedor principal a usar todo el ancho ignorando el estilo en línea de MotoPress */
    .elementor-323 .elementor-element.elementor-element-3eeb414 .datepick,
    .elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-multi {
        width: 100% !important;
    }

    /* Hace que cada mes (Julio, Agosto, etc.) tome el 100% del ancho y se apilen verticalmente */
    .elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    /* Expande la tabla de días para rellenar el espacio en blanco */
    .elementor-323 .elementor-element.elementor-element-3eeb414 .datepick-month table {
        width: 100% !important;
        table-layout: fixed; /* Obliga a que todos los días (columnas) midan exactamente lo mismo */
    }
}/* End custom CSS */