/* Escape Room Reservas — flujo público de compra.
   Estilo minimal blanco/negro, alineado con los wireframes.

   Colores, tamaños y tipografía viven como variables CSS en :root —
   para personalizarlos sin tocar este fichero, añade un bloque que
   sobreescriba las que quieras en Apariencia > Personalizar > CSS
   adicional, p. ej.:

     :root {
         --erb-color-acento: #8526ff;
         --erb-tamano-titulo: 34px;
     }
*/

:root {
    /* Colores */
    --erb-color-texto: #141414;
    --erb-color-texto-secundario: #4a4a4a;
    --erb-color-gris: #767676;
    --erb-color-gris-claro: #a0a0a0;
    --erb-color-borde: #d0d0d0;
    --erb-color-fondo: #ffffff;
    --erb-color-fondo-suave: #f5f5f5;
    --erb-color-acento: #141414;
    --erb-color-acento-texto: #ffffff;
    --erb-color-error: #b3261e;
    --erb-color-error-fuerte: #c62828;
    --erb-color-error-fondo: #fdecea;
    --erb-color-casi-lleno: #d97706;
    --erb-color-agotado: #c62828;

    /* Tipografía */
    --erb-fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --erb-tamano-titulo: 30px;
    --erb-tamano-titulo-sm: 28px;
    --erb-tamano-subtitulo: 14px;
    --erb-tamano-base: 15px;
    --erb-tamano-pequeno: 13px;
    --erb-tamano-micro: 12px;
    --erb-tamano-mini: 11px;
    --erb-tamano-destacado: 26px;
    --erb-tamano-input: 40px;
    --erb-tamano-rueda-inactiva: 17px;
    --erb-tamano-aviso: 16px;
    --erb-tamano-icono-boton: 20px;
}

.erb-pantalla {
    box-sizing: border-box;
    max-width: 1152px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    color: var(--erb-color-texto);
    font-family: var(--erb-fuente);
}

.erb-pantalla *,
.erb-pantalla *::before,
.erb-pantalla *::after {
    box-sizing: border-box;
}

.erb-paso {
    font-size: var(--erb-tamano-micro);
    letter-spacing: 1px;
    color: var(--erb-color-gris);
    margin-bottom: 6px;
}

.erb-titulo {
    margin: 0;
    font-size: var(--erb-tamano-titulo);
}

.erb-subtitulo {
    margin: 6px 0 0;
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-texto-secundario);
    max-width: 640px;
}

.erb-cargando,
.erb-vacio {
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-gris);
}

.erb-error {
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-error);
}

/* Botones */

.erb-boton {
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--erb-color-texto);
    background: var(--erb-color-fondo);
    color: var(--erb-color-texto);
    padding: 12px 24px;
    font-size: var(--erb-tamano-base);
}

.erb-boton:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.erb-boton--primario {
    background: var(--erb-color-acento);
    color: var(--erb-color-acento-texto);
    padding: 14px 32px;
}

.erb-boton--primario:disabled {
    background: var(--erb-color-gris-claro);
    border-color: var(--erb-color-gris-claro);
}

.erb-boton--icono {
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: var(--erb-tamano-icono-boton);
    line-height: 1;
}

.erb-boton--oscuro {
    background: var(--erb-color-acento);
    color: var(--erb-color-acento-texto);
}

.erb-enlace {
    color: var(--erb-color-texto);
    font-size: var(--erb-tamano-subtitulo);
    text-decoration: underline;
}

.erb-acciones {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.erb-acciones:has(.erb-enlace) {
    justify-content: space-between;
}

/* Variante con bloque de info (enlace + título + subtítulo) a la
   izquierda y un botón a la derecha — p. ej. el pie de "Elegir turno".
   Siempre a dos puntas, aunque no haya enlace (grupo grande). */
.erb-acciones--fin {
    justify-content: space-between;
}

.erb-acciones__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* "¿Sois un grupo de más de 6?": enlace con aspecto de botón. Doble
   clase para ganar a los estilos de enlace del tema. */
.erb-enlace.erb-acciones__grupo {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
    text-align: center;
    text-decoration: none;
    font-size: var(--erb-tamano-base);
    color: var(--erb-color-texto);
}

.erb-enlace.erb-acciones__grupo:hover {
    background: var(--erb-color-fondo-suave);
}

/* Móvil: el bloque de texto de la barra final sube por encima del
   calendario. display: contents deja a su hijo como elemento suelto
   del flex de la pantalla. */
@media (max-width: 767px) {
    #erb-elegir-turno {
        display: flex;
        flex-direction: column;
    }

    #erb-elegir-turno .erb-acciones--fin {
        display: contents;
    }

    #erb-elegir-turno .erb-acciones__info {
        order: 1;
        margin-top: 24px;
    }

    #erb-elegir-turno .erb-elegir-turno__cuerpo {
        order: 2;
    }

    /* Al bajar hasta el horario tras elegir el día: 90 px de la cabecera
       fija de Elementor en móvil + 16 de hueco. */
    #erb-elegir-turno .erb-horario {
        scroll-margin-top: 106px;
    }

    /* A todo el ancho, como los demás botones de las pantallas en móvil. */
    #erb-elegir-turno [data-rol="continuar"] {
        width: 100%;
    }

    #erb-elegir-turno .erb-enlace.erb-acciones__grupo {
        align-self: stretch;
    }
}

.erb-acciones__titulo {
    font-size: var(--erb-tamano-subtitulo);
    font-weight: 700;
    color: var(--erb-color-texto);
}

.erb-acciones__subtitulo {
    font-size: var(--erb-tamano-pequeno);
    color: var(--erb-color-gris);
}

/* Pantalla: Elegir turno */

.erb-elegir-turno__cuerpo {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.erb-calendario {
    flex: 1 1 480px;
    min-width: 320px;
}

/* Pestañas de meses: fila deslizable con una flecha a cada lado. En
   escritorio caben 3 pestañas; en móvil, mes y medio. */
.erb-calendario__meses {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.erb-meses__pista {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.erb-meses__pista::-webkit-scrollbar {
    display: none;
}

.erb-meses__pista .erb-mes-boton {
    flex: 0 0 calc((100% - 16px) / 3);
    scroll-snap-align: start;
    white-space: nowrap;
    text-align: center;
}

.erb-meses__flecha {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--erb-color-borde);
    background: var(--erb-color-fondo);
    color: var(--erb-color-texto);
}

.erb-meses__flecha:disabled {
    cursor: default;
    opacity: 0.3;
}

@media (max-width: 600px) {
    .erb-meses__pista .erb-mes-boton {
        flex-basis: calc((100% - 8px) / 1.5);
    }
}

.erb-mes-boton {
    font-family: inherit;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid var(--erb-color-borde);
    background: var(--erb-color-fondo);
    color: var(--erb-color-texto);
    font-size: var(--erb-tamano-micro);
    letter-spacing: 0.5px;
}

.erb-mes-boton--activo {
    border-color: var(--erb-color-acento);
    background: var(--erb-color-acento);
    color: var(--erb-color-acento-texto);
}

.erb-calendario__cabecera {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    font-size: var(--erb-tamano-mini);
    color: var(--erb-color-gris-claro);
    text-align: center;
    margin-bottom: 8px;
}

.erb-calendario__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.erb-dia {
    font-family: inherit;
    text-align: center;
    padding: 10px 0;
    font-size: var(--erb-tamano-subtitulo);
    border: none;
    background: none;
    color: var(--erb-color-borde);
}

.erb-dia--disponible {
    cursor: pointer;
    color: var(--erb-color-texto);
}

.erb-dia--disponible:hover {
    background: var(--erb-color-fondo-suave);
}

.erb-dia--seleccionado {
    border: 1px solid var(--erb-color-texto);
    background: var(--erb-color-fondo-suave);
    font-weight: 700;
}

.erb-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.erb-dia__precio {
    font-size: var(--erb-tamano-mini);
    font-weight: 400;
    color: var(--erb-color-gris);
}

/* Barrita de color + texto bajo el día. */
.erb-dia__estado {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    border-top: 2px solid currentColor;
    font-size: 7px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.erb-dia--casi-lleno .erb-dia__estado {
    color: var(--erb-color-casi-lleno);
}

.erb-dia--agotado .erb-dia__estado {
    color: var(--erb-color-agotado);
}

.erb-dia--agotado .erb-dia__numero,
.erb-dia--agotado .erb-dia__precio {
    text-decoration: line-through;
}

.erb-dia--festivo .erb-dia__estado {
    color: var(--erb-color-gris);
}

.erb-precio-regla {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    font-size: var(--erb-tamano-micro);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--erb-color-texto);
}

.erb-calendario__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
    font-size: var(--erb-tamano-micro);
    color: var(--erb-color-gris);
}

.erb-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.erb-leyenda::before {
    content: '';
    width: 18px;
    border-top: 2px solid currentColor;
}

.erb-leyenda--casi-lleno::before {
    border-color: var(--erb-color-casi-lleno);
}

.erb-leyenda--agotado::before {
    border-color: var(--erb-color-agotado);
}

.erb-leyenda--festivo::before {
    border-color: var(--erb-color-gris);
}

.erb-horario {
    flex: 1 1 360px;
    min-width: 280px;
}

.erb-horario__titulo {
    font-size: var(--erb-tamano-micro);
    letter-spacing: 1px;
    color: var(--erb-color-gris);
    margin-bottom: 12px;
}

.erb-horario__lista {
    border: 1px solid var(--erb-color-texto);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 96px;
    align-content: flex-start;
}

/* Reloj scroll (elegir hora libremente, luego validar) */

.erb-reloj {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.erb-reloj__rueda {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.erb-reloj__dos-puntos {
    font-size: var(--erb-tamano-destacado);
    font-weight: 700;
    color: var(--erb-color-texto);
}

.erb-rueda {
    width: 64px;
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

.erb-rueda::-webkit-scrollbar {
    display: none;
}

@media (pointer: fine) {
    .erb-rueda {
        cursor: grab;
        user-select: none;
    }
}

/* Durante el arrastre con ratón el snap se quita para que siga al
   cursor; al soltar, el JS lo deja en el valor más cercano. */
.erb-rueda--arrastrando {
    cursor: grabbing;
    scroll-snap-type: none;
}

.erb-rueda:focus-visible {
    outline: 1px dashed var(--erb-color-texto);
    outline-offset: 2px;
}

.erb-rueda__relleno {
    height: 80px;
    scroll-snap-align: none;
}

.erb-rueda__item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: var(--erb-tamano-rueda-inactiva);
    color: var(--erb-color-gris-claro);
}

.erb-rueda__item--actual {
    font-size: var(--erb-tamano-destacado);
    font-weight: 700;
    color: var(--erb-color-texto);
}

.erb-reloj__marco {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    height: 40px;
    border-top: 1px solid var(--erb-color-texto);
    border-bottom: 1px solid var(--erb-color-texto);
    pointer-events: none;
}

.erb-reloj__validar {
    width: 100%;
}

.erb-reloj__resultado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
}

.erb-hora-boton {
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--erb-color-texto);
    background: var(--erb-color-fondo);
    color: var(--erb-color-texto);
    font-size: var(--erb-tamano-subtitulo);
}

.erb-hora-boton--seleccionada {
    background: var(--erb-color-acento);
    color: var(--erb-color-acento-texto);
}

/* Casilla dentro del botón: vacía, y con ✓ en el elegido. Toma el
   color del texto del botón (currentColor), así encaja en los dos estados. */
.erb-hora-boton__casilla {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid currentColor;
}

.erb-hora-boton--seleccionada .erb-hora-boton__casilla::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.erb-hora-boton--completa {
    cursor: not-allowed;
    border-color: var(--erb-color-borde);
    color: var(--erb-color-borde);
    background: var(--erb-color-fondo);
}

.erb-horario__resumen {
    border: 1px solid var(--erb-color-borde);
    background: var(--erb-color-fondo-suave);
    padding: 14px 20px;
    font-size: var(--erb-tamano-subtitulo);
    margin-top: 16px;
}

/* Continuar: siempre lo último del bloque de horario. */
.erb-horario__continuar {
    display: block;
    margin: 16px 0 0 auto;
}

/* Pantalla: Entradas */

.erb-turno-elegido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--erb-color-borde);
    background: var(--erb-color-fondo-suave);
    padding: 14px 20px;
    font-size: var(--erb-tamano-subtitulo);
    margin-bottom: 24px;
}

.erb-turno-elegido a {
    color: var(--erb-color-texto);
    font-weight: 700;
    text-decoration: underline;
}

.erb-stepper {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

.erb-stepper input[type="number"] {
    font-family: inherit;
    width: 80px;
    font-size: var(--erb-tamano-input);
    font-weight: 700;
    text-align: center;
    border: none;
    -moz-appearance: textfield;
}

.erb-stepper__etiqueta {
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-gris);
}

.erb-total {
    border: 1px solid var(--erb-color-texto);
    padding: 16px 24px;
    font-size: var(--erb-tamano-base);
    min-width: 320px;
    text-align: center;
    margin-top: 24px;
    display: inline-block;
}

/* Pantalla: Confirmación y grupo */

.erb-confirmacion__cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.erb-confirmacion__cabecera .erb-titulo {
    font-size: var(--erb-tamano-titulo-sm);
}

.erb-confirmacion__cabecera svg {
    flex-shrink: 0;
}

.erb-confirmacion__cuerpo {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.erb-confirmacion__grupo,
.erb-confirmacion__compartir {
    flex: 1 1 360px;
    min-width: 280px;
}

.erb-confirmacion__plazas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.erb-plaza {
    padding: 12px 16px;
    font-size: var(--erb-tamano-subtitulo);
    box-sizing: border-box;
}

.erb-plaza--pagada {
    border: 1px solid var(--erb-color-texto);
    display: flex;
    justify-content: space-between;
}

.erb-plaza--yo {
    background: var(--erb-color-fondo-suave);
}

.erb-plaza--libre {
    border: 1px dashed var(--erb-color-borde);
    color: var(--erb-color-gris-claro);
}

.erb-confirmacion__enlace {
    border: 1px solid var(--erb-color-texto);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-size: var(--erb-tamano-subtitulo);
    word-break: break-all;
}

.erb-confirmacion__enlace .erb-boton {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: var(--erb-tamano-pequeno);
}

.erb-confirmacion__redes {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.erb-confirmacion__redes .erb-boton {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: var(--erb-tamano-pequeno);
    text-decoration: none;
}

.erb-confirmacion__nota {
    font-size: var(--erb-tamano-pequeno);
    color: var(--erb-color-gris);
    line-height: 1.5;
}

/* Recibo de pago (sustituye al de Redsys) */

.erb-recibo-espera {
    margin-top: 32px;
}

.erb-recibo,
.erb-recibo-contenedor,
.erb-recibo-espera {
    /* Hereda el color del texto de la página (el tema la pinta en
       oscuro o en claro); bordes y etiquetas salen de ese color. */
    color: inherit;
}

.erb-recibo__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.erb-recibo__imprimir {
    padding: 8px 16px;
    font-size: var(--erb-tamano-pequeno);
}

.erb-recibo__datos {
    margin: 0 0 12px;
    border: 1px solid currentColor;
    font-size: var(--erb-tamano-subtitulo);
}

.erb-recibo__fila {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid currentColor;
}

.erb-recibo__fila:first-child {
    border-top: 0;
}

.erb-recibo__fila dt {
    flex: 0 0 200px;
    margin: 0;
    opacity: 0.75;
    font-weight: normal;
}

.erb-recibo__fila dd {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .erb-recibo__fila {
        flex-direction: column;
        gap: 2px;
    }

    .erb-recibo__fila dt {
        flex-basis: auto;
    }
}

.erb-recibo-espera {
    padding: 20px;
    border: 1px solid currentColor;
}

.erb-recibo .erb-confirmacion__nota,
.erb-recibo-espera .erb-confirmacion__nota {
    color: inherit;
    opacity: 0.75;
}

.erb-recibo-espera__titulo {
    margin: 0 0 8px;
    font-size: var(--erb-tamano-aviso);
    font-weight: 600;
}

/* Al imprimir la página de resumen solo sale el recibo. */
@media print {
    html.erb-con-recibo body * {
        visibility: hidden;
    }

    html.erb-con-recibo .erb-recibo,
    html.erb-con-recibo .erb-recibo * {
        visibility: visible;
    }

    html.erb-con-recibo .erb-recibo {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        color: #000 !important;
        background: #fff;
    }

    html.erb-con-recibo .erb-recibo * {
        color: #000 !important;
    }

    html.erb-con-recibo .erb-recibo__imprimir {
        display: none;
    }
}

/* Pantalla: Unirse a un grupo */

.erb-unirse-grupo__cuerpo {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.erb-unirse-grupo__panel {
    flex: 1 1 400px;
    min-width: 280px;
}

.erb-unirse-grupo__pago {
    flex: 1 1 320px;
    min-width: 280px;
    border: 1px solid var(--erb-color-texto);
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: fit-content;
}

.erb-unirse-grupo__pago form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.erb-unirse-grupo__pregunta {
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-gris);
}

.erb-unirse-grupo__libres {
    font-size: var(--erb-tamano-pequeno);
    color: var(--erb-color-gris);
}

.erb-unirse-grupo__continuar {
    width: 100%;
}

/* Pantalla: ¿Cuántos sois? (tamaño de grupo grande) */

.erb-tamano-grupo__opciones {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.erb-tamano-grupo__opcion {
    flex: 1 1 200px;
    border: 1px solid var(--erb-color-texto);
    padding: 24px;
    text-decoration: none;
    color: var(--erb-color-texto);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
}

.erb-tamano-grupo__opcion:hover {
    background: var(--erb-color-fondo-suave);
}

.erb-tamano-grupo__rango {
    font-size: var(--erb-tamano-destacado);
    font-weight: 700;
}

.erb-tamano-grupo__detalle {
    font-size: var(--erb-tamano-pequeno);
    color: var(--erb-color-gris);
}

/* Pantalla: Grupo completo */

.erb-grupo-completo__cuerpo {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.erb-grupo-completo__estado,
.erb-grupo-completo__alternativas {
    flex: 1 1 400px;
    min-width: 280px;
}

.erb-grupo-completo__titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0;
}

.erb-grupo-completo__titulo svg {
    flex-shrink: 0;
}

.erb-grupo-completo__panel {
    margin-top: 16px;
}

.erb-grupo-completo__lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.erb-grupo-completo__turno {
    border: 1px solid var(--erb-color-texto);
    background: var(--erb-color-fondo);
    color: var(--erb-color-texto);
    padding: 16px 20px;
    font-weight: 700;
    font-size: var(--erb-tamano-base);
    text-decoration: none;
    box-sizing: border-box;
}

.erb-grupo-completo__turno:hover {
    background: var(--erb-color-fondo-suave);
}

/* Banner de pago fallido */

.erb-error-pago {
    border: 1px solid var(--erb-color-error-fuerte);
    background: var(--erb-color-error-fondo);
    padding: 16px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.erb-error-pago svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.erb-error-pago__titulo {
    font-weight: 700;
    font-size: var(--erb-tamano-subtitulo);
    color: var(--erb-color-error-fuerte);
}

.erb-error-pago__texto {
    font-size: var(--erb-tamano-pequeno);
    color: var(--erb-color-texto-secundario);
    margin-top: 4px;
}

/* Aviso / error genérico */

.erb-aviso {
    text-align: center;
    padding: 64px 24px;
}

.erb-aviso p {
    font-size: var(--erb-tamano-aviso);
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .erb-elegir-turno__cuerpo {
        gap: 32px;
    }

    .erb-acciones,
    .erb-acciones:has(.erb-enlace) {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 16px;
    }

    .erb-total {
        width: 100%;
    }
}