/* =========================================================
   AgendaNiva - PAGINA PUBLICA DE RESERVAS
   ========================================================= */


/* ==========================
   GENERAL
   ========================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: #1f1f1f;
}


/* ==========================
   FONDO RESERVA
   ========================== */

.pagina-reserva {
    position: relative;

    min-height: 100vh;

    padding:
        35px
        18px
        55px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 105, 180, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(190, 80, 130, 0.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #110d10,
            #20171d 55%,
            #120e11
        );
}


.fondo-reserva {
    position: fixed;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            135deg,
            #0e0b0d,
            #21171d
        );
}


/* ==========================
   HERO
   ========================== */

.hero-reserva {
    position: relative;

    width: 100%;
    max-width: 760px;

    margin:
        0
        auto;

    padding:
        24px
        28px
        35px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        28px
        28px
        0
        0;

    background:
        linear-gradient(
            135deg,
            rgba(25, 20, 23, 0.97),
            rgba(41, 27, 35, 0.95)
        );

    color: white;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.34);
}


.barra-superior-reserva {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;
}


.marca-principal {
    display: flex;

    align-items: center;

    gap: 12px;
}


.logo-agenda {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(255, 158, 204, 0.4);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #f4a0c6;

    font-size: 21px;
}


.marca-agenda {
    margin: 0;

    color: white;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.marca-principal div:last-child span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 11px;
}


.estado-online {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50px;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 12px;
}


.punto-online {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #54d68b;

    box-shadow:
        0 0 10px
        rgba(84, 214, 139, 0.7);
}


/* ==========================
   HERO CONTENIDO
   ========================== */

.contenido-hero {
    position: relative;

    z-index: 2;

    max-width: 560px;

    padding-top: 55px;
}


.etiqueta-hero {
    display: inline-block;

    margin-bottom: 12px;

    color: #f1a0c5;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2.5px;
}


.contenido-hero h1 {
    margin: 0;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 47px;

    line-height: 1.05;

    letter-spacing: -1px;
}


.texto-reserva {
    max-width: 500px;

    margin:
        17px
        0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 15px;

    line-height: 1.7;
}


.ventajas-reserva {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px
        18px;

    margin-top: 27px;
}


.ventajas-reserva div {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 12px;
}


.ventajas-reserva span {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background:
        rgba(241, 137, 185, 0.16);

    color: #f6a1c9;

    font-size: 11px;
}


/* ==========================
   DECORACIONES HERO
   ========================== */

.decoracion-hero {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.decoracion-hero-1 {
    width: 240px;
    height: 240px;

    top: -100px;
    right: -75px;

    background:
        radial-gradient(
            circle,
            rgba(238, 114, 172, 0.22),
            transparent 70%
        );
}


.decoracion-hero-2 {
    width: 180px;
    height: 180px;

    bottom: -80px;
    left: -40px;

    background:
        radial-gradient(
            circle,
            rgba(183, 82, 128, 0.15),
            transparent 70%
        );
}


/* ==========================
   CONTENEDOR FORMULARIO
   ========================== */

.contenedor-reserva {
    width: 100%;
    max-width: 760px;

    margin:
        0
        auto;

    padding:
        30px
        34px
        28px;

    border-radius:
        0
        0
        28px
        28px;

    background:
        #f9f7f8;

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, 0.32);
}


/* ==========================
   PROGRESO
   ========================== */

.progreso-reserva {
    display: flex;

    align-items: flex-start;

    width: 100%;

    margin-bottom: 38px;

    padding:
        0
        8px;
}


.paso-progreso {
    min-width: 55px;

    text-align: center;
}


.paso-progreso span {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 31px;
    height: 31px;

    margin:
        0
        auto;

    border:
        1px solid
        #d8d1d5;

    border-radius: 50%;

    background: white;

    color: #999096;

    font-size: 12px;

    font-weight: bold;
}


.paso-progreso.activo span {
    border-color: #dc5f9a;

    background:
        linear-gradient(
            135deg,
            #ed84b4,
            #d64d8d
        );

    color: white;

    box-shadow:
        0 7px 18px
        rgba(216, 77, 141, 0.25);
}


.paso-progreso p {
    margin:
        7px
        0
        0;

    color: #999096;

    font-size: 10px;
}


.paso-progreso.activo p {
    color: #c73d7c;

    font-weight: bold;
}


.linea-progreso {
    flex: 1;

    height: 1px;

    margin-top: 15px;

    background:
        #dfdadd;
}


/* ==========================
   ENCABEZADO FORM
   ========================== */

.encabezado-formulario {
    margin-bottom: 30px;

    text-align: center;
}


.encabezado-formulario > span {
    color: #d65892;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.encabezado-formulario h2 {
    margin:
        8px
        0
        7px;

    color: #261f23;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
}


.encabezado-formulario p {
    margin: 0;

    color: #8b8186;

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================
   BLOQUES
   ========================== */

.bloque-reserva {
    position: relative;

    margin-bottom: 17px;

    padding: 20px;

    border:
        1px solid
        #ece6e9;

    border-radius: 18px;

    background: white;

    box-shadow:
        0 5px 18px
        rgba(49, 29, 39, 0.035);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.bloque-reserva:hover {
    border-color: #e5d4dc;

    box-shadow:
        0 9px 25px
        rgba(49, 29, 39, 0.055);
}


.bloque-destacado {
    border-color:
        rgba(220, 95, 154, 0.20);

    background:
        linear-gradient(
            135deg,
            white,
            #fffafd
        );
}


/* ==========================
   TITULO BLOQUE
   ========================== */

.titulo-bloque {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 16px;
}


.icono-bloque {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        #fcebf3;

    color: #d85090;

    font-size: 18px;
}


.numero-bloque {
    margin:
        0
        0
        3px !important;

    color: #d25a91 !important;

    font-size: 9px !important;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.titulo-bloque h2 {
    margin: 0;

    color: #2b2427;

    font-size: 17px;
}


.titulo-bloque div:last-child > p:last-child {
    margin:
        4px
        0
        0;

    color: #94898f;

    font-size: 12px;
}


/* ==========================
   SELECTOR SERVICIO
   ========================== */

.selector-servicio {
    display: flex;

    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding:
        13px
        15px;

    border:
        1px solid
        #e6dfe3;

    border-radius: 14px;

    background: #fbf9fa;

    color: #292226;

    cursor: pointer;

    text-align: left;

    transition:
        0.2s ease;
}


.selector-servicio:hover {
    border-color: #dc75a5;

    background: #fffafd;

    transform:
        translateY(-1px);
}


.contenido-selector {
    display: flex;

    align-items: center;

    gap: 12px;
}


.icono-selector {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #f7dbe8,
            #fcecf4
        );

    color: #d85090;

    font-size: 17px;
}


.contenido-selector small {
    display: block;

    margin-bottom: 4px;

    color: #9b9196;

    font-size: 10px;
}


#textoServicioSeleccionado {
    display: block;

    color: #30282c;

    font-size: 14px;

    font-weight: 700;
}


.flecha-selector {
    color: #c94e87;

    font-size: 27px;

    line-height: 1;
}


.select-servicio-oculto {
    display: none !important;
}


/* ==========================
   PROFESIONAL
   ========================== */

.campo-select-moderno {
    position: relative;

    display: flex;

    align-items: center;
}


.campo-select-moderno .icono-campo {
    position: absolute;

    left: 15px;

    z-index: 2;

    color: #d15b91;

    pointer-events: none;
}


#profesional {
    width: 100%;

    appearance: none;

    padding:
        15px
        48px
        15px
        44px;

    border:
        1px solid
        #e6dfe3;

    border-radius: 14px;

    outline: none;

    background: #fbf9fa;

    color: #30282c;

    font-size: 14px;

    cursor: pointer;

    transition: 0.2s;
}


#profesional:hover,
#profesional:focus {
    border-color: #dc75a5;

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(220, 95, 154, 0.08);
}


.flecha-campo {
    position: absolute;

    right: 15px;

    color: #c94e87;

    font-size: 24px;

    pointer-events: none;
}


/* ==========================
   FECHA
   ========================== */

.campo-fecha-moderno {
    position: relative;

    display: flex;

    align-items: center;
}


.campo-fecha-moderno .icono-campo {
    position: absolute;

    left: 15px;

    color: #d15b91;

    pointer-events: none;
}


#fecha {
    width: 100%;

    padding:
        15px
        15px
        15px
        44px;

    border:
        1px solid
        #e6dfe3;

    border-radius: 14px;

    outline: none;

    background: #fbf9fa;

    color: #30282c;

    font-size: 14px;

    cursor: pointer;

    transition: 0.2s;
}


#fecha:hover,
#fecha:focus {
    border-color: #dc75a5;

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(220, 95, 154, 0.08);
}


/* ==========================
   HORARIOS
   ========================== */

.horarios-reserva,
#horarios {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    min-height: 45px;
}


.boton-horario {
    min-width: 88px;

    padding:
        11px
        15px;

    border:
        1px solid
        #e3dce0;

    border-radius: 11px;

    background: #fbf9fa;

    color: #4a4045;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        0.18s ease;
}


.boton-horario:hover {
    border-color: #db6da1;

    background: #fff5fa;

    color: #ca4c87;

    transform:
        translateY(-1px);
}


.boton-horario.seleccionado {
    border-color: #db5897;

    background:
        linear-gradient(
            135deg,
            #ed80b2,
            #d64e8e
        );

    color: white;

    box-shadow:
        0 7px 17px
        rgba(214, 78, 142, 0.23);
}


.estado-espera {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #9e9499;

    font-size: 12px;
}


.estado-espera span {
    color: #d25a91;

    font-size: 17px;
}


.estado-espera p {
    margin: 0;
}


/* ==========================
   DATOS CLIENTE
   ========================== */

.datos-cliente {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 13px;
}


.campo-reserva label {
    display: block;

    margin-bottom: 7px;

    color: #53484e;

    font-size: 11px;

    font-weight: 700;
}


.campo-con-icono {
    position: relative;

    display: flex;

    align-items: center;
}


.campo-con-icono > span {
    position: absolute;

    left: 14px;

    color: #d15b91;

    font-size: 16px;
}


.campo-reserva input {
    width: 100%;

    padding:
        14px
        14px
        14px
        42px;

    border:
        1px solid
        #e6dfe3;

    border-radius: 13px;

    outline: none;

    background: #fbf9fa;

    color: #30282c;

    font-size: 14px;

    transition: 0.2s;
}


.campo-reserva input::placeholder {
    color: #aca2a7;
}


.campo-reserva input:focus {
    border-color: #dc75a5;

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(220, 95, 154, 0.08);
}


/* ==========================
   ZONA CONFIRMACION
   ========================== */

.zona-confirmacion {
    margin-top: 26px;

    padding: 20px;

    border:
        1px solid
        #eadfe4;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fffafd,
            #fff
        );
}


.texto-confirmacion {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 17px;
}


.icono-seguro {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8f8ef;

    color: #32a56a;

    font-weight: bold;
}


.texto-confirmacion strong {
    display: block;

    color: #342b30;

    font-size: 13px;
}


.texto-confirmacion p {
    margin:
        3px
        0
        0;

    color: #958a90;

    font-size: 11px;
}


/* ==========================
   BOTON CONFIRMAR
   ========================== */

.boton-confirmar-reserva,
#btnReservar {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 13px;

    width: 100%;

    min-height: 52px;

    padding:
        14px
        20px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #ed7fb2,
            #d94e90
        );

    color: white;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(214, 78, 142, 0.23);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


#btnReservar:hover:not(:disabled) {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(214, 78, 142, 0.30);
}


#btnReservar:active:not(:disabled) {
    transform:
        translateY(0);
}


#btnReservar:disabled {
    background:
        linear-gradient(
            135deg,
            #ddd7da,
            #ccc5c9
        );

    color: #938a8f;

    cursor: not-allowed;

    box-shadow: none;
}


.flecha-confirmar {
    font-size: 20px;
}


/* ==========================
   MENSAJE RESERVA
   ========================== */

#mensajeReserva {
    margin-top: 18px;
}


.confirmacion-reserva {
    position: relative;

    padding:
        27px
        23px;

    overflow: hidden;

    border:
        1px solid
        #eedde5;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff6fa
        );

    color: #332a2f;

    box-shadow:
        0 10px 30px
        rgba(68, 37, 51, 0.07);
}


.confirmacion-reserva::before {
    content: "✓";

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 16px;

    border-radius: 50%;

    background:
        #e5f8ed;

    color: #38ad70;

    font-size: 22px;

    font-weight: bold;
}


.confirmacion-reserva h2 {
    margin:
        0
        0
        15px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
}


.confirmacion-reserva p {
    margin:
        8px
        0;

    color: #665a60;

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================
   PIE
   ========================== */

.pie-reserva {
    margin-top: 28px;

    padding-top: 22px;

    border-top:
        1px solid
        #ece5e8;

    text-align: center;
}


.pie-reserva p {
    margin:
        0
        0
        4px;

    color: #a3999e;

    font-size: 10px;
}


.pie-reserva strong {
    color: #d2528d;

    font-size: 12px;

    letter-spacing: 1.3px;
}


/* =========================================================
   MODAL DE SERVICIOS
   ========================================================= */

.fondo-modal-servicios {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 25px;

    background:
        rgba(8, 6, 7, 0.70);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.fondo-modal-servicios.abierto {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


body.modal-abierto {
    overflow: hidden;
}


/* ==========================
   VENTANA MODAL
   ========================== */

.modal-servicios {
    position: relative;

    width: 100%;
    max-width: 720px;

    max-height: 86vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #211a1e,
            #181316
        );

    color: white;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.55);

    transform:
        translateY(22px)
        scale(0.97);

    transition:
        transform 0.25s ease;
}


.fondo-modal-servicios.abierto
.modal-servicios {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================
   INDICADOR MODAL
   ========================== */

.modal-indicador {
    display: none;

    width: 43px;
    height: 4px;

    flex-shrink: 0;

    margin:
        10px
        auto
        0;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.25);
}


/* ==========================
   HEADER MODAL
   ========================== */

.modal-servicios-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding:
        25px
        27px
        20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.modal-paso {
    margin:
        0
        0
        7px !important;

    color: #ee8fbb !important;

    font-size: 9px !important;

    font-weight: bold;

    letter-spacing: 1.8px;
}


.modal-servicios-header h2 {
    margin: 0;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
}


.modal-servicios-header
div > p:last-child {
    margin:
        7px
        0
        0;

    color:
        rgba(255, 255, 255, 0.52);

    font-size: 12px;
}


/* ==========================
   CERRAR MODAL
   ========================== */

.cerrar-modal {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 25px;

    cursor: pointer;

    transition: 0.2s;
}


.cerrar-modal:hover {
    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    transform:
        rotate(5deg);
}


/* ==========================
   LISTA SERVICIOS
   ========================== */

.lista-servicios-modal {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 13px;

    padding: 20px;

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        #9f5075
        #211a1e;
}


.lista-servicios-modal::-webkit-scrollbar {
    width: 6px;
}


.lista-servicios-modal::-webkit-scrollbar-track {
    background: transparent;
}


.lista-servicios-modal::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background: #8f496a;
}


/* ==========================
   TARJETA SERVICIO
   ========================== */

.servicio-modal-card {
    position: relative;

    width: 100%;
    min-height: 195px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 17px;

    padding: 0;

    background-color: #31252b;

    background-position: center;

    background-size: cover;

    color: white;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.servicio-modal-card:hover {
    border-color:
        rgba(241, 137, 185, 0.55);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(0, 0, 0, 0.30);
}


/* ==========================
   FOTO GENERICA
   ========================== */

.servicio-modal-card.foto-generica {
    background:
        radial-gradient(
            circle at 30% 25%,
            #714258,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #3d2932,
            #1a1417
        );
}


/* ==========================
   CAPA FOTO
   ========================== */

.oscurecer-servicio {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(13, 8, 11, 0.92) 0%,
            rgba(13, 8, 11, 0.30) 60%,
            rgba(13, 8, 11, 0.08) 100%
        );

    transition: 0.2s;
}


.servicio-modal-card:hover
.oscurecer-servicio {
    background:
        linear-gradient(
            to top,
            rgba(13, 8, 11, 0.95) 0%,
            rgba(13, 8, 11, 0.22) 65%,
            rgba(13, 8, 11, 0.03) 100%
        );
}


/* ==========================
   TEXTO TARJETA
   ========================== */

.contenido-servicio-modal {
    position: absolute;

    z-index: 2;

    left: 18px;
    right: 18px;
    bottom: 17px;
}


.contenido-servicio-modal::after {
    content: "→";

    position: absolute;

    right: 0;
    bottom: 1px;

    display: flex;

    justify-content: center;
    align-items: center;

    width: 31px;
    height: 31px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    color: white;
}


.contenido-servicio-modal h3 {
    max-width:
        calc(100% - 40px);

    margin:
        0
        0
        5px;

    color: white;

    font-size: 18px;
}


.contenido-servicio-modal p {
    max-width:
        calc(100% - 40px);

    margin: 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    .pagina-reserva {
        padding:
            20px
            12px
            35px;
    }


    .hero-reserva {
        padding:
            22px
            23px
            31px;
    }


    .contenido-hero {
        padding-top: 45px;
    }


    .contenido-hero h1 {
        font-size: 39px;
    }


    .contenedor-reserva {
        padding:
            27px
            25px;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 560px) {

    .pagina-reserva {
        padding: 0;

        background: #151013;
    }


    /* HERO */

    .hero-reserva {
        border: none;

        border-radius: 0;

        padding:
            19px
            18px
            28px;

        box-shadow: none;
    }


    .logo-agenda {
        width: 38px;
        height: 38px;
    }


    .marca-agenda {
        font-size: 13px;
    }


    .estado-online {
        padding:
            7px
            9px;

        font-size: 10px;
    }


    .contenido-hero {
        padding-top: 38px;
    }


    .contenido-hero h1 {
        font-size: 36px;
    }


    .texto-reserva {
        font-size: 13px;
    }


    .ventajas-reserva {
        gap:
            9px
            13px;

        margin-top: 21px;
    }


    .ventajas-reserva div {
        font-size: 10px;
    }


    /* CONTENEDOR */

    .contenedor-reserva {
        padding:
            23px
            16px
            30px;

        border-radius:
            22px
            22px
            0
            0;

        box-shadow: none;
    }


    /* PROGRESO */

    .progreso-reserva {
        margin-bottom: 31px;

        padding: 0;
    }


    .paso-progreso {
        min-width: 42px;
    }


    .paso-progreso span {
        width: 27px;
        height: 27px;

        font-size: 10px;
    }


    .paso-progreso p {
        font-size: 8px;
    }


    .linea-progreso {
        margin-top: 13px;
    }


    /* TITULO */

    .encabezado-formulario h2 {
        font-size: 26px;
    }


    /* BLOQUES */

    .bloque-reserva {
        padding: 17px;

        border-radius: 16px;
    }


    .icono-bloque {
        width: 38px;
        height: 38px;
    }


    .titulo-bloque h2 {
        font-size: 16px;
    }


    /* DATOS */

    .datos-cliente {
        grid-template-columns:
            1fr;
    }


    /* HORARIOS */

    .boton-horario {
        flex:
            1
            1
            calc(33.333% - 9px);

        min-width: 72px;

        padding:
            11px
            8px;
    }


    /* MODAL */

    .fondo-modal-servicios {
        align-items: flex-end;

        padding: 0;

        background:
            rgba(8, 6, 7, 0.77);
    }


    .modal-servicios {
        max-width: none;

        max-height: 88vh;

        border-radius:
            25px
            25px
            0
            0;

        transform:
            translateY(60px);
    }


    .fondo-modal-servicios.abierto
    .modal-servicios {
        transform:
            translateY(0);
    }


    .modal-indicador {
        display: block;
    }


    .modal-servicios-header {
        padding:
            15px
            18px
            15px;
    }


    .modal-servicios-header h2 {
        font-size: 23px;
    }


    .lista-servicios-modal {
        grid-template-columns:
            1fr;

        padding:
            13px;

        gap: 11px;
    }


    .servicio-modal-card {
        min-height: 150px;

        border-radius: 15px;
    }


    .contenido-servicio-modal h3 {
        font-size: 17px;
    }

}


/* =========================================================
   CELULAR CHICO
   ========================================================= */

@media (max-width: 370px) {

    .estado-online {
        display: none;
    }


    .contenido-hero h1 {
        font-size: 32px;
    }


    .contenedor-reserva {
        padding:
            21px
            13px
            30px;
    }


    .bloque-reserva {
        padding: 15px;
    }


    .paso-progreso p {
        display: none;
    }


    .boton-horario {
        flex:
            1
            1
            calc(50% - 9px);
    }


    .servicio-modal-card {
        min-height: 140px;
    }

}
/* =========================================================
   PERSONALIZACION DEL NEGOCIO
   ========================================================= */

:root {
    --color-principal: #D94E90;
    --color-secundario: #191216;
}


/* ==========================
   FONDO GENERAL
   ========================== */

.fondo-reserva {
    background:
        linear-gradient(
            135deg,
            var(--color-secundario),
            #21171d
        );
}


.pagina-reserva {
    background:
        radial-gradient(
            circle at 15% 10%,
            color-mix(
                in srgb,
                var(--color-principal) 20%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 25%,
            color-mix(
                in srgb,
                var(--color-principal) 16%,
                transparent
            ),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--color-secundario),
            #20171d 55%,
            var(--color-secundario)
        );
}


/* ==========================
   HERO
   ========================== */

.hero-reserva {
    background-color:
        var(--color-secundario);

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--color-secundario) 96%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--color-secundario) 88%,
                #ffffff
            )
        );
}


/* ==========================
   LOGO DEL NEGOCIO
   ========================== */

.contenedor-logo-negocio {
    display: flex;

    align-items: center;

    margin-bottom: 18px;
}


.logo-negocio-reserva,
#logoNegocioReserva {
    display: block;

    width: 82px;
    height: 82px;

    object-fit: cover;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--color-principal) 55%,
            white
        );

    border-radius: 20px;

    background: white;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.25);
}


/* ==========================
   DETALLES DEL HERO
   ========================== */

.etiqueta-hero {
    color:
        var(--color-principal);
}


.logo-agenda {
    border-color:
        color-mix(
            in srgb,
            var(--color-principal) 45%,
            transparent
        );

    color:
        var(--color-principal);
}


.ventajas-reserva span {
    background:
        color-mix(
            in srgb,
            var(--color-principal) 17%,
            transparent
        );

    color:
        var(--color-principal);
}


.decoracion-hero-1,
.decoracion-hero-2 {
    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--color-principal) 22%,
                transparent
            ),
            transparent 70%
        );
}


/* ==========================
   PROGRESO
   ========================== */

.paso-progreso.activo span {
    border-color:
        var(--color-principal);

    background:
        var(--color-principal);
}


.paso-progreso.activo p {
    color:
        var(--color-principal);
}


/* ==========================
   TITULOS
   ========================== */

.encabezado-formulario > span,
.numero-bloque {
    color:
        var(--color-principal)
        !important;
}


.icono-bloque {
    color:
        var(--color-principal);

    background:
        color-mix(
            in srgb,
            var(--color-principal) 12%,
            white
        );
}


/* ==========================
   SERVICIO
   ========================== */

.selector-servicio:hover {
    border-color:
        var(--color-principal);
}


.icono-selector {
    color:
        var(--color-principal);

    background:
        color-mix(
            in srgb,
            var(--color-principal) 14%,
            white
        );
}


.flecha-selector {
    color:
        var(--color-principal);
}


/* ==========================
   PROFESIONAL
   ========================== */

.campo-select-moderno
.icono-campo {
    color:
        var(--color-principal);
}


#profesional:hover,
#profesional:focus {
    border-color:
        var(--color-principal);
}


.flecha-campo {
    color:
        var(--color-principal);
}


/* ==========================
   FECHA
   ========================== */

.campo-fecha-moderno
.icono-campo {
    color:
        var(--color-principal);
}


#fecha:hover,
#fecha:focus {
    border-color:
        var(--color-principal);
}


/* ==========================
   HORARIOS
   ========================== */

.boton-horario:hover {
    border-color:
        var(--color-principal);

    color:
        var(--color-principal);
}


.boton-horario.seleccionado {
    border-color:
        var(--color-principal);

    background:
        var(--color-principal);

    color: white;
}


.estado-espera span {
    color:
        var(--color-principal);
}


/* ==========================
   DATOS CLIENTE
   ========================== */

.campo-con-icono > span {
    color:
        var(--color-principal);
}


.campo-reserva input:focus {
    border-color:
        var(--color-principal);
}


/* ==========================
   BOTON RESERVAR
   ========================== */

.boton-confirmar-reserva,
#btnReservar {
    background:
        var(--color-principal);
}


/* ==========================
   PIE
   ========================== */

.pie-reserva strong {
    color:
        var(--color-principal);
}


/* ==========================
   MODAL SERVICIOS
   ========================== */

.modal-paso {
    color:
        var(--color-principal)
        !important;
}


.servicio-modal-card:hover {
    border-color:
        var(--color-principal);
}


/* ==========================
   CELULAR
   ========================== */

@media (max-width: 560px) {

    .pagina-reserva {
        background:
            var(--color-secundario);
    }


    .logo-negocio-reserva,
    #logoNegocioReserva {
        width: 68px;
        height: 68px;

        border-radius: 17px;
    }

}

/* =========================================================
   PÁGINA PÚBLICA DEL NEGOCIO
   ========================================================= */

.pagina-negocio {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 100vh;

    color: #ffffff;
    background:
        var(
            --color-secundario,
            #191216
        );
}


/* PORTADA */

.portada-negocio {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100vh;
    padding: 0 7%;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(18, 10, 15, 0.96) 0%,
            rgba(18, 10, 15, 0.78) 48%,
            rgba(18, 10, 15, 0.35) 100%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(217, 78, 144, 0.28),
            transparent 45%
        );
}


/* NAVEGACIÓN */

.navegacion-negocio {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 86px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);
}


.marca-negocio-publica {
    display: flex;
    align-items: center;
    gap: 13px;
}


.logo-negocio-publico {
    width: 52px;
    height: 52px;

    object-fit: cover;

    border:
        2px solid
        rgba(255, 255, 255, 0.65);

    border-radius: 50%;
}


.marca-negocio-publica strong {
    font-size: 22px;
    letter-spacing: 0.5px;
}


.enlaces-negocio {
    display: flex;
    align-items: center;
    gap: 28px;
}


.enlaces-negocio a {
    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: color 0.2s ease;
}


.enlaces-negocio a:hover {
    color:
        var(
            --color-principal,
            #d94e90
        );
}


/* CONTENIDO DE LA PORTADA */

.contenido-portada-negocio {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: min(650px, 100%);
    min-height: calc(100vh - 86px);
    padding: 70px 0 90px;
}


.etiqueta-negocio {
    margin-bottom: 18px;

    color:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
}


.contenido-portada-negocio h1 {
    max-width: 640px;
    margin: 0 0 22px;

    color: #ffffff;

    font-family: Georgia, serif;
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 500;
    line-height: 0.98;
}


.contenido-portada-negocio p {
    max-width: 520px;
    margin: 0 0 34px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;
    line-height: 1.7;
}


/* BOTONES */

.botones-portada {
    display: flex;
    align-items: center;
    gap: 14px;
}


.boton-comenzar-reserva,
.boton-contacto-publico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    padding: 0 28px;

    border-radius: 15px;

    font-size: 15px;
    font-weight: 750;
    text-decoration: none;

    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.boton-comenzar-reserva {
    border: none;

    color: #ffffff;
    background:
        var(
            --color-principal,
            #d94e90
        );

    box-shadow:
        0 15px 40px
        rgba(217, 78, 144, 0.30);
}


.boton-contacto-publico {
    border:
        1px solid
        rgba(255, 255, 255, 0.45);

    color: #ffffff;
    background:
        rgba(255, 255, 255, 0.04);
}


.boton-comenzar-reserva:hover,
.boton-contacto-publico:hover {
    transform: translateY(-2px);
}

/* =========================================================
   SERVICIOS PÚBLICOS
   ========================================================= */

.servicios-publicos {
    padding: 95px 7%;

    color: #24171f;
    background: #fff9fc;
}


.etiqueta-seccion-publica {
    display: block;
    margin-bottom: 12px;

    color:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}


.servicios-publicos h2,
.contacto-publico h2 {
    margin: 0 0 36px;

    font-family: Georgia, serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 500;
}


#listaServiciosPublicos {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    max-width: 1200px;
}


.servicio-publico-card {
    position: relative;

    min-height: 330px;
    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    overflow: hidden;

    border: none;
    border-radius: 24px;

    color: #ffffff;
    background:
        linear-gradient(
            rgba(20, 12, 17, 0.10),
            rgba(20, 12, 17, 0.92)
        ),
        #35232d;

    background-size: cover;
    background-position: center;

    text-align: left;
    cursor: pointer;

    box-shadow:
        0 18px 50px
        rgba(49, 26, 39, 0.15);

    transition:
        transform 0.25s ease;
}


.servicio-publico-card:hover {
    transform: translateY(-5px);
}


.servicio-publico-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    font-family: Georgia, serif;
    font-size: 30px;
}


.servicio-publico-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 14px;
}


/* =========================================================
   CONTACTO PÚBLICO
   ========================================================= */

.contacto-publico {
    padding: 90px 7%;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #160e13,
            var(
                --color-secundario,
                #24151e
            )
        );
}


.opciones-contacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}


.opciones-contacto a,
.opciones-contacto p {
    min-width: 180px;
    margin: 0;
    padding: 18px 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 16px;

    color: #ffffff;
    background:
        rgba(255, 255, 255, 0.06);

    font-weight: 650;
    text-decoration: none;
}


/* =========================================================
   PÁGINA PÚBLICA EN CELULAR
   ========================================================= */

@media (max-width: 720px) {

    .portada-negocio {
        min-height: 100svh;
        padding: 0 20px;

        background:
            linear-gradient(
                180deg,
                rgba(18, 10, 15, 0.50),
                rgba(18, 10, 15, 0.96)
            ),
            radial-gradient(
                circle at 70% 20%,
                rgba(217, 78, 144, 0.32),
                transparent 48%
            );
    }


    .navegacion-negocio {
        min-height: 72px;
    }


    .marca-negocio-publica strong {
        font-size: 17px;
    }


    .logo-negocio-publico {
        width: 42px;
        height: 42px;
    }


    .enlaces-negocio {
        display: none;
    }


    .contenido-portada-negocio {
        min-height:
            calc(100svh - 72px);

        padding: 50px 0 70px;
    }


    .contenido-portada-negocio h1 {
        font-size: clamp(47px, 15vw, 68px);
    }


    .contenido-portada-negocio p {
        font-size: 16px;
    }


    .botones-portada {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }


    .boton-comenzar-reserva,
    .boton-contacto-publico {
        width: 100%;
    }


    .servicios-publicos,
    .contacto-publico {
        padding: 70px 20px;
    }


    #listaServiciosPublicos {
        grid-template-columns: 1fr;
    }


    .servicio-publico-card {
        min-height: 280px;
    }


    .opciones-contacto {
        flex-direction: column;
        align-items: stretch;
    }


    .opciones-contacto a,
    .opciones-contacto p {
        width: 100%;
    }
}
/* Los servicios solamente aparecen al iniciar la reserva */

.pagina-negocio
.servicios-publicos {
    display: none;
}


/* =========================================================
   MODAL DE PROFESIONALES
   ========================================================= */

.lista-profesionales-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;

    width: 100%;
    max-height: 55vh;
    padding: 4px 4px 10px;

    overflow-y: auto;
    overscroll-behavior: contain;
}


.profesional-modal-card {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 100%;
    min-height: 82px;
    padding: 13px 16px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(217, 78, 144, 0.18);

    border-radius: 18px;

    color: #24171f;
    background: #ffffff;

    text-align: left;
    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(57, 30, 44, 0.08);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.profesional-modal-card:hover {
    transform: translateY(-2px);

    border-color:
        var(
            --color-principal,
            #d94e90
        );

    background: #fff8fb;
}


.avatar-profesional-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    flex-shrink: 0;

    border-radius: 50%;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(
                --color-principal,
                #d94e90
            ),
            #ad3971
        );

    font-size: 21px;
    font-weight: 800;
}


.datos-profesional-modal {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}


.datos-profesional-modal strong {
    color: #24171f;

    font-family: Georgia, serif;
    font-size: 21px;
}


.datos-profesional-modal small {
    color: #8c7a84;
    font-size: 13px;
}


.flecha-profesional-modal {
    color:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 29px;
}


/* BARRA DE DESPLAZAMIENTO */

.lista-profesionales-modal::-webkit-scrollbar {
    width: 5px;
}


.lista-profesionales-modal::-webkit-scrollbar-track {
    background: #f4edf1;
    border-radius: 10px;
}


.lista-profesionales-modal::-webkit-scrollbar-thumb {
    background:
        var(
            --color-principal,
            #d94e90
        );

    border-radius: 10px;
}


@media (max-width: 560px) {

    .lista-profesionales-modal {
        max-height: 58vh;
    }


    .profesional-modal-card {
        min-height: 76px;
        padding: 11px 13px;
    }


    .avatar-profesional-modal {
        width: 50px;
        height: 50px;
    }


    .datos-profesional-modal strong {
        font-size: 19px;
    }
}

/* =========================================================
   PASO 4 - CONFIRMAR RESERVA
   ========================================================= */

#modalConfirmacion .modal-servicios {
    max-height: 92svh;

    overflow-y: auto;
    overscroll-behavior: contain;
}


.resumen-paso-cuatro {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    padding: 18px;
}


.dato-resumen-paso {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 14px;

    border:
        1px solid
        rgba(217, 78, 144, 0.16);

    border-radius: 14px;

    background: #fff8fb;
}


.dato-resumen-paso small {
    color: #8d7d85;
    font-size: 12px;
}


.dato-resumen-paso strong {
    color: #281a22;
    font-size: 16px;
}


.contenido-confirmacion-modal {
    padding: 0 18px 22px;
}


.contenido-confirmacion-modal
.datos-cliente {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 18px;
}


.contenido-confirmacion-modal
.zona-confirmacion {
    display: flex;
    flex-direction: column;
    gap: 14px;

    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
}


.contenido-confirmacion-modal
.boton-confirmar-reserva {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;
    padding: 0 20px;

    border: none;
    border-radius: 15px;

    color: #ffffff;
    background:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}


.contenido-confirmacion-modal
.boton-confirmar-reserva:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


@media (max-width: 560px) {

    #modalConfirmacion .modal-servicios {
        max-height: 94svh;
    }


    .resumen-paso-cuatro {
        grid-template-columns:
            1fr
            1fr;

        padding: 14px;
    }


    .contenido-confirmacion-modal {
        padding: 0 14px 24px;
    }


    .contenido-confirmacion-modal
    .boton-confirmar-reserva {
        position: sticky;
        bottom: 0;

        box-shadow:
            0 -8px 25px
            rgba(217, 78, 144, 0.22);
    }
}

/* =========================================================
   CONTACTO PÚBLICO
   ========================================================= */

.contacto-publico {
    padding: 80px 6%;
    text-align: center;
    background: #fffafd;
}


.contacto-publico h2 {
    margin: 8px 0 10px;
    color: var(--color-secundario, #191216);
    font-size: clamp(30px, 4vw, 48px);
}


.descripcion-contacto-publico {
    margin: 0 auto 35px;
    color: #897a82;
    font-size: 16px;
}


.opciones-contacto {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;

    width: min(100%, 1050px);
    margin: 0 auto;
}


.tarjeta-contacto {
    align-items: center;
    gap: 15px;

    min-height: 105px;
    padding: 20px;

    border: 1px solid #eadde4;
    border-radius: 20px;

    color: var(--color-secundario, #191216);
    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(35, 20, 28, 0.08);

    text-align: left;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.tarjeta-contacto:hover {
    transform: translateY(-4px);

    border-color:
        var(--color-principal, #d94e90);

    box-shadow:
        0 18px 40px
        rgba(35, 20, 28, 0.14);
}


.icono-contacto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 52px;
    height: 52px;

    border-radius: 16px;

    color: var(--color-principal, #d94e90);
    background: #fbe7f1;

    font-size: 25px;
    font-weight: 800;
}


.informacion-contacto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}


.informacion-contacto small {
    color: var(--color-principal, #d94e90);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}


.informacion-contacto strong {
    overflow-wrap: anywhere;

    color: var(--color-secundario, #191216);
    font-size: 15px;
}


.flecha-contacto {
    color: var(--color-principal, #d94e90);
    font-size: 30px;
    line-height: 1;
}


@media (max-width: 800px) {

    .contacto-publico {
        padding:
            55px
            18px;
    }


    .opciones-contacto {
        grid-template-columns: 1fr;
    }


    .tarjeta-contacto {
        min-height: 92px;
        padding: 17px;
    }

}
.tarjeta-contacto:not([style*="display: none"]) {
    display: flex;
}

/* =========================================================
   AGENDA PÚBLICA SUSPENDIDA
   ========================================================= */

.agenda-suspendida-publica {
    position: fixed;
    inset: 0;
    z-index: 10000;

    align-items: center;
    justify-content: center;

    min-height: 100vh;
    padding: 20px;

    color: #ffffff;
    background:
        radial-gradient(
            circle at top,
            rgba(217, 78, 144, 0.25),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #120d10,
            #28151f
        );

    text-align: center;
}


.agenda-suspendida-publica section {
    width: min(100%, 540px);
    padding: 45px 35px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 27px;

    background:
        rgba(35, 23, 30, 0.96);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.38);
}


.icono-agenda-suspendida {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;
    margin: 0 auto 22px;

    border-radius: 22px;

    color:
        var(
            --color-principal,
            #d94e90
        );

    background:
        rgba(217, 78, 144, 0.14);

    font-size: 36px;
}


.agenda-suspendida-publica span {
    color:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 4px;
}


.agenda-suspendida-publica h1 {
    margin: 14px 0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            32px,
            7vw,
            48px
        );

    line-height: 1.08;
}


.agenda-suspendida-publica p {
    margin: 0 0 18px;

    color: #c4b7bd;

    font-size: 16px;
    line-height: 1.6;
}


.agenda-suspendida-publica small {
    color: #8f8188;
    line-height: 1.5;
}


@media (max-width: 560px) {

    .agenda-suspendida-publica section {
        padding:
            38px
            22px;
    }

}


/* =========================================================
   AJUSTES DE MODALES Y HORARIOS EN CELULAR
   ========================================================= */

@media (max-width: 560px) {

    .fondo-modal-servicios {
        align-items: flex-start;
        padding:
            max(22px, env(safe-area-inset-top))
            10px
            0;

        overflow-y: auto;
        overscroll-behavior: contain;
    }


    .modal-servicios {
        width: 100%;
        min-height:
            calc(
                100svh
                -
                max(22px, env(safe-area-inset-top))
            );
        max-height:
            calc(
                100svh
                -
                max(22px, env(safe-area-inset-top))
            );

        border-radius:
            22px
            22px
            0
            0;

        overflow: hidden;
    }


    .modal-servicios-header {
        position: sticky;
        top: 0;
        z-index: 3;

        flex-shrink: 0;

        background:
            linear-gradient(
                145deg,
                #211a1e,
                #181316
            );
    }


    .lista-servicios-modal,
    .lista-profesionales-modal,
    .contenido-fecha-hora-modal,
    .contenido-confirmacion-modal {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }


    .contenido-fecha-hora-modal {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 18px;

        padding: 18px 16px 90px;
    }


    .contenido-fecha-hora-modal #fecha {
        width: 100%;
        min-height: 52px;
        padding: 0 14px;

        border:
            1px solid
            rgba(217, 78, 144, 0.25);
        border-radius: 14px;

        background: #ffffff;
    }


    .contenido-fecha-hora-modal #horarios {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;

        width: 100%;
        padding-bottom: 26px;
    }


    .contenido-fecha-hora-modal .boton-horario {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 12px 10px;
    }


    #modalConfirmacion .modal-servicios {
        max-height:
            calc(
                100svh
                -
                max(22px, env(safe-area-inset-top))
            );
    }

}


/* =========================================================
   CONFIRMACIÓN FINAL EN PRIMER PLANO
   ========================================================= */

#modalConfirmacion.reserva-confirmada {
    z-index: 12000;
}


#modalConfirmacion.reserva-confirmada
.modal-servicios {
    min-height: min(680px, calc(100svh - 48px));
}


#modalConfirmacion.reserva-confirmada
.modal-indicador,
#modalConfirmacion.reserva-confirmada
.modal-servicios-header,
#modalConfirmacion.reserva-confirmada
.resumen-paso-cuatro,
#modalConfirmacion.reserva-confirmada
.datos-cliente,
#modalConfirmacion.reserva-confirmada
.zona-confirmacion {
    display: none;
}


#modalConfirmacion.reserva-confirmada
.contenido-confirmacion-modal {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 24px;

    overflow-y: auto;
}


#modalConfirmacion.reserva-confirmada
#mensajeReserva {
    width: min(520px, 100%);
    margin: 0;
}


#modalConfirmacion.reserva-confirmada
.confirmacion-reserva {
    padding: 34px 28px;

    text-align: center;

    border-color:
        color-mix(
            in srgb,
            var(--color-principal) 28%,
            white
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.32);
}


.icono-reserva-exitosa {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    margin: 0 auto 20px;

    border-radius: 50%;

    color: #ffffff;
    background:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 35px;
    font-weight: 900;

    box-shadow:
        0 13px 30px
        color-mix(
            in srgb,
            var(--color-principal) 35%,
            transparent
        );
}


.boton-finalizar-reserva {
    width: 100%;
    min-height: 52px;
    margin-top: 15px;

    border: none;
    border-radius: 14px;

    color: #ffffff;
    background:
        var(
            --color-principal,
            #d94e90
        );

    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}


@media (max-width: 560px) {

    #modalConfirmacion.reserva-confirmada {
        align-items: center;
        padding:
            max(16px, env(safe-area-inset-top))
            12px
            max(16px, env(safe-area-inset-bottom));
    }


    #modalConfirmacion.reserva-confirmada
    .modal-servicios {
        min-height: 0;
        max-height: calc(100svh - 32px);

        border-radius: 22px;
    }


    #modalConfirmacion.reserva-confirmada
    .contenido-confirmacion-modal {
        padding: 18px;
    }


    #modalConfirmacion.reserva-confirmada
    .confirmacion-reserva {
        padding: 28px 20px;
    }

}
.grupo-cantidad-cupos{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin:10px 0 16px;border:1px solid color-mix(in srgb,var(--color-principal) 24%,#ddd);border-radius:13px;background:color-mix(in srgb,var(--color-principal) 7%,white)}.grupo-cantidad-cupos b,.grupo-cantidad-cupos small{display:block}.grupo-cantidad-cupos small{margin-top:4px;color:#756a70}.grupo-cantidad-cupos input{width:74px;min-height:44px;text-align:center;border:1px solid #d8cbd0;border-radius:10px;font:inherit;font-weight:800}.boton-horario.horario-con-cupos{min-width:132px}.horario-con-cupos{line-height:1.25}@media(max-width:520px){.grupo-cantidad-cupos{align-items:flex-start}.boton-horario.horario-con-cupos{min-width:calc(50% - 6px);font-size:13px}}
.an-comprobante-cliente{margin-top:18px;padding:17px;border:1px solid #eadce2;border-radius:14px;background:#fff9fb;text-align:left}.an-comprobante-cliente h3{margin:0 0 6px}.an-comprobante-cliente p{font-size:13px;color:#756870}.an-comprobante-cliente input{display:block;width:100%;margin:10px 0}.an-comprobante-cliente button{width:100%;border:0;border-radius:10px;padding:12px;background:var(--color-principal);color:#fff;font-weight:800}.an-comprobante-cliente small{display:block;margin-top:8px}