/* RESET TOTAL PARA EVITAR HUECOS BLANCOS */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f8fafc;
}

/* LA NAVEGACIÓN */
nav {
    height: 64px; /* Altura fija para control total */
}

/* EL CONTENEDOR PRINCIPAL */
#main-content {
    display: none;
    opacity: 0;
}

/* ESTO ES LO QUE ARREGLA EL ESPACIO ARRIBA */
.content-wrapper {
    padding-top: 64px; /* Exactamente la altura del nav */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* LA CABECERA CON MARCA DE AGUA */
.header-sucursal {
    position: relative;
    padding: 40px 20px; /* Espacio interno para que respire */
    text-align: center;
    overflow: hidden;
}

.marca-agua {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    opacity: 0.05;
    user-select: none;
    pointer-events: none;
}

.marca-agua span {
    font-size: 15vw; /* Tamaño dinámico según pantalla */
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
}

/* --- FIX DEL INTRO (Añade esto) --- */
#intro-screen {
    position: fixed;
    inset: 0; /* Cubre toda la pantalla */
    z-index: 9999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación del logo */
@keyframes logo-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.animate-logo-in { 
    animation: logo-in 1s ease-out forwards; 
}

/* --- MANTENER LO QUE YA FUNCIONA --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f8fafc;
}

#main-content {
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.content-wrapper {
    padding-top: 64px; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header-sucursal {
    position: relative;
    padding: 40px 20px;
    text-align: center;
    overflow: hidden;
}

.marca-agua {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    opacity: 0.05;
    pointer-events: none;
}

.marca-agua span {
    font-size: 15vw;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
}

/* Estilos de las cards de servicio */
.card-servicio {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.servicio-seleccionado {
    border-color: #0ea5e9 !important;
    background-color: #f0f9ff !important;
    transform: translateY(-5px);
}


/* // <!-- -----------------------------------------------------------seccion de empleado y horario--------------------------------------------------------------------- --> */

.card-empleado.border-sky-500 {
    border-color: #0ea5e9 !important;
    background-color: #f0f9ff !important;
}

.card-hora.bg-sky-500 {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

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



  /* Animación base de entrada */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  .animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  /* Segundo 1: Reserva tu espacio */
  .animate-step-1 {
    animation: fadeInUp 0.7s ease-out forwards;
    animation-delay: 1s;
  }

  /* Segundo 2: fácil e inteligente */
  .animate-step-2 {
    animation: fadeInUp 0.7s ease-out forwards;
    animation-delay: 2s;
  }

  /* Segundo 3: Barra de carga */
  .animate-fade-in-delayed {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 3s; 
  }