/**
 * ============================================================================
 * 1. PANTALLA DE CARGA (SPLASH SCREEN)
 * ============================================================================
 */

/* Contenedor: Ocupa toda la pantalla */
#pantalla-carga {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    /* background-color: #2c2c2c; */
    background-image: url("https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/02/food-graph-brown.svg");
    background-size: cover;
    background-position: center;
    /* Fondo inicial */
    overflow: hidden;
    perspective: 1000px;
    /* Crea el espacio 3D para la sensación de profundidad */
}

/* Círculo: Centrado absoluto mediante top/left y translate */
#circulo-expansion {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 350px !important;
    height: 350px !important;
    background-color: #886644;
    border: 1px solid #fff;
    /* Fondo final */
    border-radius: 50% !important;
    z-index: 1 !important;
    /* Esto garantiza el centro perfecto */
    transform: translate(-50%, -50%) scale(1);
}

/* Logo: Exactamente la misma lógica para que encaje encima */
#logo-intro {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 300px !important;
    /* Tamaño inicial más grande para el splash */
    height: auto !important;
    transform: translate(-50%, -50%);
    z-index: 100000 !important;
    pointer-events: none;
    margin: 0 !important;
}

/* Ocultar el logo de destino inicialmente para que no se vea doble */
#logo-destino img {
    opacity: 1;
}

/**
 * ============================================================================
 * 2. FADE UP ANIMATION
 * ============================================================================
 */

.fade-up {
    opacity: 0;
    /* Empieza invisible */
    transform: translateY(40px);
    /* Empieza abajo */
}

/**
 * ============================================================================
 * 3. PARALLAX ANIMATION
 * ============================================================================
 */

/* Aseguramos que el elemento tenga un transform base para que parallax funcione */
[data-parallax] {
    will-change: transform;
    /* Optimización de rendimiento */
}

/**
 * ============================================================================
 * 4. FIXED HEADER
 * ============================================================================
 */
.site-header {
    position: fixed !important;
    /* top: 0 !important;
    left: 0 !important; */
    width: 100% !important;
    z-index: 9999 !important;
    transform: translateY(0);
    will-change: transform;
}


/**
 * ============================================================================
 * 5. ACCORDION
 * ============================================================================
 */

.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title:hover {
    opacity: 0.8;
}

.elementor-widget-n-accordion .e-n-accordion-item:nth-child(1) .e-n-accordion-item-title {
    background-image: url("https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/platos.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.elementor-widget-n-accordion .e-n-accordion-item:nth-child(2) .e-n-accordion-item-title {
    background-image: url("https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/cocktail.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.elementor-widget-n-accordion .e-n-accordion-item:nth-child(3) .e-n-accordion-item-title {
    background-image: url("https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/cafe.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title {
    background-color: rgb(214, 143, 50);
}


/* Boton ovalo */
.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title .e-n-accordion-item-title-header {
    border: 1px solid #ffffff;
    border-radius: 50%;
    height: 100px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/**
 * ============================================================================
 * 4. FORMULARIO DE RESERVA
 * ============================================================================
 */

.rtb-booking-form input,
#stripe-payment-form #cardElement {
    width: 100% !important;
    max-width: inherit !important;
}

/* Contenedor */
.reserva-form .rtb-booking-form {
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 28px !important;
    background: linear-gradient(180deg, #0f0f0f, #141414) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6) !important;
    color: #fff;
}

/* Labels */
.reserva-form label {
    font-weight: 600;
    margin-bottom: 6px;
    display: none;
}

/* Inputs y selects */
.reserva-form input,
.reserva-form select {
    width: 100%;
    padding: 16px 18px;
    border-radius: 5px;
    background: #1a1a1a;
    color: #fff;
    font-size: 15px;
    transition: all .25s ease;
    cursor: pointer;
}

.reserva-form #rtb-date.picker__input {
    background-image: url('https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/icon-calendar.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 48px;
}

.reserva-form #rtb-time.picker__input {
    background-image: url('https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/icon-time.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 48px;
}

.reserva-form select#rtb-party {
    background-image: url('https://xn--cafmoksha-d4a.com/wp-content/uploads/2026/01/icon-user.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 48px;
}

/* Placeholder */
.reserva-form input::placeholder {
    color: rgba(255, 255, 255, .6);
}

/* Hover + Focus */
.reserva-form input:hover,
.reserva-form select:hover {
    border-color: #A99886;
}

.reserva-form input:focus,
.reserva-form select:focus {
    outline: none;
    border-color: #EBDAC6;
}

.reserva-form .rtb-date,
.reserva-form .rtb-time,
.reserva-form .rtb-party {
    margin-bottom: 14px;
}

#rtb_recaptcha {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 40% !important;
}

.rtb-booking-form fieldset>div {
    margin-top: 0 !important;
}

/* Botón */
.reserva-form button {
    margin-top: 20px;
    width: 100%;
    padding: 16px;
    background: #EBDAC6;
    color: #000;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    transition: all .25s ease;
}

.reserva-form button:hover {
    background: #A99886;
    transform: translateY(-1px);
}

.reserva-form .rtb-form-submit button {
    margin-top: 0;
}

.reserva-form .btn-back {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    margin: 0px;
}

/* Ocultar comentarios */
.reserva-form .add-message {
    display: none;
}

/* Ocultar datos personales al inicio */
.reserva-form .rtb-contact {
    display: none;
}

/**
 * Ocultar y mostrar campos según el paso
 */
/* T{itulos pasos */
body.step-1 .titulo-paso-2 {
    display: none;
}

body.step-2 .titulo-paso-1 {
    display: none;
}

body.step-2 .reservation {
    display: none;
}

body.step-2 .rtb-contact {
    display: block;
}

/* Ocultar submit del plugin en paso 1 */
.reserva-form .rtb-form-footer {
    display: none;
}

/* Mostrar submit solo en paso 2 */
body.step-2 .rtb-form-footer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-top: 0 !important;
}

.rtb-booking-form fieldset {
    transition: opacity .25s ease, transform .25s ease;
}

body.step-2 .rtb-contact {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}

body.step-2 .reservation {
    opacity: 0;
    transform: translateY(-10px);
}

/* OCULTAR TÍTULOS CUANDO EXISTE MENSAJE */
.rtb-booking-form:has(.rtb-message) ~ .titulo-paso-1,
.rtb-booking-form:has(.rtb-message) ~ .titulo-paso-2,
.rtb-booking-form:has(.rtb-message) .titulo-paso-1,
.rtb-booking-form:has(.rtb-message) .titulo-paso-2 {
    display: none;
}